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 { Badge } from '@/components/ui/badge'; import { ArrowLeft, User, CalendarDays, FileText, Mail, MapPin } from 'lucide-react'; import type { CommitteeMembership, Meeting, Report } from '@/types'; interface Committee { id: number; name: string; description?: string; members: CommitteeMembership[]; } interface Props { committee: Committee; upcomingMeetings: Meeting[]; reports: Report[]; } export default function CommitteeShow({ committee, upcomingMeetings, reports }: Readonly) { const { t } = useTranslation(); const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); }; const formatTime = (dateString: string) => { return new Date(dateString).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', }); }; return (

{committee.name}

{committee.description && (

{committee.description}

)}

{/* Upcoming Meetings */}

{t('Upcoming Meetings')}

{upcomingMeetings.length} upcoming meeting{upcomingMeetings.length === 1 ? '' : 's'} {upcomingMeetings.length > 0 ? (

{upcomingMeetings.map((meeting) => (

{meeting.title}

{formatDate(meeting.meeting_date)} at {formatTime(meeting.meeting_date)}

{meeting.meeting_link && (

{t('Join Meeting')}

)} {meeting.agenda && (

{t('Agenda:')}

{meeting.agenda}

)}

))}

) : (

{t('No upcoming meetings scheduled')}

)} {/* Committee Members */}

{t('Committee Members')}

{committee.members.length} member{committee.members.length === 1 ? '' : 's'}

{committee.members.map((member) => { const isActive = !member.pivot?.term_end_date || new Date(member.pivot.term_end_date) >= new Date(); return (

{member.first_name} {member.last_name}

{!isActive && ( {t('Past Member')} )}

{member.pivot?.title && (

{member.pivot.title}

)} {member.email && ( {member.email} )}

); })}

{/* Reports */}

{t('Recent Reports')}

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

{reports.map((report) => (

{report.title}

{formatDate(report.report_date)}

{report.content}

{report.content.length > 200 && ( )}

))}

) : (

{t('No reports available')}

)}

); }