import { useTranslation } from '@/hooks/use-translation'; import React from 'react'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { ArrowLeft, Plus, FileText } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; interface Report { id: number; title: string; report_date: string; content: string; created_at: string; updated_at: string; } interface Reportable { id: number; name: string; } interface Props { reports: Report[]; reportable: Reportable; reportableType: 'committee' | 'board'; } export default function ReportList({ reports, reportable, reportableType }: Readonly) { const { t } = useTranslation(); const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); }; const entityName = reportableType === 'committee' ? 'Committee' : 'Board'; const backUrl = `/admin/${reportableType}s/${reportable.id}`; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: `${entityName}s`, href: `/admin/${reportableType}s` }, { title: reportable.name, href: backUrl }, { title: 'Reports', href: `/admin/reports/${reportableType}/${reportable.id}` }, ]; return (

{reportable.name} - Reports

{reports.length} report{reports.length === 1 ? '' : 's'}

{t('All Reports')} Reports submitted for this {reportableType} {reports.length > 0 ? (
{reports.map((report) => (

{report.title}

{formatDate(report.report_date)}
{report.content.substring(0, 200)} {report.content.length > 200 ? '...' : ''}
))}
) : (

{t('No reports created yet')}

)}
); }