최초 commit/push

2025-12-30 16:48:25 +09:00
commit a99165e4d7
61 changed files with 2517 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,11 @@
+# https://github.com/browserslist/browserslist#readme
+
+[production]
+>0.2%
+not dead
+not op_mini all
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Enforce Unix newlines
+* text=auto eol=lf
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+package-lock.json
+yarn.lock
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.eslintcache
+.DS_Store
+.idea
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1 @@
+build/
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,19 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Start: Local (npm script)",
+            "type": "node",
+            "request": "launch",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "start"
+            ],
+            "console": "integratedTerminal",
+            "env": {
+                "NODE_ENV": "local"
+            }
+        }
+    ]
+}
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 creativeLabs Łukasz Holeczek.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,243 @@
+# CoreUI Free React Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%React%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
+[![npm package][npm-coreui-badge]][npm-coreui]
+[![NPM downloads][npm-coreui-download]][npm-coreui]
+[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react)
+[![npm package][npm-coreui-react-badge]][npm-coreui-react]
+[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]  
+
+[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
+[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
+[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
+[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
+[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square
+[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
+[npm]: https://www.npmjs.com/package/@coreui/react
+
+[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/)
+
+CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
+
+## Table of Contents
+
+* [Versions](#versions)
+* [CoreUI PRO](#coreui-pro)
+* [CoreUI PRO React Admin Templates](#coreui-pro-react-admin-templates)
+* [Quick Start](#quick-start)
+* [Installation](#installation)
+* [Basic usage](#basic-usage)
+* [What's included](#whats-included)
+* [Documentation](#documentation)
+* [Components](#components)
+* [Versioning](#versioning)
+* [Creators](#creators)
+* [Community](#community)
+* [Support CoreUI Development](#support-coreui-development)
+* [Copyright and License](#copyright-and-license)
+
+## Versions
+
+* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
+* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
+* [CoreUI Free React.js Admin Template (Vite)](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free React.js Admin Template (Create React App)](https://github.com/coreui/coreui-free-react-admin-template-cra)
+* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
+
+## CoreUI PRO
+
+* 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
+* 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
+* 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
+* 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
+
+## CoreUI PRO React Admin Templates
+
+| Default Theme | Light Theme |
+| --- | --- |
+| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)|
+
+| Modern Theme | Bright Theme |
+| --- | --- |
+| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=modern) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=bright)|
+
+## Quick Start
+
+- [Download the latest release](https://github.com/coreui/coreui-free-react-admin-template/archive/refs/heads/main.zip)
+- Clone the repo: `git clone https://github.com/coreui/coreui-free-react-admin-template.git`
+
+### Installation
+
+``` bash
+$ npm install
+```
+
+or
+
+``` bash
+$ yarn install
+```
+
+### Basic usage
+
+``` bash
+# dev server with hot reload at http://localhost:3000
+$ npm start 
+```
+
+or 
+
+``` bash
+# dev server with hot reload at http://localhost:3000
+$ yarn start
+```
+
+Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.
+
+#### Build
+
+Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
+
+```bash
+# build for production with minification
+$ npm run build
+```
+
+or
+
+```bash
+# build for production with minification
+$ yarn build
+```
+
+## What's included
+
+Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+
+```
+coreui-free-react-admin-template
+├── public/          # static files
+│   ├── favicon.ico
+│   └── manifest.json
+│
+├── src/             # project root
+│   ├── assets/      # images, icons, etc.
+│   ├── components/  # common components - header, footer, sidebar, etc.
+│   ├── layouts/     # layout containers
+│   ├── scss/        # scss styles
+│   ├── views/       # application views
+│   ├── _nav.js      # sidebar navigation config
+│   ├── App.js
+│   ├── index.js
+│   ├── routes.js    # routes config
+│   └── store.js     # template state example 
+│
+├── index.html       # html template
+├── ...
+├── package.json
+├── ...
+└── vite.config.mjs  # vite config
+```
+
+## Documentation
+
+The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/docs/templates/installation/)
+
+## Components
+
+CoreUI React.js Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.
+
+- [React Accordion](https://coreui.io/react/docs/components/accordion/)
+- [React Alert](https://coreui.io/react/docs/components/alert/)
+- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO**
+- [React Avatar](https://coreui.io/react/docs/components/avatar/)
+- [React Badge](https://coreui.io/react/docs/components/badge/)
+- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/)
+- [React Button](https://coreui.io/react/docs/components/button/)
+- [React Button Group](https://coreui.io/react/docs/components/button-group/)
+- [React Callout](https://coreui.io/react/docs/components/callout/)
+- [React Card](https://coreui.io/react/docs/components/card/)
+- [React Carousel](https://coreui.io/react/docs/components/carousel/)
+- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/)
+- [React Close Button](https://coreui.io/react/docs/components/close-button/)
+- [React Collapse](https://coreui.io/react/docs/components/collapse/)
+- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO**
+- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO**
+- [React Dropdown](https://coreui.io/react/docs/components/dropdown/)
+- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/)
+- [React Footer](https://coreui.io/react/docs/components/footer/)
+- [React Header](https://coreui.io/react/docs/components/header/)
+- [React Image](https://coreui.io/react/docs/components/image/)
+- [React Input](https://coreui.io/react/docs/forms/input/)
+- [React Input Group](https://coreui.io/react/docs/forms/input-group/)
+- [React List Group](https://coreui.io/react/docs/components/list-group/)
+- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO**
+- [React Modal](https://coreui.io/react/docs/components/modal/)
+- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO**
+- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/)
+- [React Navbar](https://coreui.io/react/docs/components/navbar/)
+- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/)
+- [React One Time Password Input](https://coreui.io/react/docs/forms/one-time-password-input/) **PRO**
+- [React Pagination](https://coreui.io/react/docs/components/pagination/)
+- [React Password Input](https://coreui.io/react/docs/forms/password-input/) **PRO**
+- [React Placeholder](https://coreui.io/react/docs/components/placeholder/)
+- [React Popover](https://coreui.io/react/docs/components/popover/)
+- [React Progress](https://coreui.io/react/docs/components/progress/)
+- [React Radio](https://coreui.io/react/docs/forms/radio/)
+- [React Range](https://coreui.io/react/docs/forms/range/)
+- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO**
+- [React Rating](https://coreui.io/react/docs/forms/rating/)
+- [React Select](https://coreui.io/react/docs/forms/select/)
+- [React Sidebar](https://coreui.io/react/docs/components/sidebar/)
+- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**
+- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO**
+- [React Spinner](https://coreui.io/react/docs/components/spinner/)
+- [React Stepper](https://coreui.io/react/docs/forms/stepper/) **PRO**
+- [React Switch](https://coreui.io/react/docs/forms/switch/)
+- [React Table](https://coreui.io/react/docs/components/table/)
+- [React Textarea](https://coreui.io/react/docs/forms/textarea/)
+- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO**
+- [React Toast](https://coreui.io/react/docs/components/toast/)
+- [React Tooltip](https://coreui.io/react/docs/components/tooltip/)
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
+
+See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version.
+
+## Creators
+
+**Łukasz Holeczek**
+
+* <https://twitter.com/lukaszholeczek>
+* <https://github.com/mrholek>
+
+**Andrzej Kopański**
+
+* <https://github.com/xidedix>
+
+**CoreUI Team**
+
+* <https://twitter.com/core_ui>
+* <https://github.com/coreui>
+* <https://github.com/orgs/coreui/people>
+
+## Community
+
+Get updates on CoreUI's development and chat with the project maintainers and community members.
+
+- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
+- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
+
+## Support CoreUI Development
+
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=react&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
+
+## Copyright and License
+
+copyright 2025 creativeLabs Łukasz Holeczek.   
+
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,39 @@
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginReact from 'eslint-plugin-react'
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+
+export default [
+  { ignores: ['eslint.config.mjs'] },
+  {
+    ...eslintPluginReact.configs.flat.recommended,
+    ...eslintPluginReact.configs.flat['jsx-runtime'],
+    files: ['src/**/*.{js,jsx}'],
+    plugins: {
+      eslintPluginReact,
+      'react-hooks': eslintPluginReactHooks,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...eslintPluginReactHooks.configs.recommended.rules,
+    },
+  },
+  eslintPluginPrettierRecommended,
+]
--- a/index.html
+++ b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+* CoreUI Free React.js Admin Template
+* @version v5.5.0
+* @link https://coreui.io/product/free-react-admin-template/
+* Copyright (c) 2025 creativeLabs Łukasz Holeczek
+* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
+    <meta name="author" content="Łukasz Holeczek">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI Free React.js Admin Template</title>
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@coreui/coreui-free-react-admin-template",
+  "version": "5.5.0",
+  "description": "CoreUI Free React Admin Template",
+  "homepage": ".",
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
+  },
+  "license": "MIT",
+  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@coreui/chartjs": "^4.1.0",
+    "@coreui/coreui": "^5.5.0",
+    "@coreui/icons": "^3.0.1",
+    "@coreui/icons-react": "^2.3.0",
+    "@coreui/react": "^5.9.2",
+    "@coreui/react-chartjs": "^3.0.0",
+    "@coreui/utils": "^2.0.2",
+    "@popperjs/core": "^2.11.8",
+    "chart.js": "^4.5.1",
+    "classnames": "^2.5.1",
+    "core-js": "^3.47.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.11.0",
+    "redux": "5.0.1",
+    "simplebar-react": "^3.3.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "prettier": "3.7.4",
+    "sass": "^1.97.0",
+    "vite": "^7.3.0"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "CoreUI-React",
+  "name": "CoreUI-React sample",
+  "icons": [
+    {
+      "src": "./assets/img/favicon.png",
+      "sizes": "100x100",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,59 @@
+import React, { Suspense, useEffect } from 'react'
+import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+import { CSpinner, useColorModes } from '@coreui/react'
+import './scss/style.scss'
+
+// We use those styles to show code examples, you should remove them in your application.
+import './scss/examples.scss'
+
+// Containers
+const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
+
+// Pages
+const Login = React.lazy(() => import('./views/pages/login/Login'))
+const Register = React.lazy(() => import('./views/pages/register/Register'))
+const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
+const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
+
+const App = () => {
+  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const storedTheme = useSelector((state) => state.theme)
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+    if (theme) {
+      setColorMode(theme)
+    }
+
+    if (isColorModeSet()) {
+      return
+    }
+
+    setColorMode(storedTheme)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <HashRouter>
+      <Suspense
+        fallback={
+          <div className="pt-3 text-center">
+            <CSpinner color="primary" variant="grow" />
+          </div>
+        }
+      >
+        <Routes>
+          <Route exact path="/login" name="Login Page" element={<Login />} />
+          <Route exact path="/register" name="Register Page" element={<Register />} />
+          <Route exact path="/404" name="Page 404" element={<Page404 />} />
+          <Route exact path="/500" name="Page 500" element={<Page500 />} />
+          <Route path="*" name="Home" element={<DefaultLayout />} />
+        </Routes>
+      </Suspense>
+    </HashRouter>
+  )
+}
+
+export default App
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -0,0 +1,99 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilBrowser,
+  cilBoatAlt,
+  cilCalculator,
+  cilChartPie,
+  cilCursor,
+  cilDescription,
+  cilDrop,
+  cilExternalLink,
+  cilNotes,
+  cilPencil,
+  cilPuzzle,
+  cilSpeedometer,
+  cilStar,
+} from '@coreui/icons'
+import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
+
+const _nav = [
+  {
+    component: CNavItem,
+    name: 'Dashboard',
+    to: '/dashboard',
+    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    badge: {
+      color: 'info',
+      text: 'NEW',
+    },
+  },
+  {
+    component: CNavTitle,
+    name: 'Theme',
+  },
+  {
+    component: CNavItem,
+    name: 'Colors',
+    to: '/theme/colors',
+    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Typography',
+    to: '/theme/typography',
+    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavTitle,
+    name: 'Extras',
+  },
+  {
+    component: CNavGroup,
+    name: 'Pages',
+    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Login',
+        to: '/login',
+      },
+      {
+        component: CNavItem,
+        name: 'Register',
+        to: '/register',
+      },
+      {
+        component: CNavItem,
+        name: 'Error 404',
+        to: '/404',
+      },
+      {
+        component: CNavItem,
+        name: 'Error 500',
+        to: '/500',
+      },
+    ],
+  },
+  {
+    component: CNavItem,
+    name: 'Demo',
+    href: 'https://coreui.io/demos/react/5.5/free/?theme=light#/dashboard',
+    icon: <CIcon icon={cilBrowser} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Docs',
+    href: 'https://coreui.io/react/docs/templates/installation/',
+    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Src',
+    href: 'https://github.com/coreui/coreui-free-react-admin-template',
+    icon: <CIcon icon={cilBoatAlt} customClassName="nav-icon" />,
+  },
+]
+
+export default _nav
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -0,0 +1,18 @@
+export const logo = [
+  '599 116',
+  `<g>
+    <g fill="none" fill-rule="nonzero">
+      <g style="fill:#80d0ff;">
+        <path d="m358.773 79.151-8.768-20.736a.25.25 0 0 0-.255-.191h-9.985a.226.226 0 0 0-.256.255v20.543a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h12.544a9.979 9.979 0 0 1 7.744 3.23 12.204 12.204 0 0 1 2.944 8.546 12.439 12.439 0 0 1-2.24 7.584 9.37 9.37 0 0 1-6.08 3.744c-.17.086-.214.191-.127.32l8.704 20.608.064.255c0 .342-.192.512-.576.512h-1.152a.703.703 0 0 1-.705-.51Zm-19.264-41.793v18.496a.226.226 0 0 0 .256.257h10.304a7.669 7.669 0 0 0 6.017-2.592 9.878 9.878 0 0 0 2.303-6.816 10.286 10.286 0 0 0-2.272-6.976 7.601 7.601 0 0 0-6.048-2.624h-10.304a.226.226 0 0 0-.256.255ZM398.082 37.102H378.05a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.257h13.824a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64H378.05a.226.226 0 0 0-.256.256v18.56a.226.226 0 0 0 .256.256h20.032a.567.567 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64h-22.144a.566.566 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.144a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM435.802 79.151l-2.431-8.832a.296.296 0 0 0-.32-.192h-16.768a.295.295 0 0 0-.32.192l-2.368 8.768a.658.658 0 0 1-.704.576h-1.216a.588.588 0 0 1-.48-.191.582.582 0 0 1-.096-.513l12.031-43.584a.644.644 0 0 1 .704-.512h1.6a.644.644 0 0 1 .704.512l12.16 43.584.065.192c0 .342-.214.512-.64.512h-1.217a.643.643 0 0 1-.704-.512ZM416.7 67.92a.303.303 0 0 0 .223.096h15.489a.304.304 0 0 0 .223-.096c.065-.065.075-.117.033-.16l-7.873-28.928c-.043-.085-.085-.128-.127-.128-.042 0-.086.043-.128.128l-7.872 28.928c-.043.043-.033.095.032.16ZM453.357 76.911a11.637 11.637 0 0 1-3.328-8.704V46.19a11.414 11.414 0 0 1 3.36-8.575 12.09 12.09 0 0 1 8.8-3.265 12.253 12.253 0 0 1 8.865 3.233 11.39 11.39 0 0 1 3.36 8.607v.64a.566.566 0 0 1-.641.641l-1.28.064c-.427 0-.64-.192-.64-.576v-.833a9.287 9.287 0 0 0-2.656-6.912 10.67 10.67 0 0 0-14.016 0 9.284 9.284 0 0 0-2.656 6.913v22.272a9.282 9.282 0 0 0 2.656 6.912 10.673 10.673 0 0 0 14.016 0 9.286 9.286 0 0 0 2.656-6.912v-.768c0-.384.213-.576.64-.575l1.28.063a.566.566 0 0 1 .64.64v.511a11.498 11.498 0 0 1-3.36 8.64 13.626 13.626 0 0 1-17.696 0v.001ZM511.193 35.503v.96a.565.565 0 0 1-.64.64H499.8a.226.226 0 0 0-.256.256v41.663a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64V37.357a.227.227 0 0 0-.256-.255h-10.176a.565.565 0 0 1-.64-.64v-.96a.566.566 0 0 1 .64-.64h23.936a.566.566 0 0 1 .64.64ZM518.822 78.51a2.835 2.835 0 0 1-.8-2.047 2.923 2.923 0 0 1 .8-2.112c.544-.56 1.3-.862 2.08-.832a2.847 2.847 0 0 1 2.944 2.944c.03.78-.273 1.536-.832 2.08a2.921 2.921 0 0 1-2.112.8 2.754 2.754 0 0 1-2.08-.832ZM539.16 77.007a11.31 11.31 0 0 1-3.2-8.416v-5.44a.566.566 0 0 1 .64-.64h1.217a.567.567 0 0 1 .64.64v5.504a9.144 9.144 0 0 0 2.528 6.72 8.974 8.974 0 0 0 6.687 2.56 8.79 8.79 0 0 0 9.28-9.28V35.504a.565.565 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64V68.59a11.252 11.252 0 0 1-3.233 8.416 13.062 13.062 0 0 1-17.055 0ZM577.106 77.102a10.482 10.482 0 0 1-3.36-8.127v-1.792a.565.565 0 0 1 .64-.64h1.088a.566.566 0 0 1 .64.64v1.6a8.544 8.544 0 0 0 2.752 6.655 10.536 10.536 0 0 0 7.36 2.496 9.876 9.876 0 0 0 6.976-2.367 8.215 8.215 0 0 0 2.56-6.336 8.397 8.397 0 0 0-1.12-4.416 11.383 11.383 0 0 0-3.328-3.392 71.626 71.626 0 0 0-6.176-3.712 71.302 71.302 0 0 1-6.24-3.84 12.174 12.174 0 0 1-3.424-3.68 10.257 10.257 0 0 1-1.28-5.345 9.86 9.86 0 0 1 3.072-7.744 12.012 12.012 0 0 1 8.32-2.752c3.796 0 6.783 1.035 8.96 3.105a10.823 10.823 0 0 1 3.264 8.224v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.471a8.865 8.865 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.232-2.528 9.365 9.365 0 0 0-6.528 2.144 7.822 7.822 0 0 0-2.368 6.112 7.8 7.8 0 0 0 1.024 4.16 10.376 10.376 0 0 0 3.008 3.04 62.829 62.829 0 0 0 5.952 3.488 71.058 71.058 0 0 1 6.72 4.256 13.454 13.454 0 0 1 3.648 3.936 10.049 10.049 0 0 1 1.28 5.184 10.714 10.714 0 0 1-3.264 8.191c-2.175 2.05-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z"/>
+      </g>
+      <g style="fill:currentColor;">
+        <path d="m96.59 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z"/>
+        <path d="M74.612 71.005h-2.866c-.673 0-1.335.17-1.925.493l-17.28 9.485L32.59 69.465V46.487L52.54 34.97l17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.383 27.952a8.039 8.039 0 0 0-7.842.09L28.59 39.56a8.025 8.025 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-1.999-2Z"/>
+        <g transform="translate(118 34)">
+          <path d="M51.335.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.67 8.421a7.01 7.01 0 0 1 7.867 6.075.99.99 0 0 0 .985.865h6.03a1.01 1.01 0 0 0 .998-1.097C29.945 6.14 22.971-.02 14.834.381 6.751.932.504 7.696.59 15.796v16.407C.503 40.305 6.752 47.068 14.835 47.62c8.137.401 15.11-5.76 15.716-13.884a1.01 1.01 0 0 0-.999-1.097h-6.03a.99.99 0 0 0-.984.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.08-7.184v-16.79a7.164 7.164 0 0 1 6.08-7.184ZM97.513 27.928a12.158 12.158 0 0 0 7.184-11.077v-3.702C104.697 6.44 99.257 1 92.547 1H75.59a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414l-8.025-17.658Zm-.816-11.077A4.154 4.154 0 0 1 92.547 21h-9.85V9h9.85a4.154 4.154 0 0 1 4.15 4.15v3.7ZM139.59 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.59 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z"/>
+          <rect width="8" height="38" x="186.59" y="1" rx="1"/>
+        </g>
+      </g>
+    </g>
+  </g>`,
+]
--- a/src/assets/brand/sygnet.js
+++ b/src/assets/brand/sygnet.js
@@ -0,0 +1,7 @@
+export const sygnet = [
+  '102 115',
+  `<g style="fill: currentColor">
+    <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"/>
+    <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"/>
+  </g>`,
+]
--- a/src/assets/images/angular.jpg
+++ b/src/assets/images/angular.jpg
--- a/src/assets/images/avatars/1.jpg
+++ b/src/assets/images/avatars/1.jpg
--- a/src/assets/images/avatars/2.jpg
+++ b/src/assets/images/avatars/2.jpg
--- a/src/assets/images/avatars/3.jpg
+++ b/src/assets/images/avatars/3.jpg
--- a/src/assets/images/avatars/4.jpg
+++ b/src/assets/images/avatars/4.jpg
--- a/src/assets/images/avatars/5.jpg
+++ b/src/assets/images/avatars/5.jpg
--- a/src/assets/images/avatars/6.jpg
+++ b/src/assets/images/avatars/6.jpg
--- a/src/assets/images/avatars/7.jpg
+++ b/src/assets/images/avatars/7.jpg
--- a/src/assets/images/avatars/8.jpg
+++ b/src/assets/images/avatars/8.jpg
--- a/src/assets/images/avatars/9.jpg
+++ b/src/assets/images/avatars/9.jpg
--- a/src/assets/images/components.webp
+++ b/src/assets/images/components.webp
--- a/src/assets/images/icons.webp
+++ b/src/assets/images/icons.webp
--- a/src/assets/images/react.jpg
+++ b/src/assets/images/react.jpg
--- a/src/assets/images/vue.jpg
+++ b/src/assets/images/vue.jpg
--- a/src/components/AppBreadcrumb.js
+++ b/src/components/AppBreadcrumb.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+
+import routes from '../routes'
+
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+const AppBreadcrumb = () => {
+  const currentLocation = useLocation().pathname
+
+  const getRouteName = (pathname, routes) => {
+    const currentRoute = routes.find((route) => route.path === pathname)
+    return currentRoute ? currentRoute.name : false
+  }
+
+  const getBreadcrumbs = (location) => {
+    const breadcrumbs = []
+    location.split('/').reduce((prev, curr, index, array) => {
+      const currentPathname = `${prev}/${curr}`
+      const routeName = getRouteName(currentPathname, routes)
+      routeName &&
+        breadcrumbs.push({
+          pathname: currentPathname,
+          name: routeName,
+          active: index + 1 === array.length ? true : false,
+        })
+      return currentPathname
+    })
+    return breadcrumbs
+  }
+
+  const breadcrumbs = getBreadcrumbs(currentLocation)
+
+  return (
+    <CBreadcrumb className="my-0">
+      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+      {breadcrumbs.map((breadcrumb, index) => {
+        return (
+          <CBreadcrumbItem
+            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
+            key={index}
+          >
+            {breadcrumb.name}
+          </CBreadcrumbItem>
+        )
+      })}
+    </CBreadcrumb>
+  )
+}
+
+export default React.memo(AppBreadcrumb)
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -0,0 +1,33 @@
+import React, { Suspense } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+import { CContainer, CSpinner } from '@coreui/react'
+
+// routes config
+import routes from '../routes'
+
+const AppContent = () => {
+  return (
+    <CContainer className="px-4" lg>
+      <Suspense fallback={<CSpinner color="primary" />}>
+        <Routes>
+          {routes.map((route, idx) => {
+            return (
+              route.element && (
+                <Route
+                  key={idx}
+                  path={route.path}
+                  exact={route.exact}
+                  name={route.name}
+                  element={<route.element />}
+                />
+              )
+            )
+          })}
+          <Route path="/" element={<Navigate to="dashboard" replace />} />
+        </Routes>
+      </Suspense>
+    </CContainer>
+  )
+}
+
+export default React.memo(AppContent)
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CFooter } from '@coreui/react'
+
+const AppFooter = () => {
+  return (
+    <CFooter className="px-4">
+      <div>
+        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
+          CoreUI
+        </a>
+        <span className="ms-1">&copy; 2025 creativeLabs.</span>
+      </div>
+      <div className="ms-auto">
+        <span className="me-1">Powered by</span>
+        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">
+          CoreUI React Admin &amp; Dashboard Template
+        </a>
+      </div>
+    </CFooter>
+  )
+}
+
+export default React.memo(AppFooter)
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -0,0 +1,131 @@
+import React, { useEffect, useRef } from 'react'
+import { NavLink } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  CContainer,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CHeader,
+  CHeaderNav,
+  CHeaderToggler,
+  CNavLink,
+  CNavItem,
+  useColorModes,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilContrast,
+  cilEnvelopeOpen,
+  cilList,
+  cilMenu,
+  cilMoon,
+  cilSun,
+} from '@coreui/icons'
+
+import { AppBreadcrumb } from './index'
+import { AppHeaderDropdown } from './header/index'
+
+const AppHeader = () => {
+  const headerRef = useRef()
+  const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+
+  const dispatch = useDispatch()
+  const sidebarShow = useSelector((state) => state.sidebarShow)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      headerRef.current &&
+        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
+    }
+
+    document.addEventListener('scroll', handleScroll)
+    return () => document.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
+      <CContainer className="border-bottom px-4" fluid>
+        <CHeaderToggler
+          onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          style={{ marginInlineStart: '-14px' }}
+        >
+          <CIcon icon={cilMenu} size="lg" />
+        </CHeaderToggler>
+        <CHeaderNav className="d-none d-md-flex">
+          <AppBreadcrumb />
+        </CHeaderNav>
+        <CHeaderNav className="ms-auto">
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilBell} size="lg" />
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilList} size="lg" />
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilEnvelopeOpen} size="lg" />
+            </CNavLink>
+          </CNavItem>
+        </CHeaderNav>
+        <CHeaderNav>
+          <li className="nav-item py-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <CDropdown variant="nav-item" placement="bottom-end">
+            <CDropdownToggle caret={false}>
+              {colorMode === 'dark' ? (
+                <CIcon icon={cilMoon} size="lg" />
+              ) : colorMode === 'auto' ? (
+                <CIcon icon={cilContrast} size="lg" />
+              ) : (
+                <CIcon icon={cilSun} size="lg" />
+              )}
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem
+                active={colorMode === 'light'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('light')}
+              >
+                <CIcon className="me-2" icon={cilSun} size="lg" /> Light
+              </CDropdownItem>
+              <CDropdownItem
+                active={colorMode === 'dark'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('dark')}
+              >
+                <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
+              </CDropdownItem>
+              <CDropdownItem
+                active={colorMode === 'auto'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('auto')}
+              >
+                <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
+              </CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <li className="nav-item py-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <AppHeaderDropdown />
+        </CHeaderNav>
+      </CContainer>
+    </CHeader>
+  )
+}
+
+export default AppHeader
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import {
+  CCloseButton,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarFooter,
+  CSidebarHeader,
+  CSidebarToggler,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+import { AppSidebarNav } from './AppSidebarNav'
+
+import { logo } from 'src/assets/brand/logo'
+import { sygnet } from 'src/assets/brand/sygnet'
+
+// sidebar nav config
+import navigation from '../_nav'
+
+const AppSidebar = () => {
+  const dispatch = useDispatch()
+  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
+  const sidebarShow = useSelector((state) => state.sidebarShow)
+
+  return (
+    <CSidebar
+      className="border-end"
+      colorScheme="dark"
+      position="fixed"
+      unfoldable={unfoldable}
+      visible={sidebarShow}
+      onVisibleChange={(visible) => {
+        dispatch({ type: 'set', sidebarShow: visible })
+      }}
+    >
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand to="/">
+          <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
+          <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
+        </CSidebarBrand>
+        <CCloseButton
+          className="d-lg-none"
+          dark
+          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
+        />
+      </CSidebarHeader>
+      <AppSidebarNav items={navigation} />
+      <CSidebarFooter className="border-top d-none d-lg-flex">
+        <CSidebarToggler
+          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+        />
+      </CSidebarFooter>
+    </CSidebar>
+  )
+}
+
+export default React.memo(AppSidebar)
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
+
+export const AppSidebarNav = ({ items }) => {
+  const navLink = (name, icon, badge, indent = false) => {
+    return (
+      <>
+        {icon
+          ? icon
+          : indent && (
+              <span className="nav-icon">
+                <span className="nav-icon-bullet"></span>
+              </span>
+            )}
+        {name && name}
+        {badge && (
+          <CBadge color={badge.color} className="ms-auto" size="sm">
+            {badge.text}
+          </CBadge>
+        )}
+      </>
+    )
+  }
+
+  const navItem = (item, index, indent = false) => {
+    const { component, name, badge, icon, ...rest } = item
+    const Component = component
+    return (
+      <Component as="div" key={index}>
+        {rest.to || rest.href ? (
+          <CNavLink
+            {...(rest.to && { as: NavLink })}
+            {...(rest.href && { target: '_blank', rel: 'noopener noreferrer' })}
+            {...rest}
+          >
+            {navLink(name, icon, badge, indent)}
+          </CNavLink>
+        ) : (
+          navLink(name, icon, badge, indent)
+        )}
+      </Component>
+    )
+  }
+
+  const navGroup = (item, index) => {
+    const { component, name, icon, items, to, ...rest } = item
+    const Component = component
+    return (
+      <Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
+        {items?.map((item, index) =>
+          item.items ? navGroup(item, index) : navItem(item, index, true),
+        )}
+      </Component>
+    )
+  }
+
+  return (
+    <CSidebarNav as={SimpleBar}>
+      {items &&
+        items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
+    </CSidebarNav>
+  )
+}
+
+AppSidebarNav.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+}
--- a/src/components/DocsComponents.js
+++ b/src/components/DocsComponents.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentsImg from 'src/assets/images/components.webp'
+
+const DocsComponents = (props) => (
+  <div className="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          className="img-fluid"
+          src={ComponentsImg}
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s{' '}
+        <strong>
+          the only open-source React dashboard built on a professional, enterprise-grade UI
+          Components Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-primary text-nowrap text-white"
+          href={`https://coreui.io/react/docs/${props.href}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+DocsComponents.propTypes = {
+  href: PropTypes.string,
+}
+
+export default DocsComponents
--- a/src/components/DocsExample.js
+++ b/src/components/DocsExample.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilCode, cilMediaPlay } from '@coreui/icons'
+
+const DocsExample = (props) => {
+  const { children, href, tabContentClassName } = props
+
+  const _href = `https://coreui.io/react/docs/${href}`
+
+  return (
+    <div className="example">
+      <CNav variant="underline-border">
+        <CNavItem>
+          <CNavLink href="#" active>
+            <CIcon icon={cilMediaPlay} className="me-2" />
+            Preview
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href={_href} target="_blank">
+            <CIcon icon={cilCode} className="me-2" />
+            Code
+          </CNavLink>
+        </CNavItem>
+      </CNav>
+      <CTabContent className={`rounded-bottom ${tabContentClassName ? tabContentClassName : ''}`}>
+        <CTabPane className="p-3 preview" visible>
+          {children}
+        </CTabPane>
+      </CTabContent>
+    </div>
+  )
+}
+
+DocsExample.propTypes = {
+  children: PropTypes.node,
+  href: PropTypes.string,
+  tabContentClassName: PropTypes.string,
+}
+
+export default React.memo(DocsExample)
--- a/src/components/DocsIcons.js
+++ b/src/components/DocsIcons.js
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconsImg from 'src/assets/images/icons.webp'
+
+const DocsIcons = () => (
+  <div className="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img className="img-fluid" src={IconsImg} width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/react/docs/components/icon/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+export default DocsIcons
--- a/src/components/DocsLink.js
+++ b/src/components/DocsLink.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = (props) => {
+  const { href, name, text, ...rest } = props
+
+  const _href = name ? `https://coreui.io/react/docs/components/${name}` : href
+
+  return (
+    <div className="float-end">
+      <CLink
+        {...rest}
+        href={_href}
+        rel="noreferrer noopener"
+        target="_blank"
+        className="card-header-action"
+      >
+        <small className="text-body-secondary">{text || 'docs'}</small>
+      </CLink>
+    </div>
+  )
+}
+
+DocsLink.propTypes = {
+  href: PropTypes.string,
+  name: PropTypes.string,
+  text: PropTypes.string,
+}
+
+export default React.memo(DocsLink)
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  CAvatar,
+  CBadge,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownHeader,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+import {
+  cilBell,
+  cilCreditCard,
+  cilCommentSquare,
+  cilEnvelopeOpen,
+  cilFile,
+  cilLockLocked,
+  cilSettings,
+  cilTask,
+  cilUser,
+} from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+
+import avatar8 from './../../assets/images/avatars/8.jpg'
+
+const AppHeaderDropdown = () => {
+  return (
+    <CDropdown variant="nav-item">
+      <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
+        <CAvatar src={avatar8} size="md" />
+      </CDropdownToggle>
+      <CDropdownMenu className="pt-0" placement="bottom-end">
+        <CDropdownHeader className="bg-body-secondary fw-semibold mb-2">Account</CDropdownHeader>
+        <CDropdownItem href="#">
+          <CIcon icon={cilBell} className="me-2" />
+          Updates
+          <CBadge color="info" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilEnvelopeOpen} className="me-2" />
+          Messages
+          <CBadge color="success" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilTask} className="me-2" />
+          Tasks
+          <CBadge color="danger" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilCommentSquare} className="me-2" />
+          Comments
+          <CBadge color="warning" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
+        <CDropdownItem href="#">
+          <CIcon icon={cilUser} className="me-2" />
+          Profile
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilSettings} className="me-2" />
+          Settings
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilCreditCard} className="me-2" />
+          Payments
+          <CBadge color="secondary" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <CIcon icon={cilFile} className="me-2" />
+          Projects
+          <CBadge color="primary" className="ms-2">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">
+          <CIcon icon={cilLockLocked} className="me-2" />
+          Lock Account
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default AppHeaderDropdown
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -0,0 +1,3 @@
+import AppHeaderDropdown from './AppHeaderDropdown'
+
+export { AppHeaderDropdown }
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,23 @@
+import AppBreadcrumb from './AppBreadcrumb'
+import AppContent from './AppContent'
+import AppFooter from './AppFooter'
+import AppHeader from './AppHeader'
+import AppHeaderDropdown from './header/AppHeaderDropdown'
+import AppSidebar from './AppSidebar'
+import DocsComponents from './DocsComponents'
+import DocsIcons from './DocsIcons'
+import DocsLink from './DocsLink'
+import DocsExample from './DocsExample'
+
+export {
+  AppBreadcrumb,
+  AppContent,
+  AppFooter,
+  AppHeader,
+  AppHeaderDropdown,
+  AppSidebar,
+  DocsComponents,
+  DocsIcons,
+  DocsLink,
+  DocsExample,
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+import 'core-js'
+
+import App from './App'
+import store from './store'
+
+createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+)
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
+
+const DefaultLayout = () => {
+  return (
+    <div>
+      <AppSidebar />
+      <div className="wrapper d-flex flex-column min-vh-100">
+        <AppHeader />
+        <div className="body flex-grow-1">
+          <AppContent />
+        </div>
+        <AppFooter />
+      </div>
+    </div>
+  )
+}
+
+export default DefaultLayout
--- a/src/routes.js
+++ b/src/routes.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
+const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
+const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
+
+const routes = [
+  { path: '/', exact: true, name: 'Home' },
+  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+  { path: '/theme', name: 'Theme', element: Colors, exact: true },
+  { path: '/theme/colors', name: 'Colors', element: Colors },
+  { path: '/theme/typography', name: 'Typography', element: Typography },
+]
+
+export default routes
--- a/src/scss/examples.scss
+++ b/src/scss/examples.scss
@@ -0,0 +1,116 @@
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+@use "@coreui/coreui/scss/variables" as * with (
+  $enable-deprecation-messages: false
+);
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
+.example {
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  .tab-content {
+    background-color: var(--#{$prefix}tertiary-bg);
+  }
+
+  & + p {
+    margin-top: 1.5rem;
+  }
+
+  // Components examples
+  .preview {
+    + p {
+      margin-top: 2rem;
+    }
+
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
+    }
+
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: 1rem;
+    }
+
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
+
+    // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
+      margin-top: .5rem;
+    }
+
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
+
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
+
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: -1rem -1rem 1rem;
+    }
+
+    .fixed-bottom {
+      position: static;
+      margin: 1rem -1rem -1rem;
+    }
+
+    @include media-breakpoint-up(sm) {
+      .fixed-top,
+      .sticky-top {
+        margin: -1.5rem -1.5rem 1rem;
+      }
+      .fixed-bottom {
+        margin: 1rem -1.5rem -1.5rem;
+      }
+    }
+
+    // Pagination
+    .pagination {
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
+  }
+}
+
+@include color-mode(dark) {
+  .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg);
+  }
+}
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -0,0 +1,67 @@
+@use "@coreui/coreui/scss/coreui" as * with ( 
+  $enable-deprecation-messages: false,
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
+
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    margin-inline-end: auto;
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
+
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
+  }
+}
--- a/src/scss/vendors/simplebar.scss
+++ b/src/scss/vendors/simplebar.scss
@@ -0,0 +1,5 @@
+.simplebar-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,18 @@
+import { legacy_createStore as createStore } from 'redux'
+
+const initialState = {
+  sidebarShow: true,
+  theme: 'light',
+}
+
+const changeState = (state = initialState, { type, ...rest }) => {
+  switch (type) {
+    case 'set':
+      return { ...state, ...rest }
+    default:
+      return state
+  }
+}
+
+const store = createStore(changeState)
+export default store
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -0,0 +1,211 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import {
+  CAvatar,
+  CButton,
+  CButtonGroup,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCol,
+  CProgress,
+  CRow,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import {
+  cibCcAmex,
+  cibCcApplePay,
+  cibCcMastercard,
+  cibCcPaypal,
+  cibCcStripe,
+  cibCcVisa,
+  cibGoogle,
+  cibFacebook,
+  cibLinkedin,
+  cifBr,
+  cifEs,
+  cifFr,
+  cifIn,
+  cifPl,
+  cifUs,
+  cibTwitter,
+  cilCloudDownload,
+  cilPeople,
+  cilUser,
+  cilUserFemale,
+} from '@coreui/icons'
+
+import avatar1 from 'src/assets/images/avatars/1.jpg'
+import avatar2 from 'src/assets/images/avatars/2.jpg'
+import avatar3 from 'src/assets/images/avatars/3.jpg'
+import avatar4 from 'src/assets/images/avatars/4.jpg'
+import avatar5 from 'src/assets/images/avatars/5.jpg'
+import avatar6 from 'src/assets/images/avatars/6.jpg'
+
+import MainChart from './MainChart'
+
+const Dashboard = () => {
+  const tableExample = [
+    {
+      avatar: { src: avatar1, status: 'success' },
+      user: {
+        name: 'Yiorgos Avraamu',
+        new: true,
+        registered: 'Jan 1, 2023',
+      },
+      country: { name: 'USA', flag: cifUs },
+      usage: {
+        value: 50,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'success',
+      },
+      payment: { name: 'Mastercard', icon: cibCcMastercard },
+      activity: '10 sec ago',
+    },
+    {
+      avatar: { src: avatar2, status: 'danger' },
+      user: {
+        name: 'Avram Tarasios',
+        new: false,
+        registered: 'Jan 1, 2023',
+      },
+      country: { name: 'Brazil', flag: cifBr },
+      usage: {
+        value: 22,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'info',
+      },
+      payment: { name: 'Visa', icon: cibCcVisa },
+      activity: '5 minutes ago',
+    },
+    {
+      avatar: { src: avatar3, status: 'warning' },
+      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
+      country: { name: 'India', flag: cifIn },
+      usage: {
+        value: 74,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'warning',
+      },
+      payment: { name: 'Stripe', icon: cibCcStripe },
+      activity: '1 hour ago',
+    },
+    {
+      avatar: { src: avatar4, status: 'secondary' },
+      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
+      country: { name: 'France', flag: cifFr },
+      usage: {
+        value: 98,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'danger',
+      },
+      payment: { name: 'PayPal', icon: cibCcPaypal },
+      activity: 'Last month',
+    },
+    {
+      avatar: { src: avatar5, status: 'success' },
+      user: {
+        name: 'Agapetus Tadeáš',
+        new: true,
+        registered: 'Jan 1, 2023',
+      },
+      country: { name: 'Spain', flag: cifEs },
+      usage: {
+        value: 22,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'primary',
+      },
+      payment: { name: 'Google Wallet', icon: cibCcApplePay },
+      activity: 'Last week',
+    },
+    {
+      avatar: { src: avatar6, status: 'danger' },
+      user: {
+        name: 'Friderik Dávid',
+        new: true,
+        registered: 'Jan 1, 2023',
+      },
+      country: { name: 'Poland', flag: cifPl },
+      usage: {
+        value: 43,
+        period: 'Jun 11, 2023 - Jul 10, 2023',
+        color: 'success',
+      },
+      payment: { name: 'Amex', icon: cibCcAmex },
+      activity: 'Last week',
+    },
+  ]
+
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>Traffic {' & '} Sales</CCardHeader>
+        <CCardBody>
+          <CTable align="middle" className="mb-0 border" hover responsive>
+            <CTableHead className="text-nowrap">
+              <CTableRow>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  <CIcon icon={cilPeople} />
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  Country
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary text-center">
+                  Payment Method
+                </CTableHeaderCell>
+                <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
+              </CTableRow>
+            </CTableHead>
+            <CTableBody>
+              {tableExample.map((item, index) => (
+                <CTableRow v-for="item in tableItems" key={index}>
+                  <CTableDataCell className="text-center">
+                    <CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div>{item.user.name}</div>
+                    <div className="small text-body-secondary text-nowrap">
+                      <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
+                      {item.user.registered}
+                    </div>
+                  </CTableDataCell>
+                  <CTableDataCell className="text-center">
+                    <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div className="d-flex justify-content-between text-nowrap">
+                      <div className="fw-semibold">{item.usage.value}%</div>
+                      <div className="ms-3">
+                        <small className="text-body-secondary">{item.usage.period}</small>
+                      </div>
+                    </div>
+                    <CProgress thin color={item.usage.color} value={item.usage.value} />
+                  </CTableDataCell>
+                  <CTableDataCell className="text-center">
+                    <CIcon size="xl" icon={item.payment.icon} />
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    <div className="small text-body-secondary text-nowrap">Last login</div>
+                    <div className="fw-semibold text-nowrap">{item.activity}</div>
+                  </CTableDataCell>
+                </CTableRow>
+              ))}
+            </CTableBody>
+          </CTable>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Dashboard
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -0,0 +1,137 @@
+import React, { useEffect, useRef } from 'react'
+
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const MainChart = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      if (chartRef.current) {
+        setTimeout(() => {
+          chartRef.current.options.scales.x.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.options.scales.y.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.update()
+        })
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+    return () =>
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+  }, [chartRef])
+
+  const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min
+
+  return (
+    <>
+      <CChartLine
+        ref={chartRef}
+        style={{ height: '300px', marginTop: '40px' }}
+        data={{
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+              borderColor: getStyle('--cui-info'),
+              pointHoverBackgroundColor: getStyle('--cui-info'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
+              fill: true,
+            },
+            {
+              label: 'My Second dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-success'),
+              pointHoverBackgroundColor: getStyle('--cui-success'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
+            },
+            {
+              label: 'My Third dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-danger'),
+              pointHoverBackgroundColor: getStyle('--cui-danger'),
+              borderWidth: 1,
+              borderDash: [8, 5],
+              data: [65, 65, 65, 65, 65, 65, 65],
+            },
+          ],
+        }}
+        options={{
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            },
+          },
+          scales: {
+            x: {
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+                drawOnChartArea: false,
+              },
+              ticks: {
+                color: getStyle('--cui-body-color'),
+              },
+            },
+            y: {
+              beginAtZero: true,
+              border: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              max: 250,
+              ticks: {
+                color: getStyle('--cui-body-color'),
+                maxTicksLimit: 5,
+                stepSize: Math.ceil(250 / 5),
+              },
+            },
+          },
+          elements: {
+            line: {
+              tension: 0.4,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+              hoverBorderWidth: 3,
+            },
+          },
+        }}
+      />
+    </>
+  )
+}
+
+export default MainChart
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCol,
+  CContainer,
+  CForm,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+  CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilLockLocked, cilUser } from '@coreui/icons'
+
+const Login = () => {
+  return (
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md={8}>
+            <CCardGroup>
+              <CCard className="p-4">
+                <CCardBody>
+                  <CForm>
+                    <h1>Login</h1>
+                    <p className="text-body-secondary">Sign In to your account</p>
+                    <CInputGroup className="mb-3">
+                      <CInputGroupText>
+                        <CIcon icon={cilUser} />
+                      </CInputGroupText>
+                      <CFormInput placeholder="Username" autoComplete="username" />
+                    </CInputGroup>
+                    <CInputGroup className="mb-4">
+                      <CInputGroupText>
+                        <CIcon icon={cilLockLocked} />
+                      </CInputGroupText>
+                      <CFormInput
+                        type="password"
+                        placeholder="Password"
+                        autoComplete="current-password"
+                      />
+                    </CInputGroup>
+                    <CRow>
+                      <CCol xs={6}>
+                        <CButton color="primary" className="px-4">
+                          Login
+                        </CButton>
+                      </CCol>
+                      <CCol xs={6} className="text-right">
+                        <CButton color="link" className="px-0">
+                          Forgot password?
+                        </CButton>
+                      </CCol>
+                    </CRow>
+                  </CForm>
+                </CCardBody>
+              </CCard>
+              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
+                <CCardBody className="text-center">
+                  <div>
+                    <h2>Sign up</h2>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                    <Link to="/register">
+                      <CButton color="primary" className="mt-3" active tabIndex={-1}>
+                        Register Now!
+                      </CButton>
+                    </Link>
+                  </div>
+                </CCardBody>
+              </CCard>
+            </CCardGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Login
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CContainer,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+  CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilMagnifyingGlass } from '@coreui/icons'
+
+const Page404 = () => {
+  return (
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md={6}>
+            <div className="clearfix">
+              <h1 className="float-start display-3 me-4">404</h1>
+              <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
+              <p className="text-body-secondary float-start">
+                The page you are looking for was not found.
+              </p>
+            </div>
+            <CInputGroup className="input-prepend">
+              <CInputGroupText>
+                <CIcon icon={cilMagnifyingGlass} />
+              </CInputGroupText>
+              <CFormInput type="text" placeholder="What are you looking for?" />
+              <CButton color="info">Search</CButton>
+            </CInputGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Page404
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CContainer,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+  CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilMagnifyingGlass } from '@coreui/icons'
+
+const Page500 = () => {
+  return (
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md={6}>
+            <span className="clearfix">
+              <h1 className="float-start display-3 me-4">500</h1>
+              <h4 className="pt-3">Houston, we have a problem!</h4>
+              <p className="text-body-secondary float-start">
+                The page you are looking for is temporarily unavailable.
+              </p>
+            </span>
+            <CInputGroup className="input-prepend">
+              <CInputGroupText>
+                <CIcon icon={cilMagnifyingGlass} />
+              </CInputGroupText>
+              <CFormInput type="text" placeholder="What are you looking for?" />
+              <CButton color="info">Search</CButton>
+            </CInputGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Page500
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCol,
+  CContainer,
+  CForm,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+  CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilLockLocked, cilUser } from '@coreui/icons'
+
+const Register = () => {
+  return (
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md={9} lg={7} xl={6}>
+            <CCard className="mx-4">
+              <CCardBody className="p-4">
+                <CForm>
+                  <h1>Register</h1>
+                  <p className="text-body-secondary">Create your account</p>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupText>
+                      <CIcon icon={cilUser} />
+                    </CInputGroupText>
+                    <CFormInput placeholder="Username" autoComplete="username" />
+                  </CInputGroup>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupText>@</CInputGroupText>
+                    <CFormInput placeholder="Email" autoComplete="email" />
+                  </CInputGroup>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupText>
+                      <CIcon icon={cilLockLocked} />
+                    </CInputGroupText>
+                    <CFormInput
+                      type="password"
+                      placeholder="Password"
+                      autoComplete="new-password"
+                    />
+                  </CInputGroup>
+                  <CInputGroup className="mb-4">
+                    <CInputGroupText>
+                      <CIcon icon={cilLockLocked} />
+                    </CInputGroupText>
+                    <CFormInput
+                      type="password"
+                      placeholder="Repeat password"
+                      autoComplete="new-password"
+                    />
+                  </CInputGroup>
+                  <div className="d-grid">
+                    <CButton color="success">Create Account</CButton>
+                  </div>
+                </CForm>
+              </CCardBody>
+            </CCard>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Register
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useState, createRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
+import { rgbToHex } from '@coreui/utils'
+import { DocsLink } from 'src/components'
+
+const ThemeView = () => {
+  const [color, setColor] = useState('rgb(255, 255, 255)')
+  const ref = createRef()
+
+  useEffect(() => {
+    const el = ref.current.parentNode.firstChild
+    const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
+    setColor(varColor)
+  }, [ref])
+
+  return (
+    <table className="table w-100" ref={ref}>
+      <tbody>
+        <tr>
+          <td className="text-body-secondary">HEX:</td>
+          <td className="font-weight-bold">{rgbToHex(color)}</td>
+        </tr>
+        <tr>
+          <td className="text-body-secondary">RGB:</td>
+          <td className="font-weight-bold">{color}</td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
+
+const ThemeColor = ({ className, children }) => {
+  const classes = classNames(className, 'theme-color w-75 rounded mb-3')
+  return (
+    <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
+      <div className={classes} style={{ paddingTop: '75%' }}></div>
+      {children}
+      <ThemeView />
+    </CCol>
+  )
+}
+
+ThemeColor.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+const Colors = () => {
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>
+          Theme colors
+          <DocsLink href="https://coreui.io/docs/utilities/colors/" />
+        </CCardHeader>
+        <CCardBody>
+          <CRow>
+            <ThemeColor className="bg-primary">
+              <h6>Brand Primary Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-secondary">
+              <h6>Brand Secondary Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-success">
+              <h6>Brand Success Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-danger">
+              <h6>Brand Danger Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-warning">
+              <h6>Brand Warning Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-info">
+              <h6>Brand Info Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-light">
+              <h6>Brand Light Color</h6>
+            </ThemeColor>
+            <ThemeColor className="bg-dark">
+              <h6>Brand Dark Color</h6>
+            </ThemeColor>
+          </CRow>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Colors
--- a/src/views/theme/typography/Typography.js
+++ b/src/views/theme/typography/Typography.js
@@ -0,0 +1,229 @@
+import React from 'react'
+import { CCard, CCardHeader, CCardBody } from '@coreui/react'
+import { DocsLink } from 'src/components'
+
+const Typography = () => {
+  return (
+    <>
+      <CCard className="mb-4">
+        <CCardHeader>
+          Headings
+          <DocsLink href="https://coreui.io/docs/content/typography/" />
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Documentation and examples for Bootstrap typography, including global settings,
+            headings, body text, lists, and more.
+          </p>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Heading</th>
+                <th>Example</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h1">h1. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h2">h2. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h3">h3. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h4">h4. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h5">h5. Bootstrap heading</span>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h6">h6. Bootstrap heading</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Headings</CCardHeader>
+        <CCardBody>
+          <p>
+            <code className="highlighter-rouge">.h1</code> through
+            <code className="highlighter-rouge">.h6</code>
+            classes are also available, for when you want to match the font styling of a heading but
+            cannot use the associated HTML element.
+          </p>
+          <div className="bd-example">
+            <p className="h1">h1. Bootstrap heading</p>
+            <p className="h2">h2. Bootstrap heading</p>
+            <p className="h3">h3. Bootstrap heading</p>
+            <p className="h4">h4. Bootstrap heading</p>
+            <p className="h5">h5. Bootstrap heading</p>
+            <p className="h6">h6. Bootstrap heading</p>
+          </div>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <div className="card-header">Display headings</div>
+        <div className="card-body">
+          <p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
+          <div className="bd-example bd-example-type">
+            <table className="table">
+              <tbody>
+                <tr>
+                  <td>
+                    <span className="display-1">Display 1</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-2">Display 2</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-3">Display 3</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <span className="display-4">Display 4</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Inline text elements</CCardHeader>
+        <CCardBody>
+          <p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
+          <div className="bd-example">
+            <p>
+              You can use the mark tag to <mark>highlight</mark> text.
+            </p>
+            <p>
+              <del>This line of text is meant to be treated as deleted text.</del>
+            </p>
+            <p>
+              <s>This line of text is meant to be treated as no longer accurate.</s>
+            </p>
+            <p>
+              <ins>This line of text is meant to be treated as an addition to the document.</ins>
+            </p>
+            <p>
+              <u>This line of text will render as underlined</u>
+            </p>
+            <p>
+              <small>This line of text is meant to be treated as fine print.</small>
+            </p>
+            <p>
+              <strong>This line rendered as bold text.</strong>
+            </p>
+            <p>
+              <em>This line rendered as italicized text.</em>
+            </p>
+          </div>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-4">
+        <CCardHeader>Description list alignment</CCardHeader>
+        <CCardBody>
+          <p>
+            Align terms and descriptions horizontally by using our grid system’s predefined classes
+            (or semantic mixins). For longer terms, you can optionally add a{' '}
+            <code className="highlighter-rouge">.text-truncate</code> class to truncate the text
+            with an ellipsis.
+          </p>
+          <div className="bd-example">
+            <dl className="row">
+              <dt className="col-sm-3">Description lists</dt>
+              <dd className="col-sm-9">A description list is perfect for defining terms.</dd>
+
+              <dt className="col-sm-3">Euismod</dt>
+              <dd className="col-sm-9">
+                <p>
+                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+                </p>
+                <p>Donec id elit non mi porta gravida at eget metus.</p>
+              </dd>
+
+              <dt className="col-sm-3">Malesuada porta</dt>
+              <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+              <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
+              <dd className="col-sm-9">
+                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
+                fermentum massa justo sit amet risus.
+              </dd>
+
+              <dt className="col-sm-3">Nesting</dt>
+              <dd className="col-sm-9">
+                <dl className="row">
+                  <dt className="col-sm-4">Nested definition list</dt>
+                  <dd className="col-sm-8">
+                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+                  </dd>
+                </dl>
+              </dd>
+            </dl>
+          </div>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Typography
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig(() => {
+  return {
+    base: './',
+    build: {
+      outDir: 'build',
+    },
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer({}), // add options if needed
+        ],
+      },
+    },
+    esbuild: {
+      loader: 'jsx',
+      include: /src\/.*\.jsx?$/,
+      exclude: [],
+    },
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        loader: {
+          '.js': 'jsx',
+        },
+      },
+    },
+    plugins: [react()],
+    resolve: {
+      alias: [
+        {
+          find: 'src/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+  }
+})