Add first version in main branch

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+README.md

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vs/

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:18 AS build
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json ./ 
+COPY package-lock.json ./
+
+# Install dependencies (including TypeScript)
+RUN npm install
+
+# Install TypeScript globally (if not installed in package.json)
+RUN npm install -g typescript
+
+# Copy the rest of the application files
+COPY . .
+
+# Run the build command (tsc -b && vite build)
+RUN npm run build  # This will run tsc -b and vite build
+
+# Expose the port the app will use
+EXPOSE 8080
+
+# Start the app using the preview server
+CMD ["npm", "run", "preview"]

README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

edq

@@ -0,0 +1,114 @@
+commit ec483eaee3f9996d44c5ea383acc058f91a256f7 (HEAD -> attendance-view-1)
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Thu Feb 27 10:15:10 2025 +0530
+
+    refactor : increased TimePicker dropdown size
+
+commit 674e102b4a4e4b6f52583b4e8f8cfecd210f6950
+Merge: aa83208 55b9181
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Thu Feb 27 10:11:53 2025 +0530
+
+    Merge branch 'attendance-view-1' of https://github.com/marcoioitsoft/marco.pms.web into attendance-view-1
+
+commit aa83208be41fd04d2e1146f0127347fe0648993a
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Wed Feb 26 17:09:22 2025 +0530
+
+    feat:added pagination functionality to employee table
+
+commit d4aba33b6d4676a8295e3d4eb1fb79b08e0edd31
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Wed Feb 26 12:43:13 2025 +0530
+
+    Added attendance UI
+
+commit 4173453ead9e5b0e088632262e97b83c736679c5
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Tue Feb 25 09:42:18 2025 +0530
+
+    stash file apply
+
+commit 57c45d4578520435ff15846dec8112263992ffbd
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Mon Feb 24 13:44:26 2025 +0530
+
+    added check-in checkout feature
+
+commit 55b9181450d5172568a964e08473cdcfff5079a6 (origin/attendance-view-1)
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Wed Feb 26 12:43:13 2025 +0530
+
+    Added attendance UI
+
+commit e28a29f623c831bccb175b2505890bf513818c29
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Tue Feb 25 09:42:18 2025 +0530
+
+    stash file apply
+
+commit f365d1e321be4f268ec2a23d21a9ddf511f7203c
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Mon Feb 24 13:44:26 2025 +0530
+
+    added check-in checkout feature
+
+commit f224d770eab9900d65a3163dd356a5f0ec2cda7e (origin/roles-master, origin/main, origin/HEAD, origin/AttendanceFeature, roles-master, main, AttendanceFeature)
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Fri Feb 21 17:03:59 2025 +0530
+
+    feat: Add toast notification to jobrole,role
+
+commit 4254be8988390b0e2f27d785a11a87f1ce24fc24
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Fri Feb 21 16:44:06 2025 +0530
+
+    feat: Add API integration for managing employee
+
+commit 6cac4b066f8c8bd68e7c53939e70ea6e7952089d
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Thu Feb 20 17:10:47 2025 +0530
+
+    Fixed: Open modal on a single click - ManageEmp
+
+commit 2802dcd732f780c3d887348cfa1ff68d39f88f9f
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Thu Feb 20 14:58:47 2025 +0530
+
+    refactor: Refactor cache handling for jobrole creation and update
+
+commit e1ea6e3f2372c59dc5f5287a4e7fe80da5e29956
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Wed Feb 19 16:35:58 2025 +0530
+
+    updated assign-employee model
+
+commit e0e1f757c03364e4881d476bd7e864116672d9c7
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Wed Feb 19 11:25:06 2025 +0530
+
+    added model - assign role to emp
+
+commit 28469dfc9e66b08dc5dcfb11a6e82fc64bf45a8e
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Tue Feb 18 13:32:43 2025 +0530
+
+    added jobrole,hide empty building_activites
+
+commit f3e9ff6fc6f456b25f0083c3e6c4925e1dd97a04
+Author: PramodMahajan14 <pramodmahajan1411200@gmail.com>
+Date:   Sat Feb 15 16:30:41 2025 +0530
+
+    added daily task planning and fixed bugs
+
+commit cb0f23bd9cd0eb76f30f4d2e0a96642aacba11af
+Author: MATRIX-LAP\vikas <crystalmetrix@gmail.com>
+Date:   Mon Jan 20 15:17:48 2025 +0530
+
+    Add initial project setup
+
+commit e59ab716b92a4b7a7ed3cd08c48a568b31850a96
+Author: marcoioitsoft <marcoioitsoft@gmail.com>
+Date:   Mon Jan 20 14:07:50 2025 +0530
+
+    Initial commit

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Marco PMS</title>
+
+  <meta name="description" content="" />
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="/img/favicon.ico" />
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="/assets/img/favicon/favicon.ico" />
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
+    rel="stylesheet" />
+
+  <!-- Core CSS -->
+  <link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" />
+  <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
+  <link rel="stylesheet" href="/assets/css/default.css" />
+
+  <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
+  <link rel="stylesheet" href="/assets/vendor/libs/apex-charts/apex-charts.css" />
+
+  <!-- Icons -->
+  <link rel="stylesheet" href="/assets/vendor/fonts/boxicons.css" />
+  <link rel="stylesheet" href="/assets/vendor/fonts/fontawesome.css" />
+  <link rel="stylesheet" href="/assets/vendor/fonts/flag-icons.css" />
+
+  <!-- Core CSS -->
+  <link rel="stylesheet" href="/assets/vendor/libs/typeahead-js/typeahead.css" />
+  <link rel="stylesheet" href="/assets/vendor/libs/bs-stepper/bs-stepper.css" />
+  <link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
+  <link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
+
+  <!-- Helpers -->
+  <script src="/assets/vendor/js/helpers.js"></script>
+  <script src="/assets/js/config.js"></script>
+  
+  <!-- Timer Picker -->
+  <!-- Flatpickr CSS -->
+
+
+
+
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+
+  <script src="/assets/vendor/libs/jquery/jquery.js"></script>
+  <script src="/assets/vendor/libs/popper/popper.js"></script>
+  <script src="/assets/vendor/js/bootstrap.js"></script>
+  <script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
+  <script src="/assets/vendor/libs/hammer/hammer.js"></script>
+  <script src="/assets/vendor/libs/i18n/i18n.js"></script>
+  <script src="/assets/vendor/libs/typeahead-js/typeahead.js"></script>
+  <script src="/assets/vendor/js/menu.js"></script>
+
+  
+
+
+
+  <!-- endbuild -->
+   
+
+
+  <!-- Vendors JS -->
+  <script src="/assets/vendor/libs/bs-stepper/bs-stepper.js"></script>
+  <script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
+  <script src="/assets/vendor/libs/select2/select2.js"></script>
+  <script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
+  <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script>
+
+  <!-- Main JS -->
+  <script src="/assets/js/main.js"></script>
+
+  <!-- Page JS -->
+  <script src="/assets/js/form-wizard-icons.js"></script>
+  <script src="/assets/js/dashboards-analytics.js"></script>
+
+  <!-- component -->
+  <script src="./public/js/timppick.js"></script>
+
+
+
+
+  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> -->
+
+<!-- Flatpickr JS -->
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+
+<script>
+    // Initialize flatpickr for 12-hour time format with AM/PM
+    flatpickr("#timePicker", {
+        enableTime: true,
+        noCalendar: true,
+        time_24hr: false,  // Disable 24-hour format
+        dateFormat: "h:i K",  // 12-hour format with AM/PM
+    });
+</script>
+</body>
+
+</html>

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "marcobms",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "proxy": "http://localhost:5032",
+  "scripts": {
+    "dev": "vite",
+    "json-server": "json-server --watch ./src/data/demo.json --port 5000",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@reduxjs/toolkit": "^2.5.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.7.9",
+    "axios-retry": "^4.5.0",
+    "jwt-decode": "^4.0.0",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
+    "moment": "^2.30.1",
+    "perfect-scrollbar": "^1.5.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.20.1",
+    "react-toastify": "^11.0.2",
+    "sort-by": "^1.2.0",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "vite": "^5.0.0"
+  }
+}

public/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jquery": true
+  },
+  "plugins": ["prettier"],
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-underscore-dangle": "off",
+    "semi": ["error", "never"],
+    "arrow-parens": ["error", "as-needed"],
+    "no-param-reassign": "off",
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "no-cond-assign": ["error", "except-parens"]
+  }
+}

public/assets/css/default.css

@@ -0,0 +1,130 @@
+/*
+* demo.css
+* File include item demo only specific css only
+******************************************************************************/
+#root {
+  width: 100%;
+
+  text-align: center;
+}
+
+.login-box {
+  margin: 0 auto;
+  /* justify-content: center; */
+  width: 50%;
+  min-width: 350px;
+}
+
+.page-container {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+.menu .app-brand.demo {
+  height: 64px;
+  margin-top: 12px;
+}
+
+.app-brand-logo.demo svg {
+  width: 22px;
+  height: 38px;
+}
+
+.app-brand-logo-sidebar {
+  width: 70px;
+}
+
+.app-brand-text.demo {
+  font-size: 1.75rem;
+  letter-spacing: -0.5px;
+  /* text-transform: lowercase; */
+}
+
+/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
+/* Detached navbar */
+.layout-navbar-fixed
+  .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu)
+  .layout-page {
+  padding-top: 76px !important;
+}
+/* Default navbar */
+.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
+  padding-top: 64px !important;
+}
+
+/* Navbar page z-index issue solution */
+.content-wrapper .navbar {
+  z-index: auto;
+}
+
+/*
+* Content
+******************************************************************************/
+
+.demo-blocks > * {
+  display: block !important;
+}
+
+.demo-inline-spacing > * {
+  margin: 1rem 0.375rem 0 0 !important;
+}
+
+/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
+.demo-vertical-spacing > * {
+  margin-top: 1rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-lg > * {
+  margin-top: 1.875rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-lg.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-xl > * {
+  margin-top: 5rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-xl.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.rtl-only {
+  display: none !important;
+  text-align: left !important;
+  direction: ltr !important;
+}
+
+[dir="rtl"] .rtl-only {
+  display: block !important;
+}
+
+/*
+* Layout demo
+******************************************************************************/
+
+.layout-demo-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 1rem;
+}
+.layout-demo-placeholder img {
+  width: 900px;
+}
+.layout-demo-info {
+  text-align: center;
+  margin-top: 1rem;
+}

public/assets/fonts/boxicons.scss

@@ -0,0 +1,23 @@
+$boxicons-font-path: 'boxicons';
+$boxicons-font-size-base: 16px;
+
+@import '../node_modules/boxicons/css/boxicons';
+
+.bx {
+  vertical-align: middle;
+  font-size: 1.15rem;
+  line-height: 1;
+}
+// Override font path
+@font-face {
+  font-family: 'boxicons';
+  font-weight: normal;
+  font-style: normal;
+
+  src: url('../fonts/#{$boxicons-font-path}/boxicons.eot');
+  src: url('../fonts/#{$boxicons-font-path}/boxicons.eot') format('embedded-opentype'),
+    url('../fonts/#{$boxicons-font-path}/boxicons.woff2') format('woff2'),
+    url('../fonts/#{$boxicons-font-path}/boxicons.woff') format('woff'),
+    url('../fonts/#{$boxicons-font-path}/boxicons.ttf') format('truetype'),
+    url('../fonts/#{$boxicons-font-path}/boxicons.svg?#boxicons') format('svg');
+}

public/assets/img/sneat.svg

@@ -0,0 +1,42 @@
+<svg width="25" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink">
+                <defs>
+                  <path
+                    d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
+                    id="path-1"></path>
+                  <path
+                    d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
+                    id="path-3"></path>
+                  <path
+                    d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
+                    id="path-4"></path>
+                  <path
+                    d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
+                    id="path-5"></path>
+                </defs>
+                <g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
+                    <g id="Icon" transform="translate(27.000000, 15.000000)">
+                      <g id="Mask" transform="translate(0.000000, 8.000000)">
+                        <mask id="mask-2" fill="white">
+                          <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use fill="#696cff" xlink:href="#path-1"></use>
+                        <g id="Path-3" mask="url(#mask-2)">
+                          <use fill="#696cff" xlink:href="#path-3"></use>
+                          <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
+                        </g>
+                        <g id="Path-4" mask="url(#mask-2)">
+                          <use fill="#696cff" xlink:href="#path-4"></use>
+                          <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
+                        </g>
+                      </g>
+                      <g id="Triangle"
+                        transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
+                        <use fill="#696cff" xlink:href="#path-5"></use>
+                        <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>

public/assets/js/config.js

@@ -0,0 +1,29 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+
+// JS global variables
+let config = {
+  colors: {
+    primary: '#696cff',
+    secondary: '#8592a3',
+    success: '#71dd37',
+    info: '#03c3ec',
+    warning: '#ffab00',
+    danger: '#ff3e1d',
+    dark: '#233446',
+    black: '#000',
+    white: '#fff',
+    cardColor: '#fff',
+    bodyBg: '#f5f5f9',
+    bodyColor: '#697a8d',
+    headingColor: '#566a7f',
+    textMuted: '#a1acb8',
+    borderColor: '#eceef1'
+  }
+};

public/assets/js/dashboards-analytics.js

@@ -0,0 +1,797 @@
+/**
+ * Dashboard Analytics
+ */
+
+"use strict";
+
+function projectCardChart(project) {
+  // Order Statistics Chart
+  // --------------------------------------------------------------------
+  console.log(project);
+  let cardColor, headingColor, axisColor, shadeColor, borderColor;
+
+  cardColor = config.colors.cardColor;
+  headingColor = config.colors.headingColor;
+  axisColor = config.colors.axisColor;
+  borderColor = config.colors.borderColor;
+
+  var divname = "#projectstatuschart-" + project.id;
+  const chartOrderStatistics = document.querySelector(divname),
+    orderChartConfig = {
+      chart: {
+        height: 165,
+        width: 130,
+        type: "donut",
+      },
+      labels: ["Electronic", "Sports", "Decor", "Fashion"],
+      series: [85, 15, 50, 50],
+      colors: [
+        config.colors.primary,
+        config.colors.secondary,
+        config.colors.info,
+        config.colors.success,
+      ],
+      stroke: {
+        width: 5,
+        colors: [cardColor],
+      },
+      dataLabels: {
+        enabled: false,
+        formatter: function (val, opt) {
+          return parseInt(val) + "%";
+        },
+      },
+      legend: {
+        show: false,
+      },
+      grid: {
+        padding: {
+          top: 0,
+          bottom: 0,
+          right: 15,
+        },
+      },
+      states: {
+        hover: {
+          filter: { type: "none" },
+        },
+        active: {
+          filter: { type: "none" },
+        },
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: "75%",
+            labels: {
+              show: true,
+              value: {
+                fontSize: "1.5rem",
+                fontFamily: "Public Sans",
+                color: headingColor,
+                offsetY: -15,
+                formatter: function (val) {
+                  return parseInt(val) + "%";
+                },
+              },
+              name: {
+                offsetY: 20,
+                fontFamily: "Public Sans",
+              },
+              total: {
+                show: true,
+                fontSize: "0.8125rem",
+                color: axisColor,
+                label: "Weekly",
+                formatter: function (w) {
+                  return "38%";
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+
+  if (
+    typeof chartOrderStatistics !== undefined &&
+    chartOrderStatistics !== null
+  ) {
+    const statisticsChart = new ApexCharts(
+      chartOrderStatistics,
+      orderChartConfig
+    );
+    statisticsChart.render();
+  }
+}
+
+function dashboardAnalitics() {
+  let cardColor, headingColor, axisColor, shadeColor, borderColor;
+
+  cardColor = config.colors.cardColor;
+  headingColor = config.colors.headingColor;
+  axisColor = config.colors.axisColor;
+  borderColor = config.colors.borderColor;
+
+  // Total Revenue Report Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalRevenueChartEl = document.querySelector("#totalRevenueChart"),
+    totalRevenueChartOptions = {
+      series: [
+        {
+          name: "2021",
+          data: [18, 7, 15, 29, 18, 12, 9],
+        },
+        {
+          name: "2020",
+          data: [-13, -18, -9, -14, -5, -17, -15],
+        },
+      ],
+      chart: {
+        height: 300,
+        stacked: true,
+        type: "bar",
+        toolbar: { show: false },
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: "33%",
+          borderRadius: 12,
+          startingShape: "rounded",
+          endingShape: "rounded",
+        },
+      },
+      colors: [config.colors.primary, config.colors.info],
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        curve: "smooth",
+        width: 6,
+        lineCap: "round",
+        colors: [cardColor],
+      },
+      legend: {
+        show: true,
+        horizontalAlign: "left",
+        position: "top",
+        markers: {
+          height: 8,
+          width: 8,
+          radius: 12,
+          offsetX: -3,
+        },
+        labels: {
+          colors: axisColor,
+        },
+        itemMargin: {
+          horizontal: 10,
+        },
+      },
+      grid: {
+        borderColor: borderColor,
+        padding: {
+          top: 0,
+          bottom: -8,
+          left: 20,
+          right: 20,
+        },
+      },
+      xaxis: {
+        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+        labels: {
+          style: {
+            fontSize: "13px",
+            colors: axisColor,
+          },
+        },
+        axisTicks: {
+          show: false,
+        },
+        axisBorder: {
+          show: false,
+        },
+      },
+      yaxis: {
+        labels: {
+          style: {
+            fontSize: "13px",
+            colors: axisColor,
+          },
+        },
+      },
+      responsive: [
+        {
+          breakpoint: 1700,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "32%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 1580,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "35%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 1440,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "42%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "48%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "40%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 1040,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 11,
+                columnWidth: "48%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 991,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "30%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 840,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "35%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 768,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "28%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 640,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "32%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 576,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "37%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 480,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "45%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 420,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "52%",
+              },
+            },
+          },
+        },
+        {
+          breakpoint: 380,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: "60%",
+              },
+            },
+          },
+        },
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: "none",
+          },
+        },
+        active: {
+          filter: {
+            type: "none",
+          },
+        },
+      },
+    };
+  if (
+    typeof totalRevenueChartEl !== undefined &&
+    totalRevenueChartEl !== null
+  ) {
+    const totalRevenueChart = new ApexCharts(
+      totalRevenueChartEl,
+      totalRevenueChartOptions
+    );
+    totalRevenueChart.render();
+  }
+
+  // Growth Chart - Radial Bar Chart
+  // --------------------------------------------------------------------
+  const growthChartEl = document.querySelector("#growthChart"),
+    growthChartOptions = {
+      series: [78],
+      labels: ["Growth"],
+      chart: {
+        height: 240,
+        type: "radialBar",
+      },
+      plotOptions: {
+        radialBar: {
+          size: 150,
+          offsetY: 10,
+          startAngle: -150,
+          endAngle: 150,
+          hollow: {
+            size: "55%",
+          },
+          track: {
+            background: cardColor,
+            strokeWidth: "100%",
+          },
+          dataLabels: {
+            name: {
+              offsetY: 15,
+              color: headingColor,
+              fontSize: "15px",
+              fontWeight: "500",
+              fontFamily: "Public Sans",
+            },
+            value: {
+              offsetY: -25,
+              color: headingColor,
+              fontSize: "22px",
+              fontWeight: "500",
+              fontFamily: "Public Sans",
+            },
+          },
+        },
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: "gradient",
+        gradient: {
+          shade: "dark",
+          shadeIntensity: 0.5,
+          gradientToColors: [config.colors.primary],
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.6,
+          stops: [30, 70, 100],
+        },
+      },
+      stroke: {
+        dashArray: 5,
+      },
+      grid: {
+        padding: {
+          top: -35,
+          bottom: -10,
+        },
+      },
+      states: {
+        hover: {
+          filter: {
+            type: "none",
+          },
+        },
+        active: {
+          filter: {
+            type: "none",
+          },
+        },
+      },
+    };
+  if (typeof growthChartEl !== undefined && growthChartEl !== null) {
+    const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
+    growthChart.render();
+  }
+
+  // Profit Report Line Chart
+  // --------------------------------------------------------------------
+  const profileReportChartEl = document.querySelector("#profileReportChart"),
+    profileReportChartConfig = {
+      chart: {
+        height: 80,
+        // width: 175,
+        type: "line",
+        toolbar: {
+          show: false,
+        },
+        dropShadow: {
+          enabled: true,
+          top: 10,
+          left: 5,
+          blur: 3,
+          color: config.colors.warning,
+          opacity: 0.15,
+        },
+        sparkline: {
+          enabled: true,
+        },
+      },
+      grid: {
+        show: false,
+        padding: {
+          right: 8,
+        },
+      },
+      colors: [config.colors.warning],
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 5,
+        curve: "smooth",
+      },
+      series: [
+        {
+          data: [110, 270, 145, 245, 205, 285],
+        },
+      ],
+      xaxis: {
+        show: false,
+        lines: {
+          show: false,
+        },
+        labels: {
+          show: false,
+        },
+        axisBorder: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+      },
+    };
+  if (
+    typeof profileReportChartEl !== undefined &&
+    profileReportChartEl !== null
+  ) {
+    const profileReportChart = new ApexCharts(
+      profileReportChartEl,
+      profileReportChartConfig
+    );
+    profileReportChart.render();
+  }
+
+  // Order Statistics Chart
+  // --------------------------------------------------------------------
+  const chartOrderStatistics = document.querySelector("#orderStatisticsChart"),
+    orderChartConfig = {
+      chart: {
+        height: 165,
+        width: 130,
+        type: "donut",
+      },
+      labels: ["Electronic", "Sports", "Decor", "Fashion"],
+      series: [85, 15, 50, 50],
+      colors: [
+        config.colors.primary,
+        config.colors.secondary,
+        config.colors.info,
+        config.colors.success,
+      ],
+      stroke: {
+        width: 5,
+        colors: [cardColor],
+      },
+      dataLabels: {
+        enabled: false,
+        formatter: function (val, opt) {
+          return parseInt(val) + "%";
+        },
+      },
+      legend: {
+        show: false,
+      },
+      grid: {
+        padding: {
+          top: 0,
+          bottom: 0,
+          right: 15,
+        },
+      },
+      states: {
+        hover: {
+          filter: { type: "none" },
+        },
+        active: {
+          filter: { type: "none" },
+        },
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: "75%",
+            labels: {
+              show: true,
+              value: {
+                fontSize: "1.5rem",
+                fontFamily: "Public Sans",
+                color: headingColor,
+                offsetY: -15,
+                formatter: function (val) {
+                  return parseInt(val) + "%";
+                },
+              },
+              name: {
+                offsetY: 20,
+                fontFamily: "Public Sans",
+              },
+              total: {
+                show: true,
+                fontSize: "0.8125rem",
+                color: axisColor,
+                label: "Weekly",
+                formatter: function (w) {
+                  return "38%";
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+  if (
+    typeof chartOrderStatistics !== undefined &&
+    chartOrderStatistics !== null
+  ) {
+    const statisticsChart = new ApexCharts(
+      chartOrderStatistics,
+      orderChartConfig
+    );
+    statisticsChart.render();
+  }
+
+  // Income Chart - Area chart
+  // --------------------------------------------------------------------
+  const incomeChartEl = document.querySelector("#incomeChart"),
+    incomeChartConfig = {
+      series: [
+        {
+          data: [24, 21, 30, 22, 42, 26, 35, 29],
+        },
+      ],
+      chart: {
+        height: 215,
+        parentHeightOffset: 0,
+        parentWidthOffset: 0,
+        toolbar: {
+          show: false,
+        },
+        type: "area",
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 2,
+        curve: "smooth",
+      },
+      legend: {
+        show: false,
+      },
+      markers: {
+        size: 6,
+        colors: "transparent",
+        strokeColors: "transparent",
+        strokeWidth: 4,
+        discrete: [
+          {
+            fillColor: config.colors.white,
+            seriesIndex: 0,
+            dataPointIndex: 7,
+            strokeColor: config.colors.primary,
+            strokeWidth: 2,
+            size: 6,
+            radius: 8,
+          },
+        ],
+        hover: {
+          size: 7,
+        },
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: "gradient",
+        gradient: {
+          shade: shadeColor,
+          shadeIntensity: 0.6,
+          opacityFrom: 0.5,
+          opacityTo: 0.25,
+          stops: [0, 95, 100],
+        },
+      },
+      grid: {
+        borderColor: borderColor,
+        strokeDashArray: 3,
+        padding: {
+          top: -20,
+          bottom: -8,
+          left: -10,
+          right: 8,
+        },
+      },
+      xaxis: {
+        categories: ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+        labels: {
+          show: true,
+          style: {
+            fontSize: "13px",
+            colors: axisColor,
+          },
+        },
+      },
+      yaxis: {
+        labels: {
+          show: false,
+        },
+        min: 10,
+        max: 50,
+        tickAmount: 4,
+      },
+    };
+  if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
+    const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
+    incomeChart.render();
+  }
+
+  // Expenses Mini Chart - Radial Chart
+  // --------------------------------------------------------------------
+  const weeklyExpensesEl = document.querySelector("#expensesOfWeek"),
+    weeklyExpensesConfig = {
+      series: [65],
+      chart: {
+        width: 60,
+        height: 60,
+        type: "radialBar",
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: 0,
+          endAngle: 360,
+          strokeWidth: "8",
+          hollow: {
+            margin: 2,
+            size: "45%",
+          },
+          track: {
+            strokeWidth: "50%",
+            background: borderColor,
+          },
+          dataLabels: {
+            show: true,
+            name: {
+              show: false,
+            },
+            value: {
+              formatter: function (val) {
+                return "$" + parseInt(val);
+              },
+              offsetY: 5,
+              color: "#697a8d",
+              fontSize: "13px",
+              show: true,
+            },
+          },
+        },
+      },
+      fill: {
+        type: "solid",
+        colors: config.colors.primary,
+      },
+      stroke: {
+        lineCap: "round",
+      },
+      grid: {
+        padding: {
+          top: -10,
+          bottom: -15,
+          left: -10,
+          right: -10,
+        },
+      },
+      states: {
+        hover: {
+          filter: {
+            type: "none",
+          },
+        },
+        active: {
+          filter: {
+            type: "none",
+          },
+        },
+      },
+    };
+  if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
+    const weeklyExpenses = new ApexCharts(
+      weeklyExpensesEl,
+      weeklyExpensesConfig
+    );
+    weeklyExpenses.render();
+  }
+}

public/assets/js/extended-ui-perfect-scrollbar.js

@@ -0,0 +1,37 @@
+/**
+ * Perfect Scrollbar
+ */
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const verticalExample = document.getElementById('vertical-example'),
+      horizontalExample = document.getElementById('horizontal-example'),
+      horizVertExample = document.getElementById('both-scrollbars-example');
+
+    // Vertical Example
+    // --------------------------------------------------------------------
+    if (verticalExample) {
+      new PerfectScrollbar(verticalExample, {
+        wheelPropagation: false
+      });
+    }
+
+    // Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizontalExample) {
+      new PerfectScrollbar(horizontalExample, {
+        wheelPropagation: false,
+        suppressScrollY: true
+      });
+    }
+
+    // Both vertical and Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizVertExample) {
+      new PerfectScrollbar(horizVertExample, {
+        wheelPropagation: false
+      });
+    }
+  })();
+});

public/assets/js/form-basic-inputs.js

@@ -0,0 +1,11 @@
+/**
+ * Form Basic Inputs
+ */
+
+'use strict';
+
+(function () {
+  // Indeterminate checkbox
+  const checkbox = document.getElementById('defaultCheck2');
+  checkbox.indeterminate = true;
+})();

public/assets/js/form-wizard-icons.js

@@ -0,0 +1,164 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+$(function () {
+  const select2 = $('.select2'),
+    selectPicker = $('.selectpicker');
+
+  // Bootstrap select
+  if (selectPicker.length) {
+    selectPicker.selectpicker();
+  }
+
+  // select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+(function () {
+  // Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIcons = document.querySelector('.wizard-icons-example');
+
+  if (typeof wizardIcons !== undefined && wizardIcons !== null) {
+    const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
+      wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
+      wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
+
+    const iconsStepper = new Stepper(wizardIcons, {
+      linear: false
+    });
+    if (wizardIconsBtnNextList) {
+      wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
+        wizardIconsBtnNext.addEventListener('click', event => {
+          iconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsBtnPrevList) {
+      wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
+        wizardIconsBtnPrev.addEventListener('click', event => {
+          iconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsBtnSubmit) {
+      wizardIconsBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Vertical Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsVertical = document.querySelector('.wizard-vertical-icons-example');
+
+  if (typeof wizardIconsVertical !== undefined && wizardIconsVertical !== null) {
+    const wizardIconsVerticalBtnNextList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-next')),
+      wizardIconsVerticalBtnPrevList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-prev')),
+      wizardIconsVerticalBtnSubmit = wizardIconsVertical.querySelector('.btn-submit');
+
+    const verticalIconsStepper = new Stepper(wizardIconsVertical, {
+      linear: false
+    });
+
+    if (wizardIconsVerticalBtnNextList) {
+      wizardIconsVerticalBtnNextList.forEach(wizardIconsVerticalBtnNext => {
+        wizardIconsVerticalBtnNext.addEventListener('click', event => {
+          verticalIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnPrevList) {
+      wizardIconsVerticalBtnPrevList.forEach(wizardIconsVerticalBtnPrev => {
+        wizardIconsVerticalBtnPrev.addEventListener('click', event => {
+          verticalIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnSubmit) {
+      wizardIconsVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModern = document.querySelector('.wizard-modern-icons-example');
+
+  if (typeof wizardIconsModern !== undefined && wizardIconsModern !== null) {
+    const wizardIconsModernBtnNextList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-next')),
+      wizardIconsModernBtnPrevList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-prev')),
+      wizardIconsModernBtnSubmit = wizardIconsModern.querySelector('.btn-submit');
+
+    const modernIconsStepper = new Stepper(wizardIconsModern, {
+      linear: false
+    });
+
+    if (wizardIconsModernBtnNextList) {
+      wizardIconsModernBtnNextList.forEach(wizardIconsModernBtnNext => {
+        wizardIconsModernBtnNext.addEventListener('click', event => {
+          modernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernBtnPrevList) {
+      wizardIconsModernBtnPrevList.forEach(wizardIconsModernBtnPrev => {
+        wizardIconsModernBtnPrev.addEventListener('click', event => {
+          modernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernBtnSubmit) {
+      wizardIconsModernBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModernVertical = document.querySelector('.wizard-modern-vertical-icons-example');
+
+  if (typeof wizardIconsModernVertical !== undefined && wizardIconsModernVertical !== null) {
+    const wizardIconsModernVerticalBtnNextList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-next')),
+      wizardIconsModernVerticalBtnPrevList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-prev')),
+      wizardIconsModernVerticalBtnSubmit = wizardIconsModernVertical.querySelector('.btn-submit');
+
+    const verticalModernIconsStepper = new Stepper(wizardIconsModernVertical, {
+      linear: false
+    });
+
+    if (wizardIconsModernVerticalBtnNextList) {
+      wizardIconsModernVerticalBtnNextList.forEach(wizardIconsModernVerticalBtnNext => {
+        wizardIconsModernVerticalBtnNext.addEventListener('click', event => {
+          verticalModernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnPrevList) {
+      wizardIconsModernVerticalBtnPrevList.forEach(wizardIconsModernVerticalBtnPrev => {
+        wizardIconsModernVerticalBtnPrev.addEventListener('click', event => {
+          verticalModernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnSubmit) {
+      wizardIconsModernVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+})();

public/assets/js/main.js

@@ -0,0 +1,118 @@
+/**
+ * Main
+ */
+
+'use strict';
+
+let menu, animate;
+
+function Main () {
+  // Initialize menu
+  //-----------------
+
+  let layoutMenuEl = document.querySelectorAll('#layout-menu');
+  layoutMenuEl.forEach(function (element) {
+    menu = new Menu(element, {
+      orientation: 'vertical',
+      closeChildren: false
+    });
+    // Change parameter to true if you want scroll animation
+    window.Helpers.scrollToActive((animate = false));
+    window.Helpers.mainMenu = menu;
+  });
+
+  // Initialize menu togglers and bind click on each
+  let menuToggler = document.querySelectorAll('.layout-menu-toggle');
+  menuToggler.forEach(item => {
+    item.addEventListener('click', event => {
+      event.preventDefault();
+      window.Helpers.toggleCollapsed();
+    });
+  });
+
+  // Display menu toggle (layout-menu-toggle) on hover with delay
+  let delay = function (elem, callback) {
+    let timeout = null;
+    elem.onmouseenter = function () {
+      // Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
+      if (!Helpers.isSmallScreen()) {
+        timeout = setTimeout(callback, 300);
+      } else {
+        timeout = setTimeout(callback, 0);
+      }
+    };
+
+    elem.onmouseleave = function () {
+      // Clear any timers set to timeout
+      document.querySelector('.layout-menu-toggle').classList.remove('d-block');
+      clearTimeout(timeout);
+    };
+  };
+  if (document.getElementById('layout-menu')) {
+    delay(document.getElementById('layout-menu'), function () {
+      // not for small screen
+      if (!Helpers.isSmallScreen()) {
+        document.querySelector('.layout-menu-toggle').classList.add('d-block');
+      }
+    });
+  }
+
+  // Display in main menu when menu scrolls
+  let menuInnerContainer = document.getElementsByClassName('menu-inner'),
+    menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
+  if (menuInnerContainer.length > 0 && menuInnerShadow) {
+    menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
+      if (this.querySelector('.ps__thumb-y').offsetTop) {
+        menuInnerShadow.style.display = 'block';
+      } else {
+        menuInnerShadow.style.display = 'none';
+      }
+    });
+  }
+
+  // Init helpers & misc
+  // --------------------
+
+  // Init BS Tooltip
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Accordion active class
+  const accordionActiveFunction = function (e) {
+    if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
+      e.target.closest('.accordion-item').classList.add('active');
+    } else {
+      e.target.closest('.accordion-item').classList.remove('active');
+    }
+  };
+
+  const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
+  const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
+    accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
+    accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
+  });
+
+  // Auto update layout based on screen size
+  window.Helpers.setAutoUpdate(true);
+
+  // Toggle Password Visibility
+  window.Helpers.initPasswordToggle();
+
+  // Speech To Text
+  window.Helpers.initSpeechToText();
+
+  // Manage menu expanded/collapsed with templateCustomizer & local storage
+  //------------------------------------------------------------------
+
+  // If current layout is horizontal OR current window screen is small (overlay menu) than return from here
+  if (window.Helpers.isSmallScreen()) {
+    return;
+  }
+
+  // If current layout is vertical and current window screen is > small
+
+  // Auto update menu collapsed/expanded based on the themeConfig
+  window.Helpers.setCollapsed(true, false);
+};

public/assets/js/pages-account-settings-account.js

@@ -0,0 +1,29 @@
+/**
+ * Account Settings - Account
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const deactivateAcc = document.querySelector('#formAccountDeactivation');
+
+    // Update/reset user image of account page
+    let accountUserImage = document.getElementById('uploadedAvatar');
+    const fileInput = document.querySelector('.account-file-input'),
+      resetFileInput = document.querySelector('.account-image-reset');
+
+    if (accountUserImage) {
+      const resetImage = accountUserImage.src;
+      fileInput.onchange = () => {
+        if (fileInput.files[0]) {
+          accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
+        }
+      };
+      resetFileInput.onclick = () => {
+        fileInput.value = '';
+        accountUserImage.src = resetImage;
+      };
+    }
+  })();
+});

public/assets/js/ui-modals.js

@@ -0,0 +1,33 @@
+/**
+ * UI Modals
+ */
+
+'use strict';
+
+(function () {
+  // On hiding modal, remove iframe video/audio to stop playing
+  const youTubeModal = document.querySelector('#youTubeModal'),
+    youTubeModalVideo = youTubeModal.querySelector('iframe');
+  youTubeModal.addEventListener('hidden.bs.modal', function () {
+    youTubeModalVideo.setAttribute('src', '');
+  });
+
+  // Function to get and auto play youTube video
+  const autoPlayYouTubeModal = function () {
+    const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
+    modalTriggerList.map(function (modalTriggerEl) {
+      modalTriggerEl.onclick = function () {
+        const theModal = this.getAttribute('data-bs-target'),
+          videoSRC = this.getAttribute('data-theVideo'),
+          videoSRCauto = `${videoSRC}?autoplay=1`,
+          modalVideo = document.querySelector(`${theModal} iframe`);
+        if (modalVideo) {
+          modalVideo.setAttribute('src', videoSRCauto);
+        }
+      };
+    });
+  };
+
+  // Calling function on load
+  autoPlayYouTubeModal();
+})();

public/assets/js/ui-popover.js

@@ -0,0 +1,13 @@
+// /**
+//  * UI Tooltips & Popovers
+//  */
+
+'use strict';
+
+(function () {
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    // added { html: true, sanitize: false } option to render button in content area of popover
+    return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false });
+  });
+})();

public/assets/js/ui-toasts.js

@@ -0,0 +1,39 @@
+/**
+ * UI Toasts
+ */
+
+'use strict';
+
+function Toast () {
+  // Bootstrap toasts example
+  // --------------------------------------------------------------------
+  const toastPlacementExample = document.querySelector('.toast-placement-ex'),
+    toastPlacementBtn = document.querySelector('#showToastPlacement');
+  let selectedType, selectedPlacement, toastPlacement;
+
+  // Dispose toast when open another
+  function toastDispose(toast) {
+    if (toast && toast._element !== null) {
+      if (toastPlacementExample) {
+        toastPlacementExample.classList.remove(selectedType);
+        DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement);
+      }
+      toast.dispose();
+    }
+  }
+  // Placement Button click
+  if (toastPlacementBtn) {
+    toastPlacementBtn.onclick = function () {
+      if (toastPlacement) {
+        toastDispose(toastPlacement);
+      }
+      selectedType = document.querySelector('#selectTypeOpt').value;
+      selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');
+
+      toastPlacementExample.classList.add(selectedType);
+      DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
+      toastPlacement = new bootstrap.Toast(toastPlacementExample);
+      toastPlacement.show();
+    };
+  }
+};

public/assets/vendor/css/pages/page-account-settings.css

@@ -0,0 +1,7 @@
+.api-key-actions {
+  position: absolute !important;
+  top: 0.75rem;
+  right: 0.5rem;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtYWNjb3VudC1zZXR0aW5ncy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSw2QkFBNkI7RUFDN0IsWUFBWTtFQUNaLGFBQWE7QUFDZiIsImZpbGUiOiJwYWdlcy9wYWdlLWFjY291bnQtc2V0dGluZ3MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFwaS1rZXktYWN0aW9ucyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICB0b3A6IDAuNzVyZW07XG4gIHJpZ2h0OiAwLjVyZW07XG59XG4iXX0= */

public/assets/vendor/css/pages/page-icons.css

@@ -0,0 +1,29 @@
+#icons-container .icon-card {
+  width: 128px;
+}
+#icons-container .icon-card i {
+  font-size: 2rem;
+}
+
+@media (max-width: 1024px) {
+  #icons-container .icon-card {
+    width: 126px;
+  }
+}
+@media (max-width: 767.98px) {
+  #icons-container .icon-card {
+    width: 131px;
+  }
+}
+@media (max-width: 414px) {
+  #icons-container .icon-card {
+    width: 110px;
+  }
+}
+@media (max-width: 375px) {
+  #icons-container .icon-card {
+    width: 150px;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtaWNvbnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBWTtBQUNkO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRiIsImZpbGUiOiJwYWdlcy9wYWdlLWljb25zLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gIHdpZHRoOiAxMjhweDtcbn1cbiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCBpIHtcbiAgZm9udC1zaXplOiAycmVtO1xufVxuXG5AbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDEyNnB4O1xuICB9XG59XG5AbWVkaWEgKG1heC13aWR0aDogNzY3Ljk4cHgpIHtcbiAgI2ljb25zLWNvbnRhaW5lciAuaWNvbi1jYXJkIHtcbiAgICB3aWR0aDogMTMxcHg7XG4gIH1cbn1cbkBtZWRpYSAobWF4LXdpZHRoOiA0MTRweCkge1xuICAjaWNvbnMtY29udGFpbmVyIC5pY29uLWNhcmQge1xuICAgIHdpZHRoOiAxMTBweDtcbiAgfVxufVxuQG1lZGlhIChtYXgtd2lkdGg6IDM3NXB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDE1MHB4O1xuICB9XG59XG4iXX0= */

public/assets/vendor/css/pages/page-misc.css

@@ -0,0 +1,10 @@
+.misc-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - (1.625rem * 2));
+  text-align: center;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtbWlzYy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLHVCQUF1QjtFQUN2QixtQkFBbUI7RUFDbkIsd0NBQXdDO0VBQ3hDLGtCQUFrQjtBQUNwQiIsImZpbGUiOiJwYWdlcy9wYWdlLW1pc2MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1pc2Mtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtaW4taGVpZ2h0OiBjYWxjKDEwMHZoIC0gKDEuNjI1cmVtICogMikpO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4iXX0= */

public/assets/vendor/js/form-wizard-icons.js

@@ -0,0 +1,164 @@
+/**
+ *  Form Wizard
+ */
+
+'use strict';
+
+$(function () {
+  const select2 = $('.select2'),
+    selectPicker = $('.selectpicker');
+
+  // Bootstrap select
+  if (selectPicker.length) {
+    selectPicker.selectpicker();
+  }
+
+  // select2
+  if (select2.length) {
+    select2.each(function () {
+      var $this = $(this);
+      $this.wrap('<div class="position-relative"></div>');
+      $this.select2({
+        placeholder: 'Select value',
+        dropdownParent: $this.parent()
+      });
+    });
+  }
+});
+
+(function () {
+  // Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIcons = document.querySelector('.wizard-icons-example');
+
+  if (typeof wizardIcons !== undefined && wizardIcons !== null) {
+    const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
+      wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
+      wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
+
+    const iconsStepper = new Stepper(wizardIcons, {
+      linear: false
+    });
+    if (wizardIconsBtnNextList) {
+      wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
+        wizardIconsBtnNext.addEventListener('click', event => {
+          iconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsBtnPrevList) {
+      wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
+        wizardIconsBtnPrev.addEventListener('click', event => {
+          iconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsBtnSubmit) {
+      wizardIconsBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Vertical Icons Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsVertical = document.querySelector('.wizard-vertical-icons-example');
+
+  if (typeof wizardIconsVertical !== undefined && wizardIconsVertical !== null) {
+    const wizardIconsVerticalBtnNextList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-next')),
+      wizardIconsVerticalBtnPrevList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-prev')),
+      wizardIconsVerticalBtnSubmit = wizardIconsVertical.querySelector('.btn-submit');
+
+    const verticalIconsStepper = new Stepper(wizardIconsVertical, {
+      linear: false
+    });
+
+    if (wizardIconsVerticalBtnNextList) {
+      wizardIconsVerticalBtnNextList.forEach(wizardIconsVerticalBtnNext => {
+        wizardIconsVerticalBtnNext.addEventListener('click', event => {
+          verticalIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnPrevList) {
+      wizardIconsVerticalBtnPrevList.forEach(wizardIconsVerticalBtnPrev => {
+        wizardIconsVerticalBtnPrev.addEventListener('click', event => {
+          verticalIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsVerticalBtnSubmit) {
+      wizardIconsVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModern = document.querySelector('.wizard-modern-icons-example');
+
+  if (typeof wizardIconsModern !== undefined && wizardIconsModern !== null) {
+    const wizardIconsModernBtnNextList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-next')),
+      wizardIconsModernBtnPrevList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-prev')),
+      wizardIconsModernBtnSubmit = wizardIconsModern.querySelector('.btn-submit');
+
+    const modernIconsStepper = new Stepper(wizardIconsModern, {
+      linear: false
+    });
+
+    if (wizardIconsModernBtnNextList) {
+      wizardIconsModernBtnNextList.forEach(wizardIconsModernBtnNext => {
+        wizardIconsModernBtnNext.addEventListener('click', event => {
+          modernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernBtnPrevList) {
+      wizardIconsModernBtnPrevList.forEach(wizardIconsModernBtnPrev => {
+        wizardIconsModernBtnPrev.addEventListener('click', event => {
+          modernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernBtnSubmit) {
+      wizardIconsModernBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+
+  // Icons Modern Wizard
+  // --------------------------------------------------------------------
+  const wizardIconsModernVertical = document.querySelector('.wizard-modern-vertical-icons-example');
+
+  if (typeof wizardIconsModernVertical !== undefined && wizardIconsModernVertical !== null) {
+    const wizardIconsModernVerticalBtnNextList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-next')),
+      wizardIconsModernVerticalBtnPrevList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-prev')),
+      wizardIconsModernVerticalBtnSubmit = wizardIconsModernVertical.querySelector('.btn-submit');
+
+    const verticalModernIconsStepper = new Stepper(wizardIconsModernVertical, {
+      linear: false
+    });
+
+    if (wizardIconsModernVerticalBtnNextList) {
+      wizardIconsModernVerticalBtnNextList.forEach(wizardIconsModernVerticalBtnNext => {
+        wizardIconsModernVerticalBtnNext.addEventListener('click', event => {
+          verticalModernIconsStepper.next();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnPrevList) {
+      wizardIconsModernVerticalBtnPrevList.forEach(wizardIconsModernVerticalBtnPrev => {
+        wizardIconsModernVerticalBtnPrev.addEventListener('click', event => {
+          verticalModernIconsStepper.previous();
+        });
+      });
+    }
+    if (wizardIconsModernVerticalBtnSubmit) {
+      wizardIconsModernVerticalBtnSubmit.addEventListener('click', event => {
+        alert('Submitted..!!');
+      });
+    }
+  }
+})();

public/assets/vendor/libs/apex-charts/apex-charts.css

@@ -0,0 +1,764 @@
+/**
+* Apex Charts
+*/
+.apexcharts-canvas {
+  position: relative;
+  user-select: none;
+  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
+}
+
+/* scrollbar is not visible by default for legend, hence forcing the visibility */
+.apexcharts-canvas ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 6px;
+}
+
+.apexcharts-canvas ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.apexcharts-inner {
+  position: relative;
+}
+
+.apexcharts-text tspan {
+  font-family: inherit;
+}
+
+.legend-mouseover-inactive {
+  transition: 0.15s ease all;
+  opacity: 0.2;
+}
+
+.apexcharts-series-collapsed {
+  opacity: 0;
+}
+
+.apexcharts-tooltip {
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px -4px #999;
+  cursor: default;
+  font-size: 14px;
+  left: 62px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  z-index: 12;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light {
+  border: 1px solid #e3e3e3;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark {
+  color: #fff;
+  background: rgba(30, 30, 30, 0.8);
+}
+
+.apexcharts-tooltip * {
+  font-family: inherit;
+}
+
+.apexcharts-tooltip-title {
+  padding: 6px;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  background: #ECEFF1;
+  border-bottom: 1px solid #ddd;
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+  background: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid #333;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  display: inline-block;
+  font-weight: 600;
+  margin-left: 5px;
+}
+
+.apexcharts-tooltip-text-y-label:empty,
+.apexcharts-tooltip-text-y-value:empty,
+.apexcharts-tooltip-text-goals-label:empty,
+.apexcharts-tooltip-text-goals-value:empty,
+.apexcharts-tooltip-text-z-value:empty {
+  display: none;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  font-weight: 600;
+}
+
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-goals-group,
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  display: flex;
+}
+
+.apexcharts-tooltip-text-goals-label:not(:empty),
+.apexcharts-tooltip-text-goals-value:not(:empty) {
+  margin-top: -6px;
+}
+
+.apexcharts-tooltip-marker {
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: 0px;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 10px;
+  display: none;
+  text-align: left;
+  justify-content: left;
+  align-items: center;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
+  opacity: 1;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active,
+.apexcharts-tooltip-series-group:last-child {
+  padding-bottom: 4px;
+}
+
+.apexcharts-tooltip-series-group-hidden {
+  opacity: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0 !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
+  padding: 4px 8px;
+}
+
+.apexcharts-tooltip-boxPlot {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.apexcharts-tooltip-box > div {
+  margin: 4px 0;
+}
+
+.apexcharts-tooltip-box span.value {
+  font-weight: bold;
+}
+
+.apexcharts-tooltip-rangebar {
+  padding: 5px 8px;
+}
+
+.apexcharts-tooltip-rangebar .category {
+  font-weight: 600;
+  color: #777;
+}
+
+.apexcharts-tooltip-rangebar .series-name {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.apexcharts-xaxistooltip {
+  opacity: 0;
+  padding: 9px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-xaxistooltip:after,
+.apexcharts-xaxistooltip:before {
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-xaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.apexcharts-xaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-left: -7px;
+}
+
+.apexcharts-xaxistooltip-bottom:after,
+.apexcharts-xaxistooltip-bottom:before {
+  bottom: 100%;
+}
+
+.apexcharts-xaxistooltip-top:after,
+.apexcharts-xaxistooltip-top:before {
+  top: 100%;
+}
+
+.apexcharts-xaxistooltip-bottom:after {
+  border-bottom-color: #ECEFF1;
+}
+
+.apexcharts-xaxistooltip-bottom:before {
+  border-bottom-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top:after {
+  border-top-color: #ECEFF1;
+}
+
+.apexcharts-xaxistooltip-top:before {
+  border-top-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-yaxistooltip {
+  opacity: 0;
+  padding: 4px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+}
+
+.apexcharts-yaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-yaxistooltip:after,
+.apexcharts-yaxistooltip:before {
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-yaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-top: -6px;
+}
+
+.apexcharts-yaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-top: -7px;
+}
+
+.apexcharts-yaxistooltip-left:after,
+.apexcharts-yaxistooltip-left:before {
+  left: 100%;
+}
+
+.apexcharts-yaxistooltip-right:after,
+.apexcharts-yaxistooltip-right:before {
+  right: 100%;
+}
+
+.apexcharts-yaxistooltip-left:after {
+  border-left-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-left:before {
+  border-left-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right:after {
+  border-right-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-right:before {
+  border-right-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip.apexcharts-active {
+  opacity: 1;
+}
+
+.apexcharts-yaxistooltip-hidden {
+  display: none;
+}
+
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xcrosshairs.apexcharts-active,
+.apexcharts-ycrosshairs.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-ycrosshairs-hidden {
+  opacity: 0;
+}
+
+.apexcharts-selection-rect {
+  cursor: move;
+}
+
+.svg_select_boundingRect, .svg_select_points_rot {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.apexcharts-selection-rect + g .svg_select_boundingRect,
+.apexcharts-selection-rect + g .svg_select_points_rot {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.apexcharts-selection-rect + g .svg_select_points_l,
+.apexcharts-selection-rect + g .svg_select_points_r {
+  cursor: ew-resize;
+  opacity: 1;
+  visibility: visible;
+}
+
+.svg_select_points {
+  fill: #efefef;
+  stroke: #333;
+  rx: 2;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
+  cursor: crosshair;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-pan {
+  cursor: move;
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon,
+.apexcharts-reset-icon,
+.apexcharts-pan-icon,
+.apexcharts-selection-icon,
+.apexcharts-menu-icon,
+.apexcharts-toolbar-custom-icon {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  line-height: 24px;
+  color: #6E8192;
+  text-align: center;
+}
+
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-menu-icon svg {
+  fill: #6E8192;
+}
+
+.apexcharts-selection-icon svg {
+  fill: #444;
+  transform: scale(0.76);
+}
+
+.apexcharts-theme-dark .apexcharts-zoom-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
+.apexcharts-theme-dark .apexcharts-reset-icon svg,
+.apexcharts-theme-dark .apexcharts-pan-icon svg,
+.apexcharts-theme-dark .apexcharts-selection-icon svg,
+.apexcharts-theme-dark .apexcharts-menu-icon svg,
+.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
+  fill: #f3f4f5;
+}
+
+.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
+  fill: #008FFB;
+}
+
+.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
+.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
+.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
+.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
+  fill: #333;
+}
+
+.apexcharts-selection-icon,
+.apexcharts-menu-icon {
+  position: relative;
+}
+
+.apexcharts-reset-icon {
+  margin-left: 5px;
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-reset-icon,
+.apexcharts-menu-icon {
+  transform: scale(0.85);
+}
+
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon {
+  transform: scale(0.7);
+}
+
+.apexcharts-zoomout-icon {
+  margin-right: 3px;
+}
+
+.apexcharts-pan-icon {
+  transform: scale(0.62);
+  position: relative;
+  left: 1px;
+  top: 0px;
+}
+
+.apexcharts-pan-icon svg {
+  fill: #fff;
+  stroke: #6E8192;
+  stroke-width: 2;
+}
+
+.apexcharts-pan-icon.apexcharts-selected svg {
+  stroke: #008FFB;
+}
+
+.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
+  stroke: #333;
+}
+
+.apexcharts-toolbar {
+  position: absolute;
+  z-index: 11;
+  max-width: 176px;
+  text-align: right;
+  border-radius: 3px;
+  padding: 0px 6px 2px 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.apexcharts-menu {
+  background: #fff;
+  position: absolute;
+  top: 100%;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 3px;
+  right: 10px;
+  opacity: 0;
+  min-width: 110px;
+  transition: 0.15s ease all;
+  pointer-events: none;
+}
+
+.apexcharts-menu.apexcharts-menu-open {
+  opacity: 1;
+  pointer-events: all;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-menu-item {
+  padding: 6px 7px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.apexcharts-theme-light .apexcharts-menu-item:hover {
+  background: #eee;
+}
+
+.apexcharts-theme-dark .apexcharts-menu {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .apexcharts-canvas:hover .apexcharts-toolbar {
+    opacity: 1;
+  }
+}
+.apexcharts-datalabel.apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-pie-label,
+.apexcharts-datalabels,
+.apexcharts-datalabel,
+.apexcharts-datalabel-label,
+.apexcharts-datalabel-value {
+  cursor: default;
+  pointer-events: none;
+}
+
+.apexcharts-pie-label-delay {
+  opacity: 0;
+  animation-name: opaque;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+
+.apexcharts-canvas .apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-hide .apexcharts-series-points {
+  opacity: 0;
+}
+
+.apexcharts-gridline,
+.apexcharts-annotation-rect,
+.apexcharts-tooltip .apexcharts-marker,
+.apexcharts-area-series .apexcharts-area,
+.apexcharts-line,
+.apexcharts-zoom-rect,
+.apexcharts-toolbar svg,
+.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-radar-series path,
+.apexcharts-radar-series polygon {
+  pointer-events: none;
+}
+
+/* markers */
+.apexcharts-marker {
+  transition: 0.15s ease all;
+}
+
+@keyframes opaque {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* Resize generated styles */
+@keyframes resizeanim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.resize-triggers {
+  animation: 1ms resizeanim;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.resize-triggers,
+.resize-triggers > div,
+.contract-trigger:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.resize-triggers > div {
+  background: #eee;
+  overflow: auto;
+}
+
+.contract-trigger:before {
+  width: 200%;
+  height: 200%;
+}
+
+.light-style .apexcharts-canvas .apexcharts-tooltip {
+  background: #fff;
+  border-color: #d9dee3;
+  box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  background: #fff;
+  border-color: #d9dee3;
+  font-family: var(--bs-font-sans-serif) !important;
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
+  color: #566a7f;
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
+  color: #fff;
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  font-weight: 500;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip {
+  background: #f5f5f9;
+  border-color: #d9dee3;
+  color: #566a7f;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:after {
+  border-bottom-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:before {
+  border-bottom-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:after {
+  border-left-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:before {
+  border-left-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:after {
+  border-right-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:before {
+  border-right-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:after {
+  border-top-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:before {
+  border-top-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip-text {
+  font-family: var(--bs-font-sans-serif) !important;
+  filter: none;
+}
+.light-style .apexcharts-canvas .apexcharts-marker {
+  filter: drop-shadow(0 2px 4px rgba(161, 172, 184, 0.4));
+}
+
+#orderStatisticsChart .apexcharts-xcrosshairs.apexcharts-active,
+#orderStatisticsChart .apexcharts-ycrosshairs.apexcharts-active,
+#totalRevenueChart .apexcharts-xcrosshairs.apexcharts-active,
+#totalRevenueChart .apexcharts-ycrosshairs.apexcharts-active,
+#expensesBarChart .apexcharts-xcrosshairs.apexcharts-active,
+#expensesBarChart .apexcharts-ycrosshairs.apexcharts-active {
+  opacity: 0;
+}

public/assets/vendor/libs/bootstrap-select/bootstrap-select.css

@@ -0,0 +1,599 @@
+@charset "UTF-8";
+@keyframes bs-notify-fadeOut {
+  0% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+select.bs-select-hidden,
+.bootstrap-select > select.bs-select-hidden,
+select.selectpicker {
+  display: none !important;
+}
+
+.bootstrap-select {
+  width: 220px;
+  vertical-align: middle;
+}
+.bootstrap-select > .dropdown-toggle {
+  position: relative;
+  width: 100%;
+  text-align: right;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bootstrap-select > .dropdown-toggle:after {
+  margin-top: -1px;
+}
+.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
+  color: #999;
+}
+.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:active {
+  color: rgba(255, 255, 255, 0.5);
+}
+.bootstrap-select > select {
+  position: absolute !important;
+  bottom: 0;
+  left: 50%;
+  display: block !important;
+  width: 0.5px !important;
+  height: 100% !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+  border: none;
+  z-index: 0 !important;
+}
+.bootstrap-select > select.mobile-device {
+  top: 0;
+  left: 0;
+  display: block !important;
+  width: 100% !important;
+  z-index: 2 !important;
+}
+.has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .bootstrap-select.is-invalid .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle {
+  border-color: rgb(185, 74, 72);
+}
+.bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select select:valid + .dropdown-toggle {
+  border-color: #28a745;
+}
+.bootstrap-select.fit-width {
+  width: auto !important;
+}
+.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+  width: 220px;
+}
+.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
+.bootstrap-select .dropdown-toggle:focus {
+  outline: thin dotted #333333 !important;
+  outline: 5px auto -webkit-focus-ring-color !important;
+  outline-offset: -2px;
+}
+
+.bootstrap-select.form-control {
+  margin-bottom: 0;
+  padding: 0;
+  border: none;
+  height: auto;
+}
+:not(.input-group) > .bootstrap-select.form-control:not([class*=col-]) {
+  width: 100%;
+}
+.bootstrap-select.form-control.input-group-btn {
+  float: none;
+  z-index: auto;
+}
+.form-inline .bootstrap-select, .form-inline .bootstrap-select.form-control:not([class*=col-]) {
+  width: auto;
+}
+.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*=col-] {
+  float: none;
+  display: inline-block;
+  margin-left: 0;
+}
+.bootstrap-select.dropdown-menu-right, .bootstrap-select[class*=col-].dropdown-menu-right, .row .bootstrap-select[class*=col-].dropdown-menu-right {
+  float: right;
+}
+.form-inline .bootstrap-select, .form-horizontal .bootstrap-select, .form-group .bootstrap-select {
+  margin-bottom: 0;
+}
+.form-group-lg .bootstrap-select.form-control, .form-group-sm .bootstrap-select.form-control {
+  padding: 0;
+}
+.form-group-lg .bootstrap-select.form-control .dropdown-toggle, .form-group-sm .bootstrap-select.form-control .dropdown-toggle {
+  height: 100%;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: inherit;
+}
+.bootstrap-select.form-control-sm .dropdown-toggle, .bootstrap-select.form-control-lg .dropdown-toggle {
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: inherit;
+}
+.bootstrap-select.form-control-sm .dropdown-toggle {
+  padding: 0.25rem 0.5rem;
+}
+.bootstrap-select.form-control-lg .dropdown-toggle {
+  padding: 0.5rem 1rem;
+}
+.form-inline .bootstrap-select .form-control {
+  width: 100%;
+}
+.bootstrap-select.disabled,
+.bootstrap-select > .disabled {
+  cursor: not-allowed;
+}
+.bootstrap-select.disabled:focus,
+.bootstrap-select > .disabled:focus {
+  outline: none !important;
+}
+.bootstrap-select.bs-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0 !important;
+  padding: 0 !important;
+}
+.bootstrap-select.bs-container .dropdown-menu {
+  z-index: 1060;
+}
+.bootstrap-select .dropdown-toggle .filter-option {
+  position: static;
+  top: 0;
+  left: 0;
+  float: left;
+  height: 100%;
+  width: 100%;
+  text-align: left;
+  overflow: hidden;
+  flex: 0 1 auto;
+}
+.bs3.bootstrap-select .dropdown-toggle .filter-option {
+  padding-right: inherit;
+}
+
+.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option {
+  position: absolute;
+  padding-top: inherit;
+  padding-bottom: inherit;
+  padding-left: inherit;
+  float: none;
+}
+.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
+  padding-right: inherit;
+}
+
+.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
+  overflow: hidden;
+}
+.bootstrap-select .dropdown-toggle .filter-expand {
+  width: 0 !important;
+  float: left;
+  opacity: 0 !important;
+  overflow: hidden;
+}
+.bootstrap-select .dropdown-toggle .caret {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  margin-top: -2px;
+  vertical-align: middle;
+}
+.bootstrap-select .dropdown-toggle .bs-select-clear-selected {
+  position: relative;
+  display: block;
+  margin-right: 5px;
+  text-align: center;
+}
+.bs3.bootstrap-select .dropdown-toggle .bs-select-clear-selected {
+  padding-right: inherit;
+}
+
+.bootstrap-select .dropdown-toggle .bs-select-clear-selected span {
+  position: relative;
+  top: calc((-0.6666666667em + 1ex) / 2);
+  pointer-events: none;
+}
+.bs3.bootstrap-select .dropdown-toggle .bs-select-clear-selected span {
+  top: auto;
+}
+
+.bootstrap-select .dropdown-toggle.bs-placeholder .bs-select-clear-selected {
+  display: none;
+}
+.input-group .bootstrap-select.form-control .dropdown-toggle {
+  border-radius: inherit;
+}
+.bootstrap-select[class*=col-] .dropdown-toggle {
+  width: 100%;
+}
+.bootstrap-select .dropdown-menu {
+  min-width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.bootstrap-select .dropdown-menu > .inner:focus {
+  outline: none !important;
+}
+.bootstrap-select .dropdown-menu.inner {
+  position: static;
+  float: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.bootstrap-select .dropdown-menu li {
+  position: relative;
+}
+.bootstrap-select .dropdown-menu li.active small {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+.bootstrap-select .dropdown-menu li.disabled a {
+  cursor: not-allowed;
+}
+.bootstrap-select .dropdown-menu li a {
+  cursor: pointer;
+  user-select: none;
+}
+.bootstrap-select .dropdown-menu li a.opt {
+  position: relative;
+  padding-left: 2.25em;
+}
+.bootstrap-select .dropdown-menu li a span.check-mark {
+  display: none;
+}
+.bootstrap-select .dropdown-menu li a span.text {
+  display: inline-block;
+}
+.bootstrap-select .dropdown-menu li small {
+  padding-left: 0.5em;
+}
+.bootstrap-select .dropdown-menu .notify {
+  position: absolute;
+  bottom: 5px;
+  width: 96%;
+  margin: 0 2%;
+  min-height: 26px;
+  padding: 3px 5px;
+  background: rgb(245, 245, 245);
+  border: 1px solid rgb(227, 227, 227);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+  opacity: 0.9;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.bootstrap-select .dropdown-menu .notify.fadeOut {
+  animation: 300ms linear 750ms forwards bs-notify-fadeOut;
+}
+.bootstrap-select .no-results {
+  padding: 3px;
+  background: #f5f5f5;
+  margin: 0 5px;
+  white-space: nowrap;
+}
+.bootstrap-select.fit-width .dropdown-toggle .filter-option {
+  position: static;
+  display: inline;
+  padding: 0;
+}
+.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,
+.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
+  display: inline;
+}
+.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before {
+  content: " ";
+}
+.bootstrap-select.fit-width .dropdown-toggle .caret {
+  position: static;
+  top: auto;
+  margin-top: -1px;
+}
+.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+  position: absolute;
+  display: inline-block;
+  right: 15px;
+  top: 5px;
+}
+.bootstrap-select.show-tick .dropdown-menu li a span.text {
+  margin-right: 34px;
+}
+.bootstrap-select .bs-ok-default:after {
+  content: "";
+  display: block;
+  width: 0.5em;
+  height: 1em;
+  border-style: solid;
+  border-width: 0 0.26em 0.26em 0;
+  transform-style: preserve-3d;
+  transform: rotate(45deg);
+}
+
+.bootstrap-select.show-menu-arrow.open > .dropdown-toggle, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
+  z-index: 1061;
+}
+.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
+  content: "";
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid rgba(204, 204, 204, 0.2);
+  position: absolute;
+  bottom: -4px;
+  left: 9px;
+  display: none;
+}
+.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
+  content: "";
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid white;
+  position: absolute;
+  bottom: -4px;
+  left: 10px;
+  display: none;
+}
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
+  bottom: auto;
+  top: -4px;
+  border-top: 7px solid rgba(204, 204, 204, 0.2);
+  border-bottom: 0;
+}
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
+  bottom: auto;
+  top: -4px;
+  border-top: 6px solid white;
+  border-bottom: 0;
+}
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
+  right: 12px;
+  left: auto;
+}
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
+  right: 13px;
+  left: auto;
+}
+.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:after, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:before, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:after {
+  display: block;
+}
+
+.bs-searchbox,
+.bs-actionsbox,
+.bs-donebutton {
+  padding: 4px 8px;
+}
+
+.bs-actionsbox {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.bs-actionsbox .btn-group {
+  display: block;
+}
+.bs-actionsbox .btn-group button {
+  width: 50%;
+}
+
+.bs-donebutton {
+  float: left;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.bs-donebutton .btn-group {
+  display: block;
+}
+.bs-donebutton .btn-group button {
+  width: 100%;
+}
+
+.bs-searchbox + .bs-actionsbox {
+  padding: 0 8px 4px;
+}
+.bs-searchbox .form-control {
+  margin-bottom: 0;
+  width: 100%;
+  float: none;
+}
+
+.bootstrap-select *,
+.bootstrap-select .dropdown-toggle:focus {
+  outline: 0 !important;
+}
+
+.bootstrap-select .bs-searchbox,
+.bootstrap-select .bs-actionsbox,
+.bootstrap-select .bs-donebutton {
+  padding: 0 1rem 0.5rem;
+}
+.bootstrap-select .dropdown-toggle {
+  transition: none;
+  padding: calc(0.543rem - var(--bs-border-width)) 0.9375rem;
+  box-shadow: none !important;
+}
+.bootstrap-select .dropdown-toggle.show, .bootstrap-select .dropdown-toggle:focus {
+  padding: calc(0.543rem - 2px) calc(0.9375rem - var(--bs-border-width));
+}
+.bootstrap-select .dropdown-toggle:after {
+  transform: rotate(45deg) translateY(-100%);
+  position: absolute;
+  inset-inline-end: 23px;
+  top: 50%;
+  margin: 0 !important;
+}
+[dir=rtl] .bootstrap-select .dropdown-toggle:after {
+  inset-inline-end: 12px;
+}
+.bootstrap-select .dropdown-toggle:active {
+  transform: none !important;
+}
+.bootstrap-select .dropdown-toggle.show:after, .bootstrap-select .dropdown-toggle:focus:after {
+  inset-inline-end: calc(23px - var(--bs-border-width));
+}
+[dir=rtl] .bootstrap-select .dropdown-toggle.show:after, [dir=rtl] .bootstrap-select .dropdown-toggle:focus:after {
+  inset-inline-end: calc(12px - var(--bs-border-width));
+}
+.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
+  line-height: 1.375;
+}
+.bootstrap-select .btn:hover {
+  transform: none;
+}
+.bootstrap-select .btn:disabled, .bootstrap-select .btn.disabled {
+  color: var(--bs-body-color) !important;
+}
+.bootstrap-select .dropdown-menu .popover-header {
+  display: flex;
+  align-items: center;
+}
+.bootstrap-select .dropdown-menu .popover-header button {
+  border: none;
+  font-size: 1.5rem;
+  background: transparent;
+  padding-bottom: 0.125rem;
+}
+.bootstrap-select .is-invalid ~ .dropdown-toggle:after {
+  inset-inline-end: calc(23px - var(--bs-border-width));
+}
+[dir=rtl] .bootstrap-select .is-invalid ~ .dropdown-toggle:after {
+  inset-inline-end: calc(12px - var(--bs-border-width));
+}
+
+.bootstrap-select.dropup .dropdown-toggle:after {
+  transform: rotate(317deg) translateY(-30%);
+  inset-inline-end: 14px;
+}
+[dir=rtl] .bootstrap-select.dropup .dropdown-toggle:after {
+  inset-inline-end: 18px;
+}
+.bootstrap-select.dropup .dropdown-toggle.show:after, .bootstrap-select.dropup .dropdown-toggle:focus:after {
+  inset-inline-end: calc(14px - var(--bs-border-width));
+}
+[dir=rtl] .bootstrap-select.dropup .dropdown-toggle.show:after, [dir=rtl] .bootstrap-select.dropup .dropdown-toggle:focus:after {
+  inset-inline-end: calc(18px - var(--bs-border-width));
+}
+.bootstrap-select.dropup .is-invalid ~ .dropdown-toggle:after {
+  inset-inline-end: calc(14px - var(--bs-border-width));
+}
+[dir=rtl] .bootstrap-select.dropup .is-invalid ~ .dropdown-toggle:after {
+  inset-inline-end: calc(18px - var(--bs-border-width));
+}
+
+.bootstrap-select.show-tick .dropdown-menu li a {
+  position: relative;
+}
+[dir=rtl] .bootstrap-select.show-tick .dropdown-menu li a span.text {
+  margin-left: 2.125rem;
+  margin-right: 0;
+}
+.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+  display: block;
+  right: 1rem;
+  top: 50%;
+  margin: 0;
+  transform: translateY(-50%);
+  line-height: 1;
+}
+[dir=rtl] .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+  left: 1rem;
+  right: auto;
+}
+
+.bootstrap-select .dropdown-menu.inner .selected .waves-ripple {
+  display: none !important;
+}
+
+.bootstrap-select:not(.input-group-btn),
+.bootstrap-select[class*=col-] {
+  display: block;
+}
+
+html[class] .bootstrap-select.form-select {
+  background: none !important;
+  border: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+[dir=rtl] .bootstrap-select .dropdown-toggle .filter-option {
+  float: right;
+  right: 0;
+  left: auto;
+  text-align: right;
+  padding-left: inherit;
+  padding-right: 0;
+  margin-left: -100%;
+  margin-right: 0;
+}
+[dir=rtl] .bootstrap-select .filter-option-inner-inner {
+  float: right;
+}
+[dir=rtl] .bootstrap-select .dropdown-menu li small.text-muted,
+[dir=rtl] .bootstrap-select .filter-option small.text-muted {
+  position: relative;
+  top: 2px;
+  padding-left: 0;
+  padding-right: 0.5em;
+  float: left;
+}
+[dir=rtl] .bootstrap-select .dropdown-toggle .filter-option-inner {
+  padding-left: inherit;
+  padding-right: 0;
+}
+
+.light-style .bootstrap-select {
+  background-color: transparent;
+}
+.light-style .bootstrap-select .dropdown-toggle {
+  border-radius: 0.375rem;
+  border: var(--bs-border-width) solid #ced1d5;
+}
+.light-style .bootstrap-select .dropdown-toggle.show, .light-style .bootstrap-select .dropdown-toggle:focus {
+  border: 2px solid #696cff;
+}
+.light-style .bootstrap-select .dropdown-menu[data-popper-placement=top-start], .light-style .bootstrap-select .dropdown-menu[data-popper-placement=top-end] {
+  box-shadow: 0 -0.2rem 1.25rem rgba(145, 152, 159, 0.4);
+}
+.light-style .bootstrap-select .dropdown-menu .notify {
+  background: #fff;
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+}
+.light-style .bootstrap-select .dropdown-menu .popover-header button {
+  color: #646e78;
+}
+
+.dark-style .bootstrap-select {
+  background-color: transparent;
+}
+.dark-style .bootstrap-select .dropdown-toggle {
+  color: #d5d5e2;
+  border: var(--bs-border-width) solid #5f607b;
+  border-radius: 0.375rem;
+}
+.dark-style .bootstrap-select .dropdown-toggle:hover {
+  color: #d5d5e2;
+}
+.dark-style .bootstrap-select .dropdown-toggle.show, .dark-style .bootstrap-select .dropdown-toggle:focus {
+  border: 2px solid #696cff;
+}
+.dark-style .bootstrap-select .dropdown-menu[data-popper-placement=top-start], .dark-style .bootstrap-select .dropdown-menu[data-popper-placement=top-end] {
+  box-shadow: 0 -0.2rem 1.25rem rgba(15, 20, 34, 0.55);
+}
+.dark-style .bootstrap-select .dropdown-menu .notify {
+  background: #2b2c40;
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+}
+.dark-style .bootstrap-select .dropdown-menu .popover-header button {
+  color: #b2b2c4;
+}

public/assets/vendor/libs/bs-stepper/bs-stepper.css

@@ -0,0 +1,511 @@
+/*!
+ * bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper)
+ * Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
+ * Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE)
+ */
+.bs-stepper .step-trigger {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 20px;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5;
+  color: #6c757d;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out;
+}
+
+.bs-stepper .step-trigger:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+.bs-stepper .step-trigger:disabled,
+.bs-stepper .step-trigger.disabled {
+  pointer-events: none;
+  opacity: 0.65;
+}
+
+.bs-stepper .step-trigger:focus {
+  color: #007bff;
+  outline: none;
+}
+
+.bs-stepper .step-trigger:hover {
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+@media (max-width: 520px) {
+  .bs-stepper .step-trigger {
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding: 10px;
+  }
+}
+.bs-stepper-label {
+  display: inline-block;
+  margin: 0.25rem;
+}
+
+.bs-stepper-header {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+@media (max-width: 520px) {
+  .bs-stepper-header {
+    margin: 0 -10px;
+    text-align: center;
+  }
+}
+.bs-stepper-line,
+.bs-stepper .line {
+  -ms-flex: 1 0 32px;
+  flex: 1 0 32px;
+  min-width: 1px;
+  min-height: 1px;
+  margin: auto;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+@media (max-width: 400px) {
+  .bs-stepper-line,
+  .bs-stepper .line {
+    -ms-flex-preferred-size: 20px;
+    flex-basis: 20px;
+  }
+}
+.bs-stepper-circle {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  padding: 0.5em 0;
+  margin: 0.25rem;
+  line-height: 1em;
+  color: #fff;
+  background-color: #6c757d;
+  border-radius: 1em;
+}
+
+.active .bs-stepper-circle {
+  background-color: #007bff;
+}
+
+.bs-stepper-content {
+  padding: 0 20px 20px;
+}
+
+@media (max-width: 520px) {
+  .bs-stepper-content {
+    padding: 0;
+  }
+}
+.bs-stepper.vertical {
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.bs-stepper.vertical .bs-stepper-header {
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  margin: 0;
+}
+
+.bs-stepper.vertical .bs-stepper-pane,
+.bs-stepper.vertical .content {
+  display: block;
+}
+
+.bs-stepper.vertical .bs-stepper-pane:not(.fade),
+.bs-stepper.vertical .content:not(.fade) {
+  display: block;
+  visibility: hidden;
+}
+
+.bs-stepper-pane:not(.fade),
+.bs-stepper .content:not(.fade) {
+  display: none;
+}
+
+.bs-stepper .content.fade,
+.bs-stepper-pane.fade {
+  visibility: hidden;
+  transition-duration: 0.3s;
+  transition-property: opacity;
+}
+
+.bs-stepper-pane.fade.active,
+.bs-stepper .content.fade.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+.bs-stepper-pane.active:not(.fade),
+.bs-stepper .content.active:not(.fade) {
+  display: block;
+  visibility: visible;
+}
+
+.bs-stepper-pane.dstepper-block,
+.bs-stepper .content.dstepper-block {
+  display: block;
+}
+
+.bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none,
+.bs-stepper:not(.vertical) .content.dstepper-none {
+  display: none;
+}
+
+.vertical .bs-stepper-pane.fade.dstepper-none,
+.vertical .content.fade.dstepper-none {
+  visibility: hidden;
+}
+
+
+.bs-stepper {
+  border-radius: 0.375rem;
+}
+.bs-stepper .line {
+  flex: 0;
+  min-width: auto;
+  min-height: auto;
+  background-color: transparent;
+  margin: 0;
+}
+.bs-stepper .line i {
+  font-size: 1.375rem;
+}
+.bs-stepper .bs-stepper-header {
+  padding: 1.5rem 1.5rem;
+}
+.bs-stepper .bs-stepper-header .step.crossed + .line i {
+  color: #696cff;
+}
+.bs-stepper .bs-stepper-header .step .step-trigger {
+  padding: 0;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {
+  margin: 0;
+  max-width: 224px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: start;
+  display: inline-grid;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {
+  line-height: 1.375rem;
+  font-weight: 500;
+}
+.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+.bs-stepper .bs-stepper-header .step .step-trigger:hover {
+  background-color: transparent;
+}
+@media (max-width: 991.98px) {
+  .bs-stepper .bs-stepper-header .step .step-trigger {
+    padding: 0.625rem 0;
+  }
+}
+.bs-stepper .bs-stepper-header .step .bs-stepper-circle {
+  height: 2.375rem;
+  width: 2.375rem;
+  font-weight: 500;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+}
+.bs-stepper .bs-stepper-header .step .bs-stepper-circle i {
+  font-size: 1.375rem;
+}
+.bs-stepper .bs-stepper-content {
+  padding: 1.5rem 1.5rem;
+}
+.bs-stepper.vertical .bs-stepper-header {
+  min-width: 18rem;
+}
+.bs-stepper.vertical .bs-stepper-header .step .step-trigger {
+  padding: 0.63rem 0;
+}
+.bs-stepper.vertical .bs-stepper-header .step:first-child .step-trigger {
+  padding-top: 0;
+}
+.bs-stepper.vertical .bs-stepper-header .step:last-child .step-trigger {
+  padding-bottom: 0;
+}
+.bs-stepper.vertical .bs-stepper-content {
+  width: 100%;
+}
+.bs-stepper.vertical .bs-stepper-content .content:not(.active) {
+  display: none;
+}
+.bs-stepper.vertical.wizard-icons .step {
+  text-align: center;
+  padding: 0.75rem 0;
+}
+.bs-stepper.wizard-icons .bs-stepper-header .step-trigger {
+  padding: 1.25rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.bs-stepper.wizard-icons .bs-stepper-header .step-trigger .bs-stepper-icon svg {
+  height: 3.5rem;
+  width: 3.5rem;
+}
+.bs-stepper.wizard-icons .bs-stepper-header .step-trigger .bs-stepper-icon i {
+  font-size: 1.6rem;
+}
+@media (min-width: 992px) {
+  .bs-stepper.wizard-icons .bs-stepper-header {
+    justify-content: space-around;
+    gap: 1rem;
+  }
+}
+.bs-stepper.wizard-modern .bs-stepper-header {
+  border-bottom: none !important;
+}
+.bs-stepper.wizard-modern .bs-stepper-content {
+  border-radius: 0.375rem;
+}
+.bs-stepper.wizard-modern.vertical .bs-stepper-header {
+  border-right: none !important;
+}
+@media (min-width: 992px) {
+  .bs-stepper:not(.vertical):not(.wizard-icons) .bs-stepper-header {
+    gap: 1.5rem;
+  }
+}
+
+@media (max-width: 991.98px) {
+  [dir=rtl] .bs-stepper.wizard-icons .bs-stepper-header .step-trigger {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  html:not([dir=rtl]) .bs-stepper.wizard-icons .bs-stepper-header .step-trigger {
+    padding-left: 0;
+  }
+}
+
+#wizard-create-app.vertical .bs-stepper-header {
+  min-width: 15rem;
+}
+
+.light-style .bs-stepper {
+  background-color: #fff;
+}
+.light-style .bs-stepper:not(.wizard-modern) {
+  box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
+}
+.light-style .bs-stepper .bs-stepper-header {
+  border-bottom: 1px solid #e4e6e8;
+}
+.light-style .bs-stepper .bs-stepper-header .line i {
+  color: #646e78;
+}
+.light-style .bs-stepper .bs-stepper-header .bs-stepper-title,
+.light-style .bs-stepper .bs-stepper-header .bs-stepper-label {
+  color: #384551;
+}
+.light-style .bs-stepper .bs-stepper-header .bs-stepper-label .bs-stepper-subtitle {
+  color: #646e78;
+}
+.light-style .bs-stepper .bs-stepper-header .step:not(.active) .bs-stepper-circle {
+  background-color: rgba(34, 48, 62, 0.06);
+  color: #646e78;
+}
+.light-style .bs-stepper .bs-stepper-header .step:not(.active) .bs-stepper-subtitle {
+  color: #a7acb2;
+}
+.light-style .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-subtitle,
+.light-style .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-title {
+  color: #a7acb2;
+}
+.light-style .bs-stepper.vertical .bs-stepper-header {
+  border-bottom: none;
+}
+@media (max-width: 991.98px) {
+  .light-style .bs-stepper.vertical .bs-stepper-header {
+    border-right: none !important;
+    border-left: none !important;
+    border-bottom: 1px solid #e4e6e8;
+  }
+}
+.light-style .bs-stepper.wizard-modern {
+  background-color: transparent;
+}
+.light-style .bs-stepper.wizard-modern .bs-stepper-content {
+  background-color: #fff;
+  box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
+}
+.light-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-icon svg {
+  fill: #646e78;
+}
+.light-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-icon i {
+  fill: #646e78;
+}
+.light-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-label {
+  color: #646e78;
+}
+
+[dir=rtl] .light-style .bs-stepper.vertical .bs-stepper-header {
+  border-left: 1px solid #e4e6e8;
+}
+
+html:not([dir=rtl]) .light-style .bs-stepper.vertical .bs-stepper-header {
+  border-right: 1px solid #e4e6e8;
+}
+
+.dark-style .bs-stepper {
+  background-color: #2b2c40;
+}
+.dark-style .bs-stepper .bs-stepper-header {
+  border-bottom: 1px solid #4e4f6c;
+}
+.dark-style .bs-stepper .bs-stepper-header .line i {
+  color: #b2b2c4;
+}
+.dark-style .bs-stepper .bs-stepper-header .bs-stepper-label,
+.dark-style .bs-stepper .bs-stepper-header .bs-stepper-title {
+  color: #d5d5e2;
+}
+.dark-style .bs-stepper .bs-stepper-header .bs-stepper-label .bs-stepper-subtitle {
+  color: #b2b2c4;
+}
+.dark-style .bs-stepper .bs-stepper-header .step:not(.active) .bs-stepper-circle {
+  background-color: rgba(230, 230, 241, 0.06);
+  color: #b2b2c4;
+}
+.dark-style .bs-stepper .bs-stepper-header .step:not(.active) .bs-stepper-subtitle {
+  color: #7e7f96;
+}
+.dark-style .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-subtitle,
+.dark-style .bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-title {
+  color: #7e7f96;
+}
+.dark-style .bs-stepper.vertical .bs-stepper-header {
+  border-bottom: none;
+}
+@media (max-width: 991.98px) {
+  .dark-style .bs-stepper.vertical .bs-stepper-header {
+    border-right: none !important;
+    border-left: none !important;
+    border-bottom: 1px solid #4e4f6c;
+  }
+}
+.dark-style .bs-stepper.wizard-modern {
+  background-color: transparent;
+}
+.dark-style .bs-stepper.wizard-modern .bs-stepper-content {
+  background-color: #2b2c40;
+  box-shadow: 0 0.1875rem 0.5rem 0 rgba(20, 20, 29, 0.22);
+}
+.dark-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-icon i {
+  color: #b2b2c4;
+}
+.dark-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-icon svg {
+  fill: #b2b2c4;
+}
+.dark-style .bs-stepper.wizard-icons .bs-stepper-header .bs-stepper-label {
+  color: #b2b2c4;
+}
+
+[dir=rtl] .dark-style .bs-stepper.vertical .bs-stepper-header {
+  border-left: 1px solid #4e4f6c;
+}
+
+html:not([dir=rtl]) .dark-style .bs-stepper.vertical .bs-stepper-header {
+  border-right: 1px solid #4e4f6c;
+}
+
+[dir=rtl] .bs-stepper .bs-stepper-content .btn-next i,
+[dir=rtl] .bs-stepper .bs-stepper-content .btn-prev i {
+  transform: rotate(180deg);
+}
+[dir=rtl] .bs-stepper.wizard-modern.vertical .bs-stepper-header {
+  border-left: none !important;
+}
+@media (min-width: 992px) {
+  [dir=rtl] .bs-stepper .bs-stepper-header .line i {
+    transform: rotate(180deg);
+  }
+}
+@media (max-width: 991.98px) {
+  [dir=rtl] .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {
+    margin-left: 0;
+    margin-right: 0.25rem;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .bs-stepper .bs-stepper-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .bs-stepper .bs-stepper-header .step .step-trigger {
+    flex-direction: row;
+  }
+  .bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {
+    margin-left: 0.35rem;
+  }
+  .bs-stepper .bs-stepper-header .step:first-child .step-trigger {
+    padding-top: 0;
+  }
+  .bs-stepper .bs-stepper-header .step:last-child .step-trigger {
+    padding-bottom: 0;
+  }
+  .bs-stepper.vertical {
+    flex-direction: column;
+  }
+  .bs-stepper.vertical .bs-stepper-header {
+    align-items: flex-start;
+  }
+  .bs-stepper:not(.vertical) .bs-stepper-header .line i {
+    display: none;
+  }
+  .bs-stepper.wizard-icons .bs-stepper-header .step:not(:first-child) .bs-stepper-icon svg {
+    margin-top: 0.5rem;
+  }
+}
+@media (max-width: 520px) {
+  .bs-stepper-header {
+    margin: 0;
+  }
+}
+#wizard-create-app.vertical .bs-stepper-header {
+  min-width: 15rem;
+}