feat: enhance AdminRoles to manage permissions with loading state and role slug updates

feat: refactor AdminMembers and AdminStaff to utilize useMembers hook for improved member management
feat: Introduce StatusBadge component for consistent status representation
2026-01-22 15:23:50 -06:00 · 2026-01-22 14:47:34 -06:00 · 2026-01-22 14:20:02 -06:00 · 2026-01-22 12:07:56 -06:00
18 changed files with 688 additions and 549 deletions
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
    "@radix-ui/react-tooltip": "^1.2.4",
    "@stripe/react-stripe-js": "^2.0.0",
    "@stripe/stripe-js": "^2.0.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
    "axios": "^1.8.4",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
--- a/src/components/MemberCard.js
+++ b/src/components/MemberCard.js
@@ -0,0 +1,179 @@
+import React from 'react'
+import StatusBadge from './StatusBadge';
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
+
+// Helper function to get initials
+const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+};
+
+const MemberCard = ({ member }) => {
+    const joinedDate = member.member_since || member.created_at;
+    return (
+        <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
+            {/* Profile Photo */}
+            <div className='flex justify-end items-center'>
+                {/* todo: get correct status to pass to StatusBadge */}
+                <StatusBadge status={member.membership_status} />
+            </div>
+            <div className="flex justify-center mb-4">
+                {member.profile_photo_url ? (
+                    <img
+                        src={member.profile_photo_url}
+                        alt={`${member.first_name} ${member.last_name}`}
+                        className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
+                    />
+                ) : (
+                    <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
+                        <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {getInitials(member.first_name, member.last_name)}
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Name */}
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                {member.first_name} {member.last_name}
+            </h3>
+
+            {/* Partner Name */}
+            {member.directory_partner_name && (
+                <div className="flex items-center justify-center gap-2 mb-4">
+                    <Heart className="h-4 w-4 text-[var(--orange-light)]" />
+                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Partner: {member.directory_partner_name}
+                    </span>
+                </div>
+            )}
+
+            {/* Bio */}
+            {member.directory_bio && (
+                <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {member.directory_bio}
+                </p>
+            )}
+
+            {/* Member Since */}
+            {joinedDate && (
+                <div className="flex items-center justify-center gap-2 mb-4">
+                    <Calendar className="h-4 w-4 text-brand-purple " />
+                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Member since {new Date(joinedDate).toLocaleDateString('en-US', {
+                            month: 'long',
+                            year: 'numeric'
+                        })}
+                    </span>
+                </div>
+            )}
+
+            {/* Contact Information */}
+            <div className="space-y-3 mb-4">
+                {member.directory_email && (
+                    <div className="flex items-center gap-2 text-sm">
+                        <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+                        <a
+                            href={`mailto:${member.directory_email}`}
+                            className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
+                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                        >
+                            {member.directory_email}
+                        </a>
+                    </div>
+                )}
+
+                {member.directory_phone && (
+                    <div className="flex items-center gap-2 text-sm">
+                        <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+                        <a
+                            href={`tel:${member.directory_phone}`}
+                            className="text-brand-purple  hover:text-[var(--purple-ink)]"
+                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                        >
+                            {member.directory_phone}
+                        </a>
+                    </div>
+                )}
+
+                {member.directory_address && (
+                    <div className="flex items-start gap-2 text-sm">
+                        <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
+                        <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            {member.directory_address}
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Social Media Links */}
+            {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
+                <div className="pt-4 border-t border-[var(--neutral-800)]">
+                    <div className="flex justify-center gap-3">
+                        {member.social_media_facebook && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_facebook)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Facebook"
+                            >
+                                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_instagram && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_instagram)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Instagram"
+                            >
+                                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_twitter && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_twitter)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Twitter/X"
+                            >
+                                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_linkedin && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_linkedin)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="LinkedIn"
+                            >
+                                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
+                            </a>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* View Profile Button */}
+            <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
+                <Button
+                    onClick={() => handleViewProfile(member.id)}
+                    className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
+                >
+                    <UserCircle className="h-4 w-4 mr-2" />
+                    View Full Profile
+                </Button>
+            </div>
+        </Card>
+    );
+};
+
+export default MemberCard
--- a/src/components/StatCard.jsx
+++ b/src/components/StatCard.jsx
@@ -7,30 +7,77 @@ export const StatCard = ({
  icon: Icon,
  iconBgClass,
  dataTestId,
-}) => (
-  <Card
-    className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
-    data-testid={dataTestId}
-  >
-    <div className="flex items-start gap-4 mb-4 ">
-      <div className={`${iconBgClass} p-3 rounded-lg `}>
-        <Icon className="size-8" />
-      </div>
+}) => {
+  const valueString = value == null ? "" : String(value);

-      <div className="space-y-8">
-        <p
-          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
-          style={{ fontFamily: "'Inter', sans-serif" }}
-        >
-          {value}
-        </p>
-      </div>
-    </div>
-    <p
-      className="text-sm text-brand-purple "
-      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+  const digitCount =
+    valueString.replace(/\D/g, "").length || valueString.length;
+  /**
+ * 
+const getValueFontSize = () => {
+  if (digitCount <= 3) {
+      // 3.75rem for 3 or fewer digits
+      return "3.75rem";
+    } else if (digitCount <= 6) {
+      // Scale down for more digits
+      return "clamp(2rem, 5cqi, 3rem)";
+    } else if (digitCount <= 9) {
+      return "clamp(1.5rem, 4cqi, 2.5rem)";
+    } else {
+      return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  
+  * */
+
+  const getValueFontSize = () => {
+    switch (true) {
+      case digitCount <= 3:
+        // 3.75rem for 3 or fewer digits
+        return "3.75rem";
+      case digitCount <= 6:
+        // Scale down for more digits
+        return "clamp(2rem, 5cqi, 3rem)";
+      case digitCount <= 9:
+        return "clamp(1.5rem, 4cqi, 2.5rem)";
+      default:
+        return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  const valueFontSize = getValueFontSize();
+
+  return (
+    <Card
+      className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
+      data-testid={dataTestId}
    >
-      {title}
-    </p>
-  </Card>
-);
+      <div className="flex items-start gap-4 mb-4 justify-between">
+        <div
+          className="space-y-8 "
+          style={{
+            containerType: "inline-size",
+            maxWidth: "200px",
+            width: "100%",
+          }}
+        >
+          <p
+            className="font-semibold text-[var(--purple-ink)] mb-1"
+            style={{ fontSize: valueFontSize, lineHeight: 1 }}
+          >
+            {value}
+          </p>
+        </div>
+
+        <div className={`${iconBgClass} p-3 rounded-lg `}>
+          <Icon className="size-8" />
+        </div>
+      </div>
+      <p
+        className="text-sm text-brand-purple "
+        style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+      >
+        {title}
+      </p>
+    </Card>
+  );
+};
--- a/src/components/StatusBadge.js
+++ b/src/components/StatusBadge.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Badge } from './ui/badge';
+
+const STATUS_BADGE_CONFIG = {
+
+  //status-based badges
+  pending_email: { label: 'Pending Email', variant: 'orange2' },
+  pending_validation: { label: 'Pending Validation', variant: 'gray' },
+  pre_validated: { label: 'Pre-Validated', variant: 'green' },
+  payment_pending: { label: 'Payment Pending', variant: 'orange' },
+  active: { label: 'Active', variant: 'green' },
+  inactive: { label: 'Inactive', variant: 'gray2' },
+  canceled: { label: 'Canceled', variant: 'red' },
+  expired: { label: 'Expired', variant: 'red2' },
+  abandoned: { label: 'Abandoned', variant: 'gray3' },
+  rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' },
+
+  //role-based badges
+  finance: { label: 'Finance Manager', variant: 'purple' },
+  guest: { label: 'Guest', variant: 'gray' },
+  member: { label: 'Member', variant: 'purple' },
+  superadmin: { label: 'Superadmin', variant: 'purple' },
+  admin: { label: 'Admin', variant: 'purple' },
+  moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
+  staff: { label: 'Staff', variant: 'gray' },
+  media: { label: 'Media', variant: 'gray2' }
+};
+
+//todo: make shield icon dynamic based on status
+const StatusBadge = ({ status }) => {
+  const statusConfig = STATUS_BADGE_CONFIG[status] || STATUS_BADGE_CONFIG.inactive;
+
+  return (
+    <Badge variant={statusConfig.variant} className=" px-3 py-1  rounded-md text-sm">
+      {/* <Shield className="h-3 w-3 mr-1 inline" />  */}
+      {statusConfig.label}
+    </Badge>
+  );
+};
+
+
+export default StatusBadge;
--- a/src/hooks/use-members.js
+++ b/src/hooks/use-members.js
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import api from '../utils/api';
+
+const useMembers = ({
+  initialFilter = 'active',
+  initialSearch = '',
+  filterKey = 'status',
+  allowedRoles = ['member'],
+  fetchErrorMessage = 'Failed to fetch members',
+} = {}) => {
+  const [users, setUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [filterValue, setFilterValue] = useState(initialFilter);
+
+  const fetchMembers = useCallback(async () => {
+    try {
+      const response = await api.get('/admin/users');
+      let filtered = response.data;
+      if (allowedRoles && allowedRoles.length) {
+        filtered = filtered.filter(user => allowedRoles.includes(user.role));
+      }
+      setUsers(filtered);
+    } catch (error) {
+      toast.error(fetchErrorMessage);
+    } finally {
+      setLoading(false);
+    }
+  }, [allowedRoles, fetchErrorMessage]);
+
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  useEffect(() => {
+    let filtered = users;
+
+    if (filterValue && filterValue !== 'all') {
+      filtered = filtered.filter(user => user[filterKey] === filterValue);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  }, [users, searchQuery, filterKey, filterValue]);
+
+  return {
+    users,
+    filteredUsers,
+    loading,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+    fetchMembers,
+  };
+};
+
+export default useMembers;
--- a/src/layouts/AdminLayout.js
+++ b/src/layouts/AdminLayout.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
+import { Menu } from 'lucide-react';
 import AdminSidebar from '../components/AdminSidebar';

 const AdminLayout = ({ children }) => {
@@ -64,6 +65,23 @@ const AdminLayout = ({ children }) => {

      {/* Main Content Area */}
      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
+        {isMobile && (
+          <div className="sticky top-0 z-20 bg-background/90 backdrop-blur border-b border-[var(--neutral-800)] px-4 py-3 flex items-center gap-3">
+            <button
+              onClick={toggleSidebar}
+              className="p-2 rounded-lg hover:bg-[var(--neutral-800)]/20 transition-colors"
+              aria-label={sidebarOpen ? 'Close sidebar' : 'Open sidebar'}
+            >
+              <Menu className="h-5 w-5 text-primary" />
+            </button>
+            <span
+              className="text-sm font-semibold text-primary"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Menu
+            </span>
+          </div>
+        )}
        <div className="max-w-7xl mx-auto px-6 py-8">
          {children}
        </div>
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -60,7 +60,7 @@ const AdminDashboard = () => {

  return (
    <>
-      <div className='flex justify-between items-center'>
+      <div className='flex flex-col md:flex-row  md:justify-between md:items-center'>
        <div className="mb-8">
          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Admin Dashboard
@@ -69,9 +69,9 @@ const AdminDashboard = () => {
            Manage users, events, and membership applications.
          </p>
        </div>
-        <Link to={'/'}>
+        <Link to={'/'} className=''>
          <Button
-            className="btn-lavender"
+            className="btn-lavender mb-8 md:mb-0  "
          >
            <Globe />
            View Public Site
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import {
@@ -20,17 +19,24 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
 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';

 const AdminMembers = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { hasPermission } = useAuth();
-  const [users, setUsers] = useState([]);
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState('active');
+  const {
+    users,
+    filteredUsers,
+    loading,
+    searchQuery,
+    setSearchQuery,
+    filterValue: statusFilter,
+    setFilterValue: setStatusFilter,
+    fetchMembers,
+  } = useMembers();
  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
  const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
  const [statusChanging, setStatusChanging] = useState(null);
@@ -41,46 +47,6 @@ const AdminMembers = () => {
  const [importDialogOpen, setImportDialogOpen] = useState(false);
  const [exporting, setExporting] = useState(false);

-  useEffect(() => {
-    fetchMembers();
-  }, []);
-
-  useEffect(() => {
-    filterUsers();
-  }, [users, searchQuery, statusFilter]);
-
-  const fetchMembers = async () => {
-    try {
-      const response = await api.get('/admin/users');
-      // Filter to only members
-      const members = response.data.filter(user => user.role === 'member');
-      setUsers(members);
-    } catch (error) {
-      toast.error('Failed to fetch members');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filterUsers = () => {
-    let filtered = users;
-
-    if (statusFilter && statusFilter !== 'all') {
-      filtered = filtered.filter(user => user.status === statusFilter);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user =>
-        user.first_name.toLowerCase().includes(query) ||
-        user.last_name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredUsers(filtered);
-  };
-
  const handleActivatePayment = (user) => {
    setSelectedUserForPayment(user);
    setPaymentDialogOpen(true);
@@ -200,27 +166,6 @@ const AdminMembers = () => {
    };
  };

-  const getStatusBadge = (status) => {
-    const config = {
-      pending_email: { label: 'Pending Email', variant: 'orange2' },
-      pending_validation: { label: 'Pending Validation', variant: 'gray' },
-      pre_validated: { label: 'Pre-Validated', variant: 'green' },
-      payment_pending: { label: 'Payment Pending', variant: 'orange' },
-      active: { label: 'Active', variant: 'green' },
-      inactive: { label: 'Inactive', variant: 'gray2' },
-      canceled: { label: 'Canceled', variant: 'red' },
-      expired: { label: 'Expired', variant: 'red2' },
-      abandoned: { label: 'Abandoned', variant: 'gray3' }
-    };
-
-    const statusConfig = config[status] || config.inactive;
-    return (
-      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };
-
  const getReminderInfo = (user) => {
    const emailReminders = user.email_verification_reminders_sent || 0;
    const eventReminders = user.event_attendance_reminders_sent || 0;
@@ -244,7 +189,7 @@ const AdminMembers = () => {
  return (
    <>
      <div className="mb-8">
-        <div className="flex justify-between items-start mb-4">
+        <div className="flex flex-col md:flex-row  justify-between items-start mb-4">
          <div>
            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Members Management
@@ -253,7 +198,7 @@ const AdminMembers = () => {
              Manage paying members and their subscriptions.
            </p>
          </div>
-          <div className="flex gap-3 flex-wrap">
+          <div className="flex gap-3 flex-wrap ">
            {hasPermission('users.export') && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
@@ -325,8 +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}
@@ -355,9 +298,6 @@ const AdminMembers = () => {
            iconBgClass=" text-brand-pink"
            dataTestId="stat-inactive-members"
          />
-
-
-
        </div>
      </div>

@@ -401,7 +341,8 @@ const AdminMembers = () => {
      ) : filteredUsers.length > 0 ? (
        <div className="space-y-4">
          {filteredUsers.map((user) => {
-            const joinedDate = user.member_since || user.created_at;
+            const joinedDate = user.created_at;
+            const memberDate = user.member_since;
            return (
              <Card
                key={user.id}
@@ -421,12 +362,13 @@ const AdminMembers = () => {
                        <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
                          {user.first_name} {user.last_name}
                        </h3>
-                        {getStatusBadge(user.status)}
+                        <StatusBadge status={user.status} />
                      </div>
                      <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        <p>Email: {user.email}</p>
                        <p>Phone: {user.phone}</p>
-                        <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        <p>Registered: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        <p>Member Since: {memberDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                        {user.referred_by_member_name && (
                          <p>Referred by: {user.referred_by_member_name}</p>
                        )}
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -23,6 +23,7 @@ import {
  Search,
  DollarSign
 } from 'lucide-react';
+import StatusBadge from '@/components/StatusBadge';

 const AdminPlans = () => {
  const { hasPermission } = useAuth();
@@ -236,7 +237,7 @@ const AdminPlans = () => {
                  {plan.active ? 'Active' : 'Inactive'}
                </Badge>
                {plan.subscriber_count > 0 && (
-                  <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
+                  <Badge className="bg-[var(--neutral-800)] hover:text-white text-[var(--purple-ink)]">
                    <Users className="h-3 w-3 mr-1" />
                    {plan.subscriber_count}
                  </Badge>
--- a/src/pages/admin/AdminRoles.js
+++ b/src/pages/admin/AdminRoles.js
@@ -39,6 +39,7 @@ const AdminRoles = () => {
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [showPermissionsModal, setShowPermissionsModal] = useState(false);
  const [expandedModules, setExpandedModules] = useState({});
+  const [savingPermissions, setSavingPermissions] = useState(false);
  const [formData, setFormData] = useState({
    code: '',
    name: '',
@@ -46,6 +47,15 @@ const AdminRoles = () => {
    permissions: []
  });

+  const formatRoleSlug = (value) => (
+    value
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/_+/g, '-')
+      .replace(/^_+|_+$/g, '')
+  );
+
  useEffect(() => {
    fetchRoles();
    fetchPermissions();
@@ -133,6 +143,7 @@ const AdminRoles = () => {
  };

  const handleSavePermissions = async () => {
+    setSavingPermissions(true);
    try {
      await api.put(`/admin/roles/${selectedRole.id}/permissions`, {
        permission_codes: selectedPermissions
@@ -142,6 +153,8 @@ const AdminRoles = () => {
      fetchRoles();
    } catch (error) {
      toast.error('Failed to update permissions');
+    } finally {
+      setSavingPermissions(false);
    }
  };

@@ -155,6 +168,14 @@ const AdminRoles = () => {
    });
  };

+  const addPermissions = (permissionCodes) => {
+    setSelectedPermissions(prev => [...new Set([...prev, ...permissionCodes])]);
+  };
+
+  const removePermissions = (permissionCodes) => {
+    setSelectedPermissions(prev => prev.filter(code => !permissionCodes.includes(code)));
+  };
+
  const toggleModule = (module) => {
    setExpandedModules(prev => ({
      ...prev,
@@ -282,8 +303,28 @@ const AdminRoles = () => {
          </DialogHeader>

          <div className="space-y-4">
+
            <div>
-              <Label>Role Code *</Label>
+              <Label>Role Name *</Label>
+              <Input
+                placeholder="e.g., Content Editor, Finance Manager"
+                value={formData.name}
+                onChange={(e) => {
+                  const nextName = e.target.value;
+                  setFormData(prev => {
+                    const prevAuto = formatRoleSlug(prev.name);
+                    const isAuto = !prev.code || prev.code === prevAuto;
+                    return {
+                      ...prev,
+                      name: nextName,
+                      code: isAuto ? formatRoleSlug(nextName) : prev.code
+                    };
+                  });
+                }}
+              />
+            </div>
+            <div>
+              <Label>Role Slug *</Label>
              <Input
                placeholder="e.g., content_editor, finance_manager"
                value={formData.code}
@@ -294,15 +335,6 @@ const AdminRoles = () => {
              </p>
            </div>

-            <div>
-              <Label>Role Name *</Label>
-              <Input
-                placeholder="e.g., Content Editor, Finance Manager"
-                value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              />
-            </div>
-
            <div>
              <Label>Description</Label>
              <Textarea
@@ -382,10 +414,6 @@ const AdminRoles = () => {
          </DialogHeader>

          <div className="space-y-4">
-            <div>
-              <Label>Role Code</Label>
-              <Input value={selectedRole?.code || ''} disabled />
-            </div>

            <div>
              <Label>Role Name *</Label>
@@ -395,6 +423,11 @@ const AdminRoles = () => {
              />
            </div>

+            <div>
+              <Label>Role Slug</Label>
+              <Input value={selectedRole?.code || ''} disabled />
+            </div>
+
            <div>
              <Label>Description</Label>
              <Textarea
@@ -426,48 +459,77 @@ const AdminRoles = () => {
          </DialogHeader>

          <div className="border rounded-lg p-4">
-            {Object.entries(groupedPermissions).map(([module, perms]) => (
-              <div key={module} className="mb-6">
-                <button
-                  onClick={() => toggleModule(module)}
-                  className="flex items-center w-full text-left font-medium text-lg mb-3 hover:text-blue-600"
-                >
-                  {expandedModules[module] ? (
-                    <ChevronUp className="w-5 h-5 mr-2" />
-                  ) : (
-                    <ChevronDown className="w-5 h-5 mr-2" />
-                  )}
-                  {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
-                </button>
-                {expandedModules[module] && (
-                  <div className="space-y-3 ml-7">
-                    {perms.map(perm => (
-                      <div key={perm.code} className="flex items-start">
-                        <Checkbox
-                          checked={selectedPermissions.includes(perm.code)}
-                          onCheckedChange={() => togglePermission(perm.code)}
-                        />
-                        <div className="ml-3">
-                          <label className="font-medium text-sm">
-                            {perm.name}
-                          </label>
-                          <p className="text-xs text-gray-500">{perm.description}</p>
-                          <span className="text-xs text-gray-400">{perm.code}</span>
-                        </div>
-                      </div>
-                    ))}
+            {Object.entries(groupedPermissions).map(([module, perms]) => {
+              const moduleCodes = perms.map(perm => perm.code);
+              const selectedCount = moduleCodes.filter(code => selectedPermissions.includes(code)).length;
+              const hasPermissions = moduleCodes.length > 0;
+              const isAllSelected = hasPermissions && selectedCount === moduleCodes.length;
+              const isNoneSelected = selectedCount === 0;
+
+              return (
+                <div key={module} className="mb-6">
+                  <div className="flex items-center justify-between mb-3">
+                    <button
+                      type="button"
+                      onClick={() => toggleModule(module)}
+                      className="flex items-center text-left font-medium text-lg hover:text-blue-600"
+                    >
+                      {expandedModules[module] ? (
+                        <ChevronUp className="w-5 h-5 mr-2" />
+                      ) : (
+                        <ChevronDown className="w-5 h-5 mr-2" />
+                      )}
+                      {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
+                    </button>
+                    <div className="flex items-center gap-3">
+                      <button
+                        type="button"
+                        onClick={() => addPermissions(moduleCodes)}
+                        disabled={!hasPermissions || isAllSelected}
+                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Select all
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removePermissions(moduleCodes)}
+                        disabled={!hasPermissions || isNoneSelected}
+                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Deselect all
+                      </button>
+                    </div>
                  </div>
-                )}
-              </div>
-            ))}
+                  {expandedModules[module] && (
+                    <div className="space-y-3 ml-7">
+                      {perms.map(perm => (
+                        <div key={perm.code} className="flex items-start">
+                          <Checkbox
+                            checked={selectedPermissions.includes(perm.code)}
+                            onCheckedChange={() => togglePermission(perm.code)}
+                          />
+                          <div className="ml-3">
+                            <label className="font-medium text-sm">
+                              {perm.name}
+                            </label>
+                            <p className="text-xs text-gray-500">{perm.description}</p>
+                            <span className="text-xs text-gray-400">{perm.code}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPermissionsModal(false)}>
              Cancel
            </Button>
-            <Button onClick={handleSavePermissions}>
-              Save Permissions
+            <Button onClick={handleSavePermissions} disabled={savingPermissions}>
+              {savingPermissions ? 'Saving...' : 'Save Permissions'}
            </Button>
          </DialogFooter>
        </DialogContent>
@@ -491,6 +553,15 @@ const AdminRoles = () => {
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
+
+      {savingPermissions && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded-xl shadow-lg px-6 py-5 text-center">
+            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-4 border-[var(--neutral-800)] border-t-transparent" />
+            <p className="mt-4 text-sm font-medium text-gray-700">Saving permissions...</p>
+          </div>
+        </div>
+      )}
    </div>
  );
 };
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
@@ -12,72 +11,44 @@ import CreateStaffDialog from '../../components/CreateStaffDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import PendingInvitationsTable from '../../components/PendingInvitationsTable';
 import { toast } from 'sonner';
-import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX } from 'lucide-react';
+import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX, ShieldIcon } from 'lucide-react';
+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'];

 const AdminStaff = () => {
  const navigate = useNavigate();
  const { hasPermission, user } = useAuth();
-  const [users, setUsers] = useState([]);
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [roleFilter, setRoleFilter] = useState('all');
+  const {
+    users,
+    filteredUsers,
+    loading,
+    searchQuery,
+    setSearchQuery,
+    filterValue: roleFilter,
+    setFilterValue: setRoleFilter,
+    fetchMembers,
+  } = useMembers({
+    initialFilter: 'all',
+    filterKey: 'role',
+    allowedRoles: STAFF_ROLES,
+    fetchErrorMessage: 'Failed to fetch staff',
+  });
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('staff-list');

-  // Staff roles (non-guest, non-member) - includes all admin-type roles
-  const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
-
-  useEffect(() => {
-    fetchStaff();
-  }, []);
-
-  useEffect(() => {
-    filterUsers();
-  }, [users, searchQuery, roleFilter]);
-
-  const fetchStaff = async () => {
-    try {
-      const response = await api.get('/admin/users');
-      // Filter to only staff roles
-      const staffUsers = response.data.filter(user =>
-        STAFF_ROLES.includes(user.role)
-      );
-      setUsers(staffUsers);
-    } catch (error) {
-      toast.error('Failed to fetch staff');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filterUsers = () => {
-    let filtered = users;
-
-    if (roleFilter && roleFilter !== 'all') {
-      filtered = filtered.filter(user => user.role === roleFilter);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user =>
-        user.first_name.toLowerCase().includes(query) ||
-        user.last_name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredUsers(filtered);
-  };
-
  const handleToggleStatus = async (userId, currentStatus) => {
    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';

    try {
      await api.put(`/admin/users/${userId}/status`, { status: newStatus });
      toast.success(`User ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
-      fetchStaff(); // Refresh list
+      fetchMembers(); // Refresh list
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to update user status');
    }
@@ -91,48 +62,19 @@ const AdminStaff = () => {
    try {
      await api.delete(`/admin/users/${userId}`);
      toast.success('User deleted successfully');
-      fetchStaff(); // Refresh list
+      fetchMembers(); // Refresh list
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to delete user');
    }
  };

-  const getRoleBadge = (role) => {
-    const config = {
-      superadmin: { label: 'Superadmin', variant: 'purple' },
-      admin: { label: 'Admin', variant: 'green' },
-      moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-      staff: { label: 'Staff', variant: 'gray' },
-      media: { label: 'Media', variant: 'gray2' }
-    };

-    const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
-    return (
-      <Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
-        <Shield className="h-3 w-3 mr-1 inline" />
-        {roleConfig.label}
-      </Badge>
-    );
-  };

-  const getStatusBadge = (status) => {
-    const config = {
-      active: { label: 'Active', variant: 'green' },
-      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
-    };
-
-    const statusConfig = config[status] || config.inactive;
-    return (
-      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };

  return (
    <>
      <div className="mb-8">
-        <div className="flex justify-between items-start mb-4">
+        <div className="flex flex-col md:flex-row justify-between items-start mb-4">
          <div>
            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Staff Management
@@ -141,7 +83,8 @@ const AdminStaff = () => {
              Manage internal team members and their roles.
            </p>
          </div>
-          <div className="flex gap-3">
+
+          <div className="flex gap-3 ">
            {hasPermission('users.create') && (
              <Button
                onClick={() => setInviteDialogOpen(true)}
@@ -165,42 +108,52 @@ const AdminStaff = () => {
      </div>

      {/* Stats */}
-      <div className="grid md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.role === 'moderator').length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'active').length}
-          </p>
-        </Card>
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+          <StatCard
+            title="Total Members"
+            //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}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            dataTestId="stat-total-members"
+          />
+          <StatCard
+            title="Admins"
+            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
+            icon={Shield}
+            iconBgClass="text-[var(--green-light)]"
+            dataTestId="stat-active-members"
+          />
+          <StatCard
+            title="Moderators"
+            value={users.filter(u => u.role === 'moderator').length}
+            icon={CreditCard}
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-payment-pending-members"
+          />
+          <StatCard
+            title="Inactive"
+            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length && users.filter(u => u.status !== 'inactive').length}
+            icon={CircleMinus}
+            iconBgClass=" text-brand-pink"
+            dataTestId="stat-inactive-members"
+          />
+        </div>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
-        <TabsList className="grid w-full grid-cols-2 mb-8">
-          <TabsTrigger value="staff-list" className="text-lg  py-3">
-            <UserCog className="h-5 w-5 mr-2" />
+        <TabsList className="grid w-full grid-cols-2 mb-8 ">
+          <TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg  py-3">
+            <UserCog className="h-5 w-5 mr-2 hidden md:inline" />
            Staff Members
          </TabsTrigger>
-          <TabsTrigger value="pending-invitations" className="text-lg py-3  ">
-            <Mail className="h-5 w-5 mr-2" />
+          <TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg  py-3  ">
+            <Mail className="h-5 w-5 mr-2 hidden md:inline" />
            Pending Invitations
          </TabsTrigger>
        </TabsList>
@@ -250,79 +203,79 @@ const AdminStaff = () => {
                    className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
                    data-testid={`staff-card-${user.id}`}
                  >
-                  <div className="flex justify-between items-start flex-wrap gap-4">
-                    <div className="flex items-start gap-4 flex-1">
-                      {/* Avatar */}
-                      <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
-                        {user.first_name?.[0]}{user.last_name?.[0]}
-                      </div>
-
-                      {/* Info */}
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-3 mb-2 flex-wrap">
-                          <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                            {user.first_name} {user.last_name}
-                          </h3>
-                          {getRoleBadge(user.role)}
-                          {getStatusBadge(user.status)}
+                    <div className="flex justify-between items-start flex-wrap gap-4">
+                      <div className="flex items-start gap-4 flex-1">
+                        {/* Avatar */}
+                        <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
+                          {user.first_name?.[0]}{user.last_name?.[0]}
                        </div>
-                        <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          <p>Email: {user.email}</p>
-                          <p>Phone: {user.phone}</p>
-                          <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
-                          {user.last_login && (
-                            <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
-                          )}
+
+                        {/* Info */}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-3 mb-2 flex-wrap">
+                            <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              {user.first_name} {user.last_name}
+                            </h3>
+                            <StatusBadge status={user.role} />
+                            <StatusBadge status={user.status} />
+                          </div>
+                          <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p>Email: {user.email}</p>
+                            <p>Phone: {user.phone}</p>
+                            <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                            {user.last_login && (
+                              <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
+                            )}
+                          </div>
                        </div>
                      </div>
-                    </div>

-                    {/* Actions */}
-                    <div className="flex gap-2 flex-wrap">
-                      <Button
-                        onClick={() => navigate(`/admin/users/${user.id}`)}
-                        variant="outline"
-                        className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
-                      >
-                        <Edit className="h-4 w-4 mr-2" />
-                        Manage
-                      </Button>
-
-                      {hasPermission('users.status') && (
+                      {/* Actions */}
+                      <div className="flex gap-2 flex-wrap">
                        <Button
-                          onClick={() => handleToggleStatus(user.id, user.status)}
+                          onClick={() => navigate(`/admin/users/${user.id}`)}
                          variant="outline"
-                          className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
-                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
-                            : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
-                            }`}
+                          className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
                        >
-                          {user.status === 'active' ? (
-                            <>
-                              <UserX className="h-4 w-4 mr-2" />
-                              Deactivate
-                            </>
-                          ) : (
-                            <>
-                              <UserCheck className="h-4 w-4 mr-2" />
-                              Activate
-                            </>
-                          )}
+                          <Edit className="h-4 w-4 mr-2" />
+                          Manage
                        </Button>
-                      )}

-                      {hasPermission('users.delete') && (
-                        <Button
-                          onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
-                          variant="outline"
-                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
-                        >
-                          <Trash2 className="h-4 w-4 mr-2" />
-                          Delete
-                        </Button>
-                      )}
+                        {hasPermission('users.status') && (
+                          <Button
+                            onClick={() => handleToggleStatus(user.id, user.status)}
+                            variant="outline"
+                            className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
+                              ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
+                              : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
+                              }`}
+                          >
+                            {user.status === 'active' ? (
+                              <>
+                                <UserX className="h-4 w-4 mr-2" />
+                                Deactivate
+                              </>
+                            ) : (
+                              <>
+                                <UserCheck className="h-4 w-4 mr-2" />
+                                Activate
+                              </>
+                            )}
+                          </Button>
+                        )}
+
+                        {hasPermission('users.delete') && (
+                          <Button
+                            onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
+                            variant="outline"
+                            className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                          </Button>
+                        )}
+                      </div>
                    </div>
-                  </div>
                  </Card>
                );
              })}
@@ -351,7 +304,7 @@ const AdminStaff = () => {
      <CreateStaffDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
-        onSuccess={fetchStaff}
+        onSuccess={fetchMembers}
      />

      <InviteStaffDialog
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -19,7 +19,6 @@ import {
  DialogHeader,
  DialogTitle,
 } from '../../components/ui/dialog';
-import { Badge } from '../../components/ui/badge';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -47,6 +46,7 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
+import StatusBadge from '@/components/StatusBadge';

 const AdminSubscriptions = () => {
  const { hasPermission } = useAuth();
@@ -302,14 +302,7 @@ Proceed with activation?`;
    }
  };

-  const getStatusBadgeVariant = (status) => {
-    const variants = {
-      active: 'default',
-      cancelled: 'destructive',
-      expired: 'secondary'
-    };
-    return variants[status] || 'outline';
-  };
+

  if (loading) {
    return (
@@ -501,7 +494,7 @@ Proceed with activation?`;
                        {sub.user.email}
                      </p>
                    </div>
-                    <Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
+                    <StatusBadge status={sub.status} />
                  </div>

                  {/* Plan & Period */}
@@ -635,9 +628,8 @@ Proceed with activation?`;
                          </div>
                        </td>
                        <td className="p-4">
-                          <Badge variant={getStatusBadgeVariant(sub.status)}>
-                            {sub.status}
-                          </Badge>
+                          <StatusBadge status={sub.status} />
+
                        </td>
                        <td className="p-4">
                          <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -10,6 +10,7 @@ import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera,
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
+import StatusBadge from '../../components/StatusBadge';

 const AdminUserView = () => {
  const { userId } = useParams();
@@ -277,7 +278,7 @@ const AdminUserView = () => {
  if (loading) return <div>Loading...</div>;
  if (!user) return null;

-  const joinedDate = user.member_since || user.created_at;
+  const joinedDate = user.created_at;
  const memberSinceBaseline = formatDateInputValue(user.member_since);
  const memberSinceHasChanges = memberSince !== memberSinceBaseline;

@@ -311,8 +312,9 @@ const AdminUserView = () => {
                {user.first_name} {user.last_name}
              </h1>
              {/* Status & Role Badges */}
-              <Badge>{user.status}</Badge>
-              <Badge>{user.role}</Badge>
+              <StatusBadge status={user.status} />
+              <StatusBadge status={user.role} />
+             
            </div>

            {/* Contact Info */}
@@ -331,7 +333,7 @@ const AdminUserView = () => {
              </div>
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
-                <span>Joined {formatDateDisplayValue(joinedDate)}</span>
+                <span>Registered: {formatDateDisplayValue(joinedDate)}</span>
              </div>
            </div>
          </div>
@@ -506,13 +508,7 @@ const AdminUserView = () => {
                        {sub.plan.billing_cycle}
                      </p>
                    </div>
-                    <Badge className={
-                      sub.status === 'active' ? 'bg-[var(--green-light)] text-white' :
-                        sub.status === 'expired' ? 'bg-red-500 text-white' :
-                          'bg-gray-400 text-white'
-                    }>
-                      {sub.status}
-                    </Badge>
+                    <StatusBadge status={sub.status} />
                  </div>

                  <div className="grid md:grid-cols-2 gap-4 text-sm">
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -3,7 +3,6 @@ import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import {
  Select,
@@ -34,6 +33,7 @@ import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react'
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
+import StatusBadge from '@/components/StatusBadge';

 const AdminValidations = () => {
  const { hasPermission } = useAuth();
@@ -235,22 +235,7 @@ const AdminValidations = () => {
    }
  };

-  const getStatusBadge = (status) => {
-    const config = {
-      pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
-      pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
-      payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
-    };
-
-    const statusConfig = config[status];
-    return (
-      <Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };
+ 

  const handleSort = (column) => {
    if (sortBy === column) {
@@ -401,7 +386,7 @@ const AdminValidations = () => {
                    </TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>{user.phone}</TableCell>
-                    <TableCell>{getStatusBadge(user.status)}</TableCell>
+                    <TableCell><StatusBadge status={user.status} /></TableCell>
                    <TableCell>
                      {new Date(user.created_at).toLocaleDateString()}
                    </TableCell>
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -15,6 +15,8 @@ import {
 } from '../../components/ui/dialog';
 import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
+import StatusBadge from '@/components/StatusBadge';
+import MemberCard from '../../components/MemberCard';

 const MembersDirectory = () => {
  const [members, setMembers] = useState([]);
@@ -80,9 +82,7 @@ const MembersDirectory = () => {

  const totalMembers = members.length;

-  const getInitials = (firstName, lastName) => {
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-  };
+

  const getSocialMediaLink = (url) => {
    if (!url) return null;
@@ -118,168 +118,6 @@ const MembersDirectory = () => {
        : <div className=' border-2 w-full border-brand-purple  mb-24' />
    )
  }
-  const MemberCard = ({ member }) => {
-    const joinedDate = member.member_since || member.created_at;
-    return (
-      <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
-      {/* Profile Photo */}
-      <div className="flex justify-center mb-4">
-        {member.profile_photo_url ? (
-          <img
-            src={member.profile_photo_url}
-            alt={`${member.first_name} ${member.last_name}`}
-            className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
-          />
-        ) : (
-          <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
-            <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
-              {getInitials(member.first_name, member.last_name)}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Name */}
-      <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
-        {member.first_name} {member.last_name}
-      </h3>
-
-      {/* Partner Name */}
-      {member.directory_partner_name && (
-        <div className="flex items-center justify-center gap-2 mb-4">
-          <Heart className="h-4 w-4 text-[var(--orange-light)]" />
-          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            Partner: {member.directory_partner_name}
-          </span>
-        </div>
-      )}
-
-      {/* Bio */}
-      {member.directory_bio && (
-        <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-          {member.directory_bio}
-        </p>
-      )}
-
-      {/* Member Since */}
-      {joinedDate && (
-        <div className="flex items-center justify-center gap-2 mb-4">
-          <Calendar className="h-4 w-4 text-brand-purple " />
-          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            Member since {new Date(joinedDate).toLocaleDateString('en-US', {
-              month: 'long',
-              year: 'numeric'
-            })}
-          </span>
-        </div>
-      )}
-
-      {/* Contact Information */}
-      <div className="space-y-3 mb-4">
-        {member.directory_email && (
-          <div className="flex items-center gap-2 text-sm">
-            <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
-            <a
-              href={`mailto:${member.directory_email}`}
-              className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-            >
-              {member.directory_email}
-            </a>
-          </div>
-        )}
-
-        {member.directory_phone && (
-          <div className="flex items-center gap-2 text-sm">
-            <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
-            <a
-              href={`tel:${member.directory_phone}`}
-              className="text-brand-purple  hover:text-[var(--purple-ink)]"
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-            >
-              {member.directory_phone}
-            </a>
-          </div>
-        )}
-
-        {member.directory_address && (
-          <div className="flex items-start gap-2 text-sm">
-            <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
-            <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              {member.directory_address}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Social Media Links */}
-      {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
-        <div className="pt-4 border-t border-[var(--neutral-800)]">
-          <div className="flex justify-center gap-3">
-            {member.social_media_facebook && (
-              <a
-                href={getSocialMediaLink(member.social_media_facebook)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                title="Facebook"
-              >
-                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
-              </a>
-            )}
-
-            {member.social_media_instagram && (
-              <a
-                href={getSocialMediaLink(member.social_media_instagram)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                title="Instagram"
-              >
-                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
-              </a>
-            )}
-
-            {member.social_media_twitter && (
-              <a
-                href={getSocialMediaLink(member.social_media_twitter)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                title="Twitter/X"
-              >
-                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
-              </a>
-            )}
-
-            {member.social_media_linkedin && (
-              <a
-                href={getSocialMediaLink(member.social_media_linkedin)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                title="LinkedIn"
-              >
-                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
-              </a>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* View Profile Button */}
-      <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
-        <Button
-          onClick={() => handleViewProfile(member.id)}
-          className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
-        >
-          <UserCircle className="h-4 w-4 mr-2" />
-          View Full Profile
-        </Button>
-      </div>
-    </Card>
-    );
-  };

  return (
    <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
@@ -354,7 +192,7 @@ const MembersDirectory = () => {

        {/* Border Decoration */}
        <Border yaxis="true" />
-
+        {/* todo: use badge to display if member */}
        {/* Info Card */}
        {!loading && members.length > 0 && (
          <Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
@@ -377,15 +215,16 @@ const MembersDirectory = () => {
          </Card>
        )}
      </div>
-
      {/* Profile Detail Dialog */}
      <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
          {selectedMember && (
            <>
              <DialogHeader>
-                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)] flex items-center justify-between mr-8" style={{ fontFamily: "'Inter', sans-serif" }}>
                  {selectedMember.first_name} {selectedMember.last_name}
+                  {/* todo: figure out the correct selection to get the status of the user and pass into badge */}
+                  <StatusBadge status={selectedMember.status} />
                </DialogTitle>
                {selectedMember.directory_partner_name && (
                  <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -563,8 +402,6 @@ const MembersDirectory = () => {
        </DialogContent>
      </Dialog>

-
-
      {/* Pagination */}
      {!loading && filteredMembers.length > 0 && (
        <div className="mt-10 flex flex-col items-center gap-4 pb-12">
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -54,3 +54,4 @@ h6 {
    #ffffff 100%
  );
 }
+
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -101,6 +101,7 @@ module.exports = {

 	plugins: [
 		require("tailwindcss-animate"),
-		require("@tailwindcss/typography")
+		require("@tailwindcss/typography"),
+		require('@tailwindcss/line-clamp')
 	],
 };
--- a/yarn.lock
+++ b/yarn.lock
@@ -2552,6 +2552,11 @@
    "@svgr/plugin-svgo" "^5.5.0"
    loader-utils "^2.0.0"

+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@tailwindcss/typography@^0.5.19":
  version "0.5.19"
  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.19.tgz#ecb734af2569681eb40932f09f60c2848b909456"
Author	SHA1	Message	Date
kayela	f2dd053320	feat: enhance AdminRoles to manage permissions with loading state and role slug updates	2026-01-22 15:23:50 -06:00
kayela	554b599599	feat: refactor AdminMembers and AdminStaff to utilize useMembers hook for improved member management	2026-01-22 14:47:34 -06:00
kayela	ac879b69b4	feat: Introduce StatusBadge component for consistent status representation - Added StatusBadge component to standardize the display of user and membership statuses across various admin pages. - Refactored AdminMembers, AdminPlans, AdminStaff, AdminSubscriptions, AdminUserView, AdminValidations, and MembersDirectory to utilize the new StatusBadge component. - Removed redundant status badge logic from AdminMembers, AdminStaff, and AdminValidations. - Updated AdminLayout to include a mobile-friendly sidebar toggle button with Menu icon. - Created MemberCard component to encapsulate member display logic, improving code reusability. - Adjusted various components to enhance user experience and maintain consistent styling.	2026-01-22 14:20:02 -06:00
kayela	6c844c0e19	feat: add @tailwindcss/line-clamp dependency and integrate responsive layout adjustments in Admin components for improved UI	2026-01-22 12:07:56 -06:00