[FEAT]: add users list data

.eslintrc.json

@@ -66,11 +66,11 @@
     ],
     "prettier/prettier": [
       "error",
-      {},
       {
         "usePrettierrc": true,
-        "endOfLine": "auto"
+        "singleQuote": true
-      }
+      },
+      {}
     ],
     "jest/valid-title": "off",
     "react/button-has-type": "off",

setupTests.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';

src/business-logic/core/places/common/model/placesModel.ts

@@ -1,9 +1,9 @@
-import Places from "../entity/placeEntity";
+import Places from '../entity/placeEntity';
 
 class PlacesModel {
   private placesList: Places[];
 
-  private modelTitle = "places";
+  private modelTitle = 'places';
 
   constructor(data: Places[]) {
     this.placesList = data;

src/business-logic/core/places/get-places/data/repository/GetPlacesRepo.ts

@@ -1,6 +1,6 @@
-import PlacesModel from "../../../common/model/placesModel";
+import PlacesModel from '../../../common/model/placesModel';
-import getPlacesRO from "../response-object/getPlacesRO";
+import getPlacesRO from '../response-object/getPlacesRO';
-import { GetPlacesResponse } from "../response-object/protocols";
+import { GetPlacesResponse } from '../response-object/protocols';
 
 const getPlacesRepo = async (httpHandler: () => Promise<GetPlacesResponse>) => {
   // call httpHandler

src/business-logic/core/places/get-places/data/repository/IGetPlacesRepo.ts

@@ -1,4 +1,4 @@
-import PlacesModel from "../../../common/model/placesModel";
+import PlacesModel from '../../../common/model/placesModel';
 
 type IGetPlacesRepo = () => Promise<PlacesModel>;
 

src/business-logic/core/places/get-places/data/response-object/getPlacesRO.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { GetPlacesRO, GetPlacesResponse } from "./protocols";
+import { GetPlacesRO, GetPlacesResponse } from './protocols';
 
 const getPlacesRO = (placesResponse: GetPlacesResponse): GetPlacesRO => {
   return placesResponse.map((placeResponse) => {

src/business-logic/core/places/get-places/data/response-object/protocols.ts

@@ -1,4 +1,4 @@
-import Places from "../../../common/entity/placeEntity";
+import Places from '../../../common/entity/placeEntity';
 
 export type GetPlacesResponse = {
   _id: string;

src/business-logic/core/places/get-places/index.ts

@@ -1,3 +1,3 @@
-import getPlaces from "./infra/getPlacesInfra";
+import getPlaces from './infra/getPlacesInfra';
 
 export default getPlaces;

src/business-logic/core/places/get-places/infra/getPlacesInfra.ts

@@ -1,7 +1,7 @@
-import getPlacesRepo from "../data/repository/GetPlacesRepo";
+import getPlacesRepo from '../data/repository/GetPlacesRepo';
-import IGetPlacesRepo from "../data/repository/IGetPlacesRepo";
+import IGetPlacesRepo from '../data/repository/IGetPlacesRepo';
-import GettingPlacesUsecase from "../usecase/getPlaceUsecase";
+import GettingPlacesUsecase from '../usecase/getPlaceUsecase';
-import { IgetPlacesInfra, getPlacesReturnType } from "./protocols";
+import { IgetPlacesInfra, getPlacesReturnType } from './protocols';
 
 const getPlaces = ({ httpHandler }: IgetPlacesInfra): getPlacesReturnType => {
   // get httpHandler

src/business-logic/core/places/get-places/infra/protocols.ts

@@ -1,5 +1,5 @@
-import PlacesModel from "../../common/model/placesModel";
+import PlacesModel from '../../common/model/placesModel';
-import { GetPlacesResponse } from "../data/response-object/protocols";
+import { GetPlacesResponse } from '../data/response-object/protocols';
 
 export interface IgetPlacesInfra {
   httpHandler: () => Promise<GetPlacesResponse>;

src/business-logic/core/places/get-places/port.ts

@@ -1,4 +1,4 @@
-import { getPlacesReturnType, type IgetPlacesInfra } from "./infra/protocols";
+import { getPlacesReturnType, type IgetPlacesInfra } from './infra/protocols';
 
 export default IgetPlacesInfra;
 

src/business-logic/core/places/get-places/usecase/__test__/getPlacesUsecase.test.ts

@@ -1,26 +1,24 @@
-import PlacesModel from "../../../common/model/placesModel";
+import PlacesModel from '../../../common/model/placesModel';
-import IGetPlacesRepo from "../../data/repository/IGetPlacesRepo";
+import IGetPlacesRepo from '../../data/repository/IGetPlacesRepo';
-import { GetPlacesRO } from "../../data/response-object/protocols";
+import { GetPlacesRO } from '../../data/response-object/protocols';
-import GettingPlacesUsecase from "../getPlaceUsecase";
+import GettingPlacesUsecase from '../getPlaceUsecase';
 
 const mockedRO: GetPlacesRO = {
-  availableServices: [""],
+  availableServices: [''],
-  createdAt: "createdAt",
+  createdAt: 'createdAt',
-  id: "id",
+  id: 'id',
-  name: "name",
+  name: 'name',
   parentId: null,
-  placeType: "continent",
+  placeType: 'continent',
-  updatedAt: "updatedTime",
+  updatedAt: 'updatedTime',
   qr: null,
 };
 
 const model = new PlacesModel(mockedRO);
-const mockedRepo: IGetPlacesRepo = jest
+const mockedRepo: IGetPlacesRepo = jest.fn().mockImplementation(async () => model);
-  .fn()
-  .mockImplementation(async () => model);
 
-describe("getting places usecase tests", () => {
+describe('getting places usecase tests', () => {
-  it("call repository on execute usecase", async () => {
+  it('call repository on execute usecase', async () => {
     const usecase = new GettingPlacesUsecase(mockedRepo);
     await usecase.execute();
 

src/business-logic/core/places/get-places/usecase/getPlaceUsecase.ts

@@ -1,5 +1,5 @@
-import PlacesModel from "../../common/model/placesModel";
+import PlacesModel from '../../common/model/placesModel';
-import IGetPlacesRepo from "../data/repository/IGetPlacesRepo";
+import IGetPlacesRepo from '../data/repository/IGetPlacesRepo';
 
 /**
  * this usecase is responsible for calling the repo and returning the places data from the repository

src/business-logic/core/users/common/data/model/usersModel.ts

@@ -1,9 +1,9 @@
-import Users from "../../entity/entity";
+import Users from '../../entity/entity';
 
 class UsersModel {
   private usersList: Users[];
 
-  private modelTitle = "users";
+  private modelTitle = 'users';
 
   constructor(data: Users[]) {
     this.usersList = data;

src/business-logic/core/users/get-users/data/repository/IGetUserRepo.ts

@@ -1,4 +1,4 @@
-import UsersModel from "../../../common/data/model/usersModel";
+import UsersModel from '../../../common/data/model/usersModel';
 
 type IGetUsersRepo = () => Promise<UsersModel>;
 

src/business-logic/core/users/get-users/data/repository/getUserRepo.ts

@@ -1,6 +1,6 @@
-import UsersModel from "../../../common/data/model/usersModel";
+import UsersModel from '../../../common/data/model/usersModel';
-import getUsersResponseObject from "../response-object/usersRO";
+import getUsersResponseObject from '../response-object/usersRO';
-import { GetUsersResponse } from "../response-object/protocols";
+import { GetUsersResponse } from '../response-object/protocols';
 
 const getUsersRepo = async (httpHandler: () => Promise<GetUsersResponse>) => {
   // call httpHandler

src/business-logic/core/users/get-users/data/response-object/usersRO.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import Users from "../../../common/entity/entity";
+import Users from '../../../common/entity/entity';
-import { GetUsersResponse } from "./protocols";
+import { GetUsersResponse } from './protocols';
 
 const getUsersResponseObject = (apiResponse: GetUsersResponse): Users[] => {
   return apiResponse.map((userItem) => {

src/business-logic/core/users/get-users/index.ts

@@ -1,3 +1,3 @@
-import getUsers from "./infra/getUsersInfra";
+import getUsers from './infra/getUsersInfra';
 
 export default getUsers;

src/business-logic/core/users/get-users/infra/getUsersInfra.ts

@@ -1,7 +1,7 @@
-import IGetUsersRepo from "../data/repository/IGetUserRepo";
+import IGetUsersRepo from '../data/repository/IGetUserRepo';
-import getUsersRepo from "../data/repository/getUserRepo";
+import getUsersRepo from '../data/repository/getUserRepo';
-import GettingUsersUsecase from "../usecase/getUsersUsecase";
+import GettingUsersUsecase from '../usecase/getUsersUsecase';
-import { IgetusersInfra, getusersReturnType } from "./protocols";
+import { IgetusersInfra, getusersReturnType } from './protocols';
 
 const getUsers = ({ httpHandler }: IgetusersInfra): getusersReturnType => {
   // get httpHandler

src/business-logic/core/users/get-users/infra/protocols.ts

@@ -1,8 +1,8 @@
-import UsersModel from "../../common/data/model/usersModel";
+import UsersModel from '../../common/data/model/usersModel';
-import { GetUsersResponse } from "../data/response-object/protocols";
+import { GetUsersResponse } from '../data/response-object/protocols';
 
-export interface IgetusersInfra {
+export interface IgetUsersInfra {
   httpHandler: () => Promise<GetUsersResponse>;
 }
 
-export type getusersReturnType = () => Promise<UsersModel>;
+export type getUsersReturnType = () => Promise<UsersModel>;

src/business-logic/core/users/get-users/ports.ts

@@ -0,0 +1,5 @@
+import { getUsersReturnType, type IgetUsersInfra } from './infra/protocols';
+
+export default IgetUsersInfra;
+
+export type getUsersReturnPort = getUsersReturnType;

src/business-logic/core/users/get-users/usecase/getUsersUsecase.ts

@@ -1,5 +1,5 @@
-import UsersModel from "../../common/data/model/usersModel";
+import UsersModel from '../../common/data/model/usersModel';
-import IGetUsersRepo from "../data/repository/IGetUserRepo";
+import IGetUsersRepo from '../data/repository/IGetUserRepo';
 
 /**
  * this usecase is responsible for calling the repo and returning the users data from the repository

src/driven/adapters/get-places-adapter/getPlacesAdapter.ts

@@ -1,9 +1,9 @@
-import { GetPlacesResponse } from "~/business-logic/core/places/get-places/data/response-object/protocols";
+import { GetPlacesResponse } from '~/business-logic/core/places/get-places/data/response-object/protocols';
-import IGetPlacesPort from "~/business-logic/core/places/get-places/port";
+import IGetPlacesPort from '~/business-logic/core/places/get-places/port';
-import { HTTPPovider } from "~/driven/boundaries/http-boundary/httpBoundary";
+import { HTTPPovider } from '~/driven/boundaries/http-boundary/httpBoundary';
-import { HttpOptionsType } from "~/driven/boundaries/http-boundary/protocols";
+import { HttpOptionsType } from '~/driven/boundaries/http-boundary/protocols';
-import { apiUrls } from "~/driven/utils/configs/appConfig";
+import { apiUrls } from '~/driven/utils/configs/appConfig';
-import { getPlacesAdapterReturnType } from "./protocols";
+import { getPlacesAdapterReturnType } from './protocols';
 
 const getPlacesAdapter = (): IGetPlacesPort & getPlacesAdapterReturnType => {
   // url of api
@@ -11,7 +11,7 @@ const getPlacesAdapter = (): IGetPlacesPort & getPlacesAdapterReturnType => {
   // make the options of request
   const options: HttpOptionsType = {
     url,
-    method: "GET",
+    method: 'GET',
   };
   // make the httpHandler
   const httpProvider = new HTTPPovider();

src/driven/adapters/get-users-adapter/getUsersAdapter.ts

@@ -0,0 +1,29 @@
+import { apiUrls } from '~/driven/utils/configs/appConfig';
+import { HttpOptionsType } from '~/driven/boundaries/http-boundary/protocols';
+import { HTTPPovider } from '~/driven/boundaries/http-boundary/httpBoundary';
+import { GetUsersResponse } from '~/business-logic/core/users/get-users/data/response-object/protocols';
+import IGetUsersPort from '~/business-logic/core/users/get-users/ports';
+import { getUsersAdapterReturnType } from './protocols';
+
+const getUsersAdapter = (): IGetUsersPort & getUsersAdapterReturnType => {
+  // url of api
+  const url = apiUrls.core.getUsers;
+  // make the options of request
+  const options: HttpOptionsType = {
+    url,
+    method: 'GET',
+  };
+  // make the httpHandler
+  const httpProvider = new HTTPPovider();
+
+  const httpHandler = async () =>
+    httpProvider.request<GetUsersResponse>(options);
+
+  // return the method
+  return {
+    httpHandler,
+    url,
+  };
+};
+
+export default getUsersAdapter;

src/driven/adapters/get-users-adapter/protocols.ts

@@ -0,0 +1,3 @@
+export type getUsersAdapterReturnType = {
+  url: string;
+};

src/driven/boundaries/http-boundary/httpBoundary.ts

@@ -1,7 +1,7 @@
-import axios from "axios";
+import axios from 'axios';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
-import { ApiGlobalResponseObject } from "~/driven/utils/protocols/serviceProtocols";
+import { ApiGlobalResponseObject } from '~/driven/utils/protocols/serviceProtocols';
-import { HttpOptionsType } from "./protocols";
+import { HttpOptionsType } from './protocols';
 
 export class HTTPPovider {
   async request<R>(customOptions: HttpOptionsType) {
@@ -9,8 +9,8 @@ export class HTTPPovider {
       ...customOptions,
       headers: {
         ...customOptions.headers,
-        mode: "cors",
+        mode: 'cors',
-        credentials: "include",
+        credentials: 'include',
         Authorization: `Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI4NXh0WnA5eThxVDBXVDkwUFpuUkRja3N4LWw0clVyM0tHQW5JSU9DckJNIn0.eyJleHAiOjE2ODQ2Njc2MTEsImlhdCI6MTY4NDU4MTIxMSwianRpIjoiN2VlNzQ5ZTMtMjdhOC00ZTc1LWE4MTAtOTU0MGY5NDdmNjlkIiwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo4MDgwL3JlYWxtcy9kaXBhbF9kZXYiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiY2RmYzY3YzQtZGJkOC00NGVhLWI0OWEtYjQ3MjZhMzNmOTAxIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiY29tZm9ydGVjaCIsInNlc3Npb25fc3RhdGUiOiI3YTFlZDk2OS1lNWY2LTQzZTctOThhMy05OGQ3Zjk3YWM1NDgiLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsiZGVmYXVsdC1yb2xlcy1tYXN0ZXIiLCJvZmZsaW5lX2FjY2VzcyIsInVtYV9hdXRob3JpemF0aW9uIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiY29tZm9ydGVjaCI6eyJyb2xlcyI6WyJ1c2VyIiwib3BlcmF0b3IiXX0sImFjY291bnQiOnsicm9sZXMiOlsibWFuYWdlLWFjY291bnQiLCJtYW5hZ2UtYWNjb3VudC1saW5rcyIsInZpZXctcHJvZmlsZSJdfX0sInNjb3BlIjoiZW1haWwgcHJvZmlsZSIsInNpZCI6IjdhMWVkOTY5LWU1ZjYtNDNlNy05OGEzLTk4ZDdmOTdhYzU0OCIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwicHJlZmVycmVkX3VzZXJuYW1lIjoiKzc3Nzc3Nzc3Nzc3In0.qp1GetUEy2LOZWy6Aaiwf_0d0U8wBqXJQhhuSgIO4RkkEgUnwYZ5fFupkp1iTXZMpqWAsmbRp-C0Z8nYT8Hor6XjnE73XwAVVY0Jbx6HSxtcTBOqo2IT0SmVm6z-TFpgYnErHiFZZgsqP4KYkc12xlQH4SrpN-h-oXN4ZtwuOIG65ixt2yKC-8KTyZzfZGa_8llAtnthQBtxX00MdivFpRP-NU1KfCtJqHSTKn40RNs-Nt8Gi_x7vWv9OKD8h-IIp27oOCJZNyL4aa237cuPw9IWbdiDuUAOgxkPw30i9LIDPA70GvdpRKWgLq0-itcT_hpf2RguuALDafaqoGgoGQ`,
       },
     };

src/driven/boundaries/http-boundary/protocols.ts

@@ -1,3 +1,3 @@
-import { AxiosRequestConfig } from "axios";
+import { AxiosRequestConfig } from 'axios';
 
 export type HttpOptionsType = AxiosRequestConfig;

src/driven/boundaries/router-boundary/index.tsx

@@ -1,9 +1,4 @@
-import {
+import { NavigateFunction, Outlet, useLocation, useNavigate } from 'react-router-dom';
-  NavigateFunction,
-  Outlet,
-  useLocation,
-  useNavigate,
-} from "react-router-dom";
 
 class RouterBoundary {
   outletRoute = () => <Outlet />;

src/driven/boundaries/state-management/index.ts

@@ -1,3 +1,3 @@
-import StateManagementService from "./stateManagementService";
+import StateManagementService from './stateManagementService';
 
 export default StateManagementService;

src/driven/boundaries/state-management/stateManagementService.ts

@@ -1,5 +1,5 @@
-import StateManagementProvider from "./stateManagementProvider";
+import StateManagementProvider from './stateManagementProvider';
-import SwrBoundary from "./swrBoundary";
+import SwrBoundary from './swrBoundary';
 
 export default class StateManagementService implements StateManagementProvider {
   private provider: StateManagementProvider;

src/driven/boundaries/state-management/swrBoundary.ts

@@ -1,5 +1,5 @@
-import useSwr from "swr";
+import useSwr from 'swr';
-import StateManagementProvider from "./stateManagementProvider";
+import StateManagementProvider from './stateManagementProvider';
 
 export default class SwrBoundary implements StateManagementProvider {
   useGetQuery<DataType>(

src/driven/utils/components/buttons/primary-button/PrimaryButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface IPrimaryButtonProps {
   title: string;

src/driven/utils/components/inputs/simple-input/SimpleInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface ISimpleInput {
   title: string;
@@ -9,13 +9,10 @@ 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}>
+      <label className='mb-1 text-txt-second text-xs' htmlFor={title}>
         {title}
       </label>
-      <input
+      <input className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium' id={title} />
-        className="bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium"
-        id={title}
-      />
     </div>
   );
 }

src/driven/utils/components/loading/Loading.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react';
-import style from "./style.module.css";
+import style from './style.module.css';
 
 export default function Loading() {
   return (

src/driven/utils/components/page-title/pageTitle.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface IPageTitleProps {
   title: string;
@@ -7,11 +7,5 @@ interface IPageTitleProps {
 
 export default function PageTitle(props: IPageTitleProps) {
   const { title, className } = props;
-  return (
+  return <div className={`w-full shadow-sm shadow-txt-light font-semibold ${className}`}>{title}</div>;
-    <div
-      className={`w-full shadow-sm shadow-txt-light font-semibold ${className}`}
-    >
-      {title}
-    </div>
-  );
 }

src/driven/utils/configs/appConfig.ts

@@ -1,12 +1,12 @@
-import { icons } from "../constants/assertUrls";
+import { icons } from '../constants/assertUrls';
-import { ENVs } from "../constants/envs";
+import { ENVs } from '../constants/envs';
-import { staticMessages } from "../constants/staticMessages";
+import { staticMessages } from '../constants/staticMessages';
 
 export const appConfig = {};
 
 export const routes = {
-  usersList: "/",
+  usersList: '/',
-  createUser: "/create-user",
+  createUser: '/create-user',
 };
 
 export const routesData = {

src/driven/utils/constants/assertUrls.ts

@@ -1,4 +1,4 @@
-const baseAssetsUrl = "assets/";
+const baseAssetsUrl = 'assets/';
 const baseIconsUrl = `${baseAssetsUrl}icons/`;
 export const icons = {
   logo: `${baseIconsUrl}logo.svg`,

src/driven/utils/constants/staticMessages.ts

@@ -1,24 +1,24 @@
 export const staticMessages = {
   global: {
     errors: {
-      input: "please fill all inputs correctly",
+      input: 'please fill all inputs correctly',
     },
-    users: "Users",
+    users: 'Users',
-    submit: "Submit",
+    submit: 'Submit',
-    fistname: "Firstname",
+    fistname: 'Firstname',
-    lastname: "Lastname",
+    lastname: 'Lastname',
-    place_id: "Place id",
+    place_id: 'Place id',
-    title: "title",
+    title: 'title',
-    status: "Status",
+    status: 'Status',
-    address: "Address",
+    address: 'Address',
-    qrCode: "qrCode",
+    qrCode: 'qrCode',
-    createUser: "Create user",
+    createUser: 'Create user',
-    phoneNumber: "Phone Number",
+    phoneNumber: 'Phone Number',
   },
   service: {
     errors: {
-      500: "server not respond please try again later!",
+      500: 'server not respond please try again later!',
-      401: "Authentication error!",
+      401: 'Authentication error!',
     },
   },
 };

src/driven/utils/helpers/globalHelpers.ts

@@ -1,7 +1,8 @@
+import StateManagementService from '~/driven/boundaries/state-management';
 import {
   errorHandlingStateTypes,
   UIErrorHandling,
-} from "./protocols/globalHelpersProtocols";
+} from './protocols/globalHelpersProtocols';
 
 export const UIErrorHandlingFactory = <DATA_RESPONSE>({
   state,
@@ -16,3 +17,14 @@ export const UIErrorHandlingFactory = <DATA_RESPONSE>({
   message,
   state,
 });
+
+export const prepareStateManagementForVM = <ReturnType>(
+  apiUrl: string,
+  model: () => Promise<ReturnType>
+) => {
+  const stateManagement = StateManagementService.swr();
+
+  const useGetPlacesList = () => stateManagement.useGetQuery(apiUrl, model);
+
+  return useGetPlacesList;
+};

src/driven/utils/helpers/protocols/globalHelpersProtocols.ts

@@ -1,7 +1,7 @@
 export enum errorHandlingStateTypes {
-  error = "error",
+  error = 'error',
-  warning = "warning",
+  warning = 'warning',
-  success = "success",
+  success = 'success',
 }
 
 export type UIErrorHandling<DATA_RESPONSE> = {

src/driven/utils/protocols/serviceProtocols.ts

@@ -1,7 +1,7 @@
-export type RequestMethods = "get" | "post" | "put" | "delete";
+export type RequestMethods = 'get' | 'post' | 'put' | 'delete';
 
 export type ApiGlobalResponseObject<DataType> = {
-  type: "Success" | "client Error" | string;
+  type: 'Success' | 'client Error' | string;
   status: 200 | 400 | 401 | 500 | number;
   message: string;
   description: string;

src/driving/application/core/common/table-row/index.tsx

@@ -1,3 +1,3 @@
-import TableRow from "./infra/TableRowInfra";
+import TableRow from './infra/TableRowInfra';
 
 export default TableRow;

src/driving/application/core/common/table-row/infra/TableRowInfra.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
-import useTableRowVM from "../viewmodel/tableRowVM";
+import useTableRowVM from '../viewmodel/tableRowVM';
-import TableRowView from "../view/TableRow";
+import TableRowView from '../view/TableRow';
-import { ITableRowInfra } from "./protocols";
+import { ITableRowInfra } from './protocols';
 
 export default function TableRow(props: ITableRowInfra) {
   const { rowData, selectedRowId, setSelectedRowId } = props;
@@ -9,11 +9,5 @@ export default function TableRow(props: ITableRowInfra) {
 
   const { isRowSelected } = useTableRowVM({ selectedRowId, rowId });
 
-  return (
+  return <TableRowView isSelected={isRowSelected} rowData={rowData} setSelectedRowId={setSelectedRowId} />;
-    <TableRowView
-      isSelected={isRowSelected}
-      rowData={rowData}
-      setSelectedRowId={setSelectedRowId}
-    />
-  );
 }

src/driving/application/core/common/table-row/view/TableRow.tsx

@@ -1,19 +1,12 @@
-import React from "react";
+import React from 'react';
-import RowItem from "./table-row-item/view/RowItem";
+import RowItem from './table-row-item/view/RowItem';
-import { ITableRowProps } from "./protocols";
+import { ITableRowProps } from './protocols';
 
 export default function TableRowView(props: ITableRowProps) {
   const { isSelected, setSelectedRowId, rowData } = props;
   const { rowId, rowItemsTitle } = rowData;
   const columns = rowItemsTitle.map((rowItemTitle, index) => {
-    return (
+    return <RowItem key={rowItemTitle} hasCheckbox={index === 0} isSelected={isSelected} title={rowItemTitle} />;
-      <RowItem
-        key={rowItemTitle}
-        hasCheckbox={index === 0}
-        isSelected={isSelected}
-        title={rowItemTitle}
-      />
-    );
   });
 
   return <tr onClick={() => setSelectedRowId(rowId)}>{columns}</tr>;

src/driving/application/core/common/table-row/view/table-row-item/view/RowItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface IRowItemProp {
   title: string;
@@ -9,19 +9,15 @@ interface IRowItemProp {
 export default function RowItem(props: IRowItemProp) {
   const { title, hasCheckbox, isSelected } = props;
   return (
-    <td className={`px-1 py-2 ${isSelected ? "bg-primary-100" : ""}`}>
+    <td className={`px-1 py-2 ${isSelected ? 'bg-primary-100' : ''}`}>
-      <div className="w-full flex">
+      <div className='w-full flex'>
         {hasCheckbox && (
           <span
             className={`checkmak-container flex justify-center items-center mr-2 transition-all ${
-              isSelected ? "opacity-100" : "opacity-0"
+              isSelected ? 'opacity-100' : 'opacity-0'
             }`}
           >
-            <span
+            <span className={`${isSelected ? 'visible' : 'hidden'} transition-all`}>&#10003;</span>
-              className={`${isSelected ? "visible" : "hidden"} transition-all`}
-            >
-              &#10003;
-            </span>
           </span>
         )}
         {title}

src/driving/application/core/common/table-row/viewmodel/tableRowVM.ts

@@ -1,4 +1,4 @@
-import { IUserTableRowVM, tableRowVMReturnType } from "./protocols";
+import { IUserTableRowVM, tableRowVMReturnType } from './protocols';
 
 const useTableRowVM = (dependencies: IUserTableRowVM): tableRowVMReturnType => {
   const { rowId, selectedRowId } = dependencies;

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

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

src/driving/application/core/create-user/infra/CreateUser.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react';
-import CreateUserView from "../view/CreateUserView";
+import CreateUserView from '../view/CreateUserView';
 
 export default function CreateUser() {
   return <CreateUserView />;

src/driving/application/core/create-user/view/CreateUserView.tsx

@@ -1,30 +1,18 @@
-import React from "react";
+import React from 'react';
-import PrimaryButton from "~/driven/utils/components/buttons/primary-button/PrimaryButton";
+import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton';
-import SimpleInput from "~/driven/utils/components/inputs/simple-input/SimpleInput";
+import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
 
 export default function CreateUserView() {
   return (
-    <div className="px-4 my-8">
+    <div className='px-4 my-8'>
-      <div className="flex flex-wrap w-full gap-4">
+      <div className='flex flex-wrap w-full gap-4'>
-        <SimpleInput
+        <SimpleInput title={staticMessages.global.fistname} className='mb-4 w-[48%]' />
-          title={staticMessages.global.fistname}
+        <SimpleInput title={staticMessages.global.lastname} className='mb-4 w-[48%]' />
-          className="mb-4 w-[48%]"
+        <SimpleInput title={staticMessages.global.phoneNumber} 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">
+      <div className='flex'>
-        <PrimaryButton
+        <PrimaryButton onClick={() => null} title={staticMessages.global.submit} />
-          onClick={() => null}
-          title={staticMessages.global.submit}
-        />
       </div>
     </div>
   );

src/driving/application/core/places-list/index.tsx

@@ -1,3 +1,3 @@
-import PlacesList from "./infra/PlacesList";
+import PlacesList from './infra/PlacesList';
 
 export default PlacesList;

src/driving/application/core/places-list/infra/PlacesList.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
-import getPlaces from "~/business-logic/core/places/get-places";
+import getPlaces from '~/business-logic/core/places/get-places';
-import getPlacesAdapter from "~/driven/adapters/get-places-adapter/getPlacesAdapter";
+import getPlacesAdapter from '~/driven/adapters/get-places-adapter/getPlacesAdapter';
-import StateManagementService from "~/driven/boundaries/state-management";
+import PlacesModel from '~/business-logic/core/places/common/model/placesModel';
-import PlacesModel from "~/business-logic/core/places/common/model/placesModel";
+import { prepareStateManagementForVM } from '~/driven/utils/helpers/globalHelpers';
-import PlacesListView from "../view/PlacesListView";
+import PlacesListView from '../view/PlacesListView';
-import usePlacesListVM from "../viewmodel/placesListVM";
+import usePlacesListVM from '../viewmodel/placesListVM';
-import placesListModel from "../model/placesListModel";
+import placesListModel from '../model/placesListModel';
 
 const prepareTheLogicForModel = () => {
   const gettingPlacesDrivenAdapter = getPlacesAdapter();
@@ -14,23 +14,14 @@ const prepareTheLogicForModel = () => {
   return { getingPlacesLogic, url };
 };
 
-const prepareStateManagementForVM = (
-  apiUrl: string,
-  placesModel: () => Promise<PlacesModel>
-) => {
-  const stateManagement = StateManagementService.swr();
-
-  const useGetPlacesList = () =>
-    stateManagement.useGetQuery(apiUrl, placesModel);
-
-  return useGetPlacesList;
-};
-
 export default function PlacessList() {
   const { getingPlacesLogic, url } = prepareTheLogicForModel();
   const placesModel = async () => await placesListModel(getingPlacesLogic);
 
-  const useGetPlacesList = prepareStateManagementForVM(url, placesModel);
+  const useGetPlacesList = prepareStateManagementForVM<PlacesModel>(
+    url,
+    placesModel
+  );
   const { selectedRowId, setSelectedRowId, placesData } = usePlacesListVM({
     useGetPlacesList,
   });

src/driving/application/core/places-list/model/placesListModel.ts

@@ -1,4 +1,4 @@
-import { getPlacesModel } from "./protocols";
+import { getPlacesModel } from './protocols';
 
 const placesListModel: getPlacesModel = async (getPlaces) => {
   // get the method for handling the logic

src/driving/application/core/places-list/model/protocols.ts

@@ -1,6 +1,4 @@
-import PlacesModel from "~/business-logic/core/places/common/model/placesModel";
+import PlacesModel from '~/business-logic/core/places/common/model/placesModel';
-import { getPlacesReturnPort } from "~/business-logic/core/places/get-places/port";
+import { getPlacesReturnPort } from '~/business-logic/core/places/get-places/port';
 
-export type getPlacesModel = (
+export type getPlacesModel = (getPlaces: getPlacesReturnPort) => Promise<PlacesModel>;
-  getPlaces: getPlacesReturnPort
-) => Promise<PlacesModel>;

src/driving/application/core/places-list/view/PlacesListView.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
-import Loading from "~/driven/utils/components/loading/Loading";
+import Loading from '~/driven/utils/components/loading/Loading';
-import TableRow from "../../common/table-row";
+import TableRow from '../../common/table-row';
-import { IPlacesListProps } from "./protocols";
+import { IPlacesListProps } from './protocols';
 
 export default function UsersListView(props: IPlacesListProps) {
   const { selectedRowId, setSelectedRowId, placesList } = props;
@@ -10,18 +10,18 @@ export default function UsersListView(props: IPlacesListProps) {
   const rows = () => {
     const placesdata = [
       {
-        id: "1",
+        id: '1',
-        place_id: "6440020b89366fdcaf15a8c2",
+        place_id: '6440020b89366fdcaf15a8c2',
-        title: "flat demoplace	",
+        title: 'flat demoplace	',
-        status: "demo",
+        status: 'demo',
-        address: "demoplace",
+        address: 'demoplace',
       },
       {
-        id: "2",
+        id: '2',
-        place_id: "6440020b89366fdcaf15asdfa",
+        place_id: '6440020b89366fdcaf15asdfa',
-        title: "flat demoplace second	",
+        title: 'flat demoplace second	',
-        status: "demo second",
+        status: 'demo second',
-        address: "demoplace second",
+        address: 'demoplace second',
       },
     ];
 
@@ -32,7 +32,7 @@ export default function UsersListView(props: IPlacesListProps) {
           places.title,
           places.status,
           places.address,
-          "",
+          '',
         ],
         rowId: places.id,
       };

src/driving/application/core/places-list/view/protocols.ts

@@ -1,4 +1,4 @@
-import PlacesModel from "~/business-logic/core/places/common/model/placesModel";
+import PlacesModel from '~/business-logic/core/places/common/model/placesModel';
 
 export interface IPlacesListProps {
   placesList: {

src/driving/application/core/places-list/viewmodel/placesListVM.ts

@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useState } from 'react';
-import PlacesModel from "~/business-logic/core/places/common/model/placesModel";
+import PlacesModel from '~/business-logic/core/places/common/model/placesModel';
-import { placesListReturnType } from "./protocols";
+import { placesListReturnType } from './protocols';
 
 interface IPlacesListVM {
   useGetPlacesList: () => {
@@ -12,7 +12,7 @@ interface IPlacesListVM {
 const usePlacesListVM = (dependencies: IPlacesListVM): placesListReturnType => {
   const { useGetPlacesList } = dependencies;
   const placesData = useGetPlacesList();
-  const [selectedRowId, setSelectedRowId] = useState<string>("");
+  const [selectedRowId, setSelectedRowId] = useState<string>('');
 
   return {
     selectedRowId,

src/driving/application/core/places-list/viewmodel/protocols.ts

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react';
-import PlacesModel from "~/business-logic/core/places/common/model/placesModel";
+import PlacesModel from '~/business-logic/core/places/common/model/placesModel';
 
 export type placesListReturnType = {
   selectedRowId: string;

src/driving/application/core/users-list/index.tsx

@@ -1,3 +1,3 @@
-import UsersList from "./infra/UsersList";
+import UsersList from './infra/UsersList';
 
 export default UsersList;

src/driving/application/core/users-list/infra/UsersList.tsx

@@ -1,11 +1,32 @@
-import React from "react";
+import React from 'react';
-import useUsersListVM from "../viewmodel/usersListVM";
+import getUsersAdapter from '~/driven/adapters/get-users-adapter/getUsersAdapter';
-import UsersListView from "../view/UsersListView";
+import getUsers from '~/business-logic/core/users/get-users';
+import UsersModel from '~/business-logic/core/users/common/data/model/usersModel';
+import { prepareStateManagementForVM } from '~/driven/utils/helpers/globalHelpers';
+import useUsersListVM from '../viewmodel/usersListVM';
+import UsersListView from '../view/UsersListView';
+import usersListModel from '../model/usersListModel';
+
+const prepareTheLogicForModel = () => {
+  const gettingUsersDrivenAdapter = getUsersAdapter();
+  const { url } = gettingUsersDrivenAdapter;
+  const getingusersLogic = getUsers(gettingUsersDrivenAdapter);
+  return { getingusersLogic, url };
+};
 
 export default function UsersList() {
-  const { selectedRowId, setSelectedRowId } = useUsersListVM();
+  const { getingusersLogic, url } = prepareTheLogicForModel();
+  const usersModel = async () => await usersListModel(getingusersLogic);
+  const useGetusersList = prepareStateManagementForVM<UsersModel>(
+    url,
+    usersModel
+  );
+  const { selectedRowId, setSelectedRowId, usersData } = useUsersListVM({
+    useGetusersList,
+  });
   return (
     <UsersListView
+      usersList={usersData}
       selectedRowId={selectedRowId}
       setSelectedRowId={setSelectedRowId}
     />

src/driving/application/core/users-list/model/protocols.ts

@@ -0,0 +1,6 @@
+import UsersModel from '~/business-logic/core/users/common/data/model/usersModel';
+import { getUsersReturnPort } from '~/business-logic/core/users/get-users/ports';
+
+export type getUsersModel = (
+  getUsers: getUsersReturnPort
+) => Promise<UsersModel>;

src/driving/application/core/users-list/model/usersListModel.ts

@@ -0,0 +1,10 @@
+import { getUsersModel } from './protocols';
+
+const usersListModel: getUsersModel = async (getUsers) => {
+  // get the method for handling the logic
+  const users = await getUsers();
+  return users;
+  // handling the errors
+};
+
+export default usersListModel;

src/driving/application/core/users-list/view/UsersListView.tsx

@@ -1,22 +1,22 @@
-import React from "react";
+import React from 'react';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
-import TableRow from "../../common/table-row";
+import TableRow from '../../common/table-row';
-import { IUserListProps } from "./protocols";
+import { IUserListProps } from './protocols';
 
 export default function UsersListView(props: IUserListProps) {
-  const { selectedRowId, setSelectedRowId } = props;
+  const { selectedRowId, setSelectedRowId, usersList } = props;
-
+  console.log(usersList.data);
   const rows = () => {
     const userdata = [
       {
-        id: "1",
+        id: '1',
-        firstname: "behnam",
+        firstname: 'behnam',
-        lastname: "rahimpour",
+        lastname: 'rahimpour',
       },
       {
-        id: "2",
+        id: '2',
-        firstname: "Salar",
+        firstname: 'Salar',
-        lastname: "Sali",
+        lastname: 'Sali',
       },
     ];
 

src/driving/application/core/users-list/view/protocols.ts

@@ -1,4 +1,11 @@
+import UsersModel from '~/business-logic/core/users/common/data/model/usersModel';
+
 export interface IUserListProps {
   selectedRowId: string;
   setSelectedRowId: React.Dispatch<React.SetStateAction<string>>;
+  usersList: {
+    data: UsersModel | undefined;
+    isLoading: boolean;
+    error?: string | undefined;
+  };
 }

src/driving/application/core/users-list/viewmodel/protocols.ts

@@ -1,6 +1,12 @@
-import React from "react";
+import React from 'react';
+import UsersModel from '~/business-logic/core/users/common/data/model/usersModel';
 
 export type userListReturnType = {
   selectedRowId: string;
   setSelectedRowId: React.Dispatch<React.SetStateAction<string>>;
+  usersData: {
+    data: UsersModel | undefined;
+    isLoading: boolean;
+    error?: string | undefined;
+  };
 };

src/driving/application/core/users-list/viewmodel/usersListVM.ts

@@ -1,12 +1,23 @@
-import { useState } from "react";
+import { useState } from 'react';
-import { userListReturnType } from "./protocols";
+import UsersModel from '~/business-logic/core/users/common/data/model/usersModel';
+import { userListReturnType } from './protocols';
 
-const useUsersListVM = (): userListReturnType => {
+interface IUsersListVM {
-  const [selectedRowId, setSelectedRowId] = useState<string>("");
+  useGetusersList: () => {
+    data: UsersModel | undefined;
+    isLoading: boolean;
+    error?: string | undefined;
+  };
+}
+const useUsersListVM = (dependencies: IUsersListVM): userListReturnType => {
+  const { useGetusersList } = dependencies;
+  const [selectedRowId, setSelectedRowId] = useState<string>('');
+  const usersData = useGetusersList();
 
   return {
     selectedRowId,
     setSelectedRowId,
+    usersData,
   };
 };
 

src/driving/application/support/sidebar/index.tsx

@@ -1,3 +1,3 @@
-import Sidebar from "./view/Sidebar";
+import Sidebar from './view/Sidebar';
 
 export default Sidebar;

src/driving/application/support/sidebar/view/Sidebar.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
-import { routesData } from "~/driven/utils/configs/appConfig";
+import { routesData } from '~/driven/utils/configs/appConfig';
-import { icons } from "~/driven/utils/constants/assertUrls";
+import { icons } from '~/driven/utils/constants/assertUrls';
 
 export default function Sidebar() {
   const isCurrentPage = useLocation();
@@ -13,23 +13,21 @@ export default function Sidebar() {
         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
+          isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''
-            ? "bg-primary-300"
-            : ""
         }`}
       >
-        <img src={routesData[key].icon} alt="page icon" className="mr-2" />
+        <img src={routesData[key].icon} alt='page 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">
+    <aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'>
-      <div className="logo">
+      <div className='logo'>
-        <img src={icons.logo} alt="logo icon" />
+        <img src={icons.logo} alt='logo icon' />
       </div>
-      <div className="mt-14 flex flex-col items-baseline">{pages}</div>
+      <div className='mt-14 flex flex-col items-baseline'>{pages}</div>
     </aside>
   );
 }

src/driving/main/App.tsx

@@ -1,6 +1,6 @@
-import { BrowserRouter as RouterWrapper } from "react-router-dom";
+import { BrowserRouter as RouterWrapper } from 'react-router-dom';
-import Router from "./Router/Router";
+import Router from './Router/Router';
-import "./style/App.css";
+import './style/App.css';
 
 function App() {
   return (

src/driving/main/Router/Router.tsx

@@ -1,8 +1,8 @@
-import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import Home from "~/driving/main/pages";
+import Home from '~/driving/main/pages';
-import { routes } from "~/driven/utils/configs/appConfig";
+import { routes } from '~/driven/utils/configs/appConfig';
-import CreateUser from "../pages/CreateUser";
+import CreateUser from '../pages/CreateUser';
-import MainPageLayout from "../pages/layouts/MainPageLayout";
+import MainPageLayout from '../pages/layouts/MainPageLayout';
 
 export default function Router() {
   const location = useLocation();
@@ -13,7 +13,7 @@ export default function Router() {
         <Route index element={<Home />} />
         <Route path={routes.createUser} element={<CreateUser />} />
       </Route>
-      <Route path="*" element={<Navigate to={routes.usersList} replace />} />
+      <Route path='*' element={<Navigate to={routes.usersList} replace />} />
     </Routes>
   );
 }

src/driving/main/index.tsx

@@ -1,6 +1,4 @@
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
-import App from "./App";
+import App from './App';
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
-  <App />
-);

src/driving/main/pages/CreateUser.tsx

@@ -1,15 +1,12 @@
-import React from "react";
+import React from 'react';
-import PageTitle from "~/driven/utils/components/page-title/pageTitle";
+import PageTitle from '~/driven/utils/components/page-title/pageTitle';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
-import CreateUser from "~/driving/application/core/create-user";
+import CreateUser from '~/driving/application/core/create-user';
 
 export default function CreateUserPage() {
   return (
     <>
-      <PageTitle
+      <PageTitle className='px-4 py-5' title={staticMessages.global.createUser} />
-        className="px-4 py-5"
-        title={staticMessages.global.createUser}
-      />
       <CreateUser />
     </>
   );

src/driving/main/pages/index.tsx

@@ -1,23 +1,19 @@
-import React from "react";
+import React from 'react';
-import PrimaryButton from "~/driven/utils/components/buttons/primary-button/PrimaryButton";
+import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton';
-import PageTitle from "~/driven/utils/components/page-title/pageTitle";
+import PageTitle from '~/driven/utils/components/page-title/pageTitle';
-import { staticMessages } from "~/driven/utils/constants/staticMessages";
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
-import PlacesList from "~/driving/application/core/places-list";
+import PlacesList from '~/driving/application/core/places-list';
-import UsersList from "~/driving/application/core/users-list";
+import UsersList from '~/driving/application/core/users-list';
 
 export default function index() {
   return (
     <>
-      <PageTitle className="px-4 py-5" title={staticMessages.global.users} />
+      <PageTitle className='px-4 py-5' title={staticMessages.global.users} />
-      <div className="container mx-auto px-4">
+      <div className='container mx-auto px-4'>
-        <div className="w-full flex flex-row-reverse items-center py-2">
+        <div className='w-full flex flex-row-reverse items-center py-2'>
-          <PrimaryButton
+          <PrimaryButton className='text-sm' title={staticMessages.global.submit} onClick={() => null} />
-            className="text-sm"
-            title={staticMessages.global.submit}
-            onClick={() => null}
-          />
         </div>
-        <div className="md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto">
+        <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'>
           <UsersList />
           <PlacesList />
         </div>

src/driving/main/pages/layouts/MainPageLayout.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react';
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
-import Sidebar from "~/driving/application/support/sidebar";
+import Sidebar from '~/driving/application/support/sidebar';
 
 export default function MainPageLayout() {
   return (
-    <div className="flex flex-nowrap h-screen">
+    <div className='flex flex-nowrap h-screen'>
       <Sidebar />
-      <main className="dipal-panel w-full text-black bg-white h-fit">
+      <main className='dipal-panel w-full text-black bg-white h-fit'>
         <Outlet />
       </main>
     </div>