import { Head, Link, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Plus, Search, School, MoreHorizontal, Pencil, Ban, CheckCircle, Trash2, Eye } from 'lucide-react'; import AppLayout from '@/Layouts/AppLayout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import type { PageProps, PaginatedResponse, School as SchoolType } from '@/Types'; interface SchoolsPageProps extends PageProps { schools: PaginatedResponse; filters: { search?: string; status?: string }; stats: { total: number; active: number; suspended: number }; } const statusBadge = (status: string) => { const map: Record = { active: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400', inactive: 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400', suspended: 'bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-400', }; return ( {status.charAt(0).toUpperCase() + status.slice(1)} ); }; export default function SchoolsIndex() { const { schools, filters, stats } = usePage().props; const [search, setSearch] = useState(filters.search ?? ''); const applyFilters = (params: Record) => { router.get('/super-admin/schools', { ...filters, ...params }, { preserveState: true, replace: true }); }; const handleSearch = (e: React.FormEvent) => { e.preventDefault(); applyFilters({ search }); }; const confirmDelete = (school: SchoolType) => { if (confirm(`Delete "${school.name}"? This cannot be undone.`)) { router.delete(`/super-admin/schools/${school.id}`); } }; return ( {/* Header */}

Schools

Manage all registered schools

{/* Stats */}

{[ { label: 'Total Schools', value: stats.total, color: 'text-slate-700 dark:text-slate-200' }, { label: 'Active', value: stats.active, color: 'text-emerald-600 dark:text-emerald-400' }, { label: 'Suspended', value: stats.suspended, color: 'text-red-600 dark:text-red-400' }, ].map((s) => (

{s.label}

{s.value}

))}

{/* Filters */}

{/* Table */} School Contact Location Users Status Created {schools.data.length === 0 ? (

No schools found

) : schools.data.map((school) => (

{school.logo_url ?

: }

{school.name}

{school.slug}

{school.email ?? '—'}

{school.phone ?? ''}

{[school.city, school.country].filter(Boolean).join(', ') || '—'} {school.users_count ?? 0} {statusBadge(school.status)} {new Date(school.created_at).toLocaleDateString()} View Edit {school.status === 'suspended' ? ( router.patch(`/super-admin/schools/${school.id}/activate`)}> Activate ) : ( router.patch(`/super-admin/schools/${school.id}/suspend`)}> Suspend )} confirmDelete(school)} > Delete ))}

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

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

{schools.links.prev && ( )} {schools.links.next && ( )}

)}

); }