import { useTranslation } from '@/hooks/use-translation'; import React, { useMemo, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Badge } from '@/components/ui/badge'; import { Plus, Search, FileText, Edit, Trash2, Users, Filter, CheckCircle, XCircle } from 'lucide-react'; import { BreadcrumbItem, Deed, Member } from '@/types'; interface PaginatedDeeds { data: Deed[]; current_page: number; last_page: number; per_page: number; total: number; } interface DeedStats { total_count: number; total_occupied: number; } interface Props { deeds: PaginatedDeeds; members: Member[]; stats: DeedStats; filters: { search?: string; member?: string; }; } export default function DeedsIndex({ deeds, members, stats, filters }: Readonly) { const { t } = useTranslation(); const [search, setSearch] = useState(filters.search || ''); const [memberId, setMemberId] = useState(filters.member || ''); // Helper function to get capacity from gravesite type const getGravesiteCapacity = (type: string): number => { switch (type) { case 'single': case 'cremation': return 1; case 'double': return 2; case 'family': return 4; default: return 1; } }; const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Cemetery', href: '/admin/deeds' }, { title: 'Deeds', href: '/admin/deeds' }, ], []); const handleFilter = () => { router.get('/admin/deeds', { search: search || undefined, member: memberId || undefined, }, { preserveState: true }); }; const handleClearFilters = () => { setSearch(''); setMemberId(''); router.get('/admin/deeds'); }; const handleDelete = (deed: Deed) => { if (confirm(`Are you sure you want to delete deed ${deed.deed_number}?`)) { router.delete(`/admin/deeds/${deed.id}`); } }; const formatCurrency = (amount: string | number | undefined) => { if (!amount) return 'N/A'; return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(typeof amount === 'string' ? parseFloat(amount) : amount); }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', }); }; const statCards = [ { title: 'Total Deeds', count: stats.total_count, subtitle: 'Cemetery deed records', icon: FileText, textColor: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-50 dark:bg-blue-900/20', }, { title: 'Total Occupied', count: stats.total_occupied, subtitle: 'Burial spaces used', icon: Users, textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-50 dark:bg-purple-900/20', }, ]; return (
{/* Header */}

{t('Cemetery Deeds')}

{t('Manage burial plot deeds and ownership')}

{/* Stats Dashboard */}
{statCards.map((stat) => (

{stat.title}

{stat.count}

{stat.subtitle}

))}
{/* Filters */}
setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleFilter()} className="ps-9" />
{/* Deeds Table */}
{deeds.data.map((deed) => { // Calculate capacity from gravesites const totalCapacity = Array.isArray(deed.gravesites) ? deed.gravesites.reduce((sum, g) => sum + getGravesiteCapacity(g.gravesite_type), 0) : 0; const availableSpace = totalCapacity - (Number(deed.occupied) || 0); // Get unique gravesite types const gravesiteTypes = Array.isArray(deed.gravesites) ? [...new Set(deed.gravesites.map(g => g.gravesite_type))].join(', ') : 'N/A'; return ( ); })}
{t('Deed Number')} {t('Owner')} {t('Type')} {t('Capacity')} {t('Purchase Date')} {t('Status')} {t('Actions')}
{deed.deed_number} {deed.member ? ( {deed.member.first_name} {deed.member.last_name} ) : ( {t('N/A')} )} {gravesiteTypes}
{deed.occupied || 0}/{totalCapacity} {availableSpace > 0 ? ( ) : ( )}
{formatDate(deed.purchase_date)} {deed.is_active ? ( {t('Active')} ) : ( {t('Inactive')} )}
{/* Empty State */} {deeds.data.length === 0 && (

{t('No deeds found')}

{t('Get started by creating your first cemetery deed.')}

)} {/* Pagination */} {deeds.last_page > 1 && (
Page {deeds.current_page} of {deeds.last_page}
)}
); }