feat: implement UsersContext and refactor user management hooks for improved user data handling

src/pages/admin/AdminMembers.js

@@ -21,7 +21,7 @@ import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
 import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
-import useMembers from '../../hooks/use-members';
+import { useMembers } from '../../hooks/use-users';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
@@ -35,7 +35,7 @@ const AdminMembers = () => {
     setSearchQuery,
     filterValue: statusFilter,
     setFilterValue: setStatusFilter,
-    fetchMembers,
+    refetch,
   } = useMembers();
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
@@ -53,7 +53,7 @@ const AdminMembers = () => {
   };
 
   const handlePaymentSuccess = () => {
-    fetchMembers(); // Refresh list
+    refetch(); // Refresh list
   };
 
   const handleStatusChangeRequest = (userId, currentStatus, newStatus, user) => {
@@ -74,7 +74,7 @@ const AdminMembers = () => {
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success('Member status updated successfully');
-      fetchMembers(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update status');
     } finally {
@@ -520,19 +520,19 @@ const AdminMembers = () => {
       <CreateMemberDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
 
       <InviteStaffDialog
         open={inviteDialogOpen}
         onOpenChange={setInviteDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
 
       <WordPressImportWizard
         open={importDialogOpen}
         onOpenChange={setImportDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
     </>
   );

src/pages/admin/AdminStaff.js

@@ -15,10 +15,7 @@ import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck,
 import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
 import { CircleMinus, CreditCard, Users } from 'lucide-react';
-import useMembers from '../../hooks/use-members';
-
-// Staff roles (non-guest, non-member) - includes all admin-type roles
-const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
+import { useStaff } from '../../hooks/use-users';
 
 const AdminStaff = () => {
   const navigate = useNavigate();
@@ -31,12 +28,10 @@ const AdminStaff = () => {
     setSearchQuery,
     filterValue: roleFilter,
     setFilterValue: setRoleFilter,
-    fetchMembers,
-  } = useMembers({
+    refetch,
+  } = useStaff({
     initialFilter: 'all',
     filterKey: 'role',
-    allowedRoles: STAFF_ROLES,
-    fetchErrorMessage: 'Failed to fetch staff',
   });
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
@@ -48,7 +43,7 @@ const AdminStaff = () => {
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success(`User ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
-      fetchMembers(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update user status');
     }
@@ -62,7 +57,7 @@ const AdminStaff = () => {
     try {
       await api.delete(`/admin/users/${userId}`);
       toast.success('User deleted successfully');
-      fetchMembers(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to delete user');
     }
@@ -114,7 +109,7 @@ const AdminStaff = () => {
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
           <StatCard
-            title="Total Members"
+            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}
             icon={Users}
@@ -304,7 +299,7 @@ const AdminStaff = () => {
       <CreateStaffDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
 
       <InviteStaffDialog