import { Head, router, setLayoutProps } from '@inertiajs/react'; import { Boxes, MoreHorizontal, Pencil, Plus, Search, Trash2, Users, } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { destroy as divisionDestroy, index as adminDivisionsIndex, } from '@/actions/App/Domains/Shared/Http/Controllers/Admin/DivisionController'; import { DivisionFormDialog } from '@/components/admin/DivisionFormDialog'; import { DivisionMembersDialog } from '@/components/admin/DivisionMembersDialog'; import { ConfirmActionDialog } from '@/components/ConfirmActionDialog'; import { DataPagination } from '@/components/DataPagination'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import type { AdminDivision, UserOption } from '@/types/admin'; import type { PaginationData } from '@/types/pagination'; const FILTER_DEBOUNCE_MS = 300; interface AdminDivisionsPageProps { divisions: AdminDivision[]; pagination: PaginationData; filters: { search: string; }; users: UserOption[]; divisionRoleOptions: string[]; } export default function AdminDivisionsIndex({ divisions, pagination, filters, users, divisionRoleOptions, }: AdminDivisionsPageProps) { const [searchQuery, setSearchQuery] = useState(filters.search); const [formOpen, setFormOpen] = useState(false); const [editingDivision, setEditingDivision] = useState(null); const [membersDivision, setMembersDivision] = useState(null); const [deletingDivision, setDeletingDivision] = useState(null); const [processingAction, setProcessingAction] = useState(false); const isInitialFilterSync = useRef(true); useEffect(() => { if (isInitialFilterSync.current) { isInitialFilterSync.current = false; return; } const request = window.setTimeout(() => { router.get( adminDivisionsIndex().url, { search: searchQuery || undefined }, { preserveScroll: true, preserveState: true, replace: true }, ); }, FILTER_DEBOUNCE_MS); return () => window.clearTimeout(request); }, [searchQuery]); setLayoutProps({ breadcrumbs: [{ title: 'Division Management' }], }); const openCreateForm = () => { setEditingDivision(null); setFormOpen(true); }; const openEditForm = (division: AdminDivision) => { setEditingDivision(division); setFormOpen(true); }; const confirmDelete = () => { if (!deletingDivision) { return; } setProcessingAction(true); router.delete( divisionDestroy({ division: deletingDivision.slug }).url, { preserveScroll: true, onFinish: () => { setProcessingAction(false); setDeletingDivision(null); }, }, ); }; return ( <>

Division Management

{pagination.total} division {pagination.total === 1 ? '' : 's'} registered

setSearchQuery(e.target.value)} />

NO. Division Prefix Members Workload {divisions.length === 0 && ( No division matches the current filter. )} {divisions.map((division, index) => ( {(pagination.from ?? 0) + index}

{division.name}

{division.description || 'No description'}

{division.prefix} {division.members.length === 0 ? ( — ) : ( {division.members.length} member {division.members.length === 1 ? '' : 's'} )}

{division.task_count} task {division.task_count === 1 ? '' : 's'} {division.project_count} project {division.project_count === 1 ? '' : 's'}

openEditForm(division) } > Edit division setMembersDivision( division, ) } > Manage members 0 || division.project_count > 0 } onSelect={() => setDeletingDivision( division, ) } > Delete division ))}

{ setFormOpen(open); if (!open) { setEditingDivision(null); } }} /> !open && setMembersDivision(null)} /> !open && setDeletingDivision(null)} onConfirm={confirmDelete} processing={processingAction} title="Delete this division?" description={ <> {deletingDivision?.name} {' '} will be removed from the division list, and its{' '} {deletingDivision?.members.length ?? 0} member {deletingDivision?.members.length === 1 ? '' : 's'} will lose access to it. } confirmLabel="Delete" cancelLabel="Cancel" tone="danger" icon={Boxes} /> ); }