add logins modol

Author: Bananayosostene

src/Chart/ProgressBar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+interface ProgressBarProps {
+  passedPercentage: number; // Percentage of passed logins
+  failedPercentage: number; // Percentage of failed logins
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  passedPercentage,
+  failedPercentage,
+}) => {
+  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,108 @@
+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';
+}
+
+const TeamChart: React.FC<TeamChartProps> = ({ timeframe = 'daily' }) => {
+  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,6 @@ ChartJS.register(
   Legend,
 );
 
-// eslint-disable-next-line react/function-component-definition
-// Rename the function component from usersChart to UsersChart
 const UsersChart: React.FC = () => {
   const data = {
     labels: [
@@ -50,6 +48,7 @@ const UsersChart: React.FC = () => {
 
   const options = {
     responsive: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
         position: 'bottom' as const,
@@ -71,8 +70,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>
   );
 };

src/components/AdminTeamDetails.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa6';
-import UsersChart from '../Chart/usersChart';
+import TeamChart from '../Chart/TeamChart';
+import  ProgressBar  from '../Chart/ProgressBar';
+
 interface TeamData {
   ttlName?: string;
   team?: string;
@@ -19,12 +21,32 @@ interface TeamDetailsModalProps {
   teamData: TeamData | null;
 }
 
+// Add this near the top of your TeamDetailsModal component
+const loginStats = {
+  daily: {
+    passed: 60,
+    failed: 40,
+    total: "200k"
+  },
+  weekly: {
+    passed: 75,
+    failed: 25,
+    total: "1.2M"
+  },
+  monthly: {
+    passed: 85,
+    failed: 15,
+    total: "5M"
+  }
+};
+
 function TeamDetailsModal({
   isOpen,
   onClose,
   teamData,
 }: TeamDetailsModalProps) {
   const [activeTab, setActiveTab] = useState<'overview' | 'logins'>('overview');
+  const [timeframe, setTimeframe] = useState<'daily' | 'weekly' | 'monthly'>('daily');
   const [showAttendanceSummary, setShowAttendanceSummary] = useState(false);
 
   const handleAttendanceSummaryEnter = () => setShowAttendanceSummary(true);
@@ -35,17 +57,16 @@ function TeamDetailsModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
       <div
-        className="w-full  max-w-4xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600"
+        className="w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600"
         style={{ scrollbarWidth: 'thin' }}
       >
         <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-          {/* Tabs for switching */}
           <div className="flex gap-10">
             <button
               onClick={() => setActiveTab('overview')}
               className={`text-xl font-semibold ${
                 activeTab === 'overview'
-                  ? 'text-blue-600'
+                  ? 'text-primary'
                   : 'text-gray-800 dark:text-gray-200'
               }`}
             >
@@ -55,16 +76,14 @@ function TeamDetailsModal({
               onClick={() => setActiveTab('logins')}
               className={`text-xl font-semibold ${
                 activeTab === 'logins'
-                  ? 'text-blue-600'
+                  ? 'text-primary'
                   : 'text-gray-800 dark:text-gray-200'
               }`}
             >
               Logins
             </button>
           </div>
           <button
-            type="button"
-            type="button"
             onClick={onClose}
             className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
           >
@@ -75,9 +94,7 @@ function TeamDetailsModal({
         <div className="p-6">
           {activeTab === 'overview' && (
             <div>
-              {/* Overview Content */}
               <div className="grid grid-cols-2 gap-4">
-                {/* Display team details */}
                 {[
                   ['TTL Name', teamData?.ttlName || 'Sostene'],
                   ['Team Name', teamData?.team || 'Team Name'],
@@ -128,16 +145,16 @@ function TeamDetailsModal({
                   <label className="text-sm font-medium text-gray-500 dark:text-gray-400">
                     Attendance Summary
                     <FaAngleDown
-                      className={`ml-2 inline-block ${
+                      className={`ml-2 inline-block transition-transform ${
                         showAttendanceSummary ? 'rotate-180' : ''
                       }`}
                     />
                   </label>
                   {showAttendanceSummary && (
-                    <div className="absolute z-10 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-[200px]">
-                      <p>Quality: 1.5</p>
-                      <p>Quantity: 2.3</p>
-                      <p>Professionalism: 3.1</p>
+                    <div className="absolute z-10 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-[200px] border border-gray-200 dark:border-gray-700">
+                      <p className="text-gray-800 dark:text-gray-200">Quality: 1.5</p>
+                      <p className="text-gray-800 dark:text-gray-200">Quantity: 2.3</p>
+                      <p className="text-gray-800 dark:text-gray-200">Professionalism: 3.1</p>
                     </div>
                   )}
                 </div>
@@ -156,25 +173,60 @@ function TeamDetailsModal({
             </div>
           )}
 
-{activeTab === 'logins' && (
-  <div className="flex border border-gray-200 dark:border-gray-700 flex-col items-center w-full">
-    {/* Logins Content */}
-    <h2 className="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">
-      Logins
-    </h2>
-    <p className="text-gray-600 dark:text-gray-400 mb-4">
-      Daily login statistics.
-    </p>
-    {/* Include the chart */}
-    <UsersChart />
-  </div>
-)}
-
+          {activeTab === 'logins' && (
+            <div className="flex flex-col items-center w-full">
+              <div className="w-[24rem] py-2 flex justify-center items-center gap-2 rounded-full border border-gray-200 dark:border-gray-700">
+                <button
+                  onClick={() => setTimeframe('daily')}
+                  className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
+                    timeframe === 'daily'
+                      ? 'bg-primary text-white'
+                      : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  }`}
+                >
+                  Daily
+                </button>
+                <button
+                  onClick={() => setTimeframe('weekly')}
+                  className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
+                    timeframe === 'weekly'
+                      ? 'bg-primary text-white'
+                      : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  }`}
+                >
+                  Weekly
+                </button>
+                <button
+                  onClick={() => setTimeframe('monthly')}
+                  className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
+                    timeframe === 'monthly'
+                      ? 'bg-primary text-white'
+                      : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  }`}
+                >
+                  Monthly
+                </button>
+              </div>
+              <div className="mt-6 w-full px-4 flex flex-col justify-center">
+                 <div className='flex w-full justify-center gap-5'>
+                 <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
+                   Logins Attempt Status
+                 </h3>
+                 <ProgressBar 
+                   passedPercentage={loginStats[timeframe].passed} 
+                     failedPercentage={loginStats[timeframe].failed} 
+                   />
+               </div>
+               <p className="mt-4 ml-[12%]">Total Logins: <span className="font-bold text-primary"> {loginStats[timeframe].total}</span></p>
+               </div>            
 
+               <TeamChart timeframe={timeframe} />
+             </div>
+          )}
         </div>
       </div>
     </div>
   );
 }
 
-export default TeamDetailsModal;
+export default TeamDetailsModal;