import { useTranslation } from '@/hooks/use-translation'; import React from 'react'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Users, Briefcase, CalendarDays, FileText, AlertCircle, Clock } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; // Helper function to get badge variant based on days until expiration function getTermExpirationVariant(daysUntil: number): 'destructive' | 'default' | 'secondary' { if (daysUntil <= 14) return 'destructive'; if (daysUntil <= 30) return 'default'; return 'secondary'; } interface Stats { total_committees: number; total_boards: number; total_committee_members: number; total_board_members: number; upcoming_meetings_count: number; recent_meetings_count: number; expiring_terms_count: number; monthly_reports_count: number; } interface Meeting { id: number; title: string; meeting_date: string; meeting_link?: string; entity_name: string; entity_type: string; entity_id: number; has_minutes?: boolean; } interface TermEnd { member_id: number; first_name: string; last_name: string; entity_id: number; entity_name: string; title?: string; term_end_date: string; entity_type: string; } interface Report { id: number; title: string; report_date: string; content: string; entity_name: string; entity_type: string; entity_id: number; } interface Props { stats: Stats; upcomingMeetings: Meeting[]; recentMeetings: Meeting[]; upcomingTermEnds: TermEnd[]; recentReports: Report[]; } export default function LeadershipDashboard({ stats, upcomingMeetings, recentMeetings, upcomingTermEnds, recentReports, }: 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', }); }; const getDaysUntil = (dateString: string) => { const now = new Date().getTime(); const days = Math.ceil((new Date(dateString).getTime() - now) / (1000 * 60 * 60 * 24)); return days; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Leadership Dashboard', href: '/admin/leadership' }, ]; return (

{t('Leadership Dashboard')}

{t('Overview of committees, boards, meetings, and member terms')}

{/* Stats Grid */}

{t('Committees')}

{stats.total_committees}

{stats.total_committee_members} total members

{t('Boards')}

{stats.total_boards}

{stats.total_board_members} total members

{t('Upcoming Meetings')}

{stats.upcoming_meetings_count}

{t('Next 30 days')}

{t('Expiring Terms')}

{stats.expiring_terms_count}

{t('Next 60 days')}

{/* Upcoming Meetings */}

{t('Upcoming Meetings')} {t('Next 30 days')}

{upcomingMeetings.length > 0 ? (

{upcomingMeetings.map((meeting) => (

{meeting.title}

{meeting.entity_name}

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

{meeting.entity_type}

))}

) : (

{t('No upcoming meetings scheduled')}

)} {/* Recent Meetings */}

{t('Recent Meetings')} {t('Past 30 days')}

{recentMeetings.length > 0 ? (

{recentMeetings.map((meeting) => (

{meeting.title}

{meeting.has_minutes && ( {t('Minutes')} )}

{meeting.entity_name}

{formatDate(meeting.meeting_date)}

{meeting.entity_type}

))}

) : (

{t('No recent meetings')}

)}

{/* Upcoming Term Ends */}

{t('Expiring Terms')} {t('Next 60 days')}

{upcomingTermEnds.length > 0 ? (

{upcomingTermEnds.map((term) => { const daysUntil = getDaysUntil(term.term_end_date); return (

{term.first_name} {term.last_name}

{term.title || 'Member'} - {term.entity_name}

Ends {formatDate(term.term_end_date)}

{daysUntil} days

{term.entity_type}

); })}

) : (

{t('No terms expiring soon')}

)} {/* Recent Reports */}

{t('Recent Reports')} This month ({stats.monthly_reports_count} total)

{recentReports.length > 0 ? (

{recentReports.map((report) => (

{report.title}

{report.entity_name}

{report.content}...

{formatDate(report.report_date)}

{report.entity_type}

))}

) : (

{t('No reports this month')}

)}

{/* Quick Actions */} {t('Quick Actions')}

); }