import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { CheckCircle, XCircle, Clock, X, AlertTriangle, ShieldCheck, Edit3, History, Sparkles } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; export default function Verifications({ verifications, status, summary, history = [] }) { const [selectedItem, setSelectedItem] = useState(null); const [isDialogOpen, setIsDialogOpen] = useState(false); // Verification form overrides const [ocrOverrides, setOcrOverrides] = useState({}); const [isEditingOcr, setIsEditingOcr] = useState(false); const [rejectionReason, setRejectionReason] = useState(''); const [showRejectionForm, setShowRejectionForm] = useState(false); const activeList = verifications?.data || []; const openReview = (item) => { setSelectedItem(item); setOcrOverrides(item.ocr_data || {}); setIsEditingOcr(false); setShowRejectionForm(false); setRejectionReason(''); setIsDialogOpen(true); }; const handleVerifySubmit = (action) => { router.post(`/admin/workers/${selectedItem.id}/verify`, { action, rejection_reason: action === 'reject' ? rejectionReason : null, ocr_overrides: ocrOverrides }, { onSuccess: () => { setIsDialogOpen(false); } }); }; return (
{/* Simplified Header */}

Worker Verifications

Verify workers, check passports, and override data inputs.

{/* Filter Tabs */}
{[ { label: 'All', value: 'all' }, { label: 'Approved', value: 'approved' }, { label: 'Flagged', value: 'rejected' }, ].map((tab) => ( ))}
{/* Queue Summary widgets */}
Auto-Approve Rate {summary?.auto_approve_rate || 0}%
Average Match Score {summary?.average_match_score || 0}%
Flagged Workers {summary?.flagged_count || 0} Pending
{/* Verification Queue Datagrid */}
{activeList.length > 0 ? ( activeList.map((item) => ( )) ) : ( )}
Worker Name Passport ID Confidence Score Warnings Processed Date Action
{item.worker_name}
{item.nationality} • {item.document_type}
 {item.passport_number}
90 ? 'bg-emerald-500' : item.confidence > 70 ? 'bg-blue-500' : 'bg-amber-500' }`} style={{ width: `${item.confidence}%` }} />
90 ? 'text-emerald-600' : item.confidence > 70 ? 'text-blue-600' : 'text-amber-600' }`}>{item.confidence}%
{item.warnings.length > 0 ? (
{item.warnings.map((w, idx) => ( {w} ))}
) : ( None )} 		{item.processed_at}
No verification records found in this queue.
{/* Audit logs details grid */}

Verification History

{history.length > 0 ? history.map((log, idx) => (
{log.text}
{log.time} • IP: {log.ip}
)) : (
No verification logs recorded.
)}
{/* Verification Audit Dialog - Simplified & Width Optimized */} Verify Worker: {selectedItem?.worker_name}
Score: {selectedItem?.confidence}%
{/* Warnings Box - Rendered Inline */} {selectedItem?.warnings?.length > 0 && (
Verification Warnings
    {selectedItem.warnings.map((w, idx) => (
  • {w}
    • ))}
)} {/* OCR Data Extraction Form - Styled Cleanly */}

Extracted Text Vitals

{Object.entries(ocrOverrides).map(([key, value]) => (
{isEditingOcr ? ( { const newVal = e.target.value; setOcrOverrides(prev => ({ ...prev, [key]: newVal })); }} /> ) : (
{value}
)}
))}
{/* Manual Rejection reason input */} {showRejectionForm ? (