From 7ee5cb0d9cf16cea621e0b2e4109b64eb41c3fe1 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Sun, 25 Jan 2026 12:55:26 -0600
Subject: [PATCH] feat: update AdminMembers and AdminStaff components for
 improved statistics display and fix typo in MembersDirectory

---
 src/pages/admin/AdminMembers.js       | 14 +++++++-------
 src/pages/admin/AdminStaff.js         |  6 +++---
 src/pages/members/MembersDirectory.js |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 4b36ef2..6ee074b 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/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>
 
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index 92f6130..0963cbe 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/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"
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index 1847f0c..3d27f33 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/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>