import { useTranslation } from '@/hooks/use-translation'; import React from 'react'; import { Head, Link, useForm, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Edit, ArrowLeft, User, CalendarDays, Plus, Trash2, FileText } from 'lucide-react'; import { type BreadcrumbItem, type BoardMember } from '@/types'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; interface Board { id: number; name: string; description?: string; members?: BoardMember[]; created_at: string; updated_at: string; } interface Member { id: number; first_name: string; last_name: string; email: string; } interface Props { board: Board; availableMembers: Member[]; } export default function BoardsShow({ board, availableMembers }: Readonly) { const { t } = useTranslation(); const [showAddForm, setShowAddForm] = React.useState(false); const { data, setData, post, processing, errors, reset } = useForm({ member_id: '', title: '', term_start_date: '', term_end_date: '', }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(`/admin/boards/${board.id}/members`, { onSuccess: () => { reset(); setShowAddForm(false); }, }); }; const handleRemoveMember = (memberId: number) => { if (confirm('Are you sure you want to remove this member from the board?')) { router.delete(`/admin/boards/${board.id}/members/${memberId}`); } }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Boards', href: '/admin/boards' }, { title: board.name, href: `/admin/boards/${board.id}` }, ]; return (

{board.name}

{board.description && (

{board.description}

)}

{t('Board Members')} {board.members?.length || 0} member{board.members?.length === 1 ? '' : 's'}

{showAddForm && ( {t('Add Member to Board')}

Member * {errors.member_id && (

{errors.member_id}

)}

{t('Title/Position')} setData('title', e.target.value)} placeholder={t('e.g., President, Treasurer, Director')} /> {errors.title && (

{errors.title}

)}

Term Start Date * setData('term_start_date', e.target.value)} required /> {errors.term_start_date && (

{errors.term_start_date}

)}

{t('Term End Date')} setData('term_end_date', e.target.value)} />

{t('Leave blank for ongoing')}

{errors.term_end_date && (

{errors.term_end_date}

)}

)} {board.members && board.members.length > 0 ? (

{board.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 ? 'Active' : 'Expired'}

{member.pivot?.title && (

{t('Position:')} {member.pivot.title}

)}

{t('Term Start:')}

{member.pivot?.term_start_date ? formatDate(member.pivot.term_start_date) : 'N/A'}

{t('Term End:')}

{member.pivot?.term_end_date ? formatDate(member.pivot.term_end_date) : 'Ongoing'}

); })}

) : (

{t('No members assigned to this board yet')}

)}

); }