import React, { useState } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import AdminLayout from '@/components/layouts/admin-layout'; import PopupCreateUser from '@/components/admin/users/popupCreateUser'; import PopupDetailUser from '@/components/admin/users/popupDetailUser'; import SuccessAlert, { FailedAlert } from '@/components/micro/alert'; import { HiPlus, HiUsers, HiSearch, HiFilter, HiRefresh, HiEye, HiCheckCircle, HiXCircle } from 'react-icons/hi'; interface UserItem { id_user: string; username: string; role: string; departments?: string[] | null; departments_head?: string[] | null; is_active: boolean; last_login: string | null; created_at: string; } interface PaginationProps { data: T[]; current_page: number; last_page: number; total: number; from: number; to: number; links: Array<{ url: string | null; label: string; active: boolean }>; } interface PageProps { users?: PaginationProps; filters?: { search?: string; role?: string; department?: string }; } const DEPARTMENTS_LIST = ['Kepegawaian', 'Keuangan', 'Warehouse', 'Supplier', 'Operasional']; export default function UsersManagement() { const pageProps = usePage().props as PageProps; // Safe Fallback const users = pageProps?.users || { data: [], current_page: 1, last_page: 1, total: 0, from: 0, to: 0, links: [] }; const filters = pageProps?.filters || {}; // Modal State const [isCreateOpen, setIsCreateOpen] = useState(false); const [selectedUser, setSelectedUser] = useState(null); // Toast / Alert State const [isSuccessAlert, setIsSuccessAlert] = useState(false); const [successMsg, setSuccessMsg] = useState(''); const [isErrorAlert, setIsErrorAlert] = useState(false); const [errorMsg, setErrorMsg] = useState(''); // Local Filter State const [search, setSearch] = useState(filters.search || ''); const [role, setRole] = useState(filters.role || ''); const [department, setDepartment] = useState(filters.department || ''); const handleFilter = (e?: React.FormEvent) => { if (e) e.preventDefault(); router.get( '/admin/users', { search, role, department }, { preserveState: true, replace: true } ); }; const handleReset = () => { setSearch(''); setRole(''); setDepartment(''); router.get('/admin/users', {}, { preserveState: true, replace: true }); }; const triggerSuccess = (msg: string) => { setSuccessMsg(msg); setIsSuccessAlert(true); }; const triggerError = (msg?: string) => { setErrorMsg(msg || 'Terjadi kesalahan saat memproses data.'); setIsErrorAlert(true); }; return (
Kelola Pengguna {/* Header Action Banner */}

Manajemen Pengguna

Kelola daftar akun staf, hak akses role, dan akses modul departemen.

{/* Filter Bar */}
{/* Search Input */}
setSearch(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-gray-950 border border-gray-800 rounded-xl text-xs text-gray-200 placeholder-gray-500 focus:border-gray-700 focus:outline-none transition" />
{/* Role Filter */} {/* Department Filter */}

Total Pengguna: {users?.total || 0}

{/* User Data Table */}
{users?.data && users.data.length > 0 ? ( users.data.map((user) => ( )) ) : ( )}
Username Role Akses Departemen Status Aksi
{user.username} {user.role || 'Unknown'}
{Array.isArray(user.departments) && user.departments.length > 0 ? ( user.departments.map((dept, idx) => { const isHead = Array.isArray(user.departments_head) && user.departments_head.includes(dept); return ( {dept} ); }) ) : ( - Tidak Ada - )}
{user.is_active ? ( Aktif ) : ( Non-Aktif )}
Tidak ada pengguna yang sesuai dengan filter.
{/* Pagination Links */} {users?.last_page > 1 && (

Halaman {users.current_page} dari {users.last_page}

{users.links?.map((link, idx) => (
)}
{/* Popup Tambah User */} setIsCreateOpen(false)} success={triggerSuccess} /> {/* Popup Detail & Edit User */} {selectedUser && ( setSelectedUser(null)} success={triggerSuccess} error={triggerError} /> )} {/* Alert / Notification Toast */} {isSuccessAlert && ( setIsSuccessAlert(false)} /> )} {isErrorAlert && ( setIsErrorAlert(false)} /> )}
); } UsersManagement.layout = (page: React.ReactNode) => ( {page} );