import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, Pencil, Ban, CheckCircle, Globe, Phone, Mail, MapPin, Users, Calendar } from 'lucide-react'; import AppLayout from '@/Layouts/AppLayout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import type { PageProps, School, AcademicYear } from '@/Types'; interface ShowPageProps extends PageProps { school: School & { academic_years: AcademicYear[]; users_count: number }; } const statusMap = { 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', }; export default function ShowSchool() { const { school } = usePage().props; const statusClass = statusMap[school.status] ?? statusMap.inactive; return ( {/* Header */}

{school.logo_url ?

: {school.name[0]} }

{school.name}

{school.status}

{school.slug}

{school.status === 'suspended' ? ( ) : ( )}

{/* Stats */} {[ { icon: Users, label: 'Total Users', value: school.users_count }, { icon: Calendar, label: 'Academic Years', value: school.academic_years?.length ?? 0 }, { icon: Globe, label: 'Timezone', value: school.timezone }, ].map((s) => (

{s.label}

{s.value}

))} {/* Details */} Contact & Location {[ { icon: Mail, label: 'Email', value: school.email }, { icon: Phone, label: 'Phone', value: school.phone }, { icon: MapPin, label: 'City', value: school.city }, { icon: Globe, label: 'Country', value: school.country }, ].map(({ icon: Icon, label, value }) => (

{label}

{value ?? '—'}

))} {school.address && (

Address

{school.address}

)} {/* Academic Years */} Academic Years {school.academic_years?.length === 0 ? (

No academic years yet

) : school.academic_years?.map((y) => (

{y.name} {y.is_current && ( Current )}

))}

); }