import { useState } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, Pencil, FileUp, Trash2, FileText, User, GraduationCap, Users } from 'lucide-react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'; import type { PageProps, Student } from '@/Types'; interface Props extends PageProps { student: Student } const statusColors: Record = { active: 'bg-emerald-100 text-emerald-700', alumni: 'bg-blue-100 text-blue-700', transferred: 'bg-amber-100 text-amber-700', inactive: 'bg-slate-100 text-slate-600', }; const docSchema = z.object({ title: z.string().min(1, 'Title required'), file: z.instanceof(FileList).refine((f) => f.length > 0, 'File required'), }); type DocForm = z.infer; export default function ShowStudent() { const { student } = usePage().props; const [tab, setTab] = useState<'personal' | 'guardian' | 'documents'>('personal'); const [docOpen, setDocOpen] = useState(false); const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(docSchema) }); const uploadDoc = (data: DocForm) => { const form = new FormData(); form.append('title', data.title); form.append('file', data.file[0]); router.post(`/school/students/${student.id}/documents`, form, { forceFormData: true, onSuccess: () => { setDocOpen(false); reset(); }, }); }; const InfoRow = ({ label, value }: { label: string; value?: string | null }) => (

{label}

{value || '—'}

); return ( {/* Header */}

{student.photo_url ?

: student.first_name[0].toUpperCase() }

{student.full_name}

{student.status}

{student.admission_no}

{/* Quick stats */}

{[ { icon: GraduationCap, label: 'Class', value: student.school_class?.name ?? '—' }, { icon: Users, label: 'Section', value: student.section?.name ?? '—' }, { icon: FileText, label: 'Documents', value: String(student.documents?.length ?? 0) }, ].map((s) => (

{s.label}

{s.value}

))}

{/* Tabs */}

{(['personal', 'guardian', 'documents'] as const).map((t) => ( ))}

{/* Personal tab */} {tab === 'personal' && ( Personal Details {student.address && (

Address

{student.address}

)} )} {/* Guardian tab */} {tab === 'guardian' && ( Guardian Details {student.guardian ? ( <> {student.guardian.address && (

Address

{student.guardian.address}

)} ) : (

No guardian information.

)} )} {/* Documents tab */} {tab === 'documents' && ( Documents {!student.documents?.length ? (

No documents uploaded yet.

) : (

{student.documents.map((doc) => (

{doc.title}

{doc.file_size &&

{(doc.file_size / 1024).toFixed(1)} KB

}

))}

)} )} {/* Upload dialog */} ); }