Added the ability to share account data

fix processed status
Merge pull request #58 from franze6/DID-13
2022-08-30 22:49:13 +03:00 · 2022-08-26 15:25:33 +03:00 · 2022-08-24 20:24:43 +03:00 · 2022-08-24 19:41:42 +03:00 · 2022-08-24 17:21:00 +03:00 · 2022-08-24 17:00:43 +03:00
138 changed files with 14765 additions and 10970 deletions
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -0,0 +1,64 @@
 name: Build and deploy
 on:
  push:
    branches:
      - 'master'
    tags:
      - '*'
    paths-ignore:
      - '.github/**'
  pull_request:
    branches:
      - 'master'
    tags:
      - '*'
    paths-ignore:
      - '.github/**'
  workflow_dispatch:
      inputs:
        logLevel:
          description: 'Log level'     
          required: true
          default: 'warning' 
          type: choice
          options:
          - info
          - warning
          - debug 
 jobs:
  build:
    runs-on: self-hosted
    steps:
    - name: Get branch data
      uses: actions/checkout@v2
    - name: Login to Docker Hub
      uses: docker/login-action@v1
      with:
        username: ${{ secrets.DOCKERHUB_USERNAME }}
        password: ${{ secrets.DOCKERHUB_TOKEN }}
    - name: Build and push image
      uses: docker/build-push-action@v2
      with:
        push: true
        tags: kandrusyak/blockchain-ui:master
  deploy:
    needs: build
    name: Deploy to host
    runs-on: self-hosted
    steps:
    - name: Get branch data
      uses: actions/checkout@v2
    - name: Deploying changes
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        password: ${{ secrets.SSH_PASSWORD }}
        script: |
          docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_TOKEN }}
          ./update.sh
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 # dependencies
 /node_modules
 .idea
--- a/17
+++ b/17
@@ -0,0 +1,17 @@
 FROM  node:16-alpine AS builder
 RUN apk --update add --no-cache curl git python3 alpine-sdk bash autoconf libtool automake
 WORKDIR /front
 COPY . .
 RUN npm install
 RUN npm run build:prod
 FROM nginx:1.21.6-alpine as runner
 COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
 COPY --from=builder /front/build /var/www/html
 EXPOSE 8080
--- a/README.md
+++ b/README.md
@@ -1,26 +0,0 @@
 # Mosaic React
 React landing page template designed by Cruip.
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run dev
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Customize configuration
 See [Configuration Reference](https://vitejs.dev/guide/).
 ## Support notes
 We are shipping our templates with a very basic React configuration to let you quickly get into the development process, but we don't discourage you from using any other configuration or framework built on the top of React. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.
 For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
--- a/deploy/nginx.conf
+++ b/deploy/nginx.conf
@@ -0,0 +1,33 @@
 worker_processes  1;
 error_log /var/log/nginx/error.log warn;
 pid       /var/run/nginx.pid;
 events {
    worker_connections 1024;
 }
 http {
    include      mime.types;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;
    gzip_static   on;
    server {
        listen      8080;
        server_name localhost;
        charset utf-8;
        location / {
            root /var/www/html;
            try_files $uri /index.html;
            etag on;
            expires max;
            add_header Cache-Control public;
            location = /index.html {
                expires 0;
                add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
            }
        }
    }
 }
--- a/index.html
+++ b/index.html
@@ -1,21 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body class="font-inter antialiased bg-slate-100 text-slate-600">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script>
        if (localStorage.getItem('sidebar-expanded') == 'true') {
            document.querySelector('body').classList.add('sidebar-expanded');
        } else {
            document.querySelector('body').classList.remove('sidebar-expanded');
        }
    </script>   
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,27 +2,62 @@
  "name": "mosaic-react",
  "version": "0.1.0",
  "scripts": {
-    "dev": "vite",
+    "dev": "webpack-dev-server --https",
-    "build": "vite build",
+    "build:dev": "webpack --mode development --progress",
-    "preview": "vite preview"
+    "build:prod": "webpack --mode production --progress"
  },
  "dependencies": {
    "@liskhq/lisk-client": "^5.2.2",
    "@tailwindcss/forms": "^0.4.0",
    "buffer": "^6.0.3",
    "chart.js": "^3.5.0",
    "chartjs-adapter-moment": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "mobx": "^6.6.0",
    "mobx-react-lite": "^3.4.0",
    "moment": "^2.29.1",
    "net": "^1.0.2",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "querystring-es3": "^0.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-flatpickr": "^3.10.7",
    "react-loader-spinner": "^5.2.0",
    "react-router-dom": "^6.2.1",
-    "react-transition-group": "^4.4.1"
+    "react-transition-group": "^4.4.1",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.0",
    "util": "^0.12.4"
  },
  "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.7",
+    "@babel/core": "^7.18.5",
-    "autoprefixer": "^10.4.2",
+    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "autoprefixer": "^10.4.5",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.2",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.4.5",
-    "sass": "^1.49.0",
+    "postcss-loader": "^7.0.0",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.18",
-    "vite": "^2.7.2"
+    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ]
  },
  "browser": {
    "fs": false
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
-import tailwind from 'tailwindcss'
+const tailwind = require('tailwindcss')
-import autoprefixer from 'autoprefixer'
+const autoprefixer = require('autoprefixer')
-import tailwindConfig from './src/css/tailwind.config.js'
+const tailwindConfig = require('./src/tailwind.config.js')
-export default {
+module.exports = {
  plugins: [tailwind(tailwindConfig), autoprefixer],
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>React App</title>
 </head>
 <body>
 <div id="root"></div>
 </body>
 </html>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,37 +2,33 @@ import React, { useEffect } from 'react';
 import {
  Routes,
  Route,
-  useLocation
+  useLocation,
 } from 'react-router-dom';
 import './css/style.scss';
 import './charts/ChartjsConfig';
 // Import pages
 import Dashboard from './pages/Dashboard';
 import Analytics from './pages/Analytics';
 import Fintech from './pages/Fintech';
 import ProfileId from './pages/digitalId/ProfileId';
 import Validate from './pages/digitalId/Validate';
 import ValidationLog from './pages/digitalId/ValidationLog';
 import Verify from './pages/digitalId/Verify';
 import Messages from './pages/Messages';
 import ButtonPage from './pages/component/ButtonPage';
 import BadgePage from './pages/component/BadgePage';
 import AccordionPage from './pages/component/AccordionPage';
 import Onboarding1 from "./pages/Onboarding1";
 import Onboarding2 from "./pages/Onboarding2";
 import Onboarding3 from "./pages/Onboarding3";
 import Onboarding4 from "./pages/Onboarding4";
 import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
-import Signup from "./pages/Signup";
+import SignIn from "./pages/SignIn";
-import Signin from "./pages/Signin";
+import {LoadingOverlay} from './components/LoadingOverlay';
 import {store} from './store/store';
 import {observer} from 'mobx-react-lite';
-function App() {
+const App = observer(() => {
  const location = useLocation();
  useEffect(()=> {
    localStorage.setItem('svgAvatar', '')
  },[])
  useEffect(() => {
    document.querySelector('html').style.scrollBehavior = 'auto'
@@ -42,29 +38,22 @@ function App() {
  return (
    <>
      { store.loading && <LoadingOverlay /> }
      <Routes>
-        <Route exact path="/" element={<Dashboard />} />
+        <Route exact path="/" element={<Onboarding1 />} />
        <Route path="/dashboard/analytics" element={<Analytics />} />
        <Route path="/dashboard/fintech" element={<Fintech />} />
        <Route path="/digitalId/profile-id" element={<ProfileId />} />
        <Route path="/digitalId/validate" element={<Validate />} />
        <Route path="/digitalId/validation-log" element={<ValidationLog />} />
        <Route path="/digitalId/verify" element={<Verify />} />
        <Route path="/messages" element={<Messages />} />
        <Route path="/onboarding-1" element={<Onboarding1 />} />
        <Route path="/onboarding-2" element={<Onboarding2 />} />
        <Route path="/onboarding-3" element={<Onboarding3 />} />
        <Route path="/onboarding-4" element={<Onboarding4 />} />
        <Route path="/component/button" element={<ButtonPage />} />
        <Route path="/shared-data" element={<SharedData />} />
        <Route path="/component/badge" element={<BadgePage />} />
        <Route path="/component/accordion" element={<AccordionPage />} />
        <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/signin" element={<Signin />} />
+        <Route path="/signIn" element={<SignIn />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </>
  );
-}
+})
 export default App;
--- a/src/api/node.js
+++ b/src/api/node.js
@@ -0,0 +1,3 @@
 import {fetchWrapper} from '../shared/fetchWrapper';
 export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)
--- a/src/charts/BarChart01.jsx
+++ b/src/charts/BarChart01.jsx
@@ -1,162 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend);
 function BarChart01({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current;
          if (!ul) return;
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove();
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c);
          items.forEach((item) => {
            const li = document.createElement('li');
            li.style.marginRight = tailwindConfig().theme.margin[4];
            // Button element
            const button = document.createElement('button');
            button.style.display = 'inline-flex';
            button.style.alignItems = 'center';
            button.style.opacity = item.hidden ? '.3' : '';
            button.onclick = () => {
              c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
              c.update();
            };
            // Color box
            const box = document.createElement('span');
            box.style.display = 'block';
            box.style.width = tailwindConfig().theme.width[3];
            box.style.height = tailwindConfig().theme.height[3];
            box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
            box.style.marginRight = tailwindConfig().theme.margin[2];
            box.style.borderWidth = '3px';
            box.style.borderColor = item.fillStyle;
            box.style.pointerEvents = 'none';
            // Label
            const labelContainer = document.createElement('span');
            labelContainer.style.display = 'flex';
            labelContainer.style.alignItems = 'center';
            const value = document.createElement('span');
            value.style.color = tailwindConfig().theme.colors.slate[800];
            value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0];
            value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight;
            value.style.fontWeight = tailwindConfig().theme.fontWeight.bold;
            value.style.marginRight = tailwindConfig().theme.margin[2];
            value.style.pointerEvents = 'none';
            const label = document.createElement('span');
            label.style.color = tailwindConfig().theme.colors.slate[500];
            label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
            label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
            const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0);
            const valueText = document.createTextNode(formatValue(theValue));
            const labelText = document.createTextNode(item.text);
            value.appendChild(valueText);
            label.appendChild(labelText);
            li.appendChild(button);
            button.appendChild(box);
            button.appendChild(labelContainer);
            labelContainer.appendChild(value);
            labelContainer.appendChild(label);
            ul.appendChild(li);
          });
        },
      }],
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-3">
        <ul ref={legend} className="flex flex-wrap"></ul>
      </div>
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default BarChart01;
--- a/src/charts/BarChart02.jsx
+++ b/src/charts/BarChart02.jsx
@@ -1,99 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatValue } from '../utils/Utils';
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend);
 function BarChart02({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            stacked: true,
            grid: {
              drawBorder: false,
            },
            beginAtZero: true,
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            stacked: true,
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 200,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default BarChart02;
--- a/src/charts/BarChart03.jsx
+++ b/src/charts/BarChart03.jsx
@@ -1,156 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatThousands } from '../utils/Utils';
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend);
 function BarChart03({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            stacked: true,
            grid: {
              drawBorder: false,
            },
            beginAtZero: true,
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatThousands(value),
            },
          },
          x: {
            stacked: true,
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatThousands(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current
          if (!ul) return
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove()
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c)
          items.forEach((item) => {
            const li = document.createElement('li')
            li.style.marginRight = tailwindConfig().theme.margin[3];
            // Button element
            const button = document.createElement('button')
            button.style.display = 'inline-flex';
            button.style.alignItems = 'center';
            button.style.opacity = item.hidden ? '.3' : '';
            button.onclick = () => {
              c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex))
              c.update()
            };
            // Color box
            const box = document.createElement('span')
            box.style.display = 'block';
            box.style.width = tailwindConfig().theme.width[3];
            box.style.height = tailwindConfig().theme.height[3];
            box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
            box.style.marginRight = tailwindConfig().theme.margin[2];
            box.style.borderWidth = '3px';
            box.style.borderColor = item.fillStyle;
            box.style.pointerEvents = 'none';
            // Label
            const label = document.createElement('span')
            label.style.color = tailwindConfig().theme.colors.slate[500];
            label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
            label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
            const labelText = document.createTextNode(item.text)
            label.appendChild(labelText)
            li.appendChild(button)
            button.appendChild(box)
            button.appendChild(label)
            ul.appendChild(li)
          })
        },
      }],
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-4">
        <div className="grow mb-1">
          <ul ref={legend} className="flex flex-wrap"></ul>
        </div>
      </div>
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>      
    </React.Fragment>
  );
 }
 export default BarChart03;
--- a/src/charts/BarChart04.jsx
+++ b/src/charts/BarChart04.jsx
@@ -1,149 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatThousands } from '../utils/Utils';
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend);
 function BarChart04({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        indexAxis: 'y',
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
          },
          x: {
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 3,
              align: 'end',
              callback: (value) => formatThousands(value),
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatThousands(context.parsed.x),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current
          if (!ul) return
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove()
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c)
          items.forEach((item) => {
            const li = document.createElement('li')
            li.style.marginRight = tailwindConfig().theme.margin[4]
            // Button element
            const button = document.createElement('button')
            button.style.display = 'inline-flex'
            button.style.alignItems = 'center'
            button.style.opacity = item.hidden ? '.3' : ''
            button.onclick = () => {
              c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex))
              c.update()
            }
            // Color box
            const box = document.createElement('span')
            box.style.display = 'block'
            box.style.width = tailwindConfig().theme.width[3]
            box.style.height = tailwindConfig().theme.height[3]
            box.style.borderRadius = tailwindConfig().theme.borderRadius.full
            box.style.marginRight = tailwindConfig().theme.margin[2]
            box.style.borderWidth = '3px'
            box.style.borderColor = item.fillStyle
            box.style.pointerEvents = 'none'
            // Label
            const label = document.createElement('span')
            label.style.color = tailwindConfig().theme.colors.slate[500]
            label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
            label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
            const labelText = document.createTextNode(item.text)
            label.appendChild(labelText)
            li.appendChild(button)
            button.appendChild(box)
            button.appendChild(label)
            ul.appendChild(li)
          })
        },
      }],
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-4">
        <ul ref={legend} className="flex flex-wrap"></ul>
      </div>
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default BarChart04;
--- a/src/charts/BarChart05.jsx
+++ b/src/charts/BarChart05.jsx
@@ -1,157 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend);
 function BarChart05({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [
        {
          id: 'htmlLegend',
          afterUpdate(c, args, options) {
            const ul = legend.current;
            if (!ul) return;
            // Remove old legend items
            while (ul.firstChild) {
              ul.firstChild.remove();
            }
            // Reuse the built-in legendItems generator
            const items = c.options.plugins.legend.labels.generateLabels(c);
            items.forEach((item) => {
              const li = document.createElement('li');
              li.style.marginRight = tailwindConfig().theme.margin[4];
              // Button element
              const button = document.createElement('button');
              button.style.display = 'inline-flex';
              button.style.alignItems = 'center';
              button.style.opacity = item.hidden ? '.3' : '';
              button.onclick = () => {
                c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
                c.update();
              };
              // Color box
              const box = document.createElement('span');
              box.style.display = 'block';
              box.style.width = tailwindConfig().theme.width[3];
              box.style.height = tailwindConfig().theme.height[3];
              box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
              box.style.marginRight = tailwindConfig().theme.margin[2];
              box.style.borderWidth = '3px';
              box.style.borderColor = item.fillStyle;
              box.style.pointerEvents = 'none';
              // Label
              const label = document.createElement('span');
              label.style.color = tailwindConfig().theme.colors.slate[500];
              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
              const labelText = document.createTextNode(item.text);
              label.appendChild(labelText);
              li.appendChild(button);
              button.appendChild(box);
              button.appendChild(label);
              ul.appendChild(li);
            });
          },
        },
      ],
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-3">
        <div className="flex flex-wrap justify-between items-center">
          <div className="flex items-center">
            <div className="text-3xl font-bold text-slate-800 mr-2">$1,347.09</div>
            <div className="text-sm">Net</div>
          </div>
          <div className="grow ml-2">
            <ul ref={legend} className="flex flex-wrap justify-end"></ul>
          </div>
        </div>
      </div>
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default BarChart05;
--- a/src/charts/BarChart06.jsx
+++ b/src/charts/BarChart06.jsx
@@ -1,164 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 // Import images
 import revolutIcon from '../images/company-icon-01.svg';
 import hsbcIcon from '../images/company-icon-02.svg';
 import qontoIcon from '../images/company-icon-03.svg';
 import n26Icon from '../images/company-icon-04.svg';
 Chart.register(BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend);
 const images = [revolutIcon, hsbcIcon, qontoIcon, n26Icon];
 function BarChart06({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'bar',
      data: data,
      options: {
        indexAxis: 'y',
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 72,
            right: 20,
          },
        },
        scales: {
          y: {
            grid: {
              display: false,
              drawBorder: false,
              drawTicks: false,
            },
            ticks: {
              display: false,
            },
          },
          x: {
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 3,
              align: 'end',
              callback: (value) => formatValue(value),
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.x),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [
        {
          id: 'htmlLegend',
          afterUpdate(c, args, options) {
            const ul = legend.current;
            if (!ul) return;
            // Remove old legend items
            while (ul.firstChild) {
              ul.firstChild.remove();
            }
            // Reuse the built-in legendItems generator
            const items = c.options.plugins.legend.labels.generateLabels(c);
            items.forEach((item) => {
              const li = document.createElement('li');
              li.style.marginRight = tailwindConfig().theme.margin[4];
              // Button element
              const button = document.createElement('button');
              button.style.display = 'inline-flex';
              button.style.alignItems = 'center';
              button.style.opacity = item.hidden ? '.3' : '';
              button.onclick = () => {
                c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
                c.update();
              };
              // Color box
              const box = document.createElement('span');
              box.style.display = 'block';
              box.style.width = tailwindConfig().theme.width[3];
              box.style.height = tailwindConfig().theme.height[3];
              box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
              box.style.marginRight = tailwindConfig().theme.margin[2];
              box.style.borderWidth = '3px';
              box.style.borderColor = item.fillStyle;
              box.style.pointerEvents = 'none';
              // Label
              const label = document.createElement('span');
              label.style.color = tailwindConfig().theme.colors.slate[500];
              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
              const labelText = document.createTextNode(item.text);
              label.appendChild(labelText);
              li.appendChild(button);
              button.appendChild(box);
              button.appendChild(label);
              ul.appendChild(li);
            });
          },
          afterDraw(c) {
            const xAxis = c.scales.x;
            const yAxis = c.scales.y;
            yAxis.ticks.forEach((value, index) => {
              const y = yAxis.getPixelForTick(index);
              const image = new Image();
              image.src = images[index];
              c.ctx.drawImage(image, xAxis.left - 52, y - 18);
            });
          },
        },
      ],
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-4">
        <ul ref={legend} className="flex flex-wrap"></ul>
      </div>
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default BarChart06;
--- a/src/charts/ChartjsConfig.jsx
+++ b/src/charts/ChartjsConfig.jsx
@@ -1,42 +0,0 @@
 // Import Chart.js
 import { Chart, Tooltip } from 'chart.js';
 // Import Tailwind config
 import { tailwindConfig } from '../utils/Utils';
 Chart.register(Tooltip);
 // Define Chart.js default settings
 Chart.defaults.font.family = '"Inter", sans-serif';
 Chart.defaults.font.weight = '500';
 Chart.defaults.color = tailwindConfig().theme.colors.slate[400];
 Chart.defaults.scale.grid.color = tailwindConfig().theme.colors.slate[100];
 Chart.defaults.plugins.tooltip.titleColor = tailwindConfig().theme.colors.slate[800];
 Chart.defaults.plugins.tooltip.bodyColor = tailwindConfig().theme.colors.slate[800];
 Chart.defaults.plugins.tooltip.backgroundColor = tailwindConfig().theme.colors.white;
 Chart.defaults.plugins.tooltip.borderWidth = 1;
 Chart.defaults.plugins.tooltip.borderColor = tailwindConfig().theme.colors.slate[200];
 Chart.defaults.plugins.tooltip.displayColors = false;
 Chart.defaults.plugins.tooltip.mode = 'nearest';
 Chart.defaults.plugins.tooltip.intersect = false;
 Chart.defaults.plugins.tooltip.position = 'nearest';
 Chart.defaults.plugins.tooltip.caretSize = 0;
 Chart.defaults.plugins.tooltip.caretPadding = 20;
 Chart.defaults.plugins.tooltip.cornerRadius = 4;
 Chart.defaults.plugins.tooltip.padding = 8;
 // Register Chart.js plugin to add a bg option for chart area
 Chart.register({
  id: 'chartAreaPlugin',
  // eslint-disable-next-line object-shorthand
  beforeDraw: (chart) => {
    if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
      const ctx = chart.canvas.getContext('2d');
      const { chartArea } = chart;
      ctx.save();
      ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
      // eslint-disable-next-line max-len
      ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      ctx.restore();
    }
  },
 });
--- a/src/charts/DoughnutChart.jsx
+++ b/src/charts/DoughnutChart.jsx
@@ -1,114 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig } from '../utils/Utils';
 Chart.register(DoughnutController, ArcElement, TimeScale, Tooltip);
 function DoughnutChart({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: {
        cutout: '80%',
        layout: {
          padding: 24,
        },
        plugins: {
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current;
          if (!ul) return;
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove();
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c);
          items.forEach((item) => {
            const li = document.createElement('li');
            li.style.margin = tailwindConfig().theme.margin[1];
            // Button element
            const button = document.createElement('button');
            button.classList.add('btn-xs');
            button.style.backgroundColor = tailwindConfig().theme.colors.white;
            button.style.borderWidth = tailwindConfig().theme.borderWidth[1];
            button.style.borderColor = tailwindConfig().theme.colors.slate[200];
            button.style.color = tailwindConfig().theme.colors.slate[500];
            button.style.boxShadow = tailwindConfig().theme.boxShadow.md;
            button.style.opacity = item.hidden ? '.3' : '';
            button.onclick = () => {
              c.toggleDataVisibility(item.index, !item.index);
              c.update();
            };
            // Color box
            const box = document.createElement('span');
            box.style.display = 'block';
            box.style.width = tailwindConfig().theme.width[2];
            box.style.height = tailwindConfig().theme.height[2];
            box.style.backgroundColor = item.fillStyle;
            box.style.borderRadius = tailwindConfig().theme.borderRadius.sm;
            box.style.marginRight = tailwindConfig().theme.margin[1];
            box.style.pointerEvents = 'none';
            // Label
            const label = document.createElement('span');
            label.style.display = 'flex';
            label.style.alignItems = 'center';
            const labelText = document.createTextNode(item.text);
            label.appendChild(labelText);
            li.appendChild(button);
            button.appendChild(box);
            button.appendChild(label);
            ul.appendChild(li);
          });
        },
      }],
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div className="grow flex flex-col justify-center">
      <div>
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
      <div className="px-5 pt-2 pb-6">
        <ul ref={legend} className="flex flex-wrap justify-center -m-1"></ul>
      </div>
    </div>
  );
 }
 export default DoughnutChart;
--- a/src/charts/LineChart01.jsx
+++ b/src/charts/LineChart01.jsx
@@ -1,76 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart01({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        chartArea: {
          backgroundColor: tailwindConfig().theme.colors.slate[50],
        },
        layout: {
          padding: 20,
        },
        scales: {
          y: {
            display: false,
            beginAtZero: true,
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
            },
            display: false,
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart01;
--- a/src/charts/LineChart02.jsx
+++ b/src/charts/LineChart02.jsx
@@ -1,153 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart02({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: 20,
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
              beginAtZero: true,
            },
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current;
          if (!ul) return;
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove();
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c);
          items.slice(0, 2).forEach((item) => {
            const li = document.createElement('li');
            li.style.marginLeft = tailwindConfig().theme.margin[3];
            // Button element
            const button = document.createElement('button');
            button.style.display = 'inline-flex';
            button.style.alignItems = 'center';
            button.style.opacity = item.hidden ? '.3' : '';
            button.onclick = () => {
              c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
              c.update();
            };
            // Color box
            const box = document.createElement('span');
            box.style.display = 'block';
            box.style.width = tailwindConfig().theme.width[3];
            box.style.height = tailwindConfig().theme.height[3];
            box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
            box.style.marginRight = tailwindConfig().theme.margin[2];
            box.style.borderWidth = '3px';
            box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor;
            box.style.pointerEvents = 'none';
            // Label
            const label = document.createElement('span');
            label.style.color = tailwindConfig().theme.colors.slate[500];
            label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
            label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
            const labelText = document.createTextNode(item.text);
            label.appendChild(labelText);
            li.appendChild(button);
            button.appendChild(box);
            button.appendChild(label);
            ul.appendChild(li);
          });
        },
      }],
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-3">
        <div className="flex flex-wrap justify-between items-end">
          <div className="flex items-start">
            <div className="text-3xl font-bold text-slate-800 mr-2">$1,482</div>
            <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-22%</div>
          </div>
          <div className="grow ml-2 mb-1">
            <ul ref={legend} className="flex flex-wrap justify-end"></ul>
          </div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default LineChart02;
--- a/src/charts/LineChart03.jsx
+++ b/src/charts/LineChart03.jsx
@@ -1,88 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatThousands } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart03({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: 20,
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
            },
            ticks: {
              callback: (value) => formatThousands(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatThousands(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart03;
--- a/src/charts/LineChart04.jsx
+++ b/src/charts/LineChart04.jsx
@@ -1,78 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatThousands } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart04({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        chartArea: {
          backgroundColor: tailwindConfig().theme.colors.slate[50],
        },
        layout: {
          padding: {
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            display: false,
            beginAtZero: true,
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
            },
            display: false,
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatThousands(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
      },
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart04;
--- a/src/charts/LineChart05.jsx
+++ b/src/charts/LineChart05.jsx
@@ -1,157 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart05({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: 20,
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 7,
              callback: (value) => `${value}%`,
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => `${context.parsed.y}%`,
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [
        {
          id: 'htmlLegend',
          afterUpdate(c, args, options) {
            const ul = legend.current;
            if (!ul) return;
            // Remove old legend items
            while (ul.firstChild) {
              ul.firstChild.remove();
            }
            // Reuse the built-in legendItems generator
            const items = c.options.plugins.legend.labels.generateLabels(c);
            items.forEach((item) => {
              const li = document.createElement('li');
              li.style.marginLeft = tailwindConfig().theme.margin[3];
              // Button element
              const button = document.createElement('button');
              button.style.display = 'inline-flex';
              button.style.alignItems = 'center';
              button.style.opacity = item.hidden ? '.3' : '';
              button.onclick = () => {
                c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
                c.update();
              };
              // Color box
              const box = document.createElement('span');
              box.style.display = 'block';
              box.style.width = tailwindConfig().theme.width[3];
              box.style.height = tailwindConfig().theme.height[3];
              box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
              box.style.marginRight = tailwindConfig().theme.margin[2];
              box.style.borderWidth = '3px';
              box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor;
              box.style.pointerEvents = 'none';
              // Label
              const label = document.createElement('span');
              label.style.color = tailwindConfig().theme.colors.slate[500];
              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
              const labelText = document.createTextNode(item.text);
              label.appendChild(labelText);
              li.appendChild(button);
              button.appendChild(box);
              button.appendChild(label);
              ul.appendChild(li);
            });
          },
        },
      ],
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <React.Fragment>
      <div className="px-5 py-3">
        <div className="flex flex-wrap justify-between items-end">
          <div className="flex items-center">
            <div className="text-3xl font-bold text-slate-800 mr-2">244.7%</div>
            <div className="text-sm">
              <span className="font-medium text-slate-800">17.4%</span> AVG
            </div>
          </div>
          <div className="grow ml-2 mb-1">
            <ul ref={legend} className="flex flex-wrap justify-end" />
          </div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default LineChart05;
--- a/src/charts/LineChart06.jsx
+++ b/src/charts/LineChart06.jsx
@@ -1,94 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart06({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 7,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
              displayFormats: {
                month: 'MMM YY',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart06;
--- a/src/charts/LineChart07.jsx
+++ b/src/charts/LineChart07.jsx
@@ -1,86 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, CategoryScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, CategoryScale, Tooltip);
 function LineChart07({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: {
            top: 12,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
            },
            ticks: {
              maxTicksLimit: 7,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
              align: 'end',
            },
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
      },
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart07;
--- a/src/charts/LineChart08.jsx
+++ b/src/charts/LineChart08.jsx
@@ -1,84 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart08({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: {
            top: 16,
            bottom: 16,
            left: 20,
            right: 20,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
              drawTicks: false,
            },
            ticks: {
              maxTicksLimit: 2,
              display: false,
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
            },
            display: false,
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
      },
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart08;
--- a/src/charts/LineChart09.jsx
+++ b/src/charts/LineChart09.jsx
@@ -1,69 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function LineChart09({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        scales: {
          y: {
            display: false,
            beginAtZero: true,
          },
          x: {
            type: 'time',
            time: {
              parser: 'MM-DD-YYYY',
              unit: 'month',
            },
            display: false,
          },
        },
        plugins: {
          tooltip: {
            callbacks: {
              title: () => false, // Disable tooltip title
              label: (context) => formatValue(context.parsed.y),
            },
          },
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        maintainAspectRatio: false,
      },
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <canvas ref={canvas} width={width} height={height}></canvas>
  );
 }
 export default LineChart09;
--- a/src/charts/PieChart.jsx
+++ b/src/charts/PieChart.jsx
@@ -1,117 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, PieController, ArcElement, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig } from '../utils/Utils';
 Chart.register(PieController, ArcElement, TimeScale, Tooltip);
 function PieChart({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'pie',
      data: data,
      options: {
        layout: {
          padding: {
            top: 4,
            bottom: 4,
            left: 24,
            right: 24,
          },
        },
        plugins: {
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 200,
        },
        maintainAspectRatio: false,
      },
      plugins: [
        {
          id: 'htmlLegend',
          afterUpdate(c, args, options) {
            const ul = legend.current;
            if (!ul) return;
            // Remove old legend items
            while (ul.firstChild) {
              ul.firstChild.remove();
            }
            // Reuse the built-in legendItems generator
            const items = c.options.plugins.legend.labels.generateLabels(c);
            items.forEach((item) => {
              const li = document.createElement('li');
              li.style.margin = tailwindConfig().theme.margin[1.5];
              // Button element
              const button = document.createElement('button');
              button.style.display = 'inline-flex';
              button.style.alignItems = 'center';
              button.style.opacity = item.hidden ? '.3' : '';
              button.onclick = () => {
                c.toggleDataVisibility(item.index, !item.index);
                c.update();
              };
              // Color box
              const box = document.createElement('span');
              box.style.display = 'block';
              box.style.width = tailwindConfig().theme.width[3];
              box.style.height = tailwindConfig().theme.height[3];
              box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
              box.style.marginRight = tailwindConfig().theme.margin[1.5];
              box.style.borderWidth = '3px';
              box.style.borderColor = item.fillStyle;
              box.style.pointerEvents = 'none';
              // Label
              const label = document.createElement('span');
              label.style.color = tailwindConfig().theme.colors.slate[500];
              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
              const labelText = document.createTextNode(item.text);
              label.appendChild(labelText);
              li.appendChild(button);
              button.appendChild(box);
              button.appendChild(label);
              ul.appendChild(li);
            });
          },
        },
      ],
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div className="grow flex flex-col justify-center">
      <div>
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
      <div className="px-5 py-4">
        <ul ref={legend} className="flex flex-wrap justify-center -m-1" />
      </div>
    </div>
  );
 }
 export default PieChart;
--- a/src/charts/PolarChart.jsx
+++ b/src/charts/PolarChart.jsx
@@ -1,113 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, PolarAreaController, RadialLinearScale, Tooltip, Legend,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig } from '../utils/Utils';
 Chart.register(PolarAreaController, RadialLinearScale, Tooltip, Legend);
 function PolarChart({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const legend = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'polarArea',
      data: data,
      options: {
        layout: {
          padding: 24,
        },
        plugins: {
          legend: {
            display: false,
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: {
          duration: 500,
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
      plugins: [{
        id: 'htmlLegend',
        afterUpdate(c, args, options) {
          const ul = legend.current
          if (!ul) return
          // Remove old legend items
          while (ul.firstChild) {
            ul.firstChild.remove()
          }
          // Reuse the built-in legendItems generator
          const items = c.options.plugins.legend.labels.generateLabels(c)
          items.forEach((item) => {
            const li = document.createElement('li')
            li.style.margin = tailwindConfig().theme.margin[1]
            // Button element
            const button = document.createElement('button')
            button.classList.add('btn-xs')
            button.style.backgroundColor = tailwindConfig().theme.colors.white
            button.style.borderWidth = tailwindConfig().theme.borderWidth[1]
            button.style.borderColor = tailwindConfig().theme.colors.slate[200]
            button.style.color = tailwindConfig().theme.colors.slate[500]
            button.style.boxShadow = tailwindConfig().theme.boxShadow.md
            button.style.opacity = item.hidden ? '.3' : ''
            button.onclick = () => {
              c.toggleDataVisibility(item.index, !item.index)
              c.update()
            }
            // Color box
            const box = document.createElement('span')
            box.style.display = 'block'
            box.style.width = tailwindConfig().theme.width[2]
            box.style.height = tailwindConfig().theme.height[2]
            box.style.backgroundColor = item.fillStyle
            box.style.borderRadius = tailwindConfig().theme.borderRadius.sm
            box.style.marginRight = tailwindConfig().theme.margin[1]
            box.style.pointerEvents = 'none'
            // Label
            const label = document.createElement('span')
            label.style.display = 'flex'
            label.style.alignItems = 'center'
            const labelText = document.createTextNode(item.text)
            label.appendChild(labelText)
            li.appendChild(button)
            button.appendChild(box)
            button.appendChild(label)
            ul.appendChild(li)
          })
        },
      }],
    });
    return () => chart.destroy();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div className="grow flex flex-col justify-center">
      <div>
        <canvas ref={canvas} width={width} height={height}></canvas>
      </div>
      <div className="px-5 pt-2 pb-6">
        <ul ref={legend} className="flex flex-wrap justify-center -m-1"></ul>
      </div>
    </div>
  );
 }
 export default PolarChart;
--- a/src/charts/RealtimeChart.jsx
+++ b/src/charts/RealtimeChart.jsx
@@ -1,120 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import {
  Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js';
 import 'chartjs-adapter-moment';
 // Import utilities
 import { tailwindConfig, formatValue } from '../utils/Utils';
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
 function RealtimeChart({
  data,
  width,
  height
 }) {
  const canvas = useRef(null);
  const chartValue = useRef(null);
  const chartDeviation = useRef(null);
  useEffect(() => {
    const ctx = canvas.current;
    // eslint-disable-next-line no-unused-vars
    const chart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        layout: {
          padding: 20,
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
            },
            suggestedMin: 30,
            suggestedMax: 80,
            ticks: {
              maxTicksLimit: 5,
              callback: (value) => formatValue(value),
            },
          },
          x: {
            type: 'time',
            time: {
              parser: 'hh:mm:ss',
              unit: 'second',
              tooltipFormat: 'MMM DD, H:mm:ss a',
              displayFormats: {
                second: 'H:mm:ss',
              },
            },
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              autoSkipPadding: 48,
              maxRotation: 0,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            titleFont: {
              weight: '600',
            },
            callbacks: {
              label: (context) => formatValue(context.parsed.y),
            },
          },
        },
        interaction: {
          intersect: false,
          mode: 'nearest',
        },
        animation: false,
        maintainAspectRatio: false,
        resizeDelay: 200,
      },
    });
    return () => chart.destroy();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);
  // Update header values
  useEffect(() => {
    const currentValue = data.datasets[0].data[data.datasets[0].data.length - 1];
    const previousValue = data.datasets[0].data[data.datasets[0].data.length - 2];
    const diff = ((currentValue - previousValue) / previousValue) * 100;
    chartValue.current.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1];
    if (diff < 0) {
      chartDeviation.current.style.backgroundColor = tailwindConfig().theme.colors.yellow[500];
    } else {
      chartDeviation.current.style.backgroundColor = tailwindConfig().theme.colors.emerald[500];
    }
    chartDeviation.current.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`;
  }, [data]);
  return (
    <React.Fragment>
      <div className="px-5 py-3">
        <div className="flex items-start">
          <div className="text-3xl font-bold text-slate-800 mr-2 tabular-nums">$<span ref={chartValue}>57.81</span></div>
          <div ref={chartDeviation} className="text-sm font-semibold text-white px-1.5 rounded-full"></div>
        </div>
      </div>
      <div className="grow">
        <canvas ref={canvas} data={data} width={width} height={height}></canvas>
      </div>
    </React.Fragment>
  );
 }
 export default RealtimeChart;
--- a/src/components/AccordionBasic.jsx
+++ b/src/components/AccordionBasic.jsx
@@ -1,26 +0,0 @@
 import React, { useState } from 'react';
 function AccordionBasic(props) {
  const [open, setOpen] = useState(false);
  return (
    <div className="px-5 py-4 rounded-sm border border-slate-200">
      <button
        className="flex items-center justify-between w-full group mb-1"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        <div className="text-sm text-slate-800 font-medium">{props.title}</div>
        <svg className={`w-8 h-8 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 ${open && 'rotate-180'}`} viewBox="0 0 32 32">
          <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
        </svg>
      </button>
      <div className={`text-sm ${!open && 'hidden'}`}>
        {props.children}
      </div>
    </div>
  );
 }
 export default AccordionBasic;
--- a/src/components/AccordionTableItem.jsx
+++ b/src/components/AccordionTableItem.jsx
@@ -1,73 +0,0 @@
 import React, { useState } from 'react';
 function AccordionTableItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <tbody className="text-sm">
      <tr>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="flex items-center text-slate-800">
            <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
              <img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
            </div>
            <div className="font-medium text-slate-800">{props.customer}</div>
          </div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left font-medium text-emerald-500">{props.total}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-0.5">{props.status}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-center">{props.items}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left">{props.location}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="flex items-center">
            <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
              <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
            </svg>
            <div>{props.type}</div>
          </div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
          <div className="flex items-center">
            <button
              className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
              aria-expanded={open}
              onClick={() => setOpen(!open)}
              aria-controls={`description-${props.id}`}
            >
              <span className="sr-only">Menu</span>
              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
              </svg>
            </button>
          </div>
        </td>
      </tr>
      {/*
      Example of content revealing when clicking the button on the right side:
      Note that you must set a "colSpan" attribute on the <td> element,
      and it should match the number of columns in your table
      */}
      <tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
        <td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
          <div className="flex items-center bg-slate-50 p-3 -mt-3">
            <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2">
              <path d="M1 16h3c.3 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4l-3-3c-.4-.4-1-.4-1.4 0l-11 11c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1zm1-3.6l10-10L13.6 4l-10 10H2v-1.6z" />
            </svg>
            <div className="italic">{props.description}</div>
          </div>
        </td>
      </tr>
    </tbody>
  );
 }
 export default AccordionTableItem;
--- a/src/components/AccordionTableRichItem.jsx
+++ b/src/components/AccordionTableRichItem.jsx
@@ -1,66 +0,0 @@
 import React, { useState } from 'react';
 function AccordionTableRichItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <tbody className="text-sm">
      <tr>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="flex items-center text-slate-800">
            <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
              <img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
            </div>
            <div className="font-medium text-slate-800">{props.customer}</div>
          </div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left">{props.email}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left">{props.location}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left">{props.date}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
          <div className="text-left text-emerald-500 font-medium">{props.amount}</div>
        </td>
        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
          <div className="flex items-center">
            <button
              className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
              aria-expanded={open}
              onClick={() => setOpen(!open)}
              aria-controls={`description-${props.id}`}
            >
              <span className="sr-only">Menu</span>
              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
              </svg>
            </button>
          </div>
        </td>
      </tr>
      {/*
      Example of content revealing when clicking the button on the right side:
      Note that you must set a "colSpan" attribute on the <td> element,
      and it should match the number of columns in your table
      */}
      <tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
        <td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
          <div className="bg-slate-50 p-3 -mt-3">
            <div className="text-sm mb-3">
              <div className="font-medium text-slate-800 mb-1">{props.descriptionTitle}</div>
              <div>{props.descriptionBody}</div>
            </div>
            <button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white">Approve</button>
          </div>
        </td>
      </tr>
    </tbody>
  );
 }
 export default AccordionTableRichItem;
--- a/src/components/Datepicker.jsx
+++ b/src/components/Datepicker.jsx
@@ -1,38 +0,0 @@
 import React from 'react';
 import Flatpickr from 'react-flatpickr';
 function Datepicker({
  align
 }) {
  const options = {
    mode: 'range',
    static: true,
    monthSelectorType: 'static',
    dateFormat: 'M j, Y',
    defaultDate: [new Date().setDate(new Date().getDate() - 6), new Date()],
    prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
    nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
    onReady: (selectedDates, dateStr, instance) => {
      instance.element.value = dateStr.replace('to', '-');
      const customClass = (align) ? align : '';
      instance.calendarContainer.classList.add(`flatpickr-${customClass}`);
    },
    onChange: (selectedDates, dateStr, instance) => {
      instance.element.value = dateStr.replace('to', '-');
    },
  }
  return (
    <div className="relative">
      <Flatpickr className="form-input pl-9 text-slate-500 hover:text-slate-600 font-medium focus:border-slate-300 w-60" options={options} />
      <div className="absolute inset-0 right-auto flex items-center pointer-events-none">
        <svg className="w-4 h-4 fill-current text-slate-500 ml-3" viewBox="0 0 16 16">
          <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
        </svg>
      </div>
    </div>
  );
 }
 export default Datepicker;
--- a/src/components/DropdownEditMenu.jsx
+++ b/src/components/DropdownEditMenu.jsx
@@ -1,75 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownEditMenu({
  children,
  align,
  ...rest
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div {...rest}>
      <button
        ref={trigger}
        className={`bg-white text-slate-400 hover:text-slate-500 rounded-full ${dropdownOpen && 'bg-slate-100 text-slate-500'}`}
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="sr-only">Menu</span>
        <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="2" />
          <circle cx="10" cy="16" r="2" />
          <circle cx="22" cy="16" r="2" />
        </svg>
      </button>
      <Transition
        show={dropdownOpen}
        tag="div"
        className={`origin-top-right z-10 absolute top-full min-w-36 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <ul
          ref={dropdown}
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          {children}
        </ul>
      </Transition>
    </div>
  );
 }
 export default DropdownEditMenu;
--- a/src/components/DropdownFilter.jsx
+++ b/src/components/DropdownFilter.jsx
@@ -1,115 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import Transition from '../utils/Transition';
 function DropdownFilter({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className="btn bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="sr-only">Filter</span><wbr />
        <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
          <path d="M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" />
        </svg>
      </button>
      <Transition
        show={dropdownOpen}
        tag="div"
        className={`origin-top-right z-10 absolute top-full min-w-56 bg-white border border-slate-200 pt-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div ref={dropdown}>
          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Filters</div>
          <ul className="mb-4">
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Direct VS Indirect</span>
              </label>
            </li>
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Real Time Value</span>
              </label>
            </li>
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Top Channels</span>
              </label>
            </li>
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Sales VS Refunds</span>
              </label>
            </li>
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Last Order</span>
              </label>
            </li>
            <li className="py-1 px-3">
              <label className="flex items-center">
                <input type="checkbox" className="form-checkbox" />
                <span className="text-sm font-medium ml-2">Total Spent</span>
              </label>
            </li>
          </ul>
          <div className="py-2 px-3 border-t border-slate-200 bg-slate-50">
            <ul className="flex items-center justify-between">
              <li>
                <button className="btn-xs bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600">Clear</button>
              </li>
              <li>
                <button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white" onClick={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}>Apply</button>
              </li>
            </ul>
          </div>
        </div>
      </Transition>
    </div>
  );
 }
 export default DropdownFilter;
--- a/src/components/DropdownHelp.jsx
+++ b/src/components/DropdownHelp.jsx
@@ -1,111 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
 function DropdownHelp({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="sr-only">Need help?</span>
        <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path className="fill-current text-slate-500" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
        </svg>
      </button>
      <Transition
        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          ref={dropdown}
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Need help?</div>
          <ul>
            <li>
              <Link
                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                  <rect y="3" width="12" height="9" rx="1" />
                  <path d="M2 0h8v2H2z" />
                </svg>
                <span>Documentation</span>
              </Link>
            </li>
            <li>
              <Link
                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                  <path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
                </svg>
                <span>Support Site</span>
              </Link>
            </li>
            <li>
              <Link
                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                  <path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
                </svg>
                <span>Contact us</span>
              </Link>
            </li>
          </ul>
        </div>
      </Transition>
    </div>
  )
 }
 export default DropdownHelp;
--- a/src/components/DropdownNotifications.jsx
+++ b/src/components/DropdownNotifications.jsx
@@ -1,106 +0,0 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
 function DropdownNotifications({
  align
 }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef(null);
  const dropdown = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current) return;
      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
      setDropdownOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  return (
    <div className="relative inline-flex">
      <button
        ref={trigger}
        className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        <span className="sr-only">Notifications</span>
        <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path className="fill-current text-slate-500" d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z" />
          <path className="fill-current text-slate-400" d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z" />
        </svg>
        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white rounded-full"></div>
      </button>
      <Transition
        className={`origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          ref={dropdown}
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Notifications</div>
          <ul>
            <li className="border-b border-slate-200 last:border-0">
              <Link
                className="block py-2 px-4 hover:bg-slate-50"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
                <span className="block text-xs font-medium text-slate-400">Feb 12, 2021</span>
              </Link>
            </li>
            <li className="border-b border-slate-200 last:border-0">
              <Link
                className="block py-2 px-4 hover:bg-slate-50"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
                <span className="block text-xs font-medium text-slate-400">Feb 9, 2021</span>
              </Link>
            </li>
            <li className="border-b border-slate-200 last:border-0">
              <Link
                className="block py-2 px-4 hover:bg-slate-50"
                to="#0"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                <span className="block text-sm mb-2">🚀<span className="font-medium text-slate-800">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
                <span className="block text-xs font-medium text-slate-400">Jan 24, 2020</span>
              </Link>
            </li>
          </ul>
        </div>
      </Transition>
    </div>
  )
 }
 export default DropdownNotifications;
--- a/src/components/DropdownProfile.jsx
+++ b/src/components/DropdownProfile.jsx
@@ -1,12 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
-
+import {store} from "../store/store";
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
-function DropdownProfile({
+ const DropdownProfile = observer(({
  align
-}) {
+})=>{
  const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -34,6 +36,11 @@ function DropdownProfile({
    return () => document.removeEventListener('keydown', keyHandler);
  });
  const logOut = () => {
    sessionStorage.removeItem('passPhrase')
    store.fetchPassPhrase()
  }
  return (
    <div className="relative inline-flex">
      <button
@@ -43,9 +50,9 @@ function DropdownProfile({
        onClick={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
-        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(store.pubKey) || UserAvatar} width="32" height="32" alt="User" />
        <div className="flex items-center truncate">
-          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
+          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">{store.accountName}</span>
          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
          </svg>
@@ -68,24 +75,22 @@ function DropdownProfile({
          onBlur={() => setDropdownOpen(false)}
        >
          <div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
-            <div className="font-medium text-slate-800">Acme Inc.</div>
+            <div className="font-medium text-slate-800">{store.accountName}</div>
            <div className="text-xs text-slate-500 italic">Administrator</div>
          </div>
          <ul>
            <li>
-              <Link
+              <span
-                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                className="cursor-pointer font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                to="/"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                Settings
-              </Link>
+              </span>
            </li>
            <li>
              <Link
                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                to="/"
-                onClick={() => setDropdownOpen(!dropdownOpen)}
+                onClick={() => logOut()}
              >
                Sign Out
              </Link>
@@ -95,6 +100,6 @@ function DropdownProfile({
      </Transition>
    </div>
  )
-}
+})
 export default DropdownProfile;
--- a/src/components/LoadingOverlay.jsx
+++ b/src/components/LoadingOverlay.jsx
@@ -0,0 +1,15 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import {ThreeCircles} from 'react-loader-spinner';
 export const LoadingOverlay = () => ReactDOM.createPortal((
  <div className='absolute left-0 top-0 h-screen w-screen z-50 loading-overlay'>
    <ThreeCircles
      height="100"
      width="100"
      color="#6366f1"
      visible={true}
      ariaLabel="three-circles-rotating"
    />
  </div>
 ), document.body)
--- a/src/components/ModalSearch.jsx
+++ b/src/components/ModalSearch.jsx
@@ -1,197 +0,0 @@
 import React, { useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Transition from '../utils/Transition';
 function ModalSearch({
  id,
  searchId,
  modalOpen,
  setModalOpen
 }) {
  const modalContent = useRef(null);
  const searchInput = useRef(null);
  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!modalOpen || modalContent.current.contains(target)) return
      setModalOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });
  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!modalOpen || keyCode !== 27) return;
      setModalOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });
  useEffect(() => {
    modalOpen && searchInput.current.focus();
  }, [modalOpen]);
  return (
    <>
      {/* Modal backdrop */}
      <Transition
        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
        show={modalOpen}
        enter="transition ease-out duration-200"
        enterStart="opacity-0"
        enterEnd="opacity-100"
        leave="transition ease-out duration-100"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
        aria-hidden="true"
      />
      {/* Modal dialog */}
      <Transition
        id={id}
        className="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center transform px-4 sm:px-6"
        role="dialog"
        aria-modal="true"
        show={modalOpen}
        enter="transition ease-in-out duration-200"
        enterStart="opacity-0 translate-y-4"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-in-out duration-200"
        leaveStart="opacity-100 translate-y-0"
        leaveEnd="opacity-0 translate-y-4"
      >
        <div ref={modalContent} className="bg-white overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
          {/* Search form */}
          <form className="border-b border-slate-200">
            <div className="relative">
              <label htmlFor={searchId} className="sr-only">Search</label>
              <input id={searchId} className="w-full border-0 focus:ring-transparent placeholder-slate-400 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref={searchInput} />
              <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
                <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                  <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
                </svg>
              </button>
            </div>
          </form>
          <div className="py-4 px-2">
            {/* Recent searches */}
            <div className="mb-3 last:mb-0">
              <div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent searches</div>
              <ul className="text-sm">
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Form Builder - 23 hours on-demand video</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Access Mosaic on mobile and TV</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Product Update - Q4 2021</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Master Digital Marketing Strategy course</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Dedicated forms for products</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                    </svg>
                    <span>Product Update - Q4 2021</span>
                  </Link>
                </li>
              </ul>
            </div>
            {/* Recent pages */}
            <div className="mb-3 last:mb-0">
              <div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent pages</div>
              <ul className="text-sm">
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
                    </svg>
                    <span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Mike Mills</span>
                  </Link>
                </li>
                <li>
                  <Link
                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
                    to="#0"
                    onClick={() => setModalOpen(!modalOpen)}
                  >
                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                      <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
                    </svg>
                    <span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Eva Patrick</span>
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </Transition>
    </>
  );
 }
 export default ModalSearch;
--- a/src/components/Tooltip.jsx
+++ b/src/components/Tooltip.jsx
@@ -1,90 +0,0 @@
 import React, { useState } from 'react';
 import Transition from '../utils/Transition';
 function Tooltip({
  children,
  className,
  bg,
  size,
  position,
 }) {
  const [tooltipOpen, setTooltipOpen] = useState(false);
  const positionOuterClasses = (position) => {
    switch (position) {
      case 'right':
        return 'left-full top-1/2 transform -translate-y-1/2';
      case 'left':
        return 'right-full top-1/2 transform -translate-y-1/2';
      case 'bottom':
        return 'top-full left-1/2 transform -translate-x-1/2';
      default:
        return 'bottom-full left-1/2 transform -translate-x-1/2';
    }
  }
  const sizeClasses = (size) => {
    switch (size) {
      case 'lg':
        return 'min-w-72  p-3';
      case 'md':
        return 'min-w-56 p-3';
      case 'sm':
        return 'min-w-44 p-2';
      default:
        return 'p-2';
    }
  };
  const positionInnerClasses = (position) => {
    switch (position) {
      case 'right':
        return 'ml-2';
      case 'left':
        return 'mr-2';
      case 'bottom':
        return 'mt-2';
      default:
        return 'mb-2';
    }
  };
  return (
    <div
      className={`relative ${className}`}
      onMouseEnter={() => setTooltipOpen(true)}
      onMouseLeave={() => setTooltipOpen(false)}
      onFocus={() => setTooltipOpen(true)}
      onBlur={() => setTooltipOpen(false)}
    >
      <button
        className="block"
        aria-haspopup="true"
        aria-expanded={tooltipOpen}
        onClick={(e) => e.preventDefault()}
      >
        <svg className="w-4 h-4 fill-current text-slate-400" viewBox="0 0 16 16">
          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
        </svg>
      </button>
      <div className={`z-10 absolute ${positionOuterClasses(position)}`}>
        <Transition
          show={tooltipOpen}
          tag="div"
          className={`rounded overflow-hidden ${bg === 'dark' ? 'bg-slate-800' : 'bg-white border border-slate-200 shadow-lg'} ${sizeClasses(size)} ${positionInnerClasses(position)}`}
          enter="transition ease-out duration-200 transform"
          enterStart="opacity-0 -translate-y-2"
          enterEnd="opacity-100 translate-y-0"
          leave="transition ease-out duration-200"
          leaveStart="opacity-100"
          leaveEnd="opacity-0"
        >
          {children}
        </Transition>
      </div>
    </div>
  );
 }
 export default Tooltip;
--- a/src/css/additional-styles/theme.scss
+++ b/src/css/additional-styles/theme.scss
@@ -9,3 +9,10 @@
        @apply ring-0;
    }
 }
 .loading-overlay {
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
 }
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -3,7 +3,6 @@
@tailwind base;
@tailwind components;
 // Additional styles
@import 'additional-styles/utility-patterns.scss';
@import 'additional-styles/range-slider.scss';
@import 'additional-styles/toggle-switch.scss';
--- a/src/images/GenerateOnboardingSvg/GenerateSvg.js
+++ b/src/images/GenerateOnboardingSvg/GenerateSvg.js
@@ -36,12 +36,9 @@ function createBlob(options) {
 }
 export var generateSvgAvatar = ( function () {
-    return function (seed, raw) {
+    return function (publicKey, seed, raw) {
-        let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
+        let pubKey = publicKey || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
        //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
        if (!localStorage.getItem('svgKey')) {
            localStorage.setItem('svgKey', `${pubKey}`)
        }
        let particles = [];
        let gradients = ['#000000'];
        let defs = [];
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,8 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
+import {Buffer} from "buffer";
 import { HashRouter as Router } from 'react-router-dom'
 import App from './App'
 globalThis.Buffer = Buffer
 BigInt.prototype.toJSON = function() {
  return this.toString()
 }
 ReactDOM.render(
  <React.StrictMode>
    <Router>
--- a/src/pages/Analytics.jsx
+++ b/src/pages/Analytics.jsx
@@ -1,92 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import Datepicker from '../components/Datepicker';
 import AnalyticsCard01 from '../partials/analytics/AnalyticsCard01';
 import AnalyticsCard02 from '../partials/analytics/AnalyticsCard02';
 import AnalyticsCard03 from '../partials/analytics/AnalyticsCard03';
 import AnalyticsCard04 from '../partials/analytics/AnalyticsCard04';
 import AnalyticsCard05 from '../partials/analytics/AnalyticsCard05';
 import AnalyticsCard06 from '../partials/analytics/AnalyticsCard06';
 import AnalyticsCard07 from '../partials/analytics/AnalyticsCard07';
 import AnalyticsCard08 from '../partials/analytics/AnalyticsCard08';
 import AnalyticsCard09 from '../partials/analytics/AnalyticsCard09';
 import AnalyticsCard10 from '../partials/analytics/AnalyticsCard10';
 import AnalyticsCard11 from '../partials/analytics/AnalyticsCard11';
 function Analytics() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Page header */}
            <div className="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Title */}
              <div className="mb-4 sm:mb-0">
                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Analytics ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Datepicker built with flatpickr */}
                <Datepicker align="right" />
              </div>
            </div>            
            {/* Cards */}
            <div className="grid grid-cols-12 gap-6">
              {/* Line chart (Analytics) */}
              <AnalyticsCard01 />
              {/*  Line chart (Active Users Right Now) */}
              <AnalyticsCard02 />
              {/* Stacked bar chart (Acquisition Channels) */}
              <AnalyticsCard03 />
              {/* Horizontal bar chart (Audience Overview) */}
              <AnalyticsCard04 />
              {/* Report card (Top Channels) */}
              <AnalyticsCard05 />
              {/* Report card (Top Pages) */}
              <AnalyticsCard06 />
              {/* Report card (Top Countries) */}
              <AnalyticsCard07 />
              {/* Doughnut chart (Sessions By Device) */}
              <AnalyticsCard08 />
              {/* Doughnut chart (Visit By Age Category) */}
              <AnalyticsCard09 />
              {/* Polar chart (Sessions By Gender) */}
              <AnalyticsCard10 />
              {/* Table (Top Products) */}
              <AnalyticsCard11 />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Analytics;
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,105 +0,0 @@
 import React, {useEffect, useState} from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import WelcomeBanner from '../partials/dashboard/WelcomeBanner';
 import DashboardAvatars from '../partials/dashboard/DashboardAvatars';
 import FilterButton from '../components/DropdownFilter';
 import Datepicker from '../components/Datepicker';
 import DashboardCard01 from '../partials/dashboard/DashboardCard01';
 import DashboardCard02 from '../partials/dashboard/DashboardCard02';
 import DashboardCard03 from '../partials/dashboard/DashboardCard03';
 import DashboardCard04 from '../partials/dashboard/DashboardCard04';
 import DashboardCard05 from '../partials/dashboard/DashboardCard05';
 import DashboardCard06 from '../partials/dashboard/DashboardCard06';
 import DashboardCard07 from '../partials/dashboard/DashboardCard07';
 import DashboardCard08 from '../partials/dashboard/DashboardCard08';
 import DashboardCard09 from '../partials/dashboard/DashboardCard09';
 import DashboardCard10 from '../partials/dashboard/DashboardCard10';
 import DashboardCard11 from '../partials/dashboard/DashboardCard11';
 function Dashboard() {
  useEffect(() => {
    localStorage.setItem('svgKey', '')
  }, [])
  const [sidebarOpen, setSidebarOpen] = useState(false);
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Welcome banner */}
            <WelcomeBanner />
            {/* Dashboard actions */}
            <div className="sm:flex sm:justify-between sm:items-center mb-8">
              {/* Left: Avatars */}
              <DashboardAvatars />
              {/* Right: Actions */}
              <div className="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
                {/* Filter button */}
                <FilterButton align="right" />
                {/* Datepicker built with flatpickr */}
                <Datepicker align="right" />
                {/* Add view button */}
                <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                  <svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
                    <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                  </svg>
                  <span className="hidden xs:block ml-2">Add View</span>
                </button>
              </div>
            </div>
            {/* Cards */}
            <div className="grid grid-cols-12 gap-6">
              {/* Line chart (Acme Plus) */}
              <DashboardCard01 />
              {/* Line chart (Acme Advanced) */}
              <DashboardCard02 />
              {/* Line chart (Acme Professional) */}
              <DashboardCard03 />
              {/* Bar chart (Direct vs Indirect) */}
              <DashboardCard04 />
              {/* Line chart (Real Time Value) */}
              <DashboardCard05 />
              {/* Doughnut chart (Top Countries) */}
              <DashboardCard06 />
              {/* Table (Top Channels) */}
              <DashboardCard07 />
              {/* Line chart (Sales Over Time) */}
              <DashboardCard08 />
              {/* Stacked bar chart (Sales VS Refunds) */}
              <DashboardCard09 />
              {/* Card (Recent Activity) */}
              <DashboardCard10 />
              {/* Card (Income/Expenses) */}
              <DashboardCard11 />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Dashboard;
--- a/src/pages/Fintech.jsx
+++ b/src/pages/Fintech.jsx
@@ -1,104 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import Datepicker from '../components/Datepicker';
 import FintechIntro from '../partials/fintech/FintechIntro';
 import FintechCard01 from '../partials/fintech/FintechCard01';
 import FintechCard02 from '../partials/fintech/FintechCard02';
 import FintechCard03 from '../partials/fintech/FintechCard03';
 import FintechCard04 from '../partials/fintech/FintechCard04';
 import FintechCard05 from '../partials/fintech/FintechCard05';
 import FintechCard06 from '../partials/fintech/FintechCard06';
 import FintechCard07 from '../partials/fintech/FintechCard07';
 import FintechCard08 from '../partials/fintech/FintechCard08';
 import FintechCard09 from '../partials/fintech/FintechCard09';
 import FintechCard10 from '../partials/fintech/FintechCard10';
 import FintechCard11 from '../partials/fintech/FintechCard11';
 import FintechCard12 from '../partials/fintech/FintechCard12';
 import FintechCard13 from '../partials/fintech/FintechCard13';
 import FintechCard14 from '../partials/fintech/FintechCard14';
 function Fintech() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  return (
    <div className='flex h-screen overflow-hidden'>
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden'>
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className='px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto'>
            {/* Page header */}
            <div className='sm:flex sm:justify-between sm:items-center mb-5'>
              {/* Left: Title */}
              <div className='mb-4 sm:mb-0'>
                <h1 className='text-2xl md:text-3xl text-slate-800 font-bold'>Fintech ✨</h1>
              </div>
              {/* Right: Actions */}
              <div className='grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2'>
                {/* Datepicker built with flatpickr */}
                <Datepicker align='right' />
                {/* Add account button */}
                <button className='btn bg-indigo-500 hover:bg-indigo-600 text-white'>
                  <svg className='w-4 h-4 fill-current opacity-50 shrink-0' viewBox='0 0 16 16'>
                    <path d='M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z' />
                  </svg>
                  <span className='hidden xs:block ml-2'>Add Account</span>
                </button>
              </div>
            </div>
            {/* Cards */}
            <div className='grid grid-cols-12 gap-6'>
              {/* Page Intro */}
              <FintechIntro />
              {/* Line chart (Portfolio Returns) */}
              <FintechCard01 />
              {/* Credit Card */}
              <FintechCard02 />
              {/* Bar chart (Cash Flow) */}
              <FintechCard03 />
              {/* Horizontal bar chart (Cash Flow by Account) */}
              <FintechCard04 />
              {/* Table (Recent Expenses) */}
              <FintechCard05 />
              {/* Table (Recent Earnings) */}
              <FintechCard06 />
              {/* Line chart (Saving Goals) */}
              <FintechCard07 />
              {/* Line chart (Growth Portfolio) */}
              <FintechCard08 />
              {/* Pie chart (Portfolio Value) */}
              <FintechCard09 />
              {/* Line charts (Stock graphs) */}
              <FintechCard10 />
              <FintechCard11 />
              <FintechCard12 />
              <FintechCard13 />
              {/* Table (Market Trends) */}
              <FintechCard14 />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Fintech;
--- a/src/pages/Messages.jsx
+++ b/src/pages/Messages.jsx
@@ -1,55 +0,0 @@
 import React, { useState, useEffect, useRef } from 'react';
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
 import MessagesSidebar from '../partials/messages/MessagesSidebar';
 import MessagesHeader from '../partials/messages/MessagesHeader';
 import MessagesBody from '../partials/messages/MessagesBody';
 import MessagesFooter from '../partials/messages/MessagesFooter';
 function Messages() {
  const contentArea = useRef(null)
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [msgSidebarOpen, setMsgSidebarOpen] = useState(true);
  useEffect(() => {
    contentArea.current.scrollTop = 99999999
  }, [msgSidebarOpen]); // automatically scroll the chat and make the most recent message visible
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */} 
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden" ref={contentArea}>
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="relative flex">
            {/* Messages sidebar */}
            <MessagesSidebar msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
            {/* Messages body */}
            <div className={`grow flex flex-col md:translate-x-0 transform transition-transform duration-300 ease-in-out ${msgSidebarOpen ? 'translate-x-1/3' : 'translate-x-0'}`}>
              <MessagesHeader msgSidebarOpen={msgSidebarOpen} setMsgSidebarOpen={setMsgSidebarOpen} />
              <MessagesBody />
              <MessagesFooter />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default Messages;
--- a/src/pages/Onboarding1.jsx
+++ b/src/pages/Onboarding1.jsx
@@ -1,11 +1,21 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 import { observer } from "mobx-react-lite";
 import { store } from "../store/store";
 import { Navigate } from "react-router-dom";
 const Onboarding1 = observer(() => {
  useEffect(() => {
    store.clearDataRegistration()
  }, [])
  if(store.passPhrase)
    return <Navigate to="/digitalId/profile-id" replace={true} />
 function Onboarding1() {
  return (
    <main className="bg-white">
@@ -21,31 +31,31 @@ function Onboarding1() {
              {/* Header */}
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                  <img alt='logo' src={Logo} width="89" height="32"/>
                </Link>
                <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                </div>
              </div>
              {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[142px]">
                <div className="max-w-md mx-auto w-full">
                  <div className="relative">
                    <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                    <ul className="relative flex justify-between w-full">
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-2">2</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                      </li>
                    </ul>
                  </div>
@@ -56,9 +66,9 @@ function Onboarding1() {
            <div className="px-4 py-8">
              <div className="max-w-md mx-auto">
-                <h1 className="text-3xl text-slate-800 font-bold mb-6">Tell us about your company ✨</h1>
+                <h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
                {/* Form */}
-                <form>
+                <div>
                  <div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
                    <label className="flex-1 relative block cursor-pointer">
                      <input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
@@ -67,7 +77,7 @@ function Onboarding1() {
                          <circle className="text-indigo-100" cx="20" cy="20" r="20" />
                          <path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
                        </svg>
-                        <div className="font-medium text-slate-800 mb-1">Individual</div>
+                        <div className="font-semibold text-slate-800 mb-1">Individual</div>
                        <div className="text-sm">Lorem ipsum is place text commonly used.</div>
                      </div>
                      <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -82,7 +92,7 @@ function Onboarding1() {
                          <path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" />
                          <path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
                        </svg>
-                        <div className="font-medium text-slate-800 mb-1">Organization</div>
+                        <div className="font-semibold text-slate-800 mb-1">Organization</div>
                        <div className="text-sm">Lorem ipsum is place text commonly used.</div>
                      </div>
                      <div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -91,7 +101,7 @@ function Onboarding1() {
                  <div className="flex items-center justify-between space-x-6 mb-8">
                    <div>
                      <div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div>
-                      <div className="text-xs">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
+                      <div className="text-xs font-normal leading-6">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
                    </div>
                    <div className="flex items-center">
                      <div className="form-switch">
@@ -104,9 +114,11 @@ function Onboarding1() {
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
-                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-2">Next Step -&gt;</Link>
+                    <button className="font-medium btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
                      <Link to="/onboarding-2">Next Step -&gt;</Link>
                    </button>
                  </div>
                </div>
                </form>
              </div>
            </div>
@@ -125,6 +137,6 @@ function Onboarding1() {
    </main>
  );
-}
+})
 export default Onboarding1;
--- a/src/pages/Onboarding2.jsx
+++ b/src/pages/Onboarding2.jsx
@@ -1,11 +1,54 @@
-import React from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
-
+import { observer } from "mobx-react-lite";
 import { store } from "../store/store";
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
-function Onboarding2() {
+const Onboarding2 = observer(() => {
  const navigate = useNavigate();
  const [dataRegistration, setDataRegistration] = useState(
      {
        firstname: '',
        secondname: '',
        gender: '',
        birthdate: '',
      }
  );
  const fillingForm = useMemo(() => !Object.keys(dataRegistration).find(item => !dataRegistration[item]), [dataRegistration])
  const saveValueChange = (event) => {
    const newValue=event.target.value;
    setDataRegistration({
      ...dataRegistration,
      [event.target.id]: newValue,
    })
  };
  const saveStoreRegistration = () => {
    if (fillingForm) {
      store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
          key: `${item}`,
          value: dataRegistration[item],
        })
      ))
      navigate("/onboarding-3", { replace: true });
    }
  };
  useEffect(() => {
    if(store.accountData.length === 0)
      return;
    setDataRegistration(store.accountData.reduce((acc, item) => ({
      ...acc,
      [item.key]: item.value
    }), {}))
  }, [])
  return (
    <main className="bg-white">
@@ -21,31 +64,31 @@ function Onboarding2() {
              {/* Header */}
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                  <img alt='logo' src={Logo} width="89" height="32"/>
                </Link>
                <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                </div>
              </div>
              {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[59px]">
                <div className="max-w-md mx-auto w-full">
                  <div className="relative">
                    <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                    <ul className="relative flex justify-between w-full">
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-3">3</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                      </li>
                    </ul>
                  </div>
@@ -54,29 +97,30 @@ function Onboarding2() {
            </div>
            <div className="px-4 py-8">
-              <div className="max-w-sm mx-auto">
+              <div className="max-w-[344px] mx-auto">
                <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
                {/* Form */}
-                <form>
+                <div>
                  <div className="space-y-4 mb-8">
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="first_name">First name <span className="text-rose-500">*</span></label>
-                      <input id="email" className="form-input w-full" type="email" />
+                      <input  id="firstname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.firstname} />
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="second_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="name" className="form-input w-full" type="text" />
+                      <input  id="secondname" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" value={dataRegistration.secondname} />
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="role">Gender <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="gender">Gender <span className="text-rose-500">*</span></label>
-                      <select id="role" className="form-select w-full">
+                      <select  id="gender" onChange={(event)=>saveValueChange(event)} className="form-select w-full" value={dataRegistration.gender}>
                        <option className="hidden"></option>
                        <option>male</option>
-                        <option>feemale</option>
+                        <option>female</option>
                      </select>
                    </div>
                    <div>
-                      <label className="block text-sm font-medium mb-1" htmlFor="password">Date of birth <span className="text-rose-500">*</span></label>
+                      <label className="block text-sm font-medium mb-1" htmlFor="birthdate">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="password" className="form-input w-full" type="password" autoComplete="on" />
+                      <input  id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" autoComplete="on" value={dataRegistration.birthdate} />
                    </div>
                  </div>
                  <div className="flex items-center justify-between mt-6">
@@ -86,13 +130,8 @@ function Onboarding2() {
                        <span className="text-sm ml-2">Email me about product news.</span>
                      </label>
                    </div>
-                    <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/onboarding-3">Sign Up</Link>
+                    <button onClick={saveStoreRegistration} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">Sign Up
-                  </div>
+                    </button>
                </form>
                {/* Footer */}
                <div className="pt-5 mt-6 border-t border-slate-200">
                  <div className="text-sm">
                    Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/onboarding-2">Sign In</Link>
                  </div>
                </div>
              </div>
@@ -112,6 +151,6 @@ function Onboarding2() {
    </main>
  );
-}
+});
 export default Onboarding2;
--- a/src/pages/Onboarding3.jsx
+++ b/src/pages/Onboarding3.jsx
@@ -1,10 +1,33 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {store} from "../store/store";
 const Onboarding3 = observer(()=>{
  useEffect(()=>{
    store.generatePassPhrase();
  }, [])
  const generatePassPhrase = () => {
    store.generatePassPhrase();
  };
  const savePassPhraseInStore = copiedPhrase => {
    if (copiedPhrase.split(' ').length === 12) {
      store.savePastPassPhrase(copiedPhrase.trim());
    }
  };
  const pastePassPhrase = () => {
    navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
  };
  const convertPassPhraseToArray = () => store.passPhrase.split(' ').
    map((item, index) => ({str: item, id: index}));
 function Onboarding3() {
  const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
  return (
    <main className="bg-white">
@@ -20,11 +43,11 @@ function Onboarding3() {
              {/* Header */}
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                  <img alt='logo' src={Logo} width="89" height="32"/>
                </Link>
                <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                </div>
              </div>
@@ -35,16 +58,16 @@ function Onboarding3() {
                    <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                    <ul className="relative flex justify-between w-full">
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-slate-100 text-slate-500" to="/onboarding-4">4</span>
                      </li>
                    </ul>
                  </div>
@@ -58,22 +81,22 @@ function Onboarding3() {
                <div className="gap-0.5">
                  <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                  {/* htmlForm */}
-                  <div className="grid grid-cols-4 gap-2.5 mb-14">
+                  <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {arrayBadges.map(tag => (
+                    {convertPassPhraseToArray().map(tag => (
-                      <button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                      <button key={tag.id} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
-                        <span className="text-sm font-medium">{tag}</span>
+                        <span className="text-sm font-medium">{tag.str}</span>
                      </button>
                    ))}
                  </div>
-                  <div className="flex justify-center gap-x-5">
+                  <div className="flex pl-7 gap-x-5">
-                    <button className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
                        <path
                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
                      </svg>
                      <span className="ml-2">Paste</span>
                    </button>
-                    <button className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
+                    <button onClick={generatePassPhrase} className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
                      <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
                        <path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
@@ -84,7 +107,9 @@ function Onboarding3() {
                </div>
                <div className="flex items-center justify-between">
                  <Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-4">Next Step -&gt;</Link>
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
                    <Link to="/onboarding-4">Next Step -&gt;</Link>
                  </button>
                </div>
              </div>
@@ -97,7 +122,7 @@ function Onboarding3() {
        {/* Image */}
        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
          <div className="flex mt-40 flex-col items-center gap-2.5">
-            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
+            <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
            <span className="text-sm">Your generated Digital ID</span>
          </div>
        </div>
@@ -106,6 +131,6 @@ function Onboarding3() {
    </main>
  );
-}
+});
 export default Onboarding3;
--- a/src/pages/Onboarding4.jsx
+++ b/src/pages/Onboarding4.jsx
@@ -1,9 +1,32 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {observer} from "mobx-react-lite";
 import { store } from "../store/store";
 const Onboarding4 = observer(() => {
  const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
  function createAccount() {
    if(checkBoxesSelected.length === 2) {
      store.pushAccountData();
      sessionStorage.setItem('passPhrase', store.passPhrase);
      store.clearDataRegistration();
    }
  };
  function saveCheckBoxesValues(e) {
    const { id, checked } = e.target;
    setCheckBoxesSelected([...checkBoxesSelected, id]);
    if (!checked) {
      setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
    }
  };
  const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
 function Onboarding4() {
  return (
    <main className="bg-white">
@@ -19,31 +42,31 @@ function Onboarding4() {
              {/* Header */}
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
                  <img alt='logo' src={Logo} width="89" height="32"/>
                </Link>
                <div className="text-sm">
-                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
+                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signIn">Sign In</Link>
                </div>
              </div>
              {/* Progress bar */}
-              <div className="px-4 pt-12 pb-8">
+              <div className="px-4 pt-12 pb-[85px]">
                <div className="max-w-md mx-auto w-full">
                  <div className="relative">
                    <div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
                    <ul className="relative flex justify-between w-full">
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-1">1</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/">1</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-2">2</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-3">3</span>
                      </li>
                      <li>
-                        <Link className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</Link>
+                        <span className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-semibold bg-indigo-500 text-white" to="/onboarding-4">4</span>
                      </li>
                    </ul>
                  </div>
@@ -59,20 +82,22 @@ function Onboarding4() {
                    <circle className="text-emerald-100" cx="32" cy="32" r="32" />
                    <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
                  </svg>
-                  <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-8">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Go To Profile -&gt;</Link>
+                  <button onClick={createAccount} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
                    <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
                  </button>
                </div>
-                <div className="flex items-center justify-between mt-6">
+                <div className="flex items-center justify-between">
                  <div className="mr-1">
                    <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-1" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                      <span className="text-sm ml-2">I understand that Idntty cannot recover pass phrase</span>
                    </label>
                    <label className="flex items-center">
-                      <input type="checkbox" className="form-checkbox" />
+                      <input id="checkbox-2" onChange={(e)=>saveCheckBoxesValues(e)} type="checkbox" className="form-checkbox" />
                      <div className="text-sm ml-2">
-                        <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">I store my pharse</Link> very carefuly
+                        I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
                      </div>
                    </label>
                  </div>
@@ -88,7 +113,7 @@ function Onboarding4() {
        {/* Image */}
        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
          <div className="flex mt-40 flex-col items-center gap-2.5">
-            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
+            <img className="object-cover object-center" src={generateSvgAvatar(store.pubKey)} width="493px" height="493px" alt="Onboarding" />
            <span className="text-sm">Your generated Digital ID</span>
          </div>
        </div>
@@ -97,6 +122,6 @@ function Onboarding4() {
    </main>
  );
-}
+});
 export default Onboarding4;
--- a/src/pages/ResetPassword.jsx
+++ b/src/pages/ResetPassword.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 import Logo from "../images/logo.png";
 function ResetPassword() {
  return (
@@ -18,23 +18,8 @@ function ResetPassword() {
            <div className="flex-1">
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
-                <Link className="block" to="/">
+                <Link className="block" to="/dashboard">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                    <defs>
                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
                        <stop stopColor="#A5B4FC" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
                        <stop stopColor="#38BDF8" offset="100%" />
                      </linearGradient>
                    </defs>
                    <rect fill="#6366F1" width="32" height="32" rx="16" />
                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
                  </svg>
                </Link>
              </div>
            </div>
@@ -42,7 +27,7 @@ function ResetPassword() {
            <div className="max-w-sm mx-auto px-4 py-8">
              <h1 className="text-3xl text-slate-800 font-bold mb-6">Reset your Password ✨</h1>
              {/* Form */}
-              <form>
+              <div>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
@@ -52,7 +37,7 @@ function ResetPassword() {
                <div className="flex justify-end mt-6">
                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Send Reset Link</button>
                </div>
-              </form>
+              </div>
            </div>
          </div>
--- a/src/pages/SharedData.jsx
+++ b/src/pages/SharedData.jsx
@@ -4,7 +4,7 @@ import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import User06 from "../images/user-28-06.jpg";
 import User08 from "../images/user-28-08.jpg";
 import User09 from "../images/user-28-09.jpg";
-import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
+import SharedDataRoadMap from "../partials/sharedData/SharedDataRoadmap";
 function SharedData() {
@@ -55,9 +55,6 @@ function SharedData() {
      ]
    };
  function saveDigitalId() {
    localStorage.setItem('svgAvatar', generateSvgAvatar())
  }
  return (
    <main className="bg-white">
@@ -92,7 +89,7 @@ function SharedData() {
          <div className="flex mt-40 flex-col items-center gap-2.5">
            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
            <span className="text-sm">{sharedDataItems.data}</span>
-            <Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link>
+            <Link className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/dashboard">Get my digital ID</Link>
          </div>
        </div>
--- a/src/pages/SignIn.jsx
+++ b/src/pages/SignIn.jsx
@@ -0,0 +1,105 @@
 import React, {useState} from 'react';
 import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 import {store} from "../store/store";
 const SignIn = observer(()=>{
  const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
  const[addedPassPhrase, setAddedPassPhrase] = useState(false);
  function savePassPhrase (copiedPhrase) {
    if (copiedPhrase.split(' ').length === 12) {
      store.savePastPassPhrase(copiedPhrase.trim());
      setPassPhrase(store.passPhrase);
      setAddedPassPhrase(true);
    }
  }
  function convertPassPhraseToArray() {
    return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
  }
  function pastePassPhrase() {
    navigator.clipboard.readText().then(res => savePassPhrase(res));
  }
  return (
    <main className="bg-white">
      <div className="relative flex">
        {/* Content */}
        <div className="w-full md:w-1/2">
          <div className="min-h-screen h-full flex flex-col after:flex-1">
            <div className="flex-1">
              {/* Header */}
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
                <Link className="block" to="/">
                  <img alt='logo' src={Logo} width="89" height="32"/>
                </Link>
                <div className="text-sm">
                  Have not an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
                </div>
              </div>
            </div>
            <div className="px-4 mt-20 py-8">
              <div className="max-w-fit mx-auto flex flex-col gap-y-36">
                <div>
                  <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                  {/* htmlForm */}
                  <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
                    {convertPassPhraseToArray().map(tag => (
                      <button key={tag.id} className="min-w-[93px] min-h-[26px] bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                        <span className="text-sm font-medium">{tag.str}</span>
                      </button>
                    ))}
                  </div>
                  <div className="flex pl-7 gap-x-5">
                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
                        <path
                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
                      </svg>
                      <span className="ml-2">Paste</span>
                    </button>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
                    <Link to={addedPassPhrase && "/digitalId/profile-id"}>Go To Profile -&gt;</Link>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Image */}
        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
          <div className="flex mt-40 flex-col items-center gap-2.5">
            <div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
              <img className="object-cover object-center" alt="" src={generateSvgAvatar(store.pubKey)}/>
            </div>
            <span className="text-sm">Your Digital ID</span>
          </div>
        </div>
      </div>
    </main>
  );
 });
 export default SignIn;
--- a/src/pages/Signin.jsx
+++ b/src/pages/Signin.jsx
@@ -1,100 +0,0 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 function Signin() {
  useEffect(() => {
    localStorage.setItem('svgKey', '')
  }, [])
  return (
    <main className="bg-white">
      <div className="relative md:flex">
        {/* Content */}
        <div className="md:w-1/2">
          <div className="min-h-screen h-full flex flex-col after:flex-1">
            {/* Header */}
            <div className="flex-1">
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
                <Link className="block" to="/">
                  <svg width="32" height="32" viewBox="0 0 32 32">
                    <defs>
                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
                        <stop stopColor="#A5B4FC" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
                        <stop stopColor="#38BDF8" offset="100%" />
                      </linearGradient>
                    </defs>
                    <rect fill="#6366F1" width="32" height="32" rx="16" />
                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
                  </svg>
                </Link>
              </div>
            </div>
            <div className="max-w-sm mx-auto px-4 py-8">
              <h1 className="text-3xl text-slate-800 font-bold mb-6">Welcome back! ✨</h1>
              {/* Form */}
              <form>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address</label>
                    <input id="email" className="form-input w-full" type="email" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
                    <input id="password" className="form-input w-full" type="password" autoComplete="on" />
                  </div>
                </div>
                <div className="flex items-center justify-between mt-6">
                  <div className="mr-1">
                    <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
                  </div>
                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/">Sign In</Link>
                </div>
              </form>
              {/* Footer */}
              <div className="pt-5 mt-6 border-t border-slate-200">
                <div className="text-sm">
                  Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signup">Sign Up</Link>
                </div>
                {/* Warning */}
                <div className="mt-5">
                  <div className="bg-amber-100 text-amber-600 px-3 py-2 rounded">
                    <svg className="inline w-3 h-3 shrink-0 fill-current mr-2" viewBox="0 0 12 12">
                      <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
                    </svg>
                    <span className="text-sm">
                      To support you during the pandemic super pro features are free until March 31st.
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Image */}
        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
        </div>
      </div>
    </main>
  );
 }
 export default Signin;
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -1,101 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 function Signup() {
  return (
    <main className="bg-white">
      <div className="relative md:flex">
        {/* Content */}
        <div className="md:w-1/2">
          <div className="min-h-screen h-full flex flex-col after:flex-1">
            {/* Header */}
            <div className="flex-1">
              <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                {/* Logo */}
                <Link className="block" to="/">
                  <svg width="32" height="32" viewBox="0 0 32 32">
                    <defs>
                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
                        <stop stopColor="#A5B4FC" offset="100%" />
                      </linearGradient>
                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
                        <stop stopColor="#38BDF8" offset="100%" />
                      </linearGradient>
                    </defs>
                    <rect fill="#6366F1" width="32" height="32" rx="16" />
                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
                  </svg>
                </Link>
              </div>
            </div>
            <div className="max-w-sm mx-auto px-4 py-8">
              <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
              {/* Form */}
              <form>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address <span className="text-rose-500">*</span></label>
                    <input id="email" className="form-input w-full" type="email" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="name">Full Name <span className="text-rose-500">*</span></label>
                    <input id="name" className="form-input w-full" type="text" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="role">Your Role <span className="text-rose-500">*</span></label>
                    <select id="role" className="form-select w-full">
                      <option>Designer</option>
                      <option>Developer</option>
                      <option>Accountant</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
                    <input id="password" className="form-input w-full" type="password" autoComplete="on" />
                  </div>
                </div>
                <div className="flex items-center justify-between mt-6">
                  <div className="mr-1">
                    <label className="flex items-center">
                      <input type="checkbox" className="form-checkbox" />
                      <span className="text-sm ml-2">Email me about product news.</span>
                    </label>
                  </div>
                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/">Sign Up</Link>
                </div>
              </form>
              {/* Footer */}
              <div className="pt-5 mt-6 border-t border-slate-200">
                <div className="text-sm">
                  Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Image */}
        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
        </div>
      </div>
    </main>
  );
 }
 export default Signup;
--- a/src/pages/component/AccordionPage.jsx
+++ b/src/pages/component/AccordionPage.jsx
@@ -1,151 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import AccordionBasic from '../../components/AccordionBasic';
 import AccordionTableItem from '../../components/AccordionTableItem';
 import AccordionTableRichItem from '../../components/AccordionTableRichItem';
 import Image01 from '../../images/user-40-07.jpg';
 function AccordionPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const items = [
    {
      id: '0',
      image: Image01,
      customer: 'Mark Cameron',
      total: '$129.00',
      status: 'Refunded',
      items: '1',
      location: '🇲🇽 New Mexico, MX',
      type: 'Subscription',
      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },
  ];
  const items2 = [
    {
      id: '0',
      image: Image01,
      customer: 'Mark Cameron',
      email: 'mark.cameron@app.com',
      location: '🇬🇧 London, UK',
      date: '22/01/2021',
      amount: '+249.88',
      descriptionTitle: 'Excepteur sint occaecat cupidatat.',
      descriptionBody: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    },
  ];
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Page header */}
            <div className="mb-8">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Accordion ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Basic Accordion */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Accordion</h2>
                  <AccordionBasic title="Accordion Title">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </AccordionBasic>
                </div>
                {/* Table Row with Accordion */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Table Row with Accordion</h2>
                  {/* Start */}
                  <div className="rounded-sm border border-slate-200">
                    <div className="overflow-x-auto">
                      <table className="table-auto w-full divide-y divide-slate-200">
                        {
                          items.map(item => {
                            return (
                              <AccordionTableItem
                                key={item.id}
                                id={item.id}
                                image={item.image}
                                customer={item.customer}
                                total={item.total}
                                status={item.status}
                                items={item.items}
                                location={item.location}
                                type={item.type}
                                description={item.description}
                              />
                            )
                          })
                        }
                      </table>
                    </div>
                  </div>
                  {/* End */}
                </div>
                {/* Rich Table Row with Accordion */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Rich Table Row with Accordion</h2>
                  {/* Start */}
                  <div className="rounded-sm border border-slate-200">
                    <div className="overflow-x-auto">
                      <table className="table-auto w-full divide-y divide-slate-200">
                        {
                          items2.map(item => {
                            return (
                              <AccordionTableRichItem
                                key={item.id}
                                id={item.id}
                                image={item.image}
                                customer={item.customer}
                                email={item.email}
                                location={item.location}
                                date={item.date}
                                amount={item.amount}
                                descriptionTitle={item.descriptionTitle}
                                descriptionBody={item.descriptionBody}
                              />
                            )
                          })
                        }
                      </table>
                    </div>
                  </div>
                  {/* End */}
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default AccordionPage;
--- a/src/pages/component/BadgePage.jsx
+++ b/src/pages/component/BadgePage.jsx
@@ -1,186 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function BadgePage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Page header */}
            <div className="mb-8">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Badge ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Basic Small */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Small</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Working on</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1">Exciting news</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Product</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Announcement</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">Bug Fix</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-blue-100 text-blue-600 rounded-full text-center px-2.5 py-1">Customer Stories</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-slate-100 text-slate-500 rounded-full text-center px-2.5 py-1">All Stories</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">All Stories</div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Basic Large */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Large</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Working on</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-sky-100 text-sky-600 rounded-full text-center px-2.5 py-1">Exciting news</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Product</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">Announcement</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">Bug Fix</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-blue-100 text-blue-600 rounded-full text-center px-2.5 py-1">Customer Stories</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-slate-100 text-slate-500 rounded-full text-center px-2.5 py-1">All Stories</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">All Stories</div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Basic with Icon */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic with Icon</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="inline-flex items-center text-xs font-medium text-slate-100 bg-slate-700 rounded-full text-center px-2 py-0.5">
                        <svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-1" viewBox="0 0 12 12">
                          <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
                        </svg>
                        <span>Special Offer</span>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="inline-flex items-center text-sm font-medium text-slate-100 bg-slate-700 rounded-full text-center px-2 py-0.5">
                        <svg className="w-3 h-3 shrink-0 fill-current text-amber-500 mr-1" viewBox="0 0 12 12">
                          <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
                        </svg>
                        <span>Special Offer</span>
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Basic for Charts */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Basic for Charts</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+29%</div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
                      {/* End */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default BadgePage;
--- a/src/pages/component/ButtonPage.jsx
+++ b/src/pages/component/ButtonPage.jsx
@@ -1,235 +0,0 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 function ButtonPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <main>
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Page header */}
            <div className="mb-8">
              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Button ✨</h1>
            </div>
            <div className="border-t border-slate-200">
              {/* Components */}
              <div className="space-y-8 mt-8">
                {/* Appearances */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Appearances</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Primary</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-indigo-500">Secondary</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">Tertiary</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-rose-500 hover:bg-rose-600 text-white">Danger</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-rose-500">Danger</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-emerald-500 hover:bg-emerald-600 text-white">Success</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-emerald-500">Success</button>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* States */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">States</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>Disabled</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed shadow-none" disabled>
                        <svg className="animate-spin w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                          <path d="M8 16a7.928 7.928 0 01-3.428-.77l.857-1.807A6.006 6.006 0 0014 8c0-3.309-2.691-6-6-6a6.006 6.006 0 00-5.422 8.572l-1.806.859A7.929 7.929 0 010 8c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8z" />
                        </svg>
                        <span className="ml-2">Loading</span>
                      </button>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Sizes */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Sizes</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn-lg bg-indigo-500 hover:bg-indigo-600 text-white">Button</button>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Buttons with an Icon */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Buttons with an Icon</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
                        <svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
                          <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                        </svg>
                        <span className="ml-2">Add Event</span>
                      </button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-slate-600">
                        <svg className="w-4 h-4 fill-current text-slate-500 shrink-0" viewBox="0 0 16 16">
                          <path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
                        </svg>
                        <span className="ml-2">Edit Content</span>
                      </button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300 text-rose-500">
                        <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                          <path d="M5 7h2v6H5V7zm4 0h2v6H9V7zm3-6v2h4v2h-1v10c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5H0V3h4V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zM6 2v1h4V2H6zm7 3H3v9h10V5z" />
                        </svg>
                        <span className="ml-2">Delete</span>
                      </button>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Icon Buttons */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Icon Buttons</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300">
                        <svg className="w-4 h-4 fill-current text-slate-500 shrink-0" viewBox="0 0 16 16">
                          <path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
                        </svg>
                      </button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300">
                        <svg className="w-4 h-4 fill-current text-rose-500 shrink-0" viewBox="0 0 16 16">
                          <path d="M5 7h2v6H5V7zm4 0h2v6H9V7zm3-6v2h4v2h-1v10c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5H0V3h4V1c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zM6 2v1h4V2H6zm7 3H3v9h10V5z" />
                        </svg>
                      </button>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <button className="btn border-slate-200 hover:border-slate-300">
                        <svg className="w-4 h-4 fill-current text-indigo-500 shrink-0" viewBox="0 0 16 16">
                          <path d="M14.3 2.3L5 11.6 1.7 8.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" />
                        </svg>
                      </button>
                      {/* End */}
                    </div>
                  </div>
                </div>
                {/* Button Groups */}
                <div>
                  <h2 className="text-2xl text-slate-800 font-bold mb-6">Button Groups</h2>
                  <div className="flex flex-wrap items-center -m-1.5">
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex flex-wrap -space-x-px">
                        <button className="btn bg-indigo-600 text-white rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Weekly</button>
                        <button className="btn bg-indigo-500 hover:bg-indigo-600 text-indigo-100 rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Monthly</button>
                        <button className="btn bg-indigo-500 hover:bg-indigo-600 text-indigo-100 rounded-none border-l-indigo-400 first:rounded-l last:rounded-r first:border-r-transparent">Yearly</button>
                      </div>
                      {/* End */}
                    </div>
                    <div className="m-1.5">
                      {/* Start */}
                      <div className="flex flex-wrap -space-x-px">
                        <button className="btn bg-slate-50 border-slate-200 hover:bg-slate-50 text-indigo-500 rounded-none first:rounded-l last:rounded-r">Weekly</button>
                        <button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Monthly</button>
                        <button className="btn bg-white border-slate-200 hover:bg-slate-50 text-slate-600 rounded-none first:rounded-l last:rounded-r">Yearly</button>
                      </div>
                      {/* End */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
 }
 export default ButtonPage;
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -1,34 +1,107 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { store } from "../../store/store";
 import Sidebar from '../../partials/Sidebar';
 import { observer } from 'mobx-react-lite';
 import Header from '../../partials/Header';
-import ProfileTable from '../../partials/digitalId/ProfileTable';
+import ProfileTable from '../../partials/profile/ProfileTable';
 import Image from '../../images/transactions-image-04.svg';
-import ProfileIcon from '../../images/profile-icon.svg';
+import {labelMap} from '../../shared/labelMap';
-import Avatar01 from '../../images/avatar-01.jpg';
+import {statusMap} from "../../shared/statusMap";
-import Avatar02 from '../../images/avatar-02.jpg';
+
-import Avatar03 from '../../images/avatar-03.jpg';
+const initialPropertyValues = ['First name', 'Second name', 'Birthdate', 'Gender', 'National doctype', 'National doc ID', 'National doc issue date', 'National doc expiry date'];
 const Profile = observer (() => {
  const defaultValues = {
    label: '',
    value: '',
    seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
  };
 function Profile () {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
  const [removePanelOpen, setRemovePanelOpen] = useState(false);
  const [changePanelOpen, setChangePanelOpen] = useState(false);
-  const [toggle, setToggle] = useState(true);
+  const [storeOnBlockchain, setStoreOnBlockchain] = useState(false);
  const [addPanelOpen, setAddPanelOpen] = useState(false);
  const [updatePanelOpen, setUpdatePanelOpen] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [propertyValues, setPropertyValues] = useState([]);
  const [updatedValues, setUpdatedValues] = useState([defaultValues]);
  const [addedValues, setAddedValues] = useState(defaultValues);
  const [isCheck, setIsCheck] = useState([]);
  const [alreadyExists, setAlreadyExists] = useState(false)
  const [blockChainValue, setBlockChainValue] = useState('');
  useEffect(() => {
    handleSelectedItems(isCheck);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isCheck]);
  const handleClick = e => {
    const { id, checked } = e.target;
    setIsCheck([...isCheck, id]);
    if (!checked || !id) {
      setIsCheck(isCheck.filter(item => item !== id));
    }
  };
  const openHint = () => {
    if (!addedValues.label) {
      setPropertyValues(initialPropertyValues);
    }
  };
  const changeAddedValues = (value, field) => {
    setAddedValues((prevState) => ({
      ...prevState,
      [field]: value,
    }))
  };
  const changeUpdatedValues = (value, field, key) => {
    if(field==='value') {
      setBlockChainValue(value)
    }
    setUpdatedValues((prevState) =>
      prevState.map((elem) => (
          (elem.key === key) ? {
            ...elem,
            [field]: value,
          } : elem
      ))
    )
  };
  const selectHint = (element) => {
    changeAddedValues(element, 'label');
    setPropertyValues([]);
  }
  const closeHint = (eventTarget) => {
    if (!eventTarget || eventTarget.tabIndex !== -1) {
      setPropertyValues([]);
    }
  };
  const handleSelectedItems = (selectedItems) => {
    setSelectedItems([...selectedItems]);
    setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
      .map(elem => (
        (!elem.seed) ? {
        ...elem,
        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
      }: elem)));
    if (selectedItems.length > 0) {
      setButtonPanelOpen(false);
      setAddPanelOpen(false);
      setChangePanelOpen(true);
    }
-    if (removePanelOpen === true) {
+    if (removePanelOpen === true || updatePanelOpen === true) {
      setChangePanelOpen(false);
    }
    if (selectedItems.length === 0) {
      setRemovePanelOpen(false);
      setUpdatePanelOpen(false);
      setButtonPanelOpen(true);
      setChangePanelOpen(false);
    }
@@ -37,157 +110,120 @@ function Profile () {
  const openAddPanel = () => {
    setAddPanelOpen(true);
    setButtonPanelOpen(false);
-  }
+  };
-  const cancelAddPanel = () => {
+  const sendAddedData = () => {
    const checkingAddedData = !store.decryptedAccountData
      .some((element) => element.label === addedValues.label)
    setAlreadyExists(!checkingAddedData);
    if (checkingAddedData) {
      setAddPanelOpen(false);
      setButtonPanelOpen(true);
      setAddedValues(defaultValues);
      addDataParameters();
    }
  };
  const sendUpdatedData = () => {
    setUpdatePanelOpen(false);
    changeDataParameters();
    setChangePanelOpen(true);
    setIsCheck([]);
  };
  const deleteDataParameters = () => {
    const changeData = store.decryptedAccountData.filter(item=>!selectedItems.includes(item.key));
    store.pushAccountData(changeData);
    if(storeOnBlockchain)
      store.pushAccountDataToBlockchain(changeData.filter(elem=>elem.status!=='Stored'))
  };
  const changeInitialArray = () => {
    let newArr = [];
    store.decryptedAccountData.map(elem => {
      updatedValues.forEach(item => {
        if (elem.label === item.label) {
          newArr.push({
            ...elem,
            status: 'new',
            'value': item.value,
            'seed': item.seed,
          })
        }
      })
      if (!newArr.find(element => element.label === elem.label)) {
        newArr.push(elem);
      }
    })
    return newArr;
  };
  const changeDataParameters = () => {
    const updatedData = changeInitialArray();
    store.pushAccountData(updatedData);
    if(storeOnBlockchain)
      store.pushAccountDataToBlockchain(updatedData.filter(elem=>elem.status!=='Stored'))
  };
  const sharedDataAccount = () => {
    const sharedData = store.decryptedAccountData.filter(item => selectedItems.includes(item.key))
    store.pushSharedData(sharedData)
  }
  const addDataParameters = () => {
    const label = addedValues.label.toLowerCase().split(' ').join('');
    if(labelMap[label])
      addedValues.key = addedValues.label.toLowerCase().split(' ').join('');
    else
      addedValues.key = addedValues.label
    store.pushAccountData(store.decryptedAccountData.concat(addedValues));
    if(storeOnBlockchain)
      store.pushAccountDataToBlockchain(store.decryptedAccountData.concat(addedValues).filter(elem=>elem.status!=='Stored'))
  };
  const cancelAddPanel = () => {
    setAddedValues(defaultValues);
    setAddPanelOpen(false);
    setButtonPanelOpen(true);
  };
  const cancelUpdatePanel = () => {
    setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
      .map(elem => (
        (!elem.seed) ? {
        ...elem,
        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
      }: elem)));
    setUpdatePanelOpen(false);
    setChangePanelOpen(true);
    setIsCheck([]);
  };
  const openRemovePanel = () => {
    setRemovePanelOpen(true);
    setChangePanelOpen(false);
-  }
+  };
-  const applyRemovePanel = () => {
+  const openUpdatePanel = () => {
    setUpdatePanelOpen(true);
    setChangePanelOpen(false);
  };
  const applyDataDeletion = () => {
    setRemovePanelOpen(false);
    setButtonPanelOpen(true);
-  }
+    deleteDataParameters();
    setIsCheck([]);
  };
-  const userData = [
+  const handleInput = (text, field) => {
-    {
+    changeAddedValues(text, field);
-      id: '0',
+    setPropertyValues(initialPropertyValues);
-      category: 'General',
+    if (text) {
-      validated: true,
+      let reg = new RegExp(`^${text}`, 'img');
-      blockchained: true,
+      setPropertyValues((prevState) => prevState.filter((element) => element.match(reg)));
-      image: ProfileIcon,
+    }
-      value: 'Dominik',
+  };
      property: 'First name',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '1',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Lamakani',
      property: 'Second name',
      status: 'Progress',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '2',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.1983',
      property: 'Birthdate',
      status: 'Incorrect',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '3',
      category: 'General',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Male',
      property: 'Gender',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '4',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'United Kindom',
      property: 'Residence',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '5',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'Passport',
      property: 'Document type',
      status: 'Progress',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
    {
      id: '6',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: 'A123B3143',
      property: 'Document ID',
      status: 'Incorrect',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '7',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.2012',
      property: 'Issue date',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '8',
      category: 'Nationality',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '05.10.2032',
      property: 'Expiry date',
      status: 'Stored',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '9',
      category: 'Social',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '@lamakani',
      property: 'Telegram',
      status: 'Completed',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: null
    },
    {
      id: '10',
      category: 'Social',
      validated: true,
      blockchained: true,
      image: ProfileIcon,
      value: '@lamakani',
      property: 'Telegram',
      status: 'Progress',
      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
      avatars: [Avatar01, Avatar02, Avatar03]
    },
  ]
  return (
    <div className="flex h-screen overflow-hidden">
@@ -222,7 +258,9 @@ function Profile () {
                  </ul>
                </div>
                {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
+                <div>
                  <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
                </div>
              </div>
              {/* Left sidebar */}
              <div>
@@ -242,26 +280,132 @@ function Profile () {
                </div>
                <div className="ml-2.5">
                  {/* Add panel */}
-                  <div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                  <div className={`${!addPanelOpen && 'hidden'} relative flex flex-col bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
-                    <div className="flex flex-col gap-y-3">
+                    <div className='relative z-20'>
                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
                      <input
                        autoComplete='off'
                        id="label"
                        className={`form-input w-full ${alreadyExists && 'border-rose-300'}`}
                        type="text"
                        required
                        onInput={(e) => handleInput(e.target.value, 'label')}
                        value={addedValues.label}
                        onClick={openHint}
                        onBlur={(e) => closeHint(e.relatedTarget)}
                      />
                      <div tabIndex='-1' className={`absolute w-full box-border bg-white flex flex-col gap-y-2 py-2 pl-2 border border-t-0 border-slate-200 rounded ${(propertyValues.length > 0) || 'hidden'}`}>
                        <ul>
                          {propertyValues.map((element, index) => (
                            <li className='hover:text-indigo-600 cursor-pointer' key={index} onClick={() => selectHint(element)}>{element}</li>
                          ))}
                        </ul>
                     </div>
                      { alreadyExists && <div className="text-xs mt-1 text-rose-500">This property already added!</div> }
                    </div>
                    <div className='my-3 z-10'>
                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
                      <input
                        autoComplete='off'
                        id="value"
                        className="form-input w-full"
                        type="text"
                        required
                        onClick={() => setPropertyValues([])}
                        onChange={(e) => changeAddedValues(e.target.value, 'value')}
                        value={addedValues.value}
                      />
                    </div>
                    <div className='z-10'>
                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
                      <input
                        autoComplete='off'
                        id="seed"
                        className="form-input w-full"
                        type="text"
                        required
                        onClick={() => setPropertyValues([])}
                        onChange={(e) => changeAddedValues(e.target.value, 'seed')}
                        value={addedValues.seed}
                      />
                    </div>
                    <div className="flex flex-row z-10 justify-between pt-[18px] pb-[23px] items-center border-b border-slate-200">
                      <span className="block text-sm font-medium">Store data on blockchain</span>
                      <div className="flex items-center">
                        <div className="form-switch">
                          <input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
                            <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                          </label>
                        </div>
                      </div>
                    </div>
                    {/* Buttons */}
                    <div className="flex flex-row z-10 justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
                      <button
                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                        onClick={cancelAddPanel}
                      >
                        Cancel
                      </button>
                      <button
                        className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
                        onClick={sendAddedData}
                      >
                        Send
                      </button>
                    </div>
                  </div>
                  {/* Update panel */}
                  <div className={`${!updatePanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
                    {updatedValues.map((item, index) => (
                      <div key={index} className="flex flex-col gap-y-3">
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
-                        <input id="property" className="form-input w-full" type="text" required />
+                          <input
                            id={`${item.key}:label`}
                            className="form-input w-full"
                            type="text"
                            required
                            onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
                            value={item.label}
                            disabled
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
-                        <input id="value" className="form-input w-full" type="text" required />
+                          <input
                            autoComplete='off'
                            id={`${item.key}:value`}
                            className="form-input w-full"
                            type="text"
                            required
                            onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
                            value={item.status===statusMap.blockchained?blockChainValue : item.value}
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
-                        <input id="seed" className="form-input w-full" type="text" required />
+                          <input
                            autoComplete='off'
                            id={`${item.key}:seed`}
                            className="form-input w-full"
                            type="text"
                            required
                            onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
                            value={item.seed}
                          />
                        </div>
                        {(updatedValues[index+1]) ? (
                        <div className="mt-2 mb-3.5 items-center border-b border-slate-200"></div>
                        ) : null}
                      </div>
                    ))}
                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
                      <span className="block text-sm font-medium">Store data on blockchain</span>
                      <div className="flex items-center">
                        <div className="form-switch">
-                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <input type="checkbox" id="blockcheined" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
                            <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                          </label>
@@ -272,31 +416,31 @@ function Profile () {
                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
                      <button
                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
-                        onClick={cancelAddPanel}
+                        onClick={cancelUpdatePanel}
                      >
-                        Cansel
+                        Cancel
                      </button>
                      <button
                        className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
-                        onClick={cancelAddPanel}
+                        onClick={sendUpdatedData}
                      >
                        Send
                      </button>
                    </div>
                  </div>
                  {/* Remove panel */}
-                  <div className={`${!removePanelOpen && 'hidden'} bg-white p-5 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
+                  <div className={`${!removePanelOpen && 'hidden'} bg-white px-5 pt-4 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
-                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5">Summary</h2>
+                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2">Summary</h2>
                    <div className="flex flex-col">
-                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
+                      {store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
-                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
+                        <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                      ))}
                    </div>
-                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center">
+                    <div className="flex flex-row justify-between pt-[16px] pb-7 items-center">
                      <span className="block text-sm font-medium">On blockchain too</span>
                      <div className="flex items-center">
                        <div className="form-switch">
-                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <input type="checkbox" id="switch-1" className="sr-only" checked={storeOnBlockchain} onChange={() => setStoreOnBlockchain(!storeOnBlockchain)} />
                            <label className="bg-slate-400" htmlFor="switch-1">
                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
                          </label>
@@ -306,7 +450,7 @@ function Profile () {
                    <div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
                      <button
                        className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
-                        onClick={applyRemovePanel}
+                        onClick={applyDataDeletion}
                        >
                        <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
                          <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
@@ -319,7 +463,7 @@ function Profile () {
                    </div>
                  </div>
                  {/* Details */}
-                  <div className={`${(removePanelOpen || addPanelOpen) || 'hidden'} drop-shadow-lg`}>
+                  <div className={`${(!(removePanelOpen || addPanelOpen) || !storeOnBlockchain) && 'hidden'} drop-shadow-lg`}>
                    {/* Top */}
                    <div className="bg-white rounded-t-xl px-5 pb-4 text-center">
                      <div className="mb-3 text-center">
@@ -351,7 +495,7 @@ function Profile () {
                        <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
                      </div>
                      <div className="flex justify-between space-x-1">
-                        <span className="italic">Transacion::</span>
+                        <span className="italic">Transaction:</span>
                        <span className="font-medium text-slate-700 text-right">145 bytes</span>
                      </div>
                    </div>
@@ -369,13 +513,19 @@ function Profile () {
                      </svg>
                      <span className="ml-2">Remove</span>
                    </button>
-                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
+                    <button
                      className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
                      onClick={openUpdatePanel}
                      >
                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                      </svg>
                      <span className="ml-2">Update</span>
                    </button>
-                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
+                    <button
                      className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start"
                      onClick={sharedDataAccount}
                      >
                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
                      </svg>
@@ -390,6 +540,6 @@ function Profile () {
      </div>
    </div>
  )
-}
+})
-export default Profile;
+export default Profile
--- a/src/pages/digitalId/Validate.jsx
+++ b/src/pages/digitalId/Validate.jsx
@@ -1,70 +1,17 @@
 import React, { useState } from 'react';
-
+import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ValidateTable from "../../partials/validate/ValidateTable";
 import ValidatePanel from "../../partials/validate/ValidatePanel";
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
 import {Link} from "react-router-dom";
-import User06 from "../../images/user-28-06.jpg";
+import {store} from "../../store/store";
 import User08 from "../../images/user-28-08.jpg";
 import User09 from "../../images/user-28-09.jpg";
 import User05 from "../../images/user-28-05.jpg";
-function Validate () {
+const Validate = observer(() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [validatePanelOpen, setValidatePanelOpen] = useState(true);
  const validateItems = [
    {
      id: '40',
      name: 'Today',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "343"
        },
        {
          size: 24,
          img: User08,
          imgId: "345"
        },
        {
          size: 24,
          img: User09,
          imgId: "321"
        },
        {
          size: 24,
          img: User05,
          imgId: "387"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '555',
          text: 'Second name for',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '534',
          text: 'Gender name for',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '567',
          text: 'Document ID name for',
          checked: true
        },
      ]
    },
  ];
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
@@ -73,7 +20,7 @@ function Validate () {
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
        {/*  Site header */}
        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main>
+        <main className="relative">
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            <div className="w-fit">
            {/* Page header */}
@@ -107,10 +54,10 @@ function Validate () {
                </ul>
              </div>
              <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
-              <div className="pb-8 border-b border-zinc-200 mt-12">
+              <div className="pb-8 border-b border-zinc-200 mt-[50px]">
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
              </div>
-              {validateItems.map(item => {
+              {store.transactionsInfo.map(item => {
                return <ValidateRoadMap season={item} key={item.id}/>
              })}
            </div>
@@ -120,6 +67,6 @@ function Validate () {
      </div>
    </div>
  )
-}
+})
 export default Validate;
--- a/src/pages/digitalId/ValidationLog.jsx
+++ b/src/pages/digitalId/ValidationLog.jsx
@@ -1,115 +1,13 @@
 import React, {useState} from 'react';
-
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
+import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import User05 from "../../images/user-28-05.jpg";
+import {store} from "../../store/store";
 import User08 from "../../images/user-28-08.jpg";
 import User09 from "../../images/user-28-09.jpg";
 import User06 from "../../images/user-28-06.jpg";
 import User03 from "../../images/user-28-03.jpg";
 import User01 from "../../images/user-28-01.jpg";
-function ValidationLog () {
+const ValidationLog = observer(() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const logItems = [
    {
      id: '20',
      name: 'Today',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "249"
        },
        {
          size: 24,
          img: User08,
          imgId: "212"
        },
        {
          size: 24,
          img: User09,
          imgId: "217"
        },
        {
          size: 24,
          img: User05,
          imgId: "276"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '434',
          text: 'Second name',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '476',
          text: 'First name by',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '422',
          text: 'Document name by',
          checked: true
        },
      ]
    },
    {
      id: '30',
      name: 'Last Week',
      data: '7234ABC342342352345',
      usersImges: [
        {
          size: 24,
          img: User06,
          imgId: "145"
        },
        {
          size: 24,
          img: User08,
          imgId: "182"
        },
        {
          size: 24,
          img: User09,
          imgId: "154"
        },
        {
          size: 24,
          img: User05,
          imgId: "114"
        },
      ],
      items: [
        {
          dataSeason: '7234ABC342342352345',
          id: '654',
          text: 'Gender name by',
          checked: true
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '617',
          text: 'Second name Updated',
          checked: false
        },
        {
          dataSeason: '7234ABC342342352345',
          id: '643',
          text: 'Gender name by',
          checked: true
        },
      ]
    },
  ]
  return (
      <div className="flex h-screen overflow-hidden">
        {/* Sidebar */}
@@ -123,67 +21,15 @@ function ValidationLog () {
              {/* Page header */}
              <div className="pb-8 border-b border-zinc-200">
                {/* Title */}
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID transaction log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID transaction log ✨</h1>
              </div>
              {/*Psosts*/}
-              <div className="max-w-3xl m-auto mt-8">
+              <div className="max-w-3xl m-auto mt-6">
                <div className="xl:-translate-x-16 max-w-fit">
                  {/* PostsID */}
-                  {logItems.map(item => {
+                  {store.transactionsInfo.map(item => {
                    return <ValidateRoadMap season={item} key={item.id}/>
                  })}
                  {/* Post */}
                  <article className="pt-6">
                    <div className="xl:flex">
                      <div className="w-32 shrink-0">
                        <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Even earlier</h2>
                      </div>
                      <div className="grow pb-6 border-b border-slate-200">
                        <header>
                          <div className="flex flex-nowrap items-center space-x-2 mb-6">
                            {/* Avatars */}
                            <div className="flex shrink-0 -space-x-3 -ml-px">
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User03} width="28" height="28" alt="User 03" />
                              </a>
                              <a className="block" href="#0">
                                <img className="rounded-full border-2 border-white box-content" src={User01} width="28" height="28" alt="User 01" />
                              </a>
                            </div>
                            <div className="text-slate-400">·</div>
                          </div>
                        </header>
                        {/* List */}
                        <ul className="-my-2">
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Product V1 - Early Access</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                          {/* List item */}
                          <li className="relative py-2">
                            <div className="flex items-center mb-1">
                              <div className="absolute left-0 rounded-full bg-white" aria-hidden="true">
                                <svg className="w-5 h-5 fill-current text-slate-400" viewBox="0 0 20 20">
                                  <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm0 2C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z" />
                                </svg>
                              </div>
                              <h3 className="text-lg font-bold text-slate-800 pl-9">Web3 Compatibility</h3>
                            </div>
                            <div className="pl-9">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </article>
                </div>
              </div>
            </div>
@@ -191,6 +37,6 @@ function ValidationLog () {
        </div>
      </div>
  )
-}
+})
 export default ValidationLog;
--- a/src/pages/digitalId/Verify.jsx
+++ b/src/pages/digitalId/Verify.jsx
@@ -1,83 +1,13 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import {store} from "../../store/store";
 import { observer } from 'mobx-react-lite';
-function Verify () {
+const Verify = observer(() => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [descriptionOpen, setDescriptionOpen] = useState(false);
  const verifiedData = [
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": "Residence",
          "value": "United Kindom",
          "hash1": "7234ABC3423423523457234ABC34234",
          "hash2": "7234ABC3423423523457234ABC34234"
        },
        {
          "name": "Document ID",
          "value": "A1321313",
          "hash1": "7234ABC3423423523457234ABC34234",
          "hash2": "7234ABC3423423523457234ABC34234"
        },
        {
          "name": 'Document ID',
          "value": 'A3451313',
          "hash1": '9584ABC3423423523457234ABC34234',
          "hash2": '9584ABC3423423523457234ABC34234'
        }
      ]
    },
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": 'Residence',
          "value": 'Holland',
          "hash1": '1024ABC3423423523457234ABC34234',
          "hash2": '1024ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'B3451313',
          "hash1": '7893ABC3423423523457234ABC34234',
          "hash2": '7893ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'A3451313',
          "hash1": '7286ABC3423423523457234ABC34234',
          "hash2": '7286ABC3423423523457234ABC34234'
        },
      ]
    },
    {
      "date": "31.05.2022 10:48",
      "fields": [
        {
          "name": 'Residence',
          "value": 'China',
          "hash1": '0000ABC3423423523457234ABC34234',
          "hash2": '0000ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'C3451313',
          "hash1": '1230ABC3423423523457234ABC34234',
          "hash2": '1230ABC3423423523457234ABC34234'
        },
        {
          "name": 'Document ID',
          "value": 'D3451313',
          "hash1": '4483ABC3423423523457234ABC34234',
          "hash2": '4483ABC3423423523457234ABC34234'
        },
      ]
    }
  ];
  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
@@ -112,13 +42,10 @@ function Verify () {
            </div>
            {/* Block */}
            <div className="flex flex-col gap-y-4">
-              {verifiedData.map((item, index) => (
+              {store.sharedData.map((item, index) => (
                <div key={index} className="w-[1095px] pl-5 pr-[13px] pb-8 bg-white border border-slate-200 rounded shadow-[0_4px_6px_-1px_rgba(5,23,42,0.08)]">
                  {/* Header */}
-                  <div className="flex justify-between items-center h-[42px]">
+                  <div className="flex justify-end items-center h-[42px]">
                    <span className="font-normal text-descriptionSize text-slate-500" >
                      Yesterday at {item.date.slice(-5)} AM
                    </span>
                    {/* Buttons */}
                    <div className="flex gap-x-[6px]">
                      <div className="flex items-center">
@@ -133,7 +60,6 @@ function Verify () {
                        <button
                          className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
                          aria-expanded={descriptionOpen}
                            onClick={() => setDescriptionOpen(!descriptionOpen)}
                        >
                          <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                            <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
@@ -144,15 +70,13 @@ function Verify () {
                  </div>
                  {/* Content */}
                  <div className='flex flex-col gap-y-[9px]'>
-                    {item.fields.map((elem, index) => (
+                    {item.data.map((elem, index) => (
                      <div key={index} className='flex gap-y-2'>
                        <div className='flex flex-col'>
                          <div className='flex flex-row items-center'>
-                            <span className='font-semibold text-slate-800 text-base w-[204px]'>{elem.value}</span>
+                            <span className='font-inter font-semibold text-slate-800 text-base w-[204px]'>{elem.label}</span>
-                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash1}</span>
+                            <span className='font-inter truncate font-semibold text-descriptionSize text-slate-600 underline w-[770px]'>{elem.value}</span>
                            <span className='font-semibold text-descriptionSize text-slate-600 underline w-80'>{elem.hash2}</span>
                          </div>
                          <span className='font-normal text-xxs'>{elem.name}</span>
                        </div>
                      </div>
                    ))}
@@ -165,6 +89,6 @@ function Verify () {
      </div>
    </div>
  )
-}
+})
 export default Verify;
--- a/src/partials/Header.jsx
+++ b/src/partials/Header.jsx
@@ -1,8 +1,5 @@
 import React, { useState } from 'react';
 import SearchModal from '../components/ModalSearch';
 import Notifications from '../components/DropdownNotifications';
 import Help from '../components/DropdownHelp';
 import UserMenu from '../components/DropdownProfile';
 function Header({
@@ -39,22 +36,6 @@ function Header({
          {/* Header: Right side */}
          <div className="flex items-center space-x-3">
            <button
              className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ml-3 ${searchModalOpen && 'bg-slate-200'}`}
              onClick={(e) => { e.stopPropagation(); setSearchModalOpen(true); }}
              aria-controls="search-modal"
            >
              <span className="sr-only">Search</span>
              <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                <path className="fill-current text-slate-500" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                <path className="fill-current text-slate-400" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
              </svg>
            </button>
            <SearchModal id="search-modal" searchId="search" modalOpen={searchModalOpen} setModalOpen={setSearchModalOpen} />
            <Notifications align="right" />
            <Help align="right" />
            {/*  Divider */}
            <hr className="w-px h-6 bg-slate-200 mx-3" />
            <UserMenu align="right" />
          </div>
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
@@ -47,10 +47,6 @@ function Sidebar({
    }
  }, [sidebarExpanded]);
  function saveDigitalId () {
    localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
  }
  return (
    <div>
      {/* Sidebar backdrop (mobile only) */}
@@ -85,7 +81,7 @@ function Sidebar({
            </svg>
          </button>
          {/* Logo */}
-          <NavLink end to="/" className="block">
+          <NavLink end to="/digitalId/profile-id" className="block">
            <img alt='logo' src={Logo} width="89" height="32"/>
          </NavLink>
        </div>
@@ -101,101 +97,6 @@ function Sidebar({
              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span>
            </h3>
            <ul className="mt-3">
              {/* Dashboard */}
              <SidebarLinkGroup activecondition={pathname === '/' || pathname.includes('dashboard')}>
                {(handleClick, open) => {
                  return (
                    <React.Fragment>
                      <a
                        href="#0"
                        className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
                          (pathname === '/' || pathname.includes('dashboard')) && 'hover:text-slate-200'
                        }`}
                        onClick={(e) => {
                          e.preventDefault();
                          sidebarExpanded ? handleClick() : setSidebarExpanded(true);
                        }}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                              <path
                                className={`fill-current text-slate-400 ${
                                  (pathname === '/' || pathname.includes('dashboard')) && '!text-indigo-500'
                                }`}
                                d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0z"
                              />
                              <path
                                className={`fill-current text-slate-600 ${(pathname === '/' || pathname.includes('dashboard')) && 'text-indigo-600'}`}
                                d="M12 3c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z"
                              />
                              <path
                                className={`fill-current text-slate-400 ${(pathname === '/' || pathname.includes('dashboard')) && 'text-indigo-200'}`}
                                d="M12 15c-1.654 0-3-1.346-3-3 0-.462.113-.894.3-1.285L6 6l4.714 3.301A2.973 2.973 0 0112 9c1.654 0 3 1.346 3 3s-1.346 3-3 3z"
                              />
                            </svg>
                            <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                              Dashboard
                            </span>
                          </div>
                          {/* Icon */}
                          <div className="flex shrink-0 ml-2">
                            <svg
                              className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
                              viewBox="0 0 12 12"
                            >
                              <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                            </svg>
                          </div>
                        </div>
                      </a>
                      <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Main
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/dashboard/analytics"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Analytics
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/dashboard/fintech"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Fintech
                              </span>
                            </NavLink>
                          </li>
                        </ul>
                      </div>
                    </React.Fragment>
                  );
                }}
              </SidebarLinkGroup>
              {/* digitalId */}
              <SidebarLinkGroup activecondition={pathname.includes('digitalId')}>
                {(handleClick, open) => {
@@ -306,225 +207,6 @@ function Sidebar({
                  );
                }}
              </SidebarLinkGroup>
              {/* Messages */}
              <li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${pathname.includes('messages') && 'bg-slate-900'}`}>
                <NavLink
                  end
                  to="/messages"
                  className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
                    pathname.includes('messages') && 'hover:text-slate-200'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="grow flex items-center">
                      <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                        <path
                          className={`fill-current text-slate-600 ${pathname.includes('messages') && 'text-indigo-500'}`}
                          d="M14.5 7c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V23l-4.108-2.148a10 10 0 01-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C6 10.183 9.805 7 14.5 7z"
                        />
                        <path
                          className={`fill-current text-slate-400 ${pathname.includes('messages') && 'text-indigo-300'}`}
                          d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z"
                        />
                      </svg>
                      <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                        Messages
                      </span>
                    </div>
                    {/* Badge */}
                    <div className="flex flex-shrink-0 ml-2">
                      <span className="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-indigo-500 px-2 rounded">4</span>
                    </div>
                  </div>
                </NavLink>
              </li>
            </ul>
          </div>
          {/* More group */}
          <div>
            <h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
              <span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
                •••
              </span>
              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">More</span>
            </h3>
            <ul className="mt-3">
              {/* Onboarding */}
              <SidebarLinkGroup>
                {(handleClick, open) => {
                  return (
                    <React.Fragment>
                      <a
                        href="#0"
                        className={`block text-slate-200 hover:text-white truncate transition duration-150 ${open && 'hover:text-slate-200'}`}
                        onClick={(e) => {
                          e.preventDefault();
                          sidebarExpanded ? handleClick() : setSidebarExpanded(true);
                        }}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                              <path
                                className="fill-current text-slate-600"
                                d="M19 5h1v14h-2V7.414L5.707 19.707 5 19H4V5h2v11.586L18.293 4.293 19 5Z"
                              />
                              <path
                                className="fill-current text-slate-400"
                                d="M5 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM5 23a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
                              />
                            </svg>
                            <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                              Onboarding
                            </span>
                          </div>
                          {/* Icon */}
                          <div className="flex shrink-0 ml-2">
                            <svg
                              className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
                              viewBox="0 0 12 12"
                            >
                              <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                            </svg>
                          </div>
                        </div>
                      </a>
                      <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
                          <li className="mb-1 last:mb-0">
                            <NavLink end to="/onboarding-1" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Step 1
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink end to="/onboarding-2" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Step 2
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink end to="/onboarding-3" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Step 3
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink end to="/onboarding-4" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Step 4
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Shared Data
                              </span>
                            </NavLink>
                          </li>
                        </ul>
                      </div>
                    </React.Fragment>
                  );
                }}
              </SidebarLinkGroup>
              {/* Components */}
              <SidebarLinkGroup activecondition={pathname.includes('component')}>
                {(handleClick, open) => {
                  return (
                    <React.Fragment>
                      <a
                        href="#0"
                        className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
                          pathname.includes('component') && 'hover:text-slate-200'
                        }`}
                        onClick={(e) => {
                          e.preventDefault();
                          sidebarExpanded ? handleClick() : setSidebarExpanded(true);
                        }}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                              <circle
                                className={`fill-current text-slate-600 ${pathname.includes('component') && 'text-indigo-500'}`}
                                cx="16"
                                cy="8"
                                r="8"
                              />
                              <circle
                                className={`fill-current text-slate-400 ${pathname.includes('component') && 'text-indigo-300'}`}
                                cx="8"
                                cy="16"
                                r="8"
                              />
                            </svg>
                            <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                              Components
                            </span>
                          </div>
                          {/* Icon */}
                          <div className="flex shrink-0 ml-2">
                            <svg
                              className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
                              viewBox="0 0 12 12"
                            >
                              <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                            </svg>
                          </div>
                        </div>
                      </a>
                      <div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
                        <ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/component/button"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Button
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/component/badge"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Badge
                              </span>
                            </NavLink>
                          </li>
                          <li className="mb-1 last:mb-0">
                            <NavLink
                              end
                              to="/component/accordion"
                              className={({ isActive }) =>
                                'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
                              }
                            >
                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
                                Accordion
                              </span>
                            </NavLink>
                          </li>
                        </ul>
                      </div>
                    </React.Fragment>
                  );
                }}
              </SidebarLinkGroup>
            </ul>
          </div>
        </div>
--- a/src/partials/analytics/AnalyticsCard01.jsx
+++ b/src/partials/analytics/AnalyticsCard01.jsx
@@ -1,123 +0,0 @@
 import React from 'react';
 import LineChart from '../../charts/LineChart03';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function AnalyticsCard01() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        label: 'Current',
        data: [
          5000, 8700, 7500, 12000, 11000, 9500, 10500,
          10000, 15000, 9000, 10000, 7000, 22000, 7200,
          9800, 9000, 10000, 8000, 15000, 12000, 11000,
          13000, 11000, 15000, 17000, 18000,
        ],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Gray line
      {
        label: 'Previous',
        data: [
          8000, 5000, 6500, 5000, 6500, 12000, 8000,
          9000, 8000, 8000, 12500, 10000, 10000, 12000,
          11000, 16000, 12000, 10000, 10000, 14000, 9000,
          10000, 15000, 12500, 14000, 11000,
        ],
        borderColor: tailwindConfig().theme.colors.slate[300],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Analytics</h2>
      </header>
      <div className="px-5 py-1">
        <div className="flex flex-wrap">
          {/* Unique Visitors */}
          <div className="flex items-center py-2">
            <div className="mr-5">
              <div className="flex items-center">
                <div className="text-3xl font-bold text-slate-800 mr-2">24.7K</div>
                <div className="text-sm font-medium text-emerald-500">+49%</div>
              </div>
              <div className="text-sm text-slate-500">Unique Visitors</div>
            </div>
            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
          </div>
          {/* Total Pageviews */}
          <div className="flex items-center py-2">
            <div className="mr-5">
              <div className="flex items-center">
                <div className="text-3xl font-bold text-slate-800 mr-2">56.9K</div>
                <div className="text-sm font-medium text-emerald-500">+7%</div>
              </div>
              <div className="text-sm text-slate-500">Total Pageviews</div>
            </div>
            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
          </div>
          {/* Bounce Rate */}
          <div className="flex items-center py-2">
            <div className="mr-5">
              <div className="flex items-center">
                <div className="text-3xl font-bold text-slate-800 mr-2">54%</div>
                <div className="text-sm font-medium text-amber-500">-7%</div>
              </div>
              <div className="text-sm text-slate-500">Bounce Rate</div>
            </div>
            <div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
          </div>
          {/* Visit Duration*/}
          <div className="flex items-center">
            <div>
              <div className="flex items-center">
                <div className="text-3xl font-bold text-slate-800 mr-2">2m 56s</div>
                <div className="text-sm font-medium text-amber-500">+7%</div>
              </div>
              <div className="text-sm text-slate-500">Visit Duration</div>
            </div>
          </div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        {/* Change the height attribute to adjust the chart height */}
        <LineChart data={chartData} width={800} height={300} />
      </div>
    </div>
  );
 }
 export default AnalyticsCard01;
--- a/src/partials/analytics/AnalyticsCard02.jsx
+++ b/src/partials/analytics/AnalyticsCard02.jsx
@@ -1,139 +0,0 @@
 import React from 'react';
 import LineChart from '../../charts/LineChart04';
 import { Link } from 'react-router-dom';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function AnalyticsCard02() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        data: [
          732, 610, 610, 504, 504, 504, 349,
          349, 504, 342, 504, 610, 391, 192,
          154, 273, 191, 191, 126, 263, 349,
          252, 423, 622, 470, 532,
        ],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Active Users Right Now</h2>
      </header>
      {/* Card content */}
      <div className="flex flex-col h-full">
        {/* Live visitors number */}
        <div className="px-5 py-3">
          <div className="flex items-center">
            {/* Red dot */}
            <div className="relative flex items-center justify-center w-4 h-4 rounded-full bg-rose-100 mr-3" aria-hidden="true">
              <div className="absolute w-1.5 h-1.5 rounded-full bg-rose-500"></div>
            </div>
            {/* Vistors number */}
            <div>
              <div className="text-3xl font-bold text-slate-800 mr-2">347</div>
              <div className="text-sm text-slate-500">Live visitors</div>
            </div>
          </div>
        </div>
        {/* Chart built with Chart.js 3 */}
        <div >
          {/* Change the height attribute to adjust the chart height */}
          <LineChart data={chartData} width={389} height={70} />
        </div>
        {/* Table */}
        <div className="grow px-5 pt-3 pb-1">
          <div className="overflow-x-auto">
            <table className="table-auto w-full">
              {/* Table header */}
              <thead className="text-xs uppercase text-slate-400">
                <tr>
                  <th className="py-2">
                    <div className="font-semibold text-left">Top pages</div>
                  </th>
                  <th className="py-2">
                    <div className="font-semibold text-right">Active users</div>
                  </th>
                </tr>
              </thead>
              {/* Table body */}
              <tbody className="text-sm divide-y divide-slate-100">
                {/* Row */}
                <tr>
                  <td className="py-2">
                    <div className="text-left">preview.cruip.com/open-pro/</div>
                  </td>
                  <td className="py-2">
                    <div className="font-medium text-right text-slate-800">94</div>
                  </td>
                </tr>
                {/* Row */}
                <tr>
                  <td className="py-2">
                    <div className="text-left">preview.cruip.com/simple/</div>
                  </td>
                  <td className="py-2">
                    <div className="font-medium text-right text-slate-800">42</div>
                  </td>
                </tr>
                {/* Row */}
                <tr>
                  <td className="py-2">
                    <div className="text-left">cruip.com/unlimited/</div>
                  </td>
                  <td className="py-2">
                    <div className="font-medium text-right text-slate-800">12</div>
                  </td>
                </tr>
                {/* Row */}
                <tr>
                  <td className="py-2">
                    <div className="text-left">preview.cruip.com/twist/</div>
                  </td>
                  <td className="py-2">
                    <div className="font-medium text-right text-slate-800">4</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        {/* Card footer */}
        <div className="text-right px-5 pb-4">
          <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Real-Time Report -&gt;</Link>
        </div>
      </div>
    </div>
  );
 }
 export default AnalyticsCard02;
--- a/src/partials/analytics/AnalyticsCard03.jsx
+++ b/src/partials/analytics/AnalyticsCard03.jsx
@@ -1,74 +0,0 @@
 import React from 'react';
 import BarChart from '../../charts/BarChart03';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function AnalyticsCard03() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
    ],
    datasets: [
      // Stack
      {
        label: 'Direct',
        data: [
          5000, 4000, 4000, 3800, 5200, 5100,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[700],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[800],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Stack
      {
        label: 'Referral',
        data: [
          2500, 2600, 4000, 4000, 4800, 3500,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Stack
      {
        label: 'Organic Search',
        data: [
          2300, 2000, 3100, 2700, 1300, 2600,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[300],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[400],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Stack
      {
        label: 'Social',
        data: [
          4800, 4200, 4800, 1800, 3300, 3500,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[100],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[200],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Acquisition Channels</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <BarChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default AnalyticsCard03;
--- a/src/partials/analytics/AnalyticsCard04.jsx
+++ b/src/partials/analytics/AnalyticsCard04.jsx
@@ -1,49 +0,0 @@
 import React from 'react';
 import BarChart from '../../charts/BarChart04';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function AnalyticsCard04() {
  const chartData = {
    labels: [
      '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021',
    ],
    datasets: [
      // Blue bars
      {
        label: 'New Visitors',
        data: [
          8000, 3800, 5350, 7800,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        categoryPercentage: 0.66,
      },
      // Light blue bars
      {
        label: 'Returning Visitors',
        data: [
          4000, 6500, 2200, 5800,
        ],
        backgroundColor: tailwindConfig().theme.colors.sky[400],
        hoverBackgroundColor: tailwindConfig().theme.colors.sky[500],
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Audience Overview</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <BarChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default AnalyticsCard04;
--- a/src/partials/analytics/AnalyticsCard05.jsx
+++ b/src/partials/analytics/AnalyticsCard05.jsx
@@ -1,96 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function AnalyticsCard05() {
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Channels</h2>
      </header>
      <div className="grow p-3">
        <div className="flex flex-col h-full">
          {/* Card content */}
          <div className="grow">
            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
              <li>Source</li>
              <li>Visitors</li>
            </ul>
            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '82%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Google</div>
                  <div className="font-medium">4.7K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '70%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Indiehackers.com</div>
                  <div className="font-medium">4.2K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '60%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>DuckDuckGo</div>
                  <div className="font-medium">3.4K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '44%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Hacker News</div>
                  <div className="font-medium">3.1K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '40%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Github.com</div>
                  <div className="font-medium">2.2K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '30%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Madewithvuejs.com</div>
                  <div className="font-medium">1.7K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '22%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Producthunt.com</div>
                  <div className="font-medium">924</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '12%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>Dev.to</div>
                  <div className="font-medium">696</div>
                </div>
              </li>
            </ul>
          </div>
          {/* Card footer */}
          <div className="text-center pt-4 pb-1 border-t border-slate-100">
            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Channels Report -&gt;</Link>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default AnalyticsCard05;
--- a/src/partials/analytics/AnalyticsCard06.jsx
+++ b/src/partials/analytics/AnalyticsCard06.jsx
@@ -1,96 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function AnalyticsCard06() {
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Pages</h2>
      </header>
      <div className="grow p-3">
        <div className="flex flex-col h-full">
          {/* Card content */}
          <div className="grow">
            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
              <li>Source</li>
              <li>Pageviews</li>
            </ul>
            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '82%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>cruip.com/</div>
                  <div className="font-medium">28K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '70%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>preview.cruip.com/open-pro/</div>
                  <div className="font-medium">12K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '60%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>preview.cruip.com/appy/</div>
                  <div className="font-medium">9.7K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '44%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>cruip.com/unlimited/</div>
                  <div className="font-medium">9.2K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '40%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>preview.cruip.com/simple/</div>
                  <div className="font-medium">7K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '30%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>cruip.com/about-us/</div>
                  <div className="font-medium">6.4K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '22%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>docs.cruip.com/</div>
                  <div className="font-medium">5.4K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '12%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>preview.cruip.com/twist/</div>
                  <div className="font-medium">2.2K</div>
                </div>
              </li>
            </ul>
          </div>
          {/* Card footer */}
          <div className="text-center pt-4 pb-1 border-t border-slate-100">
            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Page Report -&gt;</Link>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default AnalyticsCard06;
--- a/src/partials/analytics/AnalyticsCard07.jsx
+++ b/src/partials/analytics/AnalyticsCard07.jsx
@@ -1,96 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 function AnalyticsCard07() {
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Countries</h2>
      </header>
      <div className="grow p-3">
        <div className="flex flex-col h-full">
          {/* Card content */}
          <div className="grow">
            <ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
              <li>Source</li>
              <li>Sessions</li>
            </ul>
            <ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '82%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇨🇮 Ireland</div>
                  <div className="font-medium">4.2K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '70%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇺🇸 United States</div>
                  <div className="font-medium">3.4K</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '60%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇩🇪 Germany</div>
                  <div className="font-medium">1.6k</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '44%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇮🇹 Italy</div>
                  <div className="font-medium">1.2k</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '40%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇬🇧 United Kingdom</div>
                  <div className="font-medium">912</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '30%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇫🇷 France</div>
                  <div className="font-medium">677</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '22%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇮🇳 India</div>
                  <div className="font-medium">449</div>
                </div>
              </li>
              {/* Item */}
              <li className="relative px-2 py-1">
                <div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '12%'}}></div>
                <div className="relative flex justify-between space-x-2">
                  <div>🇸🇬 Singapore</div>
                  <div className="font-medium">269</div>
                </div>
              </li>
            </ul>
          </div>
          {/* Card footer */}
          <div className="text-center pt-4 pb-1 border-t border-slate-100">
            <Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Countries Report -&gt;</Link>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default AnalyticsCard07;
--- a/src/partials/analytics/AnalyticsCard08.jsx
+++ b/src/partials/analytics/AnalyticsCard08.jsx
@@ -1,44 +0,0 @@
 import React from 'react';
 import DoughnutChart from '../../charts/DoughnutChart';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function AnalyticsCard08() {
  const chartData = {
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [
      {
        label: 'Sessions By Device',
        data: [
          12, 50, 38,
        ],
        backgroundColor: [
          tailwindConfig().theme.colors.indigo[500],
          tailwindConfig().theme.colors.sky[400],
          tailwindConfig().theme.colors.indigo[800],
        ],
        hoverBackgroundColor: [
          tailwindConfig().theme.colors.indigo[600],
          tailwindConfig().theme.colors.sky[500],
          tailwindConfig().theme.colors.indigo[900],
        ],
        hoverBorderColor: tailwindConfig().theme.colors.white,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Sessions By Device</h2>
      </header>
        {/* Chart built with Chart.js 3 */}
        {/* Change the height attribute to adjust the chart height */}
      <DoughnutChart data={chartData} width={389} height={260} />
    </div>
  );
 }
 export default AnalyticsCard08;
--- a/src/partials/analytics/AnalyticsCard09.jsx
+++ b/src/partials/analytics/AnalyticsCard09.jsx
@@ -1,46 +0,0 @@
 import React from 'react';
 import DoughnutChart from '../../charts/DoughnutChart';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function AnalyticsCard09() {
  const chartData = {
    labels: ['<18', '18-24', '24-36', '>35'],
    datasets: [
      {
        label: 'Visit By Age Category',
        data: [
          30, 50, 5, 15,
        ],
        backgroundColor: [
          tailwindConfig().theme.colors.indigo[500],
          tailwindConfig().theme.colors.sky[400],
          tailwindConfig().theme.colors.rose[500],
          tailwindConfig().theme.colors.emerald[500],
        ],
        hoverBackgroundColor: [
          tailwindConfig().theme.colors.indigo[600],
          tailwindConfig().theme.colors.sky[500],
          tailwindConfig().theme.colors.rose[600],
          tailwindConfig().theme.colors.emerald[600],
        ],
        hoverBorderColor: tailwindConfig().theme.colors.white,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Sessions By Age</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <DoughnutChart data={chartData} width={389} height={260} />
    </div>
  );
 }
 export default AnalyticsCard09;
--- a/src/partials/analytics/AnalyticsCard10.jsx
+++ b/src/partials/analytics/AnalyticsCard10.jsx
@@ -1,44 +0,0 @@
 import React from 'react';
 import PolarChart from '../../charts/PolarChart';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function AnalyticsCard10() {
  const chartData = {
    labels: ['Males', 'Females', 'Unknown'],
    datasets: [
      {
        label: 'Sessions By Gender',
        data: [
          500, 326, 242,
        ],
        backgroundColor: [
          `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[500])}, 0.8)`,
          `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[400])}, 0.8)`,
          `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.8)`,
        ],
        hoverBackgroundColor: [
          `rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[600])}, 0.8)`,
          `rgba(${hexToRGB(tailwindConfig().theme.colors.sky[500])}, 0.8)`,
          `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[600])}, 0.8)`,
        ],
        hoverBorderColor: tailwindConfig().theme.colors.white,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Sessions By Gender</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <PolarChart data={chartData} width={389} height={260} />
    </div>
  );
 }
 export default AnalyticsCard10;
--- a/src/partials/analytics/AnalyticsCard11.jsx
+++ b/src/partials/analytics/AnalyticsCard11.jsx
@@ -1,280 +0,0 @@
 import React from 'react';
 import Image01 from '../../images/user-28-01.jpg';
 import Image02 from '../../images/user-28-02.jpg';
 import Image03 from '../../images/user-28-03.jpg';
 import Image04 from '../../images/user-28-04.jpg';
 import Image05 from '../../images/user-28-05.jpg';
 import Image06 from '../../images/user-28-06.jpg';
 import Image07 from '../../images/user-28-07.jpg';
 import Image09 from '../../images/user-28-09.jpg';
 import Image11 from '../../images/user-28-11.jpg';
 function AnalyticsCard11() {
  return (
    <div className="col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Products</h2>
      </header>
      <div className="p-3">
        {/* Table */}
        <div className="overflow-x-auto">
          <table className="table-auto w-full">
            {/* Table header */}
            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
              <tr>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Product</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Created by</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Category</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-center">Total impressions</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-center">Top country</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-center">CR</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Value</div>
                </th>
              </tr>
            </thead>
            {/* Table body */}
            <tbody className="text-sm divide-y divide-slate-100">
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
                      </svg>
                    </div>
                    <div className="font-medium text-slate-800">Form Builder CP</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image01} width="28" height="28" alt="User 01" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image02} width="28" height="28" alt="User 02" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image03} width="28" height="28" alt="User 03" />
                    </a>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
                    </svg>
                    <div>Subscription</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">20,929</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-lg text-center">🇺🇸</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">27.4%</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left font-medium text-emerald-500">$12,499.77</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-emerald-500">
                      <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
                        <path d="M11 22.012a1 1 0 01-.707-1.707l4.5-4.5a1 1 0 011.414 0l3.293 3.293 4.793-4.793a1 1 0 111.414 1.414l-5.5 5.5a1 1 0 01-1.414 0L15.5 17.926l-3.793 3.793a1 1 0 01-.707.293z" />
                      </svg>
                    </div>
                    <div className="font-medium text-slate-800">Machine Learning A-Z</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image07} width="28" height="28" alt="User 07" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image04} width="28" height="28" alt="User 04" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
                    </a>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
                    </svg>
                    <div>Subscription</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">17,944</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-lg text-center">🇬🇧</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">22.6%</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left font-medium text-emerald-500">$4,227.09</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                        <path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
                      </svg>
                    </div>
                    <div className="font-medium text-slate-800">2021 Web Bootcamp</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image05} width="28" height="28" alt="User 05" />
                    </a>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
                    </svg>
                    <div>Subscription</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">16,097</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-lg text-center">🇫🇷</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">22.4%</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left font-medium text-emerald-500">$2,499.77</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-sky-500">
                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                        <path d="M18 26a8 8 0 118-8 8.009 8.009 0 01-8 8zm0-14a6 6 0 100 12 6 6 0 000-12z" />
                      </svg>
                    </div>
                    <div className="font-medium text-slate-800">Digital Marketing Course</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image06} width="28" height="28" alt="User 06" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
                    </a>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
                    </svg>
                    <div>Subscription</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">12,996</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-lg text-center">🇮🇹</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">22.1%</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left font-medium text-emerald-500">$2,224.09</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-rose-500">
                      <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                        <circle cx="18" cy="18" r="3" />
                        <path d="M13.05 24.363l-.707-.707a8 8 0 010-11.312l.707-.707 1.414 1.414-.707.707a6 6 0 000 8.484l.707.707-1.414 1.414zM22.95 24.363l-1.414-1.414.707-.707a6 6 0 000-8.484l-.707-.707 1.414-1.414.707.707a8 8 0 010 11.312l-.707.707z" />
                      </svg>
                    </div>
                    <div className="font-medium text-slate-800">Form Builder PRO</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex shrink-0 -space-x-3 -ml-px">
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image09} width="28" height="28" alt="User 09" />
                    </a>
                    <a className="block" href="#0">
                      <img className="rounded-full border-2 border-white box-content" src={Image01} width="28" height="28" alt="User 01" />
                    </a>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="flex items-center">
                    <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
                      <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
                    </svg>
                    <div>Subscription</div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">7,097</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-lg text-center">🇩🇪</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-center">17.4%</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left font-medium text-emerald-500">$1,949.72</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
 }
 export default AnalyticsCard11;
--- a/src/partials/dashboard/DashboardAvatars.jsx
+++ b/src/partials/dashboard/DashboardAvatars.jsx
@@ -1,43 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import User01 from '../../images/user-36-01.jpg';
 import User02 from '../../images/user-36-02.jpg';
 import User03 from '../../images/user-36-03.jpg';
 import User04 from '../../images/user-36-04.jpg';
 function DashboardAvatars() {
  return (
    <ul className="flex flex-wrap justify-center sm:justify-start mb-8 sm:mb-0 -space-x-3 -ml-px">
      <li>
        <Link className="block" to="#0">
          <img className="w-9 h-9 rounded-full" src={User01} width="36" height="36" alt="User 01" />
        </Link>
      </li>
      <li>
        <Link className="block" to="#0">
          <img className="w-9 h-9 rounded-full" src={User02} width="36" height="36" alt="User 02" />
        </Link>
      </li>
      <li>
        <Link className="block" to="#0">
          <img className="w-9 h-9 rounded-full" src={User03} width="36" height="36" alt="User 03" />
        </Link>
      </li>
      <li>
        <Link className="block" to="#0">
          <img className="w-9 h-9 rounded-full" src={User04} width="36" height="36" alt="User 04" />
        </Link>
      </li>
      <li>
        <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150 ml-2">
          <span className="sr-only">Add new user</span>
          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
            <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
          </svg>
        </button>
      </li>
    </ul>
  );
 }
 export default DashboardAvatars;
--- a/src/partials/dashboard/DashboardCard01.jsx
+++ b/src/partials/dashboard/DashboardCard01.jsx
@@ -1,97 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import LineChart from '../../charts/LineChart01';
 import Icon from '../../images/icon-01.svg';
 import EditMenu from '../../components/DropdownEditMenu';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function DashboardCard01() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        data: [
          732, 610, 610, 504, 504, 504, 349,
          349, 504, 342, 504, 610, 391, 192,
          154, 273, 191, 191, 126, 263, 349,
          252, 423, 622, 470, 532,
        ],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Gray line
      {
        data: [
          532, 532, 532, 404, 404, 314, 314,
          314, 314, 314, 234, 314, 234, 234,
          314, 314, 314, 388, 314, 202, 202,
          202, 202, 314, 720, 642,
        ],
        borderColor: tailwindConfig().theme.colors.slate[300],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <div className="px-5 pt-5">
        <header className="flex justify-between items-start mb-2">
          {/* Icon */}
          <img src={Icon} width="32" height="32" alt="Icon 01" />
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
            </li>
          </EditMenu>
        </header>
        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Plus</h2>
        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
        <div className="flex items-start">
          <div className="text-3xl font-bold text-slate-800 mr-2">$24,780</div>
          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        {/* Change the height attribute to adjust the chart height */}
        <LineChart data={chartData} width={389} height={128} />
      </div>
    </div>
  );
 }
 export default DashboardCard01;
--- a/src/partials/dashboard/DashboardCard02.jsx
+++ b/src/partials/dashboard/DashboardCard02.jsx
@@ -1,97 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import LineChart from '../../charts/LineChart01';
 import Icon from '../../images/icon-02.svg';
 import EditMenu from '../../components/DropdownEditMenu';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function DashboardCard02() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        data: [
          622, 622, 426, 471, 365, 365, 238,
          324, 288, 206, 324, 324, 500, 409,
          409, 273, 232, 273, 500, 570, 767,
          808, 685, 767, 685, 685,
        ],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Gray line
      {
        data: [
          732, 610, 610, 504, 504, 504, 349,
          349, 504, 342, 504, 610, 391, 192,
          154, 273, 191, 191, 126, 263, 349,
          252, 423, 622, 470, 532,
        ],
        borderColor: tailwindConfig().theme.colors.slate[300],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <div className="px-5 pt-5">
        <header className="flex justify-between items-start mb-2">
          {/* Icon */}
          <img src={Icon} width="32" height="32" alt="Icon 02" />
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
            </li>
          </EditMenu>
        </header>
        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Advanced</h2>
        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
        <div className="flex items-start">
          <div className="text-3xl font-bold text-slate-800 mr-2">$17,489</div>
          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-14%</div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        {/* Change the height attribute to adjust the chart height */}
        <LineChart data={chartData} width={389} height={128} />
      </div>
    </div>
  );
 }
 export default DashboardCard02;
--- a/src/partials/dashboard/DashboardCard03.jsx
+++ b/src/partials/dashboard/DashboardCard03.jsx
@@ -1,97 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import LineChart from '../../charts/LineChart01';
 import Icon from '../../images/icon-03.svg';
 import EditMenu from '../../components/DropdownEditMenu';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function DashboardCard03() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        data: [
          540, 466, 540, 466, 385, 432, 334,
          334, 289, 289, 200, 289, 222, 289,
          289, 403, 554, 304, 289, 270, 134,
          270, 829, 344, 388, 364,
        ],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Gray line
      {
        data: [
          689, 562, 477, 477, 477, 477, 458,
          314, 430, 378, 430, 498, 642, 350,
          145, 145, 354, 260, 188, 188, 300,
          300, 282, 364, 660, 554,
        ],
        borderColor: tailwindConfig().theme.colors.slate[300],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <div className="px-5 pt-5">
        <header className="flex justify-between items-start mb-2">
          {/* Icon */}
          <img src={Icon} width="32" height="32" alt="Icon 03" />
          {/* Menu button */}
          <EditMenu align="right" className="relative inline-flex">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
            </li>
          </EditMenu>
        </header>
        <h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Professional</h2>
        <div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
        <div className="flex items-start">
          <div className="text-3xl font-bold text-slate-800 mr-2">$9,962</div>
          <div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        {/* Change the height attribute to adjust the chart height */}
        <LineChart data={chartData} width={389} height={128} />
      </div>
    </div>
  );
 }
 export default DashboardCard03;
--- a/src/partials/dashboard/DashboardCard04.jsx
+++ b/src/partials/dashboard/DashboardCard04.jsx
@@ -1,52 +0,0 @@
 import React from 'react';
 import BarChart from '../../charts/BarChart01';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function DashboardCard04() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
    ],
    datasets: [
      // Light blue bars
      {
        label: 'Direct',
        data: [
          800, 1600, 900, 1300, 1950, 1700,
        ],
        backgroundColor: tailwindConfig().theme.colors.blue[400],
        hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Blue bars
      {
        label: 'Indirect',
        data: [
          4900, 2600, 5350, 4800, 5200, 4800,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Direct VS Indirect</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <BarChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default DashboardCard04;
--- a/src/partials/dashboard/DashboardCard05.jsx
+++ b/src/partials/dashboard/DashboardCard05.jsx
@@ -1,100 +0,0 @@
 import React, { useState, useEffect } from 'react';
 import Tooltip from '../../components/Tooltip';
 import RealtimeChart from '../../charts/RealtimeChart';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function DashboardCard05() {
  // IMPORTANT:
  // Code below is for demo purpose only, and it's not covered by support.
  // If you need to replace dummy data with real data,
  // refer to Chart.js documentation: https://www.chartjs.org/docs/latest
  // Fake real-time data
  const [counter, setCounter] = useState(0);
  const [increment, setIncrement] = useState(0);
  const [range, setRange] = useState(35);
  // Dummy data to be looped
  const data = [
    57.81, 57.75, 55.48, 54.28, 53.14, 52.25, 51.04, 52.49, 55.49, 56.87,
    53.73, 56.42, 58.06, 55.62, 58.16, 55.22, 58.67, 60.18, 61.31, 63.25,
    65.91, 64.44, 65.97, 62.27, 60.96, 59.34, 55.07, 59.85, 53.79, 51.92,
    50.95, 49.65, 48.09, 49.81, 47.85, 49.52, 50.21, 52.22, 54.42, 53.42,
    50.91, 58.52, 53.37, 57.58, 59.09, 59.36, 58.71, 59.42, 55.93, 57.71,
    50.62, 56.28, 57.37, 53.08, 55.94, 55.82, 53.94, 52.65, 50.25,
  ];
  const [slicedData, setSlicedData] = useState(data.slice(0, range));
  // Generate fake dates from now to back in time
  const generateDates = () => {
    const now = new Date();
    const dates = [];
    data.forEach((v, i) => {
      dates.push(new Date(now - 2000 - i * 2000));
    });
    return dates;
  };
  const [slicedLabels, setSlicedLabels] = useState(generateDates().slice(0, range).reverse());
  // Fake update every 2 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCounter(counter + 1);
    }, 2000);
    return () => clearInterval(interval)
  }, [counter]);
  // Loop through data array and update
  useEffect(() => {
    setIncrement(increment + 1);
    if (increment + range < data.length) {
      setSlicedData(([x, ...slicedData]) => [...slicedData, data[increment + range]]);
    } else {
      setIncrement(0);
      setRange(0);
    }
    setSlicedLabels(([x, ...slicedLabels]) => [...slicedLabels, new Date()]);
    return () => setIncrement(0)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [counter]);
  const chartData = {
    labels: slicedLabels,
    datasets: [
      // Indigo line
      {
        data: slicedData,
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderColor: tailwindConfig().theme.colors.indigo[500],
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Real Time Value</h2>
        <Tooltip className="ml-2">
          <div className="text-xs text-center whitespace-nowrap">Built with <a className="underline" href="https://www.chartjs.org/" target="_blank" rel="noreferrer">Chart.js</a></div>
        </Tooltip>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <RealtimeChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default DashboardCard05;
--- a/src/partials/dashboard/DashboardCard06.jsx
+++ b/src/partials/dashboard/DashboardCard06.jsx
@@ -1,44 +0,0 @@
 import React from 'react';
 import DoughnutChart from '../../charts/DoughnutChart';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function DashboardCard06() {
  const chartData = {
    labels: ['United States', 'Italy', 'Other'],
    datasets: [
      {
        label: 'Top Countries',
        data: [
          35, 30, 35,
        ],
        backgroundColor: [
          tailwindConfig().theme.colors.indigo[500],
          tailwindConfig().theme.colors.blue[400],
          tailwindConfig().theme.colors.indigo[800],
        ],
        hoverBackgroundColor: [
          tailwindConfig().theme.colors.indigo[600],
          tailwindConfig().theme.colors.blue[500],
          tailwindConfig().theme.colors.indigo[900],
        ],
        hoverBorderColor: tailwindConfig().theme.colors.white,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Countries</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <DoughnutChart data={chartData} width={389} height={260} />
    </div>
  );
 }
 export default DashboardCard06;
--- a/src/partials/dashboard/DashboardCard07.jsx
+++ b/src/partials/dashboard/DashboardCard07.jsx
@@ -1,165 +0,0 @@
 import React from 'react';
 function DashboardCard07() {
  return (
    <div className="col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Top Channels</h2>
      </header>
      <div className="p-3">
        {/* Table */}
        <div className="overflow-x-auto">
          <table className="table-auto w-full">
            {/* Table header */}
            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
              <tr>
                <th className="p-2">
                  <div className="font-semibold text-left">Source</div>
                </th>
                <th className="p-2">
                  <div className="font-semibold text-center">Visitors</div>
                </th>
                <th className="p-2">
                  <div className="font-semibold text-center">Revenues</div>
                </th>
                <th className="p-2">
                  <div className="font-semibold text-center">Sales</div>
                </th>
                <th className="p-2">
                  <div className="font-semibold text-center">Conversion</div>
                </th>
              </tr>
            </thead>
            {/* Table body */}
            <tbody className="text-sm font-medium divide-y divide-slate-100">
              {/* Row */}
              <tr>
                <td className="p-2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#24292E" cx="18" cy="18" r="18" />
                      <path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
                    </svg>
                    <div className="text-slate-800">Github.com</div>
                  </div>
                </td>
                <td className="p-2">
                  <div className="text-center">2.4K</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-emerald-500">$3,877</div>
                </td>
                <td className="p-2">
                  <div className="text-center">267</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-sky-500">4.7%</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
                      <path d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" fill="#FFF" fillRule="nonzero" />
                    </svg>
                    <div className="text-slate-800">Twitter</div>
                  </div>
                </td>
                <td className="p-2">
                  <div className="text-center">2.2K</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-emerald-500">$3,426</div>
                </td>
                <td className="p-2">
                  <div className="text-center">249</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-sky-500">4.4%</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#EA4335" cx="18" cy="18" r="18" />
                      <path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fillRule="nonzero" />
                    </svg>
                    <div className="text-slate-800">Google (organic)</div>
                  </div>
                </td>
                <td className="p-2">
                  <div className="text-center">2.0K</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-emerald-500">$2,444</div>
                </td>
                <td className="p-2">
                  <div className="text-center">224</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-sky-500">4.2%</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#4BC9FF" cx="18" cy="18" r="18" />
                      <path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fillRule="nonzero" />
                    </svg>
                    <div className="text-slate-800">Vimeo.com</div>
                  </div>
                </td>
                <td className="p-2">
                  <div className="text-center">1.9K</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-emerald-500">$2,236</div>
                </td>
                <td className="p-2">
                  <div className="text-center">220</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-sky-500">4.2%</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#0E2439" cx="18" cy="18" r="18" />
                      <path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
                    </svg>
                    <div className="text-slate-800">Indiehackers.com</div>
                  </div>
                </td>
                <td className="p-2">
                  <div className="text-center">1.7K</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-emerald-500">$2,034</div>
                </td>
                <td className="p-2">
                  <div className="text-center">204</div>
                </td>
                <td className="p-2">
                  <div className="text-center text-sky-500">3.9%</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
 }
 export default DashboardCard07;
--- a/src/partials/dashboard/DashboardCard08.jsx
+++ b/src/partials/dashboard/DashboardCard08.jsx
@@ -1,91 +0,0 @@
 import React from 'react';
 import LineChart from '../../charts/LineChart02';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function DashboardCard08() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023',
    ],
    datasets: [
      // Indigo line
      {
        label: 'Current',
        data: [
          73, 64, 73, 69, 104, 104, 164,
          164, 120, 120, 120, 148, 142, 104,
          122, 110, 104, 152, 166, 233, 268,
          252, 284, 284, 333, 323,
        ],
        borderColor: tailwindConfig().theme.colors.indigo[500],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Blue line
      {
        label: 'Previous',
        data: [
          184, 86, 42, 378, 42, 243, 38,
          120, 0, 0, 42, 0, 84, 0,
          276, 0, 124, 42, 124, 88, 88,
          215, 156, 88, 124, 64,
        ],
        borderColor: tailwindConfig().theme.colors.blue[400],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.blue[400],
        clip: 20,
      },
      // emerald line
      {
        label: 'Average',
        data: [
          122, 170, 192, 86, 102, 124, 115,
          115, 56, 104, 0, 72, 208, 186,
          223, 188, 114, 162, 200, 150, 118,
          118, 76, 122, 230, 268,
        ],
        borderColor: tailwindConfig().theme.colors.emerald[500],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Sales Over Time (all stores)</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <LineChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default DashboardCard08;
--- a/src/partials/dashboard/DashboardCard09.jsx
+++ b/src/partials/dashboard/DashboardCard09.jsx
@@ -1,64 +0,0 @@
 import React from 'react';
 import Tooltip from '../../components/Tooltip';
 import BarChart from '../../charts/BarChart02';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function DashboardCard09() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
    ],
    datasets: [
      // Light blue bars
      {
        label: 'Stack 1',
        data: [
          6200, 9200, 6600, 8800, 5200, 9200,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Blue bars
      {
        label: 'Stack 2',
        data: [
          -4000, -2600, -5350, -4000, -7500, -2000,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[200],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[300],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Sales VS Refunds</h2>
        <Tooltip className="ml-2" size="lg">
          <div className="text-sm">Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</div>
        </Tooltip>
      </header>
      <div className="px-5 py-3">
        <div className="flex items-start">
          <div className="text-3xl font-bold text-slate-800 mr-2">+$6,796</div>
          <div className="text-sm font-semibold text-white px-1.5 bg-amber-500 rounded-full">-34%</div>
        </div>
      </div>
      {/* Chart built with Chart.js 3 */}
      <div className="grow">
        {/* Change the height attribute to adjust the chart height */}
        <BarChart data={chartData} width={595} height={248} />
      </div>
    </div>
  );
 }
 export default DashboardCard09;
--- a/src/partials/dashboard/DashboardCard10.jsx
+++ b/src/partials/dashboard/DashboardCard10.jsx
@@ -1,110 +0,0 @@
 import React from 'react';
 function DashboardCard10() {
  return (
    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Recent Activity</h2>
      </header>
      <div className="p-3">
        {/* Card content */}
        {/* "Today" group */}
        <div>
          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
          <ul className="my-1">
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                  <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a> mentioned <a className="font-medium text-slate-800" href="#0">Sara Smith</a> in a new post</div>
                  <div className="shrink-0 self-end ml-2">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
                  <path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was removed by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
                  <div className="shrink-0 self-end ml-2">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
                  <path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
                </svg>
              </div>
              <div className="grow flex items-center text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Patrick Sullivan</a> published a new <a className="font-medium text-slate-800" href="#0">post</a></div>
                  <div className="shrink-0 self-end ml-2">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        {/* "Yesterday" group */}
        <div>
          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Yesterday</header>
          <ul className="my-1">
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-sky-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
                  <path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">240+</a> users have subscribed to <a className="font-medium text-slate-800" href="#0">Newsletter #1</a></div>
                  <div className="shrink-0 self-end ml-2">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                  <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
                </svg>
              </div>
              <div className="grow flex items-center text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center">The post <a className="font-medium text-slate-800" href="#0">Post Name</a> was suspended by <a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Nick Mark</a></div>
                  <div className="shrink-0 self-end ml-2">
                    <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span className="hidden sm:inline"> -&gt;</span></a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
 }
 export default DashboardCard10;
--- a/src/partials/dashboard/DashboardCard11.jsx
+++ b/src/partials/dashboard/DashboardCard11.jsx
@@ -1,120 +0,0 @@
 import React from 'react';
 function DashboardCard11() {
  return (
    <div className="col-span-full xl:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Income/Expenses</h2>
      </header>
      <div className="p-3">
        {/* Card content */}
        {/* "Today" group */}
        <div>
          <header className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm font-semibold p-2">Today</header>
          <ul className="my-1">
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Qonto</a> billing</div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-slate-800">-$49.88</span>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-emerald-500">+249.88</span>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Notion Labs Inc</a></div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-emerald-500">+99.99</span>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-emerald-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
                  <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">Market Cap Ltd</a></div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-emerald-500">+1,200.88</span>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-slate-200 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
                  <path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
                </svg>
              </div>
              <div className="grow flex items-center border-b border-slate-100 text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-slate-800 line-through">+$99.99</span>
                  </div>
                </div>
              </div>
            </li>
            {/* Item */}
            <li className="flex px-2">
              <div className="w-9 h-9 rounded-full shrink-0 bg-rose-500 my-2 mr-3">
                <svg className="w-9 h-9 fill-current text-rose-50" viewBox="0 0 36 36">
                  <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
                </svg>
              </div>
              <div className="grow flex items-center text-sm py-2">
                <div className="grow flex justify-between">
                  <div className="self-center"><a className="font-medium text-slate-800 hover:text-slate-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
                  <div className="shrink-0 self-start ml-2">
                    <span className="font-medium text-slate-800">-$49.88</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
 }
 export default DashboardCard11;
--- a/src/partials/dashboard/WelcomeBanner.jsx
+++ b/src/partials/dashboard/WelcomeBanner.jsx
@@ -1,59 +0,0 @@
 import React from 'react';
 function WelcomeBanner() {
  return (
    <div className="relative bg-indigo-200 p-4 sm:p-6 rounded-sm overflow-hidden mb-8">
      {/* Background illustration */}
      <div className="absolute right-0 top-0 -mt-4 mr-16 pointer-events-none hidden xl:block" aria-hidden="true">
        <svg width="319" height="198" xmlnsXlink="http://www.w3.org/1999/xlink">
          <defs>
            <path id="welcome-a" d="M64 0l64 128-64-20-64 20z" />
            <path id="welcome-e" d="M40 0l40 80-40-12.5L0 80z" />
            <path id="welcome-g" d="M40 0l40 80-40-12.5L0 80z" />
            <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="welcome-b">
              <stop stopColor="#A5B4FC" offset="0%" />
              <stop stopColor="#818CF8" offset="100%" />
            </linearGradient>
            <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="welcome-c">
              <stop stopColor="#4338CA" offset="0%" />
              <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
            </linearGradient>
          </defs>
          <g fill="none" fillRule="evenodd">
            <g transform="rotate(64 36.592 105.604)">
              <mask id="welcome-d" fill="#fff">
                <use xlinkHref="#welcome-a" />
              </mask>
              <use fill="url(#welcome-b)" xlinkHref="#welcome-a" />
              <path fill="url(#welcome-c)" mask="url(#welcome-d)" d="M64-24h80v152H64z" />
            </g>
            <g transform="rotate(-51 91.324 -105.372)">
              <mask id="welcome-f" fill="#fff">
                <use xlinkHref="#welcome-e" />
              </mask>
              <use fill="url(#welcome-b)" xlinkHref="#welcome-e" />
              <path fill="url(#welcome-c)" mask="url(#welcome-f)" d="M40.333-15.147h50v95h-50z" />
            </g>
            <g transform="rotate(44 61.546 392.623)">
              <mask id="welcome-h" fill="#fff">
                <use xlinkHref="#welcome-g" />
              </mask>
              <use fill="url(#welcome-b)" xlinkHref="#welcome-g" />
              <path fill="url(#welcome-c)" mask="url(#welcome-h)" d="M40.333-15.147h50v95h-50z" />
            </g>
          </g>
        </svg>
      </div>
      {/* Content */}
      <div className="relative">
        <h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-1">Good afternoon, Acme Inc. 👋</h1>
        <p>Here is what’s happening with your projects today:</p>
      </div>
    </div>
  );
 }
 export default WelcomeBanner;
--- a/src/partials/digitalId/ProfileTable.jsx
+++ b/src/partials/digitalId/ProfileTable.jsx
@@ -1,108 +0,0 @@
 import React, {useState, useEffect} from 'react';
 import ProfileTableItem from './ProfileTableItem';
 function ProfileTable({
  selectedItems,
  userData
 }) {
  const [isCheck, setIsCheck] = useState([]);
  useEffect(() => {
    selectedItems(isCheck);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isCheck]);
  const handleClick = e => {
    const { id, checked } = e.target;
    setIsCheck([...isCheck, id]);
    if (!checked) {
      setIsCheck(isCheck.filter(item => item !== id));
    }
  };
  return (
    <>
    {/* General */}
      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
      <div className="overflow-x-auto w-[828px]">
        <table className="w-[828px] table-auto w-full">
          <tbody className="divide-slate-200 divide-y">
            {userData.filter(data => data.category === 'General')
              .map(data => {
                return (
                  <ProfileTableItem
                    key={data.id}
                    id={data.id}
                    image={data.image}
                    value={data.value}
                    property={data.property}
                    status={data.status}
                    transactions={data.transactions}
                    avatars={data.avatars}
                    handleClick={handleClick}
                    isChecked={isCheck.includes(data.id)}
                  />
                )
              })
            }
          </tbody>
        </table>
      </div>
      {/* Nationality */}
      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
      <div className="overflow-x-auto w-[828px]">
        <table className="w-[828px] table-auto w-full">
          <tbody className="text-sm divide-slate-200 divide-y ">
            {userData.filter(data => data.category === 'Nationality')
              .map(data => {
                return (
                  <ProfileTableItem
                    key={data.id}
                    id={data.id}
                    image={data.image}
                    value={data.value}
                    property={data.property}
                    status={data.status}
                    transactions={data.transactions}
                    avatars={data.avatars}
                    handleClick={handleClick}
                    isChecked={isCheck.includes(data.id)}
                  />
                )
              })
            }
          </tbody>
        </table>
      </div>
      {/* Social */}
      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
      <div className="overflow-x-auto w-[828px]">
        <table className="w-[828px] table-auto w-full">
          <tbody className="text-sm divide-slate-200 divide-y ">
            {userData.filter(data => data.category === 'Social')
              .map(data => {
                return (
                  <ProfileTableItem
                    key={data.id}
                    id={data.id}
                    image={data.image}
                    value={data.value}
                    property={data.property}
                    status={data.status}
                    transactions={data.transactions}
                    avatars={data.avatars}
                    handleClick={handleClick}
                    isChecked={isCheck.includes(data.id)}
                  />
                )
              })
            }
          </tbody>
        </table>
      </div>
    </>
  )
 }
 export default ProfileTable;
--- a/src/partials/fintech/FintechCard01.jsx
+++ b/src/partials/fintech/FintechCard01.jsx
@@ -1,101 +0,0 @@
 import React from 'react';
 import LineChart from '../../charts/LineChart05';
 // Import utilities
 import { tailwindConfig, hexToRGB } from '../../utils/Utils';
 function FintechCard01() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021',
      '06-01-2021', '07-01-2021', '08-01-2021',
      '09-01-2021', '10-01-2021', '11-01-2021',
      '12-01-2021', '01-01-2022', '02-01-2022',
      '03-01-2022', '04-01-2022', '05-01-2022',
      '06-01-2022', '07-01-2022', '08-01-2022',
      '09-01-2022', '10-01-2022', '11-01-2022',
      '12-01-2022', '01-01-2023', '02-01-2023',
      '03-01-2023', '04-01-2023', '05-01-2023',
      '06-01-2023', '07-01-2023', '08-01-2023',
      '09-01-2023', '10-01-2023', '11-01-2023',
      '12-01-2023', '01-01-2024', '02-01-2024',
      '03-01-2024', '04-01-2024',
    ],
    datasets: [
      // Indigo line
      {
        label: 'Mosaic Portfolio',
        data: [
          0, 2.5, 2.5, 4, 2.5, 3.8, 5, 9, 7.5, 11,
          14, 15, 17, 15, 14, 9, 15, 26, 16, 18,
          15, 20, 18, 19, 19, 24, 29, 26, 39, 27,
          35, 32, 29, 35, 36, 34, 39, 36, 41, 41,
          48,
        ],
        borderColor: tailwindConfig().theme.colors.indigo[500],
        fill: true,
        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
        clip: 20,
      },
      // Yellow line
      {
        label: 'Expected Return',
        data: [
          0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
          10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
          20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
          30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
          40,
        ],
        borderColor: tailwindConfig().theme.colors.yellow[400],
        borderDash: [4, 4],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.yellow[400],
        clip: 20,
      },
      // gray line
      {
        label: 'Competitors',
        data: [
          0.7, 3.5, 4.5, 3.5, 4.2, 4.6, 6, 7, 6, 6,
          11, 13, 14, 18, 17, 15, 13, 16, 20, 21,
          24, 22, 20, 22, 25, 18, 21, 23, 24, 32,
          28, 29, 35, 37, 42, 32, 32, 33, 33, 37,
          32,
        ],
        borderColor: tailwindConfig().theme.colors.slate[300],
        fill: false,
        borderWidth: 2,
        tension: 0,
        pointRadius: 0,
        pointHoverRadius: 3,
        pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
        clip: 20,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100 flex items-center">
        <h2 className="font-semibold text-slate-800">Portfolio Returns</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <LineChart data={chartData} width={800} height={300} />
    </div>
  );
 }
 export default FintechCard01;
--- a/src/partials/fintech/FintechCard02.jsx
+++ b/src/partials/fintech/FintechCard02.jsx
@@ -1,133 +0,0 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import EditMenu from '../../components/DropdownEditMenu';
 function FintechCard02() {
  return (
    <div className="flex flex-col col-span-full xl:col-span-4 bg-gradient-to-b from-slate-700 to-slate-800 shadow-lg rounded-sm border border-slate-800">
      <header className="px-5 py-4 border-b border-slate-600 flex items-center">
        <h2 className="font-semibold text-slate-200">Active Cards</h2>
      </header>
      <div className="h-full flex flex-col px-5 py-6">
        {/* CC container */}
        <div className="relative w-full max-w-sm mx-auto bg-slate-800 p-3 rounded-2xl">
          {/* Credit Card */}
          <div className="relative aspect-[7/4] bg-gradient-to-tr from-indigo-500 to-indigo-400 p-5 rounded-xl overflow-hidden">
            {/* Gradients */}
            <div className="absolute left-0 -bottom-1/3 w-[398px] aspect-square" aria-hidden="true">
              <svg className="w-full h-full" width="398" height="392" viewBox="0 0 398 392" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <filter x="-88.2%" y="-88.2%" width="276.5%" height="276.5%" filterUnits="objectBoundingBox" id="glow-a">
                    <feGaussianBlur stdDeviation="50" in="SourceGraphic" />
                  </filter>
                </defs>
                <circle className="fill-indigo-100 opacity-60" filter="url(#glow-a)" cx="85" cy="85" r="85" transform="translate(0 216)" />
              </svg>
            </div>
            <div className="absolute right-0 -top-1/3 w-[398px] aspect-square" aria-hidden="true">
              <svg className="w-full h-full" width="398" height="392" viewBox="0 0 398 392" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <filter x="-88.2%" y="-88.2%" width="276.5%" height="276.5%" filterUnits="objectBoundingBox" id="glow-b">
                    <feGaussianBlur stdDeviation="50" in="SourceGraphic" />
                  </filter>
                </defs>
                <circle className="fill-sky-400 opacity-60" filter="url(#glow-b)" cx="85" cy="85" r="85" transform="translate(228 0)" />
              </svg>
            </div>
            <div className="relative h-full flex flex-col justify-between">
              {/* Logo on card */}
              <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                <defs>
                  <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon1-b">
                    <stop stopColor="#A5B4FC" offset="0%" />
                    <stop stopColor="#E0E7FF" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="24.537%" x2="50%" y2="100%" id="icon1-c">
                    <stop stopColor="#4338CA" offset="0%" />
                    <stop stopColor="#6366F1" stopOpacity="0" offset="100%" />
                  </linearGradient>
                  <path id="icon1-a" d="M16 0l16 32-16-5-16 5z" />
                </defs>
                <g transform="rotate(90 16 16)" fill="none" fillRule="evenodd">
                  <mask id="icon1-d" fill="#fff">
                    <use xlinkHref="#icon1-a" />
                  </mask>
                  <use fill="url(#icon1-b)" xlinkHref="#icon1-a" />
                  <path fill="url(#icon1-c)" mask="url(#icon1-d)" d="M16-6h20v38H16z" />
                </g>
              </svg>
              {/* Card number */}
              <div className="flex justify-between text-lg font-bold text-slate-200 tracking-widest drop-shadow-sm">
                <span>****</span>
                <span>****</span>
                <span>****</span>
                <span>7328</span>
              </div>
              {/* Card footer */}
              <div className="relative flex justify-between items-center z-10 mb-0.5">
                {/* Card expiration */}
                <div className="text-sm font-bold text-slate-200 tracking-widest drop-shadow-sm space-x-3">
                  <span>EXP 12/24</span>
                  <span>CVC ***</span>
                </div>
              </div>
              {/* Mastercard logo */}
              <svg className="absolute bottom-0 right-0" width="48" height="28" viewBox="0 0 48 28">
                <circle fill="#F59E0B" cx="34" cy="14" r="14" fillOpacity=".8" />
                <circle fill="#F43F5E" cx="14" cy="14" r="14" fillOpacity=".8" />
              </svg>
            </div>
          </div>
          {/* Options button */}
          <EditMenu align="right" className="absolute top-0 right-0 inline-flex">
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 1
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">
                Option 2
              </Link>
            </li>
            <li>
              <Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">
                Remove
              </Link>
            </li>
          </EditMenu>
        </div>
        {/* Details */}
        <div className="grow flex flex-col justify-center mt-3">
          <div className="text-xs text-slate-500 font-semibold uppercase mb-3">Details</div>
          <div className="space-y-2">
            <div>
              <div className="flex justify-between text-sm mb-2">
                <div className="text-slate-300">Payment Limits</div>
                <div className="text-slate-400 italic">
                  $780,00 <span className="text-slate-500">/</span> $1,500.00
                </div>
              </div>
              <div className="relative w-full h-2 bg-slate-600">
                <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '50%' }} />
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-2">
                <div className="text-slate-300">ATM Limits</div>
                <div className="text-slate-400 italic">
                  $179,00 <span className="text-slate-500">/</span> $1,000.00
                </div>
              </div>
              <div className="relative w-full h-2 bg-slate-600">
                <div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '35%' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default FintechCard02;
--- a/src/partials/fintech/FintechCard03.jsx
+++ b/src/partials/fintech/FintechCard03.jsx
@@ -1,48 +0,0 @@
 import React from 'react';
 import BarChart from '../../charts/BarChart05';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function FintechCard03() {
  const chartData = {
    labels: [
      '12-01-2020', '01-01-2021', '02-01-2021',
      '03-01-2021', '04-01-2021', '05-01-2021'
    ],
    datasets: [
      // Indigo bars
      {
        label: 'Inflow',
        data: [800, 2600, 4000, 1200, 3200, 1700],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
      // Grey bars
      {
        label: 'Outflow',
        data: [2800, 1700, 900, 2900, 1950, 3100],
        backgroundColor: tailwindConfig().theme.colors.slate[300],
        hoverBackgroundColor: tailwindConfig().theme.colors.slate[400],
        barPercentage: 0.66,
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Cash Flow</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <BarChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default FintechCard03;
--- a/src/partials/fintech/FintechCard04.jsx
+++ b/src/partials/fintech/FintechCard04.jsx
@@ -1,49 +0,0 @@
 import React from 'react';
 import BarChart from '../../charts/BarChart06';
 // Import utilities
 import { tailwindConfig } from '../../utils/Utils';
 function FintechCard04() {
  const chartData = {
    labels: [
      '02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021',
    ],
    datasets: [
      // Indigo bars
      {
        label: 'Inflow',
        data: [
          4100, 1900, 2700, 3900,
        ],
        backgroundColor: tailwindConfig().theme.colors.indigo[500],
        hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
        categoryPercentage: 0.66,
      },
      // Gray bars
      {
        label: 'Outflow',
        data: [
          2000, 1000, 1100, 2600,
        ],
        backgroundColor: tailwindConfig().theme.colors.slate[300],
        hoverBackgroundColor: tailwindConfig().theme.colors.slate[400],
        categoryPercentage: 0.66,
      },
    ],
  };
  return (
    <div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Cash Flow by Account</h2>
      </header>
      {/* Chart built with Chart.js 3 */}
      {/* Change the height attribute to adjust the chart height */}
      <BarChart data={chartData} width={595} height={248} />
    </div>
  );
 }
 export default FintechCard04;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
DwCay	200f4f58a7	Added the ability to share account data	2022-08-30 22:49:13 +03:00
kandrusyak	86a6bf013d	fix processed status	2022-08-26 15:25:33 +03:00
Kirill Andrusyak	6afa08e5f5	Merge pull request #58 from franze6/DID-13	2022-08-24 20:24:43 +03:00
DwCay	3173ec9342	Fix style for status markers	2022-08-24 19:41:42 +03:00
DuCay	c8352e6537	Merge branch 'master' into DID-13	2022-08-24 17:21:00 +03:00
DwCay	9fbc6423d1	Refactoring code and fix problems display blockchain data	2022-08-24 17:00:43 +03:00
kandrusyak	e4f691ab78	add processed fields	2022-08-24 13:24:10 +03:00
Kirill Andrusyak	446276fadf	Merge pull request #57 from franze6/DID-13 Fixed delete and update data account	2022-08-24 10:08:39 +03:00
DwCay	1b574ac347	Fixed delete and update data account	2022-08-24 06:04:21 +03:00
Kirill Andrusyak	0c7db9cd30	Merge pull request #56 from franze6/DID-13 Did 13	2022-08-23 11:36:53 +03:00
DwCay	fc977cc43a	Fix decrypted data for blockchain data	2022-08-23 11:17:34 +03:00
DwCay	0a0151d1dd	Added location statuses for account data	2022-08-23 05:50:59 +03:00
kandrusyak	369f0e375c	add loader	2022-08-22 17:05:05 +03:00
kandrusyak	79ca03823c	Change timeout	2022-08-22 15:53:00 +03:00
kandrusyak	49f3ee17a0	tr fix	2022-08-22 15:46:39 +03:00
kandrusyak	841e82e233	update dockerfile	2022-08-17 16:24:49 +03:00
Kirill Andrusyak	2212ea7433	Create docker-image.yml	2022-08-17 15:46:40 +03:00
kandrusyak	f257066d5a	blockchain integration	2022-08-17 14:05:49 +03:00
Kirill Andrusyak	027bf0d405	Merge pull request #55 from franze6/DID-12	2022-08-16 17:17:41 +03:00
DwCay	663cfacf63	Removed avatar display in updated and added sender avatar generation in validations	2022-08-16 15:54:55 +03:00
kandrusyak	27ee899402	clean up and bug fixes	2022-08-09 17:52:03 +03:00
kandrusyak	59dd4c9554	fix some bugs	2022-08-09 00:14:21 +03:00
kandrusyak	c659e17344	improve performance	2022-08-08 19:00:56 +03:00
DuCay	49d86ed74b	Merge pull request #53 from franze6/DID-12 Changed methods for fetch data transactions and for get passPhrase	2022-08-03 12:04:15 +03:00
DwCay	b2d5df9533	changed methods for encrypt	2022-08-03 12:02:44 +03:00
Daria Golova	0eea3d1ea3	changed userData to accountData	2022-08-03 11:22:07 +03:00
Daria Golova	9686e5245f	changed userData to accounData	2022-08-03 11:14:47 +03:00
Daria Golova	1f306b2dce	Merge pull request #52 from franze6/DID-11 added data check for the table on Profile page	2022-08-03 10:31:48 +03:00
DwCay	a86dd13e0e	Changed methods for fetch data transactions and for get passPhrase	2022-08-03 00:48:32 +03:00
Daria Golova	0e5d7477fc	added data check for the table on Profile page	2022-08-02 20:57:10 +03:00
kandrusyak	f395661480	some fixes	2022-08-02 19:11:05 +03:00
kandrusyak	4c334648cb	remove links	2022-08-02 18:55:04 +03:00
kandrusyak	344b2c7862	add proxy api	2022-08-01 14:07:23 +03:00
Daria Golova	826f340e9a	Merge pull request #51 from franze6/DID-11 added the seed field in the store	2022-07-27 16:24:54 +03:00
Daria Golova	b4bccf2cba	added the seed field in the store	2022-07-27 16:20:33 +03:00
Daria Golova	7bb1832d4d	added the seed field in the store	2022-07-27 15:58:15 +03:00
Daria Golova	17ac1b04eb	Merge pull request #50 from franze6/DID-11 removed the scroll from the input	2022-07-27 15:39:32 +03:00
Daria Golova	e4dc1e961e	removed the scroll from the input	2022-07-27 15:39:05 +03:00
Daria Golova	fa198054dd	Merge pull request #49 from franze6/DID-11 fixed a bug when deleting elements	2022-07-27 14:31:31 +03:00
Daria Golova	f31c895b8d	fixed a bug when deleting elements	2022-07-27 14:28:11 +03:00
Daria Golova	b7be78cf76	Merge pull request #48 from franze6/DID-12 fixed function references	2022-07-26 17:42:56 +03:00
Daria Golova	6d92fde547	fixed function references	2022-07-26 17:39:42 +03:00
DuCay	03bc841894	Merge pull request #47 from franze6/DID-12 Change page signin	2022-07-26 17:18:20 +03:00
DuCay	c24a1fa09d	Merge branch 'master' into DID-12	2022-07-26 17:18:14 +03:00
DwCay	57e5dee442	Change page signin	2022-07-26 17:00:39 +03:00
Daria Golova	188e79caf9	Merge pull request #46 from franze6/DID-11 replaced forms with divs and old logo	2022-07-26 14:10:53 +03:00
Daria Golova	e9b21c5c02	replaced forms with divs and old logo	2022-07-26 14:09:48 +03:00
DuCay	75464d81f0	Merge pull request #45 from franze6/DID-12 Did 12	2022-07-26 11:42:10 +03:00
DwCay	fcb7d40ca5	Add method get and save passPhrase. Сorrections in the display of data on the page validationLog	2022-07-26 03:33:11 +03:00
DwCay	f27edb97bb	Change methods for new transactions data	2022-07-25 17:55:34 +03:00
Daria Golova	b75a2349c2	Merge pull request #44 from franze6/DID-11 removed the verification of the updating form	2022-07-25 16:47:38 +03:00
Daria Golova	37c9feffe1	removed the verification of the updating form	2022-07-25 16:46:35 +03:00
Daria Golova	fe6bcf8d0f	Merge pull request #43 from franze6/DID-11 Добавила проверку заполнения формы изменения параметров профиля	2022-07-21 16:15:02 +03:00
Daria Golova	d7488f8ca9	deleted an extra line	2022-07-21 16:12:23 +03:00
Daria Golova	ffa92ded10	deleted console.log	2022-07-21 16:09:44 +03:00
Daria Golova	68e94201e0	added an update form check	2022-07-21 16:07:40 +03:00
DuCay	020e45ddce	Merge pull request #42 from franze6/DID-10 Change fetch Node info data for POST methods	2022-07-21 11:39:37 +03:00
DwCay	8955d846e4	Change fetch Node info data for POST methods	2022-07-21 11:39:07 +03:00
DuCay	d5bc90c818	Merge pull request #41 from franze6/DID-10 Bug fixes when trying to get data on page reload	2022-07-19 23:11:15 +03:00
DuCay	16a2ffca2d	Merge branch 'master' into DID-10	2022-07-19 23:11:07 +03:00
DwCay	f932c0bc33	Bug fixes when trying to get data on page reload	2022-07-19 23:09:47 +03:00
Daria Golova	da268d7ecc	Merge pull request #40 from franze6/DID-11 Проверка кода, ренейминг	2022-07-18 15:16:30 +03:00
Daria Golova	736e8fc16b	deleted settings.json	2022-07-18 15:14:43 +03:00
Daria Golova	774955f131	code review	2022-07-18 15:11:20 +03:00
DuCay	5b20d71a0c	Merge pull request #39 from franze6/DID-10 Did 10	2022-07-18 11:31:49 +03:00
DuCay	9714b0add8	Merge branch 'master' into DID-10	2022-07-18 11:31:43 +03:00
DwCay	52eb2a75c1	Fix onBecomeObserved reaction property	2022-07-18 11:27:55 +03:00
DwCay	3c77264fae	Fix url	2022-07-18 11:16:02 +03:00
DwCay	429f36b6a6	Refactoring store and association stores into one	2022-07-15 18:54:03 +03:00
Daria Golova	11be69a79b	Merge pull request #38 from franze6/DID-9 Исправила url, настроила дефолтный шрифт	2022-07-15 17:26:38 +03:00
Daria Golova	911c13cb87	fixed url, font	2022-07-15 17:22:34 +03:00
kandrusyak	1e9830c8d4	fix merge	2022-07-15 12:10:06 +03:00
Kirill Andrusyak	a8a6355daa	Merge pull request #37 from franze6/DID-9 Интеграция страницы Verify с сервером	2022-07-15 12:09:26 +03:00
Kirill Andrusyak	444c94690b	Merge branch 'master' into DID-9	2022-07-15 12:09:19 +03:00
Kirill Andrusyak	67133c5414	Merge pull request #36 from franze6/DID-8 Интеграция страницы ValidationLog с сервером	2022-07-15 11:52:25 +03:00
Kirill Andrusyak	f58a94bf24	Merge pull request #35 from franze6/DID-7 Внесла правки на странице Profile	2022-07-15 11:51:01 +03:00
DwCay	9820692cd9	Добавлен адресс аккаунта совершившего транзакцию	2022-07-13 15:39:20 +03:00
Daria Golova	2eeb39abc9	rendered the data in the component	2022-07-13 14:45:17 +03:00
DwCay	5eb4ee16c0	Удален ValidationLogStore	2022-07-13 14:31:27 +03:00
DwCay	bc364d1b85	Исправлен нейминг в store и transactionsStore. Возвращены иконки юзеров на страницу ValidationLog	2022-07-13 14:30:11 +03:00
DwCay	8489bc375c	Интеграция страницы ValidationLog с сервером	2022-07-12 19:21:39 +03:00
Daria Golova	b9f795c0e4	done store for shared data	2022-07-12 16:56:44 +03:00
Daria Golova	47dfcf347c	added stacking context for the hint	2022-07-11 15:08:45 +03:00
Daria Golova	e837f7cc89	added onblur, fixed seed, moved default values	2022-07-11 15:08:45 +03:00
DuCay	7ad29e8fe0	Merge pull request #34 from franze6/DID-6 Refactoring method saveDataRegistration in store	2022-07-11 11:16:42 +03:00
DwCay	0fb5764a70	Refactoring method saveDataRegistration in store	2022-07-11 11:15:53 +03:00
DuCay	5ebc965a2a	Merge pull request #33 from franze6/DID-6 Refactoring in Onboarding steps	2022-07-08 21:24:21 +03:00
DuCay	138047fa10	Merge branch 'master' into DID-6	2022-07-08 21:24:04 +03:00
DwCay	a271da7bf9	Refactoring in Onboarding steps	2022-07-08 21:20:09 +03:00
Kirill Andrusyak	79784cbcee	Merge pull request #32 from franze6/DID-7 Создана форма изменения параметров профиля, добавлен функционал для изменения и добавления параметров	2022-07-08 16:32:18 +03:00
Daria Golova	596c44aac3	changed strange IIFE function	2022-07-07 10:19:31 +03:00
Daria Golova	5d17137815	made sending data	2022-07-06 20:22:48 +03:00
Daria Golova	18bf373508	changed the names of the methods	2022-07-06 19:38:09 +03:00
Daria Golova	944c9989e9	fix seed	2022-07-06 19:33:27 +03:00
Daria Golova	202989f374	agreed on form to change and add	2022-07-06 19:33:27 +03:00
Daria Golova	f21d10f830	added prop key, made update form	2022-07-06 19:33:27 +03:00
DuCay	c8604a56ac	Merge pull request #31 from franze6/DID-6 Changing data in store to array	2022-07-06 19:27:56 +03:00
DwCay	2d0ae35cc8	Changing data in store to array	2022-07-06 19:27:26 +03:00
DuCay	76f942b90f	Merge pull request #30 from franze6/DID-6 Change methods in store	2022-07-06 18:52:22 +03:00
DwCay	f0e0d9479d	Change methods in store	2022-07-06 18:51:57 +03:00
DuCay	3403289e0a	Merge pull request #29 from franze6/DID-6 New naming for store	2022-07-06 12:59:44 +03:00
DwCay	25fddec6e8	New naming for store	2022-07-06 12:58:53 +03:00
DuCay	1d0cb45024	Merge pull request #28 from franze6/DID-6 Fix naming in store	2022-07-06 12:46:06 +03:00
DwCay	222850dfd9	Fix naming in store	2022-07-06 12:44:53 +03:00
Kirill Andrusyak	8f225752cf	Merge pull request #27 from franze6/DID-6 Add method for delete property account	2022-07-06 12:28:46 +03:00
kandrusyak	038657751a	add deploy files	2022-07-05 15:18:36 +03:00
kandrusyak	29d7d6fdb8	change endpoint url	2022-07-05 15:12:22 +03:00
DwCay	e44dfee284	Add method for delete property account	2022-07-04 18:02:34 +03:00
Kirill Andrusyak	0f455f126d	Merge pull request #26 from franze6/DID-5 Интеграция таблицы страницы Profile с сервером	2022-07-04 10:10:03 +03:00
Daria Golova	0d4f27660a	Merge branch 'DID-5'	2022-07-01 17:27:39 +03:00
Daria Golova	9703371f28	made a reference book	2022-07-01 17:16:09 +03:00
Daria Golova	16ca8a1df2	converted user data into Map object	2022-07-01 16:03:21 +03:00
Daria Golova	e883b190a7	converted user data into Map object	2022-07-01 16:01:20 +03:00
Daria Golova	85897a8efe	changed name of the method in store.js	2022-06-30 14:50:59 +03:00
Daria Golova	5f85d1696a	integrated received data into table	2022-06-30 14:42:59 +03:00
Daria Golova	1c539e5255	made userDataStore	2022-06-30 14:42:59 +03:00
DuCay	bcfc018560	Merge pull request #25 from franze6/DID-4 Did 4	2022-06-30 13:35:58 +03:00
DwCay	e175ca0295	fix naming for post method	2022-06-30 13:35:07 +03:00
DwCay	bac246eac2	fix label name for post request	2022-06-30 13:17:10 +03:00
DwCay	f65c99e86a	fix store	2022-06-29 19:35:06 +03:00
DwCay	63439b2da1	Add method post encrypt auth data	2022-06-29 18:47:49 +03:00
Kirill Andrusyak	1d9368d200	Merge pull request #24 from franze6/DID-3 Доработка формы создания поля	2022-06-28 17:01:22 +03:00
kandrusyak	3a4ed9daf9	auth	2022-06-28 16:38:05 +03:00
Daria Golova	54ccd3ed9f	fix popup hint	2022-06-23 18:52:19 +03:00
Daria Golova	fe1105e9d6	delete useEffect	2022-06-23 15:28:29 +03:00
Daria Golova	95cc2ac1e0	fix property field, added default value of seed	2022-06-23 15:21:08 +03:00
Daria Golova	b4516ef18e	made a popup hint	2022-06-22 19:36:58 +03:00
kandrusyak	d617de75b5	router fix	2022-06-22 14:53:31 +03:00
Kirill Andrusyak	83e5e39d3c	Merge pull request #21 from franze6/DID-2 Создание fetch wrapper	2022-06-21 11:47:58 +03:00
Kirill Andrusyak	f89d59e7df	Merge branch 'master' into DID-2	2022-06-21 11:47:49 +03:00
Kirill Andrusyak	c944644db0	Merge pull request #23 from franze6/DID-1 Did 1	2022-06-21 11:44:57 +03:00
DwCay	bfdddee46a	Add method for get passPhrase and generation hex for account logo	2022-06-18 16:50:32 +03:00
kandrusyak	0da68ddd63	migrate to webpack	2022-06-17 16:56:30 +03:00
Daria Golova	f209ee5f5f	added token availability check	2022-06-16 16:05:48 +03:00
Daria Golova	9bef3d9311	fix authorization by token	2022-06-16 15:25:25 +03:00
Daria Golova	632b98a81a	added authorization by token	2022-06-16 14:30:41 +03:00
DwCay	eeaabeebf3	Add method for get passPhrase	2022-06-15 17:41:02 +03:00
Daria Golova	81f5ec2741	fix methods	2022-06-15 14:36:23 +03:00
Daria Golova	3fcda54070	fix wrapper	2022-06-15 14:21:39 +03:00
Daria Golova	49aff14a80	create fetch wrapper	2022-06-14 13:53:28 +03:00
DwCay	da04efbf80	Add registration store	2022-06-14 13:13:58 +03:00
DuCay	541c5988e9	Merge pull request #20 from franze6/Deleting_elements Delete Onboarding and Component from Sidebar	2022-06-02 15:53:43 +03:00
DwCay	cfa5af78c0	Delete Onboarding and Component from Sidebar	2022-06-02 15:53:06 +03:00
DuCay	fc4d9fb897	Merge pull request #19 from franze6/Validation_merged Update Validate Panel	2022-06-02 15:35:15 +03:00
DwCay	ed5565eb17	Update Validate Panel	2022-06-02 15:34:20 +03:00
DuCay	99512491fa	Merge pull request #18 from franze6/Onboarding_steps Start window Onboarding1	2022-06-02 14:40:24 +03:00
DwCay	24a66478d6	Start window Onboarding1	2022-06-02 14:27:04 +03:00
DuCay	9484b0bda9	Merge pull request #17 from franze6/Validation_merged Fix errors and styling	2022-06-01 20:46:49 +03:00
DwCay	885963be45	Fix errors and styling	2022-06-01 20:45:14 +03:00
DuCay	e144e50a40	Merge pull request #16 from franze6/Onboarding_steps Fix routing link in onboarding steps	2022-06-01 17:59:40 +03:00
DwCay	16f9a52a41	Fix routing link in onboarding steps	2022-06-01 17:58:51 +03:00
DuCay	5e74f2bc0b	Merge pull request #15 from franze6/Onboarding_steps Onboarding fix styling	2022-06-01 17:36:25 +03:00
DuCay	fa5ddbf64a	Merge branch 'master' into Onboarding_steps	2022-06-01 17:36:15 +03:00
DwCay	c45b7c5e4d	Onboarding fix styling	2022-06-01 17:33:20 +03:00
Daria Golova	606223216f	Merge pull request #13 from franze6/Profile-Page fix profile page	2022-06-01 17:25:45 +03:00
Daria Golova	c41bed05fd	Merge pull request #14 from franze6/Verify-Page fix verify page	2022-06-01 17:25:34 +03:00
Daria Golova	b71dccbd0e	fix field on sidepanel	2022-06-01 17:18:22 +03:00
Daria Golova	264a908352	fix paddings	2022-06-01 16:51:32 +03:00
DuCay	f74293b1f4	Merge pull request #12 from franze6/Onboarding_steps Onboarding2 fix name for form	2022-06-01 15:57:57 +03:00
DwCay	095c5e236e	Onboarding2 fix name for form	2022-06-01 15:56:09 +03:00
		`@@ -0,0 +1,3 @@`
							`import {fetchWrapper} from '../shared/fetchWrapper';`

							`export const getNodeInfo = (headers) => fetchWrapper.get('node/info/', headers)`