principal distributer

2024-07-19 13:06:11 +05:30 · 2024-07-19 13:06:11 +05:30 · 1c0e661ceb
commit 1c0e661ceb
parent e3f2e4671a
79 changed files with 5578 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/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,24 @@
+module.exports = {
+  // parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  plugins: ['react', 'react-hooks'],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+}
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,2 @@
+# Enforce Unix newlines
+* text=auto eol=lf
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
--- a/.github/COMMIT_CONVENTION.md
+++ b/.github/COMMIT_CONVENTION.md
@ -0,0 +1,83 @@
+## Git Commit Message Convention
+
+> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-angular/convention.md).
+
+#### Examples
+
+Appears under "Features" header, `compiler` subheader:
+
+```
+feat(compiler): add 'comments' option
+```
+
+Appears under "Bug Fixes" header, `sidebar` subheader, with a link to issue #28:
+
+```
+fix(sidebar): handle events on blur
+
+close #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(core): improve vdom diffing by removing 'foo' option
+
+BREAKING CHANGE: The 'foo' option has been removed.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(compiler): add 'comments' option
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
+### Full Message Format
+
+A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+
+Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
+
+### Scope
+
+The scope could be anything specifying place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc...
+
+### Subject
+
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end
+
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -0,0 +1,178 @@
+# Contributing to CoreUI
+
+Looking to contribute something to CoreUI? **Here's how you can help.**
+
+Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
+
+Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing
+patches and features.
+
+## Using the issue tracker
+
+The [issue tracker](https://github.com/coreui/coreui-free-react-admin-template/issues) is
+the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
+and [submitting pull requests](#pull-requests), but please respect the following
+restrictions:
+
+* Please **do not** use the issue tracker for personal support requests.
+
+* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
+  Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
+  instead.
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository.
+Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+0. **Validate and lint your code** &mdash; to ensure your problem isn't caused by a simple error in your own code.
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been reported.
+
+2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` or development branch in the repository.
+
+3. **Isolate the problem** &mdash; ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
+
+
+A good bug report shouldn't leave others needing to chase you up for more
+information. Please try to be as detailed as possible in your report. What is
+your environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? Do other browsers show the bug differently? What
+would you expect to be the outcome? All these details will help people to fix
+any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+## Feature requests
+
+Feature requests are welcome. Before opening a feature request, please take a
+moment to find out whether your idea fits with the scope and aims of the
+project. It's up to *you* to make a strong case to convince the project's
+developers of the merits of this feature. Please provide as much detail
+and context as possible.
+
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Adhering to the following process is the best way to get your work
+included in the project:
+
+1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/coreui-react.git
+   # Navigate to the newly cloned directory
+   cd coreui
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/coreui/coreui-react.git
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely to be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+5. Locally merge (or rebase) the upstream development branch into your topic branch:
+
+   ```bash
+   git pull [--rebase] upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description against the `master` branch.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
+license your work under the terms of the [MIT License](LICENSE).
+
+### Semantic Git commit messages
+
+Inspired by Sparkbox's awesome article on
+[semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).
+Please use following commit message format.
+
+* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
+* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
+* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
+* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
+* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
+* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
+* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
+
+## Code guidelines
+
+### HTML
+
+[Adhere to the Code Guide.](http://codeguide.co/#html)
+
+- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
+- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
+- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
+
+### CSS
+
+[Adhere to the Code Guide.](http://codeguide.co/#css)
+
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
+
+### JS
+
+- No semicolons (in client-side JS)
+- 2 spaces (no tabs)
+- strict mode
+- "Attractive"
+- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
+
+## License
+
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+custom: "https://coreui.io/pricing?support=react"
+open_collective: coreui
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,20 @@
+---
+name: Bug report
+about: Tell us about a bug you may have identified in CoreUI Free React Admin Template.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Before opening:
+
+- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- [Validate](https://html5.validator.nu/) any HTML to avoid common problems
+- Read the [contributing guidelines](https://github.com/coreui/coreui-free-react-admin-template/blob/v4-dev/.github/CONTRIBUTING.md)
+
+Bug reports must include:
+
+- Operating system and version (Windows, macOS, Android, iOS)
+- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
+- A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Suggest an idea for a new feature in CoreUI Free React Admin Template.
+title: ''
+labels: feature
+assignees: ''
+
+---
+
+Before opening:
+
+- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- Read the [contributing guidelines](https://github.com/coreui/coreui-free-react-admin-template/blob/main/.github/CONTRIBUTING.md)
+
+Feature requests must include:
+
+- As much detail as possible for what we should add and why it's important to Bootstrap
+- Relevant links to prior art, screenshots, or live demos whenever possible
--- a/.github/SUPPORT.md
+++ b/.github/SUPPORT.md
@ -0,0 +1,9 @@
+### Bug reports
+
+See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
+
+### How-to
+
+For general troubleshooting or help getting started:
+
+- Search or start a new discussion on [GitHub Discussions](https://github.com/coreui/coreui-free-react-admin-template/discussions).
--- a/.github/workflows/npm.yml
+++ b/.github/workflows/npm.yml
@ -0,0 +1,34 @@
+name: NPM Installation
+
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+  schedule:
+  - cron: '0 0 * * *'
+
+env:
+  FORCE_COLOR: 2
+  NODE: 16
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        platform: [ubuntu-latest, windows-latest]
+        node-version: [16.x, 17.x, 18.x]
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.node-version }}
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Run build
+        run: npm run build
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@ -0,0 +1,27 @@
+# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
+#
+# You can adjust the behavior by modifying this file.
+# For more information, see:
+# https://github.com/actions/stale
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: '15 14 * * *'
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+    - uses: actions/stale@v3
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
+        stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
+        stale-issue-label: 'no-issue-activity'
+        stale-pr-label: 'no-pr-activity'
--- 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/21
+++ b/21
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 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/index.html
+++ b/index.html
@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+* CoreUI Free React.js Admin Template
+* @version v5.1.0
+* @link https://coreui.io/product/free-react-admin-template/
+* Copyright (c) 2024 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>Principal distributer</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,59 @@
+{
+  "name": "@coreui/coreui-free-react-admin-template",
+  "version": "5.1.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 \"src/**/*.js\"",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@coreui/chartjs": "^4.0.0",
+    "@coreui/coreui": "^5.0.2",
+    "@coreui/icons": "^3.0.1",
+    "@coreui/icons-react": "^2.2.1",
+    "@coreui/react": "^5.1.0",
+    "@coreui/react-chartjs": "^3.0.0",
+    "@coreui/utils": "^2.0.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@popperjs/core": "^2.11.8",
+    "@themesberg/react-bootstrap": "^1.4.1",
+    "chart.js": "^4.4.3",
+    "classnames": "^2.5.1",
+    "core-js": "^3.37.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
+    "redux": "5.0.1",
+    "simplebar-react": "^3.2.5",
+    "sweetalert2": "^11.12.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "postcss": "^8.4.38",
+    "prettier": "3.3.2",
+    "sass": "^1.77.5",
+    "vite": "^5.2.13"
+  }
+}
--- 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,60 @@
+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'
+
+// 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 MyProfile = React.lazy(() => import('./views/pages/profile/MyProfile'))
+const ChangePassword = React.lazy(() => import('./views/pages/profile/ChangePassword'))
+
+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="/my-profile" name="My profile" element={<MyProfile />} />
+          <Route exact path="/change-password" name="My profile" element={<ChangePassword />} />
+          <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,324 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilBorderAll,
+  cilCalculator,
+  cilChartPie,
+  cilCursor,
+  cilDescription,
+  cilDrop,
+  cilNotes,
+  cilPencil,
+  cilPuzzle,
+  cilShare,
+  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: CNavItem,
+    name: 'Shop',
+    to: '/shop',
+    icon: <CIcon icon={cilShare} customClassName="nav-icon" />,
+  },
+  {
+    component: CNavItem,
+    name: 'Orders',
+    to: '/order',
+    icon: <CIcon icon={cilBorderAll} customClassName="nav-icon" />,
+  },
+  // {
+  //   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: 'Components',
+  // },
+  // {
+  //   component: CNavGroup,
+  //   name: 'Base',
+  //   to: '/base',
+  //   icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
+  //   items: [
+  //     {
+  //       component: CNavItem,
+  //       name: 'Accordion',
+  //       to: '/base/accordion',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Breadcrumb',
+  //       to: '/base/breadcrumbs',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Cards',
+  //       to: '/base/cards',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Carousel',
+  //       to: '/base/carousels',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Collapse',
+  //       to: '/base/collapses',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'List group',
+  //       to: '/base/list-groups',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Navs & Tabs',
+  //       to: '/base/navs',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Pagination',
+  //       to: '/base/paginations',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Placeholders',
+  //       to: '/base/placeholders',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Popovers',
+  //       to: '/base/popovers',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Progress',
+  //       to: '/base/progress',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Spinners',
+  //       to: '/base/spinners',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Tables',
+  //       to: '/base/tables',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Tabs',
+  //       to: '/base/tabs',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Tooltips',
+  //       to: '/base/tooltips',
+  //     },
+  //   ],
+  // },
+  // {
+  //   component: CNavGroup,
+  //   name: 'Buttons',
+  //   to: '/buttons',
+  //   icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
+  //   items: [
+  //     {
+  //       component: CNavItem,
+  //       name: 'Buttons',
+  //       to: '/buttons/buttons',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Buttons groups',
+  //       to: '/buttons/button-groups',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Dropdowns',
+  //       to: '/buttons/dropdowns',
+  //     },
+  //   ],
+  // },
+  // {
+  //   component: CNavGroup,
+  //   name: 'Forms',
+  //   icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+  //   items: [
+  //     {
+  //       component: CNavItem,
+  //       name: 'Form Control',
+  //       to: '/forms/form-control',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Select',
+  //       to: '/forms/select',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Checks & Radios',
+  //       to: '/forms/checks-radios',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Range',
+  //       to: '/forms/range',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Input Group',
+  //       to: '/forms/input-group',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Floating Labels',
+  //       to: '/forms/floating-labels',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Layout',
+  //       to: '/forms/layout',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Validation',
+  //       to: '/forms/validation',
+  //     },
+  //   ],
+  // },
+  // {
+  //   component: CNavItem,
+  //   name: 'Charts',
+  //   to: '/charts',
+  //   icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
+  // },
+  // {
+  //   component: CNavGroup,
+  //   name: 'Icons',
+  //   icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+  //   items: [
+  //     {
+  //       component: CNavItem,
+  //       name: 'CoreUI Free',
+  //       to: '/icons/coreui-icons',
+  //       badge: {
+  //         color: 'success',
+  //         text: 'NEW',
+  //       },
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'CoreUI Flags',
+  //       to: '/icons/flags',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'CoreUI Brands',
+  //       to: '/icons/brands',
+  //     },
+  //   ],
+  // },
+  // {
+  //   component: CNavGroup,
+  //   name: 'Notifications',
+  //   icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
+  //   items: [
+  //     {
+  //       component: CNavItem,
+  //       name: 'Alerts',
+  //       to: '/notifications/alerts',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Badges',
+  //       to: '/notifications/badges',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Modal',
+  //       to: '/notifications/modals',
+  //     },
+  //     {
+  //       component: CNavItem,
+  //       name: 'Toasts',
+  //       to: '/notifications/toasts',
+  //     },
+  //   ],
+  // },
+  // {
+  //   component: CNavItem,
+  //   name: 'Widgets',
+  //   to: '/widgets',
+  //   icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
+  //   badge: {
+  //     color: 'info',
+  //     text: 'NEW',
+  //   },
+  // },
+  // {
+  //   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: 'Docs',
+  //   href: 'https://coreui.io/react/docs/templates/installation/',
+  //   icon: <CIcon icon={cilDescription} 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/react.jpg
+++ b/src/assets/images/react.jpg
--- a/src/assets/images/vue.jpg
+++ b/src/assets/images/vue.jpg
--- a/src/axios.js
+++ b/src/axios.js
@ -0,0 +1,10 @@
+import axios from 'axios'
+
+const Axios = axios.create({
+  // baseURL: "http://localhost:5000/",
+  // baseURL: 'https://leadesh-whatsapp.onrender.com',
+  // baseURL: "https://api.leadesh.com/",
+  baseURL: 'https://leadesh-api-github.onrender.com/', // latest is this one
+})
+
+export default Axios
--- 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; 2024 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,142 @@
+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(() => {
+    document.addEventListener('scroll', () => {
+      headerRef.current &&
+        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
+    })
+  }, [])
+
+  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">
+          <CNavItem>
+            <CNavLink to="/dashboard" as={NavLink}>
+              Dashboard
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Users</CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Settings</CNavLink>
+          </CNavItem>
+        </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>
+      <CContainer className="px-4" fluid>
+        <AppBreadcrumb />
+      </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,69 @@
+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">
+            {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}>
+            {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}>
+        {item.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/DocsCallout.js
+++ b/src/components/DocsCallout.js
@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CCallout, CLink } from '@coreui/react'
+
+const DocsCallout = (props) => {
+  const { content, href, name } = props
+
+  const plural = name.slice(-1) === 's' ? true : false
+
+  const _href = `https://coreui.io/react/docs/${href}`
+
+  return (
+    <CCallout color="info" className="bg-white">
+      {content
+        ? content
+        : `A React ${name} component ${
+            plural ? 'have' : 'has'
+          } been created as a native React.js version
+      of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
+      variants, and unique design that matches CoreUI Design System requirements.`}
+      <br />
+      <br />
+      For more information please visit our official{' '}
+      <CLink href={_href} target="_blank">
+        documentation of CoreUI Components Library for React.js
+      </CLink>
+      .
+    </CCallout>
+  )
+}
+
+DocsCallout.propTypes = {
+  content: PropTypes.string,
+  href: PropTypes.string,
+  name: PropTypes.string,
+}
+
+export default React.memo(DocsCallout)
--- 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/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,110 @@
+import React, { useState } 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'
+import { useNavigate } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
+
+const AppHeaderDropdown = () => {
+  const navigate = useNavigate()
+  return (
+    <CDropdown variant="nav-item">
+      <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
+        <div className="media d-flex align-items-center">
+          {/* <Image src={"Profile3"} className="user-avatar md-avatar rounded-circle" /> */}
+          <FontAwesomeIcon
+            style={{ fontSize: '2rem' }}
+            className="user-avatar md-avatar rounded-circle "
+            icon={faUserCircle}
+          />
+          <div className="media-body ms-2 text-dark align-items-center d-none d-lg-block">
+            <span className="mb-0 font-small fw-bold"> Garg</span>
+          </div>
+        </div>
+      </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" />
+          Update
+          <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 onClick={() => navigate('/my-profile')}>
+          <CIcon icon={cilUser} className="me-2" />
+          Profile
+        </CDropdownItem>
+        <CDropdownItem onClick={() => navigate('/change-password')}>
+          <CIcon icon={cilSettings} className="me-2" />
+          Change Password
+        </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" />
+          Logout
+        </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,21 @@
+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 DocsCallout from './DocsCallout'
+import DocsLink from './DocsLink'
+import DocsExample from './DocsExample'
+
+export {
+  AppBreadcrumb,
+  AppContent,
+  AppFooter,
+  AppHeader,
+  AppHeaderDropdown,
+  AppSidebar,
+  DocsCallout,
+  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,14 @@
+import React from 'react'
+
+const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
+const Shop = React.lazy(() => import('./views/shops/Shop'))
+const Order = React.lazy(() => import('./views/orders/Order'))
+
+const routes = [
+  { path: '/', exact: true, name: 'Home' },
+  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+  { path: '/shop', name: 'Shop', element: Shop },
+  { path: '/order', name: 'Order', element: Order },
+]
+
+export default routes
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@ -0,0 +1 @@
+// Here you can add other styles
--- a/src/scss/_theme.scss
+++ b/src/scss/_theme.scss
@ -0,0 +1,64 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  @include ltr-rtl("padding-right", 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 {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -0,0 +1,5 @@
+// Variable overrides
+//
+// If you want to customize your project please add your variables below.
+
+$enable-deprecation-messages: false !default;
--- a/src/scss/examples.scss
+++ b/src/scss/examples.scss
@ -0,0 +1,116 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
+.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
+    > .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;
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -0,0 +1,15 @@
+// If you want to override variables do it here
+@import "variables";
+
+// Import styles
+@import "@coreui/coreui/scss/coreui";
+@import "@coreui/chartjs/scss/coreui-chartjs";
+
+// Vendors
+@import "vendors/simplebar";
+
+// Custom styles for this theme
+@import "theme";
+
+// If you want to add custom CSS you can put it here
+@import "custom";
--- 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/buttons/button-groups/ButtonGroups.js
+++ b/src/views/buttons/button-groups/ButtonGroups.js
@ -0,0 +1,439 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CButtonGroup,
+  CButtonToolbar,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CFormCheck,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+  CRow,
+} from '@coreui/react'
+import { DocsExample } from 'src/components'
+
+const ButtonGroups = () => {
+  return (
+    <CRow>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Basic example</span>
+          </CCardHeader>
+          <CCardBody>
+            <p>
+              Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
+              <code>&lt;CButtonGroup&gt;</code>.{' '}
+            </p>
+            <DocsExample href="components/button-group">
+              <CButtonGroup role="group" aria-label="Basic example">
+                <CButton color="primary">Left</CButton>
+                <CButton color="primary">Middle</CButton>
+                <CButton color="primary">Right</CButton>
+              </CButtonGroup>
+            </DocsExample>
+            <p>
+              These classes can also be added to groups of links, as an alternative to the{' '}
+              <code>&lt;CNav&gt;</code> components.
+            </p>
+            <DocsExample href="components/button-group">
+              <CButtonGroup>
+                <CButton href="#" color="primary" active>
+                  Active link
+                </CButton>
+                <CButton href="#" color="primary">
+                  Link
+                </CButton>
+                <CButton href="#" color="primary">
+                  Link
+                </CButton>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Mixed styles</span>
+          </CCardHeader>
+          <CCardBody>
+            <DocsExample href="components/button-group#mixed-styles">
+              <CButtonGroup role="group" aria-label="Basic mixed styles example">
+                <CButton color="danger">Left</CButton>
+                <CButton color="warning">Middle</CButton>
+                <CButton color="success">Right</CButton>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Outlined styles</span>
+          </CCardHeader>
+          <CCardBody>
+            <DocsExample href="components/button-group#outlined-styles">
+              <CButtonGroup role="group" aria-label="Basic outlined example">
+                <CButton color="primary" variant="outline">
+                  Left
+                </CButton>
+                <CButton color="primary" variant="outline">
+                  Middle
+                </CButton>
+                <CButton color="primary" variant="outline">
+                  Right
+                </CButton>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Checkbox and radio button groups</span>
+          </CCardHeader>
+          <CCardBody>
+            <p>
+              Combine button-like checkbox and radio toggle buttons into a seamless looking button
+              group.
+            </p>
+            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
+              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+                <CFormCheck
+                  button={{ variant: 'outline' }}
+                  id="btncheck1"
+                  autoComplete="off"
+                  label="Checkbox 1"
+                />
+                <CFormCheck
+                  button={{ variant: 'outline' }}
+                  id="btncheck2"
+                  autoComplete="off"
+                  label="Checkbox 2"
+                />
+                <CFormCheck
+                  button={{ variant: 'outline' }}
+                  id="btncheck3"
+                  autoComplete="off"
+                  label="Checkbox 3"
+                />
+              </CButtonGroup>
+            </DocsExample>
+            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
+              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+                <CFormCheck
+                  type="radio"
+                  button={{ variant: 'outline' }}
+                  name="btnradio"
+                  id="btnradio1"
+                  autoComplete="off"
+                  label="Radio 1"
+                />
+                <CFormCheck
+                  type="radio"
+                  button={{ variant: 'outline' }}
+                  name="btnradio"
+                  id="btnradio2"
+                  autoComplete="off"
+                  label="Radio 2"
+                />
+                <CFormCheck
+                  type="radio"
+                  button={{ variant: 'outline' }}
+                  name="btnradio"
+                  id="btnradio3"
+                  autoComplete="off"
+                  label="Radio 3"
+                />
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Button toolbar</span>
+          </CCardHeader>
+          <CCardBody>
+            <p>
+              Join sets of button groups into button toolbars for more complicated components. Use
+              utility classes as needed to space out groups, buttons, and more.
+            </p>
+            <DocsExample href="components/button-group#button-toolbar">
+              <CButtonToolbar role="group" aria-label="Toolbar with button groups">
+                <CButtonGroup className="me-2" role="group" aria-label="First group">
+                  <CButton color="primary">1</CButton>
+                  <CButton color="primary">2</CButton>
+                  <CButton color="primary">3</CButton>
+                  <CButton color="primary">4</CButton>
+                </CButtonGroup>
+                <CButtonGroup className="me-2" role="group" aria-label="Second group">
+                  <CButton color="secondary">5</CButton>
+                  <CButton color="secondary">6</CButton>
+                  <CButton color="secondary">7</CButton>
+                </CButtonGroup>
+                <CButtonGroup className="me-2" role="group" aria-label="Third group">
+                  <CButton color="info">8</CButton>
+                </CButtonGroup>
+              </CButtonToolbar>
+            </DocsExample>
+            <p>
+              Feel free to combine input groups with button groups in your toolbars. Similar to the
+              example above, you’ll likely need some utilities through to space items correctly.
+            </p>
+            <DocsExample href="components/button-group#button-toolbar">
+              <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
+                <CButtonGroup className="me-2" role="group" aria-label="First group">
+                  <CButton color="secondary" variant="outline">
+                    1
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    2
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    3
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    4
+                  </CButton>
+                </CButtonGroup>
+                <CInputGroup>
+                  <CInputGroupText>@</CInputGroupText>
+                  <CFormInput
+                    placeholder="Input group example"
+                    aria-label="Input group example"
+                    aria-describedby="btnGroupAddon"
+                  />
+                </CInputGroup>
+              </CButtonToolbar>
+              <CButtonToolbar
+                className="justify-content-between"
+                role="group"
+                aria-label="Toolbar with button groups"
+              >
+                <CButtonGroup className="me-2" role="group" aria-label="First group">
+                  <CButton color="secondary" variant="outline">
+                    1
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    2
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    3
+                  </CButton>
+                  <CButton color="secondary" variant="outline">
+                    4
+                  </CButton>
+                </CButtonGroup>
+                <CInputGroup>
+                  <CInputGroupText>@</CInputGroupText>
+                  <CFormInput
+                    placeholder="Input group example"
+                    aria-label="Input group example"
+                    aria-describedby="btnGroupAddon"
+                  />
+                </CInputGroup>
+              </CButtonToolbar>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Sizing</span>
+          </CCardHeader>
+          <CCardBody>
+            <p>
+              Alternatively, of implementing button sizing classes to each button in a group, set{' '}
+              <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
+              each one when nesting multiple groups.
+            </p>
+            <DocsExample href="components/button-group#sizing">
+              <CButtonGroup size="lg" role="group" aria-label="Large button group">
+                <CButton color="dark" variant="outline">
+                  Left
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Middle
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Right
+                </CButton>
+              </CButtonGroup>
+              <br />
+              <CButtonGroup role="group" aria-label="Default button group">
+                <CButton color="dark" variant="outline">
+                  Left
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Middle
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Right
+                </CButton>
+              </CButtonGroup>
+              <br />
+              <CButtonGroup size="sm" role="group" aria-label="Small button group">
+                <CButton color="dark" variant="outline">
+                  Left
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Middle
+                </CButton>
+                <CButton color="dark" variant="outline">
+                  Right
+                </CButton>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Nesting</span>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Put a <code>&lt;CButtonGroup&gt;</code> inside another{' '}
+              <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
+              of buttons.
+            </p>
+            <DocsExample href="components/button-group#nesting">
+              <CButtonGroup role="group" aria-label="Button group with nested dropdown">
+                <CButton color="primary">1</CButton>
+                <CButton color="primary">2</CButton>
+                <CDropdown variant="btn-group">
+                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button Group</strong> <span>Vertical variation</span>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
+              <strong>Split button dropdowns are not supported here.</strong>
+            </p>
+            <DocsExample href="components/button-group/#vertical-variation">
+              <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+                <CButton color="dark">Button</CButton>
+              </CButtonGroup>
+            </DocsExample>
+            <DocsExample href="components/button-group/#vertical-variation">
+              <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                <CButton color="primary">Button</CButton>
+                <CButton color="primary">Button</CButton>
+                <CDropdown variant="btn-group">
+                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CButton color="primary">Button</CButton>
+                <CButton color="primary">Button</CButton>
+                <CDropdown variant="btn-group">
+                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CDropdown variant="btn-group">
+                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CDropdown variant="btn-group">
+                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CButtonGroup>
+            </DocsExample>
+            <DocsExample href="components/button-group/#vertical-variation">
+              <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                <CFormCheck
+                  type="radio"
+                  button={{ color: 'danger', variant: 'outline' }}
+                  name="vbtnradio"
+                  id="vbtnradio1"
+                  autoComplete="off"
+                  label="Radio 1"
+                  defaultChecked
+                />
+                <CFormCheck
+                  type="radio"
+                  button={{ color: 'danger', variant: 'outline' }}
+                  name="vbtnradio"
+                  id="vbtnradio2"
+                  autoComplete="off"
+                  label="Radio 2"
+                />
+                <CFormCheck
+                  type="radio"
+                  button={{ color: 'danger', variant: 'outline' }}
+                  name="vbtnradio"
+                  id="vbtnradio3"
+                  autoComplete="off"
+                  label="Radio 3"
+                />
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default ButtonGroups
--- a/src/views/buttons/buttons/Buttons.js
+++ b/src/views/buttons/buttons/Buttons.js
@ -0,0 +1,401 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilBell } from '@coreui/icons'
+import { DocsExample } from 'src/components'
+
+const Buttons = () => {
+  return (
+    <CRow>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              CoreUI includes a bunch of predefined buttons components, each serving its own
+              semantic purpose. Buttons show what action will happen when the user clicks or touches
+              it. CoreUI buttons are used to initialize operations, both in the background or
+              foreground of an experience.
+            </p>
+            <DocsExample href="components/buttons">
+              {['normal', 'active', 'disabled'].map((state, index) => (
+                <CRow className="align-items-center mb-3" key={index}>
+                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+                    {state.charAt(0).toUpperCase() + state.slice(1)}
+                  </CCol>
+                  <CCol xs>
+                    {[
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ].map((color, index) => (
+                      <CButton
+                        color={color}
+                        key={index}
+                        active={state === 'active'}
+                        disabled={state === 'disabled'}
+                      >
+                        {color.charAt(0).toUpperCase() + color.slice(1)}
+                      </CButton>
+                    ))}
+                    <CButton color="link">Link</CButton>
+                  </CCol>
+                </CRow>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>with icons</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              You can combine button with our <a href="https://coreui.io/icons/">CoreUI Icons</a>.
+            </p>
+            <DocsExample href="components/buttons">
+              {['normal', 'active', 'disabled'].map((state, index) => (
+                <CRow className="align-items-center mb-3" key={index}>
+                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+                    {state.charAt(0).toUpperCase() + state.slice(1)}
+                  </CCol>
+                  <CCol xs>
+                    {[
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ].map((color, index) => (
+                      <CButton
+                        color={color}
+                        key={index}
+                        active={state === 'active'}
+                        disabled={state === 'disabled'}
+                      >
+                        <CIcon icon={cilBell} className="me-2" />
+                        {color.charAt(0).toUpperCase() + color.slice(1)}
+                      </CButton>
+                    ))}
+                    <CButton color="link">
+                      <CIcon icon={cilBell} className="me-2" />
+                      Link
+                    </CButton>
+                  </CCol>
+                </CRow>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Button components</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              The <code>&lt;CButton&gt;</code> component are designed for{' '}
+              <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code>{' '}
+              elements (though some browsers may apply a slightly different rendering).
+            </p>
+            <p className="text-body-secondary small">
+              If you&#39;re using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
+              elements that are used to trigger functionality ex. collapsing content, these links
+              should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
+              meaning to assistive technologies such as screen readers.
+            </p>
+            <DocsExample href="components/buttons#button-components">
+              <CButton as="a" color="primary" href="#" role="button">
+                Link
+              </CButton>
+              <CButton type="submit" color="primary">
+                Button
+              </CButton>
+              <CButton as="input" type="button" color="primary" value="Input" />
+              <CButton as="input" type="submit" color="primary" value="Submit" />
+              <CButton as="input" type="reset" color="primary" value="Reset" />
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>outline</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              If you need a button, but without the strong background colors. Set{' '}
+              <code>variant=&#34;outline&#34;</code> prop to remove all background colors.
+            </p>
+            <DocsExample href="components/buttons#outline-buttons">
+              {['normal', 'active', 'disabled'].map((state, index) => (
+                <CRow className="align-items-center mb-3" key={index}>
+                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+                    {state.charAt(0).toUpperCase() + state.slice(1)}
+                  </CCol>
+                  <CCol xs>
+                    {[
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ].map((color, index) => (
+                      <CButton
+                        color={color}
+                        variant="outline"
+                        key={index}
+                        active={state === 'active'}
+                        disabled={state === 'disabled'}
+                      >
+                        {color.charAt(0).toUpperCase() + color.slice(1)}
+                      </CButton>
+                    ))}
+                  </CCol>
+                </CRow>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>ghost</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
+              to remove all background colors.
+            </p>
+            <DocsExample href="components/buttons#ghost-buttons">
+              {['normal', 'active', 'disabled'].map((state, index) => (
+                <CRow className="align-items-center mb-3" key={index}>
+                  <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
+                    {state.charAt(0).toUpperCase() + state.slice(1)}
+                  </CCol>
+                  <CCol xs>
+                    {[
+                      'primary',
+                      'secondary',
+                      'success',
+                      'danger',
+                      'warning',
+                      'info',
+                      'light',
+                      'dark',
+                    ].map((color, index) => (
+                      <CButton
+                        color={color}
+                        variant="ghost"
+                        key={index}
+                        active={state === 'active'}
+                        disabled={state === 'disabled'}
+                      >
+                        {color.charAt(0).toUpperCase() + color.slice(1)}
+                      </CButton>
+                    ))}
+                  </CCol>
+                </CRow>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Sizes</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
+              <code>size=&#34;sm&#34;</code> for additional sizes.
+            </p>
+            <DocsExample href="components/buttons#sizes">
+              <CButton color="primary" size="lg">
+                Large button
+              </CButton>
+              <CButton color="secondary" size="lg">
+                Large button
+              </CButton>
+            </DocsExample>
+            <DocsExample href="components/buttons#sizes">
+              <CButton color="primary" size="sm">
+                Small button
+              </CButton>
+              <CButton color="secondary" size="sm">
+                Small button
+              </CButton>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Pill</small>
+          </CCardHeader>
+          <CCardBody>
+            <DocsExample href="components/buttons#pill-buttons">
+              {[
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ].map((color, index) => (
+                <CButton color={color} shape="rounded-pill" key={index}>
+                  {color.charAt(0).toUpperCase() + color.slice(1)}
+                </CButton>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Square</small>
+          </CCardHeader>
+          <CCardBody>
+            <DocsExample href="components/buttons#square">
+              {[
+                'primary',
+                'secondary',
+                'success',
+                'danger',
+                'warning',
+                'info',
+                'light',
+                'dark',
+              ].map((color, index) => (
+                <CButton color={color} shape="rounded-0" key={index}>
+                  {color.charAt(0).toUpperCase() + color.slice(1)}
+                </CButton>
+              ))}
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Disabled state</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code>{' '}
+              component to make buttons look inactive. Disabled button has{' '}
+              <code>pointer-events: none</code> applied to, disabling hover and active states from
+              triggering.
+            </p>
+            <DocsExample href="components/buttons#disabled-state">
+              <CButton color="primary" size="lg" disabled>
+                Primary button
+              </CButton>
+              <CButton color="secondary" size="lg" disabled>
+                Button
+              </CButton>
+            </DocsExample>
+            <p className="text-body-secondary small">
+              Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
+            </p>
+            <p className="text-body-secondary small">
+              <code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
+              CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
+              CoreUI also has to add to the disabled button component{' '}
+              <code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
+              to assistive technologies.
+            </p>
+            <DocsExample href="components/buttons#disabled-state">
+              <CButton as="a" href="#" color="primary" size="lg" disabled>
+                Primary link
+              </CButton>
+              <CButton as="a" href="#" color="secondary" size="lg" disabled>
+                Link
+              </CButton>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Button</strong> <small>Block buttons</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Create buttons that span the full width of a parent—by using utilities.
+            </p>
+            <DocsExample href="components/buttons#block-buttons">
+              <div className="d-grid gap-2">
+                <CButton color="primary">Button</CButton>
+                <CButton color="primary">Button</CButton>
+              </div>
+            </DocsExample>
+            <p className="text-body-secondary small">
+              Here we create a responsive variation, starting with vertically stacked buttons until
+              the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
+              <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
+              your browser to see them change.
+            </p>
+            <DocsExample href="components/buttons#block-buttons">
+              <div className="d-grid gap-2 d-md-block">
+                <CButton color="primary">Button</CButton>
+                <CButton color="primary">Button</CButton>
+              </div>
+            </DocsExample>
+            <p className="text-body-secondary small">
+              You can adjust the width of your block buttons with grid column width classes. For
+              example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
+              horizontally with <code>.mx-auto</code>, too.
+            </p>
+            <DocsExample href="components/buttons#block-buttons">
+              <div className="d-grid gap-2 col-6 mx-auto">
+                <CButton color="primary">Button</CButton>
+                <CButton color="primary">Button</CButton>
+              </div>
+            </DocsExample>
+            <p className="text-body-secondary small">
+              Additional utilities can be used to adjust the alignment of buttons when horizontal.
+              Here we&#39;ve taken our previous responsive example and added some flex utilities and
+              a margin utility on the button to right align the buttons when they&#39;re no longer
+              stacked.
+            </p>
+            <DocsExample href="components/buttons#block-buttons">
+              <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                <CButton color="primary" className="me-md-2">
+                  Button
+                </CButton>
+                <CButton color="primary">Button</CButton>
+              </div>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Buttons
--- a/src/views/buttons/dropdowns/Dropdowns.js
+++ b/src/views/buttons/dropdowns/Dropdowns.js
@ -0,0 +1,338 @@
+import React from 'react'
+import {
+  CButton,
+  CButtonGroup,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CRow,
+} from '@coreui/react'
+import { DocsExample } from 'src/components'
+
+const Dropdowns = () => {
+  return (
+    <CRow>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Single button</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
+              elements:
+            </p>
+            <DocsExample href="components/dropdown#single-button">
+              <CDropdown>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+            <p className="text-body-secondary small">
+              The best part is you can do this with any button variant, too:
+            </p>
+            <DocsExample href="components/dropdown#single-button">
+              <>
+                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+                  (color, index) => (
+                    <CDropdown variant="btn-group" key={index}>
+                      <CDropdownToggle color={color}>{color}</CDropdownToggle>
+                      <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                        <CDropdownDivider />
+                        <CDropdownItem href="#">Separated link</CDropdownItem>
+                      </CDropdownMenu>
+                    </CDropdown>
+                  ),
+                )}
+              </>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Split button</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Similarly, create split button dropdowns with virtually the same markup as single
+              button dropdowns, but with the addition of boolean prop <code>split</code> for proper
+              spacing around the dropdown caret.
+            </p>
+            <p className="text-body-secondary small">
+              We use this extra class to reduce the horizontal <code>padding</code> on either side
+              of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
+              normal button dropdowns. Those additional changes hold the caret centered in the split
+              button and implement a more properly sized hit area next to the main button.
+            </p>
+            <DocsExample href="components/dropdown#split-button">
+              <>
+                {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+                  (color, index) => (
+                    <CDropdown variant="btn-group" key={index}>
+                      <CButton color={color}>{color}</CButton>
+                      <CDropdownToggle color={color} split />
+                      <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                        <CDropdownDivider />
+                        <CDropdownItem href="#">Separated link</CDropdownItem>
+                      </CDropdownMenu>
+                    </CDropdown>
+                  ),
+                )}
+              </>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Sizing</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Button dropdowns work with buttons of all sizes, including default and split dropdown
+              buttons.
+            </p>
+            <DocsExample href="components/dropdown#sizing">
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="secondary" size="lg">
+                  Large button
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group">
+                <CButton color="secondary" size="lg">
+                  Large split button
+                </CButton>
+                <CDropdownToggle color="secondary" size="lg" split />
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+            <DocsExample href="components/dropdown#sizing">
+              <CDropdown variant="btn-group">
+                <CDropdownToggle color="secondary" size="sm">
+                  Small button
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group">
+                <CButton color="secondary" size="sm">
+                  Small split button
+                </CButton>
+                <CDropdownToggle color="secondary" size="sm" split />
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Single button</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
+              <code>dark</code> property. No changes are required to the dropdown items.
+            </p>
+            <DocsExample href="components/dropdown#dark-dropdowns">
+              <CDropdown dark>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+            <p className="text-body-secondary small">And putting it to use in a navbar:</p>
+            <DocsExample href="components/dropdown#dark-dropdowns">
+              <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+                <div className="container-fluid">
+                  <a className="navbar-brand" href="https://coreui.io/react/">
+                    Navbar
+                  </a>
+                  <button
+                    className="navbar-toggler"
+                    type="button"
+                    data-coreui-toggle="collapse"
+                    data-coreui-target="#navbarNavDarkDropdown"
+                    aria-controls="navbarNavDarkDropdown"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                  >
+                    <span className="navbar-toggler-icon"></span>
+                  </button>
+                  <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
+                    <ul className="navbar-nav">
+                      <CDropdown dark as="li" variant="nav-item">
+                        <CDropdownToggle>Dropdown</CDropdownToggle>
+                        <CDropdownMenu>
+                          <CDropdownItem href="#">Action</CDropdownItem>
+                          <CDropdownItem href="#">Another action</CDropdownItem>
+                          <CDropdownItem href="#">Something else here</CDropdownItem>
+                          <CDropdownDivider />
+                          <CDropdownItem href="#">Separated link</CDropdownItem>
+                        </CDropdownMenu>
+                      </CDropdown>
+                    </ul>
+                  </div>
+                </div>
+              </nav>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Dropup</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Trigger dropdown menus above elements by adding{' '}
+              <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
+              component.
+            </p>
+            <DocsExample href="components/dropdown#dropup">
+              <CDropdown variant="btn-group" direction="dropup">
+                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group" direction="dropup">
+                <CButton color="secondary">Small split button</CButton>
+                <CDropdownToggle color="secondary" split />
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Dropright</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Trigger dropdown menus at the right of the elements by adding{' '}
+              <code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
+              component.
+            </p>
+            <DocsExample href="components/dropdown#dropright">
+              <CDropdown variant="btn-group" direction="dropend">
+                <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CDropdown variant="btn-group" direction="dropend">
+                <CButton color="secondary">Small split button</CButton>
+                <CDropdownToggle color="secondary" split />
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Separated link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs={12}>
+        <CCard className="mb-4">
+          <CCardHeader>
+            <strong>React Dropdown</strong> <small>Dropleft</small>
+          </CCardHeader>
+          <CCardBody>
+            <p className="text-body-secondary small">
+              Trigger dropdown menus at the left of the elements by adding{' '}
+              <code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
+              component.
+            </p>
+            <DocsExample href="components/dropdown#dropleft">
+              <CButtonGroup>
+                <CDropdown variant="btn-group" direction="dropstart">
+                  <CDropdownToggle color="secondary" split />
+                  <CDropdownMenu>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider />
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CButton color="secondary">Small split button</CButton>
+              </CButtonGroup>
+            </DocsExample>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Dropdowns
--- a/src/views/buttons/index.js
+++ b/src/views/buttons/index.js
@ -0,0 +1,5 @@
+import ButtonDropdowns from './ButtonDropdowns'
+import ButtonGroups from './ButtonGroups'
+import Buttons from './Buttons'
+
+export { ButtonDropdowns, ButtonGroups, Buttons }
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@ -0,0 +1,11 @@
+import React from 'react'
+
+const Dashboard = () => {
+  return (
+    <>
+      <div>Dashboard</div>
+    </>
+  )
+}
+
+export default Dashboard
--- a/src/views/orders/Order.js
+++ b/src/views/orders/Order.js
@ -0,0 +1,7 @@
+import React from 'react'
+
+const Order = () => {
+  return <div>Order</div>
+}
+
+export default Order
--- 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/profile/ChangePassword.js
+++ b/src/views/pages/profile/ChangePassword.js
@ -0,0 +1,147 @@
+import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft, faEnvelope, faLockOpen, faUnlockAlt } from '@fortawesome/free-solid-svg-icons'
+import { Col, Row, Form, Card, Button, Container, InputGroup } from '@themesberg/react-bootstrap'
+import { Link } from 'react-router-dom'
+// import axios from 'axios'
+// import { Routes } from '../../routes'
+
+import Swal from 'sweetalert2'
+// import Axios from '../../axios'
+
+const ChangePassword = () => {
+  const [Loading, setLoading] = useState(false)
+
+  const [formData, setFormData] = useState({
+    oldPassword: '',
+    newPassword: '',
+  })
+
+  // console.log(formData);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({ ...prevData, [name]: value }))
+  }
+  const formHandler = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    // const jwt = localStorage.getItem('jwt')
+    // console.log(jwt);
+
+    // try {
+    //   const response = await Axios.post(
+    //     '/api/password',
+    //     {
+    //       oldPassword: formData.oldPassword,
+    //       newPassword: formData.newPassword,
+    //     },
+    //     {
+    //       headers: {
+    //         jwt: `${jwt}`,
+    //         'Content-Type': 'application/json',
+    //       },
+    //     },
+    //   )
+    //   // console.log("response ", response);
+    //   if (response.status === 200) {
+    //     // Display success alert
+    //     Swal.fire({
+    //       icon: 'success',
+    //       title: 'Password Changed Successfully',
+    //       text: 'Your password has been changed successfully!',
+    //     }).then((result) => {
+    //       if (result.isConfirmed) {
+    //         history.push(Routes.Presentation.path)
+    //         //   history.push(Routes.Dashboard.path);
+    //       }
+    //     })
+
+    //     // Redirect to the dashboard
+    //   } else {
+    //     // Handle other scenarios if needed
+    //     Swal.fire({
+    //       icon: 'error',
+    //       title: 'Password Change Failed',
+    //       text: 'There was an issue changing your password. Please try again.',
+    //     })
+    //   }
+    // } catch (err) {
+    //   console.log('error is ', err)
+    //   Swal.fire({
+    //     icon: 'error',
+    //     title: 'Password Change Failed',
+    //     text: 'There was an error changing your password. Please try again.',
+    //   })
+    // }
+
+    setLoading(false)
+  }
+  return (
+    <main>
+      <section className="bg-soft d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
+        <Container>
+          <Row className="justify-content-center">
+            <p className="text-center">
+              <Card.Link as={Link} to={'/dashboard'} className="text-gray-700">
+                <FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to Dashboard
+              </Card.Link>
+            </p>
+            <Col
+              xs={12}
+              style={{ maxWidth: '600px' }}
+              className="d-flex align-items-center justify-content-center"
+            >
+              <div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                <h3 className="mb-4">Change Password</h3>
+                <Form onSubmit={formHandler}>
+                  <Form.Group id="password" className="mb-4">
+                    <Form.Label>Old Password</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faLockOpen} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        required
+                        type="password"
+                        placeholder="old password"
+                        name="oldPassword"
+                        value={formData.oldPassword}
+                        onChange={handleInputChange}
+                        pattern="^(?=.*[a-z](){}[])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+                        title="The password should have 1 upper-case letter, 1 lower-case letter, 1 number, 1 special character and at least 8 characters."
+                      />
+                    </InputGroup>
+                  </Form.Group>
+                  <Form.Group id="password" className="mb-4">
+                    <Form.Label>New Password</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faLockOpen} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        required
+                        type="password"
+                        placeholder="new password"
+                        name="newPassword"
+                        value={formData.newPassword}
+                        onChange={handleInputChange}
+                        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+                        title="The password should have 1 upper-case letter, 1 lower-case letter, 1 number, 1 special character and at least 8 characters."
+                      />
+                    </InputGroup>
+                  </Form.Group>
+
+                  <Button variant="primary" type="submit" className="w-100">
+                    {Loading ? <>Loading...</> : <> Change Password </>}
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  )
+}
+
+export default ChangePassword
--- a/src/views/pages/profile/MyProfile.js
+++ b/src/views/pages/profile/MyProfile.js
@ -0,0 +1,195 @@
+import React, { useEffect, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faAngleLeft,
+  faEnvelope,
+  faLockOpen,
+  faMobile,
+  faUnlockAlt,
+  faUser,
+} from '@fortawesome/free-solid-svg-icons'
+import { Col, Row, Form, Card, Button, Container, InputGroup } from '@themesberg/react-bootstrap'
+import { Link, useNavigate } from 'react-router-dom'
+// import { Axios } from 'axios'
+// import Axios from '../../axios'
+// import { Routes } from '../../routes'
+
+// import Swal from 'sweetalert2'
+
+const MyProfile = () => {
+  const navigate = useNavigate()
+  const [Loading, setLoading] = useState(false)
+
+  const [formData, setFormData] = useState({
+    mobile: '',
+    name: '',
+    email: '',
+  })
+
+  console.log(formData)
+
+  // console.log(formData);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({ ...prevData, [name]: value }))
+  }
+  const formHandler = async (e) => {
+    e.preventDefault()
+    // const jwt = localStorage.getItem('jwt')
+    // console.log(jwt);
+
+    // try {
+    //   const response = await Axios.post(
+    //     '/api/user',
+    //     {
+    //       username: formData.name,
+    //       newNumber: formData.mobile,
+    //       email: formData.email,
+    //     },
+    //     {
+    //       headers: {
+    //         jwt: `${jwt}`,
+    //         'Content-Type': 'application/json',
+    //       },
+    //     },
+    //   )
+    //   // console.log("response ", response);
+    //   if (response.status === 200) {
+    //     // Display success alert
+    //     Swal.fire({
+    //       icon: 'success',
+    //       title: 'Profile Updated Successfully',
+    //       text: 'Your Profile has been Updated successfully!',
+    //     }).then((result) => {
+    //       if (result.isConfirmed) {
+    //         history.push(Routes.Presentation.path)
+    //         //   history.push(Routes.Dashboard.path);
+    //       }
+    //     })
+
+    //     // Redirect to the dashboard
+    //   } else {
+    //     // Handle other scenarios if needed
+    //     Swal.fire({
+    //       icon: 'error',
+    //       title: 'Profile Update Failed',
+    //       text: 'There was an issue updating your profile. Please try again.',
+    //     })
+    //   }
+    // } catch (err) {
+    //   console.log('error is ', err)
+    //   Swal.fire({
+    //     icon: 'error',
+    //     title: 'Profile Update Failed',
+    //     text: 'There was an issue updating your profile. Please try again.',
+    //   })
+    // }
+  }
+  // const getMe = async () => {
+  //   const jwt = localStorage.getItem('jwt')
+
+  //   try {
+  //     const respose = await Axios.get('/api/getMe', {
+  //       headers: {
+  //         jwt: `${jwt}`,
+  //         'Content-Type': 'application/json',
+  //       },
+  //     })
+
+  //     // console.log(respose.data);
+  //     setFormData({
+  //       mobile: respose?.data?.number,
+  //       name: respose?.data?.name,
+  //       email: respose?.data?.email,
+  //     })
+  //   } catch (err) {
+  //     console.log('error in get user', err)
+  //   }
+  // }
+  // useEffect(() => {
+  //   getMe()
+  // }, [])
+  return (
+    <main>
+      <section className="bg-soft d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
+        <Container>
+          <Row className="justify-content-center">
+            <p className="text-center">
+              <Card.Link as={Link} to={'/dashboard'} className="text-gray-700">
+                <FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to Dashboard
+              </Card.Link>
+            </p>
+            <Col xs={12} className="d-flex align-items-center justify-content-center">
+              <div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                <h3 className="mb-4">Profile</h3>
+                <Form onSubmit={formHandler}>
+                  <Form.Group id="name" className="mb-4">
+                    <Form.Label>Name</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faUser} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        required
+                        type="text"
+                        placeholder="Your Name"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleInputChange}
+                      />
+                    </InputGroup>
+                  </Form.Group>
+
+                  <Form.Group id="email" className="mb-4">
+                    <Form.Label>Email</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faEnvelope} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        autoFocus
+                        required
+                        type="email"
+                        placeholder="example@gmail.com"
+                        name="email"
+                        value={formData.email}
+                        onChange={handleInputChange}
+                        pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
+                        title="Please enter a valid email address"
+                      />
+                    </InputGroup>
+                  </Form.Group>
+
+                  <Form.Group id="mobile" className="mb-4">
+                    <Form.Label>Mobile Number</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faMobile} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        required
+                        type="tel"
+                        placeholder="Your Mobile Number"
+                        name="mobile"
+                        value={formData.mobile}
+                        onChange={handleInputChange}
+                        // pattern="[0-9]{10}" // Assuming a 10-digit mobile number, adjust as needed
+                        title="Please enter a valid 10-digit mobile number"
+                      />
+                    </InputGroup>
+                  </Form.Group>
+
+                  <Button variant="primary" type="submit" className="w-100">
+                    {Loading ? <>Loading...</> : <>Update</>}
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  )
+}
+
+export default MyProfile
--- 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/shops/Shop.js
+++ b/src/views/shops/Shop.js
@ -0,0 +1,11 @@
+import React from 'react'
+
+const Shop = () => {
+  return (
+    <>
+      <div>Shop</div>
+    </>
+  )
+}
+
+export default Shop
--- 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/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@ -0,0 +1,898 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCardHeader,
+  CCol,
+  CLink,
+  CRow,
+  CWidgetStatsB,
+  CWidgetStatsC,
+  CWidgetStatsE,
+  CWidgetStatsF,
+} from '@coreui/react'
+import { getStyle } from '@coreui/utils'
+import CIcon from '@coreui/icons-react'
+import {
+  cilArrowRight,
+  cilBasket,
+  cilBell,
+  cilChartPie,
+  cilMoon,
+  cilLaptop,
+  cilPeople,
+  cilSettings,
+  cilSpeech,
+  cilSpeedometer,
+  cilUser,
+  cilUserFollow,
+} from '@coreui/icons'
+import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+import { DocsExample } from 'src/components'
+
+import WidgetsBrand from './WidgetsBrand'
+import WidgetsDropdown from './WidgetsDropdown'
+
+const Widgets = () => {
+  const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
+
+  return (
+    <CCard className="mb-4">
+      <CCardHeader>Widgets</CCardHeader>
+      <CCardBody>
+        <DocsExample href="components/widgets/#cwidgetstatsa">
+          <WidgetsDropdown />
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                progress={{ color: 'success', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+                title="Widget title"
+                value="89.9%"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                value="12.124"
+                title="Widget title"
+                progress={{ color: 'info', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                value="$98.111,00"
+                title="Widget title"
+                progress={{ color: 'warning', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                value="2 TB"
+                title="Widget title"
+                progress={{ color: 'primary', value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                color="success"
+                inverse
+                value="89.9%"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                color="info"
+                inverse
+                value="12.124"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                color="warning"
+                inverse
+                value="$98.111,00"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsB
+                color="primary"
+                inverse
+                value="2 TB"
+                title="Widget title"
+                progress={{ value: 89.9 }}
+                text="Lorem ipsum dolor sit amet enim."
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatse">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-danger'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-primary'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartBar
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: getStyle('--cui-success'),
+                          borderColor: 'transparent',
+                          borderWidth: 1,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-danger'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-success'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+            <CCol sm={4} md={3} xl={2}>
+              <CWidgetStatsE
+                chart={
+                  <CChartLine
+                    className="mx-auto"
+                    style={{ height: '40px', width: '80px' }}
+                    data={{
+                      labels: [
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                        'T',
+                        'W',
+                        'T',
+                        'F',
+                        'S',
+                        'S',
+                        'M',
+                      ],
+                      datasets: [
+                        {
+                          backgroundColor: 'transparent',
+                          borderColor: getStyle('--cui-info'),
+                          borderWidth: 2,
+                          data: [
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                            random(40, 100),
+                          ],
+                        },
+                      ],
+                    }}
+                    options={{
+                      maintainAspectRatio: false,
+                      elements: {
+                        line: {
+                          tension: 0.4,
+                        },
+                        point: {
+                          radius: 0,
+                        },
+                      },
+                      plugins: {
+                        legend: {
+                          display: false,
+                        },
+                      },
+                      scales: {
+                        x: {
+                          display: false,
+                        },
+                        y: {
+                          display: false,
+                        },
+                      },
+                    }}
+                  />
+                }
+                title="title"
+                value="1,123"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilUser} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="info"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-body-secondary"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="info"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-body-secondary"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-body-secondary"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+                footer={
+                  <CLink
+                    className="font-weight-bold font-xs text-body-secondary"
+                    href="https://coreui.io/"
+                    rel="noopener norefferer"
+                    target="_blank"
+                  >
+                    View more
+                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
+                  </CLink>
+                }
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="primary"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilUser} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="info"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="warning"
+              />
+            </CCol>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
+              <CWidgetStatsF
+                icon={<CIcon width={24} icon={cilBell} size="xl" />}
+                padding={false}
+                title="income"
+                value="$1.999,50"
+                color="danger"
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsd">
+          <WidgetsBrand />
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsd">
+          <WidgetsBrand withCharts />
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CCardGroup className="mb-4">
+            <CWidgetStatsC
+              icon={<CIcon icon={cilPeople} height={36} />}
+              value="87.500"
+              title="Visitors"
+              progress={{ color: 'info', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilUserFollow} height={36} />}
+              value="385"
+              title="New Clients"
+              progress={{ color: 'success', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilBasket} height={36} />}
+              value="1238"
+              title="Products sold"
+              progress={{ color: 'warning', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilChartPie} height={36} />}
+              value="28%"
+              title="Returning Visitors"
+              progress={{ color: 'primary', value: 75 }}
+            />
+            <CWidgetStatsC
+              icon={<CIcon icon={cilSpeedometer} height={36} />}
+              value="5:34:11"
+              title="Avg. Time"
+              progress={{ color: 'danger', value: 75 }}
+            />
+          </CCardGroup>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilPeople} height={36} />}
+                value="87.500"
+                title="Visitors"
+                progress={{ color: 'info', value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilUserFollow} height={36} />}
+                value="385"
+                title="New Clients"
+                progress={{ color: 'success', value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilBasket} height={36} />}
+                value="1238"
+                title="Products sold"
+                progress={{ color: 'warning', value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilChartPie} height={36} />}
+                value="28%"
+                title="Returning Visitors"
+                progress={{ color: 'primary', value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilSpeedometer} height={36} />}
+                value="5:34:11"
+                title="Avg. Time"
+                progress={{ color: 'danger', value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                icon={<CIcon icon={cilSpeech} height={36} />}
+                value="972"
+                title="Comments"
+                progress={{ color: 'info', value: 75 }}
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="info"
+                icon={<CIcon icon={cilPeople} height={36} />}
+                value="87.500"
+                title="Visitors"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="success"
+                icon={<CIcon icon={cilUserFollow} height={36} />}
+                value="385"
+                title="New Clients"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="warning"
+                icon={<CIcon icon={cilBasket} height={36} />}
+                value="1238"
+                title="Products sold"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="primary"
+                icon={<CIcon icon={cilChartPie} height={36} />}
+                value="28%"
+                title="Returning Visitors"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="danger"
+                icon={<CIcon icon={cilSpeedometer} height={36} />}
+                value="5:34:11"
+                title="Avg. Time"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+            <CCol xs={6} lg={4} xxl={2}>
+              <CWidgetStatsC
+                color="info"
+                icon={<CIcon icon={cilSpeech} height={36} />}
+                value="972"
+                title="Comments"
+                inverse
+                progress={{ value: 75 }}
+              />
+            </CCol>
+          </CRow>
+        </DocsExample>
+      </CCardBody>
+    </CCard>
+  )
+}
+
+export default Widgets
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@ -0,0 +1,182 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CWidgetStatsD, CRow, CCol } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
+import { CChart } from '@coreui/react-chartjs'
+
+const WidgetsBrand = (props) => {
+  const chartOptions = {
+    elements: {
+      line: {
+        tension: 0.4,
+      },
+      point: {
+        radius: 0,
+        hitRadius: 10,
+        hoverRadius: 4,
+        hoverBorderWidth: 3,
+      },
+    },
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  }
+
+  return (
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsD
+          {...(props.withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [65, 59, 84, 84, 51, 55, 40],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
+          values={[
+            { title: 'friends', value: '89K' },
+            { title: 'feeds', value: '459' },
+          ]}
+          style={{
+            '--cui-card-cap-bg': '#3b5998',
+          }}
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsD
+          {...(props.withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [1, 13, 9, 17, 34, 41, 38],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
+          values={[
+            { title: 'followers', value: '973k' },
+            { title: 'tweets', value: '1.792' },
+          ]}
+          style={{
+            '--cui-card-cap-bg': '#00aced',
+          }}
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsD
+          {...(props.withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [78, 81, 80, 45, 34, 12, 40],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
+          values={[
+            { title: 'contacts', value: '500' },
+            { title: 'feeds', value: '1.292' },
+          ]}
+          style={{
+            '--cui-card-cap-bg': '#4875b4',
+          }}
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsD
+          color="warning"
+          {...(props.withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [35, 23, 56, 22, 97, 23, 64],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
+          values={[
+            { title: 'events', value: '12+' },
+            { title: 'meetings', value: '4' },
+          ]}
+        />
+      </CCol>
+    </CRow>
+  )
+}
+
+WidgetsBrand.propTypes = {
+  className: PropTypes.string,
+  withCharts: PropTypes.bool,
+}
+
+export default WidgetsBrand
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@ -0,0 +1,396 @@
+import React, { useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  CRow,
+  CCol,
+  CDropdown,
+  CDropdownMenu,
+  CDropdownItem,
+  CDropdownToggle,
+  CWidgetStatsA,
+} from '@coreui/react'
+import { getStyle } from '@coreui/utils'
+import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+import CIcon from '@coreui/icons-react'
+import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
+
+const WidgetsDropdown = (props) => {
+  const widgetChartRef1 = useRef(null)
+  const widgetChartRef2 = useRef(null)
+
+  useEffect(() => {
+    document.documentElement.addEventListener('ColorSchemeChange', () => {
+      if (widgetChartRef1.current) {
+        setTimeout(() => {
+          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+          widgetChartRef1.current.update()
+        })
+      }
+
+      if (widgetChartRef2.current) {
+        setTimeout(() => {
+          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+          widgetChartRef2.current.update()
+        })
+      }
+    })
+  }, [widgetChartRef1, widgetChartRef2])
+
+  return (
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsA
+          color="primary"
+          value={
+            <>
+              26K{' '}
+              <span className="fs-6 fw-normal">
+                (-12.4% <CIcon icon={cilArrowBottom} />)
+              </span>
+            </>
+          }
+          title="Users"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
+                <CIcon icon={cilOptions} />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              ref={widgetChartRef1}
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'transparent',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointBackgroundColor: getStyle('--cui-primary'),
+                    data: [65, 59, 84, 84, 51, 55, 40],
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                      drawBorder: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    min: 30,
+                    max: 89,
+                    display: false,
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 1,
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 4,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsA
+          color="info"
+          value={
+            <>
+              $6.200{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Income"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
+                <CIcon icon={cilOptions} />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              ref={widgetChartRef2}
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'transparent',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointBackgroundColor: getStyle('--cui-info'),
+                    data: [1, 18, 9, 17, 34, 22, 11],
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                      drawBorder: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    min: -9,
+                    max: 39,
+                    display: false,
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 1,
+                  },
+                  point: {
+                    radius: 4,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsA
+          color="warning"
+          value={
+            <>
+              2.49%{' '}
+              <span className="fs-6 fw-normal">
+                (84.7% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Conversion Rate"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
+                <CIcon icon={cilOptions} />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              className="mt-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'rgba(255,255,255,.2)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    data: [78, 81, 80, 45, 34, 12, 40],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 2,
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6} xl={4} xxl={3}>
+        <CWidgetStatsA
+          color="danger"
+          value={
+            <>
+              44K{' '}
+              <span className="fs-6 fw-normal">
+                (-23.6% <CIcon icon={cilArrowBottom} />)
+              </span>
+            </>
+          }
+          title="Sessions"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
+                <CIcon icon={cilOptions} />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartBar
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: [
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                  'May',
+                  'June',
+                  'July',
+                  'August',
+                  'September',
+                  'October',
+                  'November',
+                  'December',
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                ],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'rgba(255,255,255,.2)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+                    barPercentage: 0.6,
+                  },
+                ],
+              }}
+              options={{
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    grid: {
+                      display: false,
+                      drawTicks: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                      drawBorder: false,
+                      drawTicks: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+    </CRow>
+  )
+}
+
+WidgetsDropdown.propTypes = {
+  className: PropTypes.string,
+  withCharts: PropTypes.bool,
+}
+
+export default WidgetsDropdown
--- a/vite.config.mjs
+++ b/vite.config.mjs
@ -0,0 +1,49 @@
+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: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+  }
+})