import { Form, Head } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import { useUserTimezone } from '@/hooks/use-user-timezone'; import AppLayout from '@/layouts/app-layout'; import { formatDate } from '@/lib/format-date'; import { index, store, update, destroy } from '@/routes/admin/users'; type User = { id: number; name: string; email: string; email_verified_at: string | null; created_at: string; }; type Props = { users: User[]; }; const breadcrumbs = [{ title: 'Users', href: index.url() }]; export default function Users({ users }: Props) { const timezone = useUserTimezone(); const [createOpen, setCreateOpen] = useState(false); const [editingId, setEditingId] = useState(null); const { sorted, sortColumn, sortDirection, toggleSort } = useSort(users, 'name'); return (

Users

Add user Create a new user account for the platform.
setCreateOpen(false)} > {({ processing, errors }) => (
{errors.name && (
{errors.name}
)}
{errors.email && (
{errors.email}
)}
{errors.password && (
{errors.password}
)}
)}
{/* Users table */}
{sorted.map((u) => ( ))}
{u.name} {u.email} {u.email_verified_at ? ( Verified ) : ( Unverified )} {formatDate(u.created_at, timezone)}
setEditingId(open ? u.id : null)} > Edit user Update {u.name}'s account details.
setEditingId(null)} > {({ processing, errors }) => (
{errors.name && (
{errors.name}
)}
{errors.email && (
{errors.email}
)}
)}
{({ processing }) => ( )}
{users.length === 0 && (
No users yet.
)}
); }