import { Head, router, setLayoutProps, usePage } from '@inertiajs/react'; import { KeyRound, MoreHorizontal, Network, Search, ShieldCheck, UserCog, UserPlus, UserRoundCheck, UserRoundX, } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { index as adminUsersIndex, resetPasswordRequirement, toggleActivation, } from '@/actions/App/Domains/Shared/Http/Controllers/Admin/UserController'; import { UserCreateDialog } from '@/components/admin/UserCreateDialog'; import { UserMembershipsDialog } from '@/components/admin/UserMembershipsDialog'; import { UserPasswordDialog } from '@/components/admin/UserPasswordDialog'; import { UserProfileDialog } from '@/components/admin/UserProfileDialog'; 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import type { AdminUser, DivisionOption } from '@/types/admin'; import type { PaginationData } from '@/types/pagination'; const FILTER_DEBOUNCE_MS = 300; const ALL = 'all'; interface AdminUsersPageProps { users: AdminUser[]; pagination: PaginationData; filters: { search: string; status: string; }; divisions: DivisionOption[]; divisionRoleOptions: string[]; } export default function AdminUsersIndex({ users, pagination, filters, divisions, divisionRoleOptions, }: AdminUsersPageProps) { const currentUserId = usePage().props.auth.user.id; const [searchQuery, setSearchQuery] = useState(filters.search); const [statusFilter, setStatusFilter] = useState(filters.status); const [creatingUser, setCreatingUser] = useState(false); const [editingUser, setEditingUser] = useState(null); const [passwordUser, setPasswordUser] = useState(null); const [membershipsUser, setMembershipsUser] = useState( null, ); const [activationUser, setActivationUser] = useState( null, ); const [requirementUser, setRequirementUser] = 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( adminUsersIndex().url, { search: searchQuery || undefined, status: statusFilter !== ALL ? statusFilter : undefined, }, { preserveScroll: true, preserveState: true, replace: true }, ); }, FILTER_DEBOUNCE_MS); return () => window.clearTimeout(request); }, [searchQuery, statusFilter]); setLayoutProps({ breadcrumbs: [{ title: 'User Management' }], }); /** Aksi satu-klik (aktivasi & reset password requirement) lewat konfirmasi. */ const submitAction = (url: string, onDone: () => void) => { setProcessingAction(true); router.patch( url, {}, { preserveScroll: true, onFinish: () => { setProcessingAction(false); onDone(); }, }, ); }; return ( <>

User Management

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

setSearchQuery(e.target.value)} />

NO. User System Role Divisions Status {users.length === 0 && ( No user matches the current filter. )} {users.map((user, index) => ( {(pagination.from ?? 0) + index}

{user.name} {user.id === currentUserId && ( (you) )}

{user.nik ?? 'No NIK'} ·{' '} {user.email}

{user.role === 'super_admin' && ( )} {user.role_label}

{user.memberships.length === 0 ? ( — ) : ( user.memberships.map( (membership) => ( { membership.division_name } { membership.role_type } ), ) )}

{user.is_active ? 'Active' : 'Inactive'} {user.must_change_password && ( Must change password )}

setEditingUser(user) } > Edit user setMembershipsUser(user) } > Division memberships setPasswordUser(user) } > Change password setRequirementUser(user) } > Require password change setActivationUser(user) } > {user.is_active ? ( <> Deactivate ) : ( <> Activate )} ))}

!open && setEditingUser(null)} /> !open && setPasswordUser(null)} /> !open && setMembershipsUser(null)} /> !open && setActivationUser(null)} onConfirm={() => activationUser && submitAction( toggleActivation({ user: activationUser.id }).url, () => setActivationUser(null), ) } processing={processingAction} title={ activationUser?.is_active ? 'Deactivate this user?' : 'Activate this user?' } description={ activationUser?.is_active ? ( <> {activationUser?.name} {' '} will no longer be able to sign in. Their tasks and memberships stay untouched. ) : ( <> {activationUser?.name} {' '} will be able to sign in again. ) } confirmLabel={ activationUser?.is_active ? 'Deactivate' : 'Activate' } cancelLabel="Cancel" tone={activationUser?.is_active ? 'danger' : 'neutral'} icon={activationUser?.is_active ? UserRoundX : UserRoundCheck} /> !open && setRequirementUser(null)} onConfirm={() => requirementUser && submitAction( resetPasswordRequirement({ user: requirementUser.id }) .url, () => setRequirementUser(null), ) } processing={processingAction} title="Require password change?" description={ <> {requirementUser?.name} {' '} will be forced to set a new password on their next login. } confirmLabel="Require change" cancelLabel="Cancel" tone="warning" icon={KeyRound} /> ); }