first

2024-06-09 20:57:45 +03:00 · 2024-06-09 20:57:45 +03:00 · bde37704eb
commit bde37704eb
parent f3001671b6
227 changed files with 10367 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+pnpm-lock.ymal
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-lock.yaml
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,12 @@
+{
+    "cSpell.words": [
+        "aldeen",
+        "antd",
+        "Datepicker",
+        "formik",
+        "Karim",
+        "queryqlent",
+        "szhsin",
+        "Viewelement"
+    ]
+}
--- a/db.json
+++ b/db.json
@ -0,0 +1,76 @@
+{
+  "example": [
+    {
+      "id": 1,
+      "name": "ibrahim",
+      "email": "ibrahim@gmail.com"
+    },
+    {
+      "id": 2,
+      "name": "gregr",
+      "email": "ibrahimgmail.com"
+    },
+    {
+      "id": 3,
+      "name": "mhmad",
+      "email": "mhmad@gmial.com"
+    },
+    {
+      "id": 4,
+      "name": "soso",
+      "email": "soso@gmail.com"
+    },
+    {
+      "id": 5,
+      "name": "few",
+      "email": "jfpwrej"
+    },
+    {
+      "id": 6,
+      "name": "sos",
+      "email": "fdwf"
+    },
+    {
+      "id": 7,
+      "name": "sos",
+      "email": "fdwf"
+    },
+    {
+      "id": 8,
+      "name": "sos",
+      "email": "fdwf"
+    }
+  ],
+  "test2":[
+
+    
+    {
+      "id":1,
+      "email":"admin@adamin.com"
+    }
+    ,
+    {
+      "id":1,
+      "email":"admin@adamin.com"
+    }
+    ,
+    {
+      "id":1,
+      "email":"admin@adamin.com"
+    }
+    
+    ,  {
+      "id":1,
+      "email":"admin@adamin.com"
+    }
+    
+  ], 
+  "users": [
+    {
+      "id": 1,
+      "email": "admin@adamin.com",
+      "password": "password",
+      "token": "token"
+    }
+  ]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+ 
+    <title>E-Menu - App</title>
+  </head>
+  <script type="module" src="/src/index.tsx"></script>
+  <body>
+    <div id="root"></div>
+   
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,72 @@
+{
+    "name": "my-app",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@ant-design/icons": "^4.8.3",
+        "@types/node": "^16.18.97",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "antd": "^5.17.4",
+        "apexcharts": "^3.49.1",
+        "axios": "^1.7.2",
+        "bootstrap": "^5.3.3",
+        "chart.js": "^4.4.3",
+        "dayjs": "^1.11.11",
+        "formik": "^2.4.6",
+        "i18next": "^23.11.5",
+        "leaflet": "^1.9.4",
+        "react": "^18.3.1",
+        "react-apexcharts": "^1.4.1",
+        "react-bootstrap": "^2.10.2",
+        "react-bootstrap-sweetalert": "^5.2.0",
+        "react-confirm-alert": "^3.0.6",
+        "react-data-table-component": "^7.6.2",
+        "react-dom": "^18.3.1",
+        "react-i18next": "^13.5.0",
+        "react-icons": "^4.12.0",
+        "react-leaflet": "^4.2.1",
+        "react-number-format": "^5.4.0",
+        "react-player": "^2.16.0",
+        "react-query": "^3.39.3",
+        "react-router-dom": "^6.23.1",
+        "react-select": "^5.8.0",
+        "react-tabs": "^6.0.2",
+        "react-toastify": "^9.1.3",
+        "reactstrap": "^9.2.2",
+        "sass": "^1.77.4",
+        "typescript": "^4.9.5",
+        "web-vitals": "^2.1.4",
+        "xlsx": "^0.18.5",
+        "yup": "^1.4.0",
+        "zustand": "^4.5.2"
+    },
+    "scripts": {
+        "start": "vite",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@types/leaflet": "^1.9.12",
+        "@types/react-toggle": "^4.0.5"
+    }
+}
--- a/public/Layout/LoginBg.jpg
+++ b/public/Layout/LoginBg.jpg
--- a/public/Layout/images.png
+++ b/public/Layout/images.png
--- a/public/Logo.png
+++ b/public/Logo.png
--- a/public/Logo_2.png
+++ b/public/Logo_2.png
--- a/public/language/ar.svg
+++ b/public/language/ar.svg
--- a/public/language/de.svg
+++ b/public/language/de.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.2 38.4"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M3.03 0h49.13c1.67 0 3.03 1.36 3.03 3.03v32.33c0 1.66-1.36 3.02-3.02 3.03H3.02C1.36 38.4 0 37.03 0 35.37V3.03C0 1.36 1.36 0 3.03 0z"/><path d="M0 12.8h55.2v22.57c0 1.67-1.36 3.03-3.03 3.03H3.03C1.36 38.4 0 37.04 0 35.37V12.8z" fill="#d00"/><path d="M0 25.6h55.2v9.77c0 1.66-1.36 3.02-3.02 3.03H3.03A3.04 3.04 0 010 35.37V25.6z" fill="#ffce00"/></g></svg>
--- a/public/language/en.svg
+++ b/public/language/en.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.67" height="32" viewBox="0 0 640 480"><defs><clipPath id="flagUm4x30"><path fill-opacity=".7" d="M0 0h682.7v512H0z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#flagUm4x30)" transform="scale(.9375)"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z"/><path fill="#fff" d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z"/></g><path fill="#192f5d" d="M0 0h389.1v275.7H0z"/><path fill="#fff" d="M32.4 11.8L36 22.7h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57L74 67.9l-9-6.7l-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5L330 57l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 66.9L36 78h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 122.1L36 133h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5L103 250l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9H177l-9 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.5z"/></g></svg>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/public/test.mp4
+++ b/public/test.mp4
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,69 @@
+import { Fragment, lazy, Suspense } from 'react';
+import { Route, Routes } from 'react-router-dom'
+import Loading from './Components/Utils/Loading/Loading';
+import { RoutesLinks } from './Routes';
+import Layout from './Layout/app/Layout';
+import Auth from './Pages/Auth/Page';
+const Page404 = lazy(() => import("./Layout/app/NotFoundPage"))
+
+const App = () => {
+
+
+  return (
+    <Routes >
+      {/* 404 Page */}
+      <Route path="*" element={<Suspense fallback={<Loading />}> <Page404 /></Suspense>} />
+      {/* Login Page  */}
+      <Route path="/auth" element={<Suspense fallback={<Loading />}> <Auth /></Suspense>} />      
+
+      {/* route not in navigation */}
+
+
+      {/* All Routes */}
+      {RoutesLinks?.map((item: any, index: number) => (
+
+        <Fragment key={index}>
+
+
+        if(item?.element){
+            <Route  
+            key={index}
+          path={item.href}
+           element={
+          <Suspense fallback={<Loading />} >
+            <Layout>  
+              {item?.element ?? "Please Add Element Props in Routes"}
+            </Layout>
+           </Suspense>
+           } 
+            />
+        }else{
+          item?.children?.map((item:any)=>{
+            return(
+              <Route 
+          path={item.href}
+           element={
+          <Suspense fallback={<Loading />} >
+            <Layout>  
+              {item?.element ?? "Please Add Element Props in Routes"}
+            </Layout>
+           </Suspense>
+           } 
+            />
+            )
+          })
+          
+        }
+        
+        </Fragment>
+
+      ))
+      }
+    </Routes>
+
+
+
+  )
+}
+
+export default App
--- a/src/Components/Columns/ColumnsImage.tsx
+++ b/src/Components/Columns/ColumnsImage.tsx
@ -0,0 +1,85 @@
+import {
+  DownloadOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
+import React from 'react';
+import { Image, Space } from 'antd';
+import {  ImageBaseURL } from '../../api/config';
+import useImageError from '../../Hooks/useImageError';
+
+
+const ColumnsImage= ({src}:any) => {
+   const ErrorImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png"
+    
+  const imageUrl = ImageBaseURL + src || ErrorImage;
+    
+  const handleError = useImageError;
+  // or you can download flipped and rotated image
+  // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
+  const onDownload = () => {
+    fetch(src)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'image.png';
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(url);
+        link.remove();
+      });
+  };
+
+  return (
+    <Image
+      width={45}
+      height={45}
+      src={imageUrl }
+      className='p-1 mb-1 columnImage '
+      preview={{
+        toolbarRender: (
+          _,
+          {
+            transform: { scale },
+            actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
+          },
+        ) => (
+          <Space size={12} className="toolbar-wrapper">
+            <DownloadOutlined onClick={onDownload} />
+            <SwapOutlined rotate={90} onClick={onFlipY} />
+            <SwapOutlined onClick={onFlipX} />
+            <RotateLeftOutlined onClick={onRotateLeft} />
+            <RotateRightOutlined onClick={onRotateRight} />
+            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+          </Space>
+        ),
+      }}
+      onError={handleError}
+
+    />
+  );
+};
+
+export default ColumnsImage;
+
+
+
+
+
+
+
+// {
+//   name: t("image"),
+//   center: "true",
+//   cell: (row: any) => {
+//     return (
+//       <ColumnsImage src={row?.image} />
+//     )
+//   }
+// },
--- a/src/Components/Columns/ColumnsSwitch.tsx
+++ b/src/Components/Columns/ColumnsSwitch.tsx
@ -0,0 +1,42 @@
+import { Switch } from 'antd'
+import React from 'react'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { useFormikContext } from 'formik';
+export interface ColumnsSwitchProps {
+  name: string;
+  Front?: string;
+  Back?: string;
+  onChange?: (checked:any,event:any) => any;
+  icon?: boolean
+  Checked?:boolean
+
+}
+const ColumnsSwitch = (props: ColumnsSwitchProps) => {
+  const { name, Front, Back, icon, onChange } = props;
+    const formik = useFormikContext<any>();
+    const onSwitchChange = (checked: boolean, event: Event) => {
+    // formik.setFieldValue("status", checked)
+
+    
+
+  };
+  return (
+    <Switch
+      checkedChildren={icon ? <CheckOutlined /> : Front}
+      unCheckedChildren={icon ? <CloseOutlined /> : Back}
+      onChange={ (checked:any,event:any)=> onChange ? onChange(checked,event) : onSwitchChange(checked,event)}
+    />
+  )
+}
+
+export default ColumnsSwitch
+
+
+ColumnsSwitch.defaultProps = {
+  Front: "Front",
+  Back: "Back",
+  onChange: undefined,
+  icon: false,
+  Checked:false
+
+};
--- a/src/Components/Ui/Alert.tsx
+++ b/src/Components/Ui/Alert.tsx
@ -0,0 +1,50 @@
+import React from "react";
+import { confirmAlert } from "react-confirm-alert";
+import SweetAlert from "react-bootstrap-sweetalert";
+import { useTranslation } from "react-i18next";
+
+export default function CustomConfirmAlert(options : any) {
+  confirmAlert({
+    customUI: ({ onClose }) => <CustomUI onClose={onClose} options={options} />,
+  });
+}
+
+type CustomUIProps ={
+    onClose :()=> void
+    options:{
+        title?:string
+        confirmBtnText:string 
+        cancelBtnText:string 
+        body:string
+        onConfirm:()=>void 
+
+
+    }
+}
+function CustomUI({ onClose, options }:CustomUIProps) {
+
+
+  const [t] = useTranslation()
+  return (
+    <div className="">
+  <SweetAlert
+      title={options.title || t(`delete_are_you_sure`)}
+      customClass="SweetAlert"
+      warning
+      show={true}
+      showCancel
+      reverseButtons
+      cancelBtnBsStyle="danger"
+      confirmBtnText={options.confirmBtnText || t("yes_delete_it")}
+      cancelBtnText={options.cancelBtnText || t("cancel")}
+      onConfirm={() => {
+        options.onConfirm();
+        onClose();
+      }}
+      onCancel={onClose}
+      
+    />
+    </div>
+  
+  );
+}
--- a/src/Components/Ui/CheckboxesVuexy.tsx
+++ b/src/Components/Ui/CheckboxesVuexy.tsx
@ -0,0 +1,49 @@
+import React from 'react';
+
+interface CheckBoxesVuexyProps {
+  className?: string;
+  color: string;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  value?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  onChange?: () => void;
+  size?: string;
+  icon: React.ReactNode;
+  label: string;
+}
+
+const CheckBoxesVuexy: React.FC<CheckBoxesVuexyProps> = ({
+  className = '',
+  color,
+  defaultChecked,
+  checked,
+  value,
+  disabled,
+  onClick,
+  onChange,
+  size = 'md',
+  icon,
+  label,
+}) => {
+  return (
+    <div className={`vx-checkbox-con ${className} vx-checkbox-${color}`}>
+      <input
+        type="checkbox"
+        defaultChecked={defaultChecked}
+        checked={checked}
+        value={value}
+        disabled={disabled}
+        onClick={onClick}
+        onChange={onChange}
+      />
+      <span className={`vx-checkbox vx-checkbox-${size}`}>
+        <span className="vx-checkbox--check">{icon}</span>
+      </span>
+      <span>{label}</span>
+    </div>
+  );
+};
+
+export default CheckBoxesVuexy;
--- a/src/Components/Ui/FileInput.tsx
+++ b/src/Components/Ui/FileInput.tsx
@ -0,0 +1,27 @@
+import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Input } from 'reactstrap';
+import { useFormikContext } from 'formik';
+
+type FileInputProps =  {
+  name:string,
+  label:string,
+  accept:string,
+  onChange:any
+}
+function FileInput({name , accept="image/*" ,label , onChange} :FileInputProps) {
+
+  
+  return (
+    <div className="custom-file-input">
+    <label className="custom-file-label" htmlFor="inputGroupFile01">
+      {label}
+    </label>
+    <Input accept={accept} id="inputGroupFile01"  name={name} onChange={onChange}
+     type="file" className="custom-file-input" />
+  
+  </div>
+  )
+}
+
+export default FileInput
--- a/src/Components/Ui/HovarableImage.tsx
+++ b/src/Components/Ui/HovarableImage.tsx
@ -0,0 +1,37 @@
+import React from "react";
+import { Tooltip } from "reactstrap";
+
+const tooltipStyle = {
+  backgroundColor: "white",
+  border: "2px solid lightgrey",
+  maxWidth: "400px",
+};
+
+const HovarableImage = ({ id, src, imgPreviewProps = {}, ...props }:any) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const ID = `image_hover_tooltip_${id}`;
+  const toggleTooltip = React.useCallback(() => setIsOpen((prev) => !prev), []);
+  
+  return (
+    <div style={{marginInline:"20px"}}>
+      <img id={ID} src={src} alt={props.alt} {...props}  style={{ maxWidth:"300px", maxHeight:'50px'}}/>
+      <Tooltip
+        placement="left"
+        isOpen={isOpen}
+        target={ID}
+        toggle={toggleTooltip}
+        style={tooltipStyle}
+      >
+        <img
+          style={{ maxWidth:"300px", maxHeight:'150px'}}
+          src={src}
+          alt={props.alt}
+          {...imgPreviewProps}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+export default HovarableImage;
+
--- a/src/Components/Ui/ImagePreview.tsx
+++ b/src/Components/Ui/ImagePreview.tsx
@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const ImagePreview = ({ preview, height = 200 }:any) => {
+  const [t] = useTranslation();
+
+  return (
+    <div
+      style={{
+        border: "1px solid lightgray",
+        height: `${height}px`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {preview ? (
+        <img
+          className="p-1"
+          style={{
+            maxWidth: "100%",
+          }}
+          height={height}
+          src={preview}
+          alt=""
+        />
+      ) : (
+        <div>{t("image_preview")}</div>
+      )}
+    </div>
+  );
+};
+
+export default ImagePreview;
--- a/src/Components/Ui/LoadingButton.tsx
+++ b/src/Components/Ui/LoadingButton.tsx
@ -0,0 +1,13 @@
+import React from "react";
+import { Button, Spinner } from "reactstrap";
+
+const LoadingButton = ({ isLoading = false, ...props }) => {
+  return (
+    <Button className="btn-primary" disabled={isLoading} {...props}>
+      {isLoading ? <Spinner style={{ marginRight: "10px" }} size="sm" /> : null}
+      <span >{props.children}</span>
+    </Button>
+  );
+};
+
+export { LoadingButton };
--- a/src/Components/Ui/LoadingSpinner.tsx
+++ b/src/Components/Ui/LoadingSpinner.tsx
@ -0,0 +1,10 @@
+import { Spin } from 'antd'
+import React from 'react'
+
+function LoadingSpinner() {
+  return (
+    <Spin className='primary' />
+  )
+}
+
+export default LoadingSpinner
--- a/src/Components/Ui/PasswordField/PasswordField.tsx
+++ b/src/Components/Ui/PasswordField/PasswordField.tsx
@ -0,0 +1,57 @@
+import React, { FC, useState } from "react";
+import { ErrorMessage, useField, Field } from "formik";
+import { FormGroup } from "reactstrap";
+// import PropTypes from "prop-types";
+import { Eye, EyeOff } from "react-feather";
+import "./index.css";
+
+interface PasswordFieldProps {
+  name: string;
+  label?: string;
+}
+
+const PasswordField: FC<PasswordFieldProps> = ({ name, label, ...props }) => {
+  const [field, meta] = useField({ name, ...props });
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const EyeIcon = showPassword ? Eye : EyeOff;
+
+  const toggleShow = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <>
+      {label && <label className="change_password_body" htmlFor={name}>{label}</label>}
+      <FormGroup className={"position-relative has-icon-left"}>
+        <Field
+          className={
+            
+            "form-control " + (meta.touched && meta.error ? "is-invalid" : "") 
+          }
+          name={name}
+          type={showPassword ? "text" : "password"}
+          autoComplete="new-password"
+          {...props}
+        />
+        <div className="form-control-position">
+          <EyeIcon
+            fontSize={12}
+            onClick={toggleShow}
+            className="cursor-pointer change_password_body"
+          />
+        </div>
+        <ErrorMessage
+          className="field-error text-danger"
+          component="div"
+          name={field.name}
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+// PasswordField.propTypes = {
+//   name: PropTypes.string.isRequired,
+// };
+
+export { PasswordField };
--- a/src/Components/Ui/PasswordField/index.css
+++ b/src/Components/Ui/PasswordField/index.css
@ -0,0 +1,10 @@
+.back-icon {
+  font-size: 18px;
+  margin: 0;
+  margin-right: 5px;
+}
+
+.back-btn {
+  padding-left: 0.8rem;
+  padding-right: 1rem;
+}
--- a/src/Components/Ui/ProgressBar.tsx
+++ b/src/Components/Ui/ProgressBar.tsx
@ -0,0 +1,24 @@
+import React from "react";
+import { Progress } from "reactstrap";
+
+const ProgressBar = ({ value,isLoading, isSuccess, isError  }:any) => {
+  
+  
+  let color = "";
+  if (!isLoading && isSuccess) {
+    color = "success";
+  }
+  if (!isLoading && isError) {
+    color = "danger";
+  }
+  return (
+    <div className="my-1">
+      <Progress color={color} style={{ height: "1rem" }} className=" mt-4" value={value}>
+        {value}%
+      </Progress>
+    </div>
+  );
+};
+
+
+export default ProgressBar;
--- a/src/Components/Ui/SelectField.tsx
+++ b/src/Components/Ui/SelectField.tsx
@ -0,0 +1,29 @@
+import React from "react";
+import Select from "react-select";
+import { ValidatedField } from "./ValidatedField";
+import { useFormikContext } from "formik";
+
+const SelectField = ({ label, name, options, ...props }:any) => {
+  const formik = useFormikContext<any>();
+
+  return (
+    <ValidatedField
+      CustomField={Select}
+      label={label}
+      name={name}
+      className="React"
+      classNamePrefix="select"
+      options={options || []}
+      value={options?.find((opt:any) => opt.value === formik?.values[name]) || ""}
+      onChange={(opt:any) => formik.setFieldValue(name, opt.value)}
+      onBlur={() => formik.setFieldTouched(name)}
+      key={name}
+      {...props}
+    />
+  );
+};
+
+
+export default SelectField;
+
+
--- a/src/Components/Ui/StaticsCard/StaticCard.tsx
+++ b/src/Components/Ui/StaticsCard/StaticCard.tsx
@ -0,0 +1,58 @@
+import React from "react";
+import { Card, CardBody } from "reactstrap";
+import { ChartTypeEnum } from "../../../enums/ChartTypeEnum";
+import { history } from "../../../ProviderContainer";
+import { useNavigate } from "react-router-dom";
+
+interface StatisticsCardProps {
+  className?: string;
+  iconLeft?: boolean;
+  icon: React.ReactNode;
+  count?: string;
+  CardTitle?: string;
+  CardContent?: string;
+  height?: number;
+  pathWhenClick :string ;
+  
+}
+
+const StatisticsCard = (props :StatisticsCardProps) => {
+
+    const navigate = useNavigate()
+  const {
+    className,
+    iconLeft = false ,
+    icon,
+    count,
+    CardTitle,
+    CardContent,
+    pathWhenClick,
+    height,
+    ...rest
+  } = props;
+
+  return (
+    <Card className="p-4 gomecards" {...rest} onClick={()=>navigate(pathWhenClick )}>
+      <CardBody
+        className={`${
+          className ? className : "stats-card-body"
+        } d-flex  justify-content-center flex-column text-center pb-2 pt-2 primary `}
+      >
+        <div className="icon-section">
+          <div
+            className={`avatar avatar-stats p-50 m-0 ${ "bg-rgba-primary"}`}
+          >
+                      {/* <p className="mb-0 text-bold-700">{CardTitle}</p> */}
+            <div className="avatar-content ">{icon}</div>
+          </div>
+        </div>
+        <div className={"title-section " + (iconLeft ? "ml-2" : "")}>
+          {/* <h2 className="text-bold-600 mb-25 ">{count}</h2> */}
+          <p className="mb-2 Content">{CardContent}</p>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default StatisticsCard;
--- a/src/Components/Ui/StatusBadge.tsx
+++ b/src/Components/Ui/StatusBadge.tsx
@ -0,0 +1,17 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "reactstrap";
+
+const StatusBadge = ({ status }:any) => {
+  const [t] = useTranslation();
+
+  return (
+    <Badge color={status ? "success" : "danger"}>
+      {status ? t("active") : t("inacticve")}
+    </Badge>
+  );
+};
+
+
+
+export default StatusBadge;
--- a/src/Components/Ui/TableActions.tsx
+++ b/src/Components/Ui/TableActions.tsx
@ -0,0 +1,38 @@
+import React , {ReactNode} from "react";
+import confirmAlert from "./Alert";
+import { FaEdit, FaTrash } from "react-icons/fa";
+
+type TableActionsProps = {
+  onDelete: () => any;
+  onEdit: () => void;
+  showEdit?: boolean;
+  showDelete?: boolean;
+  children?: ReactNode;
+};
+
+
+const TableActions = ({ onDelete   , onEdit,showEdit=true,showDelete=true, children }:TableActionsProps) => {
+
+  
+  return (
+    <div className="data-list-action TableActions">
+    {showEdit && <FaEdit onClick={onEdit} className="cursor-pointer m-1" size={20} />}
+    {showDelete && (
+      <FaTrash
+        onClick={() =>
+          confirmAlert({
+            onConfirm: () => {
+              onDelete();
+
+            },
+          })
+        }
+        className="cursor-pointer"
+        size={20}
+      />
+    )}
+    {children}
+  </div>
+);
+};
+export default TableActions;
--- a/src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
+++ b/src/Components/Ui/ThreeSwitchState/TripleSwitch.tsx
@ -0,0 +1,31 @@
+import React from 'react';
+import type { RadioChangeEvent } from 'antd';
+import { Radio } from 'antd';
+
+const onChange = (e: RadioChangeEvent) => {
+  console.log(`radio checked:${e.target.value}`);
+};
+
+const App: React.FC = () => (
+  <>
+    
+
+    <Radio.Group onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+      <Radio.Button value="a">Hangzhou</Radio.Button>
+      <Radio.Button value="b" disabled>
+        Shanghai
+      </Radio.Button>
+      <Radio.Button value="c">Beijing</Radio.Button>
+      <Radio.Button value="d">Chengdu</Radio.Button>
+    </Radio.Group>
+
+    <Radio.Group disabled onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
+      <Radio.Button value="a">Hangzhou</Radio.Button>
+      <Radio.Button value="b">Shanghai</Radio.Button>
+      <Radio.Button value="c">Beijing</Radio.Button>
+      <Radio.Button value="d">Chengdu</Radio.Button>
+    </Radio.Group>
+  </>
+);
+
+export default App;
--- a/src/Components/Ui/ToggleStatus.tsx
+++ b/src/Components/Ui/ToggleStatus.tsx
@ -0,0 +1,39 @@
+import React from "react";
+import Toggle from "react-toggle";
+import "react-toggle/style.css";
+import StatusBadge from "./StatusBadge";
+import { useTranslation } from "react-i18next";
+
+interface ToggleStatusProps {
+
+}
+export const ToggleStatus = ({ object, handleSwitch, toggleMutation, ...props }:any) => {
+  const [t] = useTranslation();
+
+  // const handleSwitch = () => {
+  //   toggleMutation.mutate({
+  //     id: object.id,
+  //     new_status: !object.is_active,
+  //   });
+  // };
+
+  return (
+    <>
+      <div className="p-0">
+        <p
+          className="mb-0 p-0"
+          style={{ whiteSpace: "nowrap", textAlign: "center" }}
+        >
+          {object.is_active ? t("active") : t("inactive")}
+        </p>
+        <Toggle
+          {...props}
+          className="custom-switch"
+          disabled={toggleMutation.isLoading}
+          onChange={handleSwitch}
+          checked={object.is_active}
+        />
+      </div>
+    </>
+  );
+};
--- a/src/Components/Ui/ValidatedField.tsx
+++ b/src/Components/Ui/ValidatedField.tsx
@ -0,0 +1,64 @@
+import React from "react";
+import { ErrorMessage, useField, Field } from "formik";
+import {  FormGroup } from "reactstrap";
+import { useTranslation } from "react-i18next";
+
+const ValidatedField = ({
+  name,
+  label,
+  CustomField,
+  icon: Icon,
+  optional,
+  labelIcon = null,
+  formProps,
+  isRequired,
+  
+  ...props
+}:any) => {
+
+  const [field, meta] = useField({ name, ...props });
+  const [t] = useTranslation();
+
+  let Wrapper = Field;
+
+  if (CustomField) {
+    Wrapper = CustomField;
+  }
+  const fieldProps = props.type === "file" ? {} : { ...field };
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={name}>
+          {label} {props.required || isRequired ? "*" : ""} {labelIcon}
+        </label>
+      )}
+      <FormGroup
+        className={Icon ? "position-relative has-icon-left" : ""}
+        {...formProps}
+      >
+        <Wrapper
+          className={
+            "form-control " + (meta.touched && meta.error ? "is-invalid" : "")
+          }
+          {...fieldProps}
+          required={props.isRequired}
+          {...props}
+         
+          
+        />
+        {Icon && (
+          <div className="form-control-position">
+            <Icon size={15} />
+          </div>
+        )}
+        <ErrorMessage name={field.name}>
+          {(msg) => <span className="field-error text-danger">{t(msg)}</span>}
+        </ErrorMessage>
+      </FormGroup>
+    </>
+  );
+};
+
+
+export { ValidatedField };
--- a/src/Components/Ui/index.tsx
+++ b/src/Components/Ui/index.tsx
@ -0,0 +1,17 @@
+import Checkbox from './CheckboxesVuexy'
+import ImagePreview from './ImagePreview'
+import SelectField from './SelectField'
+import { useImagePreview } from './useImagePreview'
+import {ValidatedField} from './ValidatedField'
+import StatusBadge from './StatusBadge'
+import HovarableImage from './HovarableImage'
+
+export {
+    Checkbox,
+    ImagePreview,
+    SelectField,
+    useImagePreview,
+    ValidatedField,
+    StatusBadge,
+    HovarableImage
+}
--- a/src/Components/Ui/tables/Actions.tsx
+++ b/src/Components/Ui/tables/Actions.tsx
@ -0,0 +1,58 @@
+import React , {ReactNode} from "react";
+import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
+import CustomConfirmAlert from "../Alert";
+import { usePageState } from "../../../lib/statemangment/LayoutPagestate";
+
+type TableActionsProps = {
+  onDelete?: () => any;
+  onEdit?: () => any;
+  onView?:() => any;
+  showView?: boolean;
+  showEdit?: boolean;
+  showDelete?: boolean;
+  children?: ReactNode;
+  objectToEdit:any
+  className?:string
+
+};
+
+
+const TableActions = ({ onDelete=()=>{}   , objectToEdit,onEdit=()=>{},onView,showEdit=true,showDelete=true,showView=true,children,className }:TableActionsProps) => {
+// const TableActions = ({ onDelete=()=>{}   , objectToEdit,onEdit=()=>{},onView,showEdit=true,showDelete=true,showView=true,children }:TableActionsProps) => {
+
+  // console.log(objectToEdit);
+  
+    const {setObjectToEdit ,  setIsOpenEditModel} = usePageState()
+  return (
+    <div className={`data-list-action TableActions ${className}`}>
+    {showEdit && <FaEdit onClick={()=>{
+  setObjectToEdit(objectToEdit)
+  setIsOpenEditModel()
+      onEdit()
+      
+    }} className="cursor-pointer m-2" size={20} />}
+    {showView && <FaEye onClick={onView} className="cursor-pointer m-2" size={25} />}
+    
+
+    {showDelete && (
+      <FaTrash
+        onClick={() =>
+          CustomConfirmAlert({
+            onConfirm: () => {
+
+            
+              onDelete();
+
+            },
+          })
+        }
+        className="cursor-pointer"
+        size={20}
+      />
+    )}
+    
+    {children}
+  </div>
+);
+};
+export default TableActions;
--- a/src/Components/Ui/tables/ConfirmAlert.tsx
+++ b/src/Components/Ui/tables/ConfirmAlert.tsx
@ -0,0 +1,40 @@
+import React from "react";
+import { confirmAlert } from "react-confirm-alert";
+import SweetAlert from "react-bootstrap-sweetalert";
+
+interface CustomUIProps {
+  onClose: () => void;
+  options: {
+    title?: string;
+    confirmBtnText?: string;
+    cancelBtnText?: string;
+    onConfirm: () => void;
+    body?: string;
+  };
+}
+
+export default function CustomConfirmAlert(options: any) {
+  confirmAlert({
+    customUI: ({ onClose }) => <CustomUI onClose={onClose} options={options} />,
+  });
+}
+
+function CustomUI({ onClose, options }: CustomUIProps) {
+  const sweetAlertProps: any = {
+    title: options.title || `DELETE, Are you sure?`,
+    warning: true,
+    show: true,
+    showCancel: true,
+    reverseButtons: true,
+    cancelBtnBsStyle: "danger",
+    confirmBtnText: options.confirmBtnText || "Yes, delete it!",
+    cancelBtnText: options.cancelBtnText || "Cancel",
+    onConfirm: () => {
+      options.onConfirm();
+      onClose();
+    },
+    onCancel: onClose,
+  };
+
+  return <SweetAlert {...sweetAlertProps}>{options.body || "You won't be able to revert this!"}</SweetAlert>;
+}
--- a/src/Components/Ui/useImagePreview.tsx
+++ b/src/Components/Ui/useImagePreview.tsx
@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export const useImagePreview = (defaultValue:any = null) => {
+  const [preview, setPreview] = useState(defaultValue || null);
+
+  useEffect(() => {
+    return () => {
+      URL.revokeObjectURL(preview);
+
+    };
+  }, [preview]);
+
+  const handleImageChange = (event:any) => {
+
+    setPreview(URL.createObjectURL(event.target.files[0]));
+
+  };
+
+  return {
+    preview,
+    handleImageChange,
+    setPreview,
+  };
+};
--- a/src/Components/Utils/BlockModal.tsx
+++ b/src/Components/Utils/BlockModal.tsx
@ -0,0 +1,62 @@
+
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BsExclamationCircle } from 'react-icons/bs';
+import { Button, Card, CardBody, Input, Label, Modal, ModalHeader } from 'reactstrap';
+import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
+import { LoadingButton } from '../Ui/LoadingButton';
+
+interface BlockModelProps {
+    Mutation:any,
+    type :'customer' |'driver'
+}
+
+const BlockModel: React.FC<BlockModelProps> = ({Mutation ,type}) => {
+  const {t} = useTranslation();
+  const key_to_api = type == t('customer') ? t('customer_id') : t("driver_id")
+
+  const  {isOpenBlock:isOpen , objectID , setIsopenBlock:setIsOpen} = useCommonModelState()
+
+  const handleSubmit = () => {
+    const blockInput = document.getElementById('block_input') as HTMLInputElement;
+    if (blockInput) {
+        Mutation.mutate({ [key_to_api]: objectID, block_timer: blockvalue });
+    }
+  };
+
+  useEffect(() => {
+    if (Mutation.isSuccess) {
+      setIsOpen();
+    }
+  }, [Mutation.isSuccess, setIsOpen]);
+
+  return (
+    <Modal isOpen={isOpen} centered size='md'>
+      <ModalHeader toggle={() => setIsOpen()}>
+      {t("al")}{type}{t('_block_page')}
+      </ModalHeader>
+      <Card>
+        <CardBody>
+          <div style={{ width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+            <h1 className='modal_info' style={{ fontWeight: 'bold' }}> {t('blocking_')}{type}</h1>
+            <BsExclamationCircle className='modal_info' style={{ fontSize: '100px', color: '#f8be86', margin: '20px 0' }} />
+            <div className=''>
+              <Label for='block_input'>{t('date_blocking')}</Label>
+              <Input id='block_input' placeholder={t('date_blocking')} type='date' />
+              <div style={{ marginTop: 20 }}>
+                <Button color='danger' style={{ marginInline: 10 }} onClick={() => setIsOpen()}>
+                  {t('cancel')}
+                </Button>
+                <LoadingButton color='primary' onClick={handleSubmit} isLoading={Mutation.isLoading} type='submit'>
+                  {t('add_block_for_')}{type}
+                </LoadingButton>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </Modal>
+  );
+};
+
+export default BlockModel;
--- a/src/Components/Utils/GiftModal.tsx
+++ b/src/Components/Utils/GiftModal.tsx
@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BsExclamationCircle } from 'react-icons/bs';
+import { Button, Card, CardBody, Col, Input, Label, Modal, ModalHeader, Row } from 'reactstrap';
+import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
+import { LoadingButton } from '../Ui/LoadingButton';
+
+
+interface GiftModalProps {
+    Mutation:any,
+    type :'customer' |'driver'
+}
+
+const GiftModal: React.FC<GiftModalProps> = ({Mutation ,type }) => {
+    const {t} = useTranslation();
+  
+    const  {isOpenGift:isOpen , objectID , setIsopenGift:setIsOpen} = useCommonModelState()
+
+  useEffect(() => {
+    if (Mutation.isSuccess) {
+      setIsOpen();
+    }
+  }, [Mutation.isSuccess, setIsOpen]);
+
+  const handleGift = () => {
+    const enterCodesInput = document.getElementById('enter_codes') as HTMLInputElement;
+    if (enterCodesInput && enterCodesvalue) {
+        Mutation.mutate({ type, id: objectID, value: enterCodesvalue });
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} centered size='md'>
+      <ModalHeader toggle={() => setIsOpen()}>
+      {t("al")}{type} {t('_gift_page')}
+      </ModalHeader>
+      <Card>
+        <CardBody>
+          <Row>
+            <Col className='' style={{ width: 300 }}>
+              <Label for='enter_codes' className='modal_info'>{t('value')}</Label>
+              <Input id='enter_codes' placeholder={t('value')} type='number' />
+              <Col style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
+                <Button color='danger' onClick={() => setIsOpen()}>
+                  {t('cancel')}
+                </Button>
+                <LoadingButton
+                  color='primary'
+                  onClick={handleGift}
+                  type='submit'
+                  isLoading={Mutation.isLoading}>
+                  {t('give')}
+                </LoadingButton>
+              </Col>
+            </Col>
+          </Row>
+        </CardBody>
+      </Card>
+    </Modal>
+  );
+};
+
+export default GiftModal;
--- a/src/Components/Utils/Loading/Loading.scss
+++ b/src/Components/Utils/Loading/Loading.scss
@ -0,0 +1,93 @@
+.Loading{
+  
+  .wrapper {
+    width: 200px;
+    height: 60px;
+    position: relative;
+    left: 40%;
+    z-index: 1;
+  }
+  
+  .circle {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: var(--primary);
+    left: 15%;
+    transform-origin: 50%;
+    animation: circle7124 .5s alternate infinite ease;
+  }
+  
+  @keyframes circle7124 {
+    0% {
+      top: 60px;
+      height: 5px;
+      border-radius: 50px 50px 25px 25px;
+      transform: scaleX(1.7);
+    }
+  
+    40% {
+      height: 20px;
+      border-radius: 50%;
+      transform: scaleX(1);
+    }
+  
+    100% {
+      top: 0%;
+    }
+  }
+  
+  .circle:nth-child(2) {
+    left: 45%;
+    animation-delay: .2s;
+  }
+  
+  .circle:nth-child(3) {
+    left: auto;
+    right: 15%;
+    animation-delay: .3s;
+  }
+  
+  .shadow {
+    width: 20px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: rgba(0,0,0,0.9);
+    position: absolute;
+    top: 62px;
+    transform-origin: 50%;
+    z-index: -1;
+    left: 15%;
+    filter: blur(1px);
+    animation: shadow046 .5s alternate infinite ease;
+  }
+  
+  @keyframes shadow046 {
+    0% {
+      transform: scaleX(1.5);
+    }
+  
+    40% {
+      transform: scaleX(1);
+      opacity: .7;
+    }
+  
+    100% {
+      transform: scaleX(.2);
+      opacity: .4;
+    }
+  }
+  
+  .shadow:nth-child(4) {
+    left: 45%;
+    animation-delay: .2s
+  }
+  
+  .shadow:nth-child(5) {
+    left: auto;
+    right: 15%;
+    animation-delay: .3s;
+  }
+  
+}
--- a/src/Components/Utils/Loading/Loading.tsx
+++ b/src/Components/Utils/Loading/Loading.tsx
@ -0,0 +1,19 @@
+import React from 'react'
+import './Loading.scss'
+const Loading = () => {
+
+    return (
+        <div className="Loading">
+            <div className="wrapper">
+                <div className="circle"></div>
+                <div className="circle"></div>
+                <div className="circle"></div>
+                <div className="shadow"></div>
+                <div className="shadow"></div>
+                <div className="shadow"></div>
+            </div>           
+             </div>
+    )
+}
+
+export default Loading
--- a/src/Components/Utils/SearchBar/SearchBar.scss
+++ b/src/Components/Utils/SearchBar/SearchBar.scss
@ -0,0 +1,43 @@
+.SearchBar{
+    .group {
+        display: flex;
+        align-items: center;
+        position: relative;
+        max-width: 190px;
+       }
+       
+       .input {
+        width: 100%;
+        height: 40px;
+        padding: 0 1rem;
+        padding-left: 2.5rem;
+        border-radius: 8px;
+        outline: none;
+        font-weight: 500;
+        background: var(--primary);
+        color: var(--bg);
+        border: none;
+        box-shadow: 2px 2px 7px 0 var(--primary);
+
+       }
+       
+       .input::placeholder {
+        color: var(--bg);
+       }
+       
+
+       
+       .icon {
+        position: absolute;
+        left: 1rem;
+        fill: var(--bg);
+        width: 1rem;
+        height: 1rem;
+       }
+       
+       
+       
+       
+       
+       
+}
--- a/src/Components/Utils/SearchBar/SearchBar.tsx
+++ b/src/Components/Utils/SearchBar/SearchBar.tsx
@ -0,0 +1,14 @@
+import React from 'react'
+import './SearchBar.scss'
+const SearchBar = () => {
+    return (
+        <div className='SearchBar'>
+            <div className="group">
+                <svg className="icon"  viewBox="0 0 24 24"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
+                <input placeholder="Search" type="search" className="input"/>
+            </div>
+        </div>
+    )
+}
+
+export default SearchBar
--- a/src/Components/Utils/Theme.tsx
+++ b/src/Components/Utils/Theme.tsx
@ -0,0 +1,84 @@
+import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
+import { useTranslation } from 'react-i18next';
+import { usePageState } from '../../lib/statemangment/LayoutPagestate';
+import { BsFillMoonStarsFill, BsFillSunFill, BsSunglasses } from 'react-icons/bs';
+
+
+let What_the_Theme = localStorage.getItem('theme')  ?? "light";
+
+if (What_the_Theme === "dark") {
+ 
+ document.body.classList.add('dark')}
+  else if (What_the_Theme === "glass") {
+
+    document.body.classList.add('glass')
+  }
+
+
+
+
+export default function Theme() {
+  const {t} = useTranslation(); 
+
+  const {setThemChange} = usePageState()
+
+  const changeTheme = (newTheme : any) => {
+
+    
+    if(newTheme === "dark"){
+      document.body.classList.remove('glass');
+     document.body.classList.add('dark');localStorage.setItem("theme", "dark");
+      What_the_Theme = "dark"
+    }
+    else  if(newTheme === "light"){
+      document.body.classList.remove('glass');
+     document.body.classList.remove('dark');localStorage.setItem("theme", "light");
+      What_the_Theme = "light"
+
+    }
+    else  if(newTheme === "glass"){
+      document.body.classList.remove('dark');  document.body.classList.add('glass'); localStorage.setItem("theme", "glass");
+       What_the_Theme = "glass"
+ 
+     }
+    setThemChange()
+  };
+  /// BsSunglasses  BsFillSunFill  BsFillMoonStarsFill
+
+  
+  return (
+   <div className='Theme'>
+    <Menu menuButton={<MenuButton>
+      {(What_the_Theme  === "light") ?  
+       <>
+        <BsFillSunFill/>        
+         {t("light")}
+       </>
+
+      : (What_the_Theme  === "dark") ?   
+      <>
+      <BsFillMoonStarsFill/>        
+       {t("dark")}
+     </>
+      :
+        <>
+ <BsSunglasses/>        
+       {t("glass")}
+        </>
+      }
+    </MenuButton>} transition>
+      <MenuItem onClick={() => changeTheme('light')}>
+      <BsFillSunFill/>        
+         {t("light")}
+      </MenuItem>
+      <MenuItem onClick={() => changeTheme('dark')}>
+      <BsFillMoonStarsFill/>        
+       {t("dark")}      </MenuItem>
+      <MenuItem onClick={() => changeTheme('glass')}>
+      <BsSunglasses/>        
+       {t("glass")}      </MenuItem>
+    </Menu>
+   
+   </div>
+  );
+}
--- a/src/Components/Utils/Translate.tsx
+++ b/src/Components/Utils/Translate.tsx
@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu, Dropdown } from 'antd';
+import { useLanguage, useLanguageMenu } from '../../Hooks/useChangeLanguage';
+import i18next from 'i18next';
+import type { MenuProps } from 'antd';
+
+export default function Translate() {
+  const { changeLanguage } = useLanguage();
+  const { languageOptions } = useLanguageMenu();  
+
+  const handleLanguageChange = (newLanguage:string) => {
+    changeLanguage(newLanguage);
+  };
+
+  const items : MenuProps['items']  = languageOptions.map((option:any,index:number) => ({
+    key: index,
+    label: (
+      <div className='MenuPropsItem' onClick={() => handleLanguageChange(option.code)}>
+        <img  alt='' src={option.icon} width={20} height={20} /> 
+        {option.label}
+      </div>
+    )
+  }));
+  
+    
+
+  return (
+    <div className='Translate'>
+      <Dropdown menu={{items}} placement="bottomLeft">
+        <button className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+          {languageOptions.map((option:any,index:number) => (
+            option.code === i18next.language ?
+              <React.Fragment key={index}>
+                <img alt='' src={option.icon} width={20} height={20} /> {option.label}
+              </React.Fragment>
+              : null
+          ))}
+        </button>
+      </Dropdown>
+    </div>
+  );
+}
--- a/src/Components/Utils/UnBlockModal.tsx
+++ b/src/Components/Utils/UnBlockModal.tsx
@ -0,0 +1,60 @@
+
+import React, { useEffect } from 'react';
+import { BsExclamationCircle } from 'react-icons/bs';
+import { Button, Card, CardBody, Input, Label, Modal, ModalHeader } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { LoadingButton } from '../Ui/LoadingButton';
+import { useCommonModelState } from '../../lib/statemangment/driver&customer/ModelState';
+import { CiLock } from "react-icons/ci";
+
+interface UnBlockModalProps {
+
+  Mutation:any,
+  type :'customer' |'driver'
+}
+
+const UnBlockModal: React.FC<UnBlockModalProps> = ({Mutation ,type  }) => {
+  const {t} = useTranslation();
+
+  const key_to_api = type == t('customer') ? t('customer_id') : t("driver_id")
+
+  const  {isOpenUnBlock:isOpen , objectID , setIsopenUnBlock:setIsopen} = useCommonModelState()
+
+  const handleSubmit = () => {
+    Mutation.mutate({ [key_to_api]: objectID });
+  };
+
+  useEffect(() => {
+    if (Mutation.isSuccess) {
+      setIsopen();
+    }
+  }, [Mutation.isSuccess, setIsopen]);
+
+  return (
+    <Modal isOpen={isOpen} centered size='md'>
+      <ModalHeader toggle={() => setIsopen()}>
+       {t("al")}{type} {t('un_block_page')}
+      </ModalHeader>
+      <Card>
+        <CardBody>
+          <div style={{ width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+            <h1 className='modal_info' style={{ fontWeight: 'bold' }}> {t('un_blocking_')}{type}</h1>
+            <CiLock className='modal_info' style={{ fontSize: '100px', color: 'black', margin: '20px 0' }} />
+            <div className=''>
+              <div style={{ marginTop: 20 }}>
+                <Button color='danger' style={{ marginInline: 10 }} onClick={() => setIsopen()}>
+                  {t('cancel')}
+                </Button>
+                <LoadingButton color='primary' onClick={handleSubmit} type='submit' isLoading={Mutation.isLoading}>
+                  {t('un_block_for_')}{type}
+                </LoadingButton>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </Modal>
+  );
+};
+
+export default UnBlockModal;
--- a/src/Components/ValidationField/Ui/KarimSpinner.tsx
+++ b/src/Components/ValidationField/Ui/KarimSpinner.tsx
@ -0,0 +1,24 @@
+import React from "react";
+import { Spin } from "antd";
+
+interface Props {
+  loading: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const KarimSpinner: React.FC<Props> = ({ loading, className, children }) => {
+  return (
+    <div className={className ?? ""}>
+      {loading ? (
+        <div className="text-center">
+          <Spin />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+
+export default KarimSpinner;
--- a/src/Components/ValidationField/Ui/SearchBar.scss
+++ b/src/Components/ValidationField/Ui/SearchBar.scss
@ -0,0 +1,37 @@
+.SearchBar {
+  // margin-top: 20px;
+  .group {
+    display: flex;
+    align-items: center;
+    position: relative;
+    max-width: 350px;
+    width: 350px;
+  }
+
+  .input {
+    width: 100%;
+    height: 40px;
+    padding: 0 1rem;
+    padding-left: 2.5rem;
+    border-radius: 8px;
+    outline: none;
+    font-weight: 500;
+    background: var(--bg);
+    color: var(--text);
+    border: none;
+    box-shadow: 2px 2px 7px 0 var(--bg);
+  }
+
+  .input::placeholder {
+    color: var(--subtext);
+    opacity: 0.4;
+  }
+
+  .icon {
+    position: absolute;
+    left: 1rem;
+    fill: var(--subtext);
+    width: 1rem;
+    height: 1rem;
+  }
+}
--- a/src/Components/ValidationField/Ui/SearchBar.tsx
+++ b/src/Components/ValidationField/Ui/SearchBar.tsx
@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import "./SearchBar.scss";
+import { useNavigate, useSearchParams } from "react-router-dom";
+const SearchBar = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const handleChange = (event: any) => {
+    const { value } = event.target;
+    setSearchQuery(value);
+    updateUrlParams(value);
+  };
+
+  const updateUrlParams = (value: any) => {
+    navigate(`?search=${value}`, { replace: true });
+  };
+
+  return (
+    <div className="SearchBar">
+      <div className="group">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1b5stb0 icon"
+          focusable="false"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          data-testid="SearchIcon"
+        >
+          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+        </svg>
+        <input
+          placeholder="Search Product...."
+          type="search"
+          className="input"
+          value={searchQuery}
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;
--- a/src/Components/ValidationField/ValidationField.tsx
+++ b/src/Components/ValidationField/ValidationField.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import "./utils/ValidationField.scss";
+import {
+  Date,
+  Time,
+  File,
+  DataRange,
+  SelectField,
+  Default,
+  CheckboxField,
+  MaltyFile,
+  SearchField,
+  TextField,
+  DropFile,
+} from "./View";
+import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
+import LocalSearchField from "./View/LocalSearch";
+import NumberFormate from "./View/NumberFormate";
+
+const components: { [key: string]: React.FC<any> } = {
+  Select: SelectField,
+  Search: SearchField,
+  LocalSearch: LocalSearchField,
+  DataRange: DataRange,
+  TextArea: TextField,
+  Date: Date,
+  Time: Time,
+  File: File,
+  DropFile: DropFile,
+  MaltyFile: MaltyFile,
+  Checkbox: CheckboxField,
+  NumberFormate: NumberFormate,
+};
+
+const ValidationField: React.FC<ValidationFieldProps> = React.memo(
+  ({ type, ...otherProps }) => {
+    const Component = components[type as ValidationFieldType];
+
+    if (!Component) {
+      return <Default {...otherProps} />;
+    }
+    return <Component {...otherProps} />;
+  },
+);
+
+export default ValidationField;
--- a/src/Components/ValidationField/View/CheckboxField.tsx
+++ b/src/Components/ValidationField/View/CheckboxField.tsx
@ -0,0 +1,40 @@
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { Checkbox, Form } from "antd";
+
+const CheckboxField = ({
+  name,
+  label,
+  isDisabled,
+  onChange,
+  Group,
+  className,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { t, formik, isError, errorMsg } = useFormField(name, props);
+  const CheckboxhandleChange = (value: any) => {
+    formik.setFieldValue(name, value?.target?.checked);
+  };
+  return (
+    <div className={Group ? "d-inline mt-3 Checkboxs" : ``}>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Checkbox
+          onChange={onChange || CheckboxhandleChange}
+          disabled={isDisabled}
+          checked={formik.values[name] ?? false}
+          className={className}
+        >
+          {t(`${label ? label : name}`)}
+        </Checkbox>
+      </Form.Item>
+    </div>
+  );
+};
+
+export default CheckboxField;
--- a/src/Components/ValidationField/View/DataRange.tsx
+++ b/src/Components/ValidationField/View/DataRange.tsx
@ -0,0 +1,64 @@
+import { Form, DatePicker } from "antd";
+
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+
+const { RangePicker } = DatePicker;
+
+const DataRange = ({
+  name,
+  label,
+  Format,
+  props,
+  onChange,
+  isDisabled,
+  placeholder,
+  className,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+  const onCalendarChange = (value: any) => {
+    formik.setFieldValue(name, value);
+  };
+  return (
+    <div className="ValidationField w-100 ">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <RangePicker
+          placeholder={placeholder}
+          size="large"
+          allowClear
+          className={`${className} w-100`}
+          format={Format}
+          onChange={onChange || onCalendarChange}
+          disabled={isDisabled}
+          defaultValue={formik.values[name]}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default DataRange;
--- a/src/Components/ValidationField/View/Date.tsx
+++ b/src/Components/ValidationField/View/Date.tsx
@ -0,0 +1,69 @@
+import { Form, DatePicker } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import dayjs from "dayjs";
+
+const Date = ({
+  name,
+  label,
+  picker = "date",
+  isDisabled,
+  props,
+  onChange,
+  placeholder,
+  className,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+
+  const FormikValue = formik.values[name];
+  const onCalendarChange = (value: any) => {
+    formik.setFieldValue(name, value);
+    // console.log(value,"value ");
+  };
+
+  const Formater = "YYYY/MM/DD";
+  return (
+    <div className="ValidationField w-100 ">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <DatePicker
+          picker={picker}
+          placeholder={t(`${placeholder}`)}
+          allowClear
+          className={`${className} w-100`}
+          value={FormikValue ? FormikValue : null}
+          size="large"
+          onChange={onChange || onCalendarChange}
+          disabled={isDisabled}
+          format={Formater}
+        />
+        {/* <DatePicker onChange={onChange} /> */}
+      </Form.Item>
+    </div>
+  );
+};
+
+export default Date;
--- a/src/Components/ValidationField/View/Default.tsx
+++ b/src/Components/ValidationField/View/Default.tsx
@ -0,0 +1,62 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const Default = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  onChange,
+  type,
+  no_label,
+  label_icon,
+  ...props
+}: any) => {
+  const { errorMsg, isError, t } = useFormField(name, props);
+
+  return (
+    <div className="ValidationField w-100">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : placeholder ? placeholder : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={Input}
+          type={type ?? "text"}
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          name={name}
+          disabled={isDisabled}
+          size="large"
+          {...props}
+          //  onChange={onChange ? onChange : handleChange}
+          {...(type === "number" && { min: 0 })}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(Default);
--- a/src/Components/ValidationField/View/DropFile.tsx.tsx
+++ b/src/Components/ValidationField/View/DropFile.tsx.tsx
@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import { message, Upload } from "antd";
+import type { GetProp, UploadProps } from "antd";
+import useFormField from "../../../Hooks/useFormField";
+import { ImageBaseURL } from "../../../api/config";
+
+type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
+
+const DropFile = ({
+  name,
+  label,
+  onChange,
+  isDisabled,
+  placholder,
+  className,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { formik, t, isError } = useFormField(name, props);
+  let FormikName = formik?.values[name];
+
+  const FormikValue =
+    typeof FormikName === "string"
+      ? ImageBaseURL + FormikName
+      : FormikName instanceof File
+        ? URL.createObjectURL(FormikName)
+        : "";
+
+  const [imageUrl, setImageUrl] = useState<any>(FormikValue ?? "");
+
+  useEffect(() => {
+    setImageUrl(FormikName);
+  }, [FormikName]);
+
+  const getBase64 = (img: FileType, callback: (url: string) => void) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => callback(reader.result as string));
+    reader.readAsDataURL(img);
+  };
+
+  const handleChange: UploadProps["onChange"] = (info) => {
+    if (info.file.status === "done") {
+      getBase64(info.file.originFileObj as FileType, (url) => {
+        setImageUrl(url);
+      });
+    }
+    formik.setFieldValue(name, info.file.originFileObj);
+  };
+  const customRequest = async ({ onSuccess }: any) => {
+    onSuccess();
+  };
+  const uploadButton = (
+    <button style={{ border: 0, background: "none" }} type="button">
+      <div className={`CustomFile  ${isError ? "uploader_error" : ""} `}>
+        {t("drag_and_drop_or_click_here_to_select_the_file")}
+      </div>
+    </button>
+  );
+
+  return (
+    <div className="ValidationField w-100">
+      <label htmlFor={name} className="text">
+        {t(`${label || name}`)}
+      </label>
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        className={`avatar-uploader ${isError ? "uploader_error" : ""} ${className}`}
+        showUploadList={false}
+        customRequest={customRequest}
+        onChange={onChange || handleChange}
+      >
+        {imageUrl ? (
+          <img
+            src={
+              imageUrl instanceof File
+                ? URL.createObjectURL(imageUrl)
+                : imageUrl
+            }
+            alt=""
+            style={{ width: "100%" }}
+          />
+        ) : (
+          uploadButton
+        )}
+      </Upload>
+    </div>
+  );
+};
+
+export default DropFile;
--- a/src/Components/ValidationField/View/File.tsx
+++ b/src/Components/ValidationField/View/File.tsx
@ -0,0 +1,80 @@
+import { Button, Upload, UploadFile } from "antd";
+import useFormField from "../../../Hooks/useFormField";
+import { UploadOutlined } from "@ant-design/icons";
+import { ImageBaseURL } from "../../../api/config";
+
+const File = ({
+  name,
+  label,
+  onChange,
+  isDisabled,
+  placholder,
+  className,
+  acceptedFileType,
+  props,
+}: any) => {
+  const { formik, t, isError } = useFormField(name, props);
+  let imageUrl = formik?.values?.[name] ?? null;
+  // console.log(ImageBaseURL + imageUrl);
+    
+  const fileList: UploadFile[] = imageUrl
+    ? [
+        typeof imageUrl === "string"
+          ? {
+              uid: "-1",
+              name: "",
+              status: "done",
+              url: ImageBaseURL + imageUrl,
+              thumbUrl: ImageBaseURL + imageUrl,
+            }
+          : {
+              uid: imageUrl.uid || "-1",
+              name: imageUrl.name || "",
+              status: "done",
+              originFileObj: imageUrl,
+            },
+      ]
+    : [];
+  // console.log(1);
+
+  const FilehandleChange = (value: any) => {
+    // console.log(value,"filevalue");
+    if (value.fileList.length === 0) {
+      formik.setFieldValue(name, null);
+    } else {
+      formik.setFieldValue(name, value?.file?.originFileObj);
+    }
+  };
+  const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
+    onSuccess();
+  };
+  return (
+    <div className="ValidationField upload_image_button ">
+      <label htmlFor={name} className="text">
+        {t(`${label || name}`)}
+      </label>
+
+      <Upload
+        disabled={isDisabled}
+        listType="picture"
+        maxCount={1}
+        fileList={[...fileList]}
+        onChange={onChange || FilehandleChange}
+        customRequest={customRequest}
+        className={`${className} w-100`}
+        accept={acceptedFileType ? acceptedFileType : undefined}
+
+      >
+        <Button
+          className={isError ? "isError w-100 " : " w-100"}
+          icon={<UploadOutlined />}
+        >
+          {placholder ?? t("Click_to_upload_the_image")}
+        </Button>
+        <div className="Error_color"> {isError ? "required" : ""}</div>
+      </Upload>
+    </div>
+  );
+};
+
+export default File;
--- a/src/Components/ValidationField/View/LocalSearch.tsx
+++ b/src/Components/ValidationField/View/LocalSearch.tsx
@ -0,0 +1,93 @@
+import { Form, Select } from "antd";
+import React, { useState } from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { translateOptions } from "../utils/translatedOptions";
+
+const LocalSelectField = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  option,
+  isMulti,
+  onChange,
+  className,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+
+  // State to manage the search input value
+  const [searchValue, setSearchValue] = useState("");
+
+  const handleSearch = (
+    input: string,
+    option: { value: string; label: React.ReactNode | undefined },
+  ) =>
+    option?.label?.toString().toLowerCase().includes(toLowerCase()) ||
+    option?.value?.toString().toLowerCase().includes(toLowerCase());
+
+  const SelectableChange = (value: {
+    value: string;
+    label: React.ReactNode;
+  }) => {
+    formik.setFieldValue(name, value);
+  };
+
+  const handleSelectChange = (value: any) => {
+    formik.setFieldValue(name, value);
+    if (onChange) onChange(value);
+  };
+
+  const handleSearchChange = (input: string) => {
+    setSearchValue(input); // Update the search input value
+  };
+
+  return (
+    <div className="ValidationField w-100">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Select
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          disabled={isDisabled}
+          options={translateOptions(option, t)}
+          size="large"
+          className={`${className} ${isError ? "Select_error" : ""} w-100`}
+          value={formik.values[name]}
+          allowClear
+          {...(isMulti && { mode: "multiple" })}
+          onChange={handleSelectChange}
+          showSearch
+          filterOption={handleSearch} // Custom filter function
+          searchValue={searchValue} // Control the search input value
+          onSearch={handleSearchChange} // Update search input value on change
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(LocalSelectField);
--- a/src/Components/ValidationField/View/MaltyFile.tsx
+++ b/src/Components/ValidationField/View/MaltyFile.tsx
@ -0,0 +1,85 @@
+import { Button, Upload } from "antd";
+import { UploadOutlined } from "@ant-design/icons";
+
+import useFormField from "../../../Hooks/useFormField";
+
+const MaltyFile = ({
+  name,
+  label,
+  onChange,
+  isDisabled,
+  placeholder,
+  className,
+  props,
+}: any) => {
+  const { formik, t, isError } = useFormField(name, props);
+  let imageUrl = formik?.values?.[name] ?? null;
+
+  // Mapping formik values to fileList format
+  const fileList = imageUrl
+    ? imageUrl.map((file: any, index: number) => {
+        // console.log(file,"file");
+
+        return file instanceof File
+          ? {
+              uid: index,
+              name: file?.name,
+              status: "done",
+              originFileObj: file,
+            }
+          : {
+              uid: index,
+              id: file?.id,
+              name: file?.name,
+              status: "done",
+              url: file?.url || "",
+              thumbUrl: file?.url || "",
+            };
+      })
+    : [];
+
+  const FilehandleChange = ({ fileList }: any) => {
+    if (fileList.length === 0) {
+      formik.setFieldValue(name, null);
+    } else {
+      formik.setFieldValue(
+        name,
+        fileList.map((file: any) => file?.originFileObj ?? file),
+      );
+    }
+  };
+  // Custom request function
+  const customRequest = async ({ onSuccess }: any) => {
+    // Perform any necessary actions before onSuccess is called
+    onSuccess();
+  };
+
+  return (
+    <div className="ValidationField upload_image_button">
+      <label htmlFor={name} className="text">
+        {t(`${label || name}`)}
+      </label>
+
+      <Upload
+        disabled={isDisabled}
+        listType="picture"
+        fileList={fileList} // Using fileList instead of defaultFileList
+        onChange={onChange || FilehandleChange}
+        customRequest={customRequest}
+        className={`${className} w-100`}
+        multiple // Allow multiple files to be selected
+      >
+        <Button
+          className={isError ? "isError w-100" : " w-100"}
+          icon={<UploadOutlined />}
+          
+        >
+          {t(placeholder  ?? t("upload_image") )}
+        </Button>
+        <div className="Error_color"> {isError ? "required" : ""}</div>
+      </Upload>
+    </div>
+  );
+};
+
+export default MaltyFile;
--- a/src/Components/ValidationField/View/NumberFormate.tsx
+++ b/src/Components/ValidationField/View/NumberFormate.tsx
@ -0,0 +1,75 @@
+import { Form, Input, InputNumber } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const NumberFormate = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  props,
+  type,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+  const SelectableChange = (value: {
+    value: string;
+    label: React.ReactNode;
+  }) => {
+    formik.setFieldValue(name, value);
+  };
+  return (
+    <div className="ValidationField w-100">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : placeholder ? placeholder : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={InputNumber}
+          formatter={(value: any) =>
+            `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+          }
+          parser={(value: any) =>
+            value?.replace(/\$\s?|(,*)/g, "") as unknown as number
+          }
+          min="0"
+          type={type ?? "text"}
+          value={formik.values[name]}
+          onChange={SelectableChange}
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          name={name}
+          disabled={isDisabled}
+          size="large"
+          
+
+          //  onChange={onChange ? onChange : handleChange}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(NumberFormate);
--- a/src/Components/ValidationField/View/SearchField.tsx
+++ b/src/Components/ValidationField/View/SearchField.tsx
@ -0,0 +1,87 @@
+import { Form, Select } from "antd";
+import React, { useEffect, useState } from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { useNavigate } from "react-router-dom";
+import { MdOutlineEdit } from "react-icons/md";
+
+const SearchField = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  searchBy,
+  option,
+  isMulti,
+  onChange,
+  className,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const navigate = useNavigate();
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window?.location?.search);
+    setSearchQuery(searchParams?.get("search") || "");
+  }, []);
+
+  const SelectableChange = (value: {
+    value: string;
+    label: React.ReactNode;
+  }) => {
+    formik?.setFieldValue(name, value);
+  };
+  const SearchHandleChange = (value: any) => {
+    navigate(`${window?.location?.pathname}?${searchBy}=${value}`, {
+      replace: true,
+    });
+  };
+
+  return (
+    <div className="ValidationField w-100 ">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Select
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          disabled={isDisabled}
+          options={option}
+          size="large"
+          className={`${className} w-100`}
+          value={formik.values[name]}
+          loading={option?.length < 1}
+          allowClear
+          {...(isMulti && { mode: "multiple" })}
+          onChange={onChange || SelectableChange}
+          showSearch
+          optionFilterProp="label"
+          onSearch={SearchHandleChange}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(SearchField);
--- a/src/Components/ValidationField/View/SelectField.tsx
+++ b/src/Components/ValidationField/View/SelectField.tsx
@ -0,0 +1,72 @@
+import { Form, Select } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { translateOptions } from "../utils/translatedOptions";
+
+const SelectField = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  option,
+  isMulti,
+  onChange,
+  className,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+  const SelectableChange = (value: {
+    value: string;
+    label: React.ReactNode;
+  }) => {
+    formik.setFieldValue(name, value);
+  };
+  // console.log(name,"Select");
+
+  return (
+    <div className="ValidationField w-100">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Select
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          disabled={isDisabled}
+          options={translateOptions(option, t)}
+          loading={option?.length < 1}
+          size="large"
+          className={`${className} ${isError ? "Select_error" : ""} w-100`}
+          value={formik.values[name]}
+          allowClear
+          {...(isMulti && { mode: "multiple" })}
+          onChange={onChange || SelectableChange}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(SelectField);
--- a/src/Components/ValidationField/View/TextAreaField.tsx
+++ b/src/Components/ValidationField/View/TextAreaField.tsx
@ -0,0 +1,50 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { Field } from "formik";
+const { TextArea } = Input;
+
+const TextAreaField = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  onChange,
+  props,
+  type,
+}: any) => {
+  const { formik, isError, errorMsg, t } = useFormField(name, props);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    // console.log('Change:', e.target.value);
+    formik.setFieldValue(name, e.target.value);
+  };
+
+  return (
+    <div className="ValidationField w-100">
+      <label htmlFor={name} className="text">
+        {t(`${label ? label : name}`)}
+      </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={TextArea}
+          placeholder={t(`${placeholder ? placeholder : name}`)}
+          name={name}
+          disabled={isDisabled}
+          size="large"
+          onChange={onChange || handleChange}
+
+          //  onChange={onChange ? onChange : handleChange}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(TextAreaField);
--- a/src/Components/ValidationField/View/TextField.tsx
+++ b/src/Components/ValidationField/View/TextField.tsx
@ -0,0 +1,65 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+const { TextArea } = Input;
+
+const TextField = ({
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  onChange,
+  props,
+  no_label,
+  label_icon,
+}: any) => {
+  const { formik, isError, errorMsg, t } = useFormField(name, props);
+  const TextFieldhandleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    // console.log('Change:', e.target.value);
+    formik.setFieldValue(name, e.target.value);
+  };
+  return (
+    <div className="ValidationField w-100">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={TextArea}
+          placeholder={t(`${placeholder ? placeholder : name}`)}
+          name={name}
+          disabled={isDisabled}
+          size="large"
+          // showCount
+          maxLength={1000}
+          onChange={onChange || TextFieldhandleChange}
+          style={{ height: 100, resize: "none" }}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(TextField);
--- a/src/Components/ValidationField/View/Time.tsx
+++ b/src/Components/ValidationField/View/Time.tsx
@ -0,0 +1,68 @@
+import { Form, TimePicker } from "antd";
+import React from "react";
+import useFormField from "../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import dayjs from "dayjs";
+
+const Time = ({
+  name,
+  label,
+  className,
+  isDisabled,
+  onChange,
+  props,
+  placeholder,
+  no_label,
+  label_icon,
+}: any) => {
+  const { errorMsg, isError, t, formik } = useFormField(name, props);
+  const onCalendarChange = (value: any) => {
+    formik.setFieldValue(name, value);
+  };
+
+  const Formater = "H:mm";
+  const FormikValue = formik.values[name];
+
+  return (
+    <div className="ValidationField w-100 ">
+      {no_label ? (
+        <label htmlFor={name} className="text">
+          <span>empty</span>
+        </label>
+      ) : label_icon ? (
+        <div className="LabelWithIcon">
+          <label htmlFor={name} className="text">
+            {t(`${label ? label : name}`)}
+          </label>
+          <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
+        </div>
+      ) : (
+        <label htmlFor={name} className="text">
+          {t(`${label ? label : name}`)}
+        </label>
+      )}
+
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <TimePicker
+          allowClear
+          className={`${className} w-100`}
+          size="large"
+          value={FormikValue ? dayjs(FormikValue, Formater) : null}
+          onChange={onChange || onCalendarChange}
+          disabled={isDisabled}
+          placeholder={t(
+            `${placeholder ? placeholder : label ? label : name}`,
+          )}
+          format={Formater}
+          needConfirm={false}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default Time;
--- a/src/Components/ValidationField/View/index.tsx
+++ b/src/Components/ValidationField/View/index.tsx
@ -0,0 +1,25 @@
+import Time from "./Time";
+import SelectField from "./SelectField";
+import Date from "./Date";
+import DataRange from "./DataRange";
+import CheckboxField from "./CheckboxField";
+import Default from "./Default";
+import File from "./File";
+import MaltyFile from "./MaltyFile";
+import SearchField from "./SearchField";
+import TextField from "./TextField";
+import DropFile from "./DropFile.tsx";
+
+export {
+  Time,
+  SelectField,
+  Date,
+  DataRange,
+  CheckboxField,
+  Default,
+  File,
+  MaltyFile,
+  SearchField,
+  TextField,
+  DropFile,
+};
--- a/src/Components/ValidationField/index.tsx
+++ b/src/Components/ValidationField/index.tsx
@ -0,0 +1,16 @@
+import { useState } from "react";
+import { ErrorMessage, useField, Field, useFormikContext } from "formik";
+import { useTranslation } from "react-i18next";
+import { FaExclamationCircle } from "react-icons/fa";
+import { convert_data_to_select } from "../../Layout/app/Const";
+
+export {
+  useState,
+  ErrorMessage,
+  useField,
+  Field,
+  useFormikContext,
+  useTranslation,
+  FaExclamationCircle,
+  convert_data_to_select,
+};
--- a/src/Components/ValidationField/utils/ValidationField.scss
+++ b/src/Components/ValidationField/utils/ValidationField.scss
@ -0,0 +1,200 @@
+.LabelWithIcon {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.ValidationField {
+  margin-bottom: 1.3vw;
+  position: relative;
+  > * {
+    width: 100%;
+  }
+  .text,
+  .ant-form-item {
+    margin-bottom: 7px !important;
+    > span {
+      color: transparent;
+    }
+  }
+
+  // .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+  //   border: 1px solid var(--border-color);
+  // }
+
+  .Select_error {
+    .ant-select-selector {
+      border: 1px solid red !important;
+    }
+  }
+
+  // .ValidationField{
+  //   .ant-select-selector{
+  //     border: 1px solid var(--border-color) ;
+
+  //     }
+  // }
+  > span {
+    margin-bottom: 0px !important;
+    &:focus-within {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 1px var(--primary);
+      cursor: pointer;
+    }
+    &:has(.is-invalid) {
+      border-color: red !important ;
+    }
+    input {
+      color: var(--text);
+      background: var(--bg);
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active {
+      -webkit-box-shadow: 0 0 0 30px white inset !important;
+    }
+  }
+}
+
+.ant-upload-select {
+  width: 100%;
+}
+.Checkboxs {
+  padding: 4%;
+}
+.SearchField {
+  button {
+    background: var(--primary);
+  }
+}
+.text {
+  color: var(--text);
+  margin-bottom: 15px;
+  font-weight: bold;
+}
+
+input:disabled {
+  color: var(--text) !important;
+}
+
+.isError {
+  outline: red 1px solid;
+  color: red;
+}
+.Error_color {
+  color: red;
+}
+// input:-webkit-autofill {
+//   -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+// input:-webkit-autofill:focus {
+//   -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+
+// /* Remove autofill background color on hover */
+// input:-webkit-autofill:hover {
+//   -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
+// }
+// .upload_image_button {
+//   .ant-btn {
+//     min-height: 3vw !important;
+//     border: 0.1vw solid var(--border-color);
+
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//   }
+// }
+// .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
+//   min-height: 3vw !important;
+// }
+// .ant-select-multiple.ant-select-lg .ant-select-selection-overflow {
+//   min-height: 3vw !important;
+// }
+
+// .ant-upload-list .ant-upload-list-item {
+//   // height:3vw !important;
+//   border: 1px solid var(--border-color) !important;
+// }
+
+// .TowValidationItems {
+//   display: flex;
+//   gap: 3%;
+//   > label {
+//     display: none;
+//   }
+// }
+
+// .ant-select .ant-select-arrow {
+//   inset-inline-end: 1vw;
+// }
+// .ant-input-affix-wrapper-lg {
+//   padding: 0.5vw 1vw;
+//   font-size: 1vw;
+//   min-height: 3vw;
+//   border-radius: 0.6vw;
+// }
+
+// .ant-picker-outlined {
+//   padding: 0.5vw 1vw;
+//   font-size: 1vw;
+//   min-height: 3vw;
+//   border-radius: 0.6vw;
+//   border: 1px solid var(--border-color);
+// }
+
+// .ant-select-single.ant-select-lg .ant-select-selector {
+//   min-height: 3vw;
+//   border-radius: 0.6vw;
+// }
+// .ant-select-single .ant-select-selector .ant-select-selection-search-input {
+//   min-height: 3vw;
+// }
+
+// .ant-select-outlined .ant-select-selector {
+//   min-height: 3vw !important;
+//   border-radius: 0.6vw !important;
+// }
+// .ant-select-single.ant-select-lg {
+//   min-height: 3vw;
+// }
+
+// .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
+//   width: 21.5vw;
+// }
+
+// .ant-input-number-outlined {
+//   width: 100%;
+//   height: 3vw;
+// }
+// .ant-input-number-lg ant-input-number-input {
+//   width: 100%;
+//   height: 3vw;
+// }
+
+// .bigRow {
+//   width: 100%;
+//   display: flex;
+//   justify-content: space-between;
+//   flex-wrap: wrap;
+//   > *.w-100 {
+//     width: 48% !important;
+//   }
+// }
+
+// .ant-input-number-affix-wrapper-lg {
+//   width: 100%;
+//   height: 3vw;
+//   border-radius: 0.6vw;
+//   border: 1px solid var(--border-color);
+// }
+
+// .TwoSelectGroup {
+//   display: flex;
+//   gap: 10px;
+//   margin-bottom: 20px;
+// }
+// .TwoSelectGroupbutton {
+//   margin-bottom: 20px;
+// }
--- a/src/Components/ValidationField/utils/ValidationState.ts
+++ b/src/Components/ValidationField/utils/ValidationState.ts
@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface ValidationState {
+  Validation: any[];
+  setValidation: (value: any[]) => void;
+}
+
+export const useValidationState = create<ValidationState>((set) => ({
+  Validation: [],
+  setValidation: (value) => set((state) => ({ Validation: value })),
+}));
--- a/src/Components/ValidationField/utils/translatedOptions.ts
+++ b/src/Components/ValidationField/utils/translatedOptions.ts
@ -0,0 +1,6 @@
+export const translateOptions = (options: any, t: any) => {
+  return options.map((opt: any) => ({
+    ...opt,
+    label: t(`${opt.label}`),
+  }));
+};
--- a/src/Components/ValidationField/utils/types.ts
+++ b/src/Components/ValidationField/utils/types.ts
@ -0,0 +1,171 @@
+export type ValidationFieldType =
+  | "text"
+  | "Select"
+  | "LocalSearch"
+  | "Search"
+  | "DataRange"
+  | "Date"
+  | "Time"
+  | "File"
+  | "MaltyFile"
+  | "DropFile"
+  | "Checkbox"
+  | "number"
+  | "password"
+  | "email"
+  | "TextArea";
+
+export interface ValidationFieldPropsText {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "text";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+}
+
+export interface ValidationFieldPropsSelect {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "Select";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: any;
+  dir?: "ltr" | "rtl";
+  option: any[];
+  isMulti?: boolean;
+}
+
+export interface ValidationFieldPropsLocalSearch {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "LocalSearch";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  option: any[];
+  isMulti?: boolean;
+}
+export interface ValidationFieldPropsSearch {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "Search";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  option: any[];
+  isMulti?: boolean;
+  searchBy: string;
+}
+export interface ValidationFieldPropsDataRange {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "DataRange";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
+}
+export interface ValidationFieldPropsDate {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "Date";
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  picker?: "data" | "week" | "month" | "quarter" | "year";
+}
+
+export interface ValidationFieldPropsTime {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "Time";
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+}
+
+export interface ValidationFieldPropsFile {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "File" | "MaltyFile" | "DropFile";
+  acceptedFileType?:string;
+  placeholder?: string;
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+}
+export interface ValidationFieldPropsCheckbox {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type: "Checkbox";
+  label?: string;
+  className?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  Group?: boolean;
+}
+export interface ValidationFieldPropstext {
+  name: string;
+  no_label?: boolean;
+  label_icon?: boolean;
+  type?:
+    | "text"
+    | "number"
+    | "password"
+    | "email"
+    | "TextArea"
+    | "NumberFormate";
+  label?: string;
+  className?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  onChange?: (value: any) => void;
+  dir?: "ltr" | "rtl";
+  Group?: boolean;
+  [key: string]: any; // Index signature to allow any additional props
+}
+
+export type ValidationFieldProps =
+  | ValidationFieldPropsText
+  | ValidationFieldPropsSelect
+  | ValidationFieldPropsLocalSearch
+  | ValidationFieldPropsDataRange
+  | ValidationFieldPropsDate
+  | ValidationFieldPropsTime
+  | ValidationFieldPropsFile
+  | ValidationFieldPropsCheckbox
+  | ValidationFieldPropstext
+  | ValidationFieldPropsSearch;
--- a/src/Components/order/OrderStatus.tsx
+++ b/src/Components/order/OrderStatus.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+
+// for write later 
+function OrderStatus() {
+  return (
+    <div>OrderStatus</div>
+  )
+}
+
+export default OrderStatus
--- a/src/Hooks/WithDrawer.tsx
+++ b/src/Hooks/WithDrawer.tsx
@ -0,0 +1,45 @@
+import React, { useState, ReactNode } from 'react';
+import type { DrawerProps } from 'antd';
+import {  Drawer, Space } from 'antd';
+
+interface WithDrawerProps {
+  button: React.ReactNode;
+  children: ReactNode;
+  title:string;
+  className?:string,
+  iopen?:boolean,
+  setOpen:any
+}
+
+const WithDrawer: React.FC<WithDrawerProps> = ({ children,title ="Basic Drawer",className ,setOpen, iopen }) => {
+  const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
+
+
+
+  return (
+    <>
+      <Drawer
+        // title={title}
+        placement={placement}
+        closable={false}
+        onClose={() => setOpen(false)}
+        open={iopen}
+        key={placement}
+      >
+        <div className={className}>
+        {children}
+
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default WithDrawer;
+
+
+//   <WithDrawer
+//   button={<Button type="primary">Open</Button>}
+// >
+//   {/* Your content goes here */}
+// </WithDrawer>
--- a/src/Hooks/imageUrlToFile.tsx
+++ b/src/Hooks/imageUrlToFile.tsx
@ -0,0 +1,13 @@
+export async function fetchImage(imageUrl:any) {
+    try {
+      const response = await fetch(imageUrl);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
+      }
+      const blob = await response.blob();
+      return new File([blob], 'image.png', { type: 'image/png' });
+    } catch (error) {
+      console.error('Error fetching image:', error);
+      return null;
+    }
+  }
--- a/src/Hooks/isEmpty.tsx
+++ b/src/Hooks/isEmpty.tsx
@ -0,0 +1,3 @@
+export const isEmpty = (Type:any) => {
+    return !Type || (Array.isArray(Type) && Type.length === 0);
+  };
--- a/src/Hooks/useChangeLanguage.tsx
+++ b/src/Hooks/useChangeLanguage.tsx
@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import i18n from 'i18next';
+import translationEN from '../translate/en.json';
+import translationAR from '../translate/ar.json';
+import translationDE from '../translate/de.json';
+
+const language = localStorage.getItem('language') ?? 'en';
+
+i18n.use(initReactI18next).init({
+    resources: {
+      en: {
+        translation: translationEN
+      },
+      ar: {
+        translation: translationAR
+      },
+      de: {
+        translation: translationDE
+      }
+    },
+    lng: language, 
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+
+export function useLanguage() {
+  useEffect(() => {
+    changeLanguage(language);
+  }, [language]);
+
+  const changeLanguage = (newLanguage:any) => {
+    i18n.changeLanguage(newLanguage);
+    localStorage.setItem('language', newLanguage);
+    applyLanguageStyles(newLanguage);
+  };
+
+  return { changeLanguage };
+}
+
+function applyLanguageStyles(language:any) {
+  if (language === 'ar') {
+    document.body.setAttribute('dir', 'rtl');
+    document.body.classList.remove('de');
+    document.body.classList.add('ar');
+  } else if (language === 'en') {
+    document.body.setAttribute('dir', 'ltr');
+    document.body.classList.remove('ar', 'de');
+    document.body.classList.add('en');
+  } else if (language === 'de') {
+    document.body.setAttribute('dir', 'ltr');
+    document.body.classList.remove('ar');
+    document.body.classList.add('de');
+  }
+
+}
+
+export function useLanguageMenu() {
+  const { t } = useTranslation();
+  const { changeLanguage } = useLanguage();
+
+  const languageOptions = [
+    { code: 'ar', icon: '/language/ar.svg', label: t('Arabic') },
+    { code: 'en', icon: '/language/en.svg', label: t('English') },
+    { code: 'de', icon: '/language/de.svg', label: t('German') }  
+  ];
+
+  const handleLanguageChange = (code:any) => {
+    changeLanguage(code);
+  };
+
+  return { languageOptions, handleLanguageChange };
+}
--- a/src/Hooks/useEventListener.tsx
+++ b/src/Hooks/useEventListener.tsx
@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+export const useEventListener = (eventType:any, callback:any, element = window) => {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handler = (e:any) => callbackRef.current(e);
+    element.addEventListener(eventType, handler);
+
+    return () => element.removeEventListener(eventType, handler);
+  }, [eventType, element]);
+};
--- a/src/Hooks/useFormField.tsx
+++ b/src/Hooks/useFormField.tsx
@ -0,0 +1,16 @@
+import { useField, useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Field } from 'formik';
+
+const useFormField = (name: string, props?: any) => {
+  const [field, meta] = useField({ name, ...props });
+  const { t } = useTranslation();
+  const formik = useFormikContext<any>();
+  const isError = meta.touched && meta.error;
+
+  const errorMsg = meta.error ? t(meta.error.toString()) : '';
+
+  return { Field, field, meta, formik, isError, errorMsg, t };
+};
+
+export default useFormField;
--- a/src/Hooks/useFormatToSelect.tsx
+++ b/src/Hooks/useFormatToSelect.tsx
@ -0,0 +1,15 @@
+const useFormatToSelect = (Data : any) => {
+    const format = (data :any) => {
+      if (!data) return [];
+
+      return data.map((item :any) => ({
+        value: item?.id,
+        label: item?.name,
+      }));
+    };
+  
+    return format(Data);
+  };
+  
+  export default useFormatToSelect;
+  
--- a/src/Hooks/useImageError.tsx
+++ b/src/Hooks/useImageError.tsx
@ -0,0 +1,9 @@
+import React from 'react'
+
+const useImageError = ({currentTarget}:any) => {
+    const ErrorImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png"
+    currentTarget.onerror = null;
+    currentTarget.src=`${ErrorImage}`;
+}
+
+export default useImageError
--- a/src/Hooks/useLoadingState.tsx
+++ b/src/Hooks/useLoadingState.tsx
@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+function useLoadingState(initialValue: boolean, duration: number): [boolean, () => void] {
+  const [loading, setLoading] = useState<boolean>(initialValue);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setLoading(false);
+    }, duration);
+
+    return () => clearTimeout(timeoutId);
+  }, [duration]);
+
+  const resetLoading = () => {
+    setLoading(true);
+  };
+
+  return [loading, resetLoading];
+}
+
+export default useLoadingState;
--- a/src/Hooks/useNavigateOnSuccess.ts
+++ b/src/Hooks/useNavigateOnSuccess.ts
@ -0,0 +1,20 @@
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+
+function useNavigateOnSuccess(isSuccess :boolean , to_path:string , callbackAfterSuccess?:any) {
+
+    const navigate = useNavigate()
+    useEffect(()=>{
+
+        if(isSuccess){
+            if (typeof callbackAfterSuccess === 'function') {
+                callbackAfterSuccess()
+            }
+            navigate(to_path )
+        }
+    },[isSuccess])
+
+}
+
+export default useNavigateOnSuccess
--- a/src/Hooks/usePagination.tsx
+++ b/src/Hooks/usePagination.tsx
@ -0,0 +1,38 @@
+import { Pagination } from "antd";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+
+export const PaginationBody = ({ data }: any) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pagination = location?.search || '';
+  const currentPage = parseInt(new URLSearchParams(location.search).get("page") || "1", 10);
+  const pageSize = parseInt(new URLSearchParams(location.search).get("per_page") || "15", 10);
+
+  const [searchParams] = useSearchParams()
+  const onChange = (page: number, pageSize?: number) => {
+    navigate(`?page=${page}&per_page=${pageSize || data?.per_page}`);
+  };
+
+  const onShowSizeChange = (current: number, pageSize: number) => {
+    navigate(`?page=${current}&per_page=${pageSize}`);
+  };
+  const [t] = useTranslation()
+
+  return (
+    <Pagination
+      className='text-center mt-3 paginateStyle'
+      total={data}
+      showTotal={(total: any) => `${t(`Total`)} ${total} ${t(`items`)}`}
+      pageSize={pageSize}
+      pageSizeOptions={[6, 15, 22, 30]}
+      defaultCurrent={currentPage}
+      current={currentPage} 
+      onChange={onChange}
+      onShowSizeChange={onShowSizeChange}
+      // showQuickJumper 
+      showSizeChanger
+
+    />
+  );
+};
--- a/src/Hooks/useWindowSize.tsx
+++ b/src/Hooks/useWindowSize.tsx
@ -0,0 +1,18 @@
+import { useState } from "react";
+import { useEventListener } from "./useEventListener";
+
+export const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEventListener("resize", () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  });
+
+  return windowSize;
+};
--- a/src/Layout/Dashboard/AddButton/AddButton.tsx
+++ b/src/Layout/Dashboard/AddButton/AddButton.tsx
@ -0,0 +1,33 @@
+import React from 'react'
+import './Add_Button.scss'
+import { useTranslation } from 'react-i18next'
+import { usePageState } from '../../../lib/statemangment/LayoutPagestate'
+
+
+
+const AddButton = (props :any) => {
+    const [t] = useTranslation();
+
+
+    return (
+        <div className='Add_Button' {...props} >
+            <button >
+                <span >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        height={24}
+                    >
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
+                    </svg>{" "}
+                    {t("Add")}
+                </span>
+            </button>
+
+        </div>
+    )
+}
+
+export default AddButton
--- a/src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
+++ b/src/Layout/Dashboard/AddButton/AddButtonLayout.tsx
@ -0,0 +1,41 @@
+import React from 'react'
+import './Add_Button.scss'
+import { useTranslation } from 'react-i18next'
+import { usePageState } from '../../../lib/statemangment/LayoutPagestate'
+
+
+
+const AddButtonLayout = ({haveAddModal}:any) => {
+    const { setIsOpenAddModel , setObjectToEdit } = usePageState()
+    const [t] = useTranslation();
+
+
+    return (
+        <div className='Add_Button' onClick={()=>{
+            if(haveAddModal){
+                
+                setIsOpenAddModel()
+            }
+            setObjectToEdit(null)
+
+        }}>
+            <button>
+                <span >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        height={24}
+                    >
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
+                    </svg>{" "}
+                    {t("Add")}
+                </span>
+            </button>
+
+        </div>
+    )
+}
+
+export default AddButtonLayout
--- a/src/Layout/Dashboard/AddButton/Add_Button.scss
+++ b/src/Layout/Dashboard/AddButton/Add_Button.scss
@ -0,0 +1,77 @@
+.Add_Button{
+    button {
+        border: 2px solid var(--primary);
+        background-color: var(--primary);
+        border-radius: 0.5vw;
+        height: 40px;
+        width: 70px;
+        font-size: 1vw ;
+        display: flex; justify-content: center; align-items: center;
+        box-shadow: 2px 2px 7px 0 var(--primary);
+       }
+       button span {
+        display: flex;
+        align-items: center;
+        color: var(--bg);
+        font-weight: normal;
+        font-size: 14px;
+       }
+       
+       button:hover {
+        background-color:var(--primary);
+       }
+}
+
+@media screen and (max-width: 700px) {
+    .Add_Button{
+        button{
+            font-size: 2vw !important;
+        }
+    }
+}
+@media screen and (max-width: 470px) {
+    .Add_Button{
+        button{
+            font-size: 3vw !important;
+        }
+    }
+}
+
+    .Add_Button_notification{
+        button {
+            border: 2px solid var(--primary);
+            background-color: var(--primary);
+            border-radius: 0.5vw;
+            height: 40px;
+            width: 180px;
+            font-size: 1vw ;
+            display: flex; justify-content: center; align-items: center;
+            box-shadow: 2px 2px 7px 0 var(--primary);
+           }
+           button span {
+            display: flex;
+            align-items: center;
+            color: var(--bg);
+            font-weight: normal;
+            font-size: 14px;
+           }
+           
+           button:hover {
+            background-color:var(--primary);
+           }
+    }
+    
+    @media screen and (max-width: 700px) {
+        .Add_Button_notification{
+            button{
+                font-size: 2vw !important;
+            }
+        }
+    }
+    @media screen and (max-width: 470px) {
+        .Add_Button_notification{
+            button{
+                font-size: 3vw !important;
+            }
+        }
+    }
--- a/src/Layout/Dashboard/DashBody.tsx
+++ b/src/Layout/Dashboard/DashBody.tsx
@ -0,0 +1,32 @@
+import { Spinner } from "reactstrap"
+import { QueryStatusEnum } from "../../config/QueryStatus"
+import LoadingPage from "../app/LoadingPage"
+import { useTranslation } from "react-i18next"
+import { BsEmojiFrown } from "react-icons/bs";
+import ErrorPage from "../app/ErrorPage";
+
+
+const DashBody = ({ children , status }: { children: React.ReactNode ,status?:QueryStatusEnum }) => {
+  const {t} = useTranslation();
+
+  // Add You Custom Loadaing Page
+  if(status === QueryStatusEnum.LOADING){
+
+    return <LoadingPage />
+  }
+
+  // Add Your Custom Error Page 
+  if(status === QueryStatusEnum.ERROR){
+    return (
+  <ErrorPage/>
+    )
+  }
+  
+  return (
+    <div className='Page' >
+      { children }
+    </div>
+  )
+}
+
+export default DashBody
--- a/src/Layout/Dashboard/DashHeader.tsx
+++ b/src/Layout/Dashboard/DashHeader.tsx
@ -0,0 +1,27 @@
+import React from "react";
+import AddButtonLayout from "./AddButton/AddButtonLayout";
+import { useTranslation } from "react-i18next";
+
+interface DashHeaderProp {
+  title: string;
+  children?: React.ReactNode;
+  showAddButton?: boolean;
+  haveAddModal?:boolean
+}
+const DashHeader = ({
+  children,
+  title,
+  haveAddModal= true ,
+  showAddButton = true,
+}: DashHeaderProp) => {
+  const [t] = useTranslation();
+  return (
+    <div className="Page_Header">
+      <h3>{t(`${title}`)}</h3>
+      {children}
+      {showAddButton && <AddButtonLayout  haveAddModal={haveAddModal}/>}
+    </div>
+  );
+};
+
+export default DashHeader;
--- a/src/Layout/Dashboard/FormPage.tsx
+++ b/src/Layout/Dashboard/FormPage.tsx
@ -0,0 +1,42 @@
+import { Formik, Form } from 'formik';
+import React, { ReactNode } from 'react';
+import { Button } from "reactstrap";
+import * as Yup from 'yup';
+
+interface FormValues {
+    [key: string]: any;
+}
+
+interface FormPageProps {
+    handleSubmit: (values: any) => void
+    initialValues: FormValues;
+    validationSchema: any;
+    title?: string;
+    children: ReactNode;
+}
+
+const FormPage: React.FC<FormPageProps> = ({ children, handleSubmit, initialValues, validationSchema, title = "Edit Item" }) => {
+    return (
+        <>
+            <h4 className='text-bold'>{title}</h4>
+            <div className="Card">
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema}
+                    onSubmit={handleSubmit}
+                    >
+                    {formik => (
+                        <Form>
+                            {children}
+                            <div className='w-100 d-flex justify-content-center'>
+                                <Button type='submit' color="primary" className='mt-4 w-25 text-center'>Submit</Button>
+                            </div>
+                        </Form>
+                    )}
+                </Formik>
+            </div>
+        </>
+    );
+};
+
+export default FormPage;
--- a/src/Layout/Dashboard/FormikForm.tsx
+++ b/src/Layout/Dashboard/FormikForm.tsx
@ -0,0 +1,67 @@
+import { Formik, Form } from 'formik';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from "reactstrap";
+import * as Yup from 'yup';
+
+interface FormValues {
+    [key: string]: any;
+}
+
+interface FormikFormProps {
+    handleSubmit: (values: any) => void
+    initialValues: FormValues;
+    validationSchema: any;
+    title?: string;
+    children: ReactNode;
+    ButtonName?:string
+}
+const FormikForm: React.FC<FormikFormProps> = ({ children, handleSubmit, initialValues, validationSchema, title = "Add New Item" ,ButtonName="إضافة"}) => {
+    const [t]= useTranslation()
+
+    return (
+        <>
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema}
+                    onSubmit={handleSubmit}
+                    >
+                    {formik => (
+                        <Form >
+                            <div className="Card">
+                            {children}
+                           
+                            </div>
+
+                        </Form>
+                    )}
+                </Formik>
+        </>
+    );
+};
+
+export default FormikForm;
+
+
+
+{/* <FormikForm
+handleSubmit={() => {
+
+}}
+initialValues={() => {
+    return {
+        id: null,
+        name: "",
+
+    }
+}}
+validationSchema={() => {
+    return Yup.object().shape({
+        name: Yup.string().required('required'),
+
+    });
+}}
+
+>
+
+</FormikForm> */}
--- a/src/Layout/Dashboard/LayoutModal.tsx
+++ b/src/Layout/Dashboard/LayoutModal.tsx
@ -0,0 +1,77 @@
+import { Form, Formik } from 'formik'
+import React, { useEffect } from 'react'
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'
+import { usePageState } from '../../lib/statemangment/LayoutPagestate'
+import { useTranslation } from 'react-i18next';
+import { LoadingButton } from '../../Components/Ui/LoadingButton';
+import { QueryStatusEnum } from '../../config/QueryStatus';
+
+interface LayoutModalProps {
+  isAddModal: boolean;
+  headerText: string;
+  handleSubmit: (values: any) => void;
+  getInitialValues: any;
+  getValidationSchema: any;
+  children: React.ReactNode;
+  status?:QueryStatusEnum
+}
+function LayoutModal({isAddModal , headerText , handleSubmit =()=>{} , getInitialValues  , getValidationSchema,status ,children}:LayoutModalProps) {
+
+  
+
+  const  {isOpenAddModel ,setIsOpenAddModel , setIsOpenEditModel ,isOpenEditModel , objectToEdit , CloseAllModal} = usePageState(state => state)
+
+
+    useEffect(()=>{
+      if(status === QueryStatusEnum.SUCCESS){
+          CloseAllModal()
+      }
+    },[status , CloseAllModal])
+    
+    const [t] = useTranslation()
+    return (
+    <Modal centered isOpen={isAddModal ? isOpenAddModel :isOpenEditModel} size="lg" >
+      <ModalHeader className='ModalHeader' toggle={() => isAddModal ?setIsOpenAddModel() : setIsOpenEditModel()} >
+        {t(headerText)}
+      </ModalHeader>
+      {
+        
+          (( objectToEdit != null  && isOpenEditModel) || isOpenAddModel) &&
+          <Formik
+          onSubmit={handleSubmit}
+          initialValues={getInitialValues}
+          validationSchema={getValidationSchema}
+        >
+          
+          {(formik) => (
+            <Form>
+              <ModalBody>
+               {children}
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  disabled={status === QueryStatusEnum.LOADING}
+                  onClick={() => isAddModal ?setIsOpenAddModel() : setIsOpenEditModel()}
+                  color="danger"
+                >
+                  {t("cancel")}
+                </Button>
+                <LoadingButton
+                
+                  type="submit"
+                  color="primary"
+                  isLoading={status === QueryStatusEnum.LOADING}
+                >
+                  {t(isAddModal ? "Add" :"edit")}
+                </LoadingButton>
+              </ModalFooter>
+            </Form>
+          )}
+        </Formik>
+        }
+     
+    </Modal>
+  )
+}
+
+export default LayoutModal
--- a/src/Layout/Dashboard/LyTable.tsx
+++ b/src/Layout/Dashboard/LyTable.tsx
@ -0,0 +1,39 @@
+
+import DataTable from 'react-data-table-component';
+import { Card, CardBody, Spinner } from 'reactstrap';
+import { PaginationBody } from '../../Hooks/usePagination';
+import { useTranslation } from 'react-i18next';
+
+const LyTable = (props?: any) => {
+    const {t} = useTranslation();
+
+  return (
+    <div className='LayoutBody'>
+      <Card>
+        <CardBody>
+          <DataTable
+            columns={props?.column}
+            data={props?.data}
+            progressPending={props?.isLoading}
+            noDataComponent={<h6 className="my-4">{t("no_records")}</h6>}
+            noHeader
+            pagination
+            progressComponent={<Spinner />}
+             
+            {...(props.is_pagination && {
+              paginationServer: true,
+              paginationComponent: () => <PaginationBody data={props?.total} />
+            })}
+
+            {...props}
+          />
+
+        </CardBody>
+      </Card>
+    </div>
+
+  )
+}
+
+
+export default LyTable
--- a/src/Layout/Dashboard/PageStructure.tsx
+++ b/src/Layout/Dashboard/PageStructure.tsx
@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import StatusCard  from "../../Extensions/Editor/StatusCard";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+import { useTranslation } from "react-i18next";
+
+interface PageStructureProps {
+  title?: string;
+  isLoading: boolean;
+  isError: boolean;
+  data?: any;
+  children:any
+}
+
+const PageStructure: FC<PageStructureProps> = ({
+  title,
+  isLoading,
+  isError,
+  data,
+  children,
+}) => {
+  const {t} = useTranslation();
+
+  if (!data) return <StatusCard isLoading={isLoading} isError={isError} />;
+  return (
+    <Card className="Information_title">
+      {title && (
+        <CardHeader>
+          <CardTitle>{t(title)}</CardTitle>
+        </CardHeader>
+      )}
+      <CardBody>{children}</CardBody>
+    </Card>
+  );
+};
+
+export default PageStructure;
--- a/src/Layout/Dashboard/SearchField.tsx
+++ b/src/Layout/Dashboard/SearchField.tsx
@ -0,0 +1,56 @@
+import { Input } from 'antd';
+import { SearchProps } from 'antd/es/input'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+const { Search } = Input;
+
+const SearchField = ({ searchBy }: any) => {
+    const navigate = useNavigate()
+    const [searchParams,] = useSearchParams();
+    const location = useLocation()
+    const { t } = useTranslation();
+
+
+    const [searchValue, setSearchValue] = useState(searchParams.get(searchBy ?? "search") || "");
+
+    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+        if (value || value !== "") {
+            navigate(`${location?.pathname}?${searchBy ?? "search"}=${value}`);
+        } else {
+            const params = new URLSearchParams(location.search);
+            params.delete(searchBy ?? "search");
+            navigate(`${location.pathname}?${params.toString()}`);
+        }
+    }
+
+    const onChange = (e: any) => {
+        const value = e.target.value
+        setSearchValue(e.target.value);
+        if (value === "") {
+            const params = new URLSearchParams(location.search);
+            params.delete(searchBy ?? "search");
+            navigate(`${location.pathname}?${params.toString()}`);
+        }
+    }
+
+
+    return (
+        <div className='SearchField'
+        >
+            <Search
+                allowClear
+                enterButton={t("search")}
+                size="middle"
+                placeholder={t(searchBy ?? "search")}
+                onSearch={onSearch}
+                style={{ width: 250 }}
+                value={searchValue}
+                onChange={onChange}
+            />
+
+        </div>
+    )
+}
+
+export default SearchField
--- a/src/Layout/Dashboard/SelectField.tsx
+++ b/src/Layout/Dashboard/SelectField.tsx
@ -0,0 +1,39 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectField = ({ selectBy, lebel, option }: any) => {
+    const [searchQuery, setSearchQuery] = useState<string>('');
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [t] = useTranslation();
+
+    useEffect(() => {
+        const searchParams = new URLSearchParams(location.search);
+        setSearchQuery(searchParams.get('search') || '');
+    }, []);
+
+
+    const handleSelectChange = (value: any) => {
+        if (value) {
+            console.log(`${location.pathname}?${selectBy}=${value}`);
+            navigate(`${location.pathname}?${selectBy}=${value}`);
+        }
+    }
+
+    return (
+        <div className='SelectField'>
+            <Select
+                placeholder={t(`${lebel}`)}
+                options={option}
+                size="large"
+                className={`w-100`}
+                allowClear
+                onChange={handleSelectChange}
+            />
+        </div>
+    );
+};
+
+export default React.memo(SelectField);
--- a/src/Layout/Dashboard/SelectWSearchField.tsx
+++ b/src/Layout/Dashboard/SelectWSearchField.tsx
@ -0,0 +1,52 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectWSearchField = ({ selectBy, submiteBy, lebel, option }: any) => {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    setSearchQuery(searchParams.get('search') || '');
+  }, []);
+
+  const handleSearchChange = (value: any) => {
+    if (value || value !== "") {
+      navigate(`${location.pathname}?${selectBy}=${value}`);
+    } else {
+      const params = new URLSearchParams(location.search);
+      params.delete(selectBy ?? "search");
+      navigate(`${location.pathname}?${params.toString()}`);
+    }
+  };
+
+  const handleSelectChange = (value: any) => {
+    if (value) {
+        console.log(`${location.pathname}?${submiteBy}=${value}`);
+        
+      navigate(`${location.pathname}?${submiteBy}=${value}`);
+    } 
+}
+
+  return (
+    <div className='SelectWSearchField'>
+      <Select
+        placeholder={t(`${lebel}`)}
+        options={option}
+        size="large"
+        className={`w-100`}
+        allowClear
+        onChange={handleSelectChange}
+        showSearch
+        optionFilterProp="label"
+        onSearch={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default React.memo(SelectWSearchField);
--- a/src/Layout/Dashboard/ViewPage.tsx
+++ b/src/Layout/Dashboard/ViewPage.tsx
@ -0,0 +1,80 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardBody, Button } from "reactstrap";
+import { Formik, Form } from "formik";
+import { LoadingButton } from "../../Components/Ui/LoadingButton";
+import ProgressBar from "../../Components/Ui/ProgressBar";
+import { useLocation, useNavigate } from "react-router-dom";
+import { usePageState } from "../../lib/statemangment/LayoutPagestate";
+import { useTranslation } from "react-i18next";
+
+type TViewPage ={
+  children: React.ReactNode,
+  getInitialValues:any,
+   getValidationSchema:any,
+   handleSubmit:any,
+  //  BarStatus:any,
+   IsloadingButton:boolean
+}
+
+const ViewPage: React.FC<TViewPage>=  ({children,getInitialValues, getValidationSchema,handleSubmit,IsloadingButton})=> {
+    
+    const {objectToEdit,setObjectToEdit} = usePageState()
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+  // console.log(BarStatus);
+  
+  const navigateToParent = () => {
+    navigate(-1)
+    if(objectToEdit){      
+      setObjectToEdit([])
+    }
+  };
+
+  return (
+    <Card className="ViewTapPage">
+      <CardHeader  className="CardHeader" >
+        <CardTitle className="View_information">
+          {t("View_information")}
+        </CardTitle>
+       <Button onClick={() => { navigateToParent()}}>  {t("back")}  </Button>
+      </CardHeader>
+      <CardBody>
+        {
+           <Formik
+           enableReinitialize
+           onSubmit={handleSubmit}
+           initialValues={getInitialValues(objectToEdit ?? {})}
+           validationSchema={getValidationSchema()}
+        >
+          {(formik) => (
+            <Form>
+              {/* <HeadTabs tabs={tabs} /> */}
+                {children}
+                { 
+                  <>
+               
+                    <div className="d-flex mt-4 justify-content-center align-items-center">
+                      <LoadingButton
+                        type="submit"
+                        color="primary"
+                        isLoading={IsloadingButton}
+                        
+                      >
+                        {t("save")}  
+                      </LoadingButton>
+                      {/* <Button disabled={isLoading}  type="submit" color="primary">  {t("save")}  </Button> */}
+                    </div>
+                  </>
+                }
+            </Form>
+          )}
+        </Formik>
+        }
+       
+      </CardBody>
+    </Card>
+  );
+};
+
+
+export default ViewPage;
--- a/src/Layout/Dashboard/useCloseModal.ts
+++ b/src/Layout/Dashboard/useCloseModal.ts
@ -0,0 +1,18 @@
+import React, { useEffect } from 'react'
+import { usePageState } from '../../lib/statemangment/LayoutPagestate'
+
+function useCloseModal(statusClose:any) {
+
+    const {CloseAllModal} = usePageState()
+    
+    useEffect(()=>{
+
+        if(statusClose){
+            CloseAllModal()
+        }
+    },[statusClose , CloseAllModal])
+
+  return true
+}
+
+export default useCloseModal
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.2 38.4"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M3.03 0h49.13c1.67 0 3.03 1.36 3.03 3.03v32.33c0 1.66-1.36 3.02-3.02 3.03H3.02C1.36 38.4 0 37.03 0 35.37V3.03C0 1.36 1.36 0 3.03 0z"/><path d="M0 12.8h55.2v22.57c0 1.67-1.36 3.03-3.03 3.03H3.03C1.36 38.4 0 37.04 0 35.37V12.8z" fill="#d00"/><path d="M0 25.6h55.2v9.77c0 1.66-1.36 3.02-3.02 3.03H3.03A3.04 3.04 0 010 35.37V25.6z" fill="#ffce00"/></g></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="42.67" height="32" viewBox="0 0 640 480"><defs><clipPath id="flagUm4x30"><path fill-opacity=".7" d="M0 0h682.7v512H0z"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#flagUm4x30)" transform="scale(.9375)"><g stroke-width="1pt"><path fill="#bd3d44" d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z"/><path fill="#fff" d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z"/></g><path fill="#192f5d" d="M0 0h389.1v275.7H0z"/><path fill="#fff" d="M32.4 11.8L36 22.7h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57L74 67.9l-9-6.7l-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5L330 57l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 66.9L36 78h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 122.1L36 133h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.7l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9H177l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 10.9l-9.3-6.8l-9.3 6.8l3.6-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.8l-9.2 6.8l3.5-11l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 10.9l-9.2-6.8l-9.3 6.8l3.5-11l-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7H29zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11H177l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.3-6.7h11.5zm64.9 0l3.5 11H242l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.4zm64.8 0l3.6 11h11.4l-9.2 6.7l3.5 10.8l-9.3-6.7l-9.2 6.7l3.5-10.9l-9.2-6.7h11.4zm64.9 0l3.5 11h11.5l-9.3 6.7l3.6 10.8l-9.3-6.7l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.3 6.7l3.6 11l-9.3-6.8l-9.3 6.7l3.6-10.9l-9.3-6.7h11.5zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7H191zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 11l-9.3-6.8l-9.2 6.7l3.5-10.9l-9.3-6.7H256zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.5 11l-9.2-6.8l-9.3 6.7l3.5-10.9l-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7H29zm64.9 0l3.5 10.9h11.5L103 250l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9H177l-9 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.3-6.7h11.5zm64.9 0l3.5 10.9H242l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.4zm64.8 0l3.6 10.9h11.4l-9.2 6.7l3.5 10.9l-9.3-6.7l-9.2 6.7l3.5-11l-9.2-6.7h11.4zm64.9 0l3.5 10.9h11.5l-9.3 6.7l3.6 10.9l-9.3-6.7l-9.3 6.7l3.6-11l-9.3-6.7h11.5z"/></g></svg>