-
- );
-}
-
-export default SupAdDashboard;
diff --git a/src/pages/SuperAdminDashboard.tsx b/src/pages/SuperAdminDashboard.tsx
new file mode 100644
index 000000000..5a62f4536
--- /dev/null
+++ b/src/pages/SuperAdminDashboard.tsx
@@ -0,0 +1,797 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useEffect, useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GlobeAltIcon, HomeIcon, UsersIcon } from '@heroicons/react/solid';
+import { BiCalendarStar } from 'react-icons/bi';
+import { AtSign, MapPin } from 'lucide-react';
+import {
+ CartesianGrid,
+ Legend,
+ Line,
+ LineChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from 'recharts';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import { GoOrganization } from 'react-icons/go';
+import { GrGroup } from 'react-icons/gr';
+import { RiAdminLine } from 'react-icons/ri';
+import { useLazyQuery, useQuery } from '@apollo/client';
+import { format } from 'date-fns';
+import { Link, useNavigate } from 'react-router-dom';
+import { MdOutlineMail } from 'react-icons/md';
+import { ThemeContext } from '../hook/ThemeProvider';
+import useDocumentTitle from '../hook/useDocumentTitle';
+import OrgStatusSymbol from '../components/OrgStatusSymbol';
+import MultipleLogins from '../components/icons/MultipleLogins';
+import { Organization } from '../components/Organizations';
+import {
+ GET_ORGANIZATIONS,
+ GET_ALL_ORG_USERS,
+ GET_REGISTRATION_STATS,
+} from '../queries/organization.queries';
+import { GET_EVENTS } from '../queries/event.queries';
+import { UserInterface } from './TraineeAttendanceTracker';
+import NoEvents from '../assets/no-event.png';
+
+interface EventsInterface {
+ id: string;
+ title: string;
+ start: string;
+ end: string;
+ timeToStart: string;
+ timeToEnd: string;
+ hostName: string;
+}
+
+interface AllOrgUsersInterface {
+ totalUsers: number;
+ organizations: {
+ organization: Organization;
+ members: UserInterface[];
+ loginsCount: number;
+ monthPercentage: number;
+ recentLocation: string | null;
+ }[];
+}
+
+interface RegistrationDataStatsInterface {
+ month:
+ | 'jan'
+ | 'feb'
+ | 'mar'
+ | 'apr'
+ | 'may'
+ | 'jun'
+ | 'jul'
+ | 'aug'
+ | 'sep'
+ | 'oct'
+ | 'nov'
+ | 'dec'
+ | null;
+ users: number | null;
+ organizations: number | null;
+}
+interface RegistrationDataInterface {
+ year: number;
+ stats: RegistrationDataStatsInterface[];
+}
+
+function SuperAdminDashboard() {
+ useDocumentTitle('Dashboard');
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const { colorTheme } = useContext(ThemeContext);
+ const [allOrganizationData, setAllOrganizationData] = useState<
+ Organization[]
+ >([]);
+ const [upcomingEvents, setUpcomingEvents] = useState
-
-
- {/*
-
-
-
+
+ );
+
+ return (
+
+
+ );
+}
+
+export default SuperAdminDashboard;
diff --git a/src/queries/organization.queries.tsx b/src/queries/organization.queries.tsx
new file mode 100644
index 000000000..bc2335428
--- /dev/null
+++ b/src/queries/organization.queries.tsx
@@ -0,0 +1,60 @@
+import { gql } from '@apollo/client';
+
+export const GET_ORGANIZATIONS = gql`
+ query GetOrganizations {
+ getOrganizations {
+ id
+ name
+ description
+ admin {
+ id
+ email
+ }
+ status
+ }
+ }
+`;
+export const GET_ALL_ORG_USERS = gql`
+ query GetAllOrgUsers {
+ getAllOrgUsers {
+ totalUsers
+ organizations {
+ organization {
+ id
+ name
+ description
+ admin {
+ id
+ email
+ profile {
+ name
+ phoneNumber
+ }
+ }
+ status
+ }
+ members {
+ email
+ profile {
+ name
+ }
+ }
+ monthPercentage
+ loginsCount
+ recentLocation
+ }
+ }
+ }
+`;
+export const GET_REGISTRATION_STATS = gql`
+ query GetRegistrationStats {
+ getRegistrationStats {
+ year
+ stats {
+ month
+ users
+ organizations
+ }
+ }
+ }
+`;
diff --git a/tailwind.config.js b/tailwind.config.js
index 9ac45761f..7c55c1500 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,9 @@ module.exports = {
theme: {
extend: {
screens: {
- xm:'360px',
+ xm: '360px',
sm: '375px',
+ xsm: '500px',
xmd: '600px',
md: '768px',
lg: '976px',
@@ -40,27 +41,31 @@ module.exports = {
// sans: ['PT Serif', 'serif'],
serif: ['Inter', 'serif'],
},
- extend: {
- borderRadius: {
- '4xl': '2rem',
- },
- keyframes: {
- wave: {
- '0%': { transform: 'rotate(0.0deg)' },
- '10%': { transform: 'rotate(14deg)' },
- '20%': { transform: 'rotate(-8deg)' },
- '30%': { transform: 'rotate(14deg)' },
- '40%': { transform: 'rotate(-4deg)' },
- '50%': { transform: 'rotate(10.0deg)' },
- '60%': { transform: 'rotate(0.0deg)' },
- '100%': { transform: 'rotate(0.0deg)' },
- },
+ borderRadius: {
+ '4xl': '2rem',
+ },
+ keyframes: {
+ wave: {
+ '0%': { transform: 'rotate(0.0deg)' },
+ '10%': { transform: 'rotate(14deg)' },
+ '20%': { transform: 'rotate(-8deg)' },
+ '30%': { transform: 'rotate(14deg)' },
+ '40%': { transform: 'rotate(-4deg)' },
+ '50%': { transform: 'rotate(10.0deg)' },
+ '60%': { transform: 'rotate(0.0deg)' },
+ '100%': { transform: 'rotate(0.0deg)' },
},
- animation: {
- 'waving-hand': 'wave 10s linear infinite',
+ 'ping-live': {
+ '0%': { transform: 'scale(0.8)', opacity: '1' },
+ '50%': { transform: 'scale(1)', opacity: '0.7' },
+ '100%': { transform: 'scale(0.8)', opacity: '1' },
},
},
+ animation: {
+ 'waving-hand': 'wave 10s linear infinite',
+ 'ping-live': 'ping-live 1.5s ease-in-out infinite',
+ },
},
- plugins: [],
},
+ plugins: [],
};
diff --git a/tests/components/Calendar.test.tsx b/tests/components/Calendar.test.tsx
index 57304bfa8..dbd478e6a 100644
--- a/tests/components/Calendar.test.tsx
+++ b/tests/components/Calendar.test.tsx
@@ -138,7 +138,7 @@ afterEach(()=>{
})
describe('Calendar Tests', () => {
- it.skip('should display Calendar events', async () => {
+ it('should display Calendar events', async () => {
render(
+
+
+ {!getOrganizationsDataLoading && !getAllOrgUsersLoading && (
+ <>
+
+
+
+
+
+
+ )}
+ {(getOrganizationsDataLoading || getAllOrgUsersLoading) &&
+ statsSkeleton}
+ + {allOrganizationData.length.toString().padStart(2, '0') || + '00'} +
+
+
+
+
+
+
+
+ {allOrganizationData
+ .filter((org) => org.status.toLowerCase() === 'active')
+ .length.toString()
+ .padStart(2, '0') || '00'}
+
+
+
+
+
+
+ {allOrganizationData
+ .filter((org) => org.status.toLowerCase() === 'pending')
+ .length.toString()
+ .padStart(2, '0') || '00'}
+
+
+
+
+
+
+ {allOrganizationData
+ .filter(
+ (org) => org.status.toLowerCase() === 'rejected',
+ )
+ .length.toString()
+ .padStart(2, '0') || '00'}
+
+
+ {!getOrganizationsDataLoading && !getAllOrgUsersLoading && (
+ <>
+
+
+
+ + USERS +
+
+
+ {allOrgsUsers.totalUsers.toString().padStart(2, '0')}
+
+
+
+ )}
+ {(getOrganizationsDataLoading || getAllOrgUsersLoading) &&
+ statsSkeleton}
+
+ {!getOrganizationsDataLoading && !getAllOrgUsersLoading && (
+ <>
+
+
+
+
+
+ 00
+
+
+
+ )}
+ {(getOrganizationsDataLoading || getAllOrgUsersLoading) &&
+ statsSkeleton}
+
+ {!getRegistrationStatsLoading && (
+ <>
+
+
+
+ Monthly Registrations
+
+
+
+
+ 700
+ ? 350
+ : window.innerWidth > 500
+ ? 300
+ : 250
+ }
+ >
+
+
+
+
+
+ )}
+ {getRegistrationStatsLoading && (
+
+ {registrationYears?.map((year) => (
+
+ ))}
+
+
+
+ )}
+
+
+
+ {!getOrganizationsDataLoading && (
+ <>
+
+
+
+ Recent Organization Requests
+
+
+
+ )}
+ {getOrganizationsDataLoading && (
+
+
+
+
+
+ | + Name + | ++ Admin-Email + | ++ Status + | +
|---|---|---|
| + {org.name} + | ++ { + // eslint-disable-next-line no-nested-ternary + org.admin + ? // eslint-disable-next-line no-nested-ternary + org.admin.email.length > 20 + ? window.innerWidth > 530 + ? `${org.admin.email.slice(0, 22)}..` + : `${org.admin.email.slice(0, 16)}..` + : org.admin.email + : '-' + } + | +
+ |
+
+
+
+
+ )}
+
+ {!getEventsDataLoading && (
+ <>
+
+
+
+ Upcoming Events
+
+ {upcomingEvents.length ? (
+ upcomingEvents.map((event) => (
+
+
+
+ )}
+ {getEventsDataLoading && (
+
+
+
+ ))
+ ) : (
+
+
+
+ {event.title} -
+
+
+
+
+ + {event.timeToStart} + {event.timeToEnd && ` - ${event.timeToEnd}`} +
++ + {format(new Date(event.start), 'dd, MMM yyyy')} + + - + + {format(new Date(event.end), 'dd, MMM yyyy')} + +
+
+ 
+
+ )}
+ + Oops! No upcoming events scheduled +
+
+
+ )}
+
+
+
+ {!getAllOrgUsersLoading && (
+ <>
+
+
+
+ + Organization Updates scheduled +
+
+ {allOrgsUsers.organizations
+ .slice()
+ .sort((a, b) => b.members.length - a.members.length)
+ .slice(0, 3)
+ .map((org) => (
+
+
+ )}
+ {getAllOrgUsersLoading && (
+
+
+ ))}
+
+
+
+
+
+ {format(new Date(), 'MMM, yyyy')}
+
+
+
+
+
+
+
+ {`${org.monthPercentage.toPrecision(2)}%`} +
+ +
+
+ )}
+
+ {!getAllOrgUsersLoading && (
+ <>
+
+
+
+ Today's Login Overview
+
+ {allOrgsUsers.organizations
+ .slice()
+ .sort((a, b) => b.loginsCount - a.loginsCount)
+ .slice(0, 4)
+ .map((org) => (
+
+
+ )}
+ {getAllOrgUsersLoading && (
+
+
+ ))}
+
+
+
+
+
+
+ {org.organization.name}
+{org.loginsCount}
+
+
+
+
+ + (Recent login location) +
+ )} +
+
+ )}
+
-
- Page
-
-
- 1
- of
- 1
-
-
-
+
+ Page
+
+
+ 1
+ of
+ 1
+
+
+
+
-
- | Go to page:
-
+
+ | Go to page:
+
+
{
- it('Should render SupAdDashboard', () => {
- const elem = renderer.create({children}
,
+ };
+});
+
+describe('Super Admin Dashboard test ', () => {
+ beforeEach(() => {
+ localStorage.setItem('auth_token', 'mocked-org-token');
+ });
+ afterEach(async () => {
+ localStorage.clear();
+ jest.restoreAllMocks();
+ await cleanup();
+ });
+ it('Should render SuperAdminDashboard', () => {
+ const elem = renderer
+ .create(
+
-
- Page
-
-
- 1
- of
- 1
-
-
-
+
+ Page
+
+
+ 1
+ of
+ 1
+
+
+
+
-
- | Go to page:
-
+
+ | Go to page:
+
+
-
- Page
-
-
- 1
- of
- 0
-
-
-
+
+ Page
+
+
+ 1
+ of
+ 0
+
+
+
+
-
- | Go to page:
-
+
+ | Go to page:
+
+
-
-
-
-
-
-
-
-
-
-
- - Dashboard -
-- comingsoon -
-- Somethingnewiscoming -
-
+
+`;
diff --git a/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap b/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
index c3663fa46..55a927669 100644
--- a/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
+++ b/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
className="mt-10 "
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+ + Monthly Registrations +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + Upcoming Events +
+
+
+
+ 
+
+ + Oops! No upcoming events scheduled +
+
+
+
+
+
+
+
+ + Organization Updates scheduled +
+
+
+
+
+
+ + Today's Login Overview +
+
-
- Page
-
-
- 1
- of
- 0
-
-
-
+
+ Page
+
+
+ 1
+ of
+ 0
+
+
+
+
-
- | Go to page:
-
+
+ | Go to page:
+
+
-
- Page
-
-
- 1
- of
- 0
-
-
-
+
+ Page
+
+
+ 1
+ of
+ 0
+
+
+
+
-
- | Go to page:
-
+
+ | Go to page:
+
+