add logins modol

Author: Bananayosostene

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,26 +21,58 @@ ChartJS.register(
   Legend,
 );
 
-// eslint-disable-next-line react/function-component-definition
-// Rename the function component from usersChart to UsersChart
-const UsersChart: React.FC = () => {
+function UsersChart() {
   const data = {
     labels: [
-      '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13',
-      '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26',
-      '27', '28', '29', '30', '31',
+      '01',
+      '02',
+      '03',
+      '04',
+      '05',
+      '06',
+      '07',
+      '08',
+      '09',
+      '10',
+      '11',
+      '12',
+      '13',
+      '14',
+      '15',
+      '16',
+      '17',
+      '18',
+      '19',
+      '20',
+      '21',
+      '22',
+      '23',
+      '24',
+      '25',
+      '26',
+      '27',
+      '28',
+      '29',
+      '30',
+      '31',
     ],
     datasets: [
       {
         label: 'Andela',
-        data: [1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4, 3, 8, 0, 3, 5, 7],
+        data: [
+          1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4,
+          3, 8, 0, 3, 5, 7,
+        ],
         fill: false,
         borderColor: '#4F46E5',
         tension: 0.4,
       },
       {
         label: 'NESA',
-        data: [2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6, 1, 2, 3, 4, 5, 6.5],
+        data: [
+          2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6,
+          1, 2, 3, 4, 5, 6.5,
+        ],
         fill: false,
         borderColor: '#8C8120',
         tension: 0.4,
@@ -50,6 +82,7 @@ const UsersChart: React.FC = () => {
 
   const options = {
     responsive: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
         position: 'bottom' as const,
@@ -71,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;