import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, Globe } from 'lucide-react'; import { ReactNode } from 'react'; declare const route: (...args: any[]) => string; interface Language { id: number; name: string; code: string; is_default: number; } interface AdmissionFormData { id: number; uid: string; // Raw JSON objects — all locales title: Record; slug: Record; description: Record; // Resolved display strings — active locale display_title: string; display_slug: string; display_description: string; // Non-translatable institute_class_id: number | null; institute_class_title: string | null; media_id?: number; media_url?: string | null; media?: { url?: string; name?: string }; status: number; created_at: string; updated_at: string; } interface ShowProps { admissionForm: AdmissionFormData; languages: Language[]; [key: string]: unknown; } function DetailRow({ label, value }: { label: string; value: ReactNode }) { if (value === null || value === undefined || value === '') return null; return (
{label} {value}
); } /** Strip HTML tags +   and trim — safe for plain-text display */ function plainText(html: string): string { return html.replace(/<[^>]*>/g, '').replace(/ /g, ' ').trim(); } /** Locale badge — uppercase code, green if has content, gray if empty */ function LocaleBadge({ code, filled }: { code: string; filled: boolean }) { return ( {code} ); } function Show() { const { admissionForm, languages, current_locale } = usePage().props as any; const statusLabel = admissionForm.status === 1 ? 'Active' : 'Inactive'; const statusColor = admissionForm.status === 1 ? 'border-green-500 bg-green-50 text-green-700' : 'border-gray-400 bg-gray-50 text-gray-600'; const defaultLocale = current_locale ?? languages.find((l: any) => l.is_default)?.code ?? languages[0]?.code ?? 'us'; // Only render tabs for locales that have at least a title value const filledLocales = languages.filter((l: Language) => !!admissionForm.title?.[l.code]); const tabLocales = filledLocales.length > 0 ? filledLocales : languages; return ( <>
{/* Header */}

{admissionForm.display_title}

Admission Form Management › Admission Form Details
{/* ── Main column ── */}
{/* Multi-language content card */}
Multi-Language Content
{/* Locale coverage badges */}
{languages.map((lang: Language) => ( ))}
{tabLocales.map((lang: Language) => ( {lang.name} {lang.is_default ? ( default ) : null} ))} {tabLocales.map((lang: Language) => { const title = admissionForm.title?.[lang.code] ?? ''; const slug = admissionForm.slug?.[lang.code] ?? ''; const description = admissionForm.description?.[lang.code] ?? ''; const plain = description ? plainText(description) : ''; return (
—} /> —} /> {plain}
) : ( — ) } />
); })} {/* Admission Form details */} Admission Form Information {(admissionForm.media_url || admissionForm.media?.url) && ( {admissionForm.media?.name ?? 'View Media'} } /> )}
{/* ── Sidebar ── */}
{/* Status */} Status {statusLabel} {/* Academic Info */} Academic Details {/* Timestamps */} Timestamps
); } Show.layout = (page: ReactNode) => ( {page} ); export default Show;