import { Head, Link, router } from '@inertiajs/react'; import { RotateCcw, ShieldCheck, UserPlus, UserRound } from 'lucide-react'; import { useState, type FormEvent } from 'react'; import { EmptyState, PageHeader } from '@/components/crm/page-header'; import { NativeSelect } from '@/components/crm/native-select'; import { StatusLabel, StatusPill } from '@/components/crm/status-badge'; import { toneClasses } from '@/components/crm/tone'; import { SearchInput, TableCard, FilterBar, DataPagination } from '@/components/crm/toolbar'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { formatDateTime, formatRelative, initials } from '@/lib/format'; import { cn } from '@/lib/utils'; import { index as rolesIndex } from '@/routes/roles'; import { create as userCreate, destroy as userDestroy, edit as userEdit, index as usersIndex, } from '@/routes/users'; import type { Option, Paginated, UserSummary } from '@/types'; type Props = { users: Paginated; filters: { search: string | null; role: string | null; status: string | null; }; filterOptions: { roles: string[]; statuses: Option[]; }; can: { create: boolean; manageRoles: boolean; }; }; /** * Role colours so the same role reads the same way everywhere in the app. */ const roleTones: Record = { 'Super Admin': 'violet', 'Managing Director': 'teal', Admin: 'blue', 'Admin Support': 'indigo', 'Operations Manager': 'amber', 'Sales Manager': 'cyan', Sales: 'emerald', Installer: 'orange', Warehouse: 'slate', Finance: 'green', }; function roleTone(role: string): string { return roleTones[role] ?? 'slate'; } const headClass = '[&_th]:text-[11px] [&_th]:font-semibold [&_th]:tracking-wide [&_th]:uppercase'; export default function UsersIndex({ users, filters, filterOptions, can }: Props) { const [search, setSearch] = useState(filters.search ?? ''); const [role, setRole] = useState(filters.role ?? ''); const [status, setStatus] = useState(filters.status ?? 'all'); const applyFilters = (event: FormEvent): void => { event.preventDefault(); const params: Record = {}; if (search.trim()) { params.search = search.trim(); } if (role) { params.role = role; } if (status && status !== 'all') { params.status = status; } router.get(usersIndex().url, params, { preserveState: true, preserveScroll: true, replace: true, }); }; const resetFilters = (): void => { setSearch(''); setRole(''); setStatus('all'); router.get(usersIndex().url, {}, { preserveScroll: true, replace: true }); }; const removeStaff = (user: UserSummary): void => { const confirmed = window.confirm( `Hide ${user.name}? Their sign-in stops immediately and everything they did stays on record. Nothing is destroyed โ€” a Super Admin can restore the account from the recycle bin.`, ); if (confirmed) { router.delete(userDestroy(user.id).url, { preserveScroll: true }); } }; const activeCount = users.data.filter((user) => user.is_active).length; return ( <> {users.total} staff accounts ยท {activeCount} active on this page } title="Staff" description="Everyone who can sign in, and the role that decides what they can do." actions={ <> {can.manageRoles ? ( ) : null} {can.create ? ( ) : null} } />
} >
Search
{users.data.length === 0 ? ( ) : ( Person Role Position Contact Status Last sign in Actions {users.data.map((user) => { const primary = user.primary_role ?? user.roles[0] ?? ''; const roleClasses = toneClasses( roleTone(primary), ); return (
{initials(user.name)}
{user.name} {user.email}
{user.roles.length === 0 ? ( No role ) : ( user.roles.map((roleName) => ( {roleName} )) )}
{user.job_title ?? 'โ€”'} {user.department ? ( {user.department} ) : null}
{user.phone ?? 'โ€”'} {user.employee_code ? ( {user.employee_code} ) : null}
{user.is_active ? 'Active' : 'Deactivated'} {user.last_login_at ? formatRelative( user.last_login_at, ) : 'Never'}
{can.create ? ( ) : null}
); })}
)} ); } UsersIndex.layout = { breadcrumbs: [ { title: 'Staff', href: usersIndex(), }, ], };