项目初始化

.gitignore

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

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "tailadmin-react-free",
+  "private": true,
+  "version": "1.3.7",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "author": {
+    "name": "TailAdmin",
+    "email": "hello@tailadmin.com",
+    "url": "https://tailadmin.com"
+  },
+  "dependencies": {
+    "apexcharts": "^3.41.0",
+    "flatpickr": "^4.6.13",
+    "headlessui": "^0.0.0",
+    "jsvectormap": "^1.5.3",
+    "match-sorter": "^6.3.1",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.10.1",
+    "react-router-dom": "^6.14.2",
+    "react-toastify": "^9.1.3",
+    "sort-by": "^0.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.17",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.14",
+    "file-loader": "^6.2.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "tailwindcss": "^3.4.1",
+    "vite": "^4.4.7",
+    "webpack": "^5.88.2"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/common/Loader/index.tsx

@@ -0,0 +1,9 @@
+const Loader = () => {
+  return (
+    <div className="flex h-screen items-center justify-center bg-white">
+      <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
+    </div>
+  );
+};
+
+export default Loader;

src/components/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+interface BreadcrumbProps {
+  pageName: string;
+}
+const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
+  return (
+    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <h2 className="text-title-md2 font-semibold text-black dark:text-white">
+        {pageName}
+      </h2>
+
+      <nav>
+        <ol className="flex items-center gap-2">
+          <li>
+            <Link className="font-medium" to="/">
+              Dashboard /
+            </Link>
+          </li>
+          <li className="font-medium text-primary">{pageName}</li>
+        </ol>
+      </nav>
+    </div>
+  );
+};
+
+export default Breadcrumb;

src/components/CardDataStats.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+
+interface CardDataStatsProps {
+  title: string;
+  total: string;
+  rate: string;
+  levelUp?: boolean;
+  levelDown?: boolean;
+  children: ReactNode;
+}
+
+const CardDataStats: React.FC<CardDataStatsProps> = ({
+  title,
+  total,
+  rate,
+  levelUp,
+  levelDown,
+  children,
+}) => {
+  return (
+    <div className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
+      <div className="flex h-11.5 w-11.5 items-center justify-center rounded-full bg-meta-2 dark:bg-meta-4">
+        {children}
+      </div>
+
+      <div className="mt-4 flex items-end justify-between">
+        <div>
+          <h4 className="text-title-md font-bold text-black dark:text-white">
+            {total}
+          </h4>
+          <span className="text-sm font-medium">{title}</span>
+        </div>
+
+        <span
+          className={`flex items-center gap-1 text-sm font-medium ${
+            levelUp && 'text-meta-3'
+          } ${levelDown && 'text-meta-5'} `}
+        >
+          {rate}
+
+          {levelUp && (
+            <svg
+              className="fill-meta-3"
+              width="10"
+              height="11"
+              viewBox="0 0 10 11"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.35716 2.47737L0.908974 5.82987L5.0443e-07 4.94612L5 0.0848689L10 4.94612L9.09103 5.82987L5.64284 2.47737L5.64284 10.0849L4.35716 10.0849L4.35716 2.47737Z"
+                fill=""
+              />
+            </svg>
+          )}
+          {levelDown && (
+            <svg
+              className="fill-meta-5"
+              width="10"
+              height="11"
+              viewBox="0 0 10 11"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.64284 7.69237L9.09102 4.33987L10 5.22362L5 10.0849L-8.98488e-07 5.22362L0.908973 4.33987L4.35716 7.69237L4.35716 0.0848701L5.64284 0.0848704L5.64284 7.69237Z"
+                fill=""
+              />
+            </svg>
+          )}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default CardDataStats;

src/components/Charts/ChartOne.tsx

@@ -0,0 +1,199 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+  legend: {
+    show: false,
+    position: 'top',
+    horizontalAlign: 'left',
+  },
+  colors: ['#3C50E0', '#80CAEE'],
+  chart: {
+    fontFamily: 'Satoshi, sans-serif',
+    height: 335,
+    type: 'area',
+    dropShadow: {
+      enabled: true,
+      color: '#623CEA14',
+      top: 10,
+      blur: 4,
+      left: 0,
+      opacity: 0.1,
+    },
+
+    toolbar: {
+      show: false,
+    },
+  },
+  responsive: [
+    {
+      breakpoint: 1024,
+      options: {
+        chart: {
+          height: 300,
+        },
+      },
+    },
+    {
+      breakpoint: 1366,
+      options: {
+        chart: {
+          height: 350,
+        },
+      },
+    },
+  ],
+  stroke: {
+    width: [2, 2],
+    curve: 'straight',
+  },
+  // labels: {
+  //   show: false,
+  //   position: "top",
+  // },
+  grid: {
+    xaxis: {
+      lines: {
+        show: true,
+      },
+    },
+    yaxis: {
+      lines: {
+        show: true,
+      },
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  markers: {
+    size: 4,
+    colors: '#fff',
+    strokeColors: ['#3056D3', '#80CAEE'],
+    strokeWidth: 3,
+    strokeOpacity: 0.9,
+    strokeDashArray: 0,
+    fillOpacity: 1,
+    discrete: [],
+    hover: {
+      size: undefined,
+      sizeOffset: 5,
+    },
+  },
+  xaxis: {
+    type: 'category',
+    categories: [
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+    ],
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+  },
+  yaxis: {
+    title: {
+      style: {
+        fontSize: '0px',
+      },
+    },
+    min: 0,
+    max: 100,
+  },
+};
+
+interface ChartOneState {
+  series: {
+    name: string;
+    data: number[];
+  }[];
+}
+
+const ChartOne: React.FC = () => {
+  const [state, setState] = useState<ChartOneState>({
+    series: [
+      {
+        name: 'Product One',
+        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
+      },
+
+      {
+        name: 'Product Two',
+        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
+      },
+    ],
+  });
+
+  const handleReset = () => {
+    setState((prevState) => ({
+      ...prevState,
+    }));
+  };
+  handleReset;
+
+  return (
+    <div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
+      <div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
+        <div className="flex w-full flex-wrap gap-3 sm:gap-5">
+          <div className="flex min-w-47.5">
+            <span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
+              <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span>
+            </span>
+            <div className="w-full">
+              <p className="font-semibold text-primary">Total Revenue</p>
+              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
+            </div>
+          </div>
+          <div className="flex min-w-47.5">
+            <span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
+              <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span>
+            </span>
+            <div className="w-full">
+              <p className="font-semibold text-secondary">Total Sales</p>
+              <p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex w-full max-w-45 justify-end">
+          <div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
+            <button className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
+              Day
+            </button>
+            <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
+              Week
+            </button>
+            <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
+              Month
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div id="chartOne" className="-ml-5">
+          <ReactApexChart
+            options={options}
+            series={state.series}
+            type="area"
+            height={350}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartOne;

src/components/Charts/ChartThree.tsx

@@ -0,0 +1,163 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+interface ChartThreeState {
+  series: number[];
+}
+
+const options: ApexOptions = {
+  chart: {
+    fontFamily: 'Satoshi, sans-serif',
+    type: 'donut',
+  },
+  colors: ['#3C50E0', '#6577F3', '#8FD0EF', '#0FADCF'],
+  labels: ['Desktop', 'Tablet', 'Mobile', 'Unknown'],
+  legend: {
+    show: false,
+    position: 'bottom',
+  },
+
+  plotOptions: {
+    pie: {
+      donut: {
+        size: '65%',
+        background: 'transparent',
+      },
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  responsive: [
+    {
+      breakpoint: 2600,
+      options: {
+        chart: {
+          width: 380,
+        },
+      },
+    },
+    {
+      breakpoint: 640,
+      options: {
+        chart: {
+          width: 200,
+        },
+      },
+    },
+  ],
+};
+
+const ChartThree: React.FC = () => {
+  const [state, setState] = useState<ChartThreeState>({
+    series: [65, 34, 12, 56],
+  });
+
+  const handleReset = () => {
+    setState((prevState) => ({
+      ...prevState,
+      series: [65, 34, 12, 56],
+    }));
+  };
+  handleReset;
+
+  return (
+    <div className="sm:px-7.5 col-span-12 rounded-sm border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-5">
+      <div className="mb-3 justify-between gap-4 sm:flex">
+        <div>
+          <h5 className="text-xl font-semibold text-black dark:text-white">
+            Visitors Analytics
+          </h5>
+        </div>
+        <div>
+          <div className="relative z-20 inline-block">
+            <select
+              name=""
+              id=""
+              className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
+            >
+              <option value="" className="dark:bg-boxdark">
+                Monthly
+              </option>
+              <option value="" className="dark:bg-boxdark">
+                Yearly
+              </option>
+            </select>
+            <span className="absolute right-3 top-1/2 z-10 -translate-y-1/2">
+              <svg
+                width="10"
+                height="6"
+                viewBox="0 0 10 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
+                  fill="#637381"
+                />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
+                  fill="#637381"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-2">
+        <div id="chartThree" className="mx-auto flex justify-center">
+          <ReactApexChart
+            options={options}
+            series={state.series}
+            type="donut"
+          />
+        </div>
+      </div>
+
+      <div className="-mx-8 flex flex-wrap items-center justify-center gap-y-3">
+        <div className="sm:w-1/2 w-full px-8">
+          <div className="flex w-full items-center">
+            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-primary"></span>
+            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+              <span> Desktop </span>
+              <span> 65% </span>
+            </p>
+          </div>
+        </div>
+        <div className="sm:w-1/2 w-full px-8">
+          <div className="flex w-full items-center">
+            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#6577F3]"></span>
+            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+              <span> Tablet </span>
+              <span> 34% </span>
+            </p>
+          </div>
+        </div>
+        <div className="sm:w-1/2 w-full px-8">
+          <div className="flex w-full items-center">
+            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#8FD0EF]"></span>
+            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+              <span> Mobile </span>
+              <span> 45% </span>
+            </p>
+          </div>
+        </div>
+        <div className="sm:w-1/2 w-full px-8">
+          <div className="flex w-full items-center">
+            <span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#0FADCF]"></span>
+            <p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
+              <span> Unknown </span>
+              <span> 12% </span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartThree;

src/components/Charts/ChartTwo.tsx

@@ -0,0 +1,149 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+  colors: ['#3C50E0', '#80CAEE'],
+  chart: {
+    fontFamily: 'Satoshi, sans-serif',
+    type: 'bar',
+    height: 335,
+    stacked: true,
+    toolbar: {
+      show: false,
+    },
+    zoom: {
+      enabled: false,
+    },
+  },
+
+  responsive: [
+    {
+      breakpoint: 1536,
+      options: {
+        plotOptions: {
+          bar: {
+            borderRadius: 0,
+            columnWidth: '25%',
+          },
+        },
+      },
+    },
+  ],
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      borderRadius: 0,
+      columnWidth: '25%',
+      borderRadiusApplication: 'end',
+      borderRadiusWhenStacked: 'last',
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+
+  xaxis: {
+    categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+  },
+  legend: {
+    position: 'top',
+    horizontalAlign: 'left',
+    fontFamily: 'Satoshi',
+    fontWeight: 500,
+    fontSize: '14px',
+
+    markers: {
+      radius: 99,
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+};
+
+interface ChartTwoState {
+  series: {
+    name: string;
+    data: number[];
+  }[];
+}
+
+const ChartTwo: React.FC = () => {
+  const [state, setState] = useState<ChartTwoState>({
+    series: [
+      {
+        name: 'Sales',
+        data: [44, 55, 41, 67, 22, 43, 65],
+      },
+      {
+        name: 'Revenue',
+        data: [13, 23, 20, 8, 13, 27, 15],
+      },
+    ],
+  });
+  
+  const handleReset = () => {
+    setState((prevState) => ({
+      ...prevState,
+    }));
+  };
+  handleReset;  
+
+  return (
+    <div className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
+      <div className="mb-4 justify-between gap-4 sm:flex">
+        <div>
+          <h4 className="text-xl font-semibold text-black dark:text-white">
+            Profit this week
+          </h4>
+        </div>
+        <div>
+          <div className="relative z-20 inline-block">
+            <select
+              name="#"
+              id="#"
+              className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
+            >
+              <option value="" className='dark:bg-boxdark'>This Week</option>
+              <option value="" className='dark:bg-boxdark'>Last Week</option>
+            </select>
+            <span className="absolute top-1/2 right-3 z-10 -translate-y-1/2">
+              <svg
+                width="10"
+                height="6"
+                viewBox="0 0 10 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
+                  fill="#637381"
+                />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
+                  fill="#637381"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div id="chartTwo" className="-ml-5 -mb-9">
+          <ReactApexChart
+            options={options}
+            series={state.series}
+            type="bar"
+            height={350}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartTwo;

src/components/Chat/ChatCard.tsx

@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom';
+import { Chat } from '../../types/chat';
+import UserOne from '../../images/user/user-01.png';
+import UserTwo from '../../images/user/user-02.png';
+import UserThree from '../../images/user/user-03.png';
+import UserFour from '../../images/user/user-04.png';
+import UserFive from '../../images/user/user-05.png';
+
+const chatData: Chat[] = [
+  {
+    avatar: UserOne,
+    name: 'Devid Heilo',
+    text: 'How are you?',
+    time: 12,
+    textCount: 3,
+    color: '#10B981',
+  },
+  {
+    avatar: UserTwo,
+    name: 'Henry Fisher',
+    text: 'Waiting for you!',
+    time: 12,
+    textCount: 0,
+    color: '#DC3545',
+  },
+  {
+    avatar: UserFour,
+    name: 'Jhon Doe',
+    text: "What's up?",
+    time: 32,
+    textCount: 0,
+    color: '#10B981',
+  },
+  {
+    avatar: UserFive,
+    name: 'Jane Doe',
+    text: 'Great',
+    time: 32,
+    textCount: 2,
+    color: '#FFBA00',
+  },
+  {
+    avatar: UserOne,
+    name: 'Jhon Doe',
+    text: 'How are you?',
+    time: 32,
+    textCount: 0,
+    color: '#10B981',
+  },
+  {
+    avatar: UserThree,
+    name: 'Jhon Doe',
+    text: 'How are you?',
+    time: 32,
+    textCount: 3,
+    color: '#FFBA00',
+  },
+];
+
+const ChatCard = () => {
+  return (
+    <div className="col-span-12 rounded-sm border border-stroke bg-white py-6 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
+      <h4 className="mb-6 px-7.5 text-xl font-semibold text-black dark:text-white">
+        Chats
+      </h4>
+
+      <div>
+        {chatData.map((chat, key) => (
+          <Link
+            to="/"
+            className="flex items-center gap-5 py-3 px-7.5 hover:bg-gray-3 dark:hover:bg-meta-4"
+            key={key}
+          >
+            <div className="relative h-14 w-14 rounded-full">
+              <img src={chat.avatar} alt="User" />
+              <span
+                className="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full border-2 border-white"
+                style={{backgroundColor: chat.color}}
+              ></span>
+            </div>
+
+            <div className="flex flex-1 items-center justify-between">
+              <div>
+                <h5 className="font-medium text-black dark:text-white">
+                  {chat.name}
+                </h5>
+                <p>
+                  <span className="text-sm text-black dark:text-white">
+                    {chat.text}
+                  </span>
+                  <span className="text-xs"> . {chat.time} min</span>
+                </p>
+              </div>
+              {chat.textCount !== 0 && (
+                <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
+                  <span className="text-sm font-medium text-white">
+                    {' '}
+                    {chat.textCount}
+                  </span>
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ChatCard;

src/components/Checkboxes/CheckboxFive.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+const CheckboxFive = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="checkboxLabelFive"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="checkboxLabelFive"
+            className="sr-only"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          />
+          <div
+            className={`box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${
+              isChecked && '!border-4'
+            }`}
+          >
+            <span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span>
+          </div>
+        </div>
+        Checkbox Text
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxFive;

src/components/Checkboxes/CheckboxFour.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+const CheckboxFour = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="checkboxLabelFour"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="checkboxLabelFour"
+            className="sr-only"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          />
+          <div
+            className={`mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
+              isChecked && 'border-primary'
+            }`}
+          >
+            <span
+              className={`h-2.5 w-2.5 rounded-full bg-transparent ${
+                isChecked && '!bg-primary'
+              }`}
+            >
+              {' '}
+            </span>
+          </div>
+        </div>
+        Checkbox Text
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxFour;

src/components/Checkboxes/CheckboxOne.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+const CheckboxOne = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="checkboxLabelOne"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="checkboxLabelOne"
+            className="sr-only"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          />
+          <div
+            className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+              isChecked && 'border-primary bg-gray dark:bg-transparent'
+            }`}
+          >
+            <span
+              className={`h-2.5 w-2.5 rounded-sm ${isChecked && 'bg-primary'}`}
+            ></span>
+          </div>
+        </div>
+        Checkbox Text
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxOne;

src/components/Checkboxes/CheckboxThree.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+const CheckboxThree = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="checkboxLabelThree"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="checkboxLabelThree"
+            className="sr-only"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          />
+          <div
+            className={`box mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+              isChecked && 'border-primary bg-gray dark:bg-transparent'
+            }`}
+          >
+            <span
+              className={`text-primary opacity-0 ${
+                isChecked && '!opacity-100'
+              }`}
+            >
+              <svg
+                className="h-3.5 w-3.5 stroke-current"
+                fill="none"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              </svg>
+            </span>
+          </div>
+        </div>
+        Checkbox Text
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxThree;

src/components/Checkboxes/CheckboxTwo.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+const CheckboxTwo = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="checkboxLabelTwo"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="checkboxLabelTwo"
+            className="sr-only"
+            onChange={() => {
+              setIsChecked(!isChecked);
+            }}
+          />
+          <div
+            className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
+              isChecked && 'border-primary bg-gray dark:bg-transparent'
+            }`}
+          >
+            <span className={`opacity-0 ${isChecked && '!opacity-100'}`}>
+              <svg
+                width="11"
+                height="8"
+                viewBox="0 0 11 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
+                  fill="#3056D3"
+                  stroke="#3056D3"
+                  strokeWidth="0.4"
+                ></path>
+              </svg>
+            </span>
+          </div>
+        </div>
+        Checkbox Text
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxTwo;

src/components/ClickOutside.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, useEffect } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  exceptionRef?: React.RefObject<HTMLElement>;
+  onClick: () => void;
+  className?: string;
+}
+
+const ClickOutside: React.FC<Props> = ({
+  children,
+  exceptionRef,
+  onClick,
+  className,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickListener = (event: MouseEvent) => {
+      let clickedInside: null | boolean = false;
+      if (exceptionRef) {
+        clickedInside =
+          (wrapperRef.current &&
+            wrapperRef.current.contains(event.target as Node)) ||
+          (exceptionRef.current && exceptionRef.current === event.target) ||
+          (exceptionRef.current &&
+            exceptionRef.current.contains(event.target as Node));
+      } else {
+        clickedInside =
+          wrapperRef.current &&
+          wrapperRef.current.contains(event.target as Node);
+      }
+
+      if (!clickedInside) onClick();
+    };
+
+    document.addEventListener('mousedown', handleClickListener);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickListener);
+    };
+  }, [exceptionRef, onClick]);
+
+  return (
+    <div ref={wrapperRef} className={`${className || ''}`}>
+      {children}
+    </div>
+  );
+};
+
+export default ClickOutside;

src/components/Dropdowns/DropdownDefault.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+
+const DropdownDefault = () => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef<any>(null);
+  const dropdown = useRef<any>(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }: MouseEvent) => {
+      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 }: KeyboardEvent) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener("keydown", keyHandler);
+    return () => document.removeEventListener("keydown", keyHandler);
+  });
+
+  return (
+    <div className="relative flex">
+      <button
+        className="text-[#98A6AD] hover:text-body"
+        ref={trigger}
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+      >
+        <svg
+          className="fill-current"
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2.25 11.25C3.49264 11.25 4.5 10.2426 4.5 9C4.5 7.75736 3.49264 6.75 2.25 6.75C1.00736 6.75 0 7.75736 0 9C0 10.2426 1.00736 11.25 2.25 11.25Z"
+            fill=""
+          />
+          <path
+            d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z"
+            fill=""
+          />
+          <path
+            d="M15.75 11.25C16.9926 11.25 18 10.2426 18 9C18 7.75736 16.9926 6.75 15.75 6.75C14.5074 6.75 13.5 7.75736 13.5 9C13.5 10.2426 14.5074 11.25 15.75 11.25Z"
+            fill=""
+          />
+        </svg>
+      </button>
+      <div
+        ref={dropdown}
+        onFocus={() => setDropdownOpen(true)}
+        onBlur={() => setDropdownOpen(false)}
+        className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
+          dropdownOpen === true ? 'block' : 'hidden'
+        }`}
+      >
+        <button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
+          <svg
+            className="fill-current"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clipPath="url(#clip0_62_9787)">
+              <path
+                d="M15.55 2.97499C15.55 2.77499 15.475 2.57499 15.325 2.42499C15.025 2.12499 14.725 1.82499 14.45 1.52499C14.175 1.24999 13.925 0.974987 13.65 0.724987C13.525 0.574987 13.375 0.474986 13.175 0.449986C12.95 0.424986 12.75 0.474986 12.575 0.624987L10.875 2.32499H2.02495C1.17495 2.32499 0.449951 3.02499 0.449951 3.89999V14C0.449951 14.85 1.14995 15.575 2.02495 15.575H12.15C13 15.575 13.725 14.875 13.725 14V5.12499L15.35 3.49999C15.475 3.34999 15.55 3.17499 15.55 2.97499ZM8.19995 8.99999C8.17495 9.02499 8.17495 9.02499 8.14995 9.02499L6.34995 9.62499L6.94995 7.82499C6.94995 7.79999 6.97495 7.79999 6.97495 7.77499L11.475 3.27499L12.725 4.49999L8.19995 8.99999ZM12.575 14C12.575 14.25 12.375 14.45 12.125 14.45H2.02495C1.77495 14.45 1.57495 14.25 1.57495 14V3.87499C1.57495 3.62499 1.77495 3.42499 2.02495 3.42499H9.72495L6.17495 6.99999C6.04995 7.12499 5.92495 7.29999 5.87495 7.49999L4.94995 10.3C4.87495 10.5 4.92495 10.675 5.02495 10.85C5.09995 10.95 5.24995 11.1 5.52495 11.1H5.62495L8.49995 10.15C8.67495 10.1 8.84995 9.97499 8.97495 9.84999L12.575 6.24999V14ZM13.5 3.72499L12.25 2.49999L13.025 1.72499C13.225 1.92499 14.05 2.74999 14.25 2.97499L13.5 3.72499Z"
+                fill=""
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_62_9787">
+                <rect width="16" height="16" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+          Edit
+        </button>
+        <button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
+          <svg
+            className="fill-current"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.225 2.20005H10.3V1.77505C10.3 1.02505 9.70005 0.425049 8.95005 0.425049H7.02505C6.27505 0.425049 5.67505 1.02505 5.67505 1.77505V2.20005H3.75005C3.02505 2.20005 2.42505 2.80005 2.42505 3.52505V4.27505C2.42505 4.82505 2.75005 5.27505 3.22505 5.47505L3.62505 13.75C3.67505 14.775 4.52505 15.575 5.55005 15.575H10.4C11.425 15.575 12.275 14.775 12.325 13.75L12.75 5.45005C13.225 5.25005 13.55 4.77505 13.55 4.25005V3.50005C13.55 2.80005 12.95 2.20005 12.225 2.20005ZM6.82505 1.77505C6.82505 1.65005 6.92505 1.55005 7.05005 1.55005H8.97505C9.10005 1.55005 9.20005 1.65005 9.20005 1.77505V2.20005H6.85005V1.77505H6.82505ZM3.57505 3.52505C3.57505 3.42505 3.65005 3.32505 3.77505 3.32505H12.225C12.325 3.32505 12.425 3.40005 12.425 3.52505V4.27505C12.425 4.37505 12.35 4.47505 12.225 4.47505H3.77505C3.67505 4.47505 3.57505 4.40005 3.57505 4.27505V3.52505V3.52505ZM10.425 14.45H5.57505C5.15005 14.45 4.80005 14.125 4.77505 13.675L4.40005 5.57505H11.625L11.25 13.675C11.2 14.1 10.85 14.45 10.425 14.45Z"
+              fill=""
+            />
+            <path
+              d="M8.00005 8.1001C7.70005 8.1001 7.42505 8.3501 7.42505 8.6751V11.8501C7.42505 12.1501 7.67505 12.4251 8.00005 12.4251C8.30005 12.4251 8.57505 12.1751 8.57505 11.8501V8.6751C8.57505 8.3501 8.30005 8.1001 8.00005 8.1001Z"
+              fill=""
+            />
+            <path
+              d="M9.99994 8.60004C9.67494 8.57504 9.42494 8.80004 9.39994 9.12504L9.24994 11.325C9.22494 11.625 9.44994 11.9 9.77494 11.925C9.79994 11.925 9.79994 11.925 9.82494 11.925C10.1249 11.925 10.3749 11.7 10.3749 11.4L10.5249 9.20004C10.5249 8.87504 10.2999 8.62504 9.99994 8.60004Z"
+              fill=""
+            />
+            <path
+              d="M5.97497 8.60004C5.67497 8.62504 5.42497 8.90004 5.44997 9.20004L5.62497 11.4C5.64997 11.7 5.89997 11.925 6.17497 11.925C6.19997 11.925 6.19997 11.925 6.22497 11.925C6.52497 11.9 6.77497 11.625 6.74997 11.325L6.57497 9.12504C6.57497 8.80004 6.29997 8.57504 5.97497 8.60004Z"
+              fill=""
+            />
+          </svg>
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DropdownDefault;

src/components/Forms/DatePicker/DatePickerOne.tsx

@@ -0,0 +1,52 @@
+import flatpickr from 'flatpickr';
+import { useEffect } from 'react';
+
+const DatePickerOne = () => {
+  useEffect(() => {
+    // Init flatpickr
+    flatpickr('.form-datepicker', {
+      mode: 'single',
+      static: true,
+      monthSelectorType: 'static',
+      dateFormat: 'M j, Y',
+      prevArrow:
+        '<svg className="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 className="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>',
+    });
+
+    
+  }, []);
+
+  return (
+    <div>
+      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+        Date picker
+      </label>
+      <div className="relative">
+        <input
+          className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+          placeholder="mm/dd/yyyy"
+          data-class="flatpickr-right"
+        />
+
+        <div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.7504 2.9812H14.2879V2.36245C14.2879 2.02495 14.0066 1.71558 13.641 1.71558C13.2754 1.71558 12.9941 1.99683 12.9941 2.36245V2.9812H4.97852V2.36245C4.97852 2.02495 4.69727 1.71558 4.33164 1.71558C3.96602 1.71558 3.68477 1.99683 3.68477 2.36245V2.9812H2.25039C1.29414 2.9812 0.478516 3.7687 0.478516 4.75308V14.5406C0.478516 15.4968 1.26602 16.3125 2.25039 16.3125H15.7504C16.7066 16.3125 17.5223 15.525 17.5223 14.5406V4.72495C17.5223 3.7687 16.7066 2.9812 15.7504 2.9812ZM1.77227 8.21245H4.16289V10.9968H1.77227V8.21245ZM5.42852 8.21245H8.38164V10.9968H5.42852V8.21245ZM8.38164 12.2625V15.0187H5.42852V12.2625H8.38164V12.2625ZM9.64727 12.2625H12.6004V15.0187H9.64727V12.2625ZM9.64727 10.9968V8.21245H12.6004V10.9968H9.64727ZM13.8379 8.21245H16.2285V10.9968H13.8379V8.21245ZM2.25039 4.24683H3.71289V4.83745C3.71289 5.17495 3.99414 5.48433 4.35977 5.48433C4.72539 5.48433 5.00664 5.20308 5.00664 4.83745V4.24683H13.0504V4.83745C13.0504 5.17495 13.3316 5.48433 13.6973 5.48433C14.0629 5.48433 14.3441 5.20308 14.3441 4.83745V4.24683H15.7504C16.0316 4.24683 16.2566 4.47183 16.2566 4.75308V6.94683H1.77227V4.75308C1.77227 4.47183 1.96914 4.24683 2.25039 4.24683ZM1.77227 14.5125V12.2343H4.16289V14.9906H2.25039C1.96914 15.0187 1.77227 14.7937 1.77227 14.5125ZM15.7504 15.0187H13.8379V12.2625H16.2285V14.5406C16.2566 14.7937 16.0316 15.0187 15.7504 15.0187Z"
+              fill="#64748B"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerOne;

src/components/Forms/DatePicker/DatePickerTwo.tsx

@@ -0,0 +1,52 @@
+import flatpickr from 'flatpickr';
+import { useEffect } from 'react';
+
+const DatePickerTwo = () => {
+  useEffect(() => {
+    // Init flatpickr
+     flatpickr('.form-datepicker', {
+      mode: 'single',
+      static: true,
+      monthSelectorType: 'static',
+      dateFormat: 'M j, Y',
+      prevArrow:
+        '<svg className="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 className="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>',
+    });
+
+    
+  }, []);
+
+  return (
+    <div>
+      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+        Select date
+      </label>
+      <div className="relative">
+        <input
+          className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+          placeholder="mm/dd/yyyy"
+          data-class="flatpickr-right"
+        />
+
+        <div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.0002 12.8249C8.83145 12.8249 8.69082 12.7687 8.5502 12.6562L2.08145 6.2999C1.82832 6.04678 1.82832 5.65303 2.08145 5.3999C2.33457 5.14678 2.72832 5.14678 2.98145 5.3999L9.0002 11.278L15.0189 5.34365C15.2721 5.09053 15.6658 5.09053 15.9189 5.34365C16.1721 5.59678 16.1721 5.99053 15.9189 6.24365L9.45019 12.5999C9.30957 12.7405 9.16895 12.8249 9.0002 12.8249Z"
+              fill="#64748B"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerTwo;

src/components/Forms/MultiSelect.tsx

@@ -0,0 +1,226 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface Option {
+  value: string;
+  text: string;
+  selected: boolean;
+  element?: HTMLElement;
+}
+
+interface DropdownProps {
+  id: string;
+}
+
+const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
+  const [options, setOptions] = useState<Option[]>([]);
+  const [selected, setSelected] = useState<number[]>([]);
+  const [show, setShow] = useState(false);
+  const dropdownRef = useRef<any>(null);
+  const trigger = useRef<any>(null);
+
+  useEffect(() => {
+    const loadOptions = () => {
+      const select = document.getElementById(id) as HTMLSelectElement | null;
+      if (select) {
+        const newOptions: Option[] = [];
+        for (let i = 0; i < select.options.length; i++) {
+          newOptions.push({
+            value: select.options[i].value,
+            text: select.options[i].innerText,
+            selected: select.options[i].hasAttribute('selected'),
+          });
+        }
+        setOptions(newOptions);
+      }
+    };
+
+    loadOptions();
+  }, [id]);
+
+   const open = () => {
+     setShow(true);
+   };
+
+   const isOpen = () => {
+     return show === true;
+   };
+
+ const select = (index: number, event: React.MouseEvent) => {
+   const newOptions = [...options];
+
+   if (!newOptions[index].selected) {
+     newOptions[index].selected = true;
+     newOptions[index].element = event.currentTarget as HTMLElement;
+     setSelected([...selected, index]);
+   } else {
+     const selectedIndex = selected.indexOf(index);
+     if (selectedIndex !== -1) {
+       newOptions[index].selected = false;
+       setSelected(selected.filter((i) => i !== index));
+     }
+   }
+
+   setOptions(newOptions);
+ };
+
+  const remove = (index: number) => {
+    const newOptions = [...options];
+    const selectedIndex = selected.indexOf(index);
+
+    if (selectedIndex !== -1) {
+      newOptions[index].selected = false;
+      setSelected(selected.filter((i) => i !== index));
+      setOptions(newOptions);
+    }
+  };
+
+  const selectedValues = () => {
+    return selected.map((option) => options[option].value);
+  };
+
+    useEffect(() => {
+      const clickHandler = ({ target }: MouseEvent) => {
+        if (!dropdownRef.current) return;
+        if (
+          !show ||
+          dropdownRef.current.contains(target) ||
+          trigger.current.contains(target)
+        )
+          return;
+        setShow(false);
+      };
+      document.addEventListener('click', clickHandler);
+      return () => document.removeEventListener('click', clickHandler);
+    });
+
+  return (
+    <div className="relative z-50">
+      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+        Multiselect Dropdown
+      </label>
+      <div>
+        <select className="hidden" id={id}>
+          <option value="1">Option 2</option>
+          <option value="2">Option 3</option>
+          <option value="3">Option 4</option>
+          <option value="4">Option 5</option>
+        </select>
+
+        <div className="flex flex-col items-center">
+          <input name="values" type="hidden" defaultValue={selectedValues()} />
+          <div className="relative z-20 inline-block w-full">
+            <div className="relative flex flex-col items-center">
+              <div ref={trigger} onClick={open} className="w-full">
+                <div className="mb-2 flex rounded border border-stroke py-2 pl-3 pr-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
+                  <div className="flex flex-auto flex-wrap gap-3">
+                    {selected.map((index) => (
+                      <div
+                        key={index}
+                        className="my-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray px-2.5 py-1.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"
+                      >
+                        <div className="max-w-full flex-initial">
+                          {options[index].text}
+                        </div>
+                        <div className="flex flex-auto flex-row-reverse">
+                          <div
+                            onClick={() => remove(index)}
+                            className="cursor-pointer pl-2 hover:text-danger"
+                          >
+                            <svg
+                              className="fill-current"
+                              role="button"
+                              width="12"
+                              height="12"
+                              viewBox="0 0 12 12"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M9.35355 3.35355C9.54882 3.15829 9.54882 2.84171 9.35355 2.64645C9.15829 2.45118 8.84171 2.45118 8.64645 2.64645L6 5.29289L3.35355 2.64645C3.15829 2.45118 2.84171 2.45118 2.64645 2.64645C2.45118 2.84171 2.45118 3.15829 2.64645 3.35355L5.29289 6L2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L6 6.70711L8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L6.70711 6L9.35355 3.35355Z"
+                                fill="currentColor"
+                              ></path>
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                    {selected.length === 0 && (
+                      <div className="flex-1">
+                        <input
+                          placeholder="Select an option"
+                          className="h-full w-full appearance-none bg-transparent p-1 px-2 outline-none"
+                          defaultValue={selectedValues()}
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex w-8 items-center py-1 pl-1 pr-1">
+                    <button
+                      type="button"
+                      onClick={open}
+                      className="h-6 w-6 cursor-pointer outline-none focus:outline-none"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g opacity="0.8">
+                          <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                            fill="#637381"
+                          ></path>
+                        </g>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div className="w-full px-4">
+                <div
+                  className={`max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded bg-white shadow dark:bg-form-input ${
+                    isOpen() ? '' : 'hidden'
+                  }`}
+                  ref={dropdownRef}
+                  onFocus={() => setShow(true)}
+                  onBlur={() => setShow(false)}
+                >
+                  <div className="flex w-full flex-col">
+                    {options.map((option, index) => (
+                      <div key={index}>
+                        <div
+                          className="w-full cursor-pointer rounded-t border-b border-stroke hover:bg-primary/5 dark:border-form-strokedark"
+                          onClick={(event) => select(index, event)}
+                        >
+                          <div
+                            className={`relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
+                              option.selected ? 'border-primary' : ''
+                            }`}
+                          >
+                            <div className="flex w-full items-center">
+                              <div className="mx-2 leading-6">
+                                {option.text}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelect;

src/components/Forms/SelectGroup/SelectGroupOne.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+const SelectGroupOne: React.FC = () => {
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
+
+  const changeTextColor = () => {
+    setIsOptionSelected(true);
+  };
+
+  return (
+    <div className="mb-4.5">
+      <label className="mb-2.5 block text-black dark:text-white">
+        {' '}
+        Subject{' '}
+      </label>
+
+      <div className="relative z-20 bg-transparent dark:bg-form-input">
+        <select
+          value={selectedOption}
+          onChange={(e) => {
+            setSelectedOption(e.target.value);
+            changeTextColor();
+          }}
+          className={`relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${
+            isOptionSelected ? 'text-black dark:text-white' : ''
+          }`}
+        >
+          <option value="" disabled className="text-body dark:text-bodydark">
+            Select your subject
+          </option>
+          <option value="USA" className="text-body dark:text-bodydark">
+            USA
+          </option>
+          <option value="UK" className="text-body dark:text-bodydark">
+            UK
+          </option>
+          <option value="Canada" className="text-body dark:text-bodydark">
+            Canada
+          </option>
+        </select>
+
+        <span className="absolute top-1/2 right-4 z-30 -translate-y-1/2">
+          <svg
+            className="fill-current"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.8">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                fill=""
+              ></path>
+            </g>
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SelectGroupOne;

src/components/Forms/SelectGroup/SelectGroupTwo.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+const SelectGroupTwo: React.FC = () => {
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
+
+  const changeTextColor = () => {
+    setIsOptionSelected(true);
+  };
+
+  return (
+    <div>
+      <label className="mb-3 block text-black dark:text-white">
+        Select Country
+      </label>
+
+      <div className="relative z-20 bg-white dark:bg-form-input">
+        <span className="absolute top-1/2 left-4 z-30 -translate-y-1/2">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.8">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10.0007 2.50065C5.85852 2.50065 2.50065 5.85852 2.50065 10.0007C2.50065 14.1428 5.85852 17.5007 10.0007 17.5007C14.1428 17.5007 17.5007 14.1428 17.5007 10.0007C17.5007 5.85852 14.1428 2.50065 10.0007 2.50065ZM0.833984 10.0007C0.833984 4.93804 4.93804 0.833984 10.0007 0.833984C15.0633 0.833984 19.1673 4.93804 19.1673 10.0007C19.1673 15.0633 15.0633 19.1673 10.0007 19.1673C4.93804 19.1673 0.833984 15.0633 0.833984 10.0007Z"
+                fill="#637381"
+              ></path>
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0.833984 9.99935C0.833984 9.53911 1.20708 9.16602 1.66732 9.16602H18.334C18.7942 9.16602 19.1673 9.53911 19.1673 9.99935C19.1673 10.4596 18.7942 10.8327 18.334 10.8327H1.66732C1.20708 10.8327 0.833984 10.4596 0.833984 9.99935Z"
+                fill="#637381"
+              ></path>
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M7.50084 10.0008C7.55796 12.5632 8.4392 15.0301 10.0006 17.0418C11.5621 15.0301 12.4433 12.5632 12.5005 10.0008C12.4433 7.43845 11.5621 4.97153 10.0007 2.95982C8.4392 4.97153 7.55796 7.43845 7.50084 10.0008ZM10.0007 1.66749L9.38536 1.10547C7.16473 3.53658 5.90275 6.69153 5.83417 9.98346C5.83392 9.99503 5.83392 10.0066 5.83417 10.0182C5.90275 13.3101 7.16473 16.4651 9.38536 18.8962C9.54325 19.069 9.76655 19.1675 10.0007 19.1675C10.2348 19.1675 10.4581 19.069 10.6159 18.8962C12.8366 16.4651 14.0986 13.3101 14.1671 10.0182C14.1674 10.0066 14.1674 9.99503 14.1671 9.98346C14.0986 6.69153 12.8366 3.53658 10.6159 1.10547L10.0007 1.66749Z"
+                fill="#637381"
+              ></path>
+            </g>
+          </svg>
+        </span>
+
+        <select
+          value={selectedOption}
+          onChange={(e) => {
+            setSelectedOption(e.target.value);
+            changeTextColor();
+          }}
+          className={`relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input ${
+            isOptionSelected ? 'text-black dark:text-white' : ''
+          }`}
+        >
+          <option value="" disabled className="text-body dark:text-bodydark">
+            Select Country
+          </option>
+          <option value="USA" className="text-body dark:text-bodydark">
+            USA
+          </option>
+          <option value="UK" className="text-body dark:text-bodydark">
+            UK
+          </option>
+          <option value="Canada" className="text-body dark:text-bodydark">
+            Canada
+          </option>
+        </select>
+
+        <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.8">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                fill="#637381"
+              ></path>
+            </g>
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SelectGroupTwo;

src/components/Header/DarkModeSwitcher.tsx

@@ -0,0 +1,65 @@
+import useColorMode from '../../hooks/useColorMode';
+
+const DarkModeSwitcher = () => {
+  const [colorMode, setColorMode] = useColorMode();
+
+  return (
+    <li>
+      <label
+        className={`relative m-0 block h-7.5 w-14 rounded-full ${
+          colorMode === 'dark' ? 'bg-primary' : 'bg-stroke'
+        }`}
+      >
+        <input
+          type="checkbox"
+          onChange={() => {
+            if (typeof setColorMode === 'function') {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }
+          }}
+          className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
+        />
+        <span
+          className={`absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
+            colorMode === 'dark' && '!right-[3px] !translate-x-full'
+          }`}
+        >
+          <span className="dark:hidden">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z"
+                fill="#969AA1"
+              />
+              <path
+                d="M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z"
+                fill="#969AA1"
+              />
+            </svg>
+          </span>
+          <span className="hidden dark:inline-block">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z"
+                fill="#969AA1"
+              />
+            </svg>
+          </span>
+        </span>
+      </label>
+    </li>
+  );
+};
+
+export default DarkModeSwitcher;

src/components/Header/DropdownMessage.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import ClickOutside from '../ClickOutside';
+
+import UserOne from '../../images/user/user-01.png';
+import UserTwo from '../../images/user/user-02.png';
+import UserThree from '../../images/user/user-03.png';
+import UserFour from '../../images/user/user-04.png';
+
+const DropdownMessage = () => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [notifying, setNotifying] = useState(true);
+
+  return (
+    <ClickOutside onClick={() => setDropdownOpen(false)} className="relative">
+      <li className="relative">
+        <Link
+          onClick={() => {
+            setNotifying(false);
+            setDropdownOpen(!dropdownOpen);
+          }}
+          className="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
+          to="#"
+        >
+          <span
+            className={`absolute -top-0.5 -right-0.5 z-1 h-2 w-2 rounded-full bg-meta-1 ${
+              notifying === false ? 'hidden' : 'inline'
+            }`}
+          >
+            <span className="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-meta-1 opacity-75"></span>
+          </span>
+
+          <svg
+            className="fill-current duration-300 ease-in-out"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.9688 1.57495H7.03135C3.43135 1.57495 0.506348 4.41558 0.506348 7.90308C0.506348 11.3906 2.75635 13.8375 8.26885 16.3125C8.40947 16.3687 8.52197 16.3968 8.6626 16.3968C8.85947 16.3968 9.02822 16.3406 9.19697 16.2281C9.47822 16.0593 9.64697 15.75 9.64697 15.4125V14.2031H10.9688C14.5688 14.2031 17.522 11.3625 17.522 7.87495C17.522 4.38745 14.5688 1.57495 10.9688 1.57495ZM10.9688 12.9937H9.3376C8.80322 12.9937 8.35322 13.4437 8.35322 13.9781V15.0187C3.6001 12.825 1.74385 10.8 1.74385 7.9312C1.74385 5.14683 4.10635 2.8687 7.03135 2.8687H10.9688C13.8657 2.8687 16.2563 5.14683 16.2563 7.9312C16.2563 10.7156 13.8657 12.9937 10.9688 12.9937Z"
+              fill=""
+            />
+            <path
+              d="M5.42812 7.28442C5.0625 7.28442 4.78125 7.56567 4.78125 7.9313C4.78125 8.29692 5.0625 8.57817 5.42812 8.57817C5.79375 8.57817 6.075 8.29692 6.075 7.9313C6.075 7.56567 5.79375 7.28442 5.42812 7.28442Z"
+              fill=""
+            />
+            <path
+              d="M9.00015 7.28442C8.63452 7.28442 8.35327 7.56567 8.35327 7.9313C8.35327 8.29692 8.63452 8.57817 9.00015 8.57817C9.33765 8.57817 9.64702 8.29692 9.64702 7.9313C9.64702 7.56567 9.33765 7.28442 9.00015 7.28442Z"
+              fill=""
+            />
+            <path
+              d="M12.5719 7.28442C12.2063 7.28442 11.925 7.56567 11.925 7.9313C11.925 8.29692 12.2063 8.57817 12.5719 8.57817C12.9375 8.57817 13.2188 8.29692 13.2188 7.9313C13.2188 7.56567 12.9094 7.28442 12.5719 7.28442Z"
+              fill=""
+            />
+          </svg>
+        </Link>
+
+        {/* <!-- Dropdown Start --> */}
+        {dropdownOpen && (
+          <div
+            className={`absolute -right-16 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80`}
+          >
+            <div className="px-4.5 py-3">
+              <h5 className="text-sm font-medium text-bodydark2">Messages</h5>
+            </div>
+
+            <ul className="flex h-auto flex-col overflow-y-auto">
+              <li>
+                <Link
+                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="/messages"
+                >
+                  <div className="h-12.5 w-12.5 rounded-full">
+                    <img src={UserTwo} alt="User" />
+                  </div>
+
+                  <div>
+                    <h6 className="text-sm font-medium text-black dark:text-white">
+                      Mariya Desoja
+                    </h6>
+                    <p className="text-sm">I like your confidence 💪</p>
+                    <p className="text-xs">2min ago</p>
+                  </div>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="/messages"
+                >
+                  <div className="h-12.5 w-12.5 rounded-full">
+                    <img src={UserOne} alt="User" />
+                  </div>
+
+                  <div>
+                    <h6 className="text-sm font-medium text-black dark:text-white">
+                      Robert Jhon
+                    </h6>
+                    <p className="text-sm">Can you share your offer?</p>
+                    <p className="text-xs">10min ago</p>
+                  </div>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="/messages"
+                >
+                  <div className="h-12.5 w-12.5 rounded-full">
+                    <img src={UserThree} alt="User" />
+                  </div>
+
+                  <div>
+                    <h6 className="text-sm font-medium text-black dark:text-white">
+                      Henry Dholi
+                    </h6>
+                    <p className="text-sm">I cam across your profile and...</p>
+                    <p className="text-xs">1day ago</p>
+                  </div>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="/messages"
+                >
+                  <div className="h-12.5 w-12.5 rounded-full">
+                    <img src={UserFour} alt="User" />
+                  </div>
+
+                  <div>
+                    <h6 className="text-sm font-medium text-black dark:text-white">
+                      Cody Fisher
+                    </h6>
+                    <p className="text-sm">I’m waiting for you response!</p>
+                    <p className="text-xs">5days ago</p>
+                  </div>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="/messages"
+                >
+                  <div className="h-12.5 w-12.5 rounded-full">
+                    <img src={UserTwo} alt="User" />
+                  </div>
+
+                  <div>
+                    <h6 className="text-sm font-medium text-black dark:text-white">
+                      Mariya Desoja
+                    </h6>
+                    <p className="text-sm">I like your confidence 💪</p>
+                    <p className="text-xs">2min ago</p>
+                  </div>
+                </Link>
+              </li>
+            </ul>
+          </div>
+        )}
+        {/* <!-- Dropdown End --> */}
+      </li>
+    </ClickOutside>
+  );
+};
+
+export default DropdownMessage;

src/components/Header/DropdownNotification.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import ClickOutside from '../ClickOutside';
+
+const DropdownNotification = () => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [notifying, setNotifying] = useState(true);
+
+  return (
+    <ClickOutside onClick={() => setDropdownOpen(false)} className="relative">
+      <li>
+        <Link
+          onClick={() => {
+            setNotifying(false);
+            setDropdownOpen(!dropdownOpen);
+          }}
+          to="#"
+          className="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
+        >
+          <span
+            className={`absolute -top-0.5 right-0 z-1 h-2 w-2 rounded-full bg-meta-1 ${
+              notifying === false ? 'hidden' : 'inline'
+            }`}
+          >
+            <span className="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-meta-1 opacity-75"></span>
+          </span>
+
+          <svg
+            className="fill-current duration-300 ease-in-out"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16.1999 14.9343L15.6374 14.0624C15.5249 13.8937 15.4687 13.7249 15.4687 13.528V7.67803C15.4687 6.01865 14.7655 4.47178 13.4718 3.31865C12.4312 2.39053 11.0812 1.7999 9.64678 1.6874V1.1249C9.64678 0.787402 9.36553 0.478027 8.9999 0.478027C8.6624 0.478027 8.35303 0.759277 8.35303 1.1249V1.65928C8.29678 1.65928 8.24053 1.65928 8.18428 1.6874C4.92178 2.05303 2.4749 4.66865 2.4749 7.79053V13.528C2.44678 13.8093 2.39053 13.9499 2.33428 14.0343L1.7999 14.9343C1.63115 15.2155 1.63115 15.553 1.7999 15.8343C1.96865 16.0874 2.2499 16.2562 2.55928 16.2562H8.38115V16.8749C8.38115 17.2124 8.6624 17.5218 9.02803 17.5218C9.36553 17.5218 9.6749 17.2405 9.6749 16.8749V16.2562H15.4687C15.778 16.2562 16.0593 16.0874 16.228 15.8343C16.3968 15.553 16.3968 15.2155 16.1999 14.9343ZM3.23428 14.9905L3.43115 14.653C3.5999 14.3718 3.68428 14.0343 3.74053 13.6405V7.79053C3.74053 5.31553 5.70928 3.23428 8.3249 2.95303C9.92803 2.78428 11.503 3.2624 12.6562 4.2749C13.6687 5.1749 14.2312 6.38428 14.2312 7.67803V13.528C14.2312 13.9499 14.3437 14.3437 14.5968 14.7374L14.7655 14.9905H3.23428Z"
+              fill=""
+            />
+          </svg>
+        </Link>
+
+        {dropdownOpen && (
+          <div
+            className={`absolute -right-27 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80`}
+          >
+            <div className="px-4.5 py-3">
+              <h5 className="text-sm font-medium text-bodydark2">
+                Notification
+              </h5>
+            </div>
+
+            <ul className="flex h-auto flex-col overflow-y-auto">
+              <li>
+                <Link
+                  className="flex flex-col gap-2.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="#"
+                >
+                  <p className="text-sm">
+                    <span className="text-black dark:text-white">
+                      Edit your information in a swipe
+                    </span>{' '}
+                    Sint occaecat cupidatat non proident, sunt in culpa qui
+                    officia deserunt mollit anim.
+                  </p>
+
+                  <p className="text-xs">12 May, 2025</p>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex flex-col gap-2.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="#"
+                >
+                  <p className="text-sm">
+                    <span className="text-black dark:text-white">
+                      It is a long established fact
+                    </span>{' '}
+                    that a reader will be distracted by the readable.
+                  </p>
+
+                  <p className="text-xs">24 Feb, 2025</p>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex flex-col gap-2.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="#"
+                >
+                  <p className="text-sm">
+                    <span className="text-black dark:text-white">
+                      There are many variations
+                    </span>{' '}
+                    of passages of Lorem Ipsum available, but the majority have
+                    suffered
+                  </p>
+
+                  <p className="text-xs">04 Jan, 2025</p>
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="flex flex-col gap-2.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                  to="#"
+                >
+                  <p className="text-sm">
+                    <span className="text-black dark:text-white">
+                      There are many variations
+                    </span>{' '}
+                    of passages of Lorem Ipsum available, but the majority have
+                    suffered
+                  </p>
+
+                  <p className="text-xs">01 Dec, 2024</p>
+                </Link>
+              </li>
+            </ul>
+          </div>
+        )}
+      </li>
+    </ClickOutside>
+  );
+};
+
+export default DropdownNotification;

src/components/Header/index.tsx

@@ -0,0 +1,124 @@
+import { Link } from 'react-router-dom';
+import DropdownMessage from './DropdownMessage';
+import DropdownNotification from './DropdownNotification';
+import DropdownUser from './DropdownUser';
+import LogoIcon from '../../images/logo/logo-icon.svg';
+import DarkModeSwitcher from './DarkModeSwitcher';
+
+const Header = (props: {
+  sidebarOpen: string | boolean | undefined;
+  setSidebarOpen: (arg0: boolean) => void;
+}) => {
+  return (
+    <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+      <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
+          {/* <!-- Hamburger Toggle BTN --> */}
+          <button
+            aria-controls="sidebar"
+            onClick={(e) => {
+              e.stopPropagation();
+              props.setSidebarOpen(!props.sidebarOpen);
+            }}
+            className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+          >
+            <span className="relative block h-5.5 w-5.5 cursor-pointer">
+              <span className="du-block absolute right-0 h-full w-full">
+                <span
+                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
+                    !props.sidebarOpen && '!w-full delay-300'
+                  }`}
+                ></span>
+                <span
+                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
+                    !props.sidebarOpen && 'delay-400 !w-full'
+                  }`}
+                ></span>
+                <span
+                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
+                    !props.sidebarOpen && '!w-full delay-500'
+                  }`}
+                ></span>
+              </span>
+              <span className="absolute right-0 h-full w-full rotate-45">
+                <span
+                  className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
+                    !props.sidebarOpen && '!h-0 !delay-[0]'
+                  }`}
+                ></span>
+                <span
+                  className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
+                    !props.sidebarOpen && '!h-0 !delay-200'
+                  }`}
+                ></span>
+              </span>
+            </span>
+          </button>
+          {/* <!-- Hamburger Toggle BTN --> */}
+
+          <Link className="block flex-shrink-0 lg:hidden" to="/">
+            <img src={LogoIcon} alt="Logo" />
+          </Link>
+        </div>
+
+        <div className="hidden sm:block">
+          <form action="https://formbold.com/s/unique_form_id" method="POST">
+            <div className="relative">
+              <button className="absolute left-0 top-1/2 -translate-y-1/2">
+                <svg
+                  className="fill-body hover:fill-primary dark:fill-bodydark dark:hover:fill-primary"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M9.16666 3.33332C5.945 3.33332 3.33332 5.945 3.33332 9.16666C3.33332 12.3883 5.945 15 9.16666 15C12.3883 15 15 12.3883 15 9.16666C15 5.945 12.3883 3.33332 9.16666 3.33332ZM1.66666 9.16666C1.66666 5.02452 5.02452 1.66666 9.16666 1.66666C13.3088 1.66666 16.6667 5.02452 16.6667 9.16666C16.6667 13.3088 13.3088 16.6667 9.16666 16.6667C5.02452 16.6667 1.66666 13.3088 1.66666 9.16666Z"
+                    fill=""
+                  />
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13.2857 13.2857C13.6112 12.9603 14.1388 12.9603 14.4642 13.2857L18.0892 16.9107C18.4147 17.2362 18.4147 17.7638 18.0892 18.0892C17.7638 18.4147 17.2362 18.4147 16.9107 18.0892L13.2857 14.4642C12.9603 14.1388 12.9603 13.6112 13.2857 13.2857Z"
+                    fill=""
+                  />
+                </svg>
+              </button>
+
+              <input
+                type="text"
+                placeholder="Type to search..."
+                className="w-full bg-transparent pl-9 pr-4 text-black focus:outline-none dark:text-white xl:w-125"
+              />
+            </div>
+          </form>
+        </div>
+
+        <div className="flex items-center gap-3 2xsm:gap-7">
+          <ul className="flex items-center gap-2 2xsm:gap-4">
+            {/* <!-- Dark Mode Toggler --> */}
+            <DarkModeSwitcher />
+            {/* <!-- Dark Mode Toggler --> */}
+
+            {/* <!-- Notification Menu Area --> */}
+            <DropdownNotification />
+            {/* <!-- Notification Menu Area --> */}
+
+            {/* <!-- Chat Notification Area --> */}
+            <DropdownMessage />
+            {/* <!-- Chat Notification Area --> */}
+          </ul>
+
+          {/* <!-- User Area --> */}
+          <DropdownUser />
+          {/* <!-- User Area --> */}
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Maps/MapOne.tsx

@@ -0,0 +1,54 @@
+import jsVectorMap from 'jsvectormap';
+import 'jsvectormap/dist/css/jsvectormap.css';
+import { useEffect } from 'react';
+import '../../js/us-aea-en';
+
+const MapOne = () => {
+  useEffect(() => {
+    const mapOne = new jsVectorMap({
+      selector: '#mapOne',
+      map: 'us_aea_en',
+      zoomButtons: true,
+
+      regionStyle: {
+        initial: {
+          fill: '#C8D0D8',
+        },
+        hover: {
+          fillOpacity: 1,
+          fill: '#3056D3',
+        },
+      },
+      regionLabelStyle: {
+        initial: {
+          fontFamily: 'Satoshi',
+          fontWeight: 'semibold',
+          fill: '#fff',
+        },
+        hover: {
+          cursor: 'pointer',
+        },
+      },
+
+      labels: {
+        regions: {
+          render(code: string) {
+            return code.split('-')[1];
+          },
+        },
+      },
+    });
+    mapOne;
+  });
+
+  return (
+    <div className="col-span-12 rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-7">
+      <h4 className="mb-2 text-xl font-semibold text-black dark:text-white">
+        Region labels
+      </h4>
+      <div id="mapOne" className="mapOne map-btn h-90"></div>
+    </div>
+  );
+};
+
+export default MapOne;

src/components/ModalSettings.tsx

@@ -0,0 +1,238 @@
+import React, { useState } from "react";
+import dataJSON from '../../public/data.json';
+
+
+
+export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
+  const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
+  
+  const [formState, setFormState] = useState(
+    defaultValue || {
+      id: "",
+      para: "price",
+        criterion: "0",
+        value: "",
+        type: "0",
+
+    }
+  );
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const validateForm = () => {
+    if (formState.id && formState.value) {
+      setErrors([]);
+      return true;
+    } else {
+      let errorFields = [];
+      for (const [key, value] of Object.entries(formState)) {
+        console.log(key);
+        console.log(value);
+        if (!value) {
+          errorFields.push(key=="id"?"Bond ID":key);
+        }
+        else{
+        if (key=='id'){
+          if (!(Object.keys(dataJSON).includes(value)||value=="ALL")){
+            errorFields.push("INVALID_ID_"+value)
+          }
+        }
+      }
+      }
+      console.log(errorFields);
+      setErrors(errorFields);
+      return false;
+    }
+  };
+
+  const handleChange = (e) => {
+    console.log(formState.criterion);
+    console.log(e.target.name);
+    console.log(e.target.name=="para"&&e.target.value=='rating');
+    console.log(formState.criterion>1&&formState.criterion<4);
+    console.log(e.target.value);
+    console.log(e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4);
+    if (e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4) {setFormState({ ...formState, ["criterion"]: 0 });}
+    
+    console.log(formState.criterion);
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    onSubmit(formState);
+
+    closeModal();
+  };
+
+  return (
+    <div
+      className="modal-container fixed z-50 flex top-25 bottom-5 "
+      onClick={(e) => {
+        if (e.target.className === "modal-container") closeModal();
+      }}
+    >
+    
+      <div className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto">
+      <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
+        <div className="w-full flex justify-end">
+      <strong className="text-xl align-center cursor-pointer "
+      onClick={closeModal}
+      >&times;</strong>
+      </div>
+        <form>
+        <div className="grid grid-cols-3 gap-5 justify-normal">
+          <div className="form-group w-full col-span-3">
+            <label  className="mb-3 block text-sm font-medium text-black dark:text-white"
+                        htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters below)</label>
+            <input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                          name="id" onChange={handleChange} value={formState.id} />
+          </div>
+          
+          <div className="form-group ">
+            <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="para">Parameter</label>
+            <div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
+                  <div className="flex flex-wrap items-center"></div>
+                  <span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
+                      {formState.para}
+                      
+                            
+                    </span>
+                    <select
+                    className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
+                        
+                    name="para"
+                    onChange={handleChange}
+                    value={formState.para}
+                    >
+                      {fields.map((item:any,idx:number)=>(<option key={idx} value={item}>{item}</option>))}
+                    
+                    </select>
+                    <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
+                            <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            >
+                            <g opacity="0.8">
+                                <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                                fill="#637381"
+                                ></path>
+                            </g>
+                            </svg>
+                        </span>
+                    </div>
+            
+            </div>
+            
+          
+          
+          <div className="form-group">
+          <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="criterion">Criterion</label>
+            <div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
+                  <div className="flex flex-wrap items-center"></div>
+                  <span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
+                      {formState.criterion==0?"goes down by":formState.criterion==1?"goes up by":formState.criterion==2?"is smaller than":formState.criterion==3?"is greater than":"is equal to"}
+                    </span>
+            <select
+            className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
+              name="criterion"
+              onChange={handleChange}
+              value={formState.criterion}
+            >
+              <option value="0">goes down by</option>
+              <option value="1">goes up by</option>
+              {!(formState.para=='rating')&&<option value="2">is smaller than</option>}
+              {!(formState.para=='rating')&&<option value="3">is greater than</option>}
+              
+              <option value="4">is equal to</option>
+            </select>
+            <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
+                            <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            >
+                            <g opacity="0.8">
+                                <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                                fill="#637381"
+                                ></path>
+                            </g>
+                            </svg>
+                        </span>
+                        </div>
+          </div>
+            <div className="form-group w-full">
+            <label  className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="value">Value to give Alert</label>
+            <input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                           name="value" onChange={handleChange} value={formState.value} />
+          </div>
+          
+          <div className="form-group">
+            <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="type">Alert Type</label>
+            <div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
+                  <div className="flex flex-wrap items-center"></div>
+                  <span className={`${formState.type==0?"bg-[#04b20c]":formState.type==1?"bg-[#eab90f]":"bg-[#e13f32]"} m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark`}>
+                      {formState.type==0?"Info":formState.type==1?"Warning":"Alert"}
+                      
+                            
+                    </span>
+            <select
+            className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
+              name="type"
+              onChange={handleChange}
+              value={formState.type}
+            >
+              <option value="0">Info</option>
+              <option value="1">Warning</option>
+              <option value="2">Alert</option>
+            </select>
+            <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
+                            <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            >
+                            <g opacity="0.8">
+                                <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+                                fill="#637381"
+                                ></path>
+                            </g>
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+          </div>
+          {errors.filter((item:string)=>(item.startsWith("INVALID_ID"))).length>0 && <><br/><div className="error">{errors.filter((item:string)=>(item.startsWith("INVALID_ID")))[0].replace("INVALID_ID_","")} is not a valid bond</div></>}
+          {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).length>0 && (<div className="error">Please input {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).join(", ")}</div>)}
+          
+          
+          <br></br>
+          <button className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
+                      type="submit" onClick={handleSubmit}>
+            Submit
+          </button>
+        </form>
+      </div>
+      </div>
+    </div>
+    
+  );
+};

src/components/PageTitle.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+interface PageTitleProps {
+  title: string;
+}
+
+const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    document.title = title;
+  }, [location, title]);
+
+  return null; // This component doesn't render anything
+};
+
+export default PageTitle;

src/components/Sidebar/SidebarLinkGroup.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useState } from 'react';
+
+interface SidebarLinkGroupProps {
+  children: (handleClick: () => void, open: boolean) => ReactNode;
+  activeCondition: boolean;
+}
+
+const SidebarLinkGroup = ({
+  children,
+  activeCondition,
+}: SidebarLinkGroupProps) => {
+  const [open, setOpen] = useState<boolean>(activeCondition);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  return <li>{children(handleClick, open)}</li>;
+};
+
+export default SidebarLinkGroup;

src/components/Switchers/SwitcherFour.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const SwitcherFour = () => {
+  const [enabled, setEnabled] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="toggle4"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="toggle4"
+            className="sr-only"
+            onChange={() => {
+              setEnabled(!enabled);
+            }}
+          />
+          <div className="block h-8 w-14 rounded-full bg-black"></div>
+          <div
+            className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
+              enabled && '!right-1 !translate-x-full'
+            }`}
+          ></div>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default SwitcherFour;

src/components/Switchers/SwitcherOne.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const SwitcherOne = () => {
+  const [enabled, setEnabled] = useState<boolean>(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="toggle1"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="toggle1"
+            className="sr-only"
+            onChange={() => {
+              setEnabled(!enabled);
+            }}
+          />
+          <div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
+          <div
+            className={`absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${
+              enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
+            }`}
+          ></div>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default SwitcherOne;

src/components/Switchers/SwitcherThree.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+const SwitcherThree = () => {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <div>
+      <label
+        htmlFor="toggle3"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            type="checkbox"
+            id="toggle3"
+            className="sr-only"
+            onChange={() => {
+              setEnabled(!enabled);
+            }}
+          />
+          <div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
+          <div
+            className={`dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
+              enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
+            }`}
+          >
+            <span className={`hidden ${enabled && '!block'}`}>
+              <svg
+                className="fill-white dark:fill-black"
+                width="11"
+                height="8"
+                viewBox="0 0 11 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
+                  fill=""
+                  stroke=""
+                  strokeWidth="0.4"
+                ></path>
+              </svg>
+            </span>
+            <span className={`${enabled && 'hidden'}`}>
+              <svg
+                className="h-4 w-4 stroke-current"
+                fill="none"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default SwitcherThree;

src/components/Switchers/SwitcherTwo.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const SwitcherTwo = () => {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <div x-data="{ switcherToggle: false }">
+      <label
+        htmlFor="toggle2"
+        className="flex cursor-pointer select-none items-center"
+      >
+        <div className="relative">
+          <input
+            id="toggle2"
+            type="checkbox"
+            className="sr-only"
+            onChange={() => {
+              setEnabled(!enabled);
+            }}
+          />
+          <div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
+          <div
+            className={`dot absolute left-0 -top-1 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${
+              enabled && '!right-0 !translate-x-full !bg-primary dark:!bg-white'
+            }`}
+          ></div>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default SwitcherTwo;

src/components/TableSettings.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs";
+import dataJSON from '../../public/data.json';
+
+export const Table = ({ rows, deleteRow, editRow }) => {
+  const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
+  
+  return (
+   
+      <div className="max-w-full overflow-x-auto table-wrapper">
+      <table className="table">
+        <thead>
+          <tr className="bg-gray-2 text-left dark:bg-meta-4">
+            <th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">Bond</th>
+            <th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">Paramter</th>
+            <th className="py-4 px-4 font-medium text-black dark:text-white">Criterion</th>
+            <th className="py-4 px-4 font-medium text-black dark:text-white">Value to give alert</th>
+            <th className="py-4 px-4 font-medium text-black dark:text-white">Alert type</th>
+            <th className="py-4 px-4 font-medium text-black dark:text-white">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row:any, idx:number) => {
+           
+
+            return (
+              <tr key={idx} className="content-center">
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.id}</td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <span className={`label label-${row.para}`}>
+                    {row.para}
+                  </span>
+                </td>
+                
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <span>
+                    {row.criterion==0?"goes down by":row.criterion==1?"goes up by":row.criterion==2?"is smaller than":row.criterion==3?"is greater than":"is equal to"}
+                  </span>
+                </td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.value}</td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <span>
+                    {row.type==0?'Info':row.type==1?"Warning":"Alert"}
+                  </span>
+                </td>
+                
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <span className="actions flex grid-cols-2 gap-4">
+                    <BsFillTrashFill
+                      className="delete-btn cursor-pointer"
+                      onClick={() => deleteRow(idx)} />
+                    
+                    <BsFillPencilFill
+                      className="edit-btn cursor-pointer"
+                      onClick={() => editRow(idx)} />
+                    
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+    
+
+  );
+};

src/components/Tables/TableOne.tsx

@@ -0,0 +1,127 @@
+import { BRAND } from '../../types/brand';
+import BrandOne from '../../images/brand/brand-01.svg';
+import BrandTwo from '../../images/brand/brand-02.svg';
+import BrandThree from '../../images/brand/brand-03.svg';
+import BrandFour from '../../images/brand/brand-04.svg';
+import BrandFive from '../../images/brand/brand-05.svg';
+
+const brandData: BRAND[] = [
+  {
+    logo: BrandOne,
+    name: 'Google',
+    visitors: 3.5,
+    revenues: '5,768',
+    sales: 590,
+    conversion: 4.8,
+  },
+  {
+    logo: BrandTwo,
+    name: 'Twitter',
+    visitors: 2.2,
+    revenues: '4,635',
+    sales: 467,
+    conversion: 4.3,
+  },
+  {
+    logo: BrandThree,
+    name: 'Github',
+    visitors: 2.1,
+    revenues: '4,290',
+    sales: 420,
+    conversion: 3.7,
+  },
+  {
+    logo: BrandFour,
+    name: 'Vimeo',
+    visitors: 1.5,
+    revenues: '3,580',
+    sales: 389,
+    conversion: 2.5,
+  },
+  {
+    logo: BrandFive,
+    name: 'Facebook',
+    visitors: 3.5,
+    revenues: '6,768',
+    sales: 390,
+    conversion: 4.2,
+  },
+];
+
+const TableOne = () => {
+  return (
+    <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+      <h4 className="mb-6 text-xl font-semibold text-black dark:text-white">
+        Top Channels
+      </h4>
+
+      <div className="flex flex-col">
+        <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
+          <div className="p-2.5 xl:p-5">
+            <h5 className="text-sm font-medium uppercase xsm:text-base">
+              Source
+            </h5>
+          </div>
+          <div className="p-2.5 text-center xl:p-5">
+            <h5 className="text-sm font-medium uppercase xsm:text-base">
+              Visitors
+            </h5>
+          </div>
+          <div className="p-2.5 text-center xl:p-5">
+            <h5 className="text-sm font-medium uppercase xsm:text-base">
+              Revenues
+            </h5>
+          </div>
+          <div className="hidden p-2.5 text-center sm:block xl:p-5">
+            <h5 className="text-sm font-medium uppercase xsm:text-base">
+              Sales
+            </h5>
+          </div>
+          <div className="hidden p-2.5 text-center sm:block xl:p-5">
+            <h5 className="text-sm font-medium uppercase xsm:text-base">
+              Conversion
+            </h5>
+          </div>
+        </div>
+
+        {brandData.map((brand, key) => (
+          <div
+            className={`grid grid-cols-3 sm:grid-cols-5 ${
+              key === brandData.length - 1
+                ? ''
+                : 'border-b border-stroke dark:border-strokedark'
+            }`}
+            key={key}
+          >
+            <div className="flex items-center gap-3 p-2.5 xl:p-5">
+              <div className="flex-shrink-0">
+                <img src={brand.logo} alt="Brand" />
+              </div>
+              <p className="hidden text-black dark:text-white sm:block">
+                {brand.name}
+              </p>
+            </div>
+
+            <div className="flex items-center justify-center p-2.5 xl:p-5">
+              <p className="text-black dark:text-white">{brand.visitors}K</p>
+            </div>
+
+            <div className="flex items-center justify-center p-2.5 xl:p-5">
+              <p className="text-meta-3">${brand.revenues}</p>
+            </div>
+
+            <div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
+              <p className="text-black dark:text-white">{brand.sales}</p>
+            </div>
+
+            <div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
+              <p className="text-meta-5">{brand.conversion}%</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TableOne;

src/components/Tables/TableThree.tsx

@@ -0,0 +1,156 @@
+import { Package } from '../../types/package';
+
+const packageData: Package[] = [
+  {
+    name: 'Free package',
+    price: 0.0,
+    invoiceDate: `Jan 13,2023`,
+    status: 'Paid',
+  },
+  {
+    name: 'Standard Package',
+    price: 59.0,
+    invoiceDate: `Jan 13,2023`,
+    status: 'Paid',
+  },
+  {
+    name: 'Business Package',
+    price: 99.0,
+    invoiceDate: `Jan 13,2023`,
+    status: 'Unpaid',
+  },
+  {
+    name: 'Standard Package',
+    price: 59.0,
+    invoiceDate: `Jan 13,2023`,
+    status: 'Pending',
+  },
+];
+
+const TableThree = () => {
+  return (
+    <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+      <div className="max-w-full overflow-x-auto">
+        <table className="w-full table-auto">
+          <thead>
+            <tr className="bg-gray-2 text-left dark:bg-meta-4">
+              <th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">
+                Package
+              </th>
+              <th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">
+                Invoice date
+              </th>
+              <th className="min-w-[120px] py-4 px-4 font-medium text-black dark:text-white">
+                Status
+              </th>
+              <th className="py-4 px-4 font-medium text-black dark:text-white">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {packageData.map((packageItem, key) => (
+              <tr key={key}>
+                <td className="border-b border-[#eee] py-5 px-4 pl-9 dark:border-strokedark xl:pl-11">
+                  <h5 className="font-medium text-black dark:text-white">
+                    {packageItem.name}
+                  </h5>
+                  <p className="text-sm">${packageItem.price}</p>
+                </td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <p className="text-black dark:text-white">
+                    {packageItem.invoiceDate}
+                  </p>
+                </td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <p
+                    className={`inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
+                      packageItem.status === 'Paid'
+                        ? 'bg-success text-success'
+                        : packageItem.status === 'Unpaid'
+                        ? 'bg-danger text-danger'
+                        : 'bg-warning text-warning'
+                    }`}
+                  >
+                    {packageItem.status}
+                  </p>
+                </td>
+                <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
+                  <div className="flex items-center space-x-3.5">
+                    <button className="hover:text-primary">
+                      <svg
+                        className="fill-current"
+                        width="18"
+                        height="18"
+                        viewBox="0 0 18 18"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.99981 14.8219C3.43106 14.8219 0.674805 9.50624 0.562305 9.28124C0.47793 9.11249 0.47793 8.88749 0.562305 8.71874C0.674805 8.49374 3.43106 3.20624 8.99981 3.20624C14.5686 3.20624 17.3248 8.49374 17.4373 8.71874C17.5217 8.88749 17.5217 9.11249 17.4373 9.28124C17.3248 9.50624 14.5686 14.8219 8.99981 14.8219ZM1.85605 8.99999C2.4748 10.0406 4.89356 13.5562 8.99981 13.5562C13.1061 13.5562 15.5248 10.0406 16.1436 8.99999C15.5248 7.95936 13.1061 4.44374 8.99981 4.44374C4.89356 4.44374 2.4748 7.95936 1.85605 8.99999Z"
+                          fill=""
+                        />
+                        <path
+                          d="M9 11.3906C7.67812 11.3906 6.60938 10.3219 6.60938 9C6.60938 7.67813 7.67812 6.60938 9 6.60938C10.3219 6.60938 11.3906 7.67813 11.3906 9C11.3906 10.3219 10.3219 11.3906 9 11.3906ZM9 7.875C8.38125 7.875 7.875 8.38125 7.875 9C7.875 9.61875 8.38125 10.125 9 10.125C9.61875 10.125 10.125 9.61875 10.125 9C10.125 8.38125 9.61875 7.875 9 7.875Z"
+                          fill=""
+                        />
+                      </svg>
+                    </button>
+                    <button className="hover:text-primary">
+                      <svg
+                        className="fill-current"
+                        width="18"
+                        height="18"
+                        viewBox="0 0 18 18"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z"
+                          fill=""
+                        />
+                        <path
+                          d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z"
+                          fill=""
+                        />
+                        <path
+                          d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z"
+                          fill=""
+                        />
+                        <path
+                          d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z"
+                          fill=""
+                        />
+                      </svg>
+                    </button>
+                    <button className="hover:text-primary">
+                      <svg
+                        className="fill-current"
+                        width="18"
+                        height="18"
+                        viewBox="0 0 18 18"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16.8754 11.6719C16.5379 11.6719 16.2285 11.9531 16.2285 12.3187V14.8219C16.2285 15.075 16.0316 15.2719 15.7785 15.2719H2.22227C1.96914 15.2719 1.77227 15.075 1.77227 14.8219V12.3187C1.77227 11.9812 1.49102 11.6719 1.12539 11.6719C0.759766 11.6719 0.478516 11.9531 0.478516 12.3187V14.8219C0.478516 15.7781 1.23789 16.5375 2.19414 16.5375H15.7785C16.7348 16.5375 17.4941 15.7781 17.4941 14.8219V12.3187C17.5223 11.9531 17.2129 11.6719 16.8754 11.6719Z"
+                          fill=""
+                        />
+                        <path
+                          d="M8.55074 12.3469C8.66324 12.4594 8.83199 12.5156 9.00074 12.5156C9.16949 12.5156 9.31012 12.4594 9.45074 12.3469L13.4726 8.43752C13.7257 8.1844 13.7257 7.79065 13.5007 7.53752C13.2476 7.2844 12.8539 7.2844 12.6007 7.5094L9.64762 10.4063V2.1094C9.64762 1.7719 9.36637 1.46252 9.00074 1.46252C8.66324 1.46252 8.35387 1.74377 8.35387 2.1094V10.4063L5.40074 7.53752C5.14762 7.2844 4.75387 7.31252 4.50074 7.53752C4.24762 7.79065 4.27574 8.1844 4.50074 8.43752L8.55074 12.3469Z"
+                          fill=""
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default TableThree;

src/components/Tables/TableTwo.tsx

@@ -0,0 +1,106 @@
+import { Product } from '../../types/product';
+import ProductOne from '../../images/product/product-01.png';
+import ProductTwo from '../../images/product/product-02.png';
+import ProductThree from '../../images/product/product-03.png';
+import ProductFour from '../../images/product/product-04.png';
+
+const productData: Product[] = [
+  {
+    image: ProductOne,
+    name: 'Apple Watch Series 7',
+    category: 'Electronics',
+    price: 296,
+    sold: 22,
+    profit: 45,
+  },
+  {
+    image: ProductTwo,
+    name: 'Macbook Pro M1',
+    category: 'Electronics',
+    price: 546,
+    sold: 12,
+    profit: 125,
+  },
+  {
+    image: ProductThree,
+    name: 'Dell Inspiron 15',
+    category: 'Electronics',
+    price: 443,
+    sold: 64,
+    profit: 247,
+  },
+  {
+    image: ProductFour,
+    name: 'HP Probook 450',
+    category: 'Electronics',
+    price: 499,
+    sold: 72,
+    profit: 103,
+  },
+];
+
+const TableTwo = () => {
+  return (
+    <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+      <div className="py-6 px-4 md:px-6 xl:px-7.5">
+        <h4 className="text-xl font-semibold text-black dark:text-white">
+          Top Products
+        </h4>
+      </div>
+
+      <div className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
+        <div className="col-span-3 flex items-center">
+          <p className="font-medium">Product Name</p>
+        </div>
+        <div className="col-span-2 hidden items-center sm:flex">
+          <p className="font-medium">Category</p>
+        </div>
+        <div className="col-span-1 flex items-center">
+          <p className="font-medium">Price</p>
+        </div>
+        <div className="col-span-1 flex items-center">
+          <p className="font-medium">Sold</p>
+        </div>
+        <div className="col-span-1 flex items-center">
+          <p className="font-medium">Profit</p>
+        </div>
+      </div>
+
+      {productData.map((product, key) => (
+        <div
+          className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5"
+          key={key}
+        >
+          <div className="col-span-3 flex items-center">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+              <div className="h-12.5 w-15 rounded-md">
+                <img src={product.image} alt="Product" />
+              </div>
+              <p className="text-sm text-black dark:text-white">
+                {product.name}
+              </p>
+            </div>
+          </div>
+          <div className="col-span-2 hidden items-center sm:flex">
+            <p className="text-sm text-black dark:text-white">
+              {product.category}
+            </p>
+          </div>
+          <div className="col-span-1 flex items-center">
+            <p className="text-sm text-black dark:text-white">
+              ${product.price}
+            </p>
+          </div>
+          <div className="col-span-1 flex items-center">
+            <p className="text-sm text-black dark:text-white">{product.sold}</p>
+          </div>
+          <div className="col-span-1 flex items-center">
+            <p className="text-sm text-meta-3">${product.profit}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TableTwo;

src/css/satoshi.css

@@ -0,0 +1,131 @@
+/**
+ * @license
+ *
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
+ *
+ * Font Styles:
+ * Satoshi Light
+ * Satoshi Light Italic
+ * Satoshi Regular
+ * Satoshi Italic
+ * Satoshi Medium
+ * Satoshi Medium Italic
+ * Satoshi Bold
+ * Satoshi Bold Italic
+ * Satoshi Black
+ * Satoshi Black Italic
+ *
+*/
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
+       url('../fonts/Satoshi-Light.woff') format('woff'),
+       url('../fonts/Satoshi-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
+       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
+       url('../fonts/Satoshi-Regular.woff') format('woff'),
+       url('../fonts/Satoshi-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
+       url('../fonts/Satoshi-Italic.woff') format('woff'),
+       url('../fonts/Satoshi-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
+       url('../fonts/Satoshi-Medium.woff') format('woff'),
+       url('../fonts/Satoshi-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
+       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
+       url('../fonts/Satoshi-Bold.woff') format('woff'),
+       url('../fonts/Satoshi-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
+       url('../fonts/Satoshi-Black.woff') format('woff'),
+       url('../fonts/Satoshi-Black.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
+       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
+       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: italic;
+}
+

src/css/style.css

@@ -0,0 +1,215 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-satoshi font-normal text-base text-body bg-whiten relative z-1;
+  }
+}
+
+@layer components {
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .chat-height {
+    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
+  }
+  .inbox-height {
+    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
+  }
+}
+
+/* third-party libraries CSS */
+
+.tableCheckbox:checked ~ div span {
+  @apply opacity-100;
+}
+.tableCheckbox:checked ~ div {
+  @apply bg-primary border-primary;
+}
+
+.apexcharts-legend-text {
+  @apply !text-body dark:!text-bodydark;
+}
+.apexcharts-text {
+  @apply !fill-body dark:!fill-bodydark;
+}
+.apexcharts-xcrosshairs {
+  @apply !fill-stroke dark:!fill-strokedark;
+}
+.apexcharts-gridline {
+  @apply !stroke-stroke dark:!stroke-strokedark;
+}
+.apexcharts-series.apexcharts-pie-series path {
+  @apply dark:!stroke-transparent;
+}
+.apexcharts-legend-series {
+  @apply !inline-flex gap-1.5;
+}
+.apexcharts-tooltip.apexcharts-theme-light {
+  @apply dark:!border-strokedark dark:!bg-boxdark;
+}
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  @apply dark:!border-strokedark dark:!bg-meta-4;
+}
+.apexcharts-xaxistooltip,
+.apexcharts-yaxistooltip {
+  @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
+}
+.apexcharts-xaxistooltip-bottom:after {
+  @apply !border-b-gray dark:!border-b-meta-4;
+}
+.apexcharts-xaxistooltip-bottom:before {
+  @apply !border-b-gray dark:!border-b-meta-4;
+}
+.apexcharts-xaxistooltip-bottom {
+  @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
+}
+.apexcharts-tooltip-series-group {
+  @apply !pl-1.5;
+}
+
+.flatpickr-wrapper {
+  @apply w-full;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  @apply !fill-primary;
+}
+.flatpickr-calendar.arrowTop:before {
+  @apply dark:!border-b-boxdark;
+}
+.flatpickr-calendar.arrowTop:after {
+  @apply dark:!border-b-boxdark;
+}
+.flatpickr-calendar {
+  @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
+}
+.flatpickr-day {
+  @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  @apply !top-7 dark:!fill-white dark:!text-white;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+  @apply !left-7;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+  @apply !right-7;
+}
+span.flatpickr-weekday,
+.flatpickr-months .flatpickr-month {
+  @apply dark:!fill-white dark:!text-white;
+}
+.flatpickr-day.inRange {
+  @apply dark:!shadow-7;
+  box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  @apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.selected,
+.flatpickr-day.endRange {
+  @apply dark:!text-white;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #3c50e0;
+  @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -10px 0 0 #3c50e0;
+}
+
+.map-btn .jvm-zoom-btn {
+  @apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5;
+}
+.mapOne .jvm-zoom-btn {
+  @apply left-auto top-auto bottom-0;
+}
+.mapOne .jvm-zoom-btn.jvm-zoomin {
+  @apply right-10;
+}
+.mapOne .jvm-zoom-btn.jvm-zoomout {
+  @apply right-0;
+}
+.mapTwo .jvm-zoom-btn {
+  @apply top-auto bottom-0;
+}
+.mapTwo .jvm-zoom-btn.jvm-zoomin {
+  @apply left-0;
+}
+.mapTwo .jvm-zoom-btn.jvm-zoomout {
+  @apply left-10;
+}
+
+.taskCheckbox:checked ~ .box span {
+  @apply opacity-100;
+}
+.taskCheckbox:checked ~ p {
+  @apply line-through;
+}
+.taskCheckbox:checked ~ .box {
+  @apply bg-primary border-primary dark:border-primary;
+}
+
+.custom-input-date::-webkit-calendar-picker-indicator {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+}
+.custom-input-date-1::-webkit-calendar-picker-indicator {
+  background-image: url(./images/icon/icon-calendar.svg);
+}
+.custom-input-date-2::-webkit-calendar-picker-indicator {
+  background-image: url(./images/icon/icon-arrow-down.svg);
+}
+
+[x-cloak] {
+  display: none !important;
+}

src/hooks/fireToast.tsx

@@ -0,0 +1,112 @@
+import toast from 'react-hot-toast';
+import dataJSON from '../../public/data.json';
+
+
+const createToast=(title: string, msg: string, type: number)=>{toast.custom((t) => (
+  
+    <div
+      className={`${
+        t.visible ? 'animate-enter' : 'animate-leave'
+      }
+      max-w-md w-full ${type=='0'?"bg-[#04b20c]":type=='1'?"bg-[#eab90f]":"bg-[#e13f32]"} shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+    >
+      <div className="flex-1 w-0 p-4 ">
+        <div className="flex items-start">
+          
+          <div className="ml-3 flex-1">
+            <p className="text-sm font-medium text-white">
+              {title}
+            </p>
+            <p className="mt-1 text-sm text-white">
+              {msg}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex">
+        
+          <button
+          onClick={() => toast.dismiss(t.id)}
+          type="button"
+          className="mr-2 box-content rounded-none border-none opacity-100 hover:no-underline hover:opacity-50 focus:opacity-50 focus:shadow-none focus:outline-none text-white"
+          data-te-toast-dismiss
+          aria-label="Close">
+          <span
+            className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="h-6 w-6">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </span>
+        </button>
+          
+      </div>
+    </div>
+  ))};
+// let dataJSON: any;
+// let headers = new Headers();
+// headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8000');
+// headers.append("Access-Control-Allow-Methods", 'POST');
+// headers.append("Access-Control-Allow-Headers", 'Content-Type, Authorization');
+// fetch("http://127.0.0.1:8000/data",{method:'POST',headers:headers})
+//   .then(response => {
+//     return response
+//   })
+//   .then(data => {
+//     console.log(data);
+//     dataJSON=data;
+//   })
+const fireToast = () => {
+const alertSettings=localStorage.getItem("alertSettings");
+if (alertSettings){
+  for (const alertSetting of JSON.parse(alertSettings)) {
+    console.log(alertSetting);
+
+    const value=isNaN(parseFloat(alertSetting.value))?alertSetting.value:parseFloat(alertSetting.value);
+    const para=alertSetting.criterion<2?"delta_"+alertSetting.para:alertSetting.para;
+    if (alertSetting.id=="ALL"){
+      Object.keys(dataJSON).map((id:string)=>
+      {
+        const condition=alertSetting.criterion=='0'?value<=-1*dataJSON[id][para]:
+        alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
+        alertSetting.criterion=='2'?value<=dataJSON[id][para]:
+        value==dataJSON[id][para];
+        const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
+        if (condition){
+          const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
+          createToast(id,msg,alertSetting.type)
+        }
+    
+
+      }
+
+      );
+    }
+    else{
+      const id=alertSetting.id;
+      
+      const condition=alertSetting.criterion=='0'?value>=-1*dataJSON[id][para]:
+        alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
+        alertSetting.criterion=='2'?value<=dataJSON[id][para]:
+        value==dataJSON[id][para];
+        const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
+        
+        if (condition){
+          const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
+          createToast(id,msg,alertSetting.type)
+        }
+      }
+  };
+  }
+}
+
+export default fireToast;
+  

src/hooks/useColorMode.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import useLocalStorage from './useLocalStorage';
+
+const useColorMode = () => {
+  const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');
+
+  useEffect(() => {
+    const className = 'dark';
+    const bodyClass = window.document.body.classList;
+
+    colorMode === 'dark'
+      ? bodyClass.add(className)
+      : bodyClass.remove(className);
+  }, [colorMode]);
+
+  return [colorMode, setColorMode];
+};
+
+export default useColorMode;

src/hooks/useLocalStorage.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+type SetValue<T> = T | ((val: T) => T);
+
+function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: SetValue<T>) => void] {
+  // State to store our value
+  // Pass  initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  // useEffect to update local storage when the state changes
+  useEffect(() => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        typeof storedValue === 'function'
+          ? storedValue(storedValue)
+          : storedValue;
+      // Save state
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}
+
+export default useLocalStorage;

src/images/brand/brand-01.svg

@@ -0,0 +1,14 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="24" fill="#EEF0F2"/>
+<g clip-path="url(#clip0_38_23844)">
+<path d="M36.0002 24.2661C36.0147 23.4411 35.9278 22.6174 35.7414 21.8128H24.2451V26.2661H30.9933C30.8655 27.0469 30.5778 27.7943 30.1476 28.4634C29.7174 29.1324 29.1536 29.7093 28.49 30.1593L28.4665 30.3085L32.1016 33.0681L32.3533 33.0928C34.6661 30.9994 35.9997 27.9193 35.9997 24.2661" fill="#4285F4"/>
+<path d="M24.2449 36C27.5509 36 30.3264 34.9332 32.3539 33.0932L28.4898 30.1597C27.4559 30.8666 26.0681 31.36 24.2449 31.36C22.6965 31.3511 21.1902 30.8646 19.9398 29.9695C18.6894 29.0744 17.7584 27.8161 17.2789 26.3732L17.1354 26.3852L13.3556 29.2518L13.3062 29.3865C14.3241 31.3747 15.8864 33.0463 17.8183 34.2142C19.7502 35.3822 21.9755 36.0005 24.2454 36" fill="#34A853"/>
+<path d="M17.2788 26.3733C17.011 25.6094 16.8728 24.8077 16.8697 24C16.8746 23.1936 17.0077 22.393 17.2642 21.6267L17.2574 21.4677L13.4312 18.5549L13.3061 18.6133C12.4473 20.2842 12 22.129 12 23.9999C12 25.8708 12.4473 27.7156 13.3061 29.3865L17.2788 26.3733Z" fill="#FBBC05"/>
+<path d="M24.2449 16.64C25.9995 16.6133 27.6964 17.2537 28.9796 18.4267L32.4355 15.12C30.219 13.0822 27.2838 11.9642 24.2449 12C21.975 11.9995 19.7497 12.6177 17.8179 13.7856C15.886 14.9535 14.3237 16.625 13.3057 18.6132L17.2652 21.6267C17.7495 20.1841 18.6836 18.9268 19.9358 18.0321C21.1881 17.1374 22.6953 16.6505 24.2449 16.64Z" fill="#EB4335"/>
+</g>
+<defs>
+<clipPath id="clip0_38_23844">
+<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
+</clipPath>
+</defs>
+</svg>

src/images/brand/brand-02.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24.0001" r="24" fill="#2B96F0"/>
+<path d="M33.0375 17.7376L34.4625 15.9376C34.875 15.4501 34.9875 15.0751 35.025 14.8876C33.9 15.5626 32.85 15.7876 32.175 15.7876H31.9125L31.7625 15.6376C30.8625 14.8501 29.7375 14.4376 28.5375 14.4376C25.9125 14.4376 23.85 16.6126 23.85 19.1251C23.85 19.2751 23.85 19.5001 23.8875 19.6501L24 20.4001L23.2125 20.3626C18.4125 20.2126 14.475 16.0876 13.8375 15.3751C12.7875 17.2501 13.3875 19.0501 14.025 20.1751L15.3 22.2751L13.275 21.1501C13.3125 22.7251 13.9125 23.9626 15.075 24.8626L16.0875 25.6126L15.075 26.0251C15.7125 27.9376 17.1375 28.7251 18.1875 29.0251L19.575 29.4001L18.2625 30.3001C16.1625 31.8001 13.5375 31.6876 12.375 31.5751C14.7375 33.2251 17.55 33.6001 19.5 33.6001C20.9625 33.6001 22.05 33.4501 22.3125 33.3376C32.8125 30.8626 33.3 21.4876 33.3 19.6126V19.3501L33.525 19.2001C34.8 18.0001 35.325 17.3626 35.625 16.9876C35.5125 17.0251 35.3625 17.1001 35.2125 17.1376L33.0375 17.7376Z" fill="white"/>
+</svg>

src/images/brand/brand-03.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24.0001" r="24" fill="#212529"/>
+<g clip-path="url(#clip0_38_23867)">
+<path d="M24 12.6751C17.625 12.6751 12.375 17.8501 12.375 24.3001C12.375 29.4001 15.7125 33.7501 20.3625 35.3251C20.9625 35.4376 21.15 35.0626 21.15 34.8001C21.15 34.5376 21.15 33.7876 21.1125 32.7751C17.8875 33.5251 17.2125 31.2001 17.2125 31.2001C16.6875 29.8876 15.9 29.5126 15.9 29.5126C14.85 28.7626 15.9375 28.7626 15.9375 28.7626C17.1 28.8001 17.7375 29.9626 17.7375 29.9626C18.75 31.7626 20.475 31.2376 21.1125 30.9001C21.225 30.1501 21.525 29.6251 21.8625 29.3251C19.3125 29.0626 16.575 28.0501 16.575 23.6251C16.575 22.3501 17.0625 21.3376 17.775 20.5501C17.6625 20.2876 17.25 19.0876 17.8875 17.4751C17.8875 17.4751 18.9 17.1751 21.1125 18.6751C22.05 18.4126 23.025 18.2626 24.0375 18.2626C25.05 18.2626 26.0625 18.3751 26.9625 18.6751C29.175 17.2126 30.15 17.4751 30.15 17.4751C30.7875 19.0501 30.4125 20.2876 30.2625 20.5501C31.0125 21.3376 31.4625 22.3876 31.4625 23.6251C31.4625 28.0501 28.725 29.0626 26.175 29.3251C26.5875 29.7001 26.9625 30.4501 26.9625 31.5001C26.9625 33.0751 26.925 34.3126 26.925 34.6876C26.925 34.9876 27.15 35.3251 27.7125 35.2126C32.2875 33.6751 35.625 29.3626 35.625 24.2251C35.5875 17.8501 30.375 12.6751 24 12.6751Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_23867">
+<rect width="24" height="24" fill="white" transform="translate(12 12.0001)"/>
+</clipPath>
+</defs>
+</svg>

src/images/brand/brand-04.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24.0002" r="24" fill="#4DC1FF"/>
+<path d="M35.625 18.6002C35.5125 20.8877 33.9375 24.0002 30.8625 27.9377C27.7125 32.0627 25.0125 34.1252 22.8375 34.1252C21.525 34.1252 20.3625 32.9252 19.3875 30.3752C18.75 28.1252 18.1875 25.8002 17.5125 23.4752C16.8375 21.0002 16.0875 19.7252 15.225 19.7252C15.075 19.7252 14.4375 20.1002 13.3875 20.8502L12.375 19.3502C13.5375 18.3377 14.6625 17.3252 15.825 16.2752C17.3625 14.9627 18.45 14.2502 19.275 14.2127C21.075 14.0627 22.1625 15.3377 22.6125 17.9252C23.025 20.7752 23.3625 22.5752 23.55 23.2502C24.075 25.6127 24.675 26.7752 25.2375 26.7752C25.725 26.7752 26.4375 26.0252 27.45 24.4877C28.4625 22.9502 28.9125 21.7502 29.025 20.9627C29.175 19.6502 28.6125 18.9377 27.45 18.9377C26.925 18.9377 26.325 19.0502 25.7625 19.3502C26.8875 15.6002 29.025 13.7627 32.25 13.8377C34.6125 13.9502 35.7375 15.5252 35.625 18.6002Z" fill="white"/>
+</svg>

src/images/brand/brand-05.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24.0002" r="24" fill="#3162C9"/>
+<g clip-path="url(#clip0_38_23887)">
+<path d="M25.789 35.9983V25.0533H29.3269L29.8566 20.7878H25.789V18.0645C25.789 16.8295 26.1192 15.9879 27.8248 15.9879L30 15.9868V12.1719C29.6236 12.1201 28.3325 12.004 26.8304 12.004C23.6942 12.004 21.5471 13.9917 21.5471 17.6422V20.7879H18V25.0534H21.547V35.9984L25.789 35.9983Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_23887">
+<rect width="12" height="24" fill="white" transform="translate(18 12.0002)"/>
+</clipPath>
+</defs>
+</svg>