feat(6420):superAdmin-page can view all organization

atlp-rwanda · Nov 12, 2024 · d7f4e56 · d7f4e56
1 parent 31852e3
commit d7f4e56
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 23 deletions.
diff --git a/src/components/ProgramUsersModal.tsx b/src/components/ProgramUsersModal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { gql, useQuery } from '@apollo/client';
-import DataTable from './DataTable';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { styled } from '@mui/material/styles';
+import DataTable from './DataTable';
 
 interface User {
   email: string;
@@ -70,7 +70,7 @@ export function ProgramUsersModal({
   isOpen,
   onClose,
   // defaultProgram = 'default',
-  programName
+  programName,
 }: ProgramUsersModalProps) {
   const { data, loading, error } = useQuery(GET_ALL_USERS, {
     variables: {
@@ -79,10 +79,11 @@ export function ProgramUsersModal({
     skip: !isOpen,
   });
 
-  const programUsers = data?.getAllUsers.filter(
-    (user: User) => user.team?.cohort?.program?.name === programName
+  const programUsers =
+    data?.getAllUsers.filter(
+      (user: User) => user.team?.cohort?.program?.name === programName,
       // || (user.team === null && programName === defaultProgram)
-  ) || [];
+    ) || [];
 
   const columns = [
     {
@@ -91,7 +92,11 @@ export function ProgramUsersModal({
       Cell: ({ value }: CellProps) => (
         <div className="flex items-center">
           <span className="hidden ml-2 md:inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700">
-            <svg className="h-full w-full text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+            <svg
+              className="h-full w-full text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
           </span>
@@ -119,7 +124,7 @@ export function ProgramUsersModal({
     if (loading) {
       return (
         <div className="flex justify-center items-center h-48">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
         </div>
       );
     }
@@ -152,12 +157,7 @@ export function ProgramUsersModal({
   };
 
   return (
-    <StyledDialog 
-      open={isOpen} 
-      onClose={onClose} 
-      maxWidth="md" 
-      fullWidth
-    >
+    <StyledDialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
       <div className="bg-white dark:bg-gray-800 rounded-t-lg">
         <StyledDialogTitle className="text-gray-900 dark:text-white border-b dark:border-gray-700">
           {programName} - Users
@@ -168,4 +168,4 @@ export function ProgramUsersModal({
       </div>
     </StyledDialog>
   );
-}
+}
diff --git a/src/pages/SupAdDashboard.tsx b/src/pages/SupAdDashboard.tsx
@@ -1,26 +1,135 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { id } from 'date-fns/locale';
 import Chart from '../components/Chart';
 import Card from '../components/Card';
 import useDocumentTitle from '../hook/useDocumentTitle';
-import Comingsoon from './Comingsoon';
 
 function SupAdDashboard() {
   useDocumentTitle('Dashboard');
   const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState(null);
+
+  const organizations = [
+    {
+      id: '1',
+      name: 'Andela',
+      totalLogins: 130,
+      totalUsers: 30,
+      activeUsers: 20,
+      inactiveUsers: 10,
+      numberOfTeams: 5,
+      numberOfCohorts: 5,
+      numberOfPrograms: 5,
+    },
+    {
+      id: '2',
+      name: 'Acme Corp',
+      totalLogins: 200,
+      totalUsers: 50,
+      activeUsers: 35,
+      inactiveUsers: 15,
+      numberOfTeams: 7,
+      numberOfCohorts: 4,
+      numberOfPrograms: 8,
+    },
+  ];
+
+  const openModal = (org: any) => {
+    setSelectedOrg(org);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedOrg(null);
+  };
+
   return (
     <div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg font-serif">
       <div className="flex flex-row pb-8 justify-center">
         <div className="">
-          {/* <div className="grid grid-cols-2 lg:grid-cols-4">
-            <Card text={t('All Organizations')} number={24} />
-            <Card text={t('All Admins')} number={24} />
-            <Card text={t('Domains')} number={24} />
-            <Card text={t('Income')} number={`$${1000}`} />
+          <div className="grid grid-cols-2 lg:grid-cols-4">
+            <Card text={t('All Organizations')} number={organizations.length} />
+            <Card text={t('Appproved Orgs')} number={2} />
+            <Card text={t('Rejected Orgs')} number={0} />
+            <Card text={t('Pending Orgs')} number={5} />
+          </div>
+          <Chart title="User Growth Over Time" />
+
+          <div className="overflow-x-auto mt-8">
+            <table className="min-w-full bg-white dark:bg-dark-bg border border-gray-300 dark:border-gray-700 rounded-lg shadow-md">
+              <thead>
+                <tr className="bg-gray-200 dark:bg-gray-800">
+                  <th className="px-4 py-2 border-b border-gray-300 dark:border-gray-700 text-left">
+                    Organization
+                  </th>
+                  <th className="px-4 py-2 border-b border-gray-300 dark:border-gray-700 text-left">
+                    Total Logins
+                  </th>
+                  <th className="px-4 py-2 border-b border-gray-300 dark:border-gray-700 text-left">
+                    Total Users
+                  </th>
+                  <th className="px-4 py-2 border-b border-gray-300 dark:border-gray-700 text-left">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {organizations.map((org) => (
+                  <tr
+                    key={org.id}
+                    className="border-b border-gray-300 dark:border-gray-700"
+                  >
+                    <td className="px-4 py-2">{org.name}</td>
+                    <td className="px-4 py-2">{org.totalLogins}</td>
+                    <td className="px-4 py-2">{org.totalUsers}</td>
+                    <td className="px-4 py-2">
+                      <button
+                        className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
+                        onClick={() => openModal(org)}
+                        type="button"
+                      >
+                        View
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
-          <Chart title="Organizations" /> */}
 
-          <Comingsoon title="Dashboard" />
+          {isModalOpen && selectedOrg && (
+            <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center">
+              <div className="bg-white dark:bg-dark-bg p-6 rounded-lg shadow-lg w-11/12 md:w-2/3 lg:w-1/2">
+                <h2 className="text-xl font-bold mb-4">Andela</h2>
+                <p className="mb-2">
+                  <strong>Total Logins:</strong> {10}
+                </p>
+                <p className="mb-2">
+                  <strong>Number of Teams:</strong> {10}
+                </p>
+                <p className="mb-2">
+                  <strong>Number of Cohorts:</strong> {10}
+                </p>
+                <p className="mb-2">
+                  <strong>Number of Programs:</strong> {10}
+                </p>
+                <p className="mb-2">
+                  <strong>Users:</strong> Active Users: {10}, Inactive Users:{' '}
+                  {10}
+                </p>
+                <button
+                  className="mt-4 bg-violet-500 text-white p-2 rounded hover:bg-violet-500"
+                  onClick={closeModal}
+                  type="button"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/pages/superAdminDashboard.tsx b/src/pages/superAdminDashboard.tsx