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

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