import React, { useEffect, useState } from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Alert, AlertDescription } from '@admin/components/ui/alert'; import { Badge } from '@admin/components/ui/badge'; import { Button } from '@admin/components/ui/button'; import { KPICard } from '@admin/components/admin/KPICard'; import { RevenueChart } from '@admin/components/admin/RevenueChart'; import { TenantHealthCard } from '@admin/components/admin/TenantHealthCard'; import { ModuleUsageCard } from '@admin/components/admin/ModuleUsageCard'; import { Building2, Users, Package, Activity, AlertTriangle, CheckCircle, Plus, ArrowRight, DollarSign, TrendingDown, Server, Database, Zap, } from 'lucide-react'; interface DashboardStats { total_tenants: number; active_tenants: number; inactive_tenants: number; total_packages: number; active_packages: number; pending_jobs: number; failed_jobs: number; system_health: { database: string; cache: string; queue: string; }; } interface DashboardSummaryItem { title: string; value: string | number; change?: number; trend?: 'up' | 'down'; subtitle?: string; } interface RevenueDataPoint { month: string; revenue: number; } interface ModuleUsage { name: string; tenants: number; percentage: number; } interface TenantHealthData { healthy: number; warning: number; critical: number; total: number; } interface RecentActivity { id: number; name: string; domain: string; package?: string; created_at?: string; churned_at?: string; } interface SystemHealthDetails { checks: { database: string; cache: string; queue: string; }; score: number; status: string; status_text: string; uptime: string; } interface Props { readonly stats: DashboardStats & { revenue_data: RevenueDataPoint[]; tenant_health: TenantHealthData; module_usage: ModuleUsage[]; system_health: SystemHealthDetails; recent_signups: RecentActivity[]; recent_churns: RecentActivity[]; }; readonly dashboardSummary: DashboardSummaryItem[]; readonly error?: string; } export default function Index({ stats, dashboardSummary, error }: Props) { const [maxColumns, setMaxColumns] = useState(6); useEffect(() => { const updateColumns = () => { const width = window.innerWidth; if (width < 640) setMaxColumns(1); else if (width < 768) setMaxColumns(2); else if (width < 1024) setMaxColumns(3); else if (width < 1280) setMaxColumns(4); else if (width < 1536) setMaxColumns(5); else setMaxColumns(6); }; updateColumns(); window.addEventListener('resize', updateColumns); return () => window.removeEventListener('resize', updateColumns); }, []); const getHealthBadge = (status: string) => { const config = { healthy: { variant: 'default' as const, icon: CheckCircle, text: 'Healthy' }, warning: { variant: 'secondary' as const, icon: AlertTriangle, text: 'Warning' }, error: { variant: 'destructive' as const, icon: AlertTriangle, text: 'Error' }, }; const { variant, icon: Icon, text } = config[status as keyof typeof config] || config.error; return ( {text} ); }; return (
{/* Header Section */}

Admin Dashboard

Administration › Dashboard
{error && ( {error} )} {/* KPI Metrics Row */} {dashboardSummary && dashboardSummary.length > 0 && (
{dashboardSummary.map((kpi, idx) => { const icons = [DollarSign, Building2, Users, TrendingDown, Package, Activity]; const colors = [ { icon: 'text-green-600', bg: 'bg-green-100' }, { icon: 'text-blue-600', bg: 'bg-blue-100' }, { icon: 'text-purple-600', bg: 'bg-purple-100' }, { icon: 'text-red-600', bg: 'bg-red-100' }, { icon: 'text-emerald-600', bg: 'bg-emerald-100' }, { icon: 'text-amber-600', bg: 'bg-amber-100' }, ]; return ( ); })}
)} {/* Revenue Chart & Tenant Health */}
{/* Recent Activity & Module Usage */}
{/* Recent Tenant Activity */}
Recent Signups

New tenants in the last 7 days
{stats.recent_signups && stats.recent_signups.length > 0 ? ( stats.recent_signups.map((tenant, idx) => (
globalThis.location.href = `/admin/tenants/${tenant.id}`} >

{tenant.name}

{tenant.domain}

{tenant.package}

{tenant.created_at}

)) ) : (

No recent signups

)}
{/* Module Usage */}
{/* System Health Monitor */}
System Health Monitor

Real-time system status and metrics

{stats.system_health.score}%

Uptime: {stats.system_health.uptime}
Database

Connection

{getHealthBadge(stats.system_health.checks.database)}
Cache

Service

{getHealthBadge(stats.system_health.checks.cache)}
Queue

Worker

{getHealthBadge(stats.system_health.checks.queue)}
{/* System Metrics */}

{stats.pending_jobs}

Pending Jobs

0 ? 'text-red-600' : 'text-green-600'}`}> {stats.failed_jobs}

Failed Jobs

{stats.system_health.score}%

Health Score

{/* Failed Jobs Alert */} {stats.failed_jobs > 0 && ( {stats.failed_jobs} failed job{stats.failed_jobs > 1 ? 's' : ''} require immediate attention. )} {/* Quick Actions Grid - Replacing old cards */}
{/* Create Tenant */} globalThis.location.href = '/admin/tenants/create'} >

Create New Tenant

Set up a new tenant with packages and modules

 {/* Manage Packages */} globalThis.location.href = '/admin/packages'} >

Manage Packages

Configure tenant packages and pricing plans

 {/* System Jobs */} globalThis.location.href = '/admin/system/jobs'} >

Job Queue

Monitor background jobs and system tasks

 {/* View Tenants */} globalThis.location.href = '/admin/tenants'} >

All Tenants

View and manage all tenant accounts

 {/* System Logs */} globalThis.location.href = '/admin/system/logs'} >

System Logs

Review application logs and activities

 {/* Roles & Permissions */} globalThis.location.href = '/admin/roles'} >

Roles & Permissions

Manage admin roles and access control
); }