Fix style for status markers

Fixed delete and update data account

.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

Dockerfile

@@ -1,11 +1,13 @@
 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
+RUN npm run build:prod
 
 FROM nginx:1.21.6-alpine as runner
 

package.json

@@ -2,31 +2,29 @@
   "name": "mosaic-react",
   "version": "0.1.0",
   "scripts": {
-    "dev": "webpack-dev-server",
-    "build": "webpack"
+    "dev": "webpack-dev-server --https",
+    "build:dev": "webpack --mode development --progress",
+    "build:prod": "webpack --mode production --progress"
   },
   "dependencies": {
     "@liskhq/lisk-client": "^5.2.2",
     "@tailwindcss/forms": "^0.4.0",
-    "autoprefixer": "^10.4.5",
     "buffer": "^6.0.3",
     "chart.js": "^3.5.0",
     "chartjs-adapter-moment": "^1.0.0",
     "crypto-browserify": "^3.12.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.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",
-    "postcss-loader": "^7.0.0",
     "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",
     "stream-browserify": "^3.0.0",
@@ -37,10 +35,14 @@
     "@babel/core": "^7.18.5",
     "@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",
+    "postcss-loader": "^7.0.0",
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",

src/App.jsx

@@ -7,29 +7,23 @@ import {
 
 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 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(()=> {
@@ -44,28 +38,22 @@ function App() {
 
   return (
     <>
+      { store.loading && <LoadingOverlay /> }
       <Routes>
         <Route exact path="/" element={<Onboarding1 />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        <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-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 />} />
       </Routes>
     </>
   );
-}
+})
 
 export default App;

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;

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;

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;

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;

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;

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;

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();
-    }
-  },
-});

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

src/components/DropdownProfile.jsx

@@ -2,7 +2,7 @@ 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 {registrationStore} from "../store/store";
+import {store} from "../store/store";
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import UserAvatar from '../images/user-avatar-32.png';
 
@@ -36,6 +36,11 @@ import UserAvatar from '../images/user-avatar-32.png';
     return () => document.removeEventListener('keydown', keyHandler);
   });
 
+  const logOut = () => {
+    sessionStorage.removeItem('passPhrase')
+    store.fetchPassPhrase()
+  }
+
   return (
     <div className="relative inline-flex">
       <button
@@ -45,9 +50,9 @@ import UserAvatar from '../images/user-avatar-32.png';
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={generateSvgAvatar(registrationStore.pubKey) || 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>
@@ -70,24 +75,22 @@ import UserAvatar from '../images/user-avatar-32.png';
           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="text-xs text-slate-500 italic">Administrator</div>
+            <div className="font-medium text-slate-800">{store.accountName}</div>
           </div>
           <ul>
             <li>
-              <Link
-                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
-                to="/dashboard"
+              <span
+                className="cursor-pointer font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
                 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="/dashboard"
-                onClick={() => setDropdownOpen(!dropdownOpen)}
+                to="/"
+                onClick={() => logOut()}
               >
                 Sign Out
               </Link>

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)

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;

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;

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;
+}

src/main.jsx

@@ -6,6 +6,10 @@ import App from './App'
 
 globalThis.Buffer = Buffer
 
+BigInt.prototype.toJSON = function() {
+  return this.toString()
+}
+
 ReactDOM.render(
   <React.StrictMode>
     <Router>

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;

src/pages/Dashboard.jsx

@@ -1,102 +0,0 @@
-import React, {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() {
-  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;

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;

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;

src/pages/Onboarding1.jsx

@@ -1,16 +1,20 @@
-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 {passphrase} from "@liskhq/lisk-client";
-import {registrationStore} from "../store/store";
+import { observer } from "mobx-react-lite";
+import { store } from "../store/store";
+import { Navigate } from "react-router-dom";
 
-const Onboarding1 = observer(()=>{
-  let phrase = passphrase.Mnemonic.generateMnemonic()
-  registrationStore.savePassPhrase(phrase)
+const Onboarding1 = observer(() => {
+
+  useEffect(() => {
+    store.clearDataRegistration()
+  }, [])
+
+  if(store.passPhrase)
+    return <Navigate to="/digitalId/profile-id" replace={true} />
 
   return (
     <main className="bg-white">
@@ -31,7 +35,7 @@ const Onboarding1 = observer(()=>{
                   <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>
 
@@ -42,16 +46,16 @@ const Onboarding1 = observer(()=>{
                     <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="/">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>
@@ -64,7 +68,7 @@ const Onboarding1 = observer(()=>{
 
                 <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 />
@@ -114,7 +118,7 @@ const Onboarding1 = observer(()=>{
                       <Link to="/onboarding-2">Next Step -&gt;</Link>
                     </button>
                   </div>
-                </form>
+                </div>
 
               </div>
             </div>

src/pages/Onboarding2.jsx

@@ -1,44 +1,53 @@
-import React, {useState} from 'react';
-import { Link } from 'react-router-dom';
+import React, {useEffect, useMemo, useState} from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { observer } from "mobx-react-lite";
-import { registrationStore } from "../store/store";
-
+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";
 
-const Onboarding2 = observer(()=>{
+const Onboarding2 = observer(() => {
+  const navigate = useNavigate();
+
   const [dataRegistration, setDataRegistration] = useState(
       {
-        first_name: '',
-        second_name: '',
+        firstname: '',
+        secondname: '',
         gender: '',
         birthdate: '',
       }
-  )
-  const [fillingForm, setFillingForm] = useState(false)
+  );
 
-  const saveValueChange = (event)=>{
+  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
+      [event.target.id]: newValue,
     })
-    if(!Object.keys(dataRegistration).find(item=>!dataRegistration[item])) {
-      setFillingForm(true)
-    }
-  }
+  };
 
-  const saveStoreRegistration = ()=>{
-    if(fillingForm) {
-      registrationStore.saveDataRegistration(Object.keys(dataRegistration).map(item=>{
-        return{
+  const saveStoreRegistration = () => {
+    if (fillingForm) {
+      store.saveDataRegistration(Object.keys(dataRegistration).map(item => ({
           key: `${item}`,
-          value: dataRegistration[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">
@@ -59,7 +68,7 @@ const Onboarding2 = observer(()=>{
                   <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>
 
@@ -70,16 +79,16 @@ const Onboarding2 = observer(()=>{
                     <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="/">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>
@@ -91,27 +100,27 @@ const Onboarding2 = observer(()=>{
               <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="first_name">First name <span className="text-rose-500">*</span></label>
-                      <input id="first_name" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="text" />
+                      <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="second_name">Last name <span className="text-rose-500">*</span></label>
-                      <input id="second_name" onChange={(event)=>saveValueChange(event)} 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="gender">Gender <span className="text-rose-500">*</span></label>
-                      <select id="gender" onChange={(event)=>saveValueChange(event)} 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="birthdate">Date of birth <span className="text-rose-500">*</span></label>
-                      <input id="birthdate" onChange={(event)=>saveValueChange(event)} className="form-input w-full" type="date" 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">
@@ -121,16 +130,9 @@ const Onboarding2 = observer(()=>{
                         <span className="text-sm ml-2">Email me about product news.</span>
                       </label>
                     </div>
-                    <button onClick={()=>saveStoreRegistration()} className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
-                      <Link id="signup" to={fillingForm && "/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
                     </button>
                   </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>

src/pages/Onboarding3.jsx

@@ -1,36 +1,32 @@
-import React, { useState} 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 {registrationStore} from "../store/store";
-import { passphrase } from "@liskhq/lisk-client";
+import {store} from "../store/store";
 
-function Onboarding3() {
-  const [passPhrase, setPassPhrase] = useState(convertPhraseToArray(registrationStore.passPhrase))
-  function generatePassPhrase() {
-    let phrase = passphrase.Mnemonic.generateMnemonic()
-    registrationStore.savePassPhrase(phrase)
-    setPassPhrase(convertPhraseToArray(registrationStore.passPhrase))
-  }
+const Onboarding3 = observer(()=>{
 
-  function savePassPhraseInStore (copiedPhrase) {
-    let phrasePaste = convertPhraseToArray(copiedPhrase.trim())
-    if(phrasePaste.length===12) {
-      registrationStore.savePassPhrase(copiedPhrase.trim())
-      setPassPhrase(phrasePaste)
-    } else {
-      return false
+  useEffect(()=>{
+    store.generatePassPhrase();
+  }, [])
+
+  const generatePassPhrase = () => {
+    store.generatePassPhrase();
+  };
+
+  const savePassPhraseInStore = copiedPhrase => {
+    if (copiedPhrase.split(' ').length === 12) {
+      store.savePastPassPhrase(copiedPhrase.trim());
     }
-  }
+  };
 
-  function pastePassPhrase() {
-    navigator.clipboard.readText().then(res=>savePassPhraseInStore(res))
-  }
-
-  function convertPhraseToArray(phrase) {
-    return phrase.split(' ').map((item, index) => ({str:item, id:index }))
-  }
+  const pastePassPhrase = () => {
+    navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
+  };
 
+  const convertPassPhraseToArray = () => store.passPhrase.split(' ').
+    map((item, index) => ({str: item, id: index}));
 
   return (
     <main className="bg-white">
@@ -51,7 +47,7 @@ function Onboarding3() {
                   <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>
 
@@ -62,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="/">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>
@@ -86,21 +82,21 @@ function Onboarding3() {
                   <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">
-                    {passPhrase.map(tag => (
+                    {convertPassPhraseToArray().map(tag => (
                       <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.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">
+                    <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 onClick={()=>generatePassPhrase()} 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"/>
@@ -126,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(registrationStore.pubKey)} 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>
@@ -135,6 +131,6 @@ function Onboarding3() {
 
     </main>
   );
-}
+});
 
 export default Onboarding3;

src/pages/Onboarding4.jsx

@@ -3,27 +3,29 @@ 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 { registrationStore } from "../store/store";
+import { store } from "../store/store";
 
-const Onboarding4 = observer(()=>{
+const Onboarding4 = observer(() => {
 
-  const [checkBoxesSelected, setCheckBoxesSelected] = useState([])
+  const [checkBoxesSelected, setCheckBoxesSelected] = useState([]);
 
-  function createAccount () {
-    if(checkBoxesSelected.length===2) {
-      registrationStore.pushAccountData()
+  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])
+    const { id, checked } = e.target;
+    setCheckBoxesSelected([...checkBoxesSelected, id]);
     if (!checked) {
-      setCheckBoxesSelected(checkBoxesSelected.filter(item=>item!==id))
+      setCheckBoxesSelected(checkBoxesSelected.filter(item => item !== id));
     }
-  }
+  };
 
-  const firstNameAccount = registrationStore.accountData.length && registrationStore.accountData.find(item=>item.key==="first_name").value
+  const firstNameAccount = store.accountData.length && store.accountData.find(item => item.key === "firstname").value;
 
   return (
     <main className="bg-white">
@@ -44,7 +46,7 @@ const Onboarding4 = observer(()=>{
                   <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>
 
@@ -55,16 +57,16 @@ const Onboarding4 = observer(()=>{
                     <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="/">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>
@@ -81,8 +83,8 @@ const Onboarding4 = observer(()=>{
                     <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">{firstNameAccount ? `Nice to meet you, ${firstNameAccount} 🙌` : 'Please, go back step 2'}</h1>
-                  <button onClick={()=>createAccount()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
-                    <Link id="link-dashboard" to={checkBoxesSelected.length===2 && "/dashboard"}>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>
 
@@ -111,7 +113,7 @@ const Onboarding4 = observer(()=>{
         {/* 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(registrationStore.pubKey)} 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>

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 (
@@ -19,22 +19,7 @@ function ResetPassword() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <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>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </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>

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() {
 

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;

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="/dashboard">
-                  <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="/dashboard">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="/">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;

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;

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;

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;

src/pages/digitalId/ProfileId.jsx

@@ -1,53 +1,73 @@
-import React, { useState } from 'react';
-import { userDataStore } from '../../store/userDataStore';
-import { registrationStore } from "../../store/store";
+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';
-
-const defaultValues = {
-  label: '',
-  value: '',
-  seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
-};
+import {labelMap} from '../../shared/labelMap';
+import {statusMap} from "../../shared/statusMap";
 
 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),
+  };
+
   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
+      [field]: value,
     }))
   };
 
   const changeUpdatedValues = (value, field, key) => {
-    setUpdatedValues((prevState) => 
+    if(field==='value') {
+      setBlockChainValue(value)
+    }
+    setUpdatedValues((prevState) =>
       prevState.map((elem) => (
-        (elem.key === key) ? {
-          ...elem,
-          [field]: value,
-        } : elem
+          (elem.key === key) ? {
+            ...elem,
+            [field]: value,
+          } : elem
       ))
     )
   };
@@ -65,11 +85,11 @@ const Profile = observer (() => {
 
   const handleSelectedItems = (selectedItems) => {
     setSelectedItems([...selectedItems]);
-    setUpdatedValues(userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key))
+    setUpdatedValues(store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key))
       .map(elem => (
         (!elem.seed) ? {
         ...elem,
-        seed: String(Math.floor(Math.random() * 90000000000000000000), 10) 
+        seed: String(Math.floor(Math.random() * 90000000000000000000), 10),
       }: elem)));
     if (selectedItems.length > 0) {
       setButtonPanelOpen(false);
@@ -90,38 +110,43 @@ const Profile = observer (() => {
   const openAddPanel = () => {
     setAddPanelOpen(true);
     setButtonPanelOpen(false);
-  }
+  };
 
   const sendAddedData = () => {
-    const checkingAddedData = !userDataStore.decryptedData
-      .some((element) => element.label === addedValues.label) && (addedValues.seed.length === 20);
+    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 = userDataStore.decryptedData.filter(item=>!selectedItems.includes(item.key))
-    registrationStore.pushAccountData(changeData);
-  }
+    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 = [];
-    userDataStore.decryptedData.map(elem => {
+    store.decryptedAccountData.map(elem => {
       updatedValues.forEach(item => {
         if (elem.label === item.label) {
           newArr.push({
             ...elem,
-            'value': item.value, 
+            status: 'new',
+            'value': item.value,
             'seed': item.seed,
           })
         }
@@ -131,44 +156,60 @@ const Profile = observer (() => {
       }
     })
     return newArr;
-  }
+  };
 
   const changeDataParameters = () => {
     const updatedData = changeInitialArray();
-    registrationStore.pushAccountData(updatedData);
-  }
+    store.pushAccountData(updatedData);
+    if(storeOnBlockchain)
+      store.pushAccountDataToBlockchain(updatedData.filter(elem=>elem.status!=='Stored'))
+  };
 
   const addDataParameters = () => {
-    addedValues.key = addedValues.label.toLowerCase().split(' ').join('_');
-    registrationStore.pushAccountData(userDataStore.decryptedData.concat(addedValues));
-  }
+    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 openUpdatePanel = () => {
     setUpdatePanelOpen(true);
     setChangePanelOpen(false);
-  }
+  };
 
   const applyDataDeletion = () => {
     setRemovePanelOpen(false);
     setButtonPanelOpen(true);
-    deleteDataParameters()
-  }
+    deleteDataParameters();
+    setIsCheck([]);
+  };
 
   const handleInput = (text, field) => {
     changeAddedValues(text, field);
@@ -212,7 +253,9 @@ const Profile = observer (() => {
                   </ul>
                 </div>
                 {/* Table */}
-                <ProfileTable selectedItems={handleSelectedItems} userData={userDataStore.decryptedData}/>
+                <div>
+                  <ProfileTable isCheck={isCheck} handleClick={handleClick} userData={store.decryptedAccountData}/>
+                </div>
               </div>
               {/* Left sidebar */}
               <div>
@@ -238,7 +281,7 @@ const Profile = observer (() => {
                       <input
                         autoComplete='off'
                         id="label"
-                        className="form-input w-full"
+                        className={`form-input w-full ${alreadyExists && 'border-rose-300'}`}
                         type="text"
                         required
                         onInput={(e) => handleInput(e.target.value, 'label')}
@@ -253,6 +296,7 @@ const Profile = observer (() => {
                           ))}
                         </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>
@@ -273,7 +317,7 @@ const Profile = observer (() => {
                         autoComplete='off'
                         id="seed"
                         className="form-input w-full"
-                        type="number"
+                        type="text"
                         required
                         onClick={() => setPropertyValues([])}
                         onChange={(e) => changeAddedValues(e.target.value, 'seed')}
@@ -284,7 +328,7 @@ const Profile = observer (() => {
                       <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={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>
@@ -297,7 +341,7 @@ const Profile = observer (() => {
                         className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                         onClick={cancelAddPanel}
                       >
-                        Cansel
+                        Cancel
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
@@ -309,7 +353,7 @@ const Profile = observer (() => {
                   </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) => ( 
+                    {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>
@@ -320,7 +364,7 @@ const Profile = observer (() => {
                             required
                             onChange={(e) => changeUpdatedValues(e.target.value, 'label', item.key)}
                             value={item.label}
-                            disabled='disabled'
+                            disabled
                           />
                         </div>
                         <div>
@@ -332,7 +376,7 @@ const Profile = observer (() => {
                             type="text"
                             required
                             onChange={(e) => changeUpdatedValues(e.target.value, 'value', item.key)}
-                            value={item.value}
+                            value={item.status===statusMap.blockchained?blockChainValue : item.value}
                           />
                         </div>
                         <div>
@@ -341,7 +385,7 @@ const Profile = observer (() => {
                             autoComplete='off'
                             id={`${item.key}:seed`}
                             className="form-input w-full"
-                            type="number"
+                            type="text"
                             required
                             onChange={(e) => changeUpdatedValues(e.target.value, 'seed', item.key)}
                             value={item.seed}
@@ -356,7 +400,7 @@ const Profile = observer (() => {
                       <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={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>
@@ -369,7 +413,7 @@ const Profile = observer (() => {
                         className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
                         onClick={cancelUpdatePanel}
                       >
-                        Cansel
+                        Cancel
                       </button>
                       <button
                         className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
@@ -383,7 +427,7 @@ const Profile = observer (() => {
                   <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">Summary</h2>
                     <div className="flex flex-col">
-                      {userDataStore.decryptedData.filter(({ key }) => selectedItems.includes(key)).map(item => (
+                      {store.decryptedAccountData.filter(({ key }) => selectedItems.includes(key)).map(item => (
                         <span key={item.label} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.label}</span>
                       ))}
                     </div>
@@ -391,7 +435,7 @@ const Profile = observer (() => {
                       <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>
@@ -414,7 +458,7 @@ const Profile = observer (() => {
                     </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">

src/pages/digitalId/Validate.jsx

@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 import {observer} from "mobx-react-lite";
-
-import {transactionsStore} from "../../store/transactionsStore";
 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 {store} from "../../store/store";
 
-const Validate = observer(()=>{
+const Validate = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [validatePanelOpen, setValidatePanelOpen] = useState(true);
 
@@ -58,7 +57,7 @@ const Validate = observer(()=>{
               <div className="pb-8 border-b border-zinc-200 mt-[50px]">
                 <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
               </div>
-              {transactionsStore.transactionsData.map(item => {
+              {store.transactionsInfo.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>
               })}
             </div>

src/pages/digitalId/ValidationLog.jsx

@@ -1,12 +1,11 @@
 import React, {useState} from 'react';
-
-import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap";
-import {transactionsStore} from "../../store/transactionsStore";
+import ValidateRoadMap from "../../partials/validationLog/ValidateRoadMap";
 import {observer} from "mobx-react-lite";
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import {store} from "../../store/store";
 
-const ValidationLog = observer(()=>{
+const ValidationLog = observer(() => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
@@ -28,7 +27,7 @@ const ValidationLog = observer(()=>{
               <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
-                  {transactionsStore.transactionsData.map(item=>{
+                  {store.transactionsInfo.map(item => {
                     return <ValidateRoadMap season={item} key={item.id}/>
                   })}
                 </div>

src/pages/digitalId/Verify.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import { sharedDataStore } from '../../store/sharedDataStore';
+import {store} from "../../store/store";
 import { observer } from 'mobx-react-lite';
 
 const Verify = observer(() => {
@@ -42,7 +42,7 @@ const Verify = observer(() => {
             </div>
             {/* Block */}
             <div className="flex flex-col gap-y-4">
-              {sharedDataStore.sharedData.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-end items-center h-[42px]">
@@ -81,7 +81,7 @@ const Verify = observer(() => {
                       </div>
                     ))}
                   </div>
-                </div> 
+                </div>
               ))}
             </div>
           </div>
@@ -91,4 +91,4 @@ const Verify = observer(() => {
   )
 })
 
-export default Verify;
+export default Verify;

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>

src/partials/Sidebar.jsx

@@ -81,7 +81,7 @@ function Sidebar({
             </svg>
           </button>
           {/* Logo */}
-          <NavLink end to="/dashboard" className="block">
+          <NavLink end to="/digitalId/profile-id" className="block">
             <img alt='logo' src={Logo} width="89" height="32"/>
           </NavLink>
         </div>
@@ -97,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="/dashboard"
-                              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) => {
@@ -302,38 +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>
         </div>

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

src/partials/fintech/FintechCard05.jsx

@@ -1,155 +0,0 @@
-import React from 'react';
-
-function FintechCard05() {
-  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 Expenses</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">Counterparty</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Account</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Date</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-right">Amount</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>Revolut</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-slate-800 text-right">-$1,299.22</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-slate-900">
-                      <svg className="w-9 h-9 fill-current text-slate-400" viewBox="0 0 36 36">
-                        <path d="M12.014 25.752v-4.998c.196.42.495.749.896.987s.877.357 1.428.357a3.08 3.08 0 0 0 1.694-.483c.504-.322.9-.789 1.19-1.4.29-.611.434-1.328.434-2.149s-.145-1.535-.434-2.142c-.29-.607-.686-1.071-1.19-1.393a3.08 3.08 0 0 0-1.694-.483c-.55 0-1.027.119-1.428.357a2.21 2.21 0 0 0-.896.987v-1.246H9.256v11.606h2.758Zm1.414-6.062a1.34 1.34 0 0 1-1.022-.434c-.27-.29-.406-.686-.406-1.19 0-.495.135-.887.406-1.176a1.34 1.34 0 0 1 1.022-.434c.43 0 .777.142 1.043.427.266.285.399.679.399 1.183 0 .513-.133.912-.399 1.197-.266.285-.614.427-1.043.427Zm10.108 2.408c.924 0 1.771-.217 2.541-.651a4.8 4.8 0 0 0 1.827-1.813c.448-.775.672-1.647.672-2.618 0-.97-.222-1.843-.665-2.618a4.75 4.75 0 0 0-1.82-1.813 5.113 5.113 0 0 0-2.555-.651c-.924 0-1.773.217-2.548.651a4.786 4.786 0 0 0-1.834 1.813c-.448.775-.672 1.647-.672 2.618 0 .97.224 1.843.672 2.618a4.786 4.786 0 0 0 1.834 1.813 5.125 5.125 0 0 0 2.548.651Zm0-2.562c-.7 0-1.25-.229-1.652-.686-.401-.457-.602-1.069-.602-1.834 0-.784.2-1.402.602-1.855.401-.453.952-.679 1.652-.679s1.248.226 1.645.679c.397.453.595 1.071.595 1.855 0 .765-.2 1.377-.602 1.834-.401.457-.947.686-1.638.686Z" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">PublicOne Inc.</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>Qonto</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-slate-800 text-right">-$272.88</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="M15 17h-3v-5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v5h-3v-2.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0-.5.5V17Zm10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-1H12v1a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1h14Z" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">Imperial Hotel ****</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>Revolut</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-slate-800 text-right">-$999.44</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-sky-50" viewBox="0 0 36 36">
-                        <path d="m26.3 16.1-2.6-.9-1.8-4.6c-.1-.4-.5-.6-.9-.6h-9c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3.3c.6 1.2 1.8 2 3.2 2 1.4 0 2.6-.8 3.2-2.1.1 0 .2.1.3.1h4c.6 0 1-.4 1-1v-6c0-.4-.3-.8-.7-.9ZM25 22h-3c-.2-1.7-1.7-3-3.5-3s-3.2 1.3-3.4 3H13V12h7.3l1.7 4.4c.1.3.3.5.6.6l2.4.7V22Z" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">Uber</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>N26</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-slate-800 text-right">-$1,029.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-[#EA4335]">
-                      <svg className="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
-                        <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" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">Google Limited UK</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>N26</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-slate-800 text-right">-$1,921.26</div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="text-center border-t border-slate-100 px-2">
-          <a className="block text-sm font-medium text-indigo-500 hover:text-indigo-600 pt-4 pb-1" href="#0">
-            View All -&gt;
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard05;

src/partials/fintech/FintechCard06.jsx

@@ -1,155 +0,0 @@
-import React from 'react';
-
-import UserImage from '../../images/user-36-05.jpg';
-
-function FintechCard06() {
-  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 Earnings</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">Counterparty</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Account</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Date</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-right">Amount</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-sky-500">
-                      <svg className="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
-                        <path d="M18 26a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Zm0-14a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">Acme LTD UK</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>Revolut</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-emerald-500 text-right">+$1,299.22</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">Web.com</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>Qonto</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-emerald-500 text-right">+$1,200.88</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-[#24292E]">
-                      <svg className="w-9 h-9 fill-current text-white" viewBox="0 0 36 36">
-                        <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" />
-                      </svg>
-                    </div>
-                    <div className="font-medium text-slate-800">Github Inc.</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>N26</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-emerald-500 text-right">+$499.99</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">
-                      <img className="w-9 h-9 rounded-full" src={UserImage} width="36" height="36" alt="User 05" />
-                    </div>
-                    <div className="font-medium text-slate-800">Aprilynne Pills</div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>Revolut</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-emerald-500 text-right">+$2,179.36</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-rose-50" viewBox="0 0 36 36">
-                        <path d="M18 21a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm-4.95 3.363-.707-.707a8 8 0 0 1 0-11.312l.707-.707 1.414 1.414-.707.707a6 6 0 0 0 0 8.484l.707.707-1.414 1.414Zm9.9 0-1.414-1.414.707-.707a6 6 0 0 0 0-8.484l-.707-.707 1.414-1.414.707.707a8 8 0 0 1 0 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>Revolut</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div>22/01/2022</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-medium text-emerald-500 text-right">+$249.88</div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="text-center border-t border-slate-100 px-2">
-          <a className="block text-sm font-medium text-indigo-500 hover:text-indigo-600 pt-4 pb-1" href="#0">
-            View All -&gt;
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard06;

src/partials/fintech/FintechCard07.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart06';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard07() {
-
-  const chartData = {
-    labels: [
-      '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',
-    ],
-    datasets: [
-      // Indigo line
-      {
-        label: 'Mosaic Portfolio',
-        data: [
-          1500, 2000, 1800, 1900, 1900, 2400, 2900, 2600, 3900, 2700,
-          3500, 3200, 2900, 3500, 3600, 3400, 3900, 3600, 4100, 4100,
-        ],
-        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,
-      },
-      // Gray line
-      {
-        label: 'Expected Return',
-        data: [
-          2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900,
-          3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900,
-        ],
-        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 sm:col-span-12 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 flex items-center">
-        <h2 className="font-semibold text-slate-800">Portfolio Returns</h2>
-      </header>
-      <div className="px-5 py-3">
-        <div className="text-sm italic mb-2">Hey Mark, you're very close to your goal:</div>
-        <div className="flex items-center">
-          <div className="text-3xl font-bold text-slate-800 mr-2">$5,247.09</div>
-          <div className="text-sm"><span className="font-medium text-amber-500">97.4%</span></div>
-        </div>
-        <div className="text-sm text-slate-500">Out of $6,000</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={262} />
-      </div>      
-    </div>
-  );
-}
-
-export default FintechCard07;

src/partials/fintech/FintechCard08.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart07';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard08() {
-
-  const chartData = {
-    labels: ['2010', 'Age 65'],
-    datasets: [
-      // Dark green line
-      {
-        label: 'Growth 1',
-        data: [0, 3500000],
-        borderColor: tailwindConfig().theme.colors.emerald[500],
-        fill: true,
-        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
-        borderWidth: 2,
-        tension: 0,
-        pointRadius: 0,
-        pointHoverRadius: 3,
-        pointBackgroundColor: tailwindConfig().theme.colors.emerald[500],
-        clip: 20,
-      },
-      // Light green line
-      {
-        label: 'Growth 2',
-        data: [0, 2000000],
-        borderColor: tailwindConfig().theme.colors.emerald[200],
-        fill: false,
-        borderWidth: 2,
-        tension: 0,
-        pointRadius: 0,
-        pointHoverRadius: 3,
-        pointBackgroundColor: tailwindConfig().theme.colors.emerald[200],
-        clip: 20,
-      },
-    ],
-  };
-
-  return (
-    <div className="flex flex-col col-span-full sm:col-span-12 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 flex items-center">
-        <h2 className="font-semibold text-slate-800">Growth Portfolio</h2>
-      </header>
-      <div className="px-5 py-3">
-        <div className="text-sm italic mb-2">Hey Mark, by age 65 you could have:</div>
-        <div className="text-3xl font-bold text-slate-800">$2M - $3.5M</div>
-        <div className="text-sm text-slate-500">Risk level 8</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={262} />
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard08;

src/partials/fintech/FintechCard09.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PieChart from '../../charts/PieChart';
-
-// Import utilities
-import { tailwindConfig } from '../../utils/Utils';
-
-function FintechCard09() {
-  
-  const chartData = {
-    labels: ['Cash', 'Commodities', 'Bonds', 'Stock'],
-    datasets: [
-      {
-        label: 'Sessions By Device',
-        data: [12, 13, 10, 65],
-        backgroundColor: [
-          tailwindConfig().theme.colors.emerald[400],
-          tailwindConfig().theme.colors.yellow[400],
-          tailwindConfig().theme.colors.sky[400],
-          tailwindConfig().theme.colors.indigo[500],
-        ],
-        hoverBackgroundColor: [
-          tailwindConfig().theme.colors.emerald[500],
-          tailwindConfig().theme.colors.yellow[500],
-          tailwindConfig().theme.colors.sky[500],
-          tailwindConfig().theme.colors.indigo[600],
-        ],
-        borderWidth: 0,
-      },
-    ],
-  };
-
-  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 flex items-center">
-        <h2 className="font-semibold text-slate-800">Portfolio Value</h2>
-      </header>
-      <div className="px-5 py-3">
-        <div className="text-sm italic mb-2">Hey Mark, here is the value of your portfolio:</div>
-        <div className="text-3xl font-bold text-slate-800">$224,807.27</div>
-      </div>
-      {/* Chart built with Chart.js 3 */}
-      {/* Change the height attribute to adjust the chart height */}
-      <PieChart data={chartData} width={389} height={220} />
-    </div>
-  );
-}
-
-export default FintechCard09;

src/partials/fintech/FintechCard10.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart08';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard10() {
-
-  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: [
-      // Line
-      {
-        data: [
-          732, 610, 610, 504, 504, 504, 349,
-          349, 504, 342, 504, 610, 391, 192,
-          154, 273, 191, 191, 126, 263, 349,
-          252, 323, 322, 270, 232,
-        ],
-        fill: true,
-        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.rose[500])}, 0.08)`,
-        borderColor: tailwindConfig().theme.colors.rose[500],
-        borderWidth: 2,
-        tension: 0,
-        pointRadius: 0,
-        pointHoverRadius: 3,
-        pointBackgroundColor: tailwindConfig().theme.colors.rose[500],
-        clip: 20,
-      },
-    ],
-  };
-
-  return (
-    <div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
-      <div className="px-5 pt-5">
-        <header>
-          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
-            <span className="text-slate-800">Google</span> - Alphabet
-          </h3>
-          <div className="text-2xl font-bold text-slate-800 mb-1">$2,860.96</div>
-          <div className="text-sm">
-            <span className="font-medium text-red-500">-$49 (4,7%)</span> - Today
-          </div>
-        </header>
-      </div>
-      {/* Chart built with Chart.js 3 */}
-      <div className="grow">
-        {/* Change the height attribute to adjust the chart height */}
-        <LineChart data={chartData} width={286} height={98} />
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard10;

src/partials/fintech/FintechCard11.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart08';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard11() {
-
-  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: [
-      // Line
-      {
-        data: [
-          222, 222, 226, 271, 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.emerald[500])}, 0.08)`,
-        borderColor: tailwindConfig().theme.colors.emerald[500],
-        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 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
-      <div className="px-5 pt-5">
-        <header>
-          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
-            <span className="text-slate-800">Amzn</span> - Amazon Inc.
-          </h3>
-          <div className="text-2xl font-bold text-slate-800 mb-1">$3,400.35</div>
-          <div className="text-sm">
-            <span className="font-medium text-emerald-500">+$142 (3,7%)</span> - Today
-          </div>
-        </header>
-      </div>
-      {/* Chart built with Chart.js 3 */}
-      <div className="grow">
-        {/* Change the height attribute to adjust the chart height */}
-        <LineChart data={chartData} width={286} height={98} />
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard11;

src/partials/fintech/FintechCard12.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart08';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard12() {
-
-  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: [
-      // 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, 644, 688, 664,
-        ],
-        fill: true,
-        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
-        borderColor: tailwindConfig().theme.colors.emerald[500],
-        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 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
-      <div className="px-5 pt-5">
-        <header>
-          <h3 className="text-xs font-semibold text-slate-500 uppercase mb-1">
-            <span className="text-slate-800">Twtr</span> - Twitter Inc.
-          </h3>
-          <div className="text-2xl font-bold text-slate-800 mb-1">$43.07</div>
-          <div className="text-sm">
-            <span className="font-medium text-emerald-500">+$4,20 (9,2%)</span> - Today
-          </div>
-        </header>
-      </div>
-      {/* Chart built with Chart.js 3 */}
-      <div className="grow">
-        {/* Change the height attribute to adjust the chart height */}
-        <LineChart data={chartData} width={286} height={98} />
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard12;

src/partials/fintech/FintechCard13.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart08';
-
-// Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils';
-
-function FintechCard13() {
-
-  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: [
-      // Line
-      {
-        data: [
-          245, 288, 332, 404, 404, 314, 314,
-          314, 314, 314, 234, 314, 234, 234,
-          314, 314, 314, 388, 314, 202, 202,
-          202, 202, 514, 720, 642,
-        ],
-        fill: true,
-        backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.08)`,
-        borderColor: tailwindConfig().theme.colors.emerald[500],
-        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 xl:col-span-3 bg-white shadow-lg rounded-sm border border-slate-200">
-      <div className="px-5 pt-5">
-        <header>
-          <h3 className="text-sm font-semibold text-slate-500 uppercase mb-1">
-            <span className="text-slate-800">Facebook</span> - Meta Inc.
-          </h3>
-          <div className="text-2xl font-bold text-slate-800 mb-1">$333.79</div>
-          <div className="text-sm">
-            <span className="font-medium text-emerald-500">+$19,70 (4%)</span> - Today
-          </div>
-        </header>
-      </div>
-      {/* Chart built with Chart.js 3 */}
-      <div className="grow">
-        {/* Change the height attribute to adjust the chart height */}
-        <LineChart data={chartData} width={286} height={98} />
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard13;

src/partials/fintech/FintechCard14.jsx

@@ -1,313 +0,0 @@
-import React from 'react';
-import LineChart from '../../charts/LineChart09';
-
-// Import utilities
-import { tailwindConfig } from '../../utils/Utils';
-
-function FintechCard14() {
-
-  const miniCharts = [
-    // Twitter
-    {
-      data: [
-        540, 466, 540, 466, 385, 432, 334,
-        334, 289, 289, 200, 289, 222, 289,
-        289, 403, 554, 304, 289, 270, 134,
-        270, 829, 644, 688, 664,
-      ],
-      growth: true,
-    },
-    // Facebook
-    {
-      data: [
-        245, 288, 332, 404, 404, 314, 314,
-        314, 314, 314, 234, 314, 234, 234,
-        314, 314, 314, 388, 314, 202, 202,
-        202, 202, 514, 720, 642,
-      ],
-      growth: true,
-    },
-    // Google
-    {
-      data: [
-        732, 610, 610, 504, 504, 504, 349,
-        349, 504, 342, 504, 610, 391, 192,
-        154, 273, 191, 191, 126, 263, 349,
-        252, 323, 322, 270, 232,
-      ],
-      growth: false,
-    },
-    // Apple
-    {
-      data: [
-        222, 222, 226, 271, 365, 365, 238,
-        324, 288, 206, 324, 324, 500, 409,
-        409, 273, 232, 273, 500, 570, 767,
-        808, 685, 767, 685, 685,
-      ],
-      growth: true,
-    },
-    // Coinbase
-    {
-      data: [
-        632, 510, 610, 404, 504, 404, 449,
-        349, 404, 542, 404, 410, 491, 392,
-        254, 273, 291, 191, 226, 363, 449,
-        252, 223, 222, 170, 132,
-      ],
-      growth: false,
-    },
-  ];
-
-  const chartData = [];
-
-  const buildChartData = (chart) => {
-    var obj = {
-      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: [
-        // Line
-        {
-          data: chart.data,
-          borderColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
-          borderWidth: 2,
-          tension: 0,
-          pointRadius: 0,
-          pointHoverRadius: 3,
-          pointBackgroundColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
-          clip: 20,
-        },
-      ],      
-    }    
-    return obj;
-  };
-  
-  miniCharts.map((miniChart) => {
-    chartData.push(buildChartData(miniChart));
-  });
-
-  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">Market Trends</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">Market</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Mkt Cap</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Chart</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Price</div>
-                </th>
-                <th className="p-2 whitespace-nowrap">
-                  <div className="font-semibold text-left">Chg. (24h)</div>
-                </th>
-              </tr>
-            </thead>
-            {/* Table body */}
-            <tbody className="text-sm font-medium divide-y divide-slate-100">
-              {/* Row */}
-              <tr>
-                <td className="p-2 whitespace-nowrap md:w-1/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>
-                      <div className="text-slate-800 uppercase">Twtr</div>
-                      <div className="text-xs text-slate-500">Twitter Inc.</div>
-                    </div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-normal text-left">33.94B</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  {/* Chart built with Chart.js 3 */}
-                  <div className="w-[96px]">
-                    {/* Change the height attribute to adjust the chart height */}
-                    <LineChart data={chartData[0]} width={96} height={32} />
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left">$43.07</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left text-emerald-500">+$4.20 (4%)</div>
-                </td>
-              </tr>
-              {/* Row */}
-              <tr>
-                <td className="p-2 whitespace-nowrap md:w-1/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="#1877F2" cx="18" cy="18" r="18" />
-                      <path
-                        d="M16.023 26 16 19h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V16H23l-1 3h-2.72v7h-3.257Z"
-                        fill="#FFF"
-                        fillRule="nonzero"
-                      />
-                    </svg>
-                    <div>
-                      <div className="text-slate-800 uppercase">Fb</div>
-                      <div className="text-xs text-slate-500">Meta Inc.</div>
-                    </div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-normal text-left">903.71B</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  {/* Chart built with Chart.js 3 */}
-                  <div className="w-[96px]">
-                    {/* Change the height attribute to adjust the chart height */}
-                    <LineChart data={chartData[1]} width={96} height={32} />
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left">$324.81</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left text-emerald-500">+$12.20 (3.7%)</div>
-                </td>
-              </tr>
-              {/* Row */}
-              <tr>
-                <td className="p-2 whitespace-nowrap md:w-1/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>
-                      <div className="text-slate-800 uppercase">Googl</div>
-                      <div className="text-xs text-slate-500">Alphabet Inc.</div>
-                    </div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-normal text-left">1.70T</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  {/* Chart built with Chart.js 3 */}
-                  <div className="w-[96px]">
-                    {/* Change the height attribute to adjust the chart height */}
-                    <LineChart data={chartData[2]} width={96} height={32} />
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left">$2,860.96</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left text-rose-500">-$12.20 (3.7%)</div>
-                </td>
-              </tr>
-              {/* Row */}
-              <tr>
-                <td className="p-2 whitespace-nowrap md:w-1/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="#1E293B" cx="18" cy="18" r="18" />
-                      <path
-                        d="M18.725 10.48C19.853 9.006 21.422 9 21.422 9s.233 1.384-.888 2.717c-1.197 1.424-2.557 1.191-2.557 1.191s-.256-1.12.748-2.429Zm-.605 3.398c.58 0 1.658-.79 3.06-.79 2.414 0 3.364 1.7 3.364 1.7s-1.858.94-1.858 3.221c0 2.573 2.314 3.46 2.314 3.46s-1.617 4.506-3.802 4.506c-1.003 0-1.783-.67-2.84-.67-1.078 0-2.147.695-2.843.695C13.52 26 11 21.725 11 18.29c0-3.381 2.133-5.155 4.134-5.155 1.3 0 2.31.743 2.986.743Z"
-                        fill="#FFF"
-                        fillOpacity=".9"
-                        fillRule="nonzero"
-                      />
-                    </svg>
-                    <div>
-                      <div className="text-slate-800 uppercase">Aapl</div>
-                      <div className="text-xs text-slate-500">Apple Inc.</div>
-                    </div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-normal text-left">2.77T</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  {/* Chart built with Chart.js 3 */}
-                  <div className="w-[96px]">
-                    {/* Change the height attribute to adjust the chart height */}
-                    <LineChart data={chartData[3]} width={96} height={32} />
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left">$168.55</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left text-emerald-500">+$7.44 (1.4%)</div>
-                </td>
-              </tr>
-              {/* Row */}
-              <tr>
-                <td className="p-2 whitespace-nowrap md:w-1/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="#0052FF" cx="18" cy="18" r="18" />
-                      <path
-                        d="M18.12 13.894c1.673 0 3.002 1.016 3.506 2.528H25C24.389 13.19 21.679 11 18.146 11 14.135 11 11 13.998 11 18.013S14.055 25 18.146 25c3.454 0 6.216-2.19 6.828-5.449h-3.348c-.478 1.512-1.807 2.555-3.48 2.555-2.312 0-3.932-1.747-3.932-4.093 0-2.372 1.595-4.12 3.905-4.12Z"
-                        fill="#FFF"
-                        fillRule="nonzero"
-                      />
-                    </svg>
-                    <div>
-                      <div className="text-slate-800 uppercase">Coin</div>
-                      <div className="text-xs text-slate-500">Coinbase Global Inc.</div>
-                    </div>
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="font-normal text-left">50.89B</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  {/* Chart built with Chart.js 3 */}
-                  <div className="w-[96px]">
-                    {/* Change the height attribute to adjust the chart height */}
-                    <LineChart data={chartData[4]} width={96} height={32} />
-                  </div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left">$236.48</div>
-                </td>
-                <td className="p-2 whitespace-nowrap">
-                  <div className="text-left text-rose-500">-$24,30 (6.2%)</div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default FintechCard14;

src/partials/fintech/FintechIntro.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-import UserImage from '../../images/user-64-14.jpg';
-import FintechIcon01 from '../../images/company-icon-01.svg';
-import FintechIcon02 from '../../images/company-icon-02.svg';
-import FintechIcon03 from '../../images/company-icon-03.svg';
-import FintechIcon04 from '../../images/company-icon-04.svg';
-
-function FintechIntro() {
-  return (
-    <div className="flex flex-col col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
-      <div className="px-5 py-6">
-        <div className="md:flex md:justify-between md:items-center">
-          {/* Left side */}
-          <div className="flex items-center mb-4 md:mb-0">
-            {/* Avatar */}
-            <div className="mr-4">
-              <img className="inline-flex rounded-full" src={UserImage} width="64" height="64" alt="User" />
-            </div>
-            {/* User info */}
-            <div>
-              <div className="mb-2">
-                Hey <strong className="font-medium text-slate-800">Mary</strong> 👋, this is your current balance:
-              </div>
-              <div className="text-3xl font-bold text-emerald-500">$47,347.09</div>
-            </div>
-          </div>
-          {/* Right side */}
-          <ul className="shrink-0 flex flex-wrap justify-end md:justify-start -space-x-3 -ml-px">
-            <li>
-              <a className="block" href="#0">
-                <img className="w-9 h-9 rounded-full" src={FintechIcon01} width="36" height="36" alt="Account 01" />
-              </a>
-            </li>
-            <li>
-              <a className="block" href="#0">
-                <img className="w-9 h-9 rounded-full" src={FintechIcon02} width="36" height="36" alt="Account 02" />
-              </a>
-            </li>
-            <li>
-              <a className="block" href="#0">
-                <img className="w-9 h-9 rounded-full" src={FintechIcon03} width="36" height="36" alt="Account 03" />
-              </a>
-            </li>
-            <li>
-              <a className="block" href="#0">
-                <img className="w-9 h-9 rounded-full" src={FintechIcon04} width="36" height="36" alt="Account 04" />
-              </a>
-            </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">
-                <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>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default FintechIntro;

src/partials/messages/ChannelMenu.jsx

@@ -1,108 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Transition from '../../utils/Transition';
-
-import ChannelImage from '../../images/user-avatar-32.png';
-import ChannelImage01 from '../../images/channel-01.png';
-import ChannelImage02 from '../../images/channel-02.png';
-import ChannelImage03 from '../../images/channel-03.png';
-
-function ChannelMenu() {
-
-  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">
-      <button
-        ref={trigger}
-        className="grow flex items-center truncate"
-        aria-haspopup="true"
-        onClick={() => setDropdownOpen(!dropdownOpen)}
-        aria-expanded={dropdownOpen}
-      >
-        <img className="w-8 h-8 rounded-full mr-2" src={ChannelImage} width="32" height="32" alt="Group 01" />
-        <div className="truncate">
-          <span className="font-semibold text-slate-800">#Marketing</span>
-        </div>
-        <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>
-      </button>
-      <Transition
-        className="origin-top-right z-10 absolute top-full left-0 min-w-60 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
-        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"
-      >
-        <ul
-          ref={dropdown}
-          onFocus={() => setDropdownOpen(true)}
-          onBlur={() => setDropdownOpen(false)}
-        >
-          <li>
-            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
-              <div className="flex items-center justify-between">
-                <div className="grow flex items-center truncate">
-                  <img className="w-7 h-7 rounded-full mr-2" src={ChannelImage01} width="28" height="28" alt="Channel 01" />
-                  <div className="truncate">#Marketing</div>
-                </div>
-                <svg className="w-3 h-3 shrink-0 fill-current text-indigo-500 ml-1" 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>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
-              <div className="flex items-center justify-between">
-                <div className="grow flex items-center truncate">
-                  <img className="w-7 h-7 rounded-full mr-2" src={ChannelImage02} width="28" height="28" alt="Channel 02" />
-                  <div className="truncate">#Developing</div>
-                </div>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
-              <div className="flex items-center justify-between">
-                <div className="grow flex items-center truncate">
-                  <img className="w-7 h-7 rounded-full mr-2" src={ChannelImage03} width="28" height="28" alt="Channel 03" />
-                  <div className="truncate">#ProductSupport</div>
-                </div>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </Transition>
-    </div>
-  )
-}
-
-export default ChannelMenu;