import { useState } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Plus, Search, Users, Eye, Pencil, Trash2, MoreHorizontal } from 'lucide-react'; import AppLayout from '@/Layouts/AppLayout'; import { Button } from '@/components/ui/button'; 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import type { PageProps, PaginatedResponse, Student, SchoolClass, Section } from '@/Types'; interface Props extends PageProps { students: PaginatedResponse; filters: { search?: string; class_id?: string; section_id?: string; status?: string }; classes: Pick[]; sections: (Pick & { class_id: number })[]; stats: { total: number; active: number; alumni: number; transferred: number }; } const statusBadge = (status: string) => { const map: Record = { active: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400', alumni: 'bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-400', transferred: 'bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-400', inactive: 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400', }; return ( {status.charAt(0).toUpperCase() + status.slice(1)} ); }; export default function StudentsIndex() { const { students, filters, classes, sections, stats } = usePage().props; const [search, setSearch] = useState(filters.search ?? ''); const applyFilter = (params: Record) => router.get('/school/students', { ...filters, ...params }, { preserveState: true, replace: true }); const visibleSections = filters.class_id ? sections.filter((s) => String(s.class_id) === filters.class_id) : sections; const confirmDelete = (s: Student) => { if (confirm(`Remove student "${s.full_name}"?`)) router.delete(`/school/students/${s.id}`); }; return ( {/* Header */}

Students

Manage student admissions & records

{/* Stats */}

{[ { label: 'Total', value: stats.total, color: 'text-slate-800 dark:text-slate-100' }, { label: 'Active', value: stats.active, color: 'text-emerald-600 dark:text-emerald-400' }, { label: 'Alumni', value: stats.alumni, color: 'text-blue-600 dark:text-blue-400' }, { label: 'Transferred', value: stats.transferred, color: 'text-amber-600 dark:text-amber-400' }, ].map((s) => (

{s.label}

{s.value}

))}

{/* Table card */}

{/* Filters */}

Student Admission No Class / Section Guardian Status Admitted {students.data.length === 0 ? (

No students found

) : students.data.map((s) => (

{s.photo_url ?

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

{s.full_name}

{s.gender}

{s.admission_no} {s.school_class?.name ?? '—'} {s.section && / {s.section.name}} {s.guardian?.name ?? '—'} {s.guardian?.phone &&

{s.guardian.phone}

} {statusBadge(s.status)} {s.admission_date ? new Date(s.admission_date).toLocaleDateString() : '—'} View Edit confirmDelete(s)}> Remove ))}

{/* Pagination */} {students.meta.last_page > 1 && (

Showing {students.meta.from}–{students.meta.to} of {students.meta.total}

{students.links.prev && } {students.links.next && }

)}

); }