import { useState } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import { Plus, Pencil, Trash2, Clock } from 'lucide-react'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import AppLayout from '@/Layouts/AppLayout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'; import { Card, CardContent } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import type { PageProps, Shift } from '@/Types'; interface Props extends PageProps { shifts: Shift[] } const schema = z.object({ name: z.string().min(1, 'Name is required'), start_time: z.string().regex(/^\d{2}:\d{2}$/, 'Use HH:MM format'), end_time: z.string().regex(/^\d{2}:\d{2}$/, 'Use HH:MM format'), }); type FormData = z.infer; export default function ShiftsIndex() { const { shifts } = usePage().props; const [open, setOpen] = useState(false); const [editing, setEditing] = useState(null); const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) }); const openCreate = () => { reset({ name: '', start_time: '08:00', end_time: '14:00' }); setEditing(null); setOpen(true); }; const openEdit = (s: Shift) => { reset({ name: s.name, start_time: s.start_time.slice(0, 5), end_time: s.end_time.slice(0, 5) }); setEditing(s); setOpen(true); }; const onSubmit = (data: FormData) => { if (editing) { router.put(`/school/shifts/${editing.id}`, data, { onSuccess: () => setOpen(false) }); } else { router.post('/school/shifts', data, { onSuccess: () => setOpen(false) }); } }; return (

Shifts

{shifts.length} shift{shifts.length !== 1 ? 's' : ''} configured

Shift Name Start Time End Time {shifts.length === 0 ? (

No shifts yet.

) : shifts.map((s) => ( {s.name} {s.start_time.slice(0, 5)} {s.end_time.slice(0, 5)}

))}

); }