import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Search, FileText, Eye, CheckCircle, XCircle, Clock, Edit2, ZoomIn, X, Loader2 } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Pagination, PaginationContent, PaginationItem, PaginationLink, } from '@/components/ui/pagination'; export default function Verifications({ verifications, status }) { const [selectedItem, setSelectedItem] = useState(null); const [isDialogOpen, setIsDialogOpen] = useState(false); const [lightboxImage, setLightboxImage] = useState(null); // Dialog state const [ocrOverrides, setOcrOverrides] = useState({}); const [editingField, setEditingField] = useState(null); const [rejectionReason, setRejectionReason] = useState(''); const [showRejectionInput, setShowRejectionInput] = useState(false); const [submitting, setSubmitting] = useState(false); const tabs = [ { label: 'All', value: 'all' }, { label: 'Auto-Approved', value: 'approved' }, { label: 'Flagged/Manual', value: 'rejected' }, ]; const handleTabClick = (tabValue) => { router.get('/admin/workers/verifications', { status: tabValue }, { preserveState: true }); }; const openReview = (item) => { setSelectedItem(item); setOcrOverrides(item.ocr_data || {}); setEditingField(null); setShowRejectionInput(false); setRejectionReason(''); setIsDialogOpen(true); }; return (
{/* Header / Sub-title */}

Identity Audit Logs

Automated document verification system logs and OCR extractions.

{/* Filter Tabs */}
{tabs.map((tab) => ( ))}
{/* Desktop Table / Mobile Card List */}
{verifications?.data?.map((item) => ( ))}
Worker Name Nationality Passport No. Processed Status Actions
{item.worker_name} {item.nationality} {item.passport_number} {item.processed_at} Auto-Verified
{/* Mobile Card List */}
{verifications?.data?.map((item) => (
{item.worker_name} Auto-Verified
Nationality: {item.nationality}
Passport: {item.passport_number}
Processed: {item.processed_at}
))}
{verifications?.data?.length === 0 && (
No verification logs found for the selected filter.
)}
{/* Pagination Component */} {verifications?.links && verifications.links.length > 3 && (
{verifications.links.map((link, idx) => { const isPrev = link.label.includes('Previous'); const isNext = link.label.includes('Next'); const label = isPrev ? '‹' : isNext ? '›' : link.label; if (!link.url) { return ( {label} ); } return ( {label} ); })}
)}
{/* Review Dialog */} Verification Log: {selectedItem?.worker_name} System Verified
{/* Left: Document Images */}

Scanned Proof Documents ({selectedItem?.document_images?.length || 0})

{selectedItem?.document_images?.map((imgUrl, i) => (
setLightboxImage(imgUrl)} className="relative group rounded-xl overflow-hidden border border-slate-200 bg-slate-100 cursor-pointer shadow-sm hover:ring-2 hover:ring-[#0F6E56]/40 transition-all aspect-[4/3]" > Document scan
Click to View
))}
{/* Right: OCR Data & Status */}

System Extracted Data Confidence: 98%

{Object.entries(ocrOverrides).map(([key, value]) => (
{key}: {value}
))}
{/* Status Info */}

Verified Automatically

This profile was verified by the system on {selectedItem?.processed_at}. No further action is required from administrators.

{/* Lightbox Zoom */} {lightboxImage && (
setLightboxImage(null)} className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200" > Zoomed document
)} ); }