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 } from '@inertiajs/react'; import { RotateCcw, ArrowLeft, Trash, Calendar, User } from 'lucide-react'; import { formatDistanceToNow } from 'date-fns'; import { useState } from 'react'; import { DeleteDialog } from '@/components/core/delete-dialog'; interface RecordDetails { id: number; type: string; name: string; display_name: string; deleted_at: string; deleted_by?: { id: number; name: string; }; data: Record; } interface RecycleBinShowProps { record: RecordDetails; } export default function RecycleBinShow({ record }: RecycleBinShowProps) { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [restoring, setRestoring] = useState(false); const handleRestore = () => { setRestoring(true); router.post( `/recyclebin/${record.type}/${record.id}/restore`, {}, { onFinish: () => setRestoring(false), onSuccess: () => { router.visit('/recyclebin'); }, } ); }; const handleDelete = () => { setDeleteDialogOpen(true); }; const confirmDelete = () => { router.delete(`/recyclebin/${record.type}/${record.id}`, { onSuccess: () => { router.visit('/recyclebin'); }, }); }; return (

{record.display_name}

{record.name} - Deleted Record Details

Record Information

{Object.entries(record.data).map(([key, value]) => { // Skip deleted_at as it's shown separately if (key === 'deleted_at' || key === 'updated_at' || key === 'created_at') { return null; } // Format the key for display const displayKey = key .replace(/_/g, ' ') .replace(/\b\w/g, (l) => l.toUpperCase()); return (

{displayKey}

{value === null || value === '' ? ( — ) : typeof value === 'object' ? ( 

                                                        {JSON.stringify(value, null, 2)}
) : ( String(value) )}

); })}

Deletion Information

Deleted At

{formatDistanceToNow(new Date(record.deleted_at), { addSuffix: true })}

{new Date(record.deleted_at).toLocaleString()}

{record.deleted_by && (

Deleted By

{record.deleted_by.name}

)}

Record Type

{record.name}
); }