start code

2024-02-11 10:54:22 +03:00 · 2024-02-11 10:54:22 +03:00 · d3409a6078
commit d3409a6078
514 changed files with 80095 additions and 0 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,6 @@
+node_modules/
+dist/
+.prettierrc.js
+.eslintrc.js
+env.d.ts
+jsconfig.json
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,38 @@
+{
+  "extends": [
+    // By extending from a plugin config, we can get recommended rules without having to add them manually.
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    //"plugin:jsx-a11y/recommended",
+    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
+    // Make sure it"s always the last config, so it gets the chance to override other configs.
+    "eslint-config-prettier"
+  ],
+  "settings": {
+    "react": {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      "version": "detect"
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    // Add your own rules here to override ones from the extended configs.
+    "react/prop-types": 0
+  },
+  "env": {
+    "browser": true,
+    "amd": true,
+    "node": true
+  },
+  "globals": {
+    "window": true,
+    "module": true
+  }
+}
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "react-app/jest", "prettier"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+safelist.txt
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+/.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#ignore index.css from src folder
+# /src/index.css
+
+#locales
+/locales
+.idea
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+node_modules/
+dist/
+.prettierrc.js
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true
+}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 4
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+# 
--- a/index.html
+++ b/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#075985" />
+  <meta name="description" content="" />
+  <meta name="keywords" content="" />
+
+  <meta property="og:title" content="" />
+  <meta property="og:description" content="" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="/manifest.json" />
+  <script src="/public.js"></script>
+  <!--
+      Notice the use of  in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>website title</title>
+  <!-- version 1.0.0 -->
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/jsconfig.eslint.json
+++ b/jsconfig.eslint.json
@ -0,0 +1,12 @@
+{
+  "extends": "./jsconfig.json",
+  "compilerOptions": {
+    // ensure that nobody can accidentally use this config for a build
+    "noEmit": true
+  },
+  "include": [
+    "src",
+    "vite.config.js"
+  ],
+  "exclude": ["node_modules", "**/dist"]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": false,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,125 @@
+{
+  "name": "portal",
+  "private": true,
+  "version": "2.0.0",
+  "author": "Omar Hamdan",
+  "date": "2023-06-01",
+  "scripts": {
+    "start": "vite",
+    "start:hosted": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix",
+    "captions": "i18next 'src/**/*.{js,jsx}' 'lib/**/*.{js,jsx}' [-oc]"
+  },
+  "dependencies": {
+    "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/interaction": "^6.1.8",
+    "@fullcalendar/react": "^6.1.8",
+    "@fullcalendar/timegrid": "^6.1.8",
+    "@microsoft/signalr": "^8.0.0",
+    "@react-google-maps/api": "^2.18.1",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@tanstack/match-sorter-utils": "^8.8.4",
+    "@tanstack/react-query": "^4.32.1",
+    "@tanstack/react-query-devtools": "^4.32.1",
+    "@tanstack/react-table": "^8.8.5",
+    "@types/geojson": "^7946.0.14",
+    "@visx/pattern": "^3.0.0",
+    "apexcharts": "^3.37.3",
+    "axios": "^1.3.4",
+    "classnames": "^2.3.2",
+    "d3-dsv": "^3.0.1",
+    "d3-fetch": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "dayjs": "^1.11.7",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.11",
+    "formik": "^2.2.9",
+    "framer-motion": "^10.8.5",
+    "history": "^5.3.0",
+    "html-react-parser": "^3.0.15",
+    "html2canvas": "^1.4.1",
+    "http-proxy-middleware": "^2.0.6",
+    "i18next": "^22.4.13",
+    "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
+    "miragejs": "^0.1.47",
+    "pintura": "^0.3.10",
+    "prettier": "^2.8.1",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-custom-scrollbars-2": "^4.5.0",
+    "react-dom": "^18.2.0",
+    "react-highlight-words": "^0.20.0",
+    "react-i18next": "^12.2.0",
+    "react-icons": "^4.8.0",
+    "react-markdown": "^8.0.7",
+    "react-modal": "^3.16.1",
+    "react-number-format": "^4.9.1",
+    "react-password-strength-bar": "^0.4.1",
+    "react-popper": "^2.3.0",
+    "react-portal": "^4.2.2",
+    "react-quill": "^2.0.0",
+    "react-redux": "^8.0.5",
+    "react-resize-detector": "^7.0.0",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.1",
+    "react-scroll": "^1.8.9",
+    "react-select": "^5.7.2",
+    "react-simple-maps": "^3.0.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-tooltip": "^5.11.1",
+    "react-window": "^1.8.6",
+    "react-zoom-pan-pinch": "^3.3.0",
+    "redux-persist": "^6.0.0",
+    "twin.macro": "^3.3.0",
+    "web-vitals": "^3.4.0",
+    "yup": "^1.1.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/d3-fetch": "^3.0.2",
+    "@types/d3-scale": "^4.0.3",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.15.5",
+    "@types/react": "^18.0.28",
+    "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-highlight-words": "^0.16.4",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-portal": "^4.0.4",
+    "@types/react-scroll": "^1.8.7",
+    "@types/react-simple-maps": "^3.0.0",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-nesting": "^11.2.1",
+    "prettier": "^2.8.6",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^3.3.1",
+    "vite": "^5.1.1",
+    "vite-plugin-dynamic-import": "^1.3.4"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/public/caching.html
+++ b/public/caching.html
@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <title>Redis Caching UI</title>
+    <style>
+      h1 {
+        text-align: left;
+        color: #333;
+        font-size: 24px;
+        margin-bottom: 10px;
+        padding-left: 20px; /* Add padding to move the title to the left */
+      }
+      /* Style for buttons */
+      button {
+        padding: 10px 20px;
+        margin: 10px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        float: right; /* Float the button to the right */
+      }
+
+      button:hover {
+        background-color: #0056b3;
+      }
+      button:disabled {
+        background-color: #2666ab;
+        cursor: not-allowed;
+      }
+      /* Style for checkboxes and label */
+      label {
+        display: block;
+        margin: 3px 0;
+        font-size: 16px;
+        padding-left: 20px; /* Add padding to move the title to the left */
+      }
+
+      .tableCheckbox {
+        margin-right: 5px;
+      }
+
+      /* Style for the container holding checkboxes */
+      .checkbox-container {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 10px;
+      }
+
+      /* Style for alerts */
+      .alert {
+        padding: 10px;
+        border-radius: 5px;
+        margin: 10px;
+      }
+      .alert-success {
+        background-color: #4caf50;
+        color: #fff;
+      }
+      .alert-error {
+        background-color: #f44336;
+        color: #fff;
+      }
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 0;
+      }
+      .boxDiv {
+        background-color: #fff;
+        padding: 20px;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+      }
+      .tableCheckbox {
+        margin-right: 10px;
+      }
+      .spinner {
+        border: 4px solid rgba(255, 255, 255, 0.3);
+        border-top: 4px solid #007bff;
+        border-radius: 50%;
+        width: 8px;
+        height: 8px;
+        animation: spin 1s linear infinite;
+        display: none; /* Initially hidden */
+        margin-left: 10px;
+      }
+
+      /* Style for the Clear All Cache button with spinner */
+      #clearAllButton {
+        display: flex;
+        align-items: center;
+      }
+
+      /* Style for the Cache Selected Tables button with spinner */
+      #cacheButton {
+        display: flex;
+        align-items: center;
+      }
+
+      /* Keyframes animation for the spinner */
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="boxDiv">
+      <div style="display: flex; justify-content: space-between">
+        <h1>Redis Caching UI</h1>
+        <button id="cacheButton">
+          Cache
+          <span class="spinner"></span>
+        </button>
+      </div>
+      <label>Select Tables:</label>
+      <!-- <button id="cacheButton">
+        Cache
+        <span class="spinner"></span>
+      </button> -->
+      <div class="checkbox-container boxDiv">
+        <!-- Add a "Select All" checkbox -->
+        <div class="boxDiv"><input id="selectAllCheckbox" type="checkbox" class="tableCheckbox" /> Select All</div>
+        <div class="boxdiv">
+          <div class="boxDiv">
+            <input type="checkbox" class="tableCheckbox" value="EntityRequestMapping" /> EntityRequestMapping
+          </div>
+          <div class="boxDiv">
+            <input type="checkbox" class="tableCheckbox" value="RoleAuthorityOwnerShipView" />
+            RoleAuthorityOwnerShipView
+          </div>
+          <div class="boxDiv">
+            <input type="checkbox" class="tableCheckbox" value="RoleAuthorityView" /> RoleAuthorityView
+          </div>
+          <div class="boxDiv"><input type="checkbox" class="tableCheckbox" value="LTCaptions" /> LTCaptions</div>
+        </div>
+
+        <!-- Add more checkboxes for additional tables as needed -->
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const cacheButton = document.getElementById('cacheButton');
+        const tableCheckboxes = document.querySelectorAll('.tableCheckbox');
+        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
+        const spinner = document.querySelectorAll('.spinner'); // Select all spinners
+        const backendurl = 'http://';
+
+        // Add a click event listener to the "Select All" checkbox
+        selectAllCheckbox.addEventListener('click', () => {
+          const isChecked = selectAllCheckbox.checked;
+
+          // Set the checked state of all table checkboxes to match the "Select All" checkbox
+          tableCheckboxes.forEach((checkbox) => {
+            checkbox.checked = isChecked;
+          });
+        });
+
+        cacheButton.addEventListener('click', async () => {
+          const selectedTables = Array.from(tableCheckboxes)
+            .filter((checkbox) => checkbox.checked && checkbox.value !== 'on')
+            .map((checkbox) => checkbox.value);
+
+          if (selectedTables.length === 0) {
+            Swal.fire('Warning', 'Please select at least one table to cache.', 'warning');
+            return;
+          }
+
+          // Disable the cache button and show the spinner
+          cacheButton.disabled = true;
+          spinner[0].style.display = 'inline-block'; // Display the spinner
+
+          try {
+            const response = await fetch(`${backendurl}/api/caching`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(selectedTables),
+            });
+
+            if (response.status === 200) {
+              Swal.fire('Success', 'Tables cached successfully!', 'success');
+              //uncheck all checkboxes
+              tableCheckboxes.forEach((checkbox) => {
+                checkbox.checked = false;
+              });
+            } else {
+              Swal.fire('Error', `Error: Status Code ${response.status}`, 'error');
+            }
+          } catch (error) {
+            Swal.fire('Error', 'Error: ' + error.message, 'error');
+          } finally {
+            // Re-enable the cache button and hide the spinner
+            cacheButton.disabled = false;
+            spinner[0].style.display = 'none';
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/avatars/logo-dark-streamline.png
+++ b/public/img/avatars/logo-dark-streamline.png
--- a/public/img/avatars/logo-light-streamline.png
+++ b/public/img/avatars/logo-light-streamline.png
--- a/public/img/countries/ar.png
+++ b/public/img/countries/ar.png
--- a/public/img/countries/us.png
+++ b/public/img/countries/us.png
--- a/public/img/logo/logo-ar-dark-full.png
+++ b/public/img/logo/logo-ar-dark-full.png
--- a/public/img/logo/logo-ar-dark-full.svg
+++ b/public/img/logo/logo-ar-dark-full.svg
@ -0,0 +1,19 @@
+<svg id="Group_836" data-name="Group 836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="154.329" height="33.234" viewBox="0 0 154.329 33.234">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_43" data-name="Rectangle 43" width="154.329" height="33.234" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_835" data-name="Group 835" clip-path="url(#clip-path)">
+    <path id="Path_48" data-name="Path 48" d="M197.646,12V22.547c0,2.024.13,2.316-.514,2.316l-1.326,0v-.012H179.7V.219h-4.707V29.561h19.2v.012h6.8a1.188,1.188,0,0,0,.829-.3,1.251,1.251,0,0,0,.451-.878V12Z" transform="translate(-103.047 -0.129)" fill="#fff"/>
+    <path id="Path_49" data-name="Path 49" d="M120.606,30.938A8.027,8.027,0,0,0,118,35.468c-.1.641-.153,3.491-.154,6.22v.053h0v8.488h0l4.609-3.78V41.844h0V36.233a2.451,2.451,0,0,1,.972-1.866,2.958,2.958,0,0,1,1.943-.844H132.3v7.761a.5.5,0,0,1-.563.56h-7.659v4.606h10.935a1.948,1.948,0,0,0,1.226-.588,1.637,1.637,0,0,0,.664-1.2V28.864h-11.64a6.722,6.722,0,0,0-4.655,2.074" transform="translate(-69.391 -16.997)" fill="#fff"/>
+    <path id="Path_50" data-name="Path 50" d="M46.987,41.832H14.577a43.628,43.628,0,0,0-.357-6.841,7.572,7.572,0,0,0-2.863-4.067A7.428,7.428,0,0,0,6.751,29.11H.358v4.6a44.685,44.685,0,0,1,5.627.2,4.857,4.857,0,0,1,3.888,4.791v3.327H.358v4.528l46.629.027Z" transform="translate(-0.211 -17.142)" fill="#fff"/>
+    <path id="Path_51" data-name="Path 51" d="M152.886,13.856a2.125,2.125,0,1,1,2.124,2.126,2.125,2.125,0,0,1-2.124-2.126" transform="translate(-90.028 -6.908)" fill="#fff"/>
+    <path id="Path_52" data-name="Path 52" d="M0,13.856a2.126,2.126,0,1,1,2.126,2.126A2.126,2.126,0,0,1,0,13.856" transform="translate(0 -6.908)" fill="#fff"/>
+    <path id="Path_53" data-name="Path 53" d="M230.862,13.856a2.126,2.126,0,1,1,2.127,2.126,2.127,2.127,0,0,1-2.127-2.126" transform="translate(-135.944 -6.908)" fill="#fff"/>
+    <path id="Path_54" data-name="Path 54" d="M285.284,0h-3.458c-3.682,0-7.038,3.086-7.038,6.48V21.012C272.946,19.2,271.2,17.47,271.2,17.47l-3.877,1.962,10.1,9.975,10.3-9.985-3.905-1.933s-1.691,1.691-3.5,3.514V5.513S279.929,0,285.284,0" transform="translate(-157.414)" fill="#fff"/>
+    <path id="Path_55" data-name="Path 55" d="M298.9,5.513h13.472L317.908,0H303.879c-5.355,0-4.974,5.513-4.974,5.513" transform="translate(-176.008)" fill="#fff"/>
+    <path id="Path_56" data-name="Path 56" d="M336.145.045,325.732,10.2l3.913,1.524s1.694-1.691,3.505-3.514l-.009,15.871c0,.948-.549,5.364-4.974,5.364l-.243.009h3.711c3.682,0,7.039-2.91,7.039-6.3V8.208l3.587,3.551,3.877-1.562Z" transform="translate(-191.809 -0.026)" fill="#fff"/>
+    <path id="Path_57" data-name="Path 57" d="M316.5,58.5H303.173l-5.708,5.373h13.814l.243-.009c4.426,0,4.975-4.416,4.975-5.364" transform="translate(-175.164 -34.449)" fill="#fff"/>
+  </g>
+</svg>
--- a/public/img/logo/logo-ar-light-full.png
+++ b/public/img/logo/logo-ar-light-full.png
--- a/public/img/logo/logo-ar-light-full.svg
+++ b/public/img/logo/logo-ar-light-full.svg
@ -0,0 +1,19 @@
+<svg id="Group_834" data-name="Group 834" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210.511" height="45.332" viewBox="0 0 210.511 45.332">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_42" data-name="Rectangle 42" width="210.511" height="45.332" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_833" data-name="Group 833" clip-path="url(#clip-path)">
+    <path id="Path_38" data-name="Path 38" d="M205.892,16.284V30.675c0,2.761.178,3.159-.7,3.159l-1.809,0v-.017H181.416V.219h-6.421V40.243h26.188v.016h9.276a1.62,1.62,0,0,0,1.131-.4,1.706,1.706,0,0,0,.615-1.2V16.284Z" transform="translate(-76.855 -0.096)" fill="#004270"/>
+    <path id="Path_39" data-name="Path 39" d="M121.612,31.693a10.949,10.949,0,0,0-3.558,6.179c-.138.874-.208,4.762-.21,8.484v.072h0v11.58l6.287-5.156V46.57h0V38.915a3.343,3.343,0,0,1,1.326-2.546,4.035,4.035,0,0,1,2.65-1.151h9.457V45.805a.678.678,0,0,1-.768.764H126.344v6.283h14.916a2.657,2.657,0,0,0,1.673-.8,2.233,2.233,0,0,0,.906-1.643V28.864H127.962a9.169,9.169,0,0,0-6.349,2.829" transform="translate(-51.754 -12.677)" fill="#004270"/>
+    <path id="Path_40" data-name="Path 40" d="M63.962,46.464H19.753a59.51,59.51,0,0,0-.487-9.331,10.328,10.328,0,0,0-3.906-5.548A10.132,10.132,0,0,0,9.079,29.11H.358v6.279a60.951,60.951,0,0,1,7.676.279,6.625,6.625,0,0,1,5.3,6.535v4.538H.358v6.176l63.6.037Z" transform="translate(-0.157 -12.785)" fill="#004270"/>
+    <path id="Path_41" data-name="Path 41" d="M152.886,14.63a2.9,2.9,0,1,1,2.9,2.9,2.9,2.9,0,0,1-2.9-2.9" transform="translate(-67.145 -5.152)" fill="#004270"/>
+    <path id="Path_42" data-name="Path 42" d="M0,14.63a2.9,2.9,0,1,1,2.9,2.9A2.9,2.9,0,0,1,0,14.63" transform="translate(0 -5.152)" fill="#004270"/>
+    <path id="Path_43" data-name="Path 43" d="M230.862,14.63a2.9,2.9,0,1,1,2.9,2.9,2.9,2.9,0,0,1-2.9-2.9" transform="translate(-101.391 -5.152)" fill="#004270"/>
+    <path id="Path_44" data-name="Path 44" d="M291.823,0h-4.717c-5.022,0-9.6,4.21-9.6,8.839V28.661c-2.511-2.473-4.895-4.831-4.895-4.831L267.322,26.5,281.1,40.111l14.05-13.619-5.327-2.637s-2.307,2.307-4.78,4.793V7.521S284.518,0,291.823,0" transform="translate(-117.403)" fill="#004270"/>
+    <path id="Path_45" data-name="Path 45" d="M298.907,7.521h18.376L324.828,0H305.691c-7.3,0-6.785,7.521-6.785,7.521" transform="translate(-131.271)" fill="#7180a3"/>
+    <path id="Path_46" data-name="Path 46" d="M339.936.045l-14.2,13.849,5.338,2.079s2.31-2.307,4.782-4.793l-.012,21.648c0,1.293-.749,7.316-6.785,7.316l-.332.012h5.062c5.023,0,9.6-3.969,9.6-8.6V11.18l4.893,4.844,5.288-2.131Z" transform="translate(-143.056 -0.02)" fill="#00a0e6"/>
+    <path id="Path_47" data-name="Path 47" d="M323.425,58.5H305.251l-7.786,7.329h18.843l.331-.013c6.037,0,6.786-6.024,6.786-7.316" transform="translate(-130.641 -25.693)" fill="#63b6da"/>
+  </g>
+</svg>
--- a/public/img/logo/logo-dark-streamline.png
+++ b/public/img/logo/logo-dark-streamline.png
--- a/public/img/logo/logo-en-dark-full.png
+++ b/public/img/logo/logo-en-dark-full.png
--- a/public/img/logo/logo-en-light-full.png
+++ b/public/img/logo/logo-en-light-full.png
--- a/public/img/logo/logo-en-light-full.svg
+++ b/public/img/logo/logo-en-light-full.svg
--- a/public/img/logo/logo-light-streamline.png
+++ b/public/img/logo/logo-light-streamline.png
--- a/public/img/logo/nafith-logo-w.svg
+++ b/public/img/logo/nafith-logo-w.svg
@ -0,0 +1,19 @@
+<svg id="Group_836" data-name="Group 836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="154.329" height="33.234" viewBox="0 0 154.329 33.234">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_43" data-name="Rectangle 43" width="154.329" height="33.234" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_835" data-name="Group 835" clip-path="url(#clip-path)">
+    <path id="Path_48" data-name="Path 48" d="M197.646,12V22.547c0,2.024.13,2.316-.514,2.316l-1.326,0v-.012H179.7V.219h-4.707V29.561h19.2v.012h6.8a1.188,1.188,0,0,0,.829-.3,1.251,1.251,0,0,0,.451-.878V12Z" transform="translate(-103.047 -0.129)" fill="#fff"/>
+    <path id="Path_49" data-name="Path 49" d="M120.606,30.938A8.027,8.027,0,0,0,118,35.468c-.1.641-.153,3.491-.154,6.22v.053h0v8.488h0l4.609-3.78V41.844h0V36.233a2.451,2.451,0,0,1,.972-1.866,2.958,2.958,0,0,1,1.943-.844H132.3v7.761a.5.5,0,0,1-.563.56h-7.659v4.606h10.935a1.948,1.948,0,0,0,1.226-.588,1.637,1.637,0,0,0,.664-1.2V28.864h-11.64a6.722,6.722,0,0,0-4.655,2.074" transform="translate(-69.391 -16.997)" fill="#fff"/>
+    <path id="Path_50" data-name="Path 50" d="M46.987,41.832H14.577a43.628,43.628,0,0,0-.357-6.841,7.572,7.572,0,0,0-2.863-4.067A7.428,7.428,0,0,0,6.751,29.11H.358v4.6a44.685,44.685,0,0,1,5.627.2,4.857,4.857,0,0,1,3.888,4.791v3.327H.358v4.528l46.629.027Z" transform="translate(-0.211 -17.142)" fill="#fff"/>
+    <path id="Path_51" data-name="Path 51" d="M152.886,13.856a2.125,2.125,0,1,1,2.124,2.126,2.125,2.125,0,0,1-2.124-2.126" transform="translate(-90.028 -6.908)" fill="#fff"/>
+    <path id="Path_52" data-name="Path 52" d="M0,13.856a2.126,2.126,0,1,1,2.126,2.126A2.126,2.126,0,0,1,0,13.856" transform="translate(0 -6.908)" fill="#fff"/>
+    <path id="Path_53" data-name="Path 53" d="M230.862,13.856a2.126,2.126,0,1,1,2.127,2.126,2.127,2.127,0,0,1-2.127-2.126" transform="translate(-135.944 -6.908)" fill="#fff"/>
+    <path id="Path_54" data-name="Path 54" d="M285.284,0h-3.458c-3.682,0-7.038,3.086-7.038,6.48V21.012C272.946,19.2,271.2,17.47,271.2,17.47l-3.877,1.962,10.1,9.975,10.3-9.985-3.905-1.933s-1.691,1.691-3.5,3.514V5.513S279.929,0,285.284,0" transform="translate(-157.414)" fill="#fff"/>
+    <path id="Path_55" data-name="Path 55" d="M298.9,5.513h13.472L317.908,0H303.879c-5.355,0-4.974,5.513-4.974,5.513" transform="translate(-176.008)" fill="#fff"/>
+    <path id="Path_56" data-name="Path 56" d="M336.145.045,325.732,10.2l3.913,1.524s1.694-1.691,3.505-3.514l-.009,15.871c0,.948-.549,5.364-4.974,5.364l-.243.009h3.711c3.682,0,7.039-2.91,7.039-6.3V8.208l3.587,3.551,3.877-1.562Z" transform="translate(-191.809 -0.026)" fill="#fff"/>
+    <path id="Path_57" data-name="Path 57" d="M316.5,58.5H303.173l-5.708,5.373h13.814l.243-.009c4.426,0,4.975-4.416,4.975-5.364" transform="translate(-175.164 -34.449)" fill="#fff"/>
+  </g>
+</svg>
--- a/public/img/others/auth-cover-bg.jpg
+++ b/public/img/others/auth-cover-bg.jpg
--- a/public/img/others/auth-side-bg.jpg
+++ b/public/img/others/auth-side-bg.jpg
--- a/public/img/others/docs/blank-dark.jpg
+++ b/public/img/others/docs/blank-dark.jpg
--- a/public/img/others/img-2-dark.png
+++ b/public/img/others/img-2-dark.png
--- a/public/img/others/img-2.png
+++ b/public/img/others/img-2.png
--- a/public/img/others/no-mail-selected-dark.png
+++ b/public/img/others/no-mail-selected-dark.png
--- a/public/img/others/no-mail-selected.png
+++ b/public/img/others/no-mail-selected.png
--- a/public/img/others/no-notification.png
+++ b/public/img/others/no-notification.png
--- a/public/img/others/pending-approval-dark.png
+++ b/public/img/others/pending-approval-dark.png
--- a/public/img/others/pending-approval.png
+++ b/public/img/others/pending-approval.png
--- a/public/img/others/upload-dark.png
+++ b/public/img/others/upload-dark.png
--- a/public/img/others/upload.png
+++ b/public/img/others/upload.png
--- a/public/img/others/welcome-dark.png
+++ b/public/img/others/welcome-dark.png
--- a/public/img/others/welcome.png
+++ b/public/img/others/welcome.png
--- a/public/img/thumbs/drivers-license-back-dark.png
+++ b/public/img/thumbs/drivers-license-back-dark.png
--- a/public/img/thumbs/drivers-license-back.png
+++ b/public/img/thumbs/drivers-license-back.png
--- a/public/img/thumbs/drivers-license-front-dark.png
+++ b/public/img/thumbs/drivers-license-front-dark.png
--- a/public/img/thumbs/drivers-license-front.png
+++ b/public/img/thumbs/drivers-license-front.png
--- a/public/img/thumbs/file.png
+++ b/public/img/thumbs/file.png
--- a/public/img/thumbs/google-drive.png
+++ b/public/img/thumbs/google-drive.png
--- a/public/img/thumbs/help-center-category-0-dark.png
+++ b/public/img/thumbs/help-center-category-0-dark.png
--- a/public/img/thumbs/help-center-category-0.png
+++ b/public/img/thumbs/help-center-category-0.png
--- a/public/img/thumbs/help-center-category-1-dark.png
+++ b/public/img/thumbs/help-center-category-1-dark.png
--- a/public/img/thumbs/help-center-category-1.png
+++ b/public/img/thumbs/help-center-category-1.png
--- a/public/img/thumbs/help-center-category-2-dark.png
+++ b/public/img/thumbs/help-center-category-2-dark.png
--- a/public/img/thumbs/help-center-category-2.png
+++ b/public/img/thumbs/help-center-category-2.png
--- a/public/img/thumbs/help-center-category-3-dark.png
+++ b/public/img/thumbs/help-center-category-3-dark.png
--- a/public/img/thumbs/help-center-category-3.png
+++ b/public/img/thumbs/help-center-category-3.png
--- a/public/img/thumbs/help-center-category-4-dark.png
+++ b/public/img/thumbs/help-center-category-4-dark.png
--- a/public/img/thumbs/help-center-category-4.png
+++ b/public/img/thumbs/help-center-category-4.png
--- a/public/img/thumbs/help-center-category-5-dark.png
+++ b/public/img/thumbs/help-center-category-5-dark.png
--- a/public/img/thumbs/help-center-category-5.png
+++ b/public/img/thumbs/help-center-category-5.png
--- a/public/img/thumbs/help-center-category-6-dark.png
+++ b/public/img/thumbs/help-center-category-6-dark.png
--- a/public/img/thumbs/help-center-category-6.png
+++ b/public/img/thumbs/help-center-category-6.png
--- a/public/img/thumbs/help-center-category-7-dark.png
+++ b/public/img/thumbs/help-center-category-7-dark.png
--- a/public/img/thumbs/help-center-category-7.png
+++ b/public/img/thumbs/help-center-category-7.png
--- a/public/img/thumbs/id-card-back-dark.png
+++ b/public/img/thumbs/id-card-back-dark.png
--- a/public/img/thumbs/id-card-back.png
+++ b/public/img/thumbs/id-card-back.png
--- a/public/img/thumbs/id-card-front-dark.png
+++ b/public/img/thumbs/id-card-front-dark.png
--- a/public/img/thumbs/id-card-front.png
+++ b/public/img/thumbs/id-card-front.png
--- a/public/img/thumbs/passport-dark.png
+++ b/public/img/thumbs/passport-dark.png
--- a/public/img/thumbs/passport-data-dark.png
+++ b/public/img/thumbs/passport-data-dark.png
--- a/public/img/thumbs/passport-data.png
+++ b/public/img/thumbs/passport-data.png
--- a/public/img/thumbs/passport.png
+++ b/public/img/thumbs/passport.png
--- a/public/img/thumbs/word_pdf_dark.png
+++ b/public/img/thumbs/word_pdf_dark.png
--- a/public/img/thumbs/word_pdf_light.png
+++ b/public/img/thumbs/word_pdf_light.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "ONEWB",
+  "name": "ONEWB",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/nafith-favicon-32.png
+++ b/public/nafith-favicon-32.png
--- a/public/nafith-icon-120.png
+++ b/public/nafith-icon-120.png
--- a/public/nafith-icon-60.png
+++ b/public/nafith-icon-60.png
--- a/public/nafith-icon-76.png
+++ b/public/nafith-icon-76.png
--- a/public/public.js
+++ b/public/public.js
@ -0,0 +1 @@
+window.backendurl = 'http://';
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,48 @@
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { PersistGate } from 'redux-persist/integration/react';
+import store, { persistor } from './store';
+import Theme from '@/components/template/Theme';
+import Layout from '@/components/layout';
+import history from './history';
+import './locales';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 3,
+      cacheTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: 2000, // 2 seconds
+      // refetchOnWindowFocus: false,
+      // refetchOnMount: false,
+      // refetchOnReconnect: false,
+      // refetchIntervalInBackground: false,
+      // refetchInterval: false,
+
+      onError: (error) => {
+        console.log(error);
+      }
+    },
+  },
+});
+
+function App() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter history={history}>
+            <Theme>
+              <Layout />
+            </Theme>
+          </BrowserRouter>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export default App;
--- a/src/assets/maps/allstates.json
+++ b/src/assets/maps/allstates.json
@ -0,0 +1,62 @@
+[
+  { "id": "AL", "val": "01" },
+  { "id": "AK", "val": "02" },
+  { "id": "AS", "val": "60" },
+  { "id": "AZ", "val": "04" },
+  { "id": "AR", "val": "05" },
+  { "id": "CA", "val": "06" },
+  { "id": "CO", "val": "08" },
+  { "id": "CT", "val": "09" },
+  { "id": "DE", "val": "10" },
+  { "id": "DC", "val": "11" },
+  { "id": "FL", "val": "12" },
+  { "id": "FM", "val": "64" },
+  { "id": "GA", "val": "13" },
+  { "id": "GU", "val": "66" },
+  { "id": "HI", "val": "15" },
+  { "id": "ID", "val": "16" },
+  { "id": "IL", "val": "17" },
+  { "id": "IN", "val": "18" },
+  { "id": "IA", "val": "19" },
+  { "id": "KS", "val": "20" },
+  { "id": "KY", "val": "21" },
+  { "id": "LA", "val": "22" },
+  { "id": "ME", "val": "23" },
+  { "id": "MH", "val": "68" },
+  { "id": "MD", "val": "24" },
+  { "id": "MA", "val": "25" },
+  { "id": "MI", "val": "26" },
+  { "id": "MN", "val": "27" },
+  { "id": "MS", "val": "28" },
+  { "id": "MO", "val": "29" },
+  { "id": "MT", "val": "30" },
+  { "id": "NE", "val": "31" },
+  { "id": "NV", "val": "32" },
+  { "id": "NH", "val": "33" },
+  { "id": "NJ", "val": "34" },
+  { "id": "NM", "val": "35" },
+  { "id": "NY", "val": "36" },
+  { "id": "NC", "val": "37" },
+  { "id": "ND", "val": "38" },
+  { "id": "MP", "val": "69" },
+  { "id": "OH", "val": "39" },
+  { "id": "OK", "val": "40" },
+  { "id": "OR", "val": "41" },
+  { "id": "PW", "val": "70" },
+  { "id": "PA", "val": "42" },
+  { "id": "PR", "val": "72" },
+  { "id": "RI", "val": "44" },
+  { "id": "SC", "val": "45" },
+  { "id": "SD", "val": "46" },
+  { "id": "TN", "val": "47" },
+  { "id": "TX", "val": "48" },
+  { "id": "UM", "val": "74" },
+  { "id": "UT", "val": "49" },
+  { "id": "VT", "val": "50" },
+  { "id": "VA", "val": "51" },
+  { "id": "VI", "val": "78" },
+  { "id": "WA", "val": "53" },
+  { "id": "WV", "val": "54" },
+  { "id": "WI", "val": "55" },
+  { "id": "WY", "val": "56" }
+]
--- a/src/assets/maps/us-albers.json
+++ b/src/assets/maps/us-albers.json
--- a/src/assets/maps/world-countries-sans-antarctica.json
+++ b/src/assets/maps/world-countries-sans-antarctica.json
--- a/src/assets/styles/app.css
+++ b/src/assets/styles/app.css
@ -0,0 +1,8 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+@import 'https://fonts.googleapis.com/css?family=Tajawal&display=swap'; */
+@import './fonts/tajawal.woff2';
+/* @import './fonts/inter.woff2'; */
+@import './components/index.css';
+@import './template/index.css';
+@import './vendors/index.css';
+@import './tailwind/index.css';
--- a/src/assets/styles/components/_alert.css
+++ b/src/assets/styles/components/_alert.css
@ -0,0 +1,2 @@
+.alert {
+}
--- a/src/assets/styles/components/_avatar.css
+++ b/src/assets/styles/components/_avatar.css
@ -0,0 +1,81 @@
+.avatar {
+  @apply inline-block relative bg-gray-400 dark:bg-gray-600 text-gray-100;
+}
+
+.avatar-sm {
+  @apply w-8 h-8 leading-8;
+}
+
+.avatar-md {
+  @apply w-10 h-10 leading-10;
+}
+
+.avatar-lg {
+  @apply w-12 h-12 leading-10;
+}
+
+.avatar-rounded {
+  @apply rounded-md;
+}
+
+.avatar-square {
+  @apply rounded-none;
+}
+
+.avatar-circle {
+  @apply rounded-full;
+}
+
+.avatar-img {
+  @apply block w-full h-full object-cover;
+}
+
+.avatar-string {
+  @apply absolute origin-center left-2/4 flex items-center text-lg  text-center transform -translate-x-2/4 -translate-y-2/4;
+}
+
+.avatar-inner-sm {
+  @apply h-8;
+}
+
+.avatar-inner-md {
+  @apply h-10;
+}
+
+.avatar-inner-lg {
+  @apply h-12;
+}
+
+.avatar-icon {
+  @apply flex items-center justify-center h-full;
+}
+
+.avatar-icon-sm {
+  @apply text-lg;
+}
+
+.avatar-icon-md {
+  @apply text-xl;
+}
+
+.avatar-icon-lg {
+  @apply text-2xl;
+}
+
+.avatar-group {
+  @apply inline-flex;
+}
+
+.avatar-group-chained {
+  > .avatar,
+  > .tooltip-wrapper {
+    @apply -ml-2 rtl:-mr-2;
+  }
+
+  > .avatar,
+  > .tooltip-wrapper {
+    &:first-child {
+      @apply ml-0 rtl:mr-0;
+    }
+  }
+}
--- a/src/assets/styles/components/_badge.css
+++ b/src/assets/styles/components/_badge.css
@ -0,0 +1,22 @@
+.badge {
+  @apply rounded-full px-2 py-0.5 text-xs bg-red-500 text-white;
+}
+
+.badge-dot {
+  @apply rounded-full text-xs bg-red-500 text-white w-2 h-2;
+}
+
+.badge-wrapper {
+  @apply relative flex;
+}
+
+.badge-inner {
+  @apply absolute z-10 
+        transform
+        top-0
+        ltr:translate-x-2/4 
+        rtl:-translate-x-2/4 
+        -translate-y-2/4  
+        ltr:right-0 
+        rtl:left-0;
+}
--- a/src/assets/styles/components/_button.css
+++ b/src/assets/styles/components/_button.css
@ -0,0 +1,15 @@
+.button {
+  @apply focus:outline-none whitespace-nowrap;
+
+  &.radius-round {
+    @apply rounded-md;
+  }
+
+  &.radius-circle {
+    @apply rounded-full;
+  }
+
+  &.radius-none {
+    @apply rounded-none;
+  }
+}
--- a/src/assets/styles/components/_card.css
+++ b/src/assets/styles/components/_card.css
@ -0,0 +1,40 @@
+.card {
+  @apply bg-white rounded-lg dark:bg-gray-800;
+}
+
+.card-border {
+  @apply border border-gray-200 dark:border-gray-600;
+}
+
+.card-shadow {
+  @apply shadow border-b border-gray-200 dark:border-gray-600 dark:border-none;
+}
+
+.card-header-border {
+  @apply border-b border-gray-200 dark:border-gray-600;
+}
+
+.card-header-extra {
+  @apply flex justify-between items-center;
+}
+
+.card-footer {
+  @apply rounded-bl-lg rounded-br-lg;
+}
+
+.card-footer-border {
+  @apply border-t border-gray-200 dark:border-gray-600;
+}
+
+.card-header,
+.card-footer {
+  @apply py-3 px-5;
+}
+
+.card-body {
+  @apply p-5;
+}
+
+.card-gutterless {
+  @apply p-0;
+}
--- a/src/assets/styles/components/_checkbox.css
+++ b/src/assets/styles/components/_checkbox.css
@ -0,0 +1,35 @@
+.checkbox {
+  @apply h-5 
+    w-5 
+    border 
+    border-gray-300 
+    dark:border-gray-600
+    rounded 
+    cursor-pointer 
+    inline-block 
+    align-middle 
+    flex-shrink-0 
+    p-0 
+    appearance-none
+    transition-colors
+    duration-150
+    ease-in-out
+    shadow-sm;
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    @apply bg-current border-transparent;
+  }
+
+  &.disabled {
+    @apply text-gray-200 bg-gray-100 dark:bg-gray-600 dark:text-gray-400 cursor-not-allowed;
+  }
+}
+
+.checkbox-label {
+  @apply inline-flex cursor-pointer mr-3;
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}
--- a/src/assets/styles/components/_close-button.css
+++ b/src/assets/styles/components/_close-button.css
@ -0,0 +1,7 @@
+.close-btn {
+  @apply outline-none;
+}
+
+.close-btn-default {
+  @apply text-xl rounded p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300;
+}
--- a/src/assets/styles/components/_date-picker.css
+++ b/src/assets/styles/components/_date-picker.css
@ -0,0 +1,126 @@
+.date-picker {
+  @apply z-40 max-w-xs shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 rounded-lg p-4;
+}
+
+.date-picker-panel {
+  @apply rounded-lg;
+}
+
+.date-picker-header-label {
+  @apply cursor-pointer mx-0.5 select-none text-gray-900 dark:text-gray-100;
+}
+.date-picker-current-month {
+  @apply text-gray-700 dark:text-gray-100;
+}
+
+.date-picker-other-month {
+  @apply text-gray-400 dark:text-gray-500;
+}
+
+.date-picker-selected-date {
+  @apply text-white;
+}
+
+.date-picker-available {
+  @apply hover:text-white;
+}
+
+.date-picker-today {
+  @apply border;
+}
+
+.date-picker-month-cell {
+  @apply text-center py-6 font-semibold;
+}
+
+.date-picker-month-cell-disabled {
+  @apply opacity-30 bg-gray-300 cursor-not-allowed;
+}
+
+.date-picker-month-cell-inner {
+  @apply cursor-pointer px-4 py-2 rounded-lg select-none;
+}
+
+.date-picker-year-cell {
+  @apply text-center py-6;
+}
+
+.date-picker-year-cell-inner {
+  @apply cursor-pointer px-4 py-2 rounded-lg select-none font-semibold;
+}
+
+.date-picker-year-cell-disabled {
+  @apply opacity-30 bg-gray-300 cursor-not-allowed;
+}
+
+.picker {
+  @apply z-40 rounded-lg;
+}
+
+.picker-panel {
+  @apply shadow-xl dark:shadow-2xl bg-white dark:bg-gray-700 rounded-lg p-4;
+}
+
+.picker-view {
+  @apply min-w-[260px] w-full flex gap-6;
+}
+
+.picker-table {
+  @apply border-collapse w-full;
+}
+
+.picker-header-arrow {
+  @apply cursor-pointer flex items-center px-2 text-lg rtl:rotate-180 select-none h-10;
+}
+
+.picker-header-label {
+  @apply cursor-pointer mx-0.5 select-none text-gray-900 dark:text-gray-100 text-lg font-semibold;
+}
+
+.year-table,
+.month-table {
+  @apply grid grid-cols-3 gap-2;
+}
+
+.date-picker-cell {
+  @apply text-center w-9 h-9 p-0;
+}
+
+.date-picker-cell-content {
+  @apply h-full w-full font-normal;
+}
+
+.date-picker-cell-current-month {
+  @apply text-gray-700 dark:text-gray-100;
+}
+
+.date-picker-cell-hoverable {
+  @apply hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-300;
+}
+
+.date-picker-cell-disabled {
+  @apply opacity-30 bg-gray-300 cursor-not-allowed;
+}
+
+.date-picker-week-cell {
+  @apply font-semibold;
+}
+
+.week-day-cell {
+  @apply h-7;
+}
+
+.day-picker,
+.month-picker,
+.year-picker {
+  @apply w-full;
+}
+
+.month-picker-cell,
+.year-picker-cell {
+  @apply text-center py-2 rounded-lg font-semibold;
+}
+.month-picker-cell-disabled,
+.year-picker-cell-disabled {
+  @apply opacity-30 bg-gray-300 cursor-not-allowed;
+}
--- a/src/assets/styles/components/_dialog.css
+++ b/src/assets/styles/components/_dialog.css
@ -0,0 +1,45 @@
+.dialog {
+  outline: none;
+  @apply mx-auto;
+}
+
+@screen sm {
+  .dialog {
+    @apply max-w-xl;
+  }
+}
+
+@screen md {
+  .dialog {
+    @apply max-w-2xl;
+  }
+}
+
+@screen lg {
+  .dialog {
+    @apply max-w-4xl;
+  }
+}
+
+@screen xl {
+  .dialog {
+    @apply max-w-6xl;
+  }
+}
+
+.dialog-content {
+  @apply p-6 rounded-lg shadow-xl sm:my-16 relative h-full bg-white dark:bg-gray-800;
+}
+
+.dialog-overlay {
+  transition: all 0.15s ease-in-out;
+  @apply bg-opacity-60 inset-0 fixed z-30 bg-black dark:bg-opacity-80;
+}
+
+.dialog-overlay-after-open {
+  opacity: 1;
+}
+
+.dialog-overlay-before-close {
+  opacity: 0;
+}
--- a/src/assets/styles/components/_drawer.css
+++ b/src/assets/styles/components/_drawer.css
@ -0,0 +1,42 @@
+.drawer-content {
+  @apply bg-white dark:bg-gray-800 shadow-xl absolute flex flex-col;
+
+  &.vertical {
+    @apply h-full;
+  }
+
+  &.horizontal {
+    @apply w-full;
+  }
+}
+
+.drawer-header {
+  @apply flex items-center justify-between py-4 px-6 border-b border-gray-200 dark:border-gray-700;
+}
+
+.drawer-body {
+  @apply p-6 h-full overflow-y-auto;
+}
+
+.drawer-footer {
+  @apply flex items-center justify-between py-4 px-6 border-t border-gray-200 dark:border-gray-700;
+}
+
+.drawer-open {
+  &.drawer-lock-scroll {
+    @apply overflow-hidden;
+  }
+}
+
+.drawer-overlay {
+  transition: all 0.3s ease-in-out;
+  @apply bg-black bg-opacity-80 inset-0 fixed z-30;
+}
+
+.drawer-overlay-after-open {
+  opacity: 1;
+}
+
+.drawer-overlay-before-close {
+  opacity: 0;
+}
--- a/src/assets/styles/components/_dropdown.css
+++ b/src/assets/styles/components/_dropdown.css
@ -0,0 +1,68 @@
+.dropdown {
+  @apply relative inline-block;
+}
+
+.dropdown-menu {
+  min-width: 160px;
+  @apply rounded-md shadow-lg bg-white dark:bg-gray-700 dark:shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none p-1.5 absolute z-30;
+
+  &.top-start {
+    @apply ltr:left-0 rtl:right-0 bottom-full origin-bottom;
+  }
+
+  &.top-center {
+    @apply bottom-full left-1/2 origin-bottom;
+  }
+
+  &.top-end {
+    @apply ltr:right-0 rtl:left-0 bottom-full origin-bottom;
+  }
+
+  &.bottom-start {
+    @apply ltr:left-0 rtl:right-0 top-full origin-top;
+  }
+
+  &.bottom-center {
+    @apply left-1/2 top-full origin-top;
+  }
+
+  &.bottom-end {
+    @apply ltr:right-0 rtl:left-0 top-full origin-top;
+  }
+
+  &.middle-start-top {
+    @apply left-full top-0 origin-top;
+  }
+
+  &.middle-start-bottom {
+    @apply left-full bottom-0 origin-bottom;
+  }
+
+  &.middle-end-top {
+    @apply right-full top-0 origin-top;
+  }
+
+  &.middle-end-bottom {
+    @apply right-full bottom-0 origin-bottom;
+  }
+}
+
+.dropdown-toggle-default {
+  @apply cursor-pointer p-2 inline-block;
+
+  &.dropdown-toggle-disabled {
+    @apply opacity-60;
+  }
+}
+
+.dropdown-submenu {
+  @apply ltr:left-full rtl:right-full top-0 origin-top;
+}
+
+.dropdown-submenu-item {
+  @apply justify-between;
+}
+
+.dropdown-toggle-disabled {
+  @apply cursor-not-allowed;
+}
--- a/src/assets/styles/components/_form.css
+++ b/src/assets/styles/components/_form.css
@ -0,0 +1,37 @@
+.form-item {
+  @apply mb-7 relative;
+
+  &.horizontal {
+    @apply flex flex-auto;
+
+    .form-label {
+      @apply justify-end;
+    }
+  }
+
+  &.vertical {
+    @apply flex flex-col;
+  }
+
+  &.inline {
+    @apply md:inline-flex mr-3 rtl:ml-3;
+  }
+}
+
+.form-label {
+  @apply flex items-center font-semibold dark:text-gray-200;
+
+  &.invalid {
+    @apply text-red-500;
+  }
+}
+
+.form-explain {
+  @apply text-red-500;
+}
+
+.form-container {
+  &.inline {
+    @apply md:flex items-center;
+  }
+}
--- a/src/assets/styles/components/_input-group.css
+++ b/src/assets/styles/components/_input-group.css
@ -0,0 +1,75 @@
+.input-group {
+  @apply flex items-center;
+
+  .input {
+    @apply z-10;
+  }
+
+  .input {
+    &:focus,
+    &:focus-within {
+      @apply z-20;
+    }
+  }
+
+  .date-picker {
+    z-index: 11;
+  }
+
+  .select__control--is-focused,
+  .date-picker.picker-expanded,
+  .input-suffix-end,
+  .input-suffix-start {
+    @apply z-20;
+  }
+
+  > .input,
+  > .input-addon,
+  > .button {
+    &:first-child {
+      @apply ltr:rounded-r-none rtl:rounded-l-none;
+    }
+
+    &:last-child:not(.picker) {
+      @apply ltr:rounded-l-none rtl:rounded-r-none;
+    }
+
+    &:not(:first-child) {
+      @apply ltr:rounded-l-none ltr:-ml-px rtl:rounded-r-none rtl:-mr-px;
+    }
+
+    &:not(:last-child) {
+      @apply ltr:rounded-r-none rtl:rounded-l-none;
+    }
+  }
+
+  > * {
+    &:first-child {
+      .input,
+      .select__control {
+        @apply ltr:rounded-r-none rtl:rounded-l-none;
+      }
+    }
+
+    &:last-child {
+      .input,
+      .select__control {
+        @apply ltr:rounded-l-none rtl:rounded-r-none;
+      }
+    }
+
+    &:not(:first-child) {
+      .input,
+      .select__control {
+        @apply ltr:rounded-l-none ltr:-ml-px rtl:rounded-r-none rtl:-mr-px;
+      }
+    }
+
+    &:not(:last-child) {
+      .input,
+      .select__control {
+        @apply ltr:rounded-r-none rtl:rounded-l-none;
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More