new admin dashboard changes

Author: RWEMAREMY

src/Chart/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface ProgressBarProps {
+  passedPercentage: number; // Percentage of passed logins
+  failedPercentage: number; // Percentage of failed logins
+}
+
+function ProgressBar({ passedPercentage, failedPercentage }: ProgressBarProps) {
+  return (
+    <div className="w-1/2 space-y-4">
+      <div className="relative h-6 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700">
+        <div
+          className="absolute h-full bg-green-500 text-white text-center"
+          style={{ width: `${passedPercentage}%` }}
+        >
+          {passedPercentage}%
+        </div>
+        <div
+          className="absolute h-full bg-red-500 text-white text-center"
+          style={{
+            width: `${failedPercentage}%`,
+            left: `${passedPercentage}%`,
+          }}
+        >
+          {failedPercentage}%
+        </div>
+      </div>
+      <div className="flex justify-between text-sm text-gray-600 dark:text-gray-300">
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          <span className="text-green-500 font-semibold">Green</span>: Passed
+          Logins
+        </p>
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          <span className="text-red-500 font-semibold">Red</span>: Failed Logins
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;

src/Chart/TeamChart.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+interface TeamChartProps {
+  timeframe?: 'daily' | 'weekly' | 'monthly';
+}
+
+function TeamChart({ timeframe = 'daily' }: TeamChartProps) {
+  const chartData = {
+    daily: {
+      labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+      datasets: [
+        {
+          label: 'Andela',
+          data: [1, 3, 0, 2, 1, 3, 2],
+          fill: false,
+          borderColor: '#4F46E5',
+          tension: 0.4,
+        },
+      ],
+    },
+    weekly: {
+      labels: [
+        '03',
+        '06',
+        '09',
+        '12',
+        '15',
+        '18',
+        '21',
+        '24',
+        '27',
+        '30',
+        '31',
+        '34',
+        '37',
+        '40',
+        '43',
+        '46',
+        '49',
+        '54',
+      ],
+      datasets: [
+        {
+          label: 'Andela',
+          data: [1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4],
+          fill: false,
+          borderColor: '#4F46E5',
+          tension: 0.4,
+        },
+      ],
+    },
+    monthly: {
+      labels: Array.from({ length: 31 }, (_, i) =>
+        String(i + 1).padStart(2, '0'),
+      ),
+      datasets: [
+        {
+          label: 'Andela',
+          data: Array.from({ length: 31 }, () => Math.floor(Math.random() * 8)),
+          fill: false,
+          borderColor: '#4F46E5',
+          tension: 0.4,
+        },
+      ],
+    },
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'bottom' as const,
+      },
+      tooltip: {
+        mode: 'index' as const,
+        intersect: false,
+      },
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: '#D1D5DB',
+        },
+        ticks: {
+          color: '#6B7280',
+        },
+      },
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: '#6B7280',
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="w-full max-w-4xl h-[60vh] max-h-[500px] mx-auto p-4 md:p-6 lg:p-8 bg-white dark:bg-gray-800 rounded-md shadow-md">
+      <Line data={chartData[timeframe]} options={options} />
+    </div>
+  );
+}
+
+export default TeamChart;

src/Chart/UsersChart.tsx

@@ -21,8 +21,7 @@ ChartJS.register(
   Legend,
 );
 
-// eslint-disable-next-line react/function-component-definition
-const usersChart: React.FC = () => {
+function UsersChart() {
   const data = {
     labels: [
       '01',
@@ -83,6 +82,7 @@ const usersChart: React.FC = () => {
 
   const options = {
     responsive: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
         position: 'bottom' as const,
@@ -104,10 +104,10 @@ const usersChart: React.FC = () => {
   };
 
   return (
-    <div className="w-full h-[300px]">
-      <Line data={data} options={options} className="-ml-8" />
+    <div className="w-full max-w-4xl h-[60vh] max-h-[500px] mx-auto p-4 md:p-6 lg:p-8 bg-white dark:bg-gray-800 rounded-md shadow-md">
+      <Line data={data} options={options} />
     </div>
   );
-};
+}
 
-export default usersChart;
+export default UsersChart;