Merge pull request #10 from Pedro0505/home-page

Home page

frontend/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.18.40",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",

frontend/src/App.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import Home from './pages/home/Home';
+import { ClientProvider } from './context/ClientContext';
 
 function App() {
-  return <h1>Hello World!!</h1>;
+  return (
+    <>
+      <ClientProvider>
+        <Routes>
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </ClientProvider>
+    </>
+  );
 }
 
 export default App;

frontend/src/api/handleAxios.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const handlesAxios = axios.create({
+  baseURL: process.env.REACT_APP_PUBLIC_API || 'http://localhost:3001',
+});
+
+export default handlesAxios;

frontend/src/api/routes/clients/getAllClientsAndStatus.ts

@@ -0,0 +1,11 @@
+import ApiRoutes from '../../../constants/ApiRoutes';
+import IClientsStatus from '../../../interfaces/IClientsStatus';
+import handlesAxios from '../../handleAxios';
+
+const getAllClientsAndStatus = async (): Promise<IClientsStatus[]> => {
+  const response = await handlesAxios.get(ApiRoutes.CLIENTS);
+
+  return response.data;
+};
+
+export default getAllClientsAndStatus;

frontend/src/components/clientCard/ClientCard.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { GoPencil } from 'react-icons/go';
+import IClientsStatus from '../../interfaces/IClientsStatus';
+import ClientStatusCard from '../clientStatus/ClientStatus';
+import formatCpf from '../../utils/formatCpf';
+import formatPhoneNumber from '../../utils/formatPhoneNumber';
+import './style.css';
+
+interface ClientCardProps {
+  client: IClientsStatus;
+}
+
+function ClientCard({ client }: ClientCardProps) {
+  const truncatedText = (text: string, maxLength: number) => {
+    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+  };
+
+  return (
+    <div className="client-card">
+      <div className="client-card-content">
+        <span className="client-card-name-email-container">
+          <p title={client.name}>{truncatedText(client.name, 30)}</p>
+          <p title={client.email}>{truncatedText(client.email, 30)}</p>
+        </span>
+        <span className="client-card-cpf-phoneNumber-container">
+          <p>{formatCpf(client.cpf)}</p>
+          <p>{formatPhoneNumber(client.phoneNumber)}</p>
+        </span>
+        <ClientStatusCard status={client.status.name} />
+      </div>
+      <button className="client-card-edit-btn-pencil">
+        <GoPencil className="client-card-edit-btn-icon-pencil" />
+      </button>
+      <button className="client-card-edit-btn">Editar</button>
+    </div>
+  );
+}
+
+export default ClientCard;

frontend/src/components/clientCard/style.css

@@ -0,0 +1,75 @@
+.client-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 20px;
+  padding: 15px;
+  border: 1px solid #dfdfdf;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.client-card-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+}
+
+.client-card-name-email-container,
+.client-card-cpf-phoneNumber-container {
+  display: grid;
+  gap: 5px;
+}
+
+.client-card-name-email-container p {
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+.client-card-name-email-container > *:first-child,
+.client-card-cpf-phoneNumber-container> *:first-child {
+  color: #898686;
+}
+
+.client-card-name-email-container > *:last-child,
+.client-card-cpf-phoneNumber-container> *:last-child {
+  color: #afaeae;
+}
+
+.client-card-edit-btn-pencil {
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid #E29934;
+  background-color: #fff;
+  color: #E29934;
+  display: none;
+}
+
+.client-card-edit-btn-icon-pencil {
+  font-size: 1.2em;
+}
+
+.client-card-edit-btn {
+  background-color: #fff;
+  color: #E29934;
+  padding: 10px 30px;
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid #E29934;
+}
+
+.client-card-edit-btn:hover {
+  background-color: #E29934;
+  color: #fff;
+}
+
+@media (max-width: 585px) {
+  .client-card-edit-btn-pencil {
+    display: block;
+  }
+
+  .client-card-edit-btn {
+    display: none;
+  }
+}

frontend/src/components/clientList/ClientList.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import IClientsStatus from '../../interfaces/IClientsStatus';
+import ClientCard from '../clientCard/ClientCard';
+
+interface ClientListProps {
+  clients: IClientsStatus[];
+}
+
+function ClientList({ clients }: ClientListProps) {
+  return (
+    <section>
+      {clients.map(e => (
+        <ClientCard key={e.id} client={e} />
+      ))}
+    </section>
+  );
+}
+
+export default ClientList;

frontend/src/components/clientListingHeader/ClientListingHeader.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LuUser } from 'react-icons/lu';
+import './style.css';
+
+interface ClientListingHeaderProps {
+  className?: string;
+}
+
+function ClientListingHeader({ className }: ClientListingHeaderProps) {
+  return (
+    <div className={className ? `client-listing-header-container ${className}` : 'client-listing-header-container'}>
+      <LuUser className="client-listing-header-user-icon" />
+      <p className="client-listing-header-content">Painel de Clientes</p>
+    </div>
+  );
+}
+
+export default ClientListingHeader;

frontend/src/components/clientListingHeader/style.css

@@ -0,0 +1,14 @@
+.client-listing-header-container {
+  display: flex;
+  width: fit-content;
+}
+
+.client-listing-header-content,
+.client-listing-header-user-icon {
+  font-size: 1.7em;
+  color: #474747;
+}
+
+.client-listing-header-user-icon {
+  margin-right: 15px;
+}

frontend/src/components/clientStatus/ClientStatus.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import TypeClientStatus from '../../interfaces/TypeClientStatus';
+import './style.css';
+
+interface ClientStatusCardProps {
+  status: TypeClientStatus;
+}
+
+function ClientStatusCard({ status }: ClientStatusCardProps) {
+  const statusColor = {
+    Ativo: 'status-active',
+    Inativo: 'status-inactive',
+    'Aguardando ativação': 'status-awaiting-activation',
+    Desativado: 'status-disabled',
+  };
+
+  return (
+    <div className="client-card-status-container">
+      <div className={`${statusColor[status]} client-status-color`} />
+      <p>{status}</p>
+    </div>
+  );
+}
+
+export default ClientStatusCard;

frontend/src/components/clientStatus/style.css

@@ -0,0 +1,28 @@
+.status-active {
+  background-color: #4AAD5B;
+}
+
+.status-inactive {
+  background-color: #D63240;
+}
+
+.status-awaiting-activation {
+  background-color: #D3A710;
+}
+
+.status-disabled {
+  background-color: #D2D2D2;
+}
+
+.client-status-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  margin-right: 5px;
+}
+
+.client-card-status-container {
+  display: flex;
+  color: #9e9e9e;
+  align-items: center;
+}

frontend/src/components/pageHeader/PageHeader.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import uolLogo from '../../assets/uol-logo.png';
+import './style.css';
+
+function PageHeader() {
+  return (
+    <header className="page-header-container">
+      <img src={uolLogo} alt="Logo da uol e do lado o nome Uol" className="page-header-uol-logo" />
+    </header>
+  );
+}
+
+export default PageHeader;

frontend/src/components/pageHeader/style.css

@@ -0,0 +1,11 @@
+.page-header-container {
+  background-color: #333333;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+.page-header-uol-logo {
+  height: 38px;
+}

frontend/src/constants/ApiRoutes.ts

@@ -0,0 +1,5 @@
+enum ApiRoutes {
+  CLIENTS = '/clients',
+}
+
+export default ApiRoutes;

frontend/src/constants/ClientStatus.ts

@@ -0,0 +1,8 @@
+enum ClientStatus {
+  ATIVO = 'Ativo',
+  INATIVO = 'Inativo',
+  AGUARDANDO_ATIVACAO = 'Aguardando ativação',
+  DESATIVADO = 'Desativado',
+}
+
+export default ClientStatus;