diff --git a/public/assets/icons/createuser.svg b/public/assets/icons/createuser.svg new file mode 100644 index 0000000..081c6c0 --- /dev/null +++ b/public/assets/icons/createuser.svg @@ -0,0 +1,7 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M14 2V8H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M16 13H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M16 17H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M10 9H9H8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/public/assets/icons/users.svg b/public/assets/icons/users.svg new file mode 100644 index 0000000..5c48177 --- /dev/null +++ b/public/assets/icons/users.svg @@ -0,0 +1,6 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/src/driven/boundaries/http-boundary/httpBoundary.ts b/src/driven/boundaries/http-boundary/httpBoundary.ts index b14b43e..f5f5ef5 100644 --- a/src/driven/boundaries/http-boundary/httpBoundary.ts +++ b/src/driven/boundaries/http-boundary/httpBoundary.ts @@ -1,5 +1,5 @@ import axios, { AxiosRequestConfig } from 'axios'; -import { staticMessages } from '~/driven/utils/configs/staticMessages'; +import { staticMessages } from '~/driven/utils/constants/staticMessages'; export class HTTPBoundary { async request<R>(options: AxiosRequestConfig) { diff --git a/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx new file mode 100644 index 0000000..4fd7158 --- /dev/null +++ b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +interface ISimpleInput { + title: string; + className?: string; +} + +export default function SimpleInput(props: ISimpleInput) { + const { title, className } = props; + return ( + <div className={`flex flex-col ${className}`}> + <label className='mb-1 text-txt-second text-xs' htmlFor={title}>{ title }</label> + <input className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium' id={title} /> + </div> + ) +} diff --git a/src/driven/utils/configs/appConfig.ts b/src/driven/utils/configs/appConfig.ts index 923fd3c..dac6474 100644 --- a/src/driven/utils/configs/appConfig.ts +++ b/src/driven/utils/configs/appConfig.ts @@ -1,9 +1,26 @@ +import { icons } from "../constants/assertUrls"; +import { staticMessages } from "../constants/staticMessages"; + export const appConfig = {}; export const routes = { - home: '/', + usersList: '/', + createUser: '/create-user' }; +export const routesData = { + usersList: { + path: routes.usersList, + icon: icons.users, + title: staticMessages.global.users + }, + createUser: { + path: routes.createUser, + icon: icons.createUser, + title: staticMessages.global.createUser + } +} + const baseApiUrl = import.meta.env.BASE_API_URL; export const apiUrls = { diff --git a/src/driven/utils/constants/assertUrls.ts b/src/driven/utils/constants/assertUrls.ts index cc3a18e..0e1fdfa 100644 --- a/src/driven/utils/constants/assertUrls.ts +++ b/src/driven/utils/constants/assertUrls.ts @@ -1,5 +1,7 @@ const baseAssetsUrl = 'assets/'; const baseIconsUrl = baseAssetsUrl + 'icons/'; export const icons = { - logo: baseIconsUrl + 'logo.svg' + logo: baseIconsUrl + 'logo.svg', + users: baseIconsUrl + 'users.svg', + createUser: baseIconsUrl + 'createuser.svg' } \ No newline at end of file diff --git a/src/driven/utils/constants/staticMessages.ts b/src/driven/utils/constants/staticMessages.ts index bc8f038..4641f23 100644 --- a/src/driven/utils/constants/staticMessages.ts +++ b/src/driven/utils/constants/staticMessages.ts @@ -11,7 +11,9 @@ export const staticMessages = { title: 'title', status: 'Status', address: 'Address', - qrCode: 'qrCode' + qrCode: 'qrCode', + createUser: 'Create user', + phoneNumber: 'Phone Number' }, service: { errors: { diff --git a/src/driven/utils/protocols/serviceProtocols.ts b/src/driven/utils/protocols/serviceProtocols.ts index 25ab9c6..3e7fd0b 100644 --- a/src/driven/utils/protocols/serviceProtocols.ts +++ b/src/driven/utils/protocols/serviceProtocols.ts @@ -1 +1,9 @@ export type RequestMethods = 'get' | 'post' | 'put' | 'delete'; + +export type apiGlobalResponseObject<DataType> = { + type: 'Success' | 'client Error' | string; + status: 200 | 400 | 401 | 500 | number; + message: string; + description: string; + data: DataType; +} \ No newline at end of file diff --git a/src/driving/application/core/table-row/index.tsx b/src/driving/application/core/common/table-row/index.tsx similarity index 100% rename from src/driving/application/core/table-row/index.tsx rename to src/driving/application/core/common/table-row/index.tsx diff --git a/src/driving/application/core/table-row/infra/TableRowInfra.tsx b/src/driving/application/core/common/table-row/infra/TableRowInfra.tsx similarity index 100% rename from src/driving/application/core/table-row/infra/TableRowInfra.tsx rename to src/driving/application/core/common/table-row/infra/TableRowInfra.tsx diff --git a/src/driving/application/core/table-row/infra/protocols.ts b/src/driving/application/core/common/table-row/infra/protocols.ts similarity index 100% rename from src/driving/application/core/table-row/infra/protocols.ts rename to src/driving/application/core/common/table-row/infra/protocols.ts diff --git a/src/driving/application/core/table-row/view/TableRow.tsx b/src/driving/application/core/common/table-row/view/TableRow.tsx similarity index 79% rename from src/driving/application/core/table-row/view/TableRow.tsx rename to src/driving/application/core/common/table-row/view/TableRow.tsx index f338599..b84f925 100644 --- a/src/driving/application/core/table-row/view/TableRow.tsx +++ b/src/driving/application/core/common/table-row/view/TableRow.tsx @@ -6,7 +6,7 @@ export default function TableRowView(props: ITableRowProps) { const { isSelected, setSelectedRowId, rowData } = props; const { rowId, rowItemsTitle } = rowData; const columns = rowItemsTitle.map((rowItemTitle, index) => { - return <RowItem hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} /> + return <RowItem key={rowItemTitle} hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} /> }) return ( diff --git a/src/driving/application/core/table-row/view/protocols.ts b/src/driving/application/core/common/table-row/view/protocols.ts similarity index 100% rename from src/driving/application/core/table-row/view/protocols.ts rename to src/driving/application/core/common/table-row/view/protocols.ts diff --git a/src/driving/application/core/table-row/view/table-row-item/view/RowItem.tsx b/src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx similarity index 100% rename from src/driving/application/core/table-row/view/table-row-item/view/RowItem.tsx rename to src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx diff --git a/src/driving/application/core/table-row/viewmodel/protocols.ts b/src/driving/application/core/common/table-row/viewmodel/protocols.ts similarity index 100% rename from src/driving/application/core/table-row/viewmodel/protocols.ts rename to src/driving/application/core/common/table-row/viewmodel/protocols.ts diff --git a/src/driving/application/core/table-row/viewmodel/tableRowVM.ts b/src/driving/application/core/common/table-row/viewmodel/tableRowVM.ts similarity index 100% rename from src/driving/application/core/table-row/viewmodel/tableRowVM.ts rename to src/driving/application/core/common/table-row/viewmodel/tableRowVM.ts diff --git a/src/driving/application/core/create-user/index.tsx b/src/driving/application/core/create-user/index.tsx new file mode 100644 index 0000000..1f35bc6 --- /dev/null +++ b/src/driving/application/core/create-user/index.tsx @@ -0,0 +1,3 @@ +import CreateUser from "./infra/CreateUser"; + +export default CreateUser; \ No newline at end of file diff --git a/src/driving/application/core/create-user/infra/CreateUser.tsx b/src/driving/application/core/create-user/infra/CreateUser.tsx new file mode 100644 index 0000000..efb07df --- /dev/null +++ b/src/driving/application/core/create-user/infra/CreateUser.tsx @@ -0,0 +1,6 @@ +import React from 'react' +import CreateUserView from '../view/CreateUserView' + +export default function CreateUser() { + return <CreateUserView /> +} diff --git a/src/driving/application/core/create-user/view/CreateUserView.tsx b/src/driving/application/core/create-user/view/CreateUserView.tsx new file mode 100644 index 0000000..c80ba27 --- /dev/null +++ b/src/driving/application/core/create-user/view/CreateUserView.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton' +import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput' +import { staticMessages } from '~/driven/utils/constants/staticMessages' + +export default function CreateUserView() { + return ( + <div className='px-4 my-8'> + <div className='flex flex-wrap w-full gap-4'> + <SimpleInput title={staticMessages.global.fistname} className='mb-4 w-[48%]' /> + <SimpleInput title={staticMessages.global.lastname} className='mb-4 w-[48%]'/> + <SimpleInput title={staticMessages.global.phoneNumber} className='mb-4 w-[48%]'/> + </div> + <div className='flex'> + <PrimaryButton onClick={() => {}} title={staticMessages.global.submit} /> + </div> + </div> + ) +} diff --git a/src/driving/application/core/places-list/view/PlacesListView.tsx b/src/driving/application/core/places-list/view/PlacesListView.tsx index ffcbb6b..336da1d 100644 --- a/src/driving/application/core/places-list/view/PlacesListView.tsx +++ b/src/driving/application/core/places-list/view/PlacesListView.tsx @@ -1,6 +1,6 @@ import React from 'react' -import RowItem from '../../table-row/view/table-row-item/view/RowItem' -import TableRow from '../../table-row' +import RowItem from '../../common/table-row/view/table-row-item/view/RowItem' +import TableRow from '../../common/table-row' import { IPlacesListProps } from './protocols' import { staticMessages } from '~/driven/utils/constants/staticMessages'; @@ -49,7 +49,7 @@ export default function UsersListView(props: IPlacesListProps) { ], rowId: places.id, } - return <TableRow rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} /> + return <TableRow key={rowData.rowId} rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} /> }) } diff --git a/src/driving/application/core/users-list/view/UsersListView.tsx b/src/driving/application/core/users-list/view/UsersListView.tsx index d2725db..ad8bb9c 100644 --- a/src/driving/application/core/users-list/view/UsersListView.tsx +++ b/src/driving/application/core/users-list/view/UsersListView.tsx @@ -1,6 +1,6 @@ import React from 'react' -import RowItem from '../../table-row/view/table-row-item/view/RowItem' -import TableRow from '../../table-row' +import RowItem from '../../common/table-row/view/table-row-item/view/RowItem' +import TableRow from '../../common/table-row' import { IUserListProps } from './protocols' import { staticMessages } from '~/driven/utils/constants/staticMessages'; @@ -40,7 +40,7 @@ export default function UsersListView(props: IUserListProps) { ], rowId: user.id, } - return <TableRow rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} /> + return <TableRow key={rowData.rowId} rowData={rowData} selectedRowId={selectedRowId} setSelectedRowId={setSelectedRowId} /> }) } diff --git a/src/driving/application/support/sidebar/view/Sidebar.tsx b/src/driving/application/support/sidebar/view/Sidebar.tsx index ad0f4b8..0af298d 100644 --- a/src/driving/application/support/sidebar/view/Sidebar.tsx +++ b/src/driving/application/support/sidebar/view/Sidebar.tsx @@ -1,12 +1,29 @@ import React from 'react' +import { Link, useLocation } from 'react-router-dom' +import { routesData } from '~/driven/utils/configs/appConfig' import { icons } from '~/driven/utils/constants/assertUrls' export default function Sidebar() { + const isCurrentPage = useLocation() + + const pages = Object.keys(routesData).map(routeKey => { + const key = routeKey as keyof typeof routesData + return ( + <Link key={key} to={routesData[key].path} className={`flex text-white mb-6 text-sm w-full py-2 pl-2 rounded-lg ${ isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''}`}> + <img src={routesData[key].icon} className='mr-2'/> + <div>{routesData[key].title}</div> + </Link> + ) + }) + return ( - <aside className='w-3/12 min-w-[10rem] [background:var(--color-gradient-primary-dark)]'> - <div className='logo p-4'> + <aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'> + <div className='logo'> <img src={icons.logo} alt="logo icon" /> </div> + <div className='mt-14 flex flex-col items-baseline'> + { pages } + </div> </aside> ) } diff --git a/src/driving/main/Router/Router.tsx b/src/driving/main/Router/Router.tsx index 6b15b36..c2506cc 100644 --- a/src/driving/main/Router/Router.tsx +++ b/src/driving/main/Router/Router.tsx @@ -1,14 +1,19 @@ -import { Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom'; +import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import Home from '~/driving/main/pages'; import { routes } from '~/driven/utils/configs/appConfig'; +import CreateUser from '../pages/CreateUser'; +import MainPageLayout from '../pages/layouts/MainPageLayout'; export default function Router() { const location = useLocation(); return ( <Routes location={location} key={location.key}> + <Route element={<MainPageLayout />} > <Route index element={<Home />} /> - <Route path='*' element={<Navigate to={routes.home} replace />} /> + <Route path={routes.createUser} element={<CreateUser />} /> + </Route> + <Route path='*' element={<Navigate to={routes.usersList} replace />} /> </Routes> ); } diff --git a/src/driving/main/pages/CreateUser.tsx b/src/driving/main/pages/CreateUser.tsx new file mode 100644 index 0000000..62fcc0a --- /dev/null +++ b/src/driving/main/pages/CreateUser.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import PageTitle from '~/driven/utils/components/page-title/pageTitle' +import { staticMessages } from '~/driven/utils/constants/staticMessages' +import CreateUser from '~/driving/application/core/create-user' + +export default function CreateUserPage() { + return ( + <> + <PageTitle className='px-4 py-5' title={staticMessages.global.createUser} /> + <CreateUser /> + </> + ) +} diff --git a/src/driving/main/pages/index.tsx b/src/driving/main/pages/index.tsx index f8e0272..008ac54 100644 --- a/src/driving/main/pages/index.tsx +++ b/src/driving/main/pages/index.tsx @@ -8,21 +8,16 @@ import Sidebar from '~/driving/application/support/sidebar'; export default function index() { return ( - <div className='flex flex-nowrap h-screen'> - <Sidebar /> - <main className='dipal-panel w-full text-black bg-white h-fit'> - <PageTitle className='px-4 py-5' title={staticMessages.global.users} /> - <div className='container mx-auto px-4'> - <div className='w-full flex flex-row-reverse items-center py-2'> - <PrimaryButton className='text-sm' title={staticMessages.global.submit} onClick={() => {}} /> - </div> - <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'> - <UsersList /> - <PlacesList /> - </div> - </div> - </main> - </div> - + <> + <PageTitle className='px-4 py-5' title={staticMessages.global.users} /><div className='container mx-auto px-4'> + <div className='w-full flex flex-row-reverse items-center py-2'> + <PrimaryButton className='text-sm' title={staticMessages.global.submit} onClick={() => { } } /> + </div> + <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'> + <UsersList /> + <PlacesList /> + </div> + </div> + </> ); } diff --git a/src/driving/main/pages/layouts/MainPageLayout.tsx b/src/driving/main/pages/layouts/MainPageLayout.tsx new file mode 100644 index 0000000..33fe105 --- /dev/null +++ b/src/driving/main/pages/layouts/MainPageLayout.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Outlet } from 'react-router-dom' +import Sidebar from '~/driving/application/support/sidebar' + +export default function MainPageLayout() { + return ( + <div className='flex flex-nowrap h-screen'> + <Sidebar /> + <main className='dipal-panel w-full text-black bg-white h-fit'> + <Outlet /> + </main> + </div> + ) +} diff --git a/src/driving/main/style/App.css b/src/driving/main/style/App.css index f088622..3e72895 100644 --- a/src/driving/main/style/App.css +++ b/src/driving/main/style/App.css @@ -19,6 +19,7 @@ html,body { --color-primary-100: #C7E4F4; --color-primary-300: #0461B8; --color-primary-200: #80C8EF; + --color-separated-border: #D4D4D4; } th, diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 3a93ff3..a979fbd 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -27,7 +27,10 @@ module.exports = { }, gradient: { primary: 'var(--color-gradient-primary-dark)', - } + }, + separated: { + border: 'var(--color-separated-border)' + }, } }, },