As an admin, I should be able to view invitations breakdown.(Team fighters)

Author: Sophie Mukamugema

package-lock.json

@@ -86,7 +86,7 @@
     "react-dropdown-select": "^4.10.0",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^11.18.6",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.12.0",
     "react-loader-spinner": "^5.4.5",
     "react-pdf": "^7.3.3",
     "react-pdf-js": "^5.1.0",

package.json

@@ -0,0 +1,42 @@
+import React from 'react';
+import { AiOutlineRise } from "react-icons/ai";
+
+// Define the type for the props
+interface InvitationCardType {
+  icon: React.ReactNode;
+  status: string;
+  time: string;
+  staticNumber: string;
+  percentage: string;
+}
+
+// Define the InvitationCard component
+const InvitationCard: React.FC<InvitationCardType> = ({ icon, status, time, staticNumber, percentage }) => {
+  return (
+    <>
+      <div className='bg-blue-100 w-48 grid grid-row-4 rounded-2xl'>
+        <div>
+          <div>
+            <h3 className='ml-10 p-2 text-2xl font-serif font-bold text-[20px]'>{status}</h3>
+            <div className='flex gap-2 w-8 h-10'>
+              {icon}
+            </div>
+            <div>
+              <p className='ml-10 mb-8'>{time}</p>
+            </div>
+          </div>
+        </div>
+        <div className='flex justify-center items-center pb-5'>
+          <div className='text-2xl font-serif font-bold text-[40px]'>{staticNumber}</div>
+          <div className='text-base text-purple-500 ml-3 mb-5'>
+            <AiOutlineRise className="text-2xl" />
+            <span>{percentage}</span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default InvitationCard;
+

src/components/InvitationCard.tsx

@@ -18,6 +18,7 @@ import {
   MoonIcon,
   MailIcon,
 } from '@heroicons/react/solid';
+import { FaEnvelopeOpenText } from "react-icons/fa6";
 import {
   AcademicCapIcon,
   BookOpenIcon,
@@ -36,9 +37,8 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
   const { logout } = useContext(UserContext);
   return (
     <div
-      className={`${
-        showNav ? 'block' : 'hidden'
-      } lg:block page-sideNav fixed lg:static top-16 bottom-0`}
+      className={`${showNav ? 'block' : 'hidden'
+        } lg:block page-sideNav fixed lg:static top-16 bottom-0`}
     >
       <div
         className={`${style} overflow-auto flex-col h-[100%] pt-2 bg-indigo-100 dark:bg-dark-bg shadow-lg lg:shadow-none dark:shadow-border-dark`}
@@ -80,6 +80,12 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
               <UserGroupIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
+          {/* INVITATION*/}
+          <CheckRole roles={['admin', 'coordinator']}>
+            <SideNavLink onClick={toggle} to="/invitation" name="Invitation">
+              <FaEnvelopeOpenText className="w-5" />
+            </SideNavLink>
+          </CheckRole>
 
           {/* FOR ADMINS */}
           <CheckRole roles={['admin']}>

src/components/Sidebar.tsx

@@ -26,6 +26,7 @@ const LoginActivitiesTable = React.lazy(
 const AdminTeams = React.lazy(() => import('./admin-dashBoard/Teams'));
 const AdminCohorts = React.lazy(() => import('./admin-dashBoard/Cohorts'));
 const AdminPrograms = React.lazy(() => import('./admin-dashBoard/Programs'));
+const Invitation = React.lazy(() => import('../pages/Invitation'));
 const AdminSession = React.lazy(() => import('./admin-dashBoard/Sessions'));
 const AdminPhases = React.lazy(() => import('./admin-dashBoard/Phases'));
 const AdminManageRoles = React.lazy(
@@ -85,7 +86,7 @@ function DashRoutes() {
 
   const [nav, setNav] = useState(false);
   const handleClick = () => setNav(!nav);
-  
+
   return (
     <PrivateRoute>
       <MenuProvider>
@@ -97,6 +98,13 @@ function DashRoutes() {
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/trainees" element={<AdminTraineeDashboard />} />
+            <Route path="/invitation" element={
+              <>
+                <CheckRole roles={['admin']}>
+                  <Invitation />
+                </CheckRole>
+              </>
+            } />
             <Route path="/trainees/:userId" element={<ViewTraineeRatings />} />
             <Route
               path="/ratings"
@@ -148,10 +156,10 @@ function DashRoutes() {
               <Route index element={<AllTickets />} />
               <Route path=":ticketId" element={<Ticket />} />
             </Route>
-      
-           <Route path="/loginActivities" element={<LoginActivitiesTable />} />
-           
-            <Route path="/team/:teamname" element={<TeamDetails/>} />
+
+            <Route path="/loginActivities" element={<LoginActivitiesTable />} />
+
+            <Route path="/team/:teamname" element={<TeamDetails />} />
 
             <Route path="/team-cards" element={<ManagersCards />} />
             <Route path="/cards" element={<CoordinatorCards />} />