import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Users, ShieldCheck, CreditCard, BadgeDollarSign, CheckCircle, ArrowRight, ArrowUpRight, MessageSquare, TrendingUp, Percent, PieChart, Sparkles } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; export default function Dashboard({ stats, recent_verifications, recent_subscriptions }) { const [activeTrendTab, setActiveTrendTab] = useState('All'); const [selectedSlice, setSelectedSlice] = useState(null); // Mock trend monthly data for custom SVG Line chart const trendData = [ { month: 'Dec', basic: 110, premium: 60, vip: 15 }, { month: 'Jan', basic: 130, premium: 70, vip: 18 }, { month: 'Feb', basic: 145, premium: 82, vip: 22 }, { month: 'Mar', basic: 160, premium: 88, vip: 24 }, { month: 'Apr', basic: 172, premium: 92, vip: 28 }, { month: 'May', basic: 184, premium: 98, vip: 30 } ]; // Compute lines points for SVG Spline const getCoordinatesForLine = (key, height, width, maxVal) => { const points = []; const paddingLeft = 35; const paddingRight = 15; const paddingTop = 20; const paddingBottom = 25; const graphHeight = height - paddingTop - paddingBottom; const graphWidth = width - paddingLeft - paddingRight; trendData.forEach((d, idx) => { const val = d[key]; const x = paddingLeft + (idx / (trendData.length - 1)) * graphWidth; const y = paddingTop + graphHeight - (val / maxVal) * graphHeight; points.push(`${x},${y}`); }); return points.join(' '); }; return ( {/* Welcome banner */}
System Status: Online

Welcome back, Administrator

UAE domestic workers platform is operating optimally. 12 automated verifications completed today.

Full Analytics Hub
{/* Stat Cards Row */}
{/* Total Workers & active/inactive */}
Workers Registered

{stats?.total_workers?.toLocaleString() || 1420}

{stats?.active_workers || 980} Active • {stats?.inactive_workers || 440} Inactive
{/* Verification Stats */}
Vetting & OCR Rate

{stats?.verification_rate || 88.5}%

1,256 Profiles Auto-OCR Verified

{/* Chat-To-Hire and Hiring Conversion */}
Hiring Conversion

{stats?.hiring_conversion_rate || 14.8}%

{stats?.chat_to_hire_rate || 12.6}% Chat-to-Hire
{/* Subscription Revenue */}
Monthly Subscription Revenue

AED {stats?.revenue_this_month_aed?.toLocaleString() || '48,500'}

+{stats?.new_employers_this_week || 28} Sponsors Added This Week

{/* Required Analytics and Graphical reports */}
{/* 1. Subscription Trends Spline Chart */}

Subscription Sign-ups Trend

Growth curves across basic, premium & VIP plans

{/* Selector Tabs */}
{['All', 'Premium', 'VIP'].map((tab) => ( ))}
{/* Custom SVG Line Chart */}
{/* Grid Lines */} {/* Line 1: Basic */} {(activeTrendTab === 'All') && ( )} {/* Line 2: Premium */} {(activeTrendTab === 'All' || activeTrendTab === 'Premium') && ( )} {/* Line 3: VIP */} {(activeTrendTab === 'All' || activeTrendTab === 'VIP') && ( )} {/* X-Axis Labels */} {trendData.map((d, i) => { const x = 35 + (i / 5) * 385; return ( {d.month} ); })} {/* Y-Axis Labels */} 200 100 50 0 {/* Custom Legend */}
Basic Search ({trendData[5].basic})
Premium Pass ({trendData[5].premium})
VIP Concierge ({trendData[5].vip})
{/* 2. Worker Availability Report Donut Chart */}

Worker Availability Status Reports

Real-time availability of candidates pool

{/* Custom Donut Chart */}
{/* Segment 1: Available Now (640 / 1420 = 45%) -> Stroke-dasharray: 45, 55 */} setSelectedSlice('Available')} onMouseLeave={() => setSelectedSlice(null)} className="cursor-pointer transition-all duration-300 hover:stroke-[14]" /> {/* Segment 2: Contracted (480 / 1420 = 34%) -> Stroke-dasharray: 34, 66 */} setSelectedSlice('Contracted')} onMouseLeave={() => setSelectedSlice(null)} className="cursor-pointer transition-all duration-300 hover:stroke-[14]" /> {/* Segment 3: In Interview (300 / 1420 = 21%) -> Stroke-dasharray: 21, 79 */} setSelectedSlice('Interviewing')} onMouseLeave={() => setSelectedSlice(null)} className="cursor-pointer transition-all duration-300 hover:stroke-[14]" /> {/* Inner Text */} {selectedSlice || 'TOTAL'} {selectedSlice === 'Available' ? '640 Workers' : selectedSlice === 'Contracted' ? '480 Workers' : selectedSlice === 'Interviewing' ? '300 Workers' : '1,420 Total'}
{/* Interactive legends */}
Available Now
640 (45%)
In Interview
300 (21%)
Engaged
480 (34%)
{/* 3. Hiring Funnel & Chat-To-Hire Conversion */}

Hiring Conversion & Chat-to-Hire funnel

Platform-wide worker placement workflow stats

{[ { stage: 'Profiles Browsed', val: '12,500', pct: '100%', bg: 'bg-slate-100 border-slate-200 text-slate-600' }, { stage: 'Chats Initiated', val: '4,820', pct: '38.5%', bg: 'bg-teal-50 border-teal-100 text-teal-700' }, { stage: 'Interviews Held', val: '1,860', pct: '14.8%', bg: 'bg-blue-50 border-blue-100 text-blue-700' }, { stage: 'Offers Sent', val: '920', pct: '7.3%', bg: 'bg-purple-50 border-purple-100 text-purple-700' }, { stage: 'Workers Hired', val: '610', pct: '4.8%', bg: 'bg-emerald-50 border-emerald-100 text-emerald-700' } ].map((step, i) => (
{i < 4 && (
)}
Step 0{i+1}

{step.stage}

{step.val}
Ratio: {step.pct}
))}
{/* Recent Verifications Section */}

Recent Verifications

Profiles automatically verified via document proof

View OCR Vetting queue
{recent_verifications && recent_verifications.length > 0 ? ( Name Type Document Processed Status {recent_verifications.map((item) => ( {item.name} {item.type} {item.document_type} {item.processed_at} {item.status || 'Verified'} ))}
) : (

No recent activity

Automatic verification system is monitoring new registrations.

)}
{/* Recent Subscriptions Section */}

Recent Subscriptions

Latest sponsor subscription activations and renewals

View all payments
{recent_subscriptions && recent_subscriptions.length > 0 ? ( Sponsor Plan Amount Date {recent_subscriptions.map((item) => ( {item.employer_name} {item.plan_name} AED {item.amount_aed} {item.subscribed_at} ))}
) : (
No recent subscriptions found.
)}
); }