import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'; 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 AppLayout from '@/layouts/app-layout'; import { PageProps } from '@/types'; import { Head, Link, router } from '@inertiajs/react'; import { useState, useEffect } from 'react'; import { useDebounce } from '@uidotdev/usehooks'; interface User { id: number; name: string; email: string; role: string; } interface UsersIndexProps extends PageProps { users: { data: User[]; links: { url: string | null; label: string; active: boolean }[]; }; filters: { search: string; role: string; }; } export default function UsersIndex({ auth, users, filters }: UsersIndexProps) { const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [selectedUser, setSelectedUser] = useState(null); const [search, setSearch] = useState(filters.search || ''); const [role, setRole] = useState(filters.role || 'all'); const debouncedSearch = useDebounce(search, 500); useEffect(() => { const params = { search: debouncedSearch, role: role === 'all' ? '' : role }; router.get(route('users.index'), params, { preserveState: true, replace: true, }); }, [debouncedSearch, role]); const handleDeleteClick = (user: User) => { setSelectedUser(user); setIsDeleteDialogOpen(true); }; const confirmDelete = () => { if (selectedUser) { // Implement actual delete logic here console.log('Deleting user:', selectedUser.id); setIsDeleteDialogOpen(false); } }; return (

Users

setSearch(e.target.value)} className="max-w-sm" />

Name Email Role Actions {users.data.map((user) => ( {user.name} {user.email} {user.role} ))}

{users.links.map((link, index) => ( ))}

); }