318 lines
13 KiB
JavaScript
318 lines
13 KiB
JavaScript
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 { Input } from '../../components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
|
|
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, ShieldIcon } from 'lucide-react';
|
|
import StatusBadge from '../../components/StatusBadge';
|
|
import { StatCard } from '@/components/StatCard';
|
|
import { CircleMinus, CreditCard, Users } from 'lucide-react';
|
|
import { useStaff } from '../../hooks/use-users';
|
|
|
|
const AdminStaff = () => {
|
|
const navigate = useNavigate();
|
|
const { hasPermission, user } = useAuth();
|
|
const {
|
|
users,
|
|
filteredUsers,
|
|
loading,
|
|
searchQuery,
|
|
setSearchQuery,
|
|
filterValue: roleFilter,
|
|
setFilterValue: setRoleFilter,
|
|
refetch,
|
|
} = useStaff({
|
|
initialFilter: 'all',
|
|
filterKey: 'role',
|
|
});
|
|
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
|
const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
|
|
const [activeTab, setActiveTab] = useState('staff-list');
|
|
|
|
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`);
|
|
refetch(); // Refresh list
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to update user status');
|
|
}
|
|
};
|
|
|
|
const handleDeleteUser = async (userId, userName) => {
|
|
if (!window.confirm(`Are you sure you want to delete ${userName}? This action cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await api.delete(`/admin/users/${userId}`);
|
|
toast.success('User deleted successfully');
|
|
refetch(); // Refresh list
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.detail || 'Failed to delete user');
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-8">
|
|
<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
|
|
</h1>
|
|
<p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Manage internal team members and their roles.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3 ">
|
|
{hasPermission('users.create') && (
|
|
<Button
|
|
onClick={() => setInviteDialogOpen(true)}
|
|
className="btn-util-purple h-12 px-6"
|
|
>
|
|
<Mail className="h-5 w-5 mr-2" />
|
|
Invite Staff
|
|
</Button>
|
|
)}
|
|
{hasPermission('users.create') && (
|
|
<Button
|
|
onClick={() => setCreateDialogOpen(true)}
|
|
className="btn-util-green h-12 px-6"
|
|
>
|
|
<UserPlus className="h-5 w-5 mr-2" />
|
|
Create Staff
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<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 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'].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="Finance Managers"
|
|
value={users.filter(u => u.role === 'finance').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-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-sm sm:text-md md:text-lg py-3 ">
|
|
<Mail className="h-5 w-5 mr-2 hidden md:inline" />
|
|
Pending Invitations
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="staff-list">
|
|
{/* Filters */}
|
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
|
|
<Input
|
|
placeholder="Search by name or email..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
data-testid="search-staff-input"
|
|
/>
|
|
</div>
|
|
<Select value={roleFilter} onValueChange={setRoleFilter}>
|
|
<SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]" data-testid="role-filter-select">
|
|
<SelectValue placeholder="Filter by role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Roles</SelectItem>
|
|
<SelectItem value="superadmin">Superadmin</SelectItem>
|
|
<SelectItem value="admin">Admin</SelectItem>
|
|
<SelectItem value="moderator">Moderator</SelectItem>
|
|
<SelectItem value="staff">Staff</SelectItem>
|
|
<SelectItem value="media">Media</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Staff List */}
|
|
{loading ? (
|
|
<div className="text-center py-20">
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
|
|
</div>
|
|
) : filteredUsers.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{filteredUsers.map((user) => {
|
|
const joinedDate = user.member_since || user.created_at;
|
|
return (
|
|
<Card
|
|
key={user.id}
|
|
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>
|
|
<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>
|
|
|
|
{/* 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') && (
|
|
<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>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20">
|
|
<UserCog className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
|
|
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
No Staff Found
|
|
</h3>
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{searchQuery || roleFilter !== 'all'
|
|
? 'Try adjusting your filters'
|
|
: 'No staff members yet'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="pending-invitations">
|
|
<PendingInvitationsTable />
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Dialogs */}
|
|
<CreateStaffDialog
|
|
open={createDialogOpen}
|
|
onOpenChange={setCreateDialogOpen}
|
|
onSuccess={refetch}
|
|
/>
|
|
|
|
<InviteStaffDialog
|
|
open={inviteDialogOpen}
|
|
onOpenChange={setInviteDialogOpen}
|
|
onSuccess={() => {
|
|
// Optionally refresh invitations table
|
|
setActiveTab('pending-invitations');
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AdminStaff;
|