├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package.json
├── postcss.config.mjs
├── public
    └── images
    │   ├── authentication
    │       ├── create-account.jpg
    │       ├── login.jpg
    │       └── reset-password.jpg
    │   ├── logo.svg
    │   ├── products
    │       ├── apple-imac-1.png
    │       ├── apple-imac-2.png
    │       └── apple-imac-3.png
    │   └── users
    │       ├── bonnie-green-2x.png
    │       ├── bonnie-green.png
    │       ├── helene-engels.png
    │       ├── jese-leos-2x.png
    │       ├── jese-leos.png
    │       ├── joseph-mcfall.png
    │       ├── lana-byrd.png
    │       ├── leslie-livingston.png
    │       ├── michael-gough.png
    │       ├── neil-sims.png
    │       ├── robert-brown.png
    │       ├── roberta-casas-2x.png
    │       ├── roberta-casas.png
    │       └── thomas-lean.png
├── src
    ├── components
    │   ├── navbar.tsx
    │   └── sidebar.tsx
    ├── flowbite-theme.ts
    ├── index.css
    ├── index.tsx
    ├── layouts
    │   └── navbar-sidebar.tsx
    ├── pages
    │   ├── authentication
    │   │   ├── sign-in.tsx
    │   │   └── sign-up.tsx
    │   ├── e-commerce
    │   │   └── products.tsx
    │   ├── index.tsx
    │   └── users
    │   │   └── list.tsx
    └── svgmap.d.ts
├── tailwind.config.cjs
├── tsconfig.json
├── vite.config.ts
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | tsconfig.tsbuildinfo
4 | yarn-error.log
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Themesberg
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <h1>flowbite-react-admin-dashboard</h1>
  3 |   <p>
  4 |     Get started with a premium admin dashboard layout built with React, Tailwind CSS and Flowbite featuring 21 example pages including charts, kanban board, mailing system, and more.
  5 |   </p>
  6 |   <p>
  7 |     <a href="https://discord.com/invite/4eeurUVvTy">
  8 |       <img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Flowbite on Discord" />
  9 |     </a>
 10 |   </p>
 11 | </div>
 12 | <div align="center">
 13 |   <a href="https://flowbite-react-admin-dashboard.vercel.app/">
 14 |     <img src="https://i.postimg.cc/3RMbsw6t/flowbite-react-admin-dashboard.png" />
 15 |   </a>
 16 |   <br />
 17 | </div>
 18 | <hr />
 19 | 
 20 | **You can [copy/paste code you want from this project](#how-to-use-in-your-own-project), or [use the whole thing for your website](#how-to-install).**
 21 | 
 22 | ## Table of Contents
 23 | 
 24 | - [How to use in your own project](#how-to-use-in-your-own-project)
 25 | - [How to install](#how-to-install)
 26 |   - [Assumptions](#assumptions)
 27 | - [How to develop locally](#how-to-develop-locally)
 28 | - [How to build for production](#how-to-build-for-production)
 29 | - [How to deploy](#how-to-deploy)
 30 | 
 31 | ## How to use in your own project
 32 | 
 33 | In this case, we assume you already have a `nodejs` project with a `package.json`.
 34 | 
 35 | You can copy any of the code from the `.tsx` files in `src/pages` to your own `nodejs` project. Some pages contain optional dependencies discussed further below. Pages might also use some of the static files found in `public`.
 36 | 
 37 | Your project will need to have [`flowbite-react`](https://github.com/bacali95/flowbite-react) installed. That's it! If you're unfamiliar, see [the open-source guide on how to install `flowbite-react`](https://github.com/themesberg/flowbite-react#getting-started).
 38 | 
 39 | Optional dependencies include:
 40 | 
 41 | - [`react-icons`](https://react-icons.github.io/react-icons/) for most of the many icons used
 42 | - [`react-apexcharts`](https://github.com/apexcharts/react-apexcharts) for charts/graphs found on [Dashboard page](https://github.com/themesberg/flowbite-react-admin-dashboard/blob/main/src/pages/index.tsx)
 43 | - [`react-sortablejs`](https://github.com/SortableJS/react-sortablejs) for Kanban-style boards found on [Kanban page](https://github.com/themesberg/flowbite-react-admin-dashboard/blob/main/src/pages/kanban.tsx)
 44 | - [`svgmap`](https://github.com/StephanWagner/svgMap) for maps found on [Dashboard page](https://github.com/themesberg/flowbite-react-admin-dashboard/blob/main/src/pages/kanban.tsx)
 45 | 
 46 | ## How to install
 47 | 
 48 | ### Assumptions
 49 | 
 50 | - You can open a shell/terminal/command prompt
 51 | - You have `git` instaslled and can run `git` in the shell
 52 | - You have `nodejs` installed and can run `node`, `npm` in the shell
 53 | 
 54 | Install [`yarn`](https://yarnpkg.com/)
 55 | 
 56 | ```sh
 57 | npm i -g yarn
 58 | ```
 59 | 
 60 | Clone this repository
 61 | 
 62 | ```sh
 63 | git clone https://github.com/themesberg/flowbite-react-admin-dashboard.git
 64 | cd flowbite-react-admin-dashboard
 65 | ```
 66 | 
 67 | Install dependencies for this project
 68 | 
 69 | ```sh
 70 | yarn install
 71 | ```
 72 | 
 73 | ## How to develop locally
 74 | 
 75 | Once run, this command will display a link to the local server.
 76 | 
 77 | ```sh
 78 | yarn dev
 79 | ```
 80 | 
 81 | ## How to build for production
 82 | 
 83 | Your code won't build if you have TypeScript errors. Otherwise, the command will report how large the output files are, which should go to `dist` folder.
 84 | 
 85 | We use [vite](https://vitejs.dev) to build and its default behavior is to emit an `index.html`, `app.js`, and `app.css`.
 86 | 
 87 | ```sh
 88 | yarn build
 89 | ```
 90 | 
 91 | ## How to deploy
 92 | 
 93 | You can deploy this repository to any hosting service from Cloudflare Pages, Vercel, or Github Pages to Heroku to AWS to your own Nginx server.
 94 | 
 95 | However, `react-router` needs your server to send all requests to `/`. This is commonly referred to as a [Single Page Application (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA). You will have to add a rewrite to accomplish that. To host on Vercel, for example, you just need to add a `vercel.json` with:
 96 | 
 97 | ```json
 98 | {
 99 |   "routes": [
100 |     {
101 |       "src": "/[^.]+",
102 |       "dest": "/",
103 |       "status": 200
104 |     }
105 |   ]
106 | }
107 | ```
108 | 
109 | Most, but not all, providers have a mechanism to do this, but we can't cover them all here.
110 | 
111 | Alternatively, you can change this app to server-side render. `vite` isn't designed to do that, so you'll need to use a plugin to create an HTML file for each page. `vite` [has a section in their docs](https://github.com/vitejs/awesome-vite#ssr) about SSR plugins and they seem great.
112 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>React Tailwind CSS Dashboard - Flowbite</title>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <link
 8 |       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
 9 |       rel="stylesheet"
10 |       type="text/css"
11 |     />
12 |   </head>
13 |   <body class="bg-gray-50 dark:bg-gray-900">
14 |     <div id="root"></div>
15 |     <script type="module" src="/src/index.tsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "type": "module",
  3 |   "name": "flowbite-react-admin-dashboard",
  4 |   "version": "1.0.0",
  5 |   "descrption": "flowbite-react admin dashboard",
  6 |   "homepage": "https://github.com/themesberg/flowbite-react-admin-dashboard",
  7 |   "bugs": "https://github.com/themesberg/flowbite-react-admin-dashboard/issues",
  8 |   "license": "UNLICENSED",
  9 |   "author": "Conner Davis <cdavis@scu.edu>",
 10 |   "repository": {
 11 |     "type": "git",
 12 |     "url": "https://github.com/themesberg/flowbite-react-admin-dashboard.git"
 13 |   },
 14 |   "scripts": {
 15 |     "build": "yarn typecheck && vite build",
 16 |     "dev": "vite --host",
 17 |     "format": "prettier --check --ignore-path .gitignore --write .",
 18 |     "lint": "eslint --ignore-path .gitignore .",
 19 |     "preview": "vite preview --host",
 20 |     "typecheck": "tsc"
 21 |   },
 22 |   "engines": {
 23 |     "node": ">= 16",
 24 |     "npm": ">= 8",
 25 |     "yarn": ">= 1"
 26 |   },
 27 |   "dependencies": {
 28 |     "apexcharts": "^3.36.3",
 29 |     "classnames": "^2.3.2",
 30 |     "flowbite": "^1.5.5",
 31 |     "flowbite-react": "^0.3.7",
 32 |     "react-apexcharts": "^1.4.0",
 33 |     "react-icons": "^4.7.1"
 34 |   },
 35 |   "devDependencies": {
 36 |     "@types/react": "^18.0.26",
 37 |     "@types/react-dom": "^18.0.9",
 38 |     "@types/sortablejs": "^1.15.0",
 39 |     "@typescript-eslint/eslint-plugin": "^5.46.0",
 40 |     "@typescript-eslint/parser": "^5.46.0",
 41 |     "@vitejs/plugin-react": "^2.2.0",
 42 |     "autoprefixer": "^10.4.13",
 43 |     "cz-conventional-changelog": "^3.3.0",
 44 |     "eslint": "^8.29.0",
 45 |     "eslint-config-prettier": "^8.5.0",
 46 |     "eslint-plugin-jsx-a11y": "^6.6.1",
 47 |     "eslint-plugin-prettier": "^4.2.1",
 48 |     "eslint-plugin-react": "^7.31.11",
 49 |     "eslint-plugin-react-hooks": "^4.6.0",
 50 |     "eslint-plugin-tailwindcss": "^3.7.1",
 51 |     "postcss": "^8.4.19",
 52 |     "prettier": "^2.8.1",
 53 |     "react": "^18.2.0",
 54 |     "react-dom": "^18.2.0",
 55 |     "react-router": "^6.4.5",
 56 |     "react-router-dom": "^6.4.5",
 57 |     "tailwindcss": "^3.2.4",
 58 |     "typescript": "^4.9.4",
 59 |     "vite": "^3.2.5",
 60 |     "vitest": "^0.25.6"
 61 |   },
 62 |   "private": true,
 63 |   "config": {
 64 |     "commitizen": {
 65 |       "path": "cz-conventional-changelog"
 66 |     }
 67 |   },
 68 |   "eslintConfig": {
 69 |     "extends": [
 70 |       "eslint:recommended",
 71 |       "plugin:@typescript-eslint/strict",
 72 |       "plugin:jsx-a11y/recommended",
 73 |       "plugin:prettier/recommended",
 74 |       "plugin:react/recommended",
 75 |       "plugin:react-hooks/recommended",
 76 |       "plugin:tailwindcss/recommended"
 77 |     ],
 78 |     "parser": "@typescript-eslint/parser",
 79 |     "parserOptions": {
 80 |       "ecmaFeatures": {
 81 |         "jsx": true
 82 |       },
 83 |       "project": "./tsconfig.json"
 84 |     },
 85 |     "root": true,
 86 |     "rules": {
 87 |       "@typescript-eslint/consistent-type-imports": "error",
 88 |       "react/react-in-jsx-scope": "off",
 89 |       "react/no-unescaped-entities": "off",
 90 |       "tailwindcss/classnames-order": [
 91 |         "error",
 92 |         {
 93 |           "callees": [
 94 |             "classnames"
 95 |           ],
 96 |           "config": "tailwind.config.cjs"
 97 |         }
 98 |       ],
 99 |       "tailwindcss/no-custom-classname": [
100 |         "error",
101 |         {
102 |           "config": "tailwind.config.cjs"
103 |         }
104 |       ]
105 |     },
106 |     "settings": {
107 |       "react": {
108 |         "version": "detect"
109 |       }
110 |     }
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/images/authentication/create-account.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/authentication/create-account.jpg


--------------------------------------------------------------------------------
/public/images/authentication/login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/authentication/login.jpg


--------------------------------------------------------------------------------
/public/images/authentication/reset-password.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/authentication/reset-password.jpg


--------------------------------------------------------------------------------
/public/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z" fill="url(#paint0_linear_2484_3243)" />
 3 |     <path d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z" fill="url(#paint1_linear_2484_3243)" />
 4 |     <path d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z" fill="url(#paint2_linear_2484_3243)" />
 5 |     <path d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z" fill="url(#paint3_linear_2484_3243)" />
 6 |     <path d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z" fill="url(#paint4_linear_2484_3243)" />
 7 |     <path d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z" fill="url(#paint5_linear_2484_3243)" />
 8 |     <path d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z" fill="url(#paint6_linear_2484_3243)" />
 9 |     <path d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z" fill="url(#paint7_linear_2484_3243)" />
10 |     <path d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z" fill="url(#paint8_linear_2484_3243)" />
11 |     <defs>
12 |         <linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307" gradientUnits="userSpaceOnUse">
13 |             <stop stop-color="#1724C9" />
14 |             <stop offset="1" stop-color="#1C64F2" />
15 |         </linearGradient>
16 |         <linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962" gradientUnits="userSpaceOnUse">
17 |             <stop stop-color="#1C64F2" />
18 |             <stop offset="1" stop-color="#0092FF" />
19 |         </linearGradient>
20 |         <linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104" gradientUnits="userSpaceOnUse">
21 |             <stop stop-color="#0092FF" />
22 |             <stop offset="1" stop-color="#45B2FF" />
23 |         </linearGradient>
24 |         <linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359" gradientUnits="userSpaceOnUse">
25 |             <stop stop-color="#1C64F2" />
26 |             <stop offset="1" stop-color="#0092FF" />
27 |         </linearGradient>
28 |         <linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347" gradientUnits="userSpaceOnUse">
29 |             <stop stop-color="#1724C9" />
30 |             <stop offset="1" stop-color="#1C64F2" />
31 |         </linearGradient>
32 |         <linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345" gradientUnits="userSpaceOnUse">
33 |             <stop stop-color="#0092FF" />
34 |             <stop offset="1" stop-color="#45B2FF" />
35 |         </linearGradient>
36 |         <linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063" gradientUnits="userSpaceOnUse">
37 |             <stop stop-color="#1C64F2" />
38 |             <stop offset="1" stop-color="#0092FF" />
39 |         </linearGradient>
40 |         <linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044" gradientUnits="userSpaceOnUse">
41 |             <stop stop-color="#1724C9" />
42 |             <stop offset="1" stop-color="#1C64F2" />
43 |         </linearGradient>
44 |         <linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745" gradientUnits="userSpaceOnUse">
45 |             <stop stop-color="#0092FF" />
46 |             <stop offset="1" stop-color="#45B2FF" />
47 |         </linearGradient>
48 |     </defs>
49 | </svg>
50 |     


--------------------------------------------------------------------------------
/public/images/products/apple-imac-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/products/apple-imac-1.png


--------------------------------------------------------------------------------
/public/images/products/apple-imac-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/products/apple-imac-2.png


--------------------------------------------------------------------------------
/public/images/products/apple-imac-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/products/apple-imac-3.png


--------------------------------------------------------------------------------
/public/images/users/bonnie-green-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/bonnie-green-2x.png


--------------------------------------------------------------------------------
/public/images/users/bonnie-green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/bonnie-green.png


--------------------------------------------------------------------------------
/public/images/users/helene-engels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/helene-engels.png


--------------------------------------------------------------------------------
/public/images/users/jese-leos-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/jese-leos-2x.png


--------------------------------------------------------------------------------
/public/images/users/jese-leos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/jese-leos.png


--------------------------------------------------------------------------------
/public/images/users/joseph-mcfall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/joseph-mcfall.png


--------------------------------------------------------------------------------
/public/images/users/lana-byrd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/lana-byrd.png


--------------------------------------------------------------------------------
/public/images/users/leslie-livingston.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/leslie-livingston.png


--------------------------------------------------------------------------------
/public/images/users/michael-gough.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/michael-gough.png


--------------------------------------------------------------------------------
/public/images/users/neil-sims.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/neil-sims.png


--------------------------------------------------------------------------------
/public/images/users/robert-brown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/robert-brown.png


--------------------------------------------------------------------------------
/public/images/users/roberta-casas-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/roberta-casas-2x.png


--------------------------------------------------------------------------------
/public/images/users/roberta-casas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/roberta-casas.png


--------------------------------------------------------------------------------
/public/images/users/thomas-lean.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite-react-admin-dashboard/ce3afeb2149ad5a91e59c8e98c85e9220224c744/public/images/users/thomas-lean.png


--------------------------------------------------------------------------------
/src/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import type { FC } from "react";
 2 | import { Button, DarkThemeToggle, Navbar } from "flowbite-react";
 3 | 
 4 | const ExampleNavbar: FC = function () {
 5 |   return (
 6 |     <Navbar fluid>
 7 |       <div className="w-full p-3 lg:px-5 lg:pl-3">
 8 |         <div className="flex items-center justify-between">
 9 |           <div className="flex items-center">
10 |             <Navbar.Brand href="/">
11 |               <img alt="" src="/images/logo.svg" className="mr-3 h-6 sm:h-8" />
12 |               <span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
13 |                 Flowbite
14 |               </span>
15 |             </Navbar.Brand>
16 |           </div>
17 |           <div className="flex items-center gap-3">
18 |             <iframe
19 |               height="30"
20 |               src="https://ghbtns.com/github-btn.html?user=themesberg&repo=flowbite-react-admin-dashboard&type=star&count=true&size=large"
21 |               title="GitHub"
22 |               width="90"
23 |               className="hidden sm:block"
24 |             />
25 |             <Button color="primary" href="https://flowbite.com/pro/">
26 |               Upgrade to Pro
27 |             </Button>
28 |             <DarkThemeToggle />
29 |           </div>
30 |         </div>
31 |       </div>
32 |     </Navbar>
33 |   );
34 | };
35 | 
36 | export default ExampleNavbar;
37 | 


--------------------------------------------------------------------------------
/src/components/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { Sidebar, TextInput } from "flowbite-react";
  2 | import type { FC } from "react";
  3 | import { useEffect, useState } from "react";
  4 | import {
  5 |   HiChartPie,
  6 |   HiClipboard,
  7 |   HiCollection,
  8 |   HiInformationCircle,
  9 |   HiLogin,
 10 |   HiPencil,
 11 |   HiSearch,
 12 |   HiShoppingBag,
 13 |   HiUsers,
 14 | } from "react-icons/hi";
 15 | 
 16 | const ExampleSidebar: FC = function () {
 17 |   const [currentPage, setCurrentPage] = useState("");
 18 | 
 19 |   useEffect(() => {
 20 |     const newPage = window.location.pathname;
 21 | 
 22 |     setCurrentPage(newPage);
 23 |   }, [setCurrentPage]);
 24 | 
 25 |   return (
 26 |     <Sidebar aria-label="Sidebar with multi-level dropdown example">
 27 |       <div className="flex h-full flex-col justify-between py-2">
 28 |         <div>
 29 |           <form className="pb-3 md:hidden">
 30 |             <TextInput
 31 |               icon={HiSearch}
 32 |               type="search"
 33 |               placeholder="Search"
 34 |               required
 35 |               size={32}
 36 |             />
 37 |           </form>
 38 |           <Sidebar.Items>
 39 |             <Sidebar.ItemGroup>
 40 |               <Sidebar.Item
 41 |                 href="/"
 42 |                 icon={HiChartPie}
 43 |                 className={
 44 |                   "/" === currentPage ? "bg-gray-100 dark:bg-gray-700" : ""
 45 |                 }
 46 |               >
 47 |                 Dashboard
 48 |               </Sidebar.Item>
 49 |               <Sidebar.Item
 50 |                 href="/e-commerce/products"
 51 |                 icon={HiShoppingBag}
 52 |                 className={
 53 |                   "/e-commerce/products" === currentPage
 54 |                     ? "bg-gray-100 dark:bg-gray-700"
 55 |                     : ""
 56 |                 }
 57 |               >
 58 |                 Products
 59 |               </Sidebar.Item>
 60 |               <Sidebar.Item
 61 |                 href="/users/list"
 62 |                 icon={HiUsers}
 63 |                 className={
 64 |                   "/users/list" === currentPage
 65 |                     ? "bg-gray-100 dark:bg-gray-700"
 66 |                     : ""
 67 |                 }
 68 |               >
 69 |                 Users list
 70 |               </Sidebar.Item>
 71 |               <Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
 72 |                 Sign in
 73 |               </Sidebar.Item>
 74 |               <Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
 75 |                 Sign up
 76 |               </Sidebar.Item>
 77 |             </Sidebar.ItemGroup>
 78 |             <Sidebar.ItemGroup>
 79 |               <Sidebar.Item
 80 |                 href="https://github.com/themesberg/flowbite-react/"
 81 |                 icon={HiClipboard}
 82 |               >
 83 |                 Docs
 84 |               </Sidebar.Item>
 85 |               <Sidebar.Item
 86 |                 href="https://flowbite-react.com/"
 87 |                 icon={HiCollection}
 88 |               >
 89 |                 Components
 90 |               </Sidebar.Item>
 91 |               <Sidebar.Item
 92 |                 href="https://github.com/themesberg/flowbite-react/issues"
 93 |                 icon={HiInformationCircle}
 94 |               >
 95 |                 Help
 96 |               </Sidebar.Item>
 97 |             </Sidebar.ItemGroup>
 98 |           </Sidebar.Items>
 99 |         </div>
100 |       </div>
101 |     </Sidebar>
102 |   );
103 | };
104 | 
105 | export default ExampleSidebar;
106 | 


--------------------------------------------------------------------------------
/src/flowbite-theme.ts:
--------------------------------------------------------------------------------
 1 | import type { CustomFlowbiteTheme } from "flowbite-react";
 2 | 
 3 | const flowbiteTheme: CustomFlowbiteTheme = {
 4 |   badge: {
 5 |     color: {
 6 |       primary:
 7 |         "bg-primary-100 text-primary-800 dark:bg-primary-200 dark:text-primary-800 group-hover:bg-primary-200 dark:group-hover:bg-primary-300",
 8 |     },
 9 |     icon: {
10 |       off: "rounded-full px-2 py-1",
11 |     },
12 |     size: {
13 |       xl: "px-3 py-2 text-base rounded-md",
14 |     },
15 |   },
16 |   button: {
17 |     color: {
18 |       primary:
19 |         "text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800",
20 |     },
21 |     outline: {
22 |       on: "transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit",
23 |     },
24 |     size: {
25 |       md: "text-sm px-3 py-2",
26 |     },
27 |   },
28 |   dropdown: {
29 |     floating: {
30 |       base: "z-10 w-fit rounded-xl divide-y divide-gray-100 shadow",
31 |       content: "rounded-xl text-sm text-gray-700 dark:text-gray-200",
32 |       target: "w-fit dark:text-white",
33 |     },
34 |     content: "",
35 |   },
36 |   modal: {
37 |     content: {
38 |       inner: "relative rounded-lg bg-white shadow dark:bg-gray-800",
39 |     },
40 |     header: {
41 |       base: "flex items-start justify-between rounded-t px-5 pt-5",
42 |     },
43 |   },
44 |   navbar: {
45 |     base: "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700",
46 |   },
47 |   sidebar: {
48 |     base: "flex fixed top-0 left-0 z-20 flex-col flex-shrink-0 pt-16 h-full duration-75 border-r border-gray-200 lg:flex transition-width dark:border-gray-700",
49 |   },
50 |   textarea: {
51 |     base: "block w-full text-sm p-4 rounded-lg border disabled:cursor-not-allowed disabled:opacity-50",
52 |   },
53 |   toggleSwitch: {
54 |     toggle: {
55 |       checked: {
56 |         off: "!border-gray-200 !bg-gray-200 dark:!border-gray-600 dark:!bg-gray-700",
57 |       },
58 |     },
59 |   },
60 | };
61 | 
62 | export default flowbiteTheme;
63 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /* see https://github.com/themesberg/flowbite-admin-dashboard/blob/main/src/css/input.css */
  2 | 
  3 | @tailwind base;
  4 | @tailwind components;
  5 | @tailwind utilities;
  6 | 
  7 | /* chart styles */
  8 | .apexcharts-tooltip {
  9 |   @apply bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 border-0 rounded-lg shadow-lg !important;
 10 | }
 11 | 
 12 | .apexcharts-tooltip .apexcharts-tooltip-title {
 13 |   @apply py-2 px-4 bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-500 !important;
 14 | }
 15 | 
 16 | .apexcharts-xaxistooltip {
 17 |   @apply text-gray-500 border-0 bg-white dark:bg-gray-700 dark:text-gray-300 rounded-lg shadow-lg !important;
 18 | }
 19 | 
 20 | .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
 21 |   @apply dark:text-white;
 22 | }
 23 | 
 24 | .apexcharts-xaxistooltip-text {
 25 |   @apply font-medium text-sm !important;
 26 | }
 27 | 
 28 | .apexcharts-xaxistooltip:before,
 29 | .apexcharts-xaxistooltip:after {
 30 |   @apply border-0 !important;
 31 | }
 32 | 
 33 | /* SVG map styles */
 34 | .svgMap-map-wrapper {
 35 |   @apply bg-white !important;
 36 | }
 37 | 
 38 | .svgMap-map-image {
 39 |   @apply dark:bg-gray-800;
 40 | }
 41 | 
 42 | .svgMap-map-controls-wrapper {
 43 |   @apply shadow-none left-0 bottom-0 dark:bg-gray-800 !important;
 44 | }
 45 | 
 46 | .svgMap-map-controls-zoom {
 47 |   @apply dark:bg-gray-800 !important;
 48 | }
 49 | 
 50 | .svgMap-map-wrapper .svgMap-control-button {
 51 |   @apply rounded-lg border-solid border border-gray-300 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600 !important;
 52 | }
 53 | 
 54 | .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:after,
 55 | .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:before {
 56 |   @apply dark:bg-gray-600 dark:hover:bg-gray-500;
 57 | }
 58 | 
 59 | .svgMap-map-wrapper .svgMap-control-button:first-child {
 60 |   @apply mr-2 !important;
 61 | }
 62 | 
 63 | .svgMap-tooltip {
 64 |   @apply bg-white dark:bg-gray-700 shadow-lg rounded-lg border-0 text-left !important;
 65 | }
 66 | 
 67 | .svgMap-tooltip
 68 |   .svgMap-tooltip-content-container
 69 |   .svgMap-tooltip-flag-container {
 70 |   @apply inline-block mr-2 text-left border-0 p-0 !important;
 71 | }
 72 | 
 73 | .svgMap-tooltip
 74 |   .svgMap-tooltip-content-container
 75 |   .svgMap-tooltip-flag-container
 76 |   .svgMap-tooltip-flag {
 77 |   @apply inline-block border-0 h-4 p-0 !important;
 78 | }
 79 | 
 80 | .svgMap-tooltip .svgMap-tooltip-title {
 81 |   @apply inline-block pt-2 text-gray-900 dark:text-white font-semibold text-sm !important;
 82 | }
 83 | 
 84 | .svgMap-tooltip .svgMap-tooltip-content {
 85 |   @apply mt-0 !important;
 86 | }
 87 | 
 88 | .svgMap-tooltip .svgMap-tooltip-content table td {
 89 |   @apply text-sm text-left text-gray-500 dark:text-gray-400 font-normal !important;
 90 | }
 91 | 
 92 | .svgMap-tooltip .svgMap-tooltip-content table td span {
 93 |   @apply text-sm text-left text-gray-900 dark:text-white font-semibold !important;
 94 | }
 95 | 
 96 | .svgMap-tooltip .svgMap-tooltip-pointer {
 97 |   @apply hidden !important;
 98 | }
 99 | 
100 | .svgMap-map-wrapper .svgMap-country {
101 |   @apply dark:stroke-gray-800;
102 | }
103 | 
104 | .svgMap-map-wrapper .svgMap-country {
105 |   @apply dark:stroke-gray-800 !important;
106 | }
107 | 
108 | .svgMap-country[fill="#4B5563"] {
109 |   @apply fill-[#4B5563] !important;
110 | }
111 | 
112 | /* kanban styles */
113 | 
114 | .drag-card {
115 |   @apply opacity-100 !important;
116 |   @apply rotate-6;
117 | }
118 | 
119 | .ghost-card {
120 |   @apply bg-gray-100/40 dark:bg-gray-600/40 !important;
121 | }
122 | 
123 | /* calendar styles */
124 | 
125 | .fc .fc-toolbar {
126 |   @apply flex-row-reverse justify-end px-4 !important;
127 | }
128 | 
129 | .fc .fc-toolbar.fc-header-toolbar {
130 |   @apply mb-5 !important;
131 | }
132 | 
133 | .fc .fc-toolbar-title {
134 |   @apply text-lg text-gray-900 font-semibold !important;
135 | }
136 | 
137 | .fc .fc-today-button {
138 |   @apply rounded-lg border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 !important;
139 | }
140 | 
141 | .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
142 |   @apply mx-2 !important;
143 | }
144 | 
145 | .fc .fc-button-group .fc-prev-button,
146 | .fc .fc-button-group .fc-next-button {
147 |   @apply bg-white border-0 text-gray-500 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 rounded inline-flex focus:bg-gray-100 focus:ring-1 focus:ring-gray-100 justify-center !important;
148 | }
149 | 
150 | .fc .fc-scrollgrid {
151 |   @apply border-l-0 border-gray-200 !important;
152 | }
153 | 
154 | .fc .fc-daygrid-day-frame {
155 |   @apply border-gray-200 !important;
156 | }
157 | 
158 | .fc .fc-col-header-cell-cushion {
159 |   @apply py-3 text-base text-gray-900 font-semibold !important;
160 | }
161 | 
162 | .fc-theme-standard th {
163 |   @apply border-0 border-b border-gray-200 !important;
164 | }
165 | 
166 | .fc-direction-ltr .fc-daygrid-event.fc-event-end {
167 |   @apply mr-2 !important;
168 | }
169 | 
170 | .fc-direction-ltr .fc-daygrid-event.fc-event-start {
171 |   @apply ml-2 !important;
172 | }
173 | 
174 | .fc .fc-event .fc-event-main {
175 |   @apply p-2 bg-primary-700 hover:bg-primary-800 !important;
176 | }
177 | 
178 | .fc .fc-h-event .fc-event-main-frame {
179 |   @apply text-xs font-semibold !important;
180 | }
181 | 
182 | .fc .fc-daygrid-day-frame {
183 |   @apply hover:bg-gray-50 cursor-pointer !important;
184 | }
185 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | 
 4 | import "./index.css";
 5 | import theme from "./flowbite-theme";
 6 | import { Flowbite } from "flowbite-react";
 7 | import { Routes, Route } from "react-router";
 8 | import { BrowserRouter } from "react-router-dom";
 9 | import DashboardPage from "./pages";
10 | import SignInPage from "./pages/authentication/sign-in";
11 | import SignUpPage from "./pages/authentication/sign-up";
12 | import EcommerceProductsPage from "./pages/e-commerce/products";
13 | import UserListPage from "./pages/users/list";
14 | 
15 | const container = document.getElementById("root");
16 | 
17 | if (!container) {
18 |   throw new Error("React root element doesn't exist!");
19 | }
20 | 
21 | const root = createRoot(container);
22 | 
23 | root.render(
24 |   <StrictMode>
25 |     <Flowbite theme={{ theme }}>
26 |       <BrowserRouter>
27 |         <Routes>
28 |           <Route path="/" element={<DashboardPage />} index />
29 |           <Route path="/authentication/sign-in" element={<SignInPage />} />
30 |           <Route path="/authentication/sign-up" element={<SignUpPage />} />
31 |           <Route
32 |             path="/e-commerce/products"
33 |             element={<EcommerceProductsPage />}
34 |           />
35 |           <Route path="/users/list" element={<UserListPage />} />
36 |         </Routes>
37 |       </BrowserRouter>
38 |     </Flowbite>
39 |   </StrictMode>
40 | );
41 | 


--------------------------------------------------------------------------------
/src/layouts/navbar-sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { Footer } from "flowbite-react";
  2 | import type { FC, PropsWithChildren } from "react";
  3 | import Navbar from "../components/navbar";
  4 | import Sidebar from "../components/sidebar";
  5 | import { MdFacebook } from "react-icons/md";
  6 | import { FaDribbble, FaGithub, FaInstagram, FaTwitter } from "react-icons/fa";
  7 | 
  8 | interface NavbarSidebarLayoutProps {
  9 |   isFooter?: boolean;
 10 | }
 11 | 
 12 | const NavbarSidebarLayout: FC<PropsWithChildren<NavbarSidebarLayoutProps>> =
 13 |   function ({ children, isFooter = true }) {
 14 |     return (
 15 |       <>
 16 |         <Navbar />
 17 |         <div className="flex items-start pt-16">
 18 |           <Sidebar />
 19 |           <MainContent isFooter={isFooter}>{children}</MainContent>
 20 |         </div>
 21 |       </>
 22 |     );
 23 |   };
 24 | 
 25 | const MainContent: FC<PropsWithChildren<NavbarSidebarLayoutProps>> = function ({
 26 |   children,
 27 |   isFooter,
 28 | }) {
 29 |   return (
 30 |     <main className="relative h-full w-full overflow-y-auto bg-gray-50 dark:bg-gray-900 lg:ml-64">
 31 |       {children}
 32 |       {isFooter && (
 33 |         <div className="mx-4 mt-4">
 34 |           <MainContentFooter />
 35 |         </div>
 36 |       )}
 37 |     </main>
 38 |   );
 39 | };
 40 | 
 41 | const MainContentFooter: FC = function () {
 42 |   return (
 43 |     <>
 44 |       <Footer container>
 45 |         <div className="flex w-full flex-col gap-y-6 lg:flex-row lg:justify-between lg:gap-y-0">
 46 |           <Footer.LinkGroup>
 47 |             <Footer.Link href="#" className="mr-3 mb-3 lg:mb-0">
 48 |               Terms and conditions
 49 |             </Footer.Link>
 50 |             <Footer.Link href="#" className="mr-3 mb-3 lg:mb-0">
 51 |               Privacy Policy
 52 |             </Footer.Link>
 53 |             <Footer.Link href="#" className="mr-3">
 54 |               Licensing
 55 |             </Footer.Link>
 56 |             <Footer.Link href="#" className="mr-3">
 57 |               Cookie Policy
 58 |             </Footer.Link>
 59 |             <Footer.Link href="#">Contact</Footer.Link>
 60 |           </Footer.LinkGroup>
 61 |           <Footer.LinkGroup>
 62 |             <div className="flex gap-x-1">
 63 |               <Footer.Link
 64 |                 href="#"
 65 |                 className="hover:[&>*]:text-black dark:hover:[&>*]:text-gray-300"
 66 |               >
 67 |                 <MdFacebook className="text-lg" />
 68 |               </Footer.Link>
 69 |               <Footer.Link
 70 |                 href="#"
 71 |                 className="hover:[&>*]:text-black dark:hover:[&>*]:text-gray-300"
 72 |               >
 73 |                 <FaInstagram className="text-lg" />
 74 |               </Footer.Link>
 75 |               <Footer.Link
 76 |                 href="#"
 77 |                 className="hover:[&>*]:text-black dark:hover:[&>*]:text-gray-300"
 78 |               >
 79 |                 <FaTwitter className="text-lg" />
 80 |               </Footer.Link>
 81 |               <Footer.Link
 82 |                 href="#"
 83 |                 className="hover:[&>*]:text-black dark:hover:[&>*]:text-gray-300"
 84 |               >
 85 |                 <FaGithub className="text-lg" />
 86 |               </Footer.Link>
 87 |               <Footer.Link
 88 |                 href="#"
 89 |                 className="hover:[&>*]:text-black dark:hover:[&>*]:text-gray-300"
 90 |               >
 91 |                 <FaDribbble className="text-lg" />
 92 |               </Footer.Link>
 93 |             </div>
 94 |           </Footer.LinkGroup>
 95 |         </div>
 96 |       </Footer>
 97 |       <p className="my-8 text-center text-sm text-gray-500 dark:text-gray-300">
 98 |         &copy; 2019-2022 Flowbite.com. All rights reserved.
 99 |       </p>
100 |     </>
101 |   );
102 | };
103 | 
104 | export default NavbarSidebarLayout;
105 | 


--------------------------------------------------------------------------------
/src/pages/authentication/sign-in.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/anchor-is-valid */
 2 | import { Button, Card, Checkbox, Label, TextInput } from "flowbite-react";
 3 | import type { FC } from "react";
 4 | 
 5 | const SignInPage: FC = function () {
 6 |   return (
 7 |     <div className="flex flex-col items-center justify-center px-6 lg:h-screen lg:gap-y-12">
 8 |       <div className="my-6 flex items-center gap-x-1 lg:my-0">
 9 |         <img
10 |           alt="Flowbite logo"
11 |           src="https://flowbite.com/docs/images/logo.svg"
12 |           className="mr-3 h-12"
13 |         />
14 |         <span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
15 |           Flowbite
16 |         </span>
17 |       </div>
18 |       <Card
19 |         horizontal
20 |         imgSrc="/images/authentication/login.jpg"
21 |         imgAlt=""
22 |         className="w-full md:max-w-screen-sm [&>img]:hidden md:[&>img]:w-96 md:[&>img]:p-0 md:[&>*]:w-full md:[&>*]:p-16 lg:[&>img]:block"
23 |       >
24 |         <h1 className="mb-3 text-2xl font-bold dark:text-white md:text-3xl">
25 |           Sign in to platform
26 |         </h1>
27 |         <form>
28 |           <div className="mb-4 flex flex-col gap-y-3">
29 |             <Label htmlFor="email">Your email</Label>
30 |             <TextInput
31 |               id="email"
32 |               name="email"
33 |               placeholder="name@company.com"
34 |               type="email"
35 |             />
36 |           </div>
37 |           <div className="mb-6 flex flex-col gap-y-3">
38 |             <Label htmlFor="password">Your password</Label>
39 |             <TextInput
40 |               id="password"
41 |               name="password"
42 |               placeholder="••••••••"
43 |               type="password"
44 |             />
45 |           </div>
46 |           <div className="mb-6 flex items-center justify-between">
47 |             <div className="flex items-center gap-x-3">
48 |               <Checkbox id="rememberMe" name="rememberMe" />
49 |               <Label htmlFor="rememberMe">Remember me</Label>
50 |             </div>
51 |             <a
52 |               href="#"
53 |               className="w-1/2 text-right text-sm text-primary-600 dark:text-primary-300"
54 |             >
55 |               Lost Password?
56 |             </a>
57 |           </div>
58 |           <div className="mb-6">
59 |             <Button type="submit" className="w-full lg:w-auto">
60 |               Login to your account
61 |             </Button>
62 |           </div>
63 |           <p className="text-sm text-gray-500 dark:text-gray-300">
64 |             Not registered?&nbsp;
65 |             <a href="#" className="text-primary-600 dark:text-primary-300">
66 |               Create account
67 |             </a>
68 |           </p>
69 |         </form>
70 |       </Card>
71 |     </div>
72 |   );
73 | };
74 | 
75 | export default SignInPage;
76 | 


--------------------------------------------------------------------------------
/src/pages/authentication/sign-up.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/anchor-is-valid */
 2 | import { Button, Card, Checkbox, Label, TextInput } from "flowbite-react";
 3 | import type { FC } from "react";
 4 | 
 5 | const SignUpPage: FC = function () {
 6 |   return (
 7 |     <div className="flex flex-col items-center justify-center px-6 lg:h-screen lg:gap-y-12">
 8 |       <div className="my-6 flex items-center gap-x-1 lg:my-0">
 9 |         <img
10 |           alt="Flowbite logo"
11 |           src="https://flowbite.com/docs/images/logo.svg"
12 |           className="mr-3 h-12"
13 |         />
14 |         <span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
15 |           Flowbite
16 |         </span>
17 |       </div>
18 |       <Card
19 |         horizontal
20 |         imgSrc="/images/authentication/create-account.jpg"
21 |         imgAlt=""
22 |         className="w-full md:max-w-screen-sm [&>img]:hidden md:[&>img]:w-96 md:[&>img]:p-0 md:[&>*]:w-full md:[&>*]:p-16 lg:[&>img]:block"
23 |       >
24 |         <h1 className="mb-3 text-2xl font-bold dark:text-white md:text-3xl">
25 |           Create a Free Account
26 |         </h1>
27 |         <form>
28 |           <div className="mb-4 flex flex-col gap-y-3">
29 |             <Label htmlFor="email">Your email</Label>
30 |             <TextInput
31 |               id="email"
32 |               name="email"
33 |               placeholder="name@company.com"
34 |               type="email"
35 |             />
36 |           </div>
37 |           <div className="mb-6 flex flex-col gap-y-3">
38 |             <Label htmlFor="password">Your password</Label>
39 |             <TextInput
40 |               id="password"
41 |               name="password"
42 |               placeholder="••••••••"
43 |               type="password"
44 |             />
45 |           </div>
46 |           <div className="mb-6 flex flex-col gap-y-3">
47 |             <Label htmlFor="confirmPassword">Confirm password</Label>
48 |             <TextInput
49 |               id="confirmPassword"
50 |               name="confirmPassword"
51 |               placeholder="••••••••"
52 |               type="password"
53 |             />
54 |           </div>
55 |           <div className="mb-6 flex items-center gap-x-3">
56 |             <Checkbox id="acceptTerms" name="acceptTerms" />
57 |             <Label htmlFor="acceptTerms">
58 |               I accept the&nbsp;
59 |               <a href="#" className="text-primary-700 dark:text-primary-200">
60 |                 Terms and Conditions
61 |               </a>
62 |             </Label>
63 |           </div>
64 |           <div className="mb-7">
65 |             <Button type="submit" className="w-full lg:w-auto">
66 |               Create account
67 |             </Button>
68 |           </div>
69 |           <p className="text-sm text-gray-500 dark:text-gray-300">
70 |             Already have an account?&nbsp;
71 |             <a href="#" className="text-primary-600 dark:text-primary-200">
72 |               Login here
73 |             </a>
74 |           </p>
75 |         </form>
76 |       </Card>
77 |     </div>
78 |   );
79 | };
80 | 
81 | export default SignUpPage;
82 | 


--------------------------------------------------------------------------------
/src/pages/e-commerce/products.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import {
  3 |   Breadcrumb,
  4 |   Button,
  5 |   Checkbox,
  6 |   Label,
  7 |   Modal,
  8 |   Table,
  9 |   Textarea,
 10 |   TextInput,
 11 | } from "flowbite-react";
 12 | import type { FC } from "react";
 13 | import { useState } from "react";
 14 | import { FaPlus } from "react-icons/fa";
 15 | import {
 16 |   HiCog,
 17 |   HiDotsVertical,
 18 |   HiExclamationCircle,
 19 |   HiHome,
 20 |   HiOutlineExclamationCircle,
 21 |   HiPencilAlt,
 22 |   HiTrash,
 23 |   HiUpload,
 24 | } from "react-icons/hi";
 25 | import NavbarSidebarLayout from "../../layouts/navbar-sidebar";
 26 | import { Pagination } from "../users/list";
 27 | 
 28 | const EcommerceProductsPage: FC = function () {
 29 |   return (
 30 |     <NavbarSidebarLayout isFooter={false}>
 31 |       <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 sm:flex">
 32 |         <div className="mb-1 w-full">
 33 |           <div className="mb-4">
 34 |             <Breadcrumb className="mb-4">
 35 |               <Breadcrumb.Item href="#">
 36 |                 <div className="flex items-center gap-x-3">
 37 |                   <HiHome className="text-xl" />
 38 |                   <span className="dark:text-white">Home</span>
 39 |                 </div>
 40 |               </Breadcrumb.Item>
 41 |               <Breadcrumb.Item href="/e-commerce/products">
 42 |                 E-commerce
 43 |               </Breadcrumb.Item>
 44 |               <Breadcrumb.Item>Products</Breadcrumb.Item>
 45 |             </Breadcrumb>
 46 |             <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
 47 |               All products
 48 |             </h1>
 49 |           </div>
 50 |           <div className="block items-center sm:flex">
 51 |             <SearchForProducts />
 52 |             <div className="hidden space-x-1 border-l border-gray-100 pl-2 dark:border-gray-700 md:flex">
 53 |               <a
 54 |                 href="#"
 55 |                 className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
 56 |               >
 57 |                 <span className="sr-only">Configure</span>
 58 |                 <HiCog className="text-2xl" />
 59 |               </a>
 60 |               <a
 61 |                 href="#"
 62 |                 className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
 63 |               >
 64 |                 <span className="sr-only">Delete</span>
 65 |                 <HiTrash className="text-2xl" />
 66 |               </a>
 67 |               <a
 68 |                 href="#"
 69 |                 className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
 70 |               >
 71 |                 <span className="sr-only">Purge</span>
 72 |                 <HiExclamationCircle className="text-2xl" />
 73 |               </a>
 74 |               <a
 75 |                 href="#"
 76 |                 className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
 77 |               >
 78 |                 <span className="sr-only">Settings</span>
 79 |                 <HiDotsVertical className="text-2xl" />
 80 |               </a>
 81 |             </div>
 82 |             <div className="flex w-full items-center sm:justify-end">
 83 |               <AddProductModal />
 84 |             </div>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |       <div className="flex flex-col">
 89 |         <div className="overflow-x-auto">
 90 |           <div className="inline-block min-w-full align-middle">
 91 |             <div className="overflow-hidden shadow">
 92 |               <ProductsTable />
 93 |             </div>
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 |       <Pagination />
 98 |     </NavbarSidebarLayout>
 99 |   );
100 | };
101 | 
102 | const SearchForProducts: FC = function () {
103 |   return (
104 |     <form className="mb-4 sm:mb-0 sm:pr-3" action="#" method="GET">
105 |       <Label htmlFor="products-search" className="sr-only">
106 |         Search
107 |       </Label>
108 |       <div className="relative mt-1 lg:w-64 xl:w-96">
109 |         <TextInput
110 |           id="products-search"
111 |           name="products-search"
112 |           placeholder="Search for products"
113 |         />
114 |       </div>
115 |     </form>
116 |   );
117 | };
118 | 
119 | const AddProductModal: FC = function () {
120 |   const [isOpen, setOpen] = useState(false);
121 | 
122 |   return (
123 |     <>
124 |       <Button color="primary" onClick={() => setOpen(!isOpen)}>
125 |         <FaPlus className="mr-3 text-sm" />
126 |         Add product
127 |       </Button>
128 |       <Modal onClose={() => setOpen(false)} show={isOpen}>
129 |         <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
130 |           <strong>Add product</strong>
131 |         </Modal.Header>
132 |         <Modal.Body>
133 |           <form>
134 |             <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
135 |               <div>
136 |                 <Label htmlFor="productName">Product name</Label>
137 |                 <TextInput
138 |                   id="productName"
139 |                   name="productName"
140 |                   placeholder='Apple iMac 27"'
141 |                   className="mt-1"
142 |                 />
143 |               </div>
144 |               <div>
145 |                 <Label htmlFor="category">Category</Label>
146 |                 <TextInput
147 |                   id="category"
148 |                   name="category"
149 |                   placeholder="Electronics"
150 |                   className="mt-1"
151 |                 />
152 |               </div>
153 |               <div>
154 |                 <Label htmlFor="brand">Brand</Label>
155 |                 <TextInput
156 |                   id="brand"
157 |                   name="brand"
158 |                   placeholder="Apple"
159 |                   className="mt-1"
160 |                 />
161 |               </div>
162 |               <div>
163 |                 <Label htmlFor="price">Price</Label>
164 |                 <TextInput
165 |                   id="price"
166 |                   name="price"
167 |                   type="number"
168 |                   placeholder="$2300"
169 |                   className="mt-1"
170 |                 />
171 |               </div>
172 |               <div className="lg:col-span-2">
173 |                 <Label htmlFor="producTable.Celletails">Product details</Label>
174 |                 <Textarea
175 |                   id="producTable.Celletails"
176 |                   name="producTable.Celletails"
177 |                   placeholder="e.g. 3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, Ram 16 GB DDR4 2300Mhz"
178 |                   rows={6}
179 |                   className="mt-1"
180 |                 />
181 |               </div>
182 |               <div className="lg:col-span-2">
183 |                 <div className="flex w-full items-center justify-center">
184 |                   <label className="flex h-32 w-full cursor-pointer flex-col rounded border-2 border-dashed border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-700">
185 |                     <div className="flex flex-col items-center justify-center pt-5 pb-6">
186 |                       <HiUpload className="text-4xl text-gray-300" />
187 |                       <p className="py-1 text-sm text-gray-600 dark:text-gray-500">
188 |                         Upload a file or drag and drop
189 |                       </p>
190 |                       <p className="text-xs text-gray-500 dark:text-gray-400">
191 |                         PNG, JPG, GIF up to 10MB
192 |                       </p>
193 |                     </div>
194 |                     <input type="file" className="hidden" />
195 |                   </label>
196 |                 </div>
197 |               </div>
198 |             </div>
199 |           </form>
200 |         </Modal.Body>
201 |         <Modal.Footer>
202 |           <Button color="primary" onClick={() => setOpen(false)}>
203 |             Add product
204 |           </Button>
205 |         </Modal.Footer>
206 |       </Modal>
207 |     </>
208 |   );
209 | };
210 | 
211 | const EditProductModal: FC = function () {
212 |   const [isOpen, setOpen] = useState(false);
213 | 
214 |   return (
215 |     <>
216 |       <Button color="primary" onClick={() => setOpen(!isOpen)}>
217 |         <HiPencilAlt className="mr-2 text-lg" />
218 |         Edit item
219 |       </Button>
220 |       <Modal onClose={() => setOpen(false)} show={isOpen}>
221 |         <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
222 |           <strong>Edit product</strong>
223 |         </Modal.Header>
224 |         <Modal.Body>
225 |           <form>
226 |             <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
227 |               <div>
228 |                 <Label htmlFor="productName">Product name</Label>
229 |                 <TextInput
230 |                   id="productName"
231 |                   name="productName"
232 |                   placeholder='Apple iMac 27"'
233 |                   className="mt-1"
234 |                 />
235 |               </div>
236 |               <div>
237 |                 <Label htmlFor="category">Category</Label>
238 |                 <TextInput
239 |                   id="category"
240 |                   name="category"
241 |                   placeholder="Electronics"
242 |                   className="mt-1"
243 |                 />
244 |               </div>
245 |               <div>
246 |                 <Label htmlFor="brand">Brand</Label>
247 |                 <TextInput
248 |                   id="brand"
249 |                   name="brand"
250 |                   placeholder="Apple"
251 |                   className="mt-1"
252 |                 />
253 |               </div>
254 |               <div>
255 |                 <Label htmlFor="price">Price</Label>
256 |                 <TextInput
257 |                   id="price"
258 |                   name="price"
259 |                   type="number"
260 |                   placeholder="$2300"
261 |                   className="mt-1"
262 |                 />
263 |               </div>
264 |               <div className="lg:col-span-2">
265 |                 <Label htmlFor="productDetails">Product details</Label>
266 |                 <Textarea
267 |                   id="productDetails"
268 |                   name="productDetails"
269 |                   placeholder="e.g. 3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, Ram 16 GB DDR4 2300Mhz"
270 |                   rows={6}
271 |                   className="mt-1"
272 |                 />
273 |               </div>
274 |               <div className="flex space-x-5">
275 |                 <div>
276 |                   <img
277 |                     alt="Apple iMac 1"
278 |                     src="/images/products/apple-imac-1.png"
279 |                     className="h-24"
280 |                   />
281 |                   <a href="#" className="cursor-pointer">
282 |                     <span className="sr-only">Delete</span>
283 |                     <HiTrash className="-mt-5 text-2xl text-red-600" />
284 |                   </a>
285 |                 </div>
286 |                 <div>
287 |                   <img
288 |                     alt="Apple iMac 2"
289 |                     src="/images/products/apple-imac-2.png"
290 |                     className="h-24"
291 |                   />
292 |                   <a href="#" className="cursor-pointer">
293 |                     <span className="sr-only">Delete</span>
294 |                     <HiTrash className="-mt-5 text-2xl text-red-600" />
295 |                   </a>
296 |                 </div>
297 |                 <div>
298 |                   <img
299 |                     alt="Apple iMac 3"
300 |                     src="/images/products/apple-imac-3.png"
301 |                     className="h-24"
302 |                   />
303 |                   <a href="#" className="cursor-pointer">
304 |                     <span className="sr-only">Delete</span>
305 |                     <HiTrash className="-mt-5 text-2xl text-red-600" />
306 |                   </a>
307 |                 </div>
308 |               </div>
309 |               <div className="lg:col-span-2">
310 |                 <div className="flex w-full items-center justify-center">
311 |                   <label className="flex h-32 w-full cursor-pointer flex-col rounded border-2 border-dashed border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-700">
312 |                     <div className="flex flex-col items-center justify-center pt-5 pb-6">
313 |                       <HiUpload className="text-4xl text-gray-300" />
314 |                       <p className="py-1 text-sm text-gray-600 dark:text-gray-500">
315 |                         Upload a file or drag and drop
316 |                       </p>
317 |                       <p className="text-xs text-gray-500 dark:text-gray-400">
318 |                         PNG, JPG, GIF up to 10MB
319 |                       </p>
320 |                     </div>
321 |                     <input type="file" className="hidden" />
322 |                   </label>
323 |                 </div>
324 |               </div>
325 |             </div>
326 |           </form>
327 |         </Modal.Body>
328 |         <Modal.Footer>
329 |           <Button color="primary" onClick={() => setOpen(false)}>
330 |             Save all
331 |           </Button>
332 |         </Modal.Footer>
333 |       </Modal>
334 |     </>
335 |   );
336 | };
337 | 
338 | const DeleteProductModal: FC = function () {
339 |   const [isOpen, setOpen] = useState(false);
340 | 
341 |   return (
342 |     <>
343 |       <Button color="failure" onClick={() => setOpen(!isOpen)}>
344 |         <HiTrash className="mr-2 text-lg" />
345 |         Delete item
346 |       </Button>
347 |       <Modal onClose={() => setOpen(false)} show={isOpen} size="md">
348 |         <Modal.Header className="px-3 pt-3 pb-0">
349 |           <span className="sr-only">Delete product</span>
350 |         </Modal.Header>
351 |         <Modal.Body className="px-6 pb-6 pt-0">
352 |           <div className="flex flex-col items-center gap-y-6 text-center">
353 |             <HiOutlineExclamationCircle className="text-7xl text-red-600" />
354 |             <p className="text-lg text-gray-500 dark:text-gray-300">
355 |               Are you sure you want to delete this product?
356 |             </p>
357 |             <div className="flex items-center gap-x-3">
358 |               <Button color="failure" onClick={() => setOpen(false)}>
359 |                 Yes, I'm sure
360 |               </Button>
361 |               <Button color="gray" onClick={() => setOpen(false)}>
362 |                 No, cancel
363 |               </Button>
364 |             </div>
365 |           </div>
366 |         </Modal.Body>
367 |       </Modal>
368 |     </>
369 |   );
370 | };
371 | 
372 | const ProductsTable: FC = function () {
373 |   return (
374 |     <Table className="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
375 |       <Table.Head className="bg-gray-100 dark:bg-gray-700">
376 |         <Table.HeadCell>
377 |           <span className="sr-only">Toggle selected</span>
378 |           <Checkbox />
379 |         </Table.HeadCell>
380 |         <Table.HeadCell>Product Name</Table.HeadCell>
381 |         <Table.HeadCell>Technology</Table.HeadCell>
382 |         <Table.HeadCell>ID</Table.HeadCell>
383 |         <Table.HeadCell>Price</Table.HeadCell>
384 |         <Table.HeadCell>Actions</Table.HeadCell>
385 |       </Table.Head>
386 |       <Table.Body className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
387 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
388 |           <Table.Cell className="w-4 p-4">
389 |             <Checkbox />
390 |           </Table.Cell>
391 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
392 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
393 |               Education Dashboard
394 |             </div>
395 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
396 |               Html templates
397 |             </div>
398 |           </Table.Cell>
399 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
400 |             Angular
401 |           </Table.Cell>
402 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
403 |             #194556
404 |           </Table.Cell>
405 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
406 |             $149
407 |           </Table.Cell>
408 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
409 |             <div className="flex items-center gap-x-3">
410 |               <EditProductModal />
411 |               <DeleteProductModal />
412 |             </div>
413 |           </Table.Cell>
414 |         </Table.Row>
415 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
416 |           <Table.Cell className="w-4 p-4">
417 |             <Checkbox />
418 |           </Table.Cell>
419 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
420 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
421 |               React UI Kit
422 |             </div>
423 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
424 |               Html templates
425 |             </div>
426 |           </Table.Cell>
427 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
428 |             React JS
429 |           </Table.Cell>
430 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
431 |             #623232
432 |           </Table.Cell>
433 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
434 |             $129
435 |           </Table.Cell>
436 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
437 |             <div className="flex items-center gap-x-3">
438 |               <EditProductModal />
439 |               <DeleteProductModal />
440 |             </div>
441 |           </Table.Cell>
442 |         </Table.Row>
443 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
444 |           <Table.Cell className="w-4 p-4">
445 |             <Checkbox />
446 |           </Table.Cell>
447 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
448 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
449 |               Education Dashboard
450 |             </div>
451 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
452 |               Html templates
453 |             </div>
454 |           </Table.Cell>
455 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
456 |             Angular
457 |           </Table.Cell>
458 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
459 |             #194356
460 |           </Table.Cell>
461 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
462 |             $149
463 |           </Table.Cell>
464 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
465 |             <div className="flex items-center gap-x-3">
466 |               <EditProductModal />
467 |               <DeleteProductModal />
468 |             </div>
469 |           </Table.Cell>
470 |         </Table.Row>
471 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
472 |           <Table.Cell className="w-4 p-4">
473 |             <Checkbox />
474 |           </Table.Cell>
475 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
476 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
477 |               React UI Kit
478 |             </div>
479 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
480 |               Html templates
481 |             </div>
482 |           </Table.Cell>
483 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
484 |             React JS
485 |           </Table.Cell>
486 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
487 |             #323323
488 |           </Table.Cell>
489 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
490 |             $129
491 |           </Table.Cell>
492 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
493 |             <div className="flex items-center gap-x-3">
494 |               <EditProductModal />
495 |               <DeleteProductModal />
496 |             </div>
497 |           </Table.Cell>
498 |         </Table.Row>
499 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
500 |           <Table.Cell className="w-4 p-4">
501 |             <Checkbox />
502 |           </Table.Cell>
503 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
504 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
505 |               Education Dashboard
506 |             </div>
507 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
508 |               Html templates
509 |             </div>
510 |           </Table.Cell>
511 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
512 |             Angular
513 |           </Table.Cell>
514 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
515 |             #994856
516 |           </Table.Cell>
517 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
518 |             $149
519 |           </Table.Cell>
520 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
521 |             <div className="flex items-center gap-x-3">
522 |               <EditProductModal />
523 |               <DeleteProductModal />
524 |             </div>
525 |           </Table.Cell>
526 |         </Table.Row>
527 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
528 |           <Table.Cell className="w-4 p-4">
529 |             <Checkbox />
530 |           </Table.Cell>
531 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
532 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
533 |               Education Dashboard
534 |             </div>
535 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
536 |               Html templates
537 |             </div>
538 |           </Table.Cell>
539 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
540 |             Angular
541 |           </Table.Cell>
542 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
543 |             #194256
544 |           </Table.Cell>
545 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
546 |             $149
547 |           </Table.Cell>
548 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
549 |             <div className="flex items-center gap-x-3">
550 |               <EditProductModal />
551 |               <DeleteProductModal />
552 |             </div>
553 |           </Table.Cell>
554 |         </Table.Row>
555 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
556 |           <Table.Cell className="w-4 p-4">
557 |             <Checkbox />
558 |           </Table.Cell>
559 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
560 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
561 |               React UI Kit
562 |             </div>
563 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
564 |               Html templates
565 |             </div>
566 |           </Table.Cell>
567 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
568 |             React JS
569 |           </Table.Cell>
570 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
571 |             #623378
572 |           </Table.Cell>
573 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
574 |             $129
575 |           </Table.Cell>
576 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
577 |             <div className="flex items-center gap-x-3">
578 |               <EditProductModal />
579 |               <DeleteProductModal />
580 |             </div>
581 |           </Table.Cell>
582 |         </Table.Row>
583 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
584 |           <Table.Cell className="w-4 p-4">
585 |             <Checkbox />
586 |           </Table.Cell>
587 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
588 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
589 |               Education Dashboard
590 |             </div>
591 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
592 |               Html templates
593 |             </div>
594 |           </Table.Cell>
595 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
596 |             Angular
597 |           </Table.Cell>
598 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
599 |             #192856
600 |           </Table.Cell>
601 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
602 |             $149
603 |           </Table.Cell>
604 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
605 |             <div className="flex items-center gap-x-3">
606 |               <EditProductModal />
607 |               <DeleteProductModal />
608 |             </div>
609 |           </Table.Cell>
610 |         </Table.Row>
611 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
612 |           <Table.Cell className="w-4 p-4">
613 |             <Checkbox />
614 |           </Table.Cell>
615 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
616 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
617 |               React UI Kit
618 |             </div>
619 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
620 |               Html templates
621 |             </div>
622 |           </Table.Cell>
623 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
624 |             React JS
625 |           </Table.Cell>
626 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
627 |             #523323
628 |           </Table.Cell>
629 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
630 |             $129
631 |           </Table.Cell>
632 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
633 |             <div className="flex items-center gap-x-3">
634 |               <EditProductModal />
635 |               <DeleteProductModal />
636 |             </div>
637 |           </Table.Cell>
638 |         </Table.Row>
639 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
640 |           <Table.Cell className="w-4 p-4">
641 |             <Checkbox />
642 |           </Table.Cell>
643 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
644 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
645 |               Education Dashboard
646 |             </div>
647 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
648 |               Html templates
649 |             </div>
650 |           </Table.Cell>
651 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
652 |             Angular
653 |           </Table.Cell>
654 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
655 |             #191857
656 |           </Table.Cell>
657 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
658 |             $149
659 |           </Table.Cell>
660 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
661 |             <div className="flex items-center gap-x-3">
662 |               <EditProductModal />
663 |               <DeleteProductModal />
664 |             </div>
665 |           </Table.Cell>
666 |         </Table.Row>
667 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
668 |           <Table.Cell className="w-4 p-4">
669 |             <Checkbox />
670 |           </Table.Cell>
671 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
672 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
673 |               Education Dashboard
674 |             </div>
675 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
676 |               Html templates
677 |             </div>
678 |           </Table.Cell>
679 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
680 |             Angular
681 |           </Table.Cell>
682 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
683 |             #914856
684 |           </Table.Cell>
685 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
686 |             $149
687 |           </Table.Cell>
688 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
689 |             <div className="flex items-center gap-x-3">
690 |               <EditProductModal />
691 |               <DeleteProductModal />
692 |             </div>
693 |           </Table.Cell>
694 |         </Table.Row>
695 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
696 |           <Table.Cell className="w-4 p-4">
697 |             <Checkbox />
698 |           </Table.Cell>
699 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
700 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
701 |               React UI Kit
702 |             </div>
703 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
704 |               Html templates
705 |             </div>
706 |           </Table.Cell>
707 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
708 |             React JS
709 |           </Table.Cell>
710 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
711 |             #633293
712 |           </Table.Cell>
713 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
714 |             $129
715 |           </Table.Cell>
716 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
717 |             <div className="flex items-center gap-x-3">
718 |               <EditProductModal />
719 |               <DeleteProductModal />
720 |             </div>
721 |           </Table.Cell>
722 |         </Table.Row>
723 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
724 |           <Table.Cell className="w-4 p-4">
725 |             <Checkbox />
726 |           </Table.Cell>
727 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
728 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
729 |               Education Dashboard
730 |             </div>
731 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
732 |               Html templates
733 |             </div>
734 |           </Table.Cell>
735 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
736 |             Angular
737 |           </Table.Cell>
738 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
739 |             #924856
740 |           </Table.Cell>
741 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
742 |             $149
743 |           </Table.Cell>
744 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
745 |             <div className="flex items-center gap-x-3">
746 |               <EditProductModal />
747 |               <DeleteProductModal />
748 |             </div>
749 |           </Table.Cell>
750 |         </Table.Row>
751 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
752 |           <Table.Cell className="w-4 p-4">
753 |             <Checkbox />
754 |           </Table.Cell>
755 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
756 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
757 |               React UI Kit
758 |             </div>
759 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
760 |               Html templates
761 |             </div>
762 |           </Table.Cell>
763 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
764 |             React JS
765 |           </Table.Cell>
766 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
767 |             #123323
768 |           </Table.Cell>
769 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
770 |             $129
771 |           </Table.Cell>
772 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
773 |             <div className="flex items-center gap-x-3">
774 |               <EditProductModal />
775 |               <DeleteProductModal />
776 |             </div>
777 |           </Table.Cell>
778 |         </Table.Row>
779 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
780 |           <Table.Cell className="w-4 p-4">
781 |             <Checkbox />
782 |           </Table.Cell>
783 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
784 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
785 |               Education Dashboard
786 |             </div>
787 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
788 |               Html templates
789 |             </div>
790 |           </Table.Cell>
791 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
792 |             Angular
793 |           </Table.Cell>
794 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
795 |             #198856
796 |           </Table.Cell>
797 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
798 |             $149
799 |           </Table.Cell>
800 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
801 |             <div className="flex items-center gap-x-3">
802 |               <EditProductModal />
803 |               <DeleteProductModal />
804 |             </div>
805 |           </Table.Cell>
806 |         </Table.Row>
807 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
808 |           <Table.Cell className="w-4 p-4">
809 |             <Checkbox />
810 |           </Table.Cell>
811 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
812 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
813 |               Education Dashboard
814 |             </div>
815 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
816 |               Html templates
817 |             </div>
818 |           </Table.Cell>
819 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
820 |             Angular
821 |           </Table.Cell>
822 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
823 |             #132856
824 |           </Table.Cell>
825 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
826 |             $149
827 |           </Table.Cell>
828 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
829 |             <div className="flex items-center gap-x-3">
830 |               <EditProductModal />
831 |               <DeleteProductModal />
832 |             </div>
833 |           </Table.Cell>
834 |         </Table.Row>
835 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
836 |           <Table.Cell className="w-4 p-4">
837 |             <Checkbox />
838 |           </Table.Cell>
839 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
840 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
841 |               React UI Kit
842 |             </div>
843 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
844 |               Html templates
845 |             </div>
846 |           </Table.Cell>
847 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
848 |             React JS
849 |           </Table.Cell>
850 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
851 |             #613223
852 |           </Table.Cell>
853 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
854 |             $129
855 |           </Table.Cell>
856 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
857 |             <div className="flex items-center gap-x-3">
858 |               <EditProductModal />
859 |               <DeleteProductModal />
860 |             </div>
861 |           </Table.Cell>
862 |         </Table.Row>
863 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
864 |           <Table.Cell className="w-4 p-4">
865 |             <Checkbox />
866 |           </Table.Cell>
867 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
868 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
869 |               Education Dashboard
870 |             </div>
871 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
872 |               Html templates
873 |             </div>
874 |           </Table.Cell>
875 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
876 |             Angular
877 |           </Table.Cell>
878 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
879 |             #484856
880 |           </Table.Cell>
881 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
882 |             $149
883 |           </Table.Cell>
884 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
885 |             <div className="flex items-center gap-x-3">
886 |               <EditProductModal />
887 |               <DeleteProductModal />
888 |             </div>
889 |           </Table.Cell>
890 |         </Table.Row>
891 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
892 |           <Table.Cell className="w-4 p-4">
893 |             <Checkbox />
894 |           </Table.Cell>
895 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
896 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
897 |               React UI Kit
898 |             </div>
899 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
900 |               Html templates
901 |             </div>
902 |           </Table.Cell>
903 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
904 |             React JS
905 |           </Table.Cell>
906 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
907 |             #103324
908 |           </Table.Cell>
909 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
910 |             $129
911 |           </Table.Cell>
912 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
913 |             <div className="flex items-center gap-x-3">
914 |               <EditProductModal />
915 |               <DeleteProductModal />
916 |             </div>
917 |           </Table.Cell>
918 |         </Table.Row>
919 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
920 |           <Table.Cell className="w-4 p-4">
921 |             <Checkbox />
922 |           </Table.Cell>
923 |           <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
924 |             <div className="text-base font-semibold text-gray-900 dark:text-white">
925 |               Education Dashboard
926 |             </div>
927 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
928 |               Html templates
929 |             </div>
930 |           </Table.Cell>
931 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
932 |             Angular
933 |           </Table.Cell>
934 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
935 |             #124859
936 |           </Table.Cell>
937 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
938 |             $149
939 |           </Table.Cell>
940 |           <Table.Cell className="space-x-2 whitespace-nowrap p-4">
941 |             <div className="flex items-center gap-x-3">
942 |               <EditProductModal />
943 |               <DeleteProductModal />
944 |             </div>
945 |           </Table.Cell>
946 |         </Table.Row>
947 |       </Table.Body>
948 |     </Table>
949 |   );
950 | };
951 | 
952 | export default EcommerceProductsPage;
953 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { Badge, Dropdown, Table, useTheme } from "flowbite-react";
  3 | import type { FC } from "react";
  4 | import Chart from "react-apexcharts";
  5 | import NavbarSidebarLayout from "../layouts/navbar-sidebar";
  6 | 
  7 | const DashboardPage: FC = function () {
  8 |   return (
  9 |     <NavbarSidebarLayout>
 10 |       <div className="px-4 pt-6">
 11 |         <SalesThisWeek />
 12 |         <div className="my-6">
 13 |           <LatestTransactions />
 14 |         </div>
 15 |         <LatestCustomers />
 16 |         <div className="my-6">
 17 |           <AcquisitionOverview />
 18 |         </div>
 19 |       </div>
 20 |     </NavbarSidebarLayout>
 21 |   );
 22 | };
 23 | 
 24 | const SalesThisWeek: FC = function () {
 25 |   return (
 26 |     <div className="rounded-lg bg-white p-4 shadow dark:bg-gray-800 sm:p-6 xl:p-8">
 27 |       <div className="mb-4 flex items-center justify-between">
 28 |         <div className="shrink-0">
 29 |           <span className="text-2xl font-bold leading-none text-gray-900 dark:text-white sm:text-3xl">
 30 |             $45,385
 31 |           </span>
 32 |           <h3 className="text-base font-normal text-gray-600 dark:text-gray-400">
 33 |             Sales this week
 34 |           </h3>
 35 |         </div>
 36 |         <div className="flex flex-1 items-center justify-end text-base font-bold text-green-600 dark:text-green-400">
 37 |           12.5%
 38 |           <svg
 39 |             className="h-5 w-5"
 40 |             fill="currentColor"
 41 |             viewBox="0 0 20 20"
 42 |             xmlns="http://www.w3.org/2000/svg"
 43 |           >
 44 |             <path
 45 |               fillRule="evenodd"
 46 |               d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
 47 |               clipRule="evenodd"
 48 |             />
 49 |           </svg>
 50 |         </div>
 51 |       </div>
 52 |       <SalesChart />
 53 |       <div className="mt-5 flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700 sm:pt-6">
 54 |         <Datepicker />
 55 |         <div className="shrink-0">
 56 |           <a
 57 |             href="#"
 58 |             className="inline-flex items-center rounded-lg p-2 text-xs font-medium uppercase text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700 sm:text-sm"
 59 |           >
 60 |             Sales Report
 61 |             <svg
 62 |               className="ml-1 h-4 w-4 sm:h-5 sm:w-5"
 63 |               fill="none"
 64 |               stroke="currentColor"
 65 |               viewBox="0 0 24 24"
 66 |               xmlns="http://www.w3.org/2000/svg"
 67 |             >
 68 |               <path
 69 |                 strokeLinecap="round"
 70 |                 strokeLinejoin="round"
 71 |                 strokeWidth={2}
 72 |                 d="M9 5l7 7-7 7"
 73 |               />
 74 |             </svg>
 75 |           </a>
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |   );
 80 | };
 81 | 
 82 | const SalesChart: FC = function () {
 83 |   const { mode } = useTheme();
 84 |   const isDarkTheme = mode === "dark";
 85 | 
 86 |   const borderColor = isDarkTheme ? "#374151" : "#F3F4F6";
 87 |   const labelColor = isDarkTheme ? "#93ACAF" : "#6B7280";
 88 |   const opacityFrom = isDarkTheme ? 0 : 1;
 89 |   const opacityTo = isDarkTheme ? 0 : 1;
 90 | 
 91 |   const options: ApexCharts.ApexOptions = {
 92 |     stroke: {
 93 |       curve: "smooth",
 94 |     },
 95 |     chart: {
 96 |       type: "area",
 97 |       fontFamily: "Inter, sans-serif",
 98 |       foreColor: labelColor,
 99 |       toolbar: {
100 |         show: false,
101 |       },
102 |     },
103 |     fill: {
104 |       type: "gradient",
105 |       gradient: {
106 |         opacityFrom,
107 |         opacityTo,
108 |         type: "vertical",
109 |       },
110 |     },
111 |     dataLabels: {
112 |       enabled: false,
113 |     },
114 |     tooltip: {
115 |       style: {
116 |         fontSize: "14px",
117 |         fontFamily: "Inter, sans-serif",
118 |       },
119 |     },
120 |     grid: {
121 |       show: true,
122 |       borderColor: borderColor,
123 |       strokeDashArray: 1,
124 |       padding: {
125 |         left: 35,
126 |         bottom: 15,
127 |       },
128 |     },
129 |     markers: {
130 |       size: 5,
131 |       strokeColors: "#ffffff",
132 |       hover: {
133 |         size: undefined,
134 |         sizeOffset: 3,
135 |       },
136 |     },
137 |     xaxis: {
138 |       categories: [
139 |         "01 Feb",
140 |         "02 Feb",
141 |         "03 Feb",
142 |         "04 Feb",
143 |         "05 Feb",
144 |         "06 Feb",
145 |         "07 Feb",
146 |       ],
147 |       labels: {
148 |         style: {
149 |           colors: [labelColor],
150 |           fontSize: "14px",
151 |           fontWeight: 500,
152 |         },
153 |       },
154 |       axisBorder: {
155 |         color: borderColor,
156 |       },
157 |       axisTicks: {
158 |         color: borderColor,
159 |       },
160 |       crosshairs: {
161 |         show: true,
162 |         position: "back",
163 |         stroke: {
164 |           color: borderColor,
165 |           width: 1,
166 |           dashArray: 10,
167 |         },
168 |       },
169 |     },
170 |     yaxis: {
171 |       labels: {
172 |         style: {
173 |           colors: [labelColor],
174 |           fontSize: "14px",
175 |           fontWeight: 500,
176 |         },
177 |         formatter: function (value) {
178 |           return "$" + value;
179 |         },
180 |       },
181 |     },
182 |     legend: {
183 |       fontSize: "14px",
184 |       fontWeight: 500,
185 |       fontFamily: "Inter, sans-serif",
186 |       labels: {
187 |         colors: [labelColor],
188 |       },
189 |       itemMargin: {
190 |         horizontal: 10,
191 |       },
192 |     },
193 |     responsive: [
194 |       {
195 |         breakpoint: 1024,
196 |         options: {
197 |           xaxis: {
198 |             labels: {
199 |               show: false,
200 |             },
201 |           },
202 |         },
203 |       },
204 |     ],
205 |   };
206 |   const series = [
207 |     {
208 |       name: "Revenue",
209 |       data: [6356, 6218, 6156, 6526, 6356, 6256, 6056],
210 |       color: "#1A56DB",
211 |     },
212 |   ];
213 | 
214 |   return <Chart height={420} options={options} series={series} type="area" />;
215 | };
216 | 
217 | const Datepicker: FC = function () {
218 |   return (
219 |     <span className="text-sm text-gray-600">
220 |       <Dropdown inline label="Last 7 days">
221 |         <Dropdown.Item>
222 |           <strong>Sep 16, 2021 - Sep 22, 2021</strong>
223 |         </Dropdown.Item>
224 |         <Dropdown.Divider />
225 |         <Dropdown.Item>Yesterday</Dropdown.Item>
226 |         <Dropdown.Item>Today</Dropdown.Item>
227 |         <Dropdown.Item>Last 7 days</Dropdown.Item>
228 |         <Dropdown.Item>Last 30 days</Dropdown.Item>
229 |         <Dropdown.Item>Last 90 days</Dropdown.Item>
230 |         <Dropdown.Divider />
231 |         <Dropdown.Item>Custom...</Dropdown.Item>
232 |       </Dropdown>
233 |     </span>
234 |   );
235 | };
236 | 
237 | const LatestCustomers: FC = function () {
238 |   return (
239 |     <div className="mb-4 h-full rounded-lg bg-white p-4 shadow dark:bg-gray-800 sm:p-6">
240 |       <div className="mb-4 flex items-center justify-between">
241 |         <h3 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
242 |           Latest Customers
243 |         </h3>
244 |         <a
245 |           href="#"
246 |           className="inline-flex items-center rounded-lg p-2 text-sm font-medium text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700"
247 |         >
248 |           View all
249 |         </a>
250 |       </div>
251 |       <div className="flow-root">
252 |         <ul className="divide-y divide-gray-200 dark:divide-gray-700">
253 |           <li className="py-3 sm:py-4">
254 |             <div className="flex items-center space-x-4">
255 |               <div className="shrink-0">
256 |                 <img
257 |                   className="h-8 w-8 rounded-full"
258 |                   src="/images/users/neil-sims.png"
259 |                   alt=""
260 |                 />
261 |               </div>
262 |               <div className="min-w-0 flex-1">
263 |                 <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
264 |                   Neil Sims
265 |                 </p>
266 |                 <p className="truncate text-sm text-gray-500 dark:text-gray-400">
267 |                   email@flowbite.com
268 |                 </p>
269 |               </div>
270 |               <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
271 |                 $320
272 |               </div>
273 |             </div>
274 |           </li>
275 |           <li className="py-3 sm:py-4">
276 |             <div className="flex items-center space-x-4">
277 |               <div className="shrink-0">
278 |                 <img
279 |                   className="h-8 w-8 rounded-full"
280 |                   src="/images/users/bonnie-green.png"
281 |                   alt=""
282 |                 />
283 |               </div>
284 |               <div className="min-w-0 flex-1">
285 |                 <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
286 |                   Bonnie Green
287 |                 </p>
288 |                 <p className="truncate text-sm text-gray-500 dark:text-gray-400">
289 |                   email@flowbite.com
290 |                 </p>
291 |               </div>
292 |               <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
293 |                 $3467
294 |               </div>
295 |             </div>
296 |           </li>
297 |           <li className="py-3 sm:py-4">
298 |             <div className="flex items-center space-x-4">
299 |               <div className="shrink-0">
300 |                 <img
301 |                   className="h-8 w-8 rounded-full"
302 |                   src="/images/users/michael-gough.png"
303 |                   alt=""
304 |                 />
305 |               </div>
306 |               <div className="min-w-0 flex-1">
307 |                 <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
308 |                   Michael Gough
309 |                 </p>
310 |                 <p className="truncate text-sm text-gray-500 dark:text-gray-400">
311 |                   email@flowbite.com
312 |                 </p>
313 |               </div>
314 |               <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
315 |                 $67
316 |               </div>
317 |             </div>
318 |           </li>
319 |           <li className="py-3 sm:py-4">
320 |             <div className="flex items-center space-x-4">
321 |               <div className="shrink-0">
322 |                 <img
323 |                   className="h-8 w-8 rounded-full"
324 |                   src="/images/users/thomas-lean.png"
325 |                   alt=""
326 |                 />
327 |               </div>
328 |               <div className="min-w-0 flex-1">
329 |                 <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
330 |                   Thomes Lean
331 |                 </p>
332 |                 <p className="truncate text-sm text-gray-500 dark:text-gray-400">
333 |                   email@flowbite.com
334 |                 </p>
335 |               </div>
336 |               <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
337 |                 $2367
338 |               </div>
339 |             </div>
340 |           </li>
341 |           <li className="py-3 sm:py-4">
342 |             <div className="flex items-center space-x-4">
343 |               <div className="shrink-0">
344 |                 <img
345 |                   className="h-8 w-8 rounded-full"
346 |                   src="/images/users/lana-byrd.png"
347 |                   alt=""
348 |                 />
349 |               </div>
350 |               <div className="min-w-0 flex-1">
351 |                 <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
352 |                   Lana Byrd
353 |                 </p>
354 |                 <p className="truncate text-sm text-gray-500 dark:text-gray-400">
355 |                   email@flowbite.com
356 |                 </p>
357 |               </div>
358 |               <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
359 |                 $367
360 |               </div>
361 |             </div>
362 |           </li>
363 |         </ul>
364 |       </div>
365 |       <div className="flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700 sm:pt-6">
366 |         <Datepicker />
367 |         <div className="shrink-0">
368 |           <a
369 |             href="#"
370 |             className="inline-flex items-center rounded-lg p-2 text-xs font-medium uppercase text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700 sm:text-sm"
371 |           >
372 |             Sales Report
373 |             <svg
374 |               className="ml-1 h-4 w-4 sm:h-5 sm:w-5"
375 |               fill="none"
376 |               stroke="currentColor"
377 |               viewBox="0 0 24 24"
378 |               xmlns="http://www.w3.org/2000/svg"
379 |             >
380 |               <path
381 |                 strokeLinecap="round"
382 |                 strokeLinejoin="round"
383 |                 strokeWidth={2}
384 |                 d="M9 5l7 7-7 7"
385 |               />
386 |             </svg>
387 |           </a>
388 |         </div>
389 |       </div>
390 |     </div>
391 |   );
392 | };
393 | 
394 | const AcquisitionOverview: FC = function () {
395 |   return (
396 |     <div className="rounded-lg bg-white p-4 shadow dark:bg-gray-800 sm:p-6 xl:p-8">
397 |       <h3 className="mb-6 text-xl font-bold leading-none text-gray-900 dark:text-white">
398 |         Acquisition Overview
399 |       </h3>
400 |       <div className="flex flex-col">
401 |         <div className="overflow-x-auto rounded-lg">
402 |           <div className="inline-block min-w-full align-middle">
403 |             <div className="overflow-hidden shadow sm:rounded-lg">
404 |               <Table className="min-w-full table-fixed">
405 |                 <Table.Head>
406 |                   <Table.HeadCell className="whitespace-nowrap rounded-l border-x-0 bg-gray-50 py-3 px-4 text-left align-middle text-xs font-semibold uppercase text-gray-700 dark:bg-gray-700 dark:text-white">
407 |                     Top Channels
408 |                   </Table.HeadCell>
409 |                   <Table.HeadCell className="whitespace-nowrap border-x-0 bg-gray-50 py-3 px-4 text-left align-middle text-xs font-semibold uppercase text-gray-700 dark:bg-gray-700 dark:text-white">
410 |                     Users
411 |                   </Table.HeadCell>
412 |                   <Table.HeadCell className="min-w-[140px] whitespace-nowrap rounded-r border-x-0 bg-gray-50 py-3 px-4 text-left align-middle text-xs font-semibold uppercase text-gray-700 dark:bg-gray-700 dark:text-white">
413 |                     Acquisition
414 |                   </Table.HeadCell>
415 |                 </Table.Head>
416 |                 <Table.Body className="divide-y divide-gray-100 dark:divide-gray-700">
417 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
418 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
419 |                       Organic Search
420 |                     </Table.Cell>
421 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
422 |                       5,649
423 |                     </Table.Cell>
424 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
425 |                       <div className="flex items-center">
426 |                         <span className="mr-2 text-xs font-medium">30%</span>
427 |                         <div className="relative w-full">
428 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
429 |                             <div
430 |                               className="h-2 rounded-sm bg-primary-700"
431 |                               style={{ width: "30%" }}
432 |                             />
433 |                           </div>
434 |                         </div>
435 |                       </div>
436 |                     </Table.Cell>
437 |                   </Table.Row>
438 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
439 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
440 |                       Referral
441 |                     </Table.Cell>
442 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
443 |                       4,025
444 |                     </Table.Cell>
445 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
446 |                       <div className="flex items-center">
447 |                         <span className="mr-2 text-xs font-medium">24%</span>
448 |                         <div className="relative w-full">
449 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
450 |                             <div
451 |                               className="h-2 rounded-sm bg-orange-300"
452 |                               style={{ width: "24%" }}
453 |                             />
454 |                           </div>
455 |                         </div>
456 |                       </div>
457 |                     </Table.Cell>
458 |                   </Table.Row>
459 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
460 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
461 |                       Direct
462 |                     </Table.Cell>
463 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
464 |                       3,105
465 |                     </Table.Cell>
466 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
467 |                       <div className="flex items-center">
468 |                         <span className="mr-2 text-xs font-medium">18%</span>
469 |                         <div className="relative w-full">
470 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
471 |                             <div
472 |                               className="h-2 rounded-sm bg-teal-400"
473 |                               style={{ width: "18%" }}
474 |                             />
475 |                           </div>
476 |                         </div>
477 |                       </div>
478 |                     </Table.Cell>
479 |                   </Table.Row>
480 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
481 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
482 |                       Social
483 |                     </Table.Cell>
484 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
485 |                       1251
486 |                     </Table.Cell>
487 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
488 |                       <div className="flex items-center">
489 |                         <span className="mr-2 text-xs font-medium">12%</span>
490 |                         <div className="relative w-full">
491 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
492 |                             <div
493 |                               className="h-2 rounded-sm bg-pink-600"
494 |                               style={{ width: "12%" }}
495 |                             />
496 |                           </div>
497 |                         </div>
498 |                       </div>
499 |                     </Table.Cell>
500 |                   </Table.Row>
501 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
502 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
503 |                       Other
504 |                     </Table.Cell>
505 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
506 |                       734
507 |                     </Table.Cell>
508 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
509 |                       <div className="flex items-center">
510 |                         <span className="mr-2 text-xs font-medium">9%</span>
511 |                         <div className="relative w-full">
512 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
513 |                             <div
514 |                               className="h-2 rounded-sm bg-indigo-600"
515 |                               style={{ width: "9%" }}
516 |                             />
517 |                           </div>
518 |                         </div>
519 |                       </div>
520 |                     </Table.Cell>
521 |                   </Table.Row>
522 |                   <Table.Row className="text-gray-500 dark:text-gray-400">
523 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 text-left align-middle text-sm font-normal">
524 |                       Email
525 |                     </Table.Cell>
526 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs font-medium text-gray-900 dark:text-white">
527 |                       456
528 |                     </Table.Cell>
529 |                     <Table.Cell className="whitespace-nowrap border-t-0 p-4 align-middle text-xs">
530 |                       <div className="flex items-center">
531 |                         <span className="mr-2 text-xs font-medium">7%</span>
532 |                         <div className="relative w-full">
533 |                           <div className="h-2 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
534 |                             <div
535 |                               className="h-2 rounded-sm bg-purple-500"
536 |                               style={{ width: "7%" }}
537 |                             />
538 |                           </div>
539 |                         </div>
540 |                       </div>
541 |                     </Table.Cell>
542 |                   </Table.Row>
543 |                 </Table.Body>
544 |               </Table>
545 |             </div>
546 |           </div>
547 |         </div>
548 |       </div>
549 |       <div className="flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700 sm:pt-6">
550 |         <Datepicker />
551 |         <div className="shrink-0">
552 |           <a
553 |             href="#"
554 |             className="inline-flex items-center rounded-lg p-2 text-xs font-medium uppercase text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700 sm:text-sm"
555 |           >
556 |             Acquisition Report
557 |             <svg
558 |               className="ml-1 h-4 w-4 sm:h-5 sm:w-5"
559 |               fill="none"
560 |               stroke="currentColor"
561 |               viewBox="0 0 24 24"
562 |               xmlns="http://www.w3.org/2000/svg"
563 |             >
564 |               <path
565 |                 strokeLinecap="round"
566 |                 strokeLinejoin="round"
567 |                 strokeWidth={2}
568 |                 d="M9 5l7 7-7 7"
569 |               />
570 |             </svg>
571 |           </a>
572 |         </div>
573 |       </div>
574 |     </div>
575 |   );
576 | };
577 | 
578 | const LatestTransactions: FC = function () {
579 |   return (
580 |     <div className="rounded-lg bg-white p-4 shadow dark:bg-gray-800 sm:p-6 xl:p-8">
581 |       <div className="mb-4 flex items-center justify-between">
582 |         <div>
583 |           <h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
584 |             Latest Transactions
585 |           </h3>
586 |           <span className="text-base font-normal text-gray-600 dark:text-gray-400">
587 |             This is a list of latest transactions
588 |           </span>
589 |         </div>
590 |         <div className="shrink-0">
591 |           <a
592 |             href="#"
593 |             className="rounded-lg p-2 text-sm font-medium text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700"
594 |           >
595 |             View all
596 |           </a>
597 |         </div>
598 |       </div>
599 |       <div className="mt-8 flex flex-col">
600 |         <div className="overflow-x-auto rounded-lg">
601 |           <div className="inline-block min-w-full align-middle">
602 |             <div className="overflow-hidden shadow sm:rounded-lg">
603 |               <Table
604 |                 striped
605 |                 className="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
606 |               >
607 |                 <Table.Head className="bg-gray-50 dark:bg-gray-700">
608 |                   <Table.HeadCell>Transaction</Table.HeadCell>
609 |                   <Table.HeadCell>Date &amp; Time</Table.HeadCell>
610 |                   <Table.HeadCell>Amount</Table.HeadCell>
611 |                   <Table.HeadCell>Status</Table.HeadCell>
612 |                 </Table.Head>
613 |                 <Table.Body className="bg-white dark:bg-gray-800">
614 |                   <Table.Row>
615 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
616 |                       Payment from{" "}
617 |                       <span className="font-semibold">Bonnie Green</span>
618 |                     </Table.Cell>
619 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
620 |                       Apr 23, 2021
621 |                     </Table.Cell>
622 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
623 |                       $2300
624 |                     </Table.Cell>
625 |                     <Table.Cell className="flex whitespace-nowrap p-4">
626 |                       <Badge color="success">Completed</Badge>
627 |                     </Table.Cell>
628 |                   </Table.Row>
629 |                   <Table.Row>
630 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
631 |                       Payment refund to{" "}
632 |                       <span className="font-semibold">#00910</span>
633 |                     </Table.Cell>
634 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
635 |                       Apr 23, 2021
636 |                     </Table.Cell>
637 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
638 |                       -$670
639 |                     </Table.Cell>
640 |                     <Table.Cell className="flex whitespace-nowrap p-4">
641 |                       <Badge color="success">Completed</Badge>
642 |                     </Table.Cell>
643 |                   </Table.Row>
644 |                   <Table.Row>
645 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
646 |                       Payment failed from{" "}
647 |                       <span className="font-semibold">#087651</span>
648 |                     </Table.Cell>
649 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
650 |                       Apr 18, 2021
651 |                     </Table.Cell>
652 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
653 |                       $234
654 |                     </Table.Cell>
655 |                     <Table.Cell className="flex whitespace-nowrap p-4">
656 |                       <Badge color="failure">Cancelled</Badge>
657 |                     </Table.Cell>
658 |                   </Table.Row>
659 |                   <Table.Row>
660 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
661 |                       Payment from{" "}
662 |                       <span className="font-semibold">Lana Byrd</span>
663 |                     </Table.Cell>
664 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
665 |                       Apr 15, 2021
666 |                     </Table.Cell>
667 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
668 |                       $5000
669 |                     </Table.Cell>
670 |                     <Table.Cell className="flex whitespace-nowrap p-4">
671 |                       <span className="mr-2 rounded-md bg-purple-100 py-0.5 px-2.5 text-xs font-medium text-purple-800 dark:bg-purple-200">
672 |                         In progress
673 |                       </span>
674 |                     </Table.Cell>
675 |                   </Table.Row>
676 |                   <Table.Row>
677 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
678 |                       Payment from{" "}
679 |                       <span className="font-semibold">Jese Leos</span>
680 |                     </Table.Cell>
681 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
682 |                       Apr 15, 2021
683 |                     </Table.Cell>
684 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
685 |                       $2300
686 |                     </Table.Cell>
687 |                     <Table.Cell className="flex whitespace-nowrap p-4">
688 |                       <Badge color="success">Completed</Badge>
689 |                     </Table.Cell>
690 |                   </Table.Row>
691 |                   <Table.Row>
692 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
693 |                       Payment from{" "}
694 |                       <span className="font-semibold">THEMESBERG LLC</span>
695 |                     </Table.Cell>
696 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
697 |                       Apr 11, 2021
698 |                     </Table.Cell>
699 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
700 |                       $560
701 |                     </Table.Cell>
702 |                     <Table.Cell className="flex whitespace-nowrap p-4">
703 |                       <Badge color="success">Completed</Badge>
704 |                     </Table.Cell>
705 |                   </Table.Row>
706 |                   <Table.Row>
707 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
708 |                       Payment from{" "}
709 |                       <span className="font-semibold">Lana Lysle</span>
710 |                     </Table.Cell>
711 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
712 |                       Apr 6, 2021
713 |                     </Table.Cell>
714 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
715 |                       $1437
716 |                     </Table.Cell>
717 |                     <Table.Cell className="flex whitespace-nowrap p-4">
718 |                       <Badge color="success">Completed</Badge>
719 |                     </Table.Cell>
720 |                   </Table.Row>
721 |                   <Table.Row>
722 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
723 |                       Payment to{" "}
724 |                       <span className="font-semibold">Joseph Mcfall</span>
725 |                     </Table.Cell>
726 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
727 |                       Apr 1, 2021
728 |                     </Table.Cell>
729 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
730 |                       $980
731 |                     </Table.Cell>
732 |                     <Table.Cell className="flex whitespace-nowrap p-4">
733 |                       <Badge color="success">Completed</Badge>
734 |                     </Table.Cell>
735 |                   </Table.Row>
736 |                   <Table.Row>
737 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
738 |                       Payment from{" "}
739 |                       <span className="font-semibold">Alphabet LLC</span>
740 |                     </Table.Cell>
741 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
742 |                       Mar 23, 2021
743 |                     </Table.Cell>
744 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
745 |                       $11,436
746 |                     </Table.Cell>
747 |                     <Table.Cell className="flex whitespace-nowrap p-4">
748 |                       <span className="mr-2 rounded-md bg-purple-100 py-0.5 px-2.5 text-xs font-medium text-purple-800 dark:bg-purple-200">
749 |                         In progress
750 |                       </span>
751 |                     </Table.Cell>
752 |                   </Table.Row>
753 |                   <Table.Row>
754 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-900 dark:text-white">
755 |                       Payment from{" "}
756 |                       <span className="font-semibold">Bonnie Green</span>
757 |                     </Table.Cell>
758 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400">
759 |                       Mar 23, 2021
760 |                     </Table.Cell>
761 |                     <Table.Cell className="whitespace-nowrap p-4 text-sm font-semibold text-gray-900 dark:text-white">
762 |                       $560
763 |                     </Table.Cell>
764 |                     <Table.Cell className="flex whitespace-nowrap p-4">
765 |                       <Badge color="success">Completed</Badge>
766 |                     </Table.Cell>
767 |                   </Table.Row>
768 |                 </Table.Body>
769 |               </Table>
770 |             </div>
771 |           </div>
772 |         </div>
773 |       </div>
774 |       <div className="flex items-center justify-between pt-3 sm:pt-6">
775 |         <Datepicker />
776 |         <div className="shrink-0">
777 |           <a
778 |             href="#"
779 |             className="inline-flex items-center rounded-lg p-2 text-xs font-medium uppercase text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700 sm:text-sm"
780 |           >
781 |             Transactions Report
782 |             <svg
783 |               className="ml-1 h-4 w-4 sm:h-5 sm:w-5"
784 |               fill="none"
785 |               stroke="currentColor"
786 |               viewBox="0 0 24 24"
787 |               xmlns="http://www.w3.org/2000/svg"
788 |             >
789 |               <path
790 |                 strokeLinecap="round"
791 |                 strokeLinejoin="round"
792 |                 strokeWidth={2}
793 |                 d="M9 5l7 7-7 7"
794 |               />
795 |             </svg>
796 |           </a>
797 |         </div>
798 |       </div>
799 |     </div>
800 |   );
801 | };
802 | 
803 | export default DashboardPage;
804 | 


--------------------------------------------------------------------------------
/src/pages/users/list.tsx:
--------------------------------------------------------------------------------
   1 | /* eslint-disable jsx-a11y/anchor-is-valid */
   2 | import {
   3 |   Breadcrumb,
   4 |   Button,
   5 |   Checkbox,
   6 |   Label,
   7 |   Modal,
   8 |   Table,
   9 |   TextInput,
  10 | } from "flowbite-react";
  11 | import type { FC } from "react";
  12 | import { useState } from "react";
  13 | import {
  14 |   HiChevronLeft,
  15 |   HiChevronRight,
  16 |   HiCog,
  17 |   HiDocumentDownload,
  18 |   HiDotsVertical,
  19 |   HiExclamationCircle,
  20 |   HiHome,
  21 |   HiOutlineExclamationCircle,
  22 |   HiOutlinePencilAlt,
  23 |   HiPlus,
  24 |   HiTrash,
  25 | } from "react-icons/hi";
  26 | import NavbarSidebarLayout from "../../layouts/navbar-sidebar";
  27 | 
  28 | const UserListPage: FC = function () {
  29 |   return (
  30 |     <NavbarSidebarLayout isFooter={false}>
  31 |       <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 sm:flex">
  32 |         <div className="mb-1 w-full">
  33 |           <div className="mb-4">
  34 |             <Breadcrumb className="mb-4">
  35 |               <Breadcrumb.Item href="#">
  36 |                 <div className="flex items-center gap-x-3">
  37 |                   <HiHome className="text-xl" />
  38 |                   <span className="dark:text-white">Home</span>
  39 |                 </div>
  40 |               </Breadcrumb.Item>
  41 |               <Breadcrumb.Item href="/users/list">Users</Breadcrumb.Item>
  42 |               <Breadcrumb.Item>List</Breadcrumb.Item>
  43 |             </Breadcrumb>
  44 |             <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
  45 |               All users
  46 |             </h1>
  47 |           </div>
  48 |           <div className="sm:flex">
  49 |             <div className="mb-3 hidden items-center dark:divide-gray-700 sm:mb-0 sm:flex sm:divide-x sm:divide-gray-100">
  50 |               <form className="lg:pr-3">
  51 |                 <Label htmlFor="users-search" className="sr-only">
  52 |                   Search
  53 |                 </Label>
  54 |                 <div className="relative mt-1 lg:w-64 xl:w-96">
  55 |                   <TextInput
  56 |                     id="users-search"
  57 |                     name="users-search"
  58 |                     placeholder="Search for users"
  59 |                   />
  60 |                 </div>
  61 |               </form>
  62 |               <div className="mt-3 flex space-x-1 pl-0 sm:mt-0 sm:pl-2">
  63 |                 <a
  64 |                   href="#"
  65 |                   className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
  66 |                 >
  67 |                   <span className="sr-only">Configure</span>
  68 |                   <HiCog className="text-2xl" />
  69 |                 </a>
  70 |                 <a
  71 |                   href="#"
  72 |                   className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
  73 |                 >
  74 |                   <span className="sr-only">Delete</span>
  75 |                   <HiTrash className="text-2xl" />
  76 |                 </a>
  77 |                 <a
  78 |                   href="#"
  79 |                   className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
  80 |                 >
  81 |                   <span className="sr-only">Purge</span>
  82 |                   <HiExclamationCircle className="text-2xl" />
  83 |                 </a>
  84 |                 <a
  85 |                   href="#"
  86 |                   className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
  87 |                 >
  88 |                   <span className="sr-only">Settings</span>
  89 |                   <HiDotsVertical className="text-2xl" />
  90 |                 </a>
  91 |               </div>
  92 |             </div>
  93 |             <div className="ml-auto flex items-center space-x-2 sm:space-x-3">
  94 |               <AddUserModal />
  95 |               <Button color="gray">
  96 |                 <div className="flex items-center gap-x-3">
  97 |                   <HiDocumentDownload className="text-xl" />
  98 |                   <span>Export</span>
  99 |                 </div>
 100 |               </Button>
 101 |             </div>
 102 |           </div>
 103 |         </div>
 104 |       </div>
 105 |       <div className="flex flex-col">
 106 |         <div className="overflow-x-auto">
 107 |           <div className="inline-block min-w-full align-middle">
 108 |             <div className="overflow-hidden shadow">
 109 |               <AllUsersTable />
 110 |             </div>
 111 |           </div>
 112 |         </div>
 113 |       </div>
 114 |       <Pagination />
 115 |     </NavbarSidebarLayout>
 116 |   );
 117 | };
 118 | 
 119 | const AddUserModal: FC = function () {
 120 |   const [isOpen, setOpen] = useState(false);
 121 | 
 122 |   return (
 123 |     <>
 124 |       <Button color="primary" onClick={() => setOpen(true)}>
 125 |         <div className="flex items-center gap-x-3">
 126 |           <HiPlus className="text-xl" />
 127 |           Add user
 128 |         </div>
 129 |       </Button>
 130 |       <Modal onClose={() => setOpen(false)} show={isOpen}>
 131 |         <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
 132 |           <strong>Add new user</strong>
 133 |         </Modal.Header>
 134 |         <Modal.Body>
 135 |           <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
 136 |             <div>
 137 |               <Label htmlFor="firstName">First name</Label>
 138 |               <div className="mt-1">
 139 |                 <TextInput
 140 |                   id="firstName"
 141 |                   name="firstName"
 142 |                   placeholder="Bonnie"
 143 |                 />
 144 |               </div>
 145 |             </div>
 146 |             <div>
 147 |               <Label htmlFor="lastName">Last name</Label>
 148 |               <div className="mt-1">
 149 |                 <TextInput id="lastName" name="lastName" placeholder="Green" />
 150 |               </div>
 151 |             </div>
 152 |             <div>
 153 |               <Label htmlFor="email">Email</Label>
 154 |               <div className="mt-1">
 155 |                 <TextInput
 156 |                   id="email"
 157 |                   name="email"
 158 |                   placeholder="example@company.com"
 159 |                   type="email"
 160 |                 />
 161 |               </div>
 162 |             </div>
 163 |             <div>
 164 |               <Label htmlFor="phone">Phone number</Label>
 165 |               <div className="mt-1">
 166 |                 <TextInput
 167 |                   id="phone"
 168 |                   name="phone"
 169 |                   placeholder="e.g., +(12)3456 789"
 170 |                   type="tel"
 171 |                 />
 172 |               </div>
 173 |             </div>
 174 |             <div>
 175 |               <Label htmlFor="department">Department</Label>
 176 |               <div className="mt-1">
 177 |                 <TextInput
 178 |                   id="department"
 179 |                   name="department"
 180 |                   placeholder="Development"
 181 |                 />
 182 |               </div>
 183 |             </div>
 184 |             <div>
 185 |               <Label htmlFor="company">Company</Label>
 186 |               <div className="mt-1">
 187 |                 <TextInput
 188 |                   id="company"
 189 |                   name="company"
 190 |                   placeholder="Somewhere"
 191 |                 />
 192 |               </div>
 193 |             </div>
 194 |           </div>
 195 |         </Modal.Body>
 196 |         <Modal.Footer>
 197 |           <Button color="primary" onClick={() => setOpen(false)}>
 198 |             Add user
 199 |           </Button>
 200 |         </Modal.Footer>
 201 |       </Modal>
 202 |     </>
 203 |   );
 204 | };
 205 | 
 206 | const AllUsersTable: FC = function () {
 207 |   return (
 208 |     <Table className="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
 209 |       <Table.Head className="bg-gray-100 dark:bg-gray-700">
 210 |         <Table.HeadCell>
 211 |           <Label htmlFor="select-all" className="sr-only">
 212 |             Select all
 213 |           </Label>
 214 |           <Checkbox id="select-all" name="select-all" />
 215 |         </Table.HeadCell>
 216 |         <Table.HeadCell>Name</Table.HeadCell>
 217 |         <Table.HeadCell>Position</Table.HeadCell>
 218 |         <Table.HeadCell>Country</Table.HeadCell>
 219 |         <Table.HeadCell>Status</Table.HeadCell>
 220 |         <Table.HeadCell>Actions</Table.HeadCell>
 221 |       </Table.Head>
 222 |       <Table.Body className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
 223 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 224 |           <Table.Cell className="w-4 p-4">
 225 |             <div className="flex items-center">
 226 |               <Checkbox aria-describedby="checkbox-1" id="checkbox-1" />
 227 |               <label htmlFor="checkbox-1" className="sr-only">
 228 |                 checkbox
 229 |               </label>
 230 |             </div>
 231 |           </Table.Cell>
 232 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 233 |             <img
 234 |               className="h-10 w-10 rounded-full"
 235 |               src="/images/users/neil-sims.png"
 236 |               alt="Neil Sims avatar"
 237 |             />
 238 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 239 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 240 |                 Neil Sims
 241 |               </div>
 242 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 243 |                 neil.sims@flowbite.com
 244 |               </div>
 245 |             </div>
 246 |           </Table.Cell>
 247 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 248 |             Front-end developer
 249 |           </Table.Cell>
 250 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 251 |             United States
 252 |           </Table.Cell>
 253 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 254 |             <div className="flex items-center">
 255 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 256 |               Active
 257 |             </div>
 258 |           </Table.Cell>
 259 |           <Table.Cell>
 260 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 261 |               <EditUserModal />
 262 |               <DeleteUserModal />
 263 |             </div>
 264 |           </Table.Cell>
 265 |         </Table.Row>
 266 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 267 |           <Table.Cell className="w-4 p-4">
 268 |             <div className="flex items-center">
 269 |               <input
 270 |                 id="checkbox-2"
 271 |                 aria-describedby="checkbox-1"
 272 |                 type="checkbox"
 273 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 274 |               />
 275 |               <label htmlFor="checkbox-2" className="sr-only">
 276 |                 checkbox
 277 |               </label>
 278 |             </div>
 279 |           </Table.Cell>
 280 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 281 |             <img
 282 |               className="h-10 w-10 rounded-full"
 283 |               src="/images/users/roberta-casas.png"
 284 |               alt="Roberta Casas avatar"
 285 |             />
 286 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 287 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 288 |                 Roberta Casas
 289 |               </div>
 290 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 291 |                 roberta.casas@flowbite.com
 292 |               </div>
 293 |             </div>
 294 |           </Table.Cell>
 295 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 296 |             Designer
 297 |           </Table.Cell>
 298 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 299 |             Spain
 300 |           </Table.Cell>
 301 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 302 |             <div className="flex items-center">
 303 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 304 |               Active
 305 |             </div>
 306 |           </Table.Cell>
 307 |           <Table.Cell>
 308 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 309 |               <EditUserModal />
 310 |               <DeleteUserModal />
 311 |             </div>
 312 |           </Table.Cell>
 313 |         </Table.Row>
 314 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 315 |           <Table.Cell className="w-4 p-4">
 316 |             <div className="flex items-center">
 317 |               <input
 318 |                 id="checkbox-3"
 319 |                 aria-describedby="checkbox-1"
 320 |                 type="checkbox"
 321 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 322 |               />
 323 |               <label htmlFor="checkbox-3" className="sr-only">
 324 |                 checkbox
 325 |               </label>
 326 |             </div>
 327 |           </Table.Cell>
 328 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 329 |             <img
 330 |               className="h-10 w-10 rounded-full"
 331 |               src="/images/users/michael-gough.png"
 332 |               alt="Michael Gough avatar"
 333 |             />
 334 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 335 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 336 |                 Michael Gough
 337 |               </div>
 338 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 339 |                 michael.gough@flowbite.com
 340 |               </div>
 341 |             </div>
 342 |           </Table.Cell>
 343 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 344 |             React developer
 345 |           </Table.Cell>
 346 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 347 |             United Kingdom
 348 |           </Table.Cell>
 349 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 350 |             <div className="flex items-center">
 351 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 352 |               Active
 353 |             </div>
 354 |           </Table.Cell>
 355 |           <Table.Cell>
 356 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 357 |               <EditUserModal />
 358 |               <DeleteUserModal />
 359 |             </div>
 360 |           </Table.Cell>
 361 |         </Table.Row>
 362 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 363 |           <Table.Cell className="w-4 p-4">
 364 |             <div className="flex items-center">
 365 |               <input
 366 |                 id="checkbox-4"
 367 |                 aria-describedby="checkbox-1"
 368 |                 type="checkbox"
 369 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 370 |               />
 371 |               <label htmlFor="checkbox-4" className="sr-only">
 372 |                 checkbox
 373 |               </label>
 374 |             </div>
 375 |           </Table.Cell>
 376 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 377 |             <img
 378 |               className="h-10 w-10 rounded-full"
 379 |               src="/images/users/jese-leos.png"
 380 |               alt="Jese Leos avatar"
 381 |             />
 382 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 383 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 384 |                 Jese Leos
 385 |               </div>
 386 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 387 |                 jese.leos@flowbite.com
 388 |               </div>
 389 |             </div>
 390 |           </Table.Cell>
 391 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 392 |             Marketing
 393 |           </Table.Cell>
 394 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 395 |             United States
 396 |           </Table.Cell>
 397 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 398 |             <div className="flex items-center">
 399 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 400 |               Active
 401 |             </div>
 402 |           </Table.Cell>
 403 |           <Table.Cell>
 404 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 405 |               <EditUserModal />
 406 |               <DeleteUserModal />
 407 |             </div>
 408 |           </Table.Cell>
 409 |         </Table.Row>
 410 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 411 |           <Table.Cell className="w-4 p-4">
 412 |             <div className="flex items-center">
 413 |               <input
 414 |                 id="checkbox-5"
 415 |                 aria-describedby="checkbox-1"
 416 |                 type="checkbox"
 417 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 418 |               />
 419 |               <label htmlFor="checkbox-5" className="sr-only">
 420 |                 checkbox
 421 |               </label>
 422 |             </div>
 423 |           </Table.Cell>
 424 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 425 |             <img
 426 |               className="h-10 w-10 rounded-full"
 427 |               src="/images/users/bonnie-green.png"
 428 |               alt="Bonnie Green avatar"
 429 |             />
 430 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 431 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 432 |                 Bonnie Green
 433 |               </div>
 434 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 435 |                 bonnie.green@flowbite.com
 436 |               </div>
 437 |             </div>
 438 |           </Table.Cell>
 439 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 440 |             UI/UX Engineer
 441 |           </Table.Cell>
 442 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 443 |             AusTable.Rowalia
 444 |           </Table.Cell>
 445 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 446 |             <div className="flex items-center">
 447 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-red-500"></div>{" "}
 448 |               Offline
 449 |             </div>
 450 |           </Table.Cell>
 451 |           <Table.Cell>
 452 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 453 |               <EditUserModal />
 454 |               <DeleteUserModal />
 455 |             </div>
 456 |           </Table.Cell>
 457 |         </Table.Row>
 458 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 459 |           <Table.Cell className="w-4 p-4">
 460 |             <div className="flex items-center">
 461 |               <input
 462 |                 id="checkbox-6"
 463 |                 aria-describedby="checkbox-1"
 464 |                 type="checkbox"
 465 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 466 |               />
 467 |               <label htmlFor="checkbox-6" className="sr-only">
 468 |                 checkbox
 469 |               </label>
 470 |             </div>
 471 |           </Table.Cell>
 472 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 473 |             <img
 474 |               className="h-10 w-10 rounded-full"
 475 |               src="/images/users/thomas-lean.png"
 476 |               alt="Thomas Lean avatar"
 477 |             />
 478 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 479 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 480 |                 Thomas Lean
 481 |               </div>
 482 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 483 |                 thomas.lean@flowbite.com
 484 |               </div>
 485 |             </div>
 486 |           </Table.Cell>
 487 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 488 |             Vue developer
 489 |           </Table.Cell>
 490 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 491 |             Germany
 492 |           </Table.Cell>
 493 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 494 |             <div className="flex items-center">
 495 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 496 |               Active
 497 |             </div>
 498 |           </Table.Cell>
 499 |           <Table.Cell>
 500 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 501 |               <EditUserModal />
 502 |               <DeleteUserModal />
 503 |             </div>
 504 |           </Table.Cell>
 505 |         </Table.Row>
 506 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 507 |           <Table.Cell className="w-4 p-4">
 508 |             <div className="flex items-center">
 509 |               <input
 510 |                 id="checkbox-7"
 511 |                 aria-describedby="checkbox-1"
 512 |                 type="checkbox"
 513 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 514 |               />
 515 |               <label htmlFor="checkbox-7" className="sr-only">
 516 |                 checkbox
 517 |               </label>
 518 |             </div>
 519 |           </Table.Cell>
 520 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 521 |             <img
 522 |               className="h-10 w-10 rounded-full"
 523 |               src="/images/users/helene-engels.png"
 524 |               alt="Helene Engels avatar"
 525 |             />
 526 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 527 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 528 |                 Helene Engels
 529 |               </div>
 530 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 531 |                 helene.engels@flowbite.com
 532 |               </div>
 533 |             </div>
 534 |           </Table.Cell>
 535 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 536 |             Product owner
 537 |           </Table.Cell>
 538 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 539 |             Canada
 540 |           </Table.Cell>
 541 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 542 |             <div className="flex items-center">
 543 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 544 |               Active
 545 |             </div>
 546 |           </Table.Cell>
 547 |           <Table.Cell>
 548 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 549 |               <EditUserModal />
 550 |               <DeleteUserModal />
 551 |             </div>
 552 |           </Table.Cell>
 553 |         </Table.Row>
 554 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 555 |           <Table.Cell className="w-4 p-4">
 556 |             <div className="flex items-center">
 557 |               <input
 558 |                 id="checkbox-8"
 559 |                 aria-describedby="checkbox-1"
 560 |                 type="checkbox"
 561 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 562 |               />
 563 |               <label htmlFor="checkbox-8" className="sr-only">
 564 |                 checkbox
 565 |               </label>
 566 |             </div>
 567 |           </Table.Cell>
 568 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 569 |             <img
 570 |               className="h-10 w-10 rounded-full"
 571 |               src="/images/users/lana-byrd.png"
 572 |               alt="Lana Byrd avatar"
 573 |             />
 574 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 575 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 576 |                 Lana Byrd
 577 |               </div>
 578 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 579 |                 lana.byrd@flowbite.com
 580 |               </div>
 581 |             </div>
 582 |           </Table.Cell>
 583 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 584 |             Designer
 585 |           </Table.Cell>
 586 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 587 |             United States
 588 |           </Table.Cell>
 589 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 590 |             <div className="flex items-center">
 591 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 592 |               Active
 593 |             </div>
 594 |           </Table.Cell>
 595 |           <Table.Cell>
 596 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 597 |               <EditUserModal />
 598 |               <DeleteUserModal />
 599 |             </div>
 600 |           </Table.Cell>
 601 |         </Table.Row>
 602 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 603 |           <Table.Cell className="w-4 p-4">
 604 |             <div className="flex items-center">
 605 |               <input
 606 |                 id="checkbox-9"
 607 |                 aria-describedby="checkbox-1"
 608 |                 type="checkbox"
 609 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 610 |               />
 611 |               <label htmlFor="checkbox-9" className="sr-only">
 612 |                 checkbox
 613 |               </label>
 614 |             </div>
 615 |           </Table.Cell>
 616 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 617 |             <img
 618 |               className="h-10 w-10 rounded-full"
 619 |               src="/images/users/leslie-livingston.png"
 620 |               alt="Leslie Livingston avatar"
 621 |             />
 622 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 623 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 624 |                 Leslie Livingston
 625 |               </div>
 626 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 627 |                 leslie.livingston@flowbite.com
 628 |               </div>
 629 |             </div>
 630 |           </Table.Cell>
 631 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 632 |             Web developer
 633 |           </Table.Cell>
 634 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 635 |             France
 636 |           </Table.Cell>
 637 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 638 |             <div className="flex items-center">
 639 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-red-500"></div>{" "}
 640 |               Offline
 641 |             </div>
 642 |           </Table.Cell>
 643 |           <Table.Cell>
 644 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 645 |               <EditUserModal />
 646 |               <DeleteUserModal />
 647 |             </div>
 648 |           </Table.Cell>
 649 |         </Table.Row>
 650 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 651 |           <Table.Cell className="w-4 p-4">
 652 |             <div className="flex items-center">
 653 |               <input
 654 |                 id="checkbox-10"
 655 |                 aria-describedby="checkbox-1"
 656 |                 type="checkbox"
 657 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 658 |               />
 659 |               <label htmlFor="checkbox-10" className="sr-only">
 660 |                 checkbox
 661 |               </label>
 662 |             </div>
 663 |           </Table.Cell>
 664 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 665 |             <img
 666 |               className="h-10 w-10 rounded-full"
 667 |               src="/images/users/robert-brown.png"
 668 |               alt="Robert Brown avatar"
 669 |             />
 670 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 671 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 672 |                 Robert Brown
 673 |               </div>
 674 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 675 |                 robert.brown@flowbite.com
 676 |               </div>
 677 |             </div>
 678 |           </Table.Cell>
 679 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 680 |             Laravel developer
 681 |           </Table.Cell>
 682 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 683 |             Russia
 684 |           </Table.Cell>
 685 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 686 |             <div className="flex items-center">
 687 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 688 |               Active
 689 |             </div>
 690 |           </Table.Cell>
 691 |           <Table.Cell>
 692 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 693 |               <EditUserModal />
 694 |               <DeleteUserModal />
 695 |             </div>
 696 |           </Table.Cell>
 697 |         </Table.Row>
 698 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 699 |           <Table.Cell className="w-4 p-4">
 700 |             <div className="flex items-center">
 701 |               <input
 702 |                 id="checkbox-11"
 703 |                 aria-describedby="checkbox-1"
 704 |                 type="checkbox"
 705 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 706 |               />
 707 |               <label htmlFor="checkbox-11" className="sr-only">
 708 |                 checkbox
 709 |               </label>
 710 |             </div>
 711 |           </Table.Cell>
 712 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 713 |             <img
 714 |               className="h-10 w-10 rounded-full"
 715 |               src="/images/users/neil-sims.png"
 716 |               alt="Neil Sims avatar"
 717 |             />
 718 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 719 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 720 |                 Neil Sims
 721 |               </div>
 722 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 723 |                 neil.sims@flowbite.com
 724 |               </div>
 725 |             </div>
 726 |           </Table.Cell>
 727 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 728 |             Front-end developer
 729 |           </Table.Cell>
 730 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 731 |             United States
 732 |           </Table.Cell>
 733 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 734 |             <div className="flex items-center">
 735 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 736 |               Active
 737 |             </div>
 738 |           </Table.Cell>
 739 |           <Table.Cell>
 740 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 741 |               <EditUserModal />
 742 |               <DeleteUserModal />
 743 |             </div>
 744 |           </Table.Cell>
 745 |         </Table.Row>
 746 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 747 |           <Table.Cell className="w-4 p-4">
 748 |             <div className="flex items-center">
 749 |               <input
 750 |                 id="checkbox-12"
 751 |                 aria-describedby="checkbox-1"
 752 |                 type="checkbox"
 753 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 754 |               />
 755 |               <label htmlFor="checkbox-12" className="sr-only">
 756 |                 checkbox
 757 |               </label>
 758 |             </div>
 759 |           </Table.Cell>
 760 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 761 |             <img
 762 |               className="h-10 w-10 rounded-full"
 763 |               src="/images/users/roberta-casas.png"
 764 |               alt="Roberta Casas avatar"
 765 |             />
 766 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 767 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 768 |                 Roberta Casas
 769 |               </div>
 770 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 771 |                 roberta.casas@flowbite.com
 772 |               </div>
 773 |             </div>
 774 |           </Table.Cell>
 775 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 776 |             Designer
 777 |           </Table.Cell>
 778 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 779 |             Spain
 780 |           </Table.Cell>
 781 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 782 |             <div className="flex items-center">
 783 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 784 |               Active
 785 |             </div>
 786 |           </Table.Cell>
 787 |           <Table.Cell>
 788 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 789 |               <EditUserModal />
 790 |               <DeleteUserModal />
 791 |             </div>
 792 |           </Table.Cell>
 793 |         </Table.Row>
 794 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 795 |           <Table.Cell className="w-4 p-4">
 796 |             <div className="flex items-center">
 797 |               <input
 798 |                 id="checkbox-13"
 799 |                 aria-describedby="checkbox-1"
 800 |                 type="checkbox"
 801 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 802 |               />
 803 |               <label htmlFor="checkbox-13" className="sr-only">
 804 |                 checkbox
 805 |               </label>
 806 |             </div>
 807 |           </Table.Cell>
 808 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 809 |             <img
 810 |               className="h-10 w-10 rounded-full"
 811 |               src="/images/users/michael-gough.png"
 812 |               alt="Michael Gough avatar"
 813 |             />
 814 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 815 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 816 |                 Michael Gough
 817 |               </div>
 818 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 819 |                 michael.gough@flowbite.com
 820 |               </div>
 821 |             </div>
 822 |           </Table.Cell>
 823 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 824 |             React developer
 825 |           </Table.Cell>
 826 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 827 |             United Kingdom
 828 |           </Table.Cell>
 829 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 830 |             <div className="flex items-center">
 831 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 832 |               Active
 833 |             </div>
 834 |           </Table.Cell>
 835 |           <Table.Cell>
 836 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 837 |               <EditUserModal />
 838 |               <DeleteUserModal />
 839 |             </div>
 840 |           </Table.Cell>
 841 |         </Table.Row>
 842 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 843 |           <Table.Cell className="w-4 p-4">
 844 |             <div className="flex items-center">
 845 |               <input
 846 |                 id="checkbox-14"
 847 |                 aria-describedby="checkbox-1"
 848 |                 type="checkbox"
 849 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 850 |               />
 851 |               <label htmlFor="checkbox-14" className="sr-only">
 852 |                 checkbox
 853 |               </label>
 854 |             </div>
 855 |           </Table.Cell>
 856 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 857 |             <img
 858 |               className="h-10 w-10 rounded-full"
 859 |               src="/images/users/jese-leos.png"
 860 |               alt="Jese Leos avatar"
 861 |             />
 862 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 863 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 864 |                 Jese Leos
 865 |               </div>
 866 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 867 |                 jese.leos@flowbite.com
 868 |               </div>
 869 |             </div>
 870 |           </Table.Cell>
 871 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 872 |             Marketing
 873 |           </Table.Cell>
 874 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 875 |             United States
 876 |           </Table.Cell>
 877 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 878 |             <div className="flex items-center">
 879 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 880 |               Active
 881 |             </div>
 882 |           </Table.Cell>
 883 |           <Table.Cell>
 884 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 885 |               <EditUserModal />
 886 |               <DeleteUserModal />
 887 |             </div>
 888 |           </Table.Cell>
 889 |         </Table.Row>
 890 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 891 |           <Table.Cell className="w-4 p-4">
 892 |             <div className="flex items-center">
 893 |               <input
 894 |                 id="checkbox-15"
 895 |                 aria-describedby="checkbox-1"
 896 |                 type="checkbox"
 897 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 898 |               />
 899 |               <label htmlFor="checkbox-15" className="sr-only">
 900 |                 checkbox
 901 |               </label>
 902 |             </div>
 903 |           </Table.Cell>
 904 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 905 |             <img
 906 |               className="h-10 w-10 rounded-full"
 907 |               src="/images/users/bonnie-green.png"
 908 |               alt="Bonnie Green avatar"
 909 |             />
 910 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 911 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 912 |                 Bonnie Green
 913 |               </div>
 914 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 915 |                 bonnie.green@flowbite.com
 916 |               </div>
 917 |             </div>
 918 |           </Table.Cell>
 919 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 920 |             UI/UX Engineer
 921 |           </Table.Cell>
 922 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 923 |             AusTable.Rowalia
 924 |           </Table.Cell>
 925 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 926 |             <div className="flex items-center">
 927 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-red-500"></div>{" "}
 928 |               Offline
 929 |             </div>
 930 |           </Table.Cell>
 931 |           <Table.Cell>
 932 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 933 |               <EditUserModal />
 934 |               <DeleteUserModal />
 935 |             </div>
 936 |           </Table.Cell>
 937 |         </Table.Row>
 938 | 
 939 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 940 |           <Table.Cell className="w-4 p-4">
 941 |             <div className="flex items-center">
 942 |               <input
 943 |                 id="checkbox-16"
 944 |                 aria-describedby="checkbox-1"
 945 |                 type="checkbox"
 946 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 947 |               />
 948 |               <label htmlFor="checkbox-16" className="sr-only">
 949 |                 checkbox
 950 |               </label>
 951 |             </div>
 952 |           </Table.Cell>
 953 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
 954 |             <img
 955 |               className="h-10 w-10 rounded-full"
 956 |               src="/images/users/thomas-lean.png"
 957 |               alt="Thomas Lean avatar"
 958 |             />
 959 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 960 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
 961 |                 Thomas Lean
 962 |               </div>
 963 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
 964 |                 thomas.lean@flowbite.com
 965 |               </div>
 966 |             </div>
 967 |           </Table.Cell>
 968 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 969 |             Vue developer
 970 |           </Table.Cell>
 971 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
 972 |             Germany
 973 |           </Table.Cell>
 974 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
 975 |             <div className="flex items-center">
 976 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
 977 |               Active
 978 |             </div>
 979 |           </Table.Cell>
 980 |           <Table.Cell>
 981 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
 982 |               <EditUserModal />
 983 |               <DeleteUserModal />
 984 |             </div>
 985 |           </Table.Cell>
 986 |         </Table.Row>
 987 | 
 988 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
 989 |           <Table.Cell className="w-4 p-4">
 990 |             <div className="flex items-center">
 991 |               <input
 992 |                 id="checkbox-17"
 993 |                 aria-describedby="checkbox-1"
 994 |                 type="checkbox"
 995 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
 996 |               />
 997 |               <label htmlFor="checkbox-17" className="sr-only">
 998 |                 checkbox
 999 |               </label>
1000 |             </div>
1001 |           </Table.Cell>
1002 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
1003 |             <img
1004 |               className="h-10 w-10 rounded-full"
1005 |               src="/images/users/helene-engels.png"
1006 |               alt="Helene Engels avatar"
1007 |             />
1008 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1009 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
1010 |                 Helene Engels
1011 |               </div>
1012 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1013 |                 helene.engels@flowbite.com
1014 |               </div>
1015 |             </div>
1016 |           </Table.Cell>
1017 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1018 |             Product owner
1019 |           </Table.Cell>
1020 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1021 |             Canada
1022 |           </Table.Cell>
1023 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
1024 |             <div className="flex items-center">
1025 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
1026 |               Active
1027 |             </div>
1028 |           </Table.Cell>
1029 |           <Table.Cell>
1030 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
1031 |               <EditUserModal />
1032 |               <DeleteUserModal />
1033 |             </div>
1034 |           </Table.Cell>
1035 |         </Table.Row>
1036 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
1037 |           <Table.Cell className="w-4 p-4">
1038 |             <div className="flex items-center">
1039 |               <input
1040 |                 id="checkbox-18"
1041 |                 aria-describedby="checkbox-1"
1042 |                 type="checkbox"
1043 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
1044 |               />
1045 |               <label htmlFor="checkbox-18" className="sr-only">
1046 |                 checkbox
1047 |               </label>
1048 |             </div>
1049 |           </Table.Cell>
1050 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
1051 |             <img
1052 |               className="h-10 w-10 rounded-full"
1053 |               src="/images/users/lana-byrd.png"
1054 |               alt="Lana Byrd avatar"
1055 |             />
1056 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1057 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
1058 |                 Lana Byrd
1059 |               </div>
1060 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1061 |                 lana.byrd@flowbite.com
1062 |               </div>
1063 |             </div>
1064 |           </Table.Cell>
1065 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1066 |             Designer
1067 |           </Table.Cell>
1068 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1069 |             United States
1070 |           </Table.Cell>
1071 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
1072 |             <div className="flex items-center">
1073 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
1074 |               Active
1075 |             </div>
1076 |           </Table.Cell>
1077 |           <Table.Cell>
1078 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
1079 |               <EditUserModal />
1080 |               <DeleteUserModal />
1081 |             </div>
1082 |           </Table.Cell>
1083 |         </Table.Row>
1084 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
1085 |           <Table.Cell className="w-4 p-4">
1086 |             <div className="flex items-center">
1087 |               <input
1088 |                 id="checkbox-19"
1089 |                 aria-describedby="checkbox-1"
1090 |                 type="checkbox"
1091 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
1092 |               />
1093 |               <label htmlFor="checkbox-19" className="sr-only">
1094 |                 checkbox
1095 |               </label>
1096 |             </div>
1097 |           </Table.Cell>
1098 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
1099 |             <img
1100 |               className="h-10 w-10 rounded-full"
1101 |               src="/images/users/leslie-livingston.png"
1102 |               alt="Leslie Livingston avatar"
1103 |             />
1104 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1105 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
1106 |                 Leslie Livingston
1107 |               </div>
1108 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1109 |                 leslie.livingston@flowbite.com
1110 |               </div>
1111 |             </div>
1112 |           </Table.Cell>
1113 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1114 |             Web developer
1115 |           </Table.Cell>
1116 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1117 |             France
1118 |           </Table.Cell>
1119 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
1120 |             <div className="flex items-center">
1121 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-red-500"></div>{" "}
1122 |               Offline
1123 |             </div>
1124 |           </Table.Cell>
1125 |           <Table.Cell>
1126 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
1127 |               <EditUserModal />
1128 |               <DeleteUserModal />
1129 |             </div>
1130 |           </Table.Cell>
1131 |         </Table.Row>
1132 |         <Table.Row className="hover:bg-gray-100 dark:hover:bg-gray-700">
1133 |           <Table.Cell className="w-4 p-4">
1134 |             <div className="flex items-center">
1135 |               <input
1136 |                 id="checkbox-20"
1137 |                 aria-describedby="checkbox-1"
1138 |                 type="checkbox"
1139 |                 className="h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-4 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
1140 |               />
1141 |               <label htmlFor="checkbox-20" className="sr-only">
1142 |                 checkbox
1143 |               </label>
1144 |             </div>
1145 |           </Table.Cell>
1146 |           <Table.Cell className="mr-12 flex items-center space-x-6 whitespace-nowrap p-4 lg:mr-0">
1147 |             <img
1148 |               className="h-10 w-10 rounded-full"
1149 |               src="/images/users/robert-brown.png"
1150 |               alt="Robert Brown avatar"
1151 |             />
1152 |             <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1153 |               <div className="text-base font-semibold text-gray-900 dark:text-white">
1154 |                 Robert Brown
1155 |               </div>
1156 |               <div className="text-sm font-normal text-gray-500 dark:text-gray-400">
1157 |                 robert.brown@flowbite.com
1158 |               </div>
1159 |             </div>
1160 |           </Table.Cell>
1161 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1162 |             Laravel developer
1163 |           </Table.Cell>
1164 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-medium text-gray-900 dark:text-white">
1165 |             Russia
1166 |           </Table.Cell>
1167 |           <Table.Cell className="whitespace-nowrap p-4 text-base font-normal text-gray-900 dark:text-white">
1168 |             <div className="flex items-center">
1169 |               <div className="mr-2 h-2.5 w-2.5 rounded-full bg-green-400"></div>{" "}
1170 |               Active
1171 |             </div>
1172 |           </Table.Cell>
1173 |           <Table.Cell>
1174 |             <div className="flex items-center gap-x-3 whitespace-nowrap">
1175 |               <EditUserModal />
1176 |               <DeleteUserModal />
1177 |             </div>
1178 |           </Table.Cell>
1179 |         </Table.Row>
1180 |       </Table.Body>
1181 |     </Table>
1182 |   );
1183 | };
1184 | 
1185 | const EditUserModal: FC = function () {
1186 |   const [isOpen, setOpen] = useState(false);
1187 | 
1188 |   return (
1189 |     <>
1190 |       <Button color="primary" onClick={() => setOpen(true)}>
1191 |         <div className="flex items-center gap-x-2">
1192 |           <HiOutlinePencilAlt className="text-lg" />
1193 |           Edit user
1194 |         </div>
1195 |       </Button>
1196 |       <Modal onClose={() => setOpen(false)} show={isOpen}>
1197 |         <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
1198 |           <strong>Edit user</strong>
1199 |         </Modal.Header>
1200 |         <Modal.Body>
1201 |           <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
1202 |             <div>
1203 |               <Label htmlFor="firstName">First name</Label>
1204 |               <div className="mt-1">
1205 |                 <TextInput
1206 |                   id="firstName"
1207 |                   name="firstName"
1208 |                   placeholder="Bonnie"
1209 |                 />
1210 |               </div>
1211 |             </div>
1212 |             <div>
1213 |               <Label htmlFor="lastName">Last name</Label>
1214 |               <div className="mt-1">
1215 |                 <TextInput id="lastName" name="lastName" placeholder="Green" />
1216 |               </div>
1217 |             </div>
1218 |             <div>
1219 |               <Label htmlFor="email">Email</Label>
1220 |               <div className="mt-1">
1221 |                 <TextInput
1222 |                   id="email"
1223 |                   name="email"
1224 |                   placeholder="example@company.com"
1225 |                   type="email"
1226 |                 />
1227 |               </div>
1228 |             </div>
1229 |             <div>
1230 |               <Label htmlFor="phone">Phone number</Label>
1231 |               <div className="mt-1">
1232 |                 <TextInput
1233 |                   id="phone"
1234 |                   name="phone"
1235 |                   placeholder="e.g., +(12)3456 789"
1236 |                   type="tel"
1237 |                 />
1238 |               </div>
1239 |             </div>
1240 |             <div>
1241 |               <Label htmlFor="department">Department</Label>
1242 |               <div className="mt-1">
1243 |                 <TextInput
1244 |                   id="department"
1245 |                   name="department"
1246 |                   placeholder="Development"
1247 |                 />
1248 |               </div>
1249 |             </div>
1250 |             <div>
1251 |               <Label htmlFor="company">Company</Label>
1252 |               <div className="mt-1">
1253 |                 <TextInput
1254 |                   id="company"
1255 |                   name="company"
1256 |                   placeholder="Somewhere"
1257 |                 />
1258 |               </div>
1259 |             </div>
1260 |             <div>
1261 |               <Label htmlFor="passwordCurrent">Current password</Label>
1262 |               <div className="mt-1">
1263 |                 <TextInput
1264 |                   id="passwordCurrent"
1265 |                   name="passwordCurrent"
1266 |                   placeholder="••••••••"
1267 |                   type="password"
1268 |                 />
1269 |               </div>
1270 |             </div>
1271 |             <div>
1272 |               <Label htmlFor="passwordNew">New password</Label>
1273 |               <div className="mt-1">
1274 |                 <TextInput
1275 |                   id="passwordNew"
1276 |                   name="passwordNew"
1277 |                   placeholder="••••••••"
1278 |                   type="password"
1279 |                 />
1280 |               </div>
1281 |             </div>
1282 |           </div>
1283 |         </Modal.Body>
1284 |         <Modal.Footer>
1285 |           <Button color="primary" onClick={() => setOpen(false)}>
1286 |             Save all
1287 |           </Button>
1288 |         </Modal.Footer>
1289 |       </Modal>
1290 |     </>
1291 |   );
1292 | };
1293 | 
1294 | const DeleteUserModal: FC = function () {
1295 |   const [isOpen, setOpen] = useState(false);
1296 | 
1297 |   return (
1298 |     <>
1299 |       <Button color="failure" onClick={() => setOpen(true)}>
1300 |         <div className="flex items-center gap-x-2">
1301 |           <HiTrash className="text-lg" />
1302 |           Delete user
1303 |         </div>
1304 |       </Button>
1305 |       <Modal onClose={() => setOpen(false)} show={isOpen} size="md">
1306 |         <Modal.Header className="px-6 pt-6 pb-0">
1307 |           <span className="sr-only">Delete user</span>
1308 |         </Modal.Header>
1309 |         <Modal.Body className="px-6 pt-0 pb-6">
1310 |           <div className="flex flex-col items-center gap-y-6 text-center">
1311 |             <HiOutlineExclamationCircle className="text-7xl text-red-500" />
1312 |             <p className="text-xl text-gray-500">
1313 |               Are you sure you want to delete this user?
1314 |             </p>
1315 |             <div className="flex items-center gap-x-3">
1316 |               <Button color="failure" onClick={() => setOpen(false)}>
1317 |                 Yes, I'm sure
1318 |               </Button>
1319 |               <Button color="gray" onClick={() => setOpen(false)}>
1320 |                 No, cancel
1321 |               </Button>
1322 |             </div>
1323 |           </div>
1324 |         </Modal.Body>
1325 |       </Modal>
1326 |     </>
1327 |   );
1328 | };
1329 | 
1330 | export const Pagination: FC = function () {
1331 |   return (
1332 |     <div className="sticky right-0 bottom-0 w-full items-center border-t border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 sm:flex sm:justify-between">
1333 |       <div className="mb-4 flex items-center sm:mb-0">
1334 |         <a
1335 |           href="#"
1336 |           className="inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
1337 |         >
1338 |           <span className="sr-only">Previous page</span>
1339 |           <HiChevronLeft className="text-2xl" />
1340 |         </a>
1341 |         <a
1342 |           href="#"
1343 |           className="mr-2 inline-flex cursor-pointer justify-center rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
1344 |         >
1345 |           <span className="sr-only">Next page</span>
1346 |           <HiChevronRight className="text-2xl" />
1347 |         </a>
1348 |         <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
1349 |           Showing&nbsp;
1350 |           <span className="font-semibold text-gray-900 dark:text-white">
1351 |             1-20
1352 |           </span>
1353 |           &nbsp;of&nbsp;
1354 |           <span className="font-semibold text-gray-900 dark:text-white">
1355 |             2290
1356 |           </span>
1357 |         </span>
1358 |       </div>
1359 |       <div className="flex items-center space-x-3">
1360 |         <a
1361 |           href="#"
1362 |           className="inline-flex flex-1 items-center justify-center rounded-lg bg-primary-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
1363 |         >
1364 |           <HiChevronLeft className="mr-1 text-base" />
1365 |           Previous
1366 |         </a>
1367 |         <a
1368 |           href="#"
1369 |           className="inline-flex flex-1 items-center justify-center rounded-lg bg-primary-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
1370 |         >
1371 |           Next
1372 |           <HiChevronRight className="ml-1 text-base" />
1373 |         </a>
1374 |       </div>
1375 |     </div>
1376 |   );
1377 | };
1378 | 
1379 | export default UserListPage;
1380 | 


--------------------------------------------------------------------------------
/src/svgmap.d.ts:
--------------------------------------------------------------------------------
1 | declare module "svgmap";
2 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-undef */
 2 | /** @type {import('tailwindcss').Config} */
 3 | module.exports = {
 4 |   content: [
 5 |     "./index.html",
 6 |     "./node_modules/flowbite-react/lib/**/*.{js,ts}",
 7 |     "./src/**/*.{ts,tsx}",
 8 |   ],
 9 |   theme: {
10 |     colors: {
11 |       primary: {
12 |         50: "#eff6ff",
13 |         100: "#dbeafe",
14 |         200: "#bfdbfe",
15 |         300: "#93c5fd",
16 |         400: "#60a5fa",
17 |         500: "#3b82f6",
18 |         600: "#2563eb",
19 |         700: "#1d4ed8",
20 |         800: "#1e40af",
21 |         900: "#1e3a8a",
22 |       },
23 |     },
24 |     fontFamily: {
25 |       sans: [
26 |         "Inter",
27 |         "ui-sans-serif",
28 |         "system-ui",
29 |         "-apple-system",
30 |         "system-ui",
31 |         "Segoe UI",
32 |         "Roboto",
33 |         "Helvetica Neue",
34 |         "Arial",
35 |         "Noto Sans",
36 |         "sans-serif",
37 |         "Apple Color Emoji",
38 |         "Segoe UI Emoji",
39 |         "Segoe UI Symbol",
40 |         "Noto Color Emoji",
41 |       ],
42 |       body: [
43 |         "Inter",
44 |         "ui-sans-serif",
45 |         "system-ui",
46 |         "-apple-system",
47 |         "system-ui",
48 |         "Segoe UI",
49 |         "Roboto",
50 |         "Helvetica Neue",
51 |         "Arial",
52 |         "Noto Sans",
53 |         "sans-serif",
54 |         "Apple Color Emoji",
55 |         "Segoe UI Emoji",
56 |         "Segoe UI Symbol",
57 |         "Noto Color Emoji",
58 |       ],
59 |       mono: [
60 |         "ui-monospace",
61 |         "SFMono-Regular",
62 |         "Menlo",
63 |         "Monaco",
64 |         "Consolas",
65 |         "Liberation Mono",
66 |         "Courier New",
67 |         "monospace",
68 |       ],
69 |     },
70 |     extend: {},
71 |   },
72 |   plugins: [require("flowbite/plugin")],
73 | };
74 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/tsconfig",
 3 |   "display": "Default",
 4 |   "compilerOptions": {
 5 |     "allowJs": true,
 6 |     "declaration": true,
 7 |     "declarationMap": true,
 8 |     "esModuleInterop": true,
 9 |     "forceConsistentCasingInFileNames": true,
10 |     "incremental": true,
11 |     "isolatedModules": true,
12 |     "jsx": "react-jsx",
13 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
14 |     "moduleResolution": "node",
15 |     "noEmit": true,
16 |     "noFallthroughCasesInSwitch": true,
17 |     "noImplicitReturns": true,
18 |     "noPropertyAccessFromIndexSignature": true,
19 |     "noUncheckedIndexedAccess": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "resolveJsonModule": true,
23 |     "skipLibCheck": true,
24 |     "sourceMap": true,
25 |     "strict": true,
26 |     "target": "ESNext",
27 |     "types": ["vite/client"]
28 |   },
29 |   "exclude": ["node_modules"],
30 |   "include": ["**/*.cjs", "**/*.mjs", "**/*.ts", "**/*.tsx"]
31 | }
32 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | export default defineConfig({
5 |   plugins: [react()],
6 | });
7 | 


--------------------------------------------------------------------------------