feat: update AdminMembers and AdminStaff components for improved statistics display and fix typo in MembersDirectory

src/pages/admin/AdminMembers.js

@@ -270,13 +270,6 @@ const AdminMembers = () => {
           Quick Overview
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard
-            title="Total Members"
-            value={users.length}
-            icon={Users}
-            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
-            dataTestId="stat-total-members"
-          />
           <StatCard
             title="Active"
             value={users.filter(u => u.status === 'active').length}
@@ -298,6 +291,13 @@ const AdminMembers = () => {
             iconBgClass=" text-brand-pink"
             dataTestId="stat-inactive-members"
           />
+          <StatCard
+            title="Total Members"
+            value={users.length}
+            icon={Users}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            dataTestId="stat-total-members"
+          />
         </div>
       </div>
 

src/pages/admin/AdminStaff.js

@@ -111,7 +111,7 @@ const AdminStaff = () => {
           <StatCard
             title="Total Staff"
             //TODO: refractor codebase to have a central admin and user roles config - when user adds roles, they should be added to the config
-            value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media', 'moderator'].includes(u.role)).length}
+            value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media'].includes(u.role)).length}
             icon={Users}
             iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
             dataTestId="stat-total-members"
@@ -124,8 +124,8 @@ const AdminStaff = () => {
             dataTestId="stat-active-members"
           />
           <StatCard
-            title="Moderators"
-            value={users.filter(u => u.role === 'moderator').length}
+            title="Finance Managers"
+            value={users.filter(u => u.role === 'finance').length}
             icon={CreditCard}
             iconBgClass="text-brand-light-orange"
             dataTestId="stat-payment-pending-members"

src/pages/members/MembersDirectory.js

@@ -121,7 +121,7 @@ const MembersDirectory = () => {
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current members in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
             </p>
           </div>