import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Search, ChevronLeft, ChevronRight, UserMinus, Shield, ShieldAlert, BookOpen, ClipboardList } from 'lucide-react'; import { useState, useEffect } from 'react'; import { toast } from 'sonner'; interface User { id: number; name: string; email: string; is_admin: boolean; created_at: string; orders_count: number; enrollments_count: number; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface Props { users: { data: User[]; total: number; links: PaginationLink[]; current_page: number; last_page: number; prev_page_url: string | null; next_page_url: string | null; }; filters: { search?: string; role?: string; }; } export default function Index({ users, filters }: Props) { const { auth } = usePage().props; const [search, setSearch] = useState(filters.search || ''); const [role, setRole] = useState(filters.role || 'all'); const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [selectedUser, setSelectedUser] = useState(null); // Trigger Inertia reload for search / role filters const handleFilterChange = (newSearch: string, newRole: string) => { router.get( route('admin.users.index'), { search: newSearch, role: newRole !== 'all' ? newRole : undefined }, { preserveState: true, replace: true } ); }; // Debounce search input useEffect(() => { const timer = setTimeout(() => { if (search !== (filters.search || '')) { handleFilterChange(search, role); } }, 400); return () => clearTimeout(timer); }, [search]); const handleRoleSelect = (selectedRole: string) => { setRole(selectedRole); handleFilterChange(search, selectedRole); }; const handleToggleAdmin = (user: User) => { if (user.id === auth.user.id) { toast.error('You cannot change your own privileges.'); return; } router.patch(route('admin.users.update', user.id), { is_admin: !user.is_admin, }, { onSuccess: () => toast.success('User privileges updated successfully'), onError: (err: any) => toast.error(err.error || 'Failed to update user privileges'), }); }; const confirmDelete = (user: User) => { if (user.id === auth.user.id) { toast.error('You cannot delete your own account.'); return; } setSelectedUser(user); setDeleteModalOpen(true); }; const handleDelete = () => { if (!selectedUser) return; router.delete(route('admin.users.destroy', selectedUser.id), { onSuccess: () => { toast.success('User deleted successfully'); setDeleteModalOpen(false); setSelectedUser(null); }, onError: () => { toast.error('Failed to delete user'); } }); }; const userList = users.data || []; return ( {/* Header */}

Users

Manage user accounts, roles, orders, and course enrollments. Total users: {users.total}

{/* Toolbar */}
{/* Role Tabs */}
{[ { id: 'all', label: 'All Users' }, { id: 'admin', label: 'Administrators' }, { id: 'customer', label: 'Customers' } ].map((tab) => ( ))}
{/* Search */}
setSearch(e.target.value)} placeholder="Search name, email…" className="pl-9 pr-4 py-2 bg-white border border-[#E8E6DF] rounded-lg text-[13px] text-ink placeholder:text-[#8C92AC] focus:outline-none focus:ring-2 focus:ring-primary/15 w-full" />
{/* Mobile View: Cards */}
{userList.map((user) => { const initials = user.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2); const isSelf = user.id === auth.user.id; return (
{initials}

{user.name} {isSelf && You}

{user.email}

{user.is_admin ? 'Admin' : 'Customer'}
{user.orders_count} Orders
{user.enrollments_count} Courses
); })} {userList.length === 0 && (
No users found.
)}
{/* Desktop View: Table */}
{['User', 'Role', 'Registered', 'Activity', 'Actions'].map((h) => ( ))} {userList.map((user) => { const initials = user.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2); const isSelf = user.id === auth.user.id; const regDate = new Date(user.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', }); return ( ); })}
{h}
{initials}

{user.name} {isSelf && You}

{user.email}

 {user.is_admin ? 'Admin' : 'Customer'} {regDate}
{user.orders_count} orders {user.enrollments_count} courses
{userList.length === 0 && (
No users found.
)}
{/* Pagination */} {users.last_page > 1 && (

Showing page {users.current_page} of {users.last_page}

{users.links.map((link, i) => { const isPrev = i === 0; const isNext = i === users.links.length - 1; if (isPrev) { return ( ); } if (isNext) { return ( ); } const isCurrent = link.active; const pageNum = parseInt(link.label); const isNear = Math.abs(pageNum - users.current_page) <= 1; const isEdge = pageNum === 1 || pageNum === users.last_page; if (isCurrent || isNear || isEdge) { return ( ); } if (pageNum === users.current_page - 2 || pageNum === users.current_page + 2) { return ...; } return null; })}
)} {/* Delete Modal */} {deleteModalOpen && selectedUser && (

Delete User Account

Are you sure you want to delete {selectedUser.name}? This action cannot be undone and will delete all user enrollments and progress logs.

)} ); }