import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Trash2, RotateCcw, Eye, FileText } from 'lucide-react'; import { formatDistanceToNow } from 'date-fns'; import { useEffect, useState } from 'react'; interface DeletedRecord { id: number; display_name: string; deleted_at: string; deleted_at_human?: string; deleted_by?: { id: number; name: string; }; } interface DeletedRecordsGroup { type: string; name: string; module: string; display_field: string; count: number; records: DeletedRecord[]; } interface AvailableModel { key: string; name: string; module: string; } interface RecycleBinOverviewProps { deletedRecords: Record; availableModels: AvailableModel[]; } export default function RecycleBinOverview({ deletedRecords, availableModels }: RecycleBinOverviewProps) { const hasDeletedRecords = Object.keys(deletedRecords).length > 0; const page = usePage(); const [showAvailableModels, setShowAvailableModels] = useState(true); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); const selectedModelType = urlParams.get('type'); setShowAvailableModels(!selectedModelType); }, [page.url]); return (

Recycle Bin

View and restore deleted records

{/* Available Models List - Show first */} {showAvailableModels && availableModels.length > 0 && (

Available Models

{availableModels.map((model) => ( ))}
)} {!hasDeletedRecords ? (

No Deleted Records

There are no deleted records to display.

) : (
{Object.values(deletedRecords).map((group) => (

{group.name}

{group.count} deleted record{group.count !== 1 ? 's' : ''}

{group.records.slice(0, 5).map((record) => (

{record.display_name}

Deleted {record.deleted_at_human || formatDistanceToNow(new Date(record.deleted_at), { addSuffix: true })} {record.deleted_by && ( <> • by {record.deleted_by.name} )}
))} {group.records.length > 5 && (

and {group.records.length - 5} more...

)}
))}
)}
); }