update dashboard

src/Components/Doughnut/DonutChart.jsx

@@ -0,0 +1,39 @@
+// DonutChart.jsx
+import React from 'react';
+import { Doughnut } from 'react-chartjs-2';
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement } from 'chart.js';
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement);
+
+const DonutChart = ({ data, width = 300, height = 250 }) => {
+  const chartData = {
+    labels: data.labels,
+    datasets: [
+      {
+        label: 'My Dataset',
+        data: data.values,
+        backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
+        borderColor: ['#FFF'],
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false, // Hide the legend
+      },
+      tooltip: {
+        callbacks: {
+          label: (tooltipItem) => `${tooltipItem.label}: ${tooltipItem.raw}`,
+        },
+      },
+    },
+  };
+
+  return <Doughnut data={chartData} options={options} width={'100%'}  />;
+};
+
+export default DonutChart;

src/Components/HeaderMain.jsx

@@ -35,9 +35,12 @@ const HeaderMain = ({
 
   return (
     <Box
-      className={` pt-2 pb-2   fw-400 border-bottom d-flex ${
+      className={` pt-3 pb-2   fw-400 border-bottom d-flex ${
         slideDirecttion ? "flex-row-reverse ps-2" : ""
       }  justify-content-between align-items-center`}
+      // boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}
+
+      zIndex={999}
     >
       <Text
         as={"span"}