Merge pull request 'feature/create-user-ui' (#1) from feature/create-user-ui into develop

Reviewed-on: http://10.244.188.80:30210/behnam/diapal-panel/pulls/1

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>

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>

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) {

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>
+  )
+}

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 = {
 

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'
 }

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: {

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;
+} 

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 (

src/driving/application/core/create-user/index.tsx

@@ -0,0 +1,3 @@
+import CreateUser from "./infra/CreateUser";
+
+export default CreateUser;

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 />
+}

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>
+  )
+}

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 RowItem from '../../common/table-row/view/table-row-item/view/RowItem'
-import TableRow from '../../table-row'
+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} />
         })
     }
 

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 RowItem from '../../common/table-row/view/table-row-item/view/RowItem'
-import TableRow from '../../table-row'
+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} />
         })
     }
 

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 (
-    <aside className='w-3/12 min-w-[10rem] [background:var(--color-gradient-primary-dark)]'>
+    <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' : ''}`}>
-        <div className='logo p-4'>
+      <img src={routesData[key].icon} className='mr-2'/>
+      <div>{routesData[key].title}</div>
+    </Link>
+    )
+  })
+
+  return (
+    <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>
   )
 }

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>
   );
 }

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 />
+    </>
+  )
+}

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 />
+      <PageTitle className='px-4 py-5' title={staticMessages.global.users} /><div className='container mx-auto px-4'>
-      <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={() => {}} />
+        <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>
-    
   );
 }

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>
+  )
+}

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,

tailwind.config.cjs

@@ -27,7 +27,10 @@ module.exports = {
         },
         gradient: {
           primary: 'var(--color-gradient-primary-dark)',
-        }
+        },
+        separated: {
+          border: 'var(--color-separated-border)'
+        },
       }
     },
   },