Initial import

2026-03-13 11:36:17 +00:00 · 2026-03-13 11:36:17 +00:00 · d52862d500
commit d52862d500
471 changed files with 38882 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+VITE_BACKEND=false
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm test
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+/node_modules/
+/.idea/
+build
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+22
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,6 @@
+module.exports = {
+    trailingComma: "es5",
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true
+};
--- a/LICENSE.txt
+++ b/LICENSE.txt
@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2022 Flatlogic LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,145 @@
+# 🚀 React Material Admin - A Free Material-UI Dashboard Template!
+
+[View Demo](https://flatlogic.com/templates/react-material-admin-full/demo) | [Download](https://github.com/flatlogic/react-material-admin/archive/refs/heads/master.zip) | [More Templates](https://flatlogic.com/templates) | [Discord Community](https://discord.gg/flatlogic-community) | [Support Forum](https://flatlogic.com/forum)
+
+**Originally a premium product priced at $99+, now available for free!** 🎉
+
+[![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/templates/react-material-admin-full/demo)
+
+Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web App Generator](https://flatlogic.com/generator) - our new tool, sort of a template++.
+
+---
+
+## 🎯 Why React Material Admin?
+- **Ex-Premium**: This template was previously paid. Enjoy it for free now. 😉
+- **Material-UI Based**: Built with Material-UI for a modern and sleek UI.
+- **Join the Community**: [Flatlogic Discord](https://discord.gg/flatlogic-community) is where the action happens.
+- **Free Node.js Backend**: Pair it up with [this backend](https://github.com/flatlogic/nodejs-backend) to go full-stack.
+
+---
+
+## 🚀 Quick Start
+
+1. **Clone the repo**
+   ```bash
+   git clone https://github.com/flatlogic/react-material-admin.git
+   cd react-material-admin
+   ```
+2. **Use Node.js 22.x (recommended) or 20.19+**
+   ```bash
+   node -v
+   ```
+3. **Install dependencies**
+   ```bash
+   npm install
+   ```
+4. **Run frontend-only mode (default)**
+   ```bash
+   npm run dev
+   ```
+5. **Enable backend mode (optional)**
+   - Create `.env.local`:
+     ```bash
+     VITE_BACKEND=true
+     ```
+   - Start backend API on `http://localhost:8080`
+   - Run:
+     ```bash
+     npm run dev
+     ```
+6. **Build for production**
+   ```bash
+   npm run build
+   ```
+7. **Preview production build (optional)**
+   ```bash
+   npm run preview
+   ```
+
+---
+
+## 📌 Current Stack Snapshot
+
+- React `19.2.4`
+- MUI `7.x` + Emotion
+- React Router `7.x` (`BrowserRouter`, hooks API)
+- Context-based state for auth/users/layout/theme
+- Vite `7.x` + `@vitejs/plugin-react-swc`
+- Vitest `4.x` smoke tests + GitHub Actions CI (`lint`, `build`, `test`)
+- Frontend-only users/auth fallback is available when backend is disabled
+
+---
+
+## 🧩 Features
+
+- Three Color Themes
+- Fully Responsive
+- React 19
+- MUI 7
+- Authentication System
+- Modular Architecture
+- Charts Libraries
+- Dashboard Pages
+- CSS-in-JS Styling
+- Vite-based build setup
+
+---
+
+## 🛠 Built With
+
+- React 19
+- MUI 7
+- React Hooks & Context API
+- React Router v7
+- Vite 7 + SWC React plugin
+- Vitest + Testing Library
+- Node.js (for backend)
+
+---
+
+## 📦 Components
+
+- UI Elements (Buttons, Modals, Forms)
+- Charts (Line, Bar, Pie)
+- Authentication (Login, Signup)
+- Tables (Static, Dynamic)
+- Profile Page
+- Notifications
+
+---
+
+## 🌍 Available Variants
+
+|               | **Material**                                              | **Transparent**                                         | **Classic**                                          | **Sofia**                                          | **Flatlogic**                                      |
+|---------------|-----------------------------------------------------------|---------------------------------------------------------|-------------------------------------------------------|-----------------------------------------------------|----------------------------------------------------|
+| **React**     | [React Material Admin](https://github.com/flatlogic/react-material-admin) | [Light Blue React](https://github.com/flatlogic/light-blue-react) | [Sing App React](https://github.com/flatlogic/sing-app-react) | [Sofia React](https://github.com/flatlogic/sofia-react) | [One React](https://github.com/flatlogic/one-react) |
+| **Angular**   | [Angular Material Admin](https://github.com/flatlogic/angular-material-admin-full) | [Light Blue Angular](https://github.com/flatlogic/light-blue-angular) | [Sing App Angular](https://github.com/flatlogic/sing-app-angular) | - | - |
+| **Vue**       | [Material Vue](https://github.com/flatlogic/material-vue-full) | [Light Blue Vue](https://github.com/flatlogic/light-blue-vue) | [Sing App Vue](https://github.com/flatlogic/sing-app-vue-dashboard) | - | - |
+| **Bootstrap** | - | [Light Blue HTML5](https://github.com/flatlogic/light-blue-html5) | [Sing App HTML5](https://github.com/flatlogic/sing-app-html5) | - | [One Bootstrap](https://github.com/flatlogic/one-bootstrap-template-full) |
+
+
+Additionally, these templates are tailored for specific business needs:
+- [E-Commerce Frontend (React)](https://github.com/flatlogic/ecommerce-frontend) - A complete e-commerce solution.
+- [Bookkeeper UI (React)](https://github.com/flatlogic/bookkeeper-ui) - Accounting dashboard for finance management.
+- [User Management Template (React)](https://github.com/flatlogic/user-management-template) - User authentication and management.
+
+---
+
+## 👨‍💻 How to Contribute
+
+- **Star this repo ⭐** - show some love.
+- **Report bugs** - but be nice.
+- **Join the [Discord](https://discord.gg/flatlogic-community)** - meet fellow devs.
+
+---
+
+## 🔥 About Flatlogic
+
+[Flatlogic](https://flatlogic.com/ai-software-development-agent) builds modern business software so you don't have to. Our AI Software Development Agent helps you generate, deploy, and maintain enterprise applications with minimal effort.
+
+---
+
+> **Questions or feedback?**  
+> Join our [Flatlogic Community Discord](https://discord.gg/flatlogic-community) or visit our [support forum](https://flatlogic.com/forum). We might even reply!
+
+---
--- a/changelog.md
+++ b/changelog.md
@ -0,0 +1,136 @@
+# Changelog
+
+## [3.0.1] - 22/02/2026
+
+- Fixed CI build failure by restoring direct `uuid` dependency used in users/forms flows.
+- Verified release checks after fix (`lint`, `build`, `test`) to keep pipeline green.
+
+## [3.0.0] - 22/02/2026
+
+- Migrated build tooling from CRA/rewired to Vite (`dev`, `build`, `preview`) with npm-only workflow.
+- Upgraded runtime stack to modern baseline: React Router 7 + Vite 7 + SWC React plugin.
+- Removed legacy runtime layers (`connected-react-router`, old router/history glue, Babel project config, CRA polyfill path).
+- Completed active-code UI modernization: no legacy `@material-ui/*`, class components migrated to hooks in active paths.
+- Restored and modernized maps using `leaflet` + `react-leaflet` + `topojson-client`.
+- Added smoke test coverage on critical routes (login, dashboard, users) with Vitest.
+- Added CI quality gates (`lint`, `build`, `test`) and cleaned eslint output to zero warnings/errors.
+- Refreshed README and modernization plan docs to match the current stack and release workflow.
+
+## [2.4.1] - 22/11/2024
+
+- Updated dependencies
+
+## [2.4.0] - 10/09/2024
+
+- Added react-scripts version 5 along with webpack version 5 support.
+- Added support for node.js version > 20
+- Removed old webpack configs.
+- Removed unnecessary dev dependencies.
+
+# [2.3.4] - 20/12/2023
+
+- Update dependencies
+
+# [2.3.3] - 16/05/2023
+
+- Update dependencies
+- Update react version
+
+# [2.3.2] - 20/07/2022
+
+- Fix ecommerce editing
+
+# [2.3.1] - 18/07/2022
+
+- Fix users management
+
+# [2.3.0] - 01/06/2022
+
+- Updated from MUI4 to MUI5, fixed Dark Theme
+- Fixed Grid actions
+- Fixed various bugs related to DataGrid
+- Updated packages
+
+# [2.2.5] - 05/03/2021
+
+- Fixed errors
+- Clear code
+- Hide warnings
+
+# [2.2.4]
+
+- Updated documentation
+
+# [2.2.3]
+
+### New Features
+- Added Profile page
+- Added Grid page
+- Updated packages
+- Updated README.md
+
+# [2.1.3]
+
+### Updated
+- Added link to flatlogic on login and register pages
+
+# [2.1.2]
+
+### Updated
+- Updated fullcalendar package to v5.3.0
+
+# [2.1.1]
+
+### Improved
+- Improved css
+
+# [2.1.0]
+
+### New Features
+- Added upload image functionality
+
+# [2.0.0]
+
+### New Features
+- Added user management table
+- Added register functionality
+- Added reset password functionality
+- User invitation functionality
+- Social Login
+
+# [1.2.1]
+
+### Fixed
+- JWT token checking fix
+
+### Updated
+- Update scrollbar color on Windows devices
+- Some color improvements
+
+# [1.1.1]
+
+### Updated
+- Adjust unused libs imports
+- Updated Docs
+- Minor components updates
+
+### New Features
+- Docs full update
+
+### Fixed
+- Wrappers of the components fix
+- Performance improve
+
+## [1.1.0]
+
+### Fixed
+
+- set localStorage item of theme
+
+### Updated
+
+- redux updates
+
+## [1.0.0]
+
+Initial version of the project
--- a/docs/404.html
+++ b/docs/404.html
@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="React Material Admin Full" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="16x16" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="48x48" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="80x80" type="image/png" />
+    <link rel="manifest" href="/react-material-admin/manifest.json" />
+    <title>React Material Admin Full</title>
+    <script type="module" crossorigin src="/react-material-admin/assets/index-DJaTQbrV.js"></script>
+    <link rel="stylesheet" crossorigin href="/react-material-admin/assets/index-DwtXvBEq.css">
+  </head>
+  <body style="font-family: 'Roboto', sans-serif">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/docs/assets/1-CmIqmZXz.jpg
+++ b/docs/assets/1-CmIqmZXz.jpg
--- a/docs/assets/2-MJzYJRzQ.jpg
+++ b/docs/assets/2-MJzYJRzQ.jpg
--- a/docs/assets/3-Dr4xpczX.jpg
+++ b/docs/assets/3-Dr4xpczX.jpg
--- a/docs/assets/FolderRedDark-Dp_8oWLe.svg
+++ b/docs/assets/FolderRedDark-Dp_8oWLe.svg
@ -0,0 +1,13 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#E34D82"/>
+<path opacity="0.49721" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4932C9.54565 55.0477 21.9728 49.6674 37.7396 39.1574C46.3708 33.404 46.4425 24.1292 46.525 13.4796C46.544 11.0214 46.5636 8.48993 46.6891 5.91162L50.8424 9.3727L133.374 9.37209C140.15 9.37209 142.608 10.0776 145.085 11.4025C147.562 12.7274 149.507 14.6716 150.831 17.1489L150.987 17.4464C152.212 19.8297 152.862 22.3545 152.862 28.8598V43.034C150.59 48.7083 147.659 54.1668 144.733 59.3244C143.828 60.9189 142.586 62.349 141.349 63.7735L141.349 63.7736C139.334 66.0926 137.333 68.3967 136.822 71.3709C135.995 76.1813 136.631 81.0789 137.268 85.9863C137.813 90.1865 138.359 94.3938 137.989 98.5597C137.349 105.781 128.214 111.186 118.908 114.939H19.4882L18.6955 114.936C12.5153 114.882 10.1555 114.181 7.77732 112.909C5.30001 111.584 3.3558 109.64 2.03092 107.163L1.87491 106.865C0.650726 104.482 0.000488281 101.957 0.000488281 95.4517V58.4932Z" fill="#EE266D"/>
+<path opacity="0.244629" fill-rule="evenodd" clip-rule="evenodd" d="M124.848 49.2478C133.675 49.2478 140.832 42.0915 140.832 33.2638C140.832 24.4361 133.675 17.2798 124.848 17.2798C116.02 17.2798 108.864 24.4361 108.864 33.2638C108.864 42.0915 116.02 49.2478 124.848 49.2478Z" fill="white"/>
+<g opacity="0.801781">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.283 36.4049 118.905 37.0687C120.716 39.0009 122.847 40.1763 125.28 40.1763C127.714 40.1763 129.844 39.0009 131.655 37.0687C132.278 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.278 30.9877 131.655 30.3239C129.844 28.3917 127.714 27.2163 125.28 27.2163C122.847 27.2163 120.716 28.3917 118.905 30.3239C118.283 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.397 35.4877 118.908 34.8465 118.494 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.494 33.1869C118.908 32.5461 119.397 31.9049 119.955 31.3087C121.519 29.6409 123.304 28.6563 125.28 28.6563C127.257 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.067 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.067 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.257 38.7363 125.28 38.7363C123.304 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.69 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.69 30.8163 125.28 30.8163C126.871 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.871 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="116" y="27" width="18" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.283 36.4049 118.905 37.0687C120.716 39.0009 122.847 40.1763 125.28 40.1763C127.714 40.1763 129.844 39.0009 131.655 37.0687C132.278 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.278 30.9877 131.655 30.3239C129.844 28.3917 127.714 27.2163 125.28 27.2163C122.847 27.2163 120.716 28.3917 118.905 30.3239C118.283 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.397 35.4877 118.908 34.8465 118.494 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.494 33.1869C118.908 32.5461 119.397 31.9049 119.955 31.3087C121.519 29.6409 123.304 28.6563 125.28 28.6563C127.257 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.067 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.067 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.257 38.7363 125.28 38.7363C123.304 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.69 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.69 30.8163 125.28 30.8163C126.871 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.871 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</g>
+</svg>
--- a/docs/assets/FolderRedLight-C-vAuCj3.svg
+++ b/docs/assets/FolderRedLight-C-vAuCj3.svg
@ -0,0 +1,13 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.68471" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#FF5992"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4932C9.54565 55.0477 21.9728 49.6674 37.7396 39.1574C46.3708 33.404 46.4425 24.1292 46.525 13.4796C46.544 11.0214 46.5636 8.48993 46.6891 5.91162L50.8424 9.3727L133.374 9.37209C140.15 9.37209 142.608 10.0776 145.085 11.4025C147.562 12.7274 149.507 14.6716 150.831 17.1489L150.987 17.4464C152.212 19.8297 152.862 22.3545 152.862 28.8598V43.034C150.59 48.7083 147.659 54.1668 144.733 59.3244C143.828 60.9189 142.586 62.349 141.349 63.7735L141.349 63.7736C139.334 66.0926 137.333 68.3967 136.822 71.3709C135.995 76.1813 136.631 81.0789 137.268 85.9863C137.813 90.1865 138.359 94.3938 137.989 98.5597C137.349 105.781 128.214 111.186 118.908 114.939H19.4882L18.6955 114.936C12.5153 114.882 10.1555 114.181 7.77732 112.909C5.30001 111.584 3.3558 109.64 2.03092 107.163L1.87491 106.865C0.650726 104.482 0.000488281 101.957 0.000488281 95.4517V58.4932Z" fill="#FF5992"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.848 49.2478C133.676 49.2478 140.832 42.0915 140.832 33.2638C140.832 24.4361 133.676 17.2798 124.848 17.2798C116.02 17.2798 108.864 24.4361 108.864 33.2638C108.864 42.0915 116.02 49.2478 124.848 49.2478Z" fill="#EE266D"/>
+<g opacity="0.801781">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.282 36.4049 118.905 37.0687C120.716 39.0009 122.846 40.1763 125.28 40.1763C127.713 40.1763 129.844 39.0009 131.655 37.0687C132.277 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.277 30.9877 131.655 30.3239C129.844 28.3917 127.713 27.2163 125.28 27.2163C122.846 27.2163 120.716 28.3917 118.905 30.3239C118.282 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.396 35.4877 118.907 34.8465 118.493 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.493 33.1869C118.907 32.5461 119.396 31.9049 119.955 31.3087C121.519 29.6409 123.303 28.6563 125.28 28.6563C127.256 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.066 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.066 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.256 38.7363 125.28 38.7363C123.303 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.689 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.689 30.8163 125.28 30.8163C126.87 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.87 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="116" y="27" width="18" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.282 36.4049 118.905 37.0687C120.716 39.0009 122.846 40.1763 125.28 40.1763C127.713 40.1763 129.844 39.0009 131.655 37.0687C132.277 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.277 30.9877 131.655 30.3239C129.844 28.3917 127.713 27.2163 125.28 27.2163C122.846 27.2163 120.716 28.3917 118.905 30.3239C118.282 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.396 35.4877 118.907 34.8465 118.493 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.493 33.1869C118.907 32.5461 119.396 31.9049 119.955 31.3087C121.519 29.6409 123.303 28.6563 125.28 28.6563C127.256 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.066 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.066 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.256 38.7363 125.28 38.7363C123.303 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.689 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.689 30.8163 125.28 30.8163C126.87 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.87 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</g>
+</svg>
--- a/docs/assets/FolderYellowDark-C3qCzRZs.svg
+++ b/docs/assets/FolderYellowDark-C3qCzRZs.svg
@ -0,0 +1,13 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.82301" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#F3B144"/>
+<path opacity="0.899809" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1703 138.359 94.3777 137.989 98.5435C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#E9B55F"/>
+<path opacity="0.245419" fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="white"/>
+<g opacity="0.796224">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.853 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.853 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="25" width="15" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.853 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.853 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</g>
+</svg>
--- a/docs/assets/FolderYellowLight-oRKdS_lX.svg
+++ b/docs/assets/FolderYellowLight-oRKdS_lX.svg
@ -0,0 +1,13 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.667457" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#FFC35F"/>
+<path opacity="0.693848" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1704 138.359 94.3777 137.989 98.5436C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#FFC35F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="#FF9500"/>
+<g opacity="0.796224">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.854 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.854 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="25" width="15" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.854 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.854 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</g>
+</svg>
--- a/docs/assets/a1-DgqnjE2v.jpg
+++ b/docs/assets/a1-DgqnjE2v.jpg
--- a/docs/assets/a2-BF5wLY3O.jpg
+++ b/docs/assets/a2-BF5wLY3O.jpg
--- a/docs/assets/a3-BT44phKs.jpg
+++ b/docs/assets/a3-BT44phKs.jpg
--- a/docs/assets/a3-Q2dxtR85.jpg
+++ b/docs/assets/a3-Q2dxtR85.jpg
--- a/docs/assets/a4-CjndXA0d.jpg
+++ b/docs/assets/a4-CjndXA0d.jpg
--- a/docs/assets/aexpress-BqJuj5k3.svg
+++ b/docs/assets/aexpress-BqJuj5k3.svg
@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="56.48px" height="56.48px" viewBox="0 0 56.48 56.48" style="enable-background:new 0 0 56.48 56.48;" xml:space="preserve"
+	>
+<g>
+	<path d="M24.25,26.305h-4.284v-5.367h4.284v1.118h-3.002v0.967h2.931v1.1h-2.931v1.072h3.002V26.305z M14.703,26.305l-1.863-4.206
+		v4.207h-2.61l-0.493-1.197h-2.67l-0.498,1.197H5.176l2.297-5.367h1.904l2.183,5.082v-5.082h2.094l1.679,3.641l1.541-3.641h2.138
+		v5.367h-1.315l-0.005-4.203l-1.86,4.203L14.703,26.305L14.703,26.305z M9.273,23.99l-0.877-2.139L7.524,23.99H9.273z
+		 M30.022,31.944c0,1.491-1.112,1.799-2.233,1.799h-1.6v1.8h-2.493l-1.58-1.777l-1.642,1.777h-5.081v-5.367h5.158l1.58,1.758
+		l1.632-1.758h4.098C28.879,30.175,30.022,30.458,30.022,31.944z M21.291,32.849l-1.403-1.563h-3.215v0.976h2.815v1.096h-2.815
+		v1.068h3.152L21.291,32.849z M24.911,30.751l-1.97,2.116l1.97,2.188V30.751z M28.645,31.944c0-0.47-0.32-0.659-0.784-0.659h-1.672
+		v1.367h1.656C28.339,32.653,28.645,32.408,28.645,31.944z M26.424,26.305H25.14v-5.367h2.95c0.655,0,1.138,0.017,1.554,0.257
+		c0.404,0.24,0.648,0.59,0.648,1.189c0,0.855-0.57,1.298-0.904,1.43c0.281,0.107,0.521,0.296,0.635,0.452
+		c0.182,0.267,0.213,0.505,0.213,0.984v1.055h-1.294l-0.006-0.677c0-0.323,0.031-0.787-0.202-1.045
+		c-0.187-0.188-0.473-0.229-0.935-0.229h-1.375V26.305z M26.422,23.248h1.559c0.249,0,0.457-0.003,0.635-0.11
+		c0.165-0.087,0.264-0.276,0.264-0.51c0-0.23-0.103-0.396-0.269-0.474c-0.152-0.086-0.386-0.097-0.608-0.097h-1.58L26.422,23.248
+		L26.422,23.248z M32.344,20.939h-1.309v5.367h1.309V20.939z M33.66,25.712c-0.452-0.456-0.688-1.074-0.688-2.049
+		c0-0.796,0.141-1.524,0.691-2.099c0.413-0.428,1.064-0.625,1.948-0.625h1.241v1.15h-1.215c-0.471,0-0.734,0.07-0.988,0.318
+		c-0.219,0.226-0.368,0.652-0.368,1.216c0,0.574,0.112,0.989,0.353,1.259c0.197,0.213,0.559,0.277,0.894,0.277h0.575l1.812-4.22
+		h1.921l2.172,5.076v-5.076h1.953l2.256,3.738v-3.738h1.312v5.367h-1.816l-2.434-4.028v4.028h-2.611l-0.5-1.197h-2.664l-0.482,1.197
+		H35.52C34.895,26.305,34.106,26.167,33.66,25.712z M37.963,23.99h1.77l-0.889-2.139L37.963,23.99z M35.27,23.041
+		c-0.012,0.017-0.102,0.21-0.102,0.582c0,0.368,0.059,0.545,0.102,0.625c0.045,0.012,0.128,0.026,0.252,0.026l0.556-1.299h-0.438
+		C35.338,22.974,35.307,23.006,35.27,23.041z M56.48,11.393v33.695c0,0.803-0.65,1.454-1.454,1.454H1.454
+		C0.65,46.542,0,45.89,0,45.087V11.393c0-0.803,0.65-1.454,1.454-1.454h53.572C55.83,9.939,56.48,10.59,56.48,11.393z
+		 M14.703,27.192h1.127c0.352,0,0.668-0.207,0.81-0.528l0.17-0.38v0.022c0,0.489,0.396,0.885,0.886,0.885h1.315
+		c0.18,0,0.337-0.068,0.478-0.159c0.14,0.091,0.297,0.159,0.478,0.159h4.284c0.166,0,0.313-0.058,0.444-0.137
+		c0.134,0.079,0.279,0.137,0.445,0.137h1.284c0.489,0,0.886-0.397,0.886-0.886v-1.066h0.489c0.111,0,0.19,0.003,0.249,0.007
+		c0.006,0.091,0.004,0.199,0.004,0.271l-0.002,0.118l0.005,0.677c0.004,0.486,0.4,0.879,0.887,0.879h1.294
+		c0.146,0,0.277-0.044,0.398-0.107c0.123,0.063,0.256,0.107,0.401,0.107h1.31c0.429,0,0.769-0.31,0.852-0.714
+		c0.729,0.611,1.751,0.714,2.322,0.714h1.502c0.359,0,0.685-0.22,0.818-0.555l0.262-0.643h1.478l0.271,0.652
+		c0.14,0.33,0.461,0.545,0.818,0.545h2.611c0.488,0,0.886-0.397,0.886-0.886v-0.847l0.787,1.305
+		c0.161,0.266,0.448,0.428,0.761,0.428h1.816c0.488,0,0.886-0.397,0.886-0.886v-5.367c0-0.489-0.396-0.886-0.886-0.886h-1.312
+		c-0.49,0-0.888,0.397-0.888,0.886v0.554l-0.61-1.011c-0.16-0.266-0.447-0.428-0.758-0.428h-1.953c-0.49,0-0.887,0.397-0.887,0.886
+		v0.753l-0.471-1.102c-0.141-0.325-0.46-0.537-0.814-0.537h-1.921c-0.196,0-0.381,0.064-0.53,0.176
+		c-0.147-0.111-0.332-0.176-0.529-0.176h-1.241c-1.052,0-1.834,0.256-2.408,0.753c-0.065-0.423-0.417-0.753-0.86-0.753h-1.309
+		c-0.349,0-0.645,0.207-0.789,0.499c-0.055-0.04-0.099-0.087-0.16-0.124c-0.603-0.348-1.234-0.375-1.997-0.375h-2.95
+		c-0.166,0-0.312,0.058-0.445,0.137c-0.131-0.079-0.278-0.137-0.444-0.137h-4.284c-0.181,0-0.338,0.067-0.478,0.159
+		c-0.141-0.092-0.298-0.159-0.478-0.159h-2.138c-0.354,0-0.676,0.213-0.814,0.541l-0.762,1.796l-0.839-1.822
+		c-0.146-0.313-0.461-0.515-0.805-0.515H11.56c-0.49,0-0.886,0.397-0.886,0.886v0.771l-0.481-1.122
+		c-0.141-0.325-0.46-0.536-0.815-0.536H7.474c-0.355,0-0.676,0.212-0.815,0.537l-2.296,5.367c-0.118,0.273-0.089,0.587,0.074,0.837
+		c0.164,0.248,0.442,0.398,0.74,0.398h1.394c0.356,0,0.68-0.216,0.816-0.546l0.271-0.652h1.486l0.267,0.648
+		c0.137,0.332,0.46,0.549,0.82,0.549h2.609c0.489,0,0.886-0.397,0.886-0.886v-0.021l0.168,0.381
+		C14.035,26.985,14.353,27.192,14.703,27.192z M52.19,33.849c0-0.75-0.2-1.308-0.64-1.76c-0.009-0.009-0.019-0.018-0.026-0.026
+		c0.245-0.158,0.405-0.433,0.405-0.746v-1.142c0-0.49-0.396-0.887-0.885-0.887h-2.572c-0.801,0-1.402,0.235-1.842,0.592
+		c-0.123-0.343-0.441-0.592-0.828-0.592h-2.57c-0.706,0-1.266,0.176-1.688,0.462c-0.152-0.271-0.432-0.462-0.764-0.462H36.5
+		c-0.346,0-0.635,0.202-0.781,0.489c-0.062-0.042-0.105-0.093-0.172-0.132c-0.619-0.331-1.279-0.357-1.961-0.357h-2.962
+		c-0.347,0-0.639,0.203-0.784,0.493c-0.449-0.294-1.081-0.493-1.979-0.493h-4.098c-0.247,0-0.482,0.102-0.65,0.283l-0.971,1.048
+		l-0.932-1.037c-0.167-0.188-0.406-0.294-0.659-0.294h-5.158c-0.489,0-0.886,0.396-0.886,0.887v5.367
+		c0,0.489,0.396,0.887,0.886,0.887h5.081c0.247,0,0.482-0.104,0.65-0.285l0.979-1.06l0.929,1.046
+		c0.168,0.189,0.41,0.297,0.663,0.297h2.493c0.49,0,0.887-0.396,0.887-0.886v-0.915h0.713c0.866,0,1.494-0.178,1.949-0.449v1.364
+		c0,0.489,0.396,0.886,0.887,0.886h1.289c0.489,0,0.886-0.396,0.886-0.886v-1.075h0.484c0.118,0,0.201,0.004,0.26,0.008
+		c0.006,0.095,0.006,0.211,0.004,0.287v0.78c0,0.489,0.396,0.886,0.887,0.886h1.287c0.142,0,0.271-0.041,0.39-0.1
+		c0.118,0.061,0.249,0.1,0.392,0.1h4.28c0.14,0,0.267-0.039,0.384-0.096c0.118,0.057,0.244,0.096,0.385,0.096h2.498
+		c0.797,0,1.441-0.194,1.928-0.539c0.136,0.316,0.449,0.539,0.815,0.539h2.498C51.107,36.429,52.19,35.464,52.19,33.849z
+		 M44.215,32.281l-0.689-0.02c-0.219,0-0.363-0.014-0.5-0.061c-0.161-0.061-0.28-0.197-0.28-0.4c0-0.17,0.052-0.299,0.194-0.387
+		c0.128-0.087,0.279-0.097,0.514-0.097h2.352v-1.142h-2.57c-1.346,0-1.834,0.818-1.834,1.598c0,1.697,1.503,1.621,2.701,1.66
+		c0.225,0,0.359,0.037,0.457,0.119c0.09,0.076,0.156,0.198,0.156,0.355c0,0.146-0.062,0.268-0.15,0.35
+		c-0.108,0.102-0.281,0.133-0.523,0.133h-2.488v1.151h2.498c1.293,0,2.016-0.539,2.016-1.694c0-0.551-0.135-0.879-0.385-1.137
+		C45.389,32.417,44.911,32.298,44.215,32.281z M34.881,33.048c0.284,0.104,0.519,0.295,0.627,0.451
+		c0.183,0.262,0.209,0.506,0.213,0.979v1.064h-1.287v-0.671c0-0.323,0.031-0.801-0.207-1.051c-0.188-0.192-0.473-0.238-0.941-0.238
+		h-1.37v1.96h-1.288v-5.367h2.961c0.649,0,1.121,0.027,1.545,0.252c0.403,0.244,0.658,0.58,0.658,1.192
+		C35.79,32.478,35.217,32.915,34.881,33.048z M34.371,31.866c0-0.229-0.099-0.396-0.265-0.483c-0.156-0.092-0.386-0.097-0.612-0.097
+		h-1.58v1.206h1.559c0.25,0,0.463-0.009,0.635-0.111C34.272,32.281,34.371,32.095,34.371,31.866z M36.502,35.542h4.28v-1.113
+		l-3.004-0.006v-1.067h2.93v-1.095h-2.93v-0.977h3.004v-1.109h-4.28V35.542z M49.456,32.281l-0.69-0.02
+		c-0.217,0-0.362-0.014-0.5-0.061c-0.159-0.061-0.279-0.197-0.279-0.4c0-0.17,0.052-0.299,0.193-0.387
+		c0.129-0.087,0.281-0.097,0.515-0.097h2.353v-1.142h-2.572c-1.344,0-1.834,0.818-1.834,1.598c0,1.697,1.504,1.621,2.703,1.66
+		c0.224,0,0.357,0.037,0.457,0.119c0.088,0.076,0.155,0.198,0.155,0.355c0,0.146-0.063,0.268-0.149,0.35
+		c-0.109,0.102-0.282,0.133-0.524,0.133h-2.487v1.151h2.498c1.293,0,2.014-0.539,2.014-1.694c0-0.551-0.133-0.879-0.385-1.137
+		C50.631,32.417,50.152,32.298,49.456,32.281z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/docs/assets/flatlogic-fzLmcyc0.jpeg
+++ b/docs/assets/flatlogic-fzLmcyc0.jpeg
--- a/docs/assets/gallery1-DGSLZf-L.jpg
+++ b/docs/assets/gallery1-DGSLZf-L.jpg
--- a/docs/assets/gallery10-DI1pvIyM.jpg
+++ b/docs/assets/gallery10-DI1pvIyM.jpg
--- a/docs/assets/gallery11-hZ8j93Gx.jpg
+++ b/docs/assets/gallery11-hZ8j93Gx.jpg
--- a/docs/assets/gallery12-Bl3gQrzf.jpg
+++ b/docs/assets/gallery12-Bl3gQrzf.jpg
--- a/docs/assets/gallery2-DjgoMOGX.jpg
+++ b/docs/assets/gallery2-DjgoMOGX.jpg
--- a/docs/assets/gallery3-P-rpFEKH.jpg
+++ b/docs/assets/gallery3-P-rpFEKH.jpg
--- a/docs/assets/gallery4-DCtNJ_Qn.jpg
+++ b/docs/assets/gallery4-DCtNJ_Qn.jpg
--- a/docs/assets/gallery5-DNF09C0h.jpg
+++ b/docs/assets/gallery5-DNF09C0h.jpg
--- a/docs/assets/gallery6-BNFJM8Sz.jpg
+++ b/docs/assets/gallery6-BNFJM8Sz.jpg
--- a/docs/assets/gallery7-DiAFQ1Bu.jpg
+++ b/docs/assets/gallery7-DiAFQ1Bu.jpg
--- a/docs/assets/gallery8-B7RAOBcs.jpg
+++ b/docs/assets/gallery8-B7RAOBcs.jpg
--- a/docs/assets/gallery9-Ca5uFBrN.jpg
+++ b/docs/assets/gallery9-Ca5uFBrN.jpg
--- a/docs/assets/img1-Dtu24cI6.jpg
+++ b/docs/assets/img1-Dtu24cI6.jpg
--- a/docs/assets/img2-hCLBWyRx.jpg
+++ b/docs/assets/img2-hCLBWyRx.jpg
--- a/docs/assets/img3-BBd_mS8I.jpg
+++ b/docs/assets/img3-BBd_mS8I.jpg
--- a/docs/assets/img4-DN0wnbGq.jpg
+++ b/docs/assets/img4-DN0wnbGq.jpg
--- a/docs/assets/img5-4MvFfME0.jpeg
+++ b/docs/assets/img5-4MvFfME0.jpeg
--- a/docs/assets/img6-Bz8EYk5e.jpg
+++ b/docs/assets/img6-Bz8EYk5e.jpg
--- a/docs/assets/index-DJaTQbrV.js
+++ b/docs/assets/index-DJaTQbrV.js
--- a/docs/assets/index-DwtXvBEq.css
+++ b/docs/assets/index-DwtXvBEq.css
--- a/docs/assets/isometric-B5fzShps.jpg
+++ b/docs/assets/isometric-B5fzShps.jpg
--- a/docs/assets/lifestyle-C2rvFiLo.jpg
+++ b/docs/assets/lifestyle-C2rvFiLo.jpg
--- a/docs/assets/main-profile-DO1VNM5Z.png
+++ b/docs/assets/main-profile-DO1VNM5Z.png
--- a/docs/assets/mastercard-BrkSmATm.svg
+++ b/docs/assets/mastercard-BrkSmATm.svg
@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 21.5" style="enable-background:new 0 0 34 21.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#FF5F00;}
+	.st2{fill:#EB001B;}
+	.st3{fill:#F79E1B;}
+</style>
+<rect id="XMLID_1_" x="0" width="34" height="21.5"/>
+<g id="XMLID_4703_">
+	<path id="XMLID_4607_" class="st0" d="M9.5,19.8v-1.2c0-0.5-0.3-0.8-0.7-0.8c-0.2,0-0.5,0.1-0.7,0.3c-0.1-0.2-0.3-0.3-0.6-0.3
+		c-0.2,0-0.4,0.1-0.6,0.3v-0.2H6.5v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.5-0.5c0.3,0,0.4,0.2,0.4,0.5v1.1h0.4v-1.1c0-0.3,0.2-0.5,0.5-0.5
+		c0.3,0,0.4,0.2,0.4,0.5v1.1L9.5,19.8L9.5,19.8z M15.8,17.9h-0.7v-0.6h-0.4v0.6h-0.4v0.4h0.4v0.9c0,0.4,0.2,0.7,0.7,0.7
+		c0.2,0,0.4-0.1,0.5-0.1l-0.1-0.3c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3-0.1-0.3-0.3v-0.9h0.7L15.8,17.9L15.8,17.9z M19.4,17.8
+		c-0.2,0-0.4,0.1-0.5,0.3v-0.2h-0.4v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0l0.1-0.4C19.6,17.8,19.5,17.8,19.4,17.8
+		L19.4,17.8z M14,18c-0.2-0.1-0.5-0.2-0.8-0.2c-0.5,0-0.8,0.2-0.8,0.6c0,0.3,0.2,0.5,0.7,0.6l0.2,0c0.2,0,0.4,0.1,0.4,0.2
+		c0,0.1-0.2,0.2-0.5,0.2c-0.3,0-0.5-0.1-0.6-0.2l-0.2,0.3c0.3,0.2,0.6,0.3,0.8,0.3c0.6,0,0.9-0.3,0.9-0.6c0-0.3-0.2-0.5-0.7-0.6
+		l-0.2,0c-0.2,0-0.3-0.1-0.3-0.2c0-0.1,0.2-0.2,0.4-0.2c0.2,0,0.5,0.1,0.6,0.2L14,18z M19.8,18.8c0,0.6,0.4,1,1,1
+		c0.3,0,0.5-0.1,0.7-0.2l-0.2-0.3c-0.2,0.1-0.3,0.2-0.5,0.2c-0.3,0-0.6-0.3-0.6-0.7c0-0.4,0.3-0.7,0.6-0.7c0.2,0,0.3,0.1,0.5,0.2
+		l0.2-0.3c-0.2-0.2-0.4-0.2-0.7-0.2C20.2,17.8,19.8,18.2,19.8,18.8L19.8,18.8z M17.1,17.8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1
+		c0.3,0,0.6-0.1,0.8-0.3l-0.2-0.3c-0.2,0.1-0.4,0.2-0.6,0.2c-0.3,0-0.5-0.2-0.6-0.5H18c0-0.1,0-0.1,0-0.2
+		C18,18.2,17.6,17.8,17.1,17.8L17.1,17.8z M17.1,18.2c0.3,0,0.5,0.2,0.5,0.5h-1C16.6,18.4,16.8,18.2,17.1,18.2L17.1,18.2z
+		 M11.9,18.8v-1h-0.4v0.2c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M10.3,18.8
+		c0-0.4,0.2-0.7,0.6-0.7c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C10.5,19.5,10.3,19.2,10.3,18.8L10.3,18.8z M25.2,17.8
+		c-0.2,0-0.4,0.1-0.5,0.3v-0.2h-0.4v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0l0.1-0.4C25.4,17.8,25.3,17.8,25.2,17.8
+		L25.2,17.8z M28.3,19.5C28.4,19.5,28.4,19.5,28.3,19.5c0.1,0,0.1,0,0.1,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1
+		c0,0,0,0,0,0.1c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1
+		c0,0,0,0,0-0.1C28.2,19.6,28.2,19.5,28.3,19.5C28.3,19.5,28.3,19.5,28.3,19.5z M28.3,19.9C28.4,19.9,28.4,19.9,28.3,19.9
+		c0.1,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0
+		c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0C28.2,19.8,28.3,19.8,28.3,19.9C28.3,19.9,28.3,19.9,28.3,19.9z M28.3,19.6
+		C28.4,19.6,28.4,19.6,28.3,19.6C28.4,19.6,28.4,19.7,28.3,19.6C28.4,19.7,28.4,19.7,28.3,19.6c0,0.1,0,0.1,0,0.1l0.1,0.1h0
+		l-0.1-0.1h0v0.1h0L28.3,19.6L28.3,19.6L28.3,19.6z M28.3,19.7L28.3,19.7L28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7
+		C28.4,19.7,28.4,19.7,28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7L28.3,19.7z M23.7,18.8v-1h-0.4v0.2
+		c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M22.2,18.8c0-0.4,0.2-0.7,0.6-0.7
+		c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C22.4,19.5,22.2,19.2,22.2,18.8L22.2,18.8z M27.6,18.8v-1.7h-0.4v1
+		c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M26.1,18.8c0-0.4,0.2-0.7,0.6-0.7
+		c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C26.3,19.5,26.1,19.2,26.1,18.8z"/>
+	<g id="XMLID_4571_">
+		<rect id="XMLID_4635_" x="13.5" y="3.2" class="st1" width="7" height="11.4"/>
+		<path id="XMLID_4576_" class="st2" d="M14.2,8.9c0-2.3,1.1-4.4,2.8-5.7c-1.2-1-2.8-1.6-4.5-1.6c-4,0-7.3,3.3-7.3,7.3
+			c0,4,3.3,7.3,7.3,7.3c1.7,0,3.3-0.6,4.5-1.6C15.3,13.3,14.2,11.2,14.2,8.9z"/>
+		<path id="XMLID_4707_" class="st3" d="M28.1,13.4v-0.2h0.1v0h-0.2v0H28L28.1,13.4L28.1,13.4z M28.5,13.4v-0.3h-0.1l-0.1,0.2
+			l-0.1-0.2h-0.1v0.3h0.1v-0.2l0.1,0.2h0.1l0.1-0.2L28.5,13.4L28.5,13.4L28.5,13.4z"/>
+		<path id="XMLID_4631_" class="st3" d="M28.8,8.9c0,4-3.3,7.3-7.3,7.3c-1.7,0-3.3-0.6-4.5-1.6c1.7-1.3,2.8-3.4,2.8-5.7
+			c0-2.3-1.1-4.4-2.8-5.7c1.2-1,2.8-1.6,4.5-1.6C25.5,1.6,28.8,4.9,28.8,8.9z"/>
+	</g>
+</g>
+</svg>
--- a/docs/assets/mountains-FnFFFzmH.jpeg
+++ b/docs/assets/mountains-FnFFFzmH.jpeg
--- a/docs/assets/profile-Bf-8o0G6.jpg
+++ b/docs/assets/profile-Bf-8o0G6.jpg
--- a/docs/assets/profilePhoto-D9kEOIpn.svg
+++ b/docs/assets/profilePhoto-D9kEOIpn.svg
--- a/docs/assets/rns-D8O4P7JT.png
+++ b/docs/assets/rns-D8O4P7JT.png
--- a/docs/assets/rnsHero-CFwZz59m.png
+++ b/docs/assets/rnsHero-CFwZz59m.png
--- a/docs/favicon
+++ b/docs/favicon
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/favicon.png
+++ b/docs/favicon.png
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>favicon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group" transform="translate(6.000000, 16.000000)" stroke-width="10.2749798">
+            <g id="Group-33" transform="translate(1.877678, 0.000000)" stroke="#536DFE">
+                <line x1="0.625892504" y1="45.8825324" x2="30.8138672" y2="0.335053688" id="Line-10"></line>
+            </g>
+            <line x1="0.69108964" y1="47.2797982" x2="66.0638503" y2="47.2797982" id="Line-10" stroke="#FBC02D"></line>
+            <line x1="32.6915447" y1="0.335053688" x2="67.0080515" y2="47.1046699" id="Line-10" stroke="#FF5252"></line>
+        </g>
+    </g>
+</svg>
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="React Material Admin Full" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="16x16" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="48x48" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="/react-material-admin/favicon.png" sizes="80x80" type="image/png" />
+    <link rel="manifest" href="/react-material-admin/manifest.json" />
+    <title>React Material Admin Full</title>
+    <script type="module" crossorigin src="/react-material-admin/assets/index-DJaTQbrV.js"></script>
+    <link rel="stylesheet" crossorigin href="/react-material-admin/assets/index-DwtXvBEq.css">
+  </head>
+  <body style="font-family: 'Roboto', sans-serif">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/docs/logo192.png
+++ b/docs/logo192.png
--- a/docs/logo512.png
+++ b/docs/logo512.png
--- a/docs/manifest.json
+++ b/docs/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "app.title",
+  "name": "app.title",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/eslint.config.cjs
+++ b/eslint.config.cjs
@ -0,0 +1,41 @@
+const js = require('@eslint/js');
+const globals = require('globals');
+
+module.exports = [
+  {
+    ignores: ['build/**', 'node_modules/**'],
+  },
+  {
+    files: ['src/**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      'no-case-declarations': 'warn',
+      'no-extra-boolean-cast': 'warn',
+      'no-prototype-builtins': 'warn',
+      'no-unused-vars': 'warn',
+      'no-useless-assignment': 'warn',
+    },
+  },
+  {
+    files: ['src/test/**/*.{js,jsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        vi: 'readonly',
+      },
+    },
+  },
+];
--- a/index.html
+++ b/index.html
@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="React Material Admin Full" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="icon" href="%BASE_URL%favicon.png" sizes="16x16" type="image/png" />
+    <link rel="icon" href="%BASE_URL%favicon.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="%BASE_URL%favicon.png" sizes="48x48" type="image/png" />
+    <link rel="icon" href="%BASE_URL%favicon.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="%BASE_URL%favicon.png" sizes="80x80" type="image/png" />
+    <link rel="manifest" href="%BASE_URL%manifest.json" />
+    <title>React Material Admin Full</title>
+  </head>
+  <body style="font-family: 'Roboto', sans-serif">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "exclude": ["node_modules", "build"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,76 @@
+{
+  "name": "react-material-full",
+  "description": "React Material Admin Full",
+  "version": "3.0.1",
+  "private": true,
+  "homepage": "./",
+  "scripts": {
+    "build": "vite build",
+    "start": "vite",
+    "dev": "vite",
+    "preview": "vite preview",
+    "lint": "cross-env NODE_ENV=development eslint src --ext .js,.jsx",
+    "lint:fix": "cross-env NODE_ENV=development eslint src --ext .js,.jsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fullcalendar/core": "^6.1.14",
+    "@fullcalendar/daygrid": "^6.1.14",
+    "@fullcalendar/interaction": "^6.1.14",
+    "@fullcalendar/list": "^6.1.14",
+    "@fullcalendar/react": "^6.1.14",
+    "@fullcalendar/timegrid": "^6.1.14",
+    "@mui/icons-material": "^7.3.8",
+    "@mui/material": "^7.3.8",
+    "@mui/x-data-grid": "^8.27.1",
+    "@mui/x-date-pickers": "^8.27.2",
+    "apexcharts": "^5.6.0",
+    "axios": "^1.13.5",
+    "classnames": "^2.3.2",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.19",
+    "formik": "^2.4.9",
+    "leaflet": "^1.9.4",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.4",
+    "react-apexcharts": "^2.0.1",
+    "react-dom": "^19.2.4",
+    "react-leaflet": "^5.0.0",
+    "react-router-dom": "^7.13.0",
+    "react-sortablejs": "^6.1.4",
+    "react-syntax-highlighter": "^16.1.0",
+    "recharts": "^3.7.0",
+    "sortablejs": "^1.15.7",
+    "tinycolor2": "^1.6.0",
+    "topojson-client": "^3.1.0",
+    "tss-react": "^4.9.20",
+    "uuid": "^13.0.0",
+    "yup": "^1.7.1"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@vitejs/plugin-react-swc": "^4.2.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.0.1",
+    "globals": "^17.3.0",
+    "jsdom": "^28.1.0",
+    "sass": "^1.97.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,3 @@
+module.exports = {
+  plugins: {},
+};
--- a/public/favicon
+++ b/public/favicon
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>favicon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group" transform="translate(6.000000, 16.000000)" stroke-width="10.2749798">
+            <g id="Group-33" transform="translate(1.877678, 0.000000)" stroke="#536DFE">
+                <line x1="0.625892504" y1="45.8825324" x2="30.8138672" y2="0.335053688" id="Line-10"></line>
+            </g>
+            <line x1="0.69108964" y1="47.2797982" x2="66.0638503" y2="47.2797982" id="Line-10" stroke="#FBC02D"></line>
+            <line x1="32.6915447" y1="0.335053688" x2="67.0080515" y2="47.1046699" id="Line-10" stroke="#FF5252"></line>
+        </g>
+    </g>
+</svg>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "app.title",
+  "name": "app.title",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/sketch/material_sketch.sketch
+++ b/sketch/material_sketch.sketch
--- a/src/components/App.js
+++ b/src/components/App.js
@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  BrowserRouter,
+  Navigate,
+  Route,
+  Routes,
+  useNavigate,
+} from 'react-router-dom';
+import { SnackbarProvider } from './Snackbar';
+
+// components
+import Layout from './Layout';
+import Documentation from './Documentation/Documentation';
+
+// pages
+import Error from '../pages/error';
+import Login from '../pages/login';
+import Verify from '../pages/verify';
+import Reset from '../pages/reset';
+
+// context
+import { useUserState } from '../context/UserContext';
+import { setNavigator } from '../router/navigation';
+
+export default function App() {
+  // global
+  let { isAuthenticated } = useUserState();
+  const isAuth = isAuthenticated();
+  const routerBase = import.meta.env.BASE_URL || '/';
+
+  return (
+    <>
+      <SnackbarProvider>
+        <BrowserRouter basename={routerBase}>
+          <RouterNavigatorSync />
+          <Routes>
+            <Route path='/' element={<Navigate to='/app/profile' replace />} />
+            <Route
+              path='/app'
+              element={<Navigate to='/app/dashboard' replace />}
+            />
+            <Route path='/403' element={<Error code={403} />} />
+            <Route path='/500' element={<Error code={500} />} />
+            <Route path='/documentation/*' element={<Documentation />} />
+            <Route
+              path='/app/*'
+              element={
+                <PrivateRoute>
+                  <Layout />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path='/login'
+              element={
+                <PublicRoute>
+                  <Login />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path='/verify-email'
+              element={
+                <PublicRoute>
+                  <Verify />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path='/password-reset'
+              element={
+                <PublicRoute>
+                  <Reset />
+                </PublicRoute>
+              }
+            />
+            <Route path='*' element={<Error />} />
+          </Routes>
+        </BrowserRouter>
+      </SnackbarProvider>
+    </>
+  );
+
+  // #######################################################################
+
+  function PrivateRoute({ children }) {
+    if (!isAuth) {
+      return <Navigate to='/login' replace />;
+    }
+
+    return children;
+  }
+
+  function PublicRoute({ children }) {
+    if (isAuth) {
+      return <Navigate to='/' replace />;
+    }
+
+    return children;
+  }
+}
+
+function RouterNavigatorSync() {
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    setNavigator(navigate);
+    return () => setNavigator(null);
+  }, [navigate]);
+
+  return null;
+}
--- a/src/components/BreadCrumbs/index.js
+++ b/src/components/BreadCrumbs/index.js
@ -0,0 +1,176 @@
+import React from 'react';
+import Widget from '../Widget';
+import { Link } from 'react-router-dom';
+import { Box, Grid, Breadcrumbs, Tabs, Tab } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Typography, Button } from '../Wrappers';
+import {
+  NavigateNext as NavigateNextIcon,
+  CalendarToday as CalendarIcon,
+} from '@mui/icons-material';
+import { useLocation } from 'react-router-dom';
+
+// styles
+import useStyles from '../Layout/styles';
+
+// components
+import structure from '../Sidebar/SidebarStructure';
+
+// Tab styling
+const CustomTab = styled(Tab)(() => ({
+  minWidth: 72,
+  textTransform: 'none',
+  fontWeight: 400,
+}));
+
+//Sidebar structure
+const BreadCrumbs = () => {
+  const location = useLocation();
+  const classes = useStyles();
+  const [value, setValue] = React.useState(2);
+
+  const renderBreadCrumbs = () => {
+    let url = location.pathname;
+    let route = url
+      .split('/')
+      .slice(1)
+      .map((route) =>
+        route
+          .split('-')
+          .map((word) => word[0].toUpperCase() + word.slice(1))
+          .join(' '),
+      );
+    const length = route.length;
+    return route.map((item, index) => {
+      let middlewareUrl =
+        '/' +
+        url
+          .split('/')
+          .slice(1, index + 2)
+          .join('/');
+
+      return (
+        <Breadcrumbs
+          key={index + '_b'}
+          separator={<NavigateNextIcon fontSize='small' />}
+          aria-label='breadcrumb'
+        >
+          <Typography
+            variant='h6'
+            color={length === index + 1 ? 'primary' : ''}
+          >
+            {length === index + 1 ? (
+              item
+            ) : (
+              <Link
+                to={middlewareUrl}
+                style={{ color: 'unset', textDecoration: 'none' }}
+              >
+                {item}
+              </Link>
+            )}
+          </Typography>
+        </Breadcrumbs>
+      );
+    });
+  };
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const date = () => {
+    let dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December"
+    ];
+    let d = new Date()
+    let year = d.getFullYear()
+    let month = d.getMonth()
+    let date = d.getDate()
+    let day = d.getDay() + 1
+    return `${date} ${monthNames[month]} ${year}, ${dayNames[day - 1]}`
+  }
+
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+  return (
+    <Widget
+      disableWidgetMenu
+      inheritHeight
+      className={classes.margin}
+      bodyClass={classes.navPadding}
+    >
+      <Grid
+        container
+        direction='row'
+        justifyContent='space-between'
+        alignItems='center'
+        wrap={'nowrap'}
+        style={{ overflowX: 'auto' }}
+      >
+        {
+           
+          structure.map((c) => {
+            if (
+              location.pathname.includes(c.link) &&
+              c.link &&
+              c.label === 'Dashboard'
+            ) {
+              return (
+                <Box display='flex' alignItems='center' key={c.id}>
+                  <Breadcrumbs aria-label='breadcrumb'>
+                    <Typography variant='h4'>{c.label}</Typography>
+                  </Breadcrumbs>
+                  {location.pathname.includes('/app/dashboard') && (
+                    <Tabs
+                      value={value}
+                      onChange={handleChange}
+                      aria-label='simple tabs example'
+                      variant='scrollable'
+                      scrollButtons='auto'
+                      style={{ marginLeft: 38 }}
+                    >
+                      <CustomTab label='Today' {...a11yProps(0)} />
+                      <CustomTab label='This week' {...a11yProps(1)} />
+                      <CustomTab label='This month' {...a11yProps(2)} />
+                      <CustomTab label='This year' {...a11yProps(3)} />
+                    </Tabs>
+                  )}
+                </Box>
+              );
+            }
+          })
+        }
+        {location.pathname.includes('/app/dashboard') ? (
+          <Box display='flex' alignItems='center'>
+            <CalendarIcon className={classes.calendarIcon} />
+            <Typography className={classes.date} style={{ marginRight: 38 }}>
+              {/*29 Oct 2019, Tuesday*/}
+              {date()}
+            </Typography>
+            <Button
+              variant='contained'
+              color='secondary'
+              className={classes.button}
+            >
+              Latest Reports
+            </Button>
+          </Box>
+        ) : (
+          <Breadcrumbs
+            separator={<NavigateNextIcon fontSize='small' />}
+            aria-label='breadcrumb'
+          >
+            {renderBreadCrumbs()}
+          </Breadcrumbs>
+        )}
+      </Grid>
+    </Widget>
+  );
+};
+export default BreadCrumbs;
--- a/src/components/Chat/Chat.js
+++ b/src/components/Chat/Chat.js
@ -0,0 +1,65 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  TextField as Input,
+  Box
+} from "@mui/material";
+
+// components
+import { Button, Typography } from "../Wrappers";
+import Dot from "../Sidebar/components/Dot";
+
+export default function Chat({ open, onClose }) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby="chat-title"
+      fullWidth
+    >
+      <DialogTitle id="alert-dialog-title">
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+        >
+          <div>Chat</div>
+          <Box display={"flex"} alignItems={"center"}>
+            <Dot color={"success"} size={"medium"} />
+            &nbsp;13
+          </Box>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Box pb={1}>
+          <Typography weight={"bold"}>Jane Hew</Typography>
+          <Typography>Hey! How it's going?</Typography>
+        </Box>
+        <Box pb={1}>
+          <Typography weight={"bold"}>Axel Pittman</Typography>
+          <Typography>I'll definitely buy this template</Typography>
+        </Box>
+        <Box>
+          <Typography weight={"bold"}>Sophia Fernandez</Typography>
+          <Typography>What's the font-family?</Typography>
+        </Box>
+      </DialogContent>
+      <Box display={"flex"} alignItems={"center"} px={3} py={1}>
+        <Input
+          id="message-input"
+          margin="normal"
+          placeholder={"Type a message"}
+          style={{ flexGrow: 1 }}
+        />
+        <Button
+          variant={"contained"}
+          color={"primary"}
+          style={{ marginLeft: 8 }}
+        >
+          Send
+        </Button>
+      </Box>
+    </Dialog>
+  );
+}
--- a/src/components/Chat/package.json
+++ b/src/components/Chat/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Chat",
+  "version": "1.0.0",
+  "main": "Chat.js",
+  "license": "MIT"
+}
--- a/src/components/Chat/styles.js
+++ b/src/components/Chat/styles.js
--- a/src/components/Code/Code.js
+++ b/src/components/Code/Code.js
@ -0,0 +1,24 @@
+
+// styles
+import useStyles from './styles';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+const Code = ({ children, row, inline }) => {
+  const props = { row, inline };
+  const classes = useStyles(props);
+  return (
+    <div className={classes.codeContainer}>
+      <SyntaxHighlighter
+        className={classes.codeComponent}
+        language='javascript'
+        style={docco}
+        customStyle={inline ? { padding: '2px 6px', margin: '-0.5em 0' } : {}}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export default Code;
--- a/src/components/Code/package.json
+++ b/src/components/Code/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Code",
+  "version": "1.0.0",
+  "main": "Code.js",
+  "license": "MIT"
+}
--- a/src/components/Code/styles.js
+++ b/src/components/Code/styles.js
@ -0,0 +1,11 @@
+import { makeStyles } from 'styles/mui';
+
+export default makeStyles(() => ({
+  codeContainer: {
+    display: (props) => (props.inline ? 'inline-block' : 'flex'),
+    flexDirection: (props) => (props.row ? 'row' : 'column'),
+  },
+  codeComponent: {
+    flexGrow: (props) => (props.row ? 0 : 1),
+  },
+}));
--- a/src/components/Dialog/index.js
+++ b/src/components/Dialog/index.js
@ -0,0 +1,35 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import MaterialDialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Slide from '@mui/material/Slide';
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction='up' ref={ref} {...props} />;
+});
+
+const Dialog = ({ open, title, onClose, contentText, onSubmit }) => (
+  <MaterialDialog
+    open={open}
+    TransitionComponent={Transition}
+    onClose={onClose}
+  >
+    <DialogTitle>{title}</DialogTitle>
+    <DialogContent>
+      <DialogContentText id='alert-dialog-slide-description'>
+        {contentText}
+      </DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={() => onClose()}>Disagree</Button>
+      <Button color='error' onClick={() => onSubmit()}>
+        Agree
+      </Button>
+    </DialogActions>
+  </MaterialDialog>
+);
+
+export default Dialog;
--- a/src/components/Documentation/Documentation.js
+++ b/src/components/Documentation/Documentation.js
@ -0,0 +1,106 @@
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+} from 'react-router-dom';
+
+//styles
+import useStyles from './styles';
+
+//pages
+import Start from './pages/start';
+import TypographyPage from './pages/typography';
+import WidgetPage from './pages/widget';
+import HeaderPage from './pages/header';
+import SidebarPage from './pages/sidebar';
+import ButtonsPage from './pages/buttons';
+
+//components
+import Header from './components/Header';
+import Sidebar from '../../components/Sidebar';
+import structure from './components/Sidebar/SidebarStructure';
+import Widget from '../Widget';
+
+import { Typography } from '../Wrappers';
+import classnames from 'classnames';
+
+//context
+import { useLayoutState } from '../../context/LayoutContext';
+import { Box, Breadcrumbs, Grid } from '@mui/material';
+
+import { NavigateNext as NavigateNextIcon } from '@mui/icons-material';
+
+const Documentation = () => {
+  // global
+  let layoutState = useLayoutState();
+  const classes = useStyles();
+  const location = useLocation();
+  return (
+    <div className={classes.root}>
+      <Header />
+      <Sidebar structure={structure} />
+      <div
+        className={classnames(classes.content, {
+          [classes.contentShift]: layoutState.isSidebarOpened,
+        })}
+      >
+        <div className={classes.fakeToolbar} />
+        <Widget disableWidgetMenu inheritHeight className={classes.margin}>
+          <Grid
+            container
+            direction='row'
+            justifyContent='space-between'
+            alignItems='center'
+          >
+
+            { }
+            {structure.map((c) => {
+              if (!c.children && location.pathname.includes(c.link) && c.link) {
+                return (
+                  <Box display='flex' alignItems='center' key={c.id}>
+                    <Breadcrumbs aria-label='breadcrumb'>
+                      <Typography variant='h4'>{c.label}</Typography>
+                    </Breadcrumbs>
+                  </Box>
+                );
+              } else if (c.children) {
+                return c.children.forEach((currentInner) => {
+                  // eslint-disable-array-callback-return
+                  if (location.pathname.includes(currentInner.link)) {
+                    return (
+                      <Breadcrumbs
+                        separator={<NavigateNextIcon fontSize='small' />}
+                        aria-label='breadcrumb'
+                        key={c.id}
+                      >
+                        <Typography variant={'h6'}>{c.label}</Typography>
+                        <Typography color='primary' variant={'h6'}>
+                          {currentInner.label}
+                        </Typography>
+                      </Breadcrumbs>
+                    );
+                  }
+                });
+              }
+            })}
+          </Grid>
+        </Widget>
+        <Routes>
+          <Route
+            index
+            element={<Navigate to='getting-started/quick-start' replace />}
+          />
+          <Route path='getting-started/quick-start' element={<Start />} />
+          <Route path='components/typography' element={<TypographyPage />} />
+          <Route path='components/widget' element={<WidgetPage />} />
+          <Route path='components/header' element={<HeaderPage />} />
+          <Route path='components/sidebar' element={<SidebarPage />} />
+          <Route path='components/buttons' element={<ButtonsPage />} />
+        </Routes>
+      </div>
+    </div>
+  );
+};
+
+export default Documentation;
--- a/src/components/Documentation/components/Header/Header.js
+++ b/src/components/Documentation/components/Header/Header.js
@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+import useStyles from './styles';
+import { useNavigate } from 'react-router-dom';
+
+// Material-UI core components
+import { AppBar, Toolbar, IconButton, Box, Button } from '@mui/material';
+import { useTheme } from '@mui/material';
+
+// Material Icons
+import {
+  ArrowBack as ArrowBackIcon,
+  Menu as MenuIcon,
+} from '@mui/icons-material';
+
+import GitHubIcon from '@mui/icons-material/GitHub';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import TwitterIcon from '@mui/icons-material/Twitter';
+
+// Components
+import { Typography, Link } from '../../../Wrappers';
+import {
+  toggleSidebar,
+  useLayoutDispatch,
+  useLayoutState,
+} from '../../../../context/LayoutContext';
+import classNames from 'classnames';
+
+const Header = () => {
+  const theme = useTheme();
+  const classes = useStyles();
+  const navigate = useNavigate();
+  let layoutState = useLayoutState();
+  let layoutDispatch = useLayoutDispatch();
+  const [isSmall, setSmall] = useState(false);
+
+  useEffect(function () {
+    window.addEventListener('resize', handleWindowWidthChange);
+    handleWindowWidthChange();
+    return function cleanup() {
+      window.removeEventListener('resize', handleWindowWidthChange);
+    };
+  });
+
+  function handleWindowWidthChange() {
+    let windowWidth = window.innerWidth;
+    let breakpointWidth = theme.breakpoints.values.md;
+    let isSmallScreen = windowWidth < breakpointWidth;
+    setSmall(isSmallScreen);
+  }
+
+  return (
+    <AppBar position='fixed' className={classes.appBar}>
+      <Toolbar className={classes.toolbar}>
+        <IconButton
+          color='inherit'
+          onClick={() => toggleSidebar(layoutDispatch)}
+          className={classNames(
+            classes.headerMenuButton,
+            classes.headerMenuButtonCollapse,
+          )}
+        >
+          {(!layoutState.isSidebarOpened && isSmall) ||
+          (layoutState.isSidebarOpened && !isSmall) ? (
+            <ArrowBackIcon
+              classes={{
+                root: classNames(
+                  classes.headerIcon,
+                  classes.headerIconCollapse,
+                ),
+              }}
+            />
+          ) : (
+            <MenuIcon
+              classes={{
+                root: classNames(
+                  classes.headerIcon,
+                  classes.headerIconCollapse,
+                ),
+              }}
+            />
+          )}
+        </IconButton>
+        <Typography variant='h6' block className={classes.logo}>
+          React Material Admin Full{' '}
+          <Typography variant={'h5'}>&nbsp; Documentation</Typography>
+        </Typography>
+        <Box
+          display={'flex'}
+          alignItems={'center'}
+          className={classes.fullWidthXs}
+        >
+          <Box display={'flex'} className={classes.icons}>
+            <Link href={'https://twitter.com/flatlogic'}>
+              <IconButton>
+                <TwitterIcon style={{ color: '#fff' }} />
+              </IconButton>
+            </Link>
+            <Link href={'https://www.facebook.com/flatlogic'}>
+              <IconButton>
+                <FacebookIcon style={{ color: '#fff' }} />
+              </IconButton>
+            </Link>
+            <Link href={'https://instagram.com/flatlogiccom/'}>
+              <IconButton>
+                <InstagramIcon style={{ color: '#fff' }} />
+              </IconButton>
+            </Link>
+            <Link href={'https://www.linkedin.com/company/flatlogic/'}>
+              <IconButton>
+                <LinkedInIcon style={{ color: '#fff' }} />
+              </IconButton>
+            </Link>
+            <Link href={'https://github.com/flatlogic'}>
+              <IconButton>
+                <GitHubIcon style={{ color: '#fff' }} />
+              </IconButton>
+            </Link>
+          </Box>
+          <Box className={classes.headerButtons}>
+            <Button
+              color={'inherit'}
+              style={{ marginRight: 16 }}
+              onClick={() => navigate('/app')}
+            >
+              Live Preview
+            </Button>
+            <Button
+              href={'https://flatlogic.com/templates/react-material-admin-full'}
+              variant='outlined'
+              color='secondary'
+            >
+              Buy
+            </Button>
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;
--- a/src/components/Documentation/components/Header/package.json
+++ b/src/components/Documentation/components/Header/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Header",
+  "version": "1.0.0",
+  "main": "Header.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/components/Header/styles.js
+++ b/src/components/Documentation/components/Header/styles.js
@ -0,0 +1,50 @@
+import { makeStyles } from 'styles/mui';
+
+export default makeStyles((theme) => ({
+  menuIcon: {
+    marginRight: theme.spacing(2),
+  },
+  icons: {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
+  appBar: {
+    width: '100%',
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  toolbar: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  hide: {
+    display: 'none',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  logo: {
+    flexGrow: 1,
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  headerButtons: {
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 'auto',
+    },
+  },
+  fullWidthXs: {
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+    },
+  },
+}));
--- a/src/components/Documentation/components/Sidebar/SidebarStructure.js
+++ b/src/components/Documentation/components/Sidebar/SidebarStructure.js
@ -0,0 +1,42 @@
+const structure = [
+  {
+    id: 0,
+    label: 'Getting Started',
+    link: '/documentation/getting-started',
+    children: [
+      {
+        label: 'Quick start',
+        link: '/documentation/getting-started/quick-start',
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Components',
+    link: '/documentation/components',
+    children: [
+      {
+        label: 'Typography',
+        link: '/documentation/components/typography',
+      },
+      {
+        label: 'Widget',
+        link: '/documentation/components/widget',
+      },
+      {
+        label: 'Header',
+        link: '/documentation/components/header',
+      },
+      {
+        label: 'Sidebar',
+        link: '/documentation/components/sidebar',
+      },
+      {
+        label: 'Buttons',
+        link: '/documentation/components/buttons',
+      },
+    ],
+  },
+];
+
+export default structure;
--- a/src/components/Documentation/package.json
+++ b/src/components/Documentation/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Documentation",
+  "version": "1.0.0",
+  "main": "Documentation.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/pages/buttons/Buttons.js
+++ b/src/components/Documentation/pages/buttons/Buttons.js
@ -0,0 +1,119 @@
+import { Box, Grid } from '@mui/material';
+
+//components
+import Widget from '../../../Widget';
+import { Typography, Button } from '../../../Wrappers';
+import Code from '../../../Code';
+
+const Pages = () => {
+  return (
+    <>
+      <Grid container spacing={3}>
+        <Grid size={12}>
+          <Widget disableWidgetMenu>
+            <Typography
+              variant={'h4'}
+              style={{
+                marginBottom: 15,
+                marginTop: 10,
+                color: 'rgb(110, 110, 110)'
+              }}>
+              
+              Buttons
+            </Typography>
+            <Typography style={{ marginBottom: 16 }}>
+              Button's variants:
+            </Typography>
+            <Button variant={'contained'} style={{ marginRight: 8 }}>
+              contained
+            </Button>
+            <Button variant={'outlined'} style={{ marginRight: 8 }}>
+              outlined
+            </Button>
+            <Button>text</Button>
+            <Typography style={{ marginBottom: 16, marginTop: 16 }}>
+              Code:
+            </Typography>
+            <Code row inline>
+              {`
+<Button variant={"contained"}>contained</Button>
+<Button variant={"outlined"}>outlined</Button>
+<Button>text</Button>
+                            `}
+            </Code>
+            <Typography style={{ marginBottom: 16 }}>
+              Button's colors:
+            </Typography>
+            <Box display={'flex'} flexWrap='wrap'>
+              <Box mt={1} mr={1}>
+                <Button variant='contained'>default</Button>
+              </Box>
+              <Box mt={1} mr={1}>
+                <Button color='primary' variant='contained'>
+                  primary
+                </Button>
+              </Box>
+              <Box mt={1} mr={1}>
+                <Button color='secondary' variant='contained'>
+                  secondary
+                </Button>
+              </Box>
+              <Box mt={1} mr={1}>
+                <Button color='warning' variant='contained'>
+                  warning
+                </Button>
+              </Box>
+              <Box mt={1} mr={1}>
+                <Button color='success' variant='contained'>
+                  success
+                </Button>
+              </Box>
+              <Box mt={1} mr={1}>
+                <Button variant='contained' color='info'>
+                  info
+                </Button>
+              </Box>
+            </Box>
+            <Typography style={{ marginBottom: 16, marginTop: 16 }}>
+              Code:
+            </Typography>
+            <Code row inline>
+              {`
+<Button variant="contained">default</Button>
+<Button
+  color="primary"
+  variant="contained"
+>
+  primary
+</Button>
+<Button
+  color="secondary"
+  variant="contained"
+>
+  secondary
+</Button>
+<Button
+  color="warning"
+  variant="contained"
+>
+  warning
+</Button>
+<Button
+  color="success"
+  variant="contained"
+>
+  success
+</Button>
+<Button variant="contained" color="info">
+  info
+</Button>
+                            `}
+            </Code>
+          </Widget>
+        </Grid>
+      </Grid>
+    </>);
+
+};
+
+export default Pages;
--- a/src/components/Documentation/pages/buttons/package.json
+++ b/src/components/Documentation/pages/buttons/package.json
@ -0,0 +1,6 @@
+{
+  "name": "buttons",
+  "version": "1.0.0",
+  "main": "Buttons.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/pages/header/Header.js
+++ b/src/components/Documentation/pages/header/Header.js
@ -0,0 +1,100 @@
+import React from 'react';
+import { AppBar, Tabs, Tab, Box, Toolbar, IconButton } from '@mui/material';
+
+import {
+  ArrowRightAlt as ArrowRight,
+  Menu as MenuIcon,
+} from '@mui/icons-material';
+
+import useStyles from '../../styles';
+
+//components
+import Widget from '../../../Widget';
+import { Typography, Link, Button } from '../../../Wrappers';
+import Code from '../../../Code';
+
+const WidgetPage = () => {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const TabPanel = ({
+    children,
+    index,
+    className = classes.tabPanel,
+    value,
+  }) => {
+    if (index === value) {
+      return <section className={className}>{children}</section>;
+    }
+    return null;
+  };
+  return (
+    <Widget title={'Header'} inheritHeight disableWidgetMenu>
+      <Typography variant={'body2'}>Header element on your page.</Typography>
+      <Code>{`import { AppBar, Toolbar, IconButton } from '@mui/material'`}</Code>
+      <AppBar position='static' className={classes.tabsAppBar}>
+        <Tabs
+          className={classes.tabs}
+          value={value}
+          onChange={handleChange}
+          aria-label='typography size'
+        >
+          <Tab className={classes.tab} label='Example' />
+          <Tab className={classes.tab} label='Code' />
+        </Tabs>
+      </AppBar>
+      <TabPanel index={0} value={value}>
+        <AppBar position='static'>
+          <Toolbar>
+            <IconButton
+              edge='start'
+              className={classes.menuButton}
+              color='inherit'
+              aria-label='menu'
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant='h6' className={classes.title}>
+              News
+            </Typography>
+            <Button color='inherit' style={{ marginLeft: 'auto' }}>
+              Login
+            </Button>
+          </Toolbar>
+        </AppBar>
+      </TabPanel>
+      <TabPanel index={1} value={value}>
+        <Code>{`
+    <AppBar position="static">
+    <Toolbar>
+        <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+            <MenuIcon />
+        </IconButton>
+         <Typography variant="h6" className={classes.title}>
+             News
+         </Typography>
+        <Button color="inherit" style={{marginLeft: 'auto'}}>Login</Button>
+    </Toolbar>
+    </AppBar>
+                `}</Code>
+      </TabPanel>
+      <Box mt={1}>
+        <Link
+          href={'https://mui.com/material-ui/api/app-bar/'}
+          color={'primary'}
+          className={classes.link}
+          variant={'h6'}
+          target={'_blank'}
+        >
+          Other props <ArrowRight />
+        </Link>
+      </Box>
+    </Widget>
+  );
+};
+
+export default WidgetPage;
--- a/src/components/Documentation/pages/header/package.json
+++ b/src/components/Documentation/pages/header/package.json
@ -0,0 +1,6 @@
+{
+  "name": "header",
+  "version": "1.0.0",
+  "main": "Header.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/pages/libs/Libs.js
+++ b/src/components/Documentation/pages/libs/Libs.js
@ -0,0 +1,59 @@
+
+//components
+import Widget from "../../../Widget";
+import { Typography } from "../../../Wrappers";
+import {List, ListItem, ListItemText} from "@mui/material";
+
+const Libs = () => {
+  return (
+    <Widget title={"Libs"} inheritHeight disableWidgetMenu>
+      <Typography variant={"body1"}>Icons libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="Material UI icons" />
+            </ListItem>
+            <ListItem>
+                <ListItemText primary="Font Awesome icons" />
+            </ListItem>
+            <ListItem>
+                <ListItemText primary="MDI icons" />
+            </ListItem>
+        </List>
+        <Typography variant={"body1"}>API libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="Axios" />
+            </ListItem>
+        </List>
+        <Typography variant={"body1"}>Styles libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="Material UI JSS" />
+                <ListItemText primary="Styled Components" />
+            </ListItem>
+        </List>
+        <Typography variant={"body1"}>Charts libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="Recharts" />
+                <ListItemText primary="Apexcharts" />
+            </ListItem>
+        </List>
+        <Typography variant={"body1"}>Datatables libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="mui-datatables" />
+            </ListItem>
+        </List>
+        <Typography variant={"body1"}>Other libs:</Typography>
+        <List>
+            <ListItem>
+                <ListItemText primary="Classnames" />
+                <ListItemText primary="Tinycolor2" />
+            </ListItem>
+        </List>
+    </Widget>
+  );
+};
+
+export default Libs;
--- a/src/components/Documentation/pages/libs/package.json
+++ b/src/components/Documentation/pages/libs/package.json
@ -0,0 +1,6 @@
+{
+  "name": "libs",
+  "version": "1.0.0",
+  "main": "Libs.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/pages/licences/Licences.js
+++ b/src/components/Documentation/pages/licences/Licences.js
@ -0,0 +1,122 @@
+import {
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TableHead,
+  Box } from
+"@mui/material";
+import { Add as PlusIcon, Remove as MinusIcon } from "@mui/icons-material";
+import useStyles from "./styles";
+
+//components
+import Widget from "../../../Widget";
+import { Typography } from "../../../Wrappers";
+
+// structure
+const rows = [
+{
+  advantage: "Hundreds unique components",
+  single: "plus",
+  extended: "plus"
+},
+{
+  advantage: "All pages",
+  single: "plus",
+  extended: "plus"
+},
+{
+  advantage: "Free Updates",
+  single: "3 months",
+  extended: "6 months"
+},
+{
+  advantage: "Paying users allowed",
+  single: "no",
+  extended: "plus"
+}];
+
+
+const Licences = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={12}>
+          <Widget disableWidgetMenu>
+            <Typography variant={"h6"}>
+              A license grants you a non-exclusive and non-transferable right to
+              use and incorporate the item in your personal or commercial
+              projects. If your end product including an item is going to be
+              free to the end user then a Single License is what you need. An
+              Extended License is required if the end user must pay to use the
+              end product.
+            </Typography>
+            <Table aria-label="licences table" style={{ marginTop: 48 }}>
+              <TableHead>
+                <TableRow>
+                  <TableCell />
+                  <TableCell>Single</TableCell>
+                  <TableCell>Extended</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) =>
+                <TableRow key={row.advantage}>
+                    <TableCell component="th" scope="row">
+                      {row.advantage}
+                    </TableCell>
+                    <TableCell>
+                      {row.extended === "plus" ?
+                    <PlusIcon className={classes.successIcon} /> :
+
+                    <MinusIcon className={classes.failIcon} />
+                    }
+                    </TableCell>
+                    <TableCell>
+                      {row.extended === "plus" ?
+                    <PlusIcon className={classes.successIcon} /> :
+
+                    <MinusIcon className={classes.failIcon} />
+                    }
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+            <Box mt={6}>
+              <Typography variant={"h6"} block>
+                <Typography weight={"medium"} variant={"h6"}>
+                  Single Application License
+                </Typography>
+                Your use of the item is restricted to a single application. You
+                may use the item in work which you are creating for your own
+                purposes or for your client. You must not incorporate the item
+                in a work which is created for redistribution or resale by you
+                or your client. The item may not be redistributed or resold. You
+                may not charge users for using your application.
+              </Typography>
+            </Box>
+            <Box mt={6}>
+              <Typography variant={"h6"} block>
+                <Typography weight={"medium"} variant={"h6"}>
+                  Extended Application License
+                </Typography>
+                Your use of the item is restricted to a single application. You
+                may use the item in work which you are creating for your own
+                purposes or for your clients. You are licensed to use the Item
+                to create one single End Product for yourself or for one client
+                (a “single application”), and the End Product may be Sold and
+                users may be charged for using it (e.g. you are building SAAS
+                application).
+              </Typography>
+            </Box>
+          </Widget>
+        </Grid>
+      </Grid>
+    </>);
+
+};
+
+export default Licences;
--- a/src/components/Documentation/pages/licences/package.json
+++ b/src/components/Documentation/pages/licences/package.json
@ -0,0 +1,6 @@
+{
+  "name": "Licences",
+  "version": "1.0.0",
+  "main": "Licences.js",
+  "license": "MIT"
+}
--- a/src/components/Documentation/pages/licences/styles.js
+++ b/src/components/Documentation/pages/licences/styles.js
@ -0,0 +1,10 @@
+import { makeStyles } from "styles/mui";
+
+export default makeStyles(theme => ({
+  successIcon: {
+    color: theme.palette.success.main
+  },
+  failIcon: {
+    color: "red"
+  }
+}));
--- a/src/components/Documentation/pages/overview/Overview.js
+++ b/src/components/Documentation/pages/overview/Overview.js
@ -0,0 +1,119 @@
+import { Grid, Box, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import {
+  Done as DoneIcon,
+  ArrowRightAlt as ArrowRight,
+} from '@mui/icons-material';
+
+import useStyles from './styles';
+
+// components
+import Widget from '../../../Widget';
+import { Typography, Link } from '../../../Wrappers';
+
+const Overview = () => {
+  const styles = useStyles();
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        <Grid size={12}>
+          <Widget disableWidgetMenu>
+            <Typography variant={'h6'}>
+              React Material Admin is a dashboard starter with modern React and MUI.
+              It is suitable for SaaS admin panels, internal tools, and data-heavy
+              business apps.
+            </Typography>
+
+            <Box pt={6}>
+              <Typography variant={'h3'}>Features</Typography>
+            </Box>
+            <List>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='React 19 + MUI 7' />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='Routing with React Router v5' />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='Redux + thunk state management' />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='DataGrid tables, forms, charts, calendar, profile pages' />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='Frontend-only mode and optional backend mode' />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <DoneIcon />
+                </ListItemIcon>
+                <ListItemText primary='Theme switching and responsive layout' />
+              </ListItem>
+            </List>
+
+            <Box pt={6} pb={6}>
+              <Typography variant={'h3'}>Support</Typography>
+              <Typography variant={'body1'} style={{ marginTop: 12 }}>
+                For help and feedback, use the support forum.
+              </Typography>
+              <a
+                href='https://flatlogic.com/forum'
+                target='_blank'
+                rel='noopener noreferrer'
+                className={styles.link}
+              >
+                Support forum <ArrowRight />
+              </a>
+            </Box>
+
+            <Box display='flex' justifyContent='space-around' my={3}>
+              <Box>
+                <Typography variant={'h3'} style={{ marginBottom: 16 }}>
+                  Continue with
+                </Typography>
+                <Link
+                  href={'/documentation/getting-started/quick-start'}
+                  variant={'h6'}
+                  color={'primary'}
+                  className={styles.link}
+                >
+                  Quick start <ArrowRight />
+                </Link>
+              </Box>
+              <Box>
+                <Typography variant={'h3'} style={{ marginBottom: 16 }}>
+                  Explore
+                </Typography>
+                <Link
+                  href={'/documentation/components/typography'}
+                  variant={'h6'}
+                  color={'primary'}
+                  className={styles.link}
+                >
+                  Components <ArrowRight />
+                </Link>
+              </Box>
+            </Box>
+          </Widget>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export default Overview;
--- a/Show More
+++ b/Show More