511 lines
31 KiB
JavaScript
511 lines
31 KiB
JavaScript
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 (
|
|
<AdminLayout title="Dashboard Overview">
|
|
<Head title="Admin Dashboard" />
|
|
|
|
{/* Welcome banner */}
|
|
<div className="bg-slate-900 rounded-3xl p-6 text-white mb-8 relative overflow-hidden font-sans shadow-lg shadow-slate-900/10">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl -translate-y-12 translate-x-12" />
|
|
<div className="absolute bottom-0 left-1/3 w-48 h-48 bg-teal-700/15 rounded-full blur-2xl" />
|
|
<div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center space-x-2 bg-teal-500/20 text-teal-300 px-3 py-1 rounded-full text-xs font-bold w-fit border border-teal-500/20">
|
|
<Sparkles className="w-3.5 h-3.5" />
|
|
<span>System Status: Online</span>
|
|
</div>
|
|
<h2 className="text-2xl font-black tracking-tight mt-2">Welcome back, Administrator</h2>
|
|
<p className="text-sm text-slate-400 font-medium">UAE domestic workers platform is operating optimally. 12 automated verifications completed today.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
href="/admin/analytics"
|
|
className="bg-teal-600 hover:bg-teal-500 text-white font-bold text-xs uppercase tracking-wider px-5 py-3 rounded-xl transition-all shadow-md shadow-teal-600/20 flex items-center gap-1.5"
|
|
>
|
|
<TrendingUp className="w-4 h-4" />
|
|
<span>Full Analytics Hub</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stat Cards Row */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 font-sans">
|
|
{/* Total Workers & active/inactive */}
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-black text-slate-400 uppercase tracking-wider">Workers Registered</span>
|
|
<div className="w-10 h-10 bg-teal-50 rounded-xl flex items-center justify-center shadow-inner">
|
|
<Users className="w-5 h-5 text-[#0F6E56]" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
|
{stats?.total_workers?.toLocaleString() || 1420}
|
|
</h3>
|
|
<div className="flex items-center space-x-2 mt-2 text-xs font-bold">
|
|
<span className="text-emerald-600">{stats?.active_workers || 980} Active</span>
|
|
<span className="text-slate-300">•</span>
|
|
<span className="text-slate-400">{stats?.inactive_workers || 440} Inactive</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verification Stats */}
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-black text-slate-400 uppercase tracking-wider">Vetting & OCR Rate</span>
|
|
<div className="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center shadow-inner">
|
|
<ShieldCheck className="w-5 h-5 text-emerald-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
|
{stats?.verification_rate || 88.5}%
|
|
</h3>
|
|
<p className="text-xs text-slate-500 font-medium mt-2 flex items-center">
|
|
<CheckCircle className="w-3.5 h-3.5 text-emerald-500 mr-1 inline" />
|
|
<span>1,256 Profiles Auto-OCR Verified</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat-To-Hire and Hiring Conversion */}
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-black text-slate-400 uppercase tracking-wider">Hiring Conversion</span>
|
|
<div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center shadow-inner">
|
|
<Percent className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
|
{stats?.hiring_conversion_rate || 14.8}%
|
|
</h3>
|
|
<div className="flex items-center space-x-2 mt-2 text-xs font-bold text-blue-600">
|
|
<MessageSquare className="w-3.5 h-3.5" />
|
|
<span>{stats?.chat_to_hire_rate || 12.6}% Chat-to-Hire</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subscription Revenue */}
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm flex flex-col justify-between hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-black text-slate-400 uppercase tracking-wider">Monthly Subscription Revenue</span>
|
|
<div className="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center shadow-inner">
|
|
<BadgeDollarSign className="w-5 h-5 text-emerald-600" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
|
AED {stats?.revenue_this_month_aed?.toLocaleString() || '48,500'}
|
|
</h3>
|
|
<p className="text-xs text-emerald-600 font-bold mt-2 flex items-center">
|
|
<ArrowUpRight className="w-3.5 h-3.5 mr-0.5" />
|
|
<span>+{stats?.new_employers_this_week || 28} Sponsors Added This Week</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Required Analytics and Graphical reports */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8 font-sans">
|
|
{/* 1. Subscription Trends Spline Chart */}
|
|
<div className="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 className="text-base font-black text-slate-900 tracking-tight">Subscription Sign-ups Trend</h3>
|
|
<p className="text-xs text-slate-500 font-medium uppercase tracking-widest mt-1">Growth curves across basic, premium & VIP plans</p>
|
|
</div>
|
|
{/* Selector Tabs */}
|
|
<div className="flex bg-slate-100 p-1 rounded-xl">
|
|
{['All', 'Premium', 'VIP'].map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTrendTab(tab)}
|
|
className={`px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider transition-all ${
|
|
activeTrendTab === tab ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Custom SVG Line Chart */}
|
|
<div className="relative">
|
|
<svg className="w-full h-56" viewBox="0 0 450 200">
|
|
{/* Grid Lines */}
|
|
<line x1="35" y1="20" x2="435" y2="20" stroke="#f1f5f9" strokeWidth="1" />
|
|
<line x1="35" y1="75" x2="435" y2="75" stroke="#f1f5f9" strokeWidth="1" />
|
|
<line x1="35" y1="130" x2="435" y2="130" stroke="#f1f5f9" strokeWidth="1" />
|
|
<line x1="35" y1="180" x2="435" y2="180" stroke="#cbd5e1" strokeWidth="1" />
|
|
|
|
{/* Line 1: Basic */}
|
|
{(activeTrendTab === 'All') && (
|
|
<polyline
|
|
fill="none"
|
|
stroke="#94a3b8"
|
|
strokeWidth="3.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
points={getCoordinatesForLine('basic', 200, 450, 200)}
|
|
className="transition-all duration-500 opacity-60"
|
|
/>
|
|
)}
|
|
|
|
{/* Line 2: Premium */}
|
|
{(activeTrendTab === 'All' || activeTrendTab === 'Premium') && (
|
|
<polyline
|
|
fill="none"
|
|
stroke="#3b82f6"
|
|
strokeWidth="4"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
points={getCoordinatesForLine('premium', 200, 450, 200)}
|
|
className="transition-all duration-500"
|
|
/>
|
|
)}
|
|
|
|
{/* Line 3: VIP */}
|
|
{(activeTrendTab === 'All' || activeTrendTab === 'VIP') && (
|
|
<polyline
|
|
fill="none"
|
|
stroke="#10b981"
|
|
strokeWidth="4.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
points={getCoordinatesForLine('vip', 200, 450, 200)}
|
|
className="transition-all duration-500"
|
|
/>
|
|
)}
|
|
|
|
{/* X-Axis Labels */}
|
|
{trendData.map((d, i) => {
|
|
const x = 35 + (i / 5) * 385;
|
|
return (
|
|
<text key={i} x={x} y="195" textAnchor="middle" className="text-[10px] font-bold fill-slate-400 font-mono">
|
|
{d.month}
|
|
</text>
|
|
);
|
|
})}
|
|
|
|
{/* Y-Axis Labels */}
|
|
<text x="25" y="25" textAnchor="end" className="text-[10px] font-black fill-slate-300">200</text>
|
|
<text x="25" y="80" textAnchor="end" className="text-[10px] font-black fill-slate-300">100</text>
|
|
<text x="25" y="135" textAnchor="end" className="text-[10px] font-black fill-slate-300">50</text>
|
|
<text x="25" y="185" textAnchor="end" className="text-[10px] font-black fill-slate-300">0</text>
|
|
</svg>
|
|
|
|
{/* Custom Legend */}
|
|
<div className="flex items-center justify-center space-x-6 mt-4">
|
|
<div className="flex items-center space-x-2 text-xs font-bold text-slate-600">
|
|
<div className="w-3 h-1 bg-slate-400 rounded" />
|
|
<span>Basic Search ({trendData[5].basic})</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-xs font-bold text-slate-600">
|
|
<div className="w-3 h-1 bg-blue-500 rounded" />
|
|
<span>Premium Pass ({trendData[5].premium})</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-xs font-bold text-slate-600">
|
|
<div className="w-3 h-1 bg-emerald-500 rounded" />
|
|
<span>VIP Concierge ({trendData[5].vip})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. Worker Availability Report Donut Chart */}
|
|
<div className="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm flex flex-col justify-between">
|
|
<div>
|
|
<h3 className="text-base font-black text-slate-900 tracking-tight flex items-center gap-1.5">
|
|
<PieChart className="w-4 h-4 text-[#0F6E56]" />
|
|
<span>Worker Availability Status Reports</span>
|
|
</h3>
|
|
<p className="text-xs text-slate-500 font-medium uppercase tracking-widest mt-1">Real-time availability of candidates pool</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center my-4">
|
|
{/* Custom Donut Chart */}
|
|
<div className="flex justify-center relative">
|
|
<svg className="w-40 h-40" viewBox="0 0 100 100">
|
|
{/* Segment 1: Available Now (640 / 1420 = 45%) -> Stroke-dasharray: 45, 55 */}
|
|
<circle
|
|
cx="50" cy="50" r="40"
|
|
fill="transparent"
|
|
stroke="#10b981"
|
|
strokeWidth="12"
|
|
strokeDasharray="45 55"
|
|
strokeDashoffset="25"
|
|
onMouseEnter={() => 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 */}
|
|
<circle
|
|
cx="50" cy="50" r="40"
|
|
fill="transparent"
|
|
stroke="#94a3b8"
|
|
strokeWidth="12"
|
|
strokeDasharray="34 66"
|
|
strokeDashoffset="-20"
|
|
onMouseEnter={() => 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 */}
|
|
<circle
|
|
cx="50" cy="50" r="40"
|
|
fill="transparent"
|
|
stroke="#3b82f6"
|
|
strokeWidth="12"
|
|
strokeDasharray="21 79"
|
|
strokeDashoffset="-54"
|
|
onMouseEnter={() => setSelectedSlice('Interviewing')}
|
|
onMouseLeave={() => setSelectedSlice(null)}
|
|
className="cursor-pointer transition-all duration-300 hover:stroke-[14]"
|
|
/>
|
|
|
|
{/* Inner Text */}
|
|
<circle cx="50" cy="50" r="28" fill="white" />
|
|
<text x="50" y="47" textAnchor="middle" className="text-[10px] font-black fill-slate-800">
|
|
{selectedSlice || 'TOTAL'}
|
|
</text>
|
|
<text x="50" y="60" textAnchor="middle" className="text-[8px] font-black fill-slate-400 tracking-wider">
|
|
{selectedSlice === 'Available' ? '640 Workers' : selectedSlice === 'Contracted' ? '480 Workers' : selectedSlice === 'Interviewing' ? '300 Workers' : '1,420 Total'}
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Interactive legends */}
|
|
<div className="space-y-3">
|
|
<div className="p-3 bg-emerald-50/50 border border-emerald-100 rounded-xl flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-2.5 h-2.5 bg-emerald-500 rounded-full" />
|
|
<span className="text-xs font-bold text-slate-700">Available Now</span>
|
|
</div>
|
|
<span className="text-xs font-black text-slate-900">640 (45%)</span>
|
|
</div>
|
|
<div className="p-3 bg-blue-50/50 border border-blue-100 rounded-xl flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-2.5 h-2.5 bg-blue-500 rounded-full" />
|
|
<span className="text-xs font-bold text-slate-700">In Interview</span>
|
|
</div>
|
|
<span className="text-xs font-black text-slate-900">300 (21%)</span>
|
|
</div>
|
|
<div className="p-3 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-2.5 h-2.5 bg-slate-400 rounded-full" />
|
|
<span className="text-xs font-bold text-slate-700">Engaged</span>
|
|
</div>
|
|
<span className="text-xs font-black text-slate-900">480 (34%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3. Hiring Funnel & Chat-To-Hire Conversion */}
|
|
<div className="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm mb-8 font-sans">
|
|
<div className="mb-6">
|
|
<h3 className="text-base font-black text-slate-900 tracking-tight">Hiring Conversion & Chat-to-Hire funnel</h3>
|
|
<p className="text-xs text-slate-500 font-medium uppercase tracking-widest mt-1">Platform-wide worker placement workflow stats</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
{[
|
|
{ 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) => (
|
|
<div key={i} className={`p-4 border rounded-2xl ${step.bg} flex flex-col justify-between relative`}>
|
|
{i < 4 && (
|
|
<div className="hidden md:block absolute -right-3 top-1/2 -translate-y-1/2 z-10 w-6 h-6 bg-white border border-slate-100 rounded-full flex items-center justify-center shadow-sm">
|
|
<ArrowRight className="w-3.5 h-3.5 text-slate-400" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400 block mb-1">Step 0{i+1}</span>
|
|
<h4 className="text-xs font-black tracking-tight">{step.stage}</h4>
|
|
</div>
|
|
<div className="mt-4">
|
|
<div className="text-xl font-black tracking-tight">{step.val}</div>
|
|
<div className="text-[10px] font-bold mt-0.5">Ratio: {step.pct}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Verifications Section */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm mb-8 overflow-hidden font-sans">
|
|
<div className="p-5 border-b border-gray-100 flex items-center justify-between bg-white">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-gray-800 tracking-tight">Recent Verifications</h2>
|
|
<p className="text-xs text-gray-500 mt-0.5">Profiles automatically verified via document proof</p>
|
|
</div>
|
|
<Link
|
|
href="/admin/workers/verifications"
|
|
className="text-xs font-semibold text-[#0F6E56] hover:text-[#085041] flex items-center transition-colors"
|
|
>
|
|
View OCR Vetting queue <ArrowRight className="w-3.5 h-3.5 ml-1" />
|
|
</Link>
|
|
</div>
|
|
|
|
{recent_verifications && recent_verifications.length > 0 ? (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Name</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Type</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Document</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Processed</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10 text-right pr-6">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{recent_verifications.map((item) => (
|
|
<TableRow key={item.id} className="hover:bg-slate-50/80 transition-colors">
|
|
<TableCell className="font-medium text-gray-900 text-sm">{item.name}</TableCell>
|
|
<TableCell>
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
item.type === 'Worker' ? 'bg-teal-50 text-[#0F6E56]' : 'bg-indigo-50 text-indigo-700'
|
|
}`}>
|
|
{item.type}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-gray-600">{item.document_type}</TableCell>
|
|
<TableCell className="text-xs text-gray-500">{item.processed_at}</TableCell>
|
|
<TableCell className="text-right pr-6">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-emerald-100 text-emerald-800">
|
|
<CheckCircle className="w-3 h-3 mr-1" />
|
|
{item.status || 'Verified'}
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<div className="p-12 text-center flex flex-col items-center justify-center">
|
|
<CheckCircle className="w-12 h-12 text-emerald-500 mb-3" />
|
|
<h3 className="text-base font-semibold text-gray-800 tracking-tight">No recent activity</h3>
|
|
<p className="text-xs text-gray-500 mt-1">Automatic verification system is monitoring new registrations.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recent Subscriptions Section */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden font-sans">
|
|
<div className="p-5 border-b border-gray-100 flex items-center justify-between bg-white">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-gray-800 tracking-tight">Recent Subscriptions</h2>
|
|
<p className="text-xs text-gray-500 mt-0.5">Latest sponsor subscription activations and renewals</p>
|
|
</div>
|
|
<Link
|
|
href="/admin/payments"
|
|
className="text-xs font-semibold text-[#0F6E56] hover:text-[#085041] flex items-center transition-colors"
|
|
>
|
|
View all payments <ArrowRight className="w-3.5 h-3.5 ml-1" />
|
|
</Link>
|
|
</div>
|
|
|
|
{recent_subscriptions && recent_subscriptions.length > 0 ? (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Sponsor</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Plan</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10">Amount</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-10 text-right pr-6">Date</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{recent_subscriptions.map((item) => (
|
|
<TableRow key={item.id} className="hover:bg-slate-50/80 transition-colors">
|
|
<TableCell className="font-medium text-gray-900 text-sm">{item.employer_name}</TableCell>
|
|
<TableCell>
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
|
|
{item.plan_name}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-sm font-medium text-gray-900">
|
|
AED {item.amount_aed}
|
|
</TableCell>
|
|
<TableCell className="text-xs text-gray-500 text-right pr-6">{item.subscribed_at}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<div className="p-12 text-center text-gray-500 text-xs font-medium">
|
|
No recent subscriptions found.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|