import React, { useState } from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { BarChart3, TrendingUp, Users, CreditCard, Percent, Award, Sparkles, Calendar, Download } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; export default function AnalyticsHub({ user_growth, revenue_breakdown, retention_rates, hiring_funnel }) { const [selectedTab, setSelectedTab] = useState('Growth'); // Helper coordinates calculation for Cohort growth Area Chart (450w, 200h) const getCoordinatesForArea = (key, maxVal) => { const points = []; const paddingLeft = 40; const paddingRight = 15; const paddingTop = 20; const paddingBottom = 25; const graphHeight = 200 - paddingTop - paddingBottom; const graphWidth = 450 - paddingLeft - paddingRight; user_growth.forEach((d, idx) => { const val = d[key]; const x = paddingLeft + (idx / (user_growth.length - 1)) * graphWidth; const y = paddingTop + graphHeight - (val / maxVal) * graphHeight; points.push(`${x},${y}`); }); // Add bottom-right and bottom-left to close the area shape const startX = paddingLeft; const endX = paddingLeft + graphWidth; const bottomY = paddingTop + graphHeight; return `${startX},${bottomY} ${points.join(' ')} ${endX},${bottomY}`; }; const getLineCoordinates = (key, maxVal) => { const points = []; const paddingLeft = 40; const paddingRight = 15; const paddingTop = 20; const paddingBottom = 25; const graphHeight = 200 - paddingTop - paddingBottom; const graphWidth = 450 - paddingLeft - paddingRight; user_growth.forEach((d, idx) => { const val = d[key]; const x = paddingLeft + (idx / (user_growth.length - 1)) * graphWidth; const y = paddingTop + graphHeight - (val / maxVal) * graphHeight; points.push(`${x},${y}`); }); return points.join(' '); }; return (
{/* Title and date picker */}

Interactive Platform Reports & Analytics Hub

Explore subscription cohort retention, job conversions ratios, availability trends, and monthly billing splits.

{['Growth', 'Revenue', 'Funnel'].map((tab) => ( ))}
{/* Analytical Charts grid depending on tabs */}
{/* Growth cohort Report */} {selectedTab === 'Growth' && (

User Cohort growth curves

Employer and Worker registry trends (6 Months)

{/* Grids */} {/* Worker Area fill */} {/* Worker Line */} {/* Employer Line */} {/* Gradients */} {/* X-Axis Month labels */} {user_growth.map((d, i) => { const x = 40 + (i / 5) * 380; return ( {d.month} ); })} {/* Y Labels */} 1.5K 750 300 0
Workers ({user_growth[5].workers})
Employers ({user_growth[5].employers})
)} {/* Revenue reports */} {selectedTab === 'Revenue' && (

Stacked Subscription revenue splits

Monthly billing splits (AED)

{/* Stacked bars for each month */} {revenue_breakdown.map((d, i) => { const x = 50 + i * 62; const total = d.basic + d.premium + d.vip; const maxVal = 80000; const scale = 150; // Graph height scale factor const basicH = (d.basic / maxVal) * scale; const premiumH = (d.premium / maxVal) * scale; const vipH = (d.vip / maxVal) * scale; const basicY = 180 - basicH; const premiumY = basicY - premiumH; const vipY = premiumY - vipH; return ( {/* Basic */} {/* Premium */} {/* VIP */} {d.month.split(' ')[0]} ); })} 80K 40K 0
Basic
Premium
VIP
)} {/* Funnel Conversions */} {selectedTab === 'Funnel' && (

Hiring Placement Funnel ratios

Hiring Conversion stage details (This month)

{hiring_funnel.map((item, idx) => { const maxVal = hiring_funnel[0].count; const pct = ((item.count / maxVal) * 100).toFixed(1); return (
{item.stage} {item.count.toLocaleString()} ({pct}%)
); })}
)} {/* Right side cohort Retention Analysis: Month-over-Month curves */}

Subscription Cohort Retention rates

Month 1 to Month 6 user retention metrics

{retention_rates.map((cohort, i) => (
{cohort.cohort}
{cohort.rate}%
))}
System Insights: Employer VIP and Premium tier subscribers yield a 79% retention rate beyond Month 3, validating platform organic vetting value.
); }