new piechart and stats updated

atlp-rwanda · Nov 14, 2024 · f99dac5 · f99dac5
1 parent 0643d85
commit f99dac5
Show file tree

Hide file tree

Showing 6 changed files with 471 additions and 12 deletions.
diff --git a/src/Chart/BarChart.tsx b/src/Chart/BarChart.tsx
@@ -40,14 +40,14 @@ const BarChart: React.FC<Props> = () => {
     ],
     datasets: [
       {
-        label: 'Last 8 days',
+        label: 'Nova',
         data: [12, 19, 3, 5, 2, 3, 12, 14, 5, 7, 9, 11],
         backgroundColor: '#5A6ACF',
         borderRadius: 0,
         barThickness: 8,
       },
       {
-        label: 'Last Week',
+        label: 'Fighters',
         data: [10, 15, 5, 8, 6, 9, 13, 9, 6, 8, 7, 10],
         backgroundColor: '#D1D5DB',
         borderRadius: 0,
@@ -63,7 +63,7 @@ const BarChart: React.FC<Props> = () => {
       legend: {
         position: 'bottom' as const,
         labels: {
-          color: '#121212',
+          color: '#D1D5DB',
         },
       },
       tooltip: {

diff --git a/src/Chart/PieChart.tsx b/src/Chart/PieChart.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Doughnut } from 'react-chartjs-2';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+// eslint-disable-next-line react/function-component-definition
+const PieChart: React.FC = () => {
+  const data = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [30, 100],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+  const data2 = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [30, 70],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+  const data3 = {
+    labels: ['new pie chart'],
+    datasets: [
+      {
+        label: 'rates',
+        data: [60, 60],
+        backgroundColor: ['#4F46E5', '#A5B4FC'],
+        hoverOffset: 4,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    cutout: '70%',
+    plugins: {
+      tooltip: {
+        callbacks: {
+          // eslint-disable-next-line func-names, object-shorthand
+          label: function (tooltipItem: any) {
+            return `${tooltipItem.label}: ${tooltipItem.raw}%`;
+          },
+        },
+      },
+      legend: {
+        display: false,
+      },
+    },
+  };
+
+  return (
+    <div className="flex flex-col items-center -ml-8 mb-8">
+      <div className="flex space-x-8">
+        <div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded">
+          <Doughnut data={data} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">10</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">New Invitations & Registration</p>
+        </div>
+        <div className="relative w-[200px] h-[200px] bg-green-200 p-2 rounded">
+          <Doughnut data={data2} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">20</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">Upcoming Events</p>
+        </div>
+        <div className="relative w-[200px] h-[200px] bg-yellow-200 p-2 rounded">
+          <Doughnut data={data3} options={options} />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <p className="text-2xl font-semibold text-gray-500">50</p>
+            </div>
+          </div>
+          <p className="text-center mt-2">Active& Progressive Tickets</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PieChart;
diff --git a/src/Chart/AppointmentsChart.tsx → src/Chart/UsersChart.tsx b/src/Chart/AppointmentsChart.tsx → src/Chart/UsersChart.tsx
@@ -22,7 +22,7 @@ ChartJS.register(
 );
 
 // eslint-disable-next-line react/function-component-definition
-const AppointmentsChart: React.FC = () => {
+const usersChart: React.FC = () => {
   const data = {
     labels: [
       '01',
@@ -59,7 +59,7 @@ const AppointmentsChart: React.FC = () => {
     ],
     datasets: [
       {
-        label: 'Last days',
+        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,
@@ -69,7 +69,7 @@ const AppointmentsChart: React.FC = () => {
         tension: 0.4,
       },
       {
-        label: 'Last days',
+        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,
@@ -110,4 +110,4 @@ const AppointmentsChart: React.FC = () => {
   );
 };
 
-export default AppointmentsChart;
+export default usersChart;
diff --git a/src/components/AdminDashboardTable.tsx b/src/components/AdminDashboardTable.tsx
@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { FaEye } from 'react-icons/fa';
+import TeamDetailsModal from './AdminTeamDetails';
+
+interface TeamData {
+  ttlName?: string;
+  team?: string;
+  organization?: string;
+  program?: string;
+  phase?: string;
+  cohort?: string;
+  activeUsers?: number;
+  droppedUsers?: number;
+  rating?: number;
+  logins: string;
+  users: number;
+}
+
+const DashboardTableDesign: React.FC = () => {
+  const [selectedTeam, setSelectedTeam] = useState<TeamData | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  const dummyData: TeamData[] = [
+    { 
+      team: 'Nova', 
+      logins: '2.4k', 
+      users: 45,
+      ttlName: 'Sostene',
+      organization: 'Tech Corp',
+      program: 'Web Development',
+      phase: 'Phase 2',
+      cohort: 'Cohort 3',
+      activeUsers: 42,
+      droppedUsers: 3,
+      rating: 4.8
+    },
+    { 
+      team: 'Fighters', 
+      logins: '1.8k', 
+      users: 32,
+      ttlName: 'John Doe',
+      organization: 'Tech Corp',
+      program: 'Mobile Development',
+      phase: 'Phase 1',
+      cohort: 'Cohort 2',
+      activeUsers: 30,
+      droppedUsers: 2,
+      rating: 4.5
+    },
+    { 
+      team: 'Bitcrafters', 
+      logins: '1.2k', 
+      users: 28,
+      ttlName: 'Jane Smith',
+      organization: 'Tech Corp',
+      program: 'Data Science',
+      phase: 'Phase 3',
+      cohort: 'Cohort 1',
+      activeUsers: 25,
+      droppedUsers: 3,
+      rating: 4.6
+    },
+    { 
+      team: 'Team1', 
+      logins: '3.1k', 
+      users: 52,
+      ttlName: 'Alice Johnson',
+      organization: 'Tech Corp',
+      program: 'Cloud Computing',
+      phase: 'Phase 2',
+      cohort: 'Cohort 4',
+      activeUsers: 48,
+      droppedUsers: 4,
+      rating: 4.7
+    },
+    { 
+      team: 'Team2', 
+      logins: '0.9k', 
+      users: 19,
+      ttlName: 'Bob Wilson',
+      organization: 'Tech Corp',
+      program: 'DevOps',
+      phase: 'Phase 1',
+      cohort: 'Cohort 2',
+      activeUsers: 17,
+      droppedUsers: 2,
+      rating: 4.4
+    }
+  ];
+
+  const handleViewClick = (team: TeamData) => {
+    setSelectedTeam(team);
+    setIsModalOpen(true);
+  };
+
+  return (
+    <div className="w-full max-w-7xl mx-auto px-6 space-y-4">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Team Analytics</h2>
+        <div className="flex gap-3">
+          <input
+            type="search"
+            placeholder="Search teams..."
+            className="px-4 py-2 bg-white dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
+        <div className="overflow-x-auto">
+          <table className="w-full table-fixed">
+            <thead>
+              <tr className="bg-gray-50 dark:bg-gray-900">
+                <th className="w-[30%] px-6 py-4 text-left">
+                  <div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                    Team Name
+                  </div>
+                </th>
+                <th className="w-[25%] px-6 py-4 text-left">
+                  <div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                    Logins
+                  </div>
+                </th>
+                <th className="w-[25%] px-6 py-4 text-left">
+                  <div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                    Users
+                  </div>
+                </th>
+                <th className="w-[20%] px-10 py-4 text-left">
+                  <div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                    Actions
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {dummyData.map((row, index) => (
+                <tr 
+                  key={index}
+                  className="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                >
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-blue-500"></div>
+                      <span className="text-gray-800 dark:text-gray-200 font-medium">{row.team}</span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="text-gray-600 dark:text-gray-300">{row.logins}</div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                      {row.users}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <button 
+                      onClick={() => handleViewClick(row)}
+                      className="flex items-center justify-center gap-2 px-4 py-2 text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 rounded-full hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors"
+                    >
+                      <FaEye className="text-xs" />
+                      View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div className="text-sm text-gray-500 dark:text-gray-400">
+            Showing 5 of 12 teams
+          </div>
+          <div className="flex gap-2">
+            <button className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+              Previous
+            </button>
+            <button className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <TeamDetailsModal 
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        teamData={selectedTeam}
+      />
+    </div>
+  );
+};
+
+export default DashboardTableDesign;