import { useState } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import { Plus, Pencil, Trash2, Layers } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import type { PageProps, SchoolClass, Section } from '@/Types'; interface Props extends PageProps { classes: (SchoolClass & { sections: Section[] })[] } const schema = z.object({ class_id: z.coerce.number().int().positive('Select a class'), name: z.string().min(1, 'Section name is required'), capacity: z.coerce.number().int().min(0).optional(), }); type FormData = z.infer; export default function SectionsIndex() { const { classes } = usePage().props; const [open, setOpen] = useState(false); const [editing, setEditing] = useState
(null); const { register, handleSubmit, reset, setValue, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) }); const openCreate = () => { reset({ name: '', capacity: 0 }); setEditing(null); setOpen(true); }; const openEdit = (s: Section) => { reset({ class_id: s.class_id, name: s.name, capacity: s.capacity }); setEditing(s); setOpen(true); }; const onSubmit = (data: FormData) => { if (editing) { router.put(`/school/sections/${editing.id}`, data, { onSuccess: () => setOpen(false) }); } else { router.post('/school/sections', data, { onSuccess: () => setOpen(false) }); } }; const destroy = (s: Section) => { if (confirm(`Delete section "${s.name}"?`)) router.delete(`/school/sections/${s.id}`); }; return (

Sections

Sections grouped by class

{classes.length === 0 ? (

No classes found. Add classes first.

) : classes.map((cls) => ( {cls.name} {cls.sections.length} section{cls.sections.length !== 1 ? 's' : ''} {cls.sections.length === 0 ? (

No sections — click Add Section above.

) : (
{cls.sections.map((s) => (
{s.name} {s.capacity > 0 && ({s.capacity})}
))}
)} ))}
{editing ? 'Edit Section' : 'Add Section'}
{errors.class_id &&

{errors.class_id.message}

}
{errors.name &&

{errors.name.message}

}
); }