/* eslint-disable @typescript-eslint/no-explicit-any */ import { Head, Link, router, usePage } from '@inertiajs/react'; import React, { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Input } from '@/components/ui/input'; import { Separator } from '@/components/ui/separator'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Search } from 'lucide-react'; import { useEffect } from 'react'; import { useDebounce } from 'use-debounce'; import * as XLSX from 'xlsx'; interface User { id: number; name: string; email: string; role: 'admin' | 'employee'; created_at: string; } interface PageProps { users: User[]; filters: { search?: string; role?: string }; [key: string]: unknown; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Manajemen Pengguna', href: '/admin/users' }, ]; export default function Index({ users, filters }: PageProps) { const [search, setSearch] = useState(filters.search || ''); const [roleFilter, setRoleFilter] = useState(filters.role || 'all'); const [debouncedSearch] = useDebounce(search, 500); const [processingId, setProcessingId] = useState(null); useEffect(() => { if (debouncedSearch !== filters.search || (roleFilter !== 'all' && roleFilter !== filters.role)) { router.get( '/admin/users', { search: debouncedSearch, role: roleFilter === 'all' ? '' : roleFilter }, { preserveState: true, replace: true } ); } }, [debouncedSearch, roleFilter]); const exportExcel = () => { const rows = users.map((u, i) => ({ No: i + 1, Nama: u.name, Email: u.email, Role: u.role.toUpperCase(), })); const ws = XLSX.utils.json_to_sheet(rows); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Pengguna'); XLSX.writeFile(wb, `Data_Pengguna_${new Date().toISOString().slice(0, 10)}.xlsx`); }; const updateRole = (id: number, role: string) => { setProcessingId(id); router.patch( `/admin/users/${id}`, { role }, { preserveScroll: true, onFinish: () => setProcessingId(null), }, ); }; return (
{/* Page Header */}

Manajemen Akses User

Kelola akun dan hak akses pengguna sistem.

Daftar Pengguna
setSearch(e.target.value)} />
{users.length > 0 ? ( users.map((user) => ( )) ) : ( )}
Nama Email Role Saat Ini Ubah Role
{user.name} {user.email} {user.role.toUpperCase()}
Belum ada data pengguna.
); }