Home page

frontend/src/App.tsx

@@ -2,13 +2,20 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import Home from './pages/home/Home';
 import { ClientProvider } from './context/ClientContext';
+import EditClient from './pages/editClient/EditClient';
+import WebRoutes from './constants/WebRoutes';
+import CreateClient from './pages/createClient/CreateClient';
+import PageHeader from './components/pageHeader/PageHeader';
 
 function App() {
   return (
     <>
+      <PageHeader />
       <ClientProvider>
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path={WebRoutes.HOME} element={<Home />} />
+          <Route path={WebRoutes.CLIENT_EDIT} element={<EditClient />} />
+          <Route path={WebRoutes.CREATE_CLIENT} element={<CreateClient />} />
         </Routes>
       </ClientProvider>
     </>

frontend/src/components/clientCard/ClientCard.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
 import { GoPencil } from 'react-icons/go';
+import { useNavigate } from 'react-router-dom';
 import IClientsStatus from '../../interfaces/IClientsStatus';
 import ClientStatusCard from '../clientStatus/ClientStatus';
 import formatCpf from '../../utils/formatCpf';
 import formatPhoneNumber from '../../utils/formatPhoneNumber';
 import './style.css';
+import truncatedText from '../../utils/truncatedText';
+import WebRoutes from '../../constants/WebRoutes';
 
 interface ClientCardProps {
   client: IClientsStatus;
 }
 
 function ClientCard({ client }: ClientCardProps) {
-  const truncatedText = (text: string, maxLength: number) => {
-    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+  const navigate = useNavigate();
+
+  const editRedirect = () => {
+    navigate(`${WebRoutes.CLIENT_EDIT_QUERRY_CLIENT_ID}${client.id}`);
   };
 
   return (
@@ -28,10 +33,12 @@ function ClientCard({ client }: ClientCardProps) {
         </span>
         <ClientStatusCard status={client.status.name} />
       </div>
-      <button className="client-card-edit-btn-pencil">
+      <button className="client-card-edit-btn-pencil" onClick={editRedirect} type="button">
         <GoPencil className="client-card-edit-btn-icon-pencil" />
       </button>
-      <button className="client-card-edit-btn">Editar</button>
+      <button className="client-card-edit-btn" type="button" onClick={editRedirect}>
+        Editar
+      </button>
     </div>
   );
 }

frontend/src/constants/WebRoutes.ts

@@ -0,0 +1,8 @@
+enum WebRoutes {
+  HOME = '/',
+  CLIENT_EDIT = '/client/edit',
+  CLIENT_EDIT_QUERRY_CLIENT_ID = '/client/edit?clientId=',
+  CREATE_CLIENT = '/client/create',
+}
+
+export default WebRoutes;

frontend/src/pages/createClient/CreateClient.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function CreateClient() {
+  return <div>CreateClient</div>;
+}
+
+export default CreateClient;

frontend/src/pages/editClient/EditClient.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+function EditClient() {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const clientId = queryParams.get('clientId');
+
+  return <div>hello, {clientId}</div>;
+}
+
+export default EditClient;

frontend/src/pages/home/Home.tsx

@@ -1,29 +1,39 @@
 import React, { useContext, useEffect } from 'react';
-import PageHeader from '../../components/pageHeader/PageHeader';
+import { useNavigate } from 'react-router-dom';
 import ClientListingHeader from '../../components/clientListingHeader/ClientListingHeader';
 import './style.css';
 import { ClientContext } from '../../context/ClientContext';
 import ClientList from '../../components/clientList/ClientList';
+import WebRoutes from '../../constants/WebRoutes';
 
 function Home() {
   const { fetchClientStatus, clientsStatus } = useContext(ClientContext);
+  const navigate = useNavigate();
 
   useEffect(() => {
     (async () => {
       await fetchClientStatus();
     })();
   }, []);
 
+  const createRedirect = () => {
+    navigate(WebRoutes.CREATE_CLIENT);
+  };
+
   return (
     <main>
-      <PageHeader />
       <section className="home-page-container">
         <div className="home-page-listing-container">
           <ClientListingHeader className="home-page-listing-header" />
           <div className="home-page-listing-view">
             <header className="home-page-listing-view-header">
-              <h3>Listagem de usuários</h3>
-              <p>Escolha um cliente para vizualizar os detalhes</p>
+              <div>
+                <h3>Listagem de usuários</h3>
+                <p>Escolha um cliente para vizualizar os detalhes</p>
+              </div>
+              <button type="button" onClick={createRedirect} className="home-page-listing-view-header-new-client-btn">
+                Novo cliente
+              </button>
             </header>
             <ClientList clients={clientsStatus} />
           </div>

frontend/src/pages/home/style.css

@@ -18,16 +18,38 @@
 }
 
 .home-page-listing-view-header {
+  display: flex;
+  justify-content: space-between;
   margin-bottom: 20px;
 }
 
-.home-page-listing-view-header h3 {
+.home-page-listing-view-header div h3 {
   font-weight: 400;
   color: #6B747D;
   margin-bottom: 8px;
 }
 
-.home-page-listing-view-header p {
+.home-page-listing-view-header div p {
   font-weight: 300;
   color: #ACACAC;
 }
+
+.home-page-listing-view-header-new-client-btn {
+  height: 40px;
+  padding: 10px;
+  border-radius: 3px;
+  background-color: #E29934;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+@media (max-width: 530px) {
+  .home-page-listing-view-header {
+    flex-direction: column;
+  }
+
+  .home-page-listing-view-header-new-client-btn {
+    margin-top: 10px;
+  }
+}

frontend/src/utils/truncatedText.ts

@@ -0,0 +1,5 @@
+const truncatedText = (text: string, maxLength: number) => {
+  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+};
+
+export default truncatedText;