import React from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Download, ArrowUpRight, ArrowDownRight, Calendar, Filter, Search, CreditCard, TrendingUp, Users, BadgeDollarSign, CheckCircle2, Clock, FileText, MoreHorizontal, XCircle, Building2, Zap, Globe } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; export default function PaymentsIndex({ stats, payments: initialPayments }) { const [selectedPayment, setSelectedPayment] = React.useState(null); const [isDialogOpen, setIsDialogOpen] = React.useState(false); const payments = initialPayments || []; const analytics = [ { title: 'Total Revenue', value: stats?.total_revenue ?? '0.00', icon: BadgeDollarSign, trend: 'Live', positive: true, color: 'emerald' }, { title: 'Active Subscriptions', value: String(stats?.active_subscriptions ?? 0), icon: Users, trend: 'Live', positive: true, color: 'blue' }, { title: 'Failed Payments', value: String(stats?.failed_payments ?? 0), icon: XCircle, trend: 'Live', positive: true, color: 'rose' }, { title: 'Average Ticket', value: stats?.average_ticket ?? '0.00', icon: TrendingUp, trend: 'Live', positive: true, color: 'amber' }, ]; const openDetails = (pay) => { setSelectedPayment(pay); setIsDialogOpen(true); }; return (

{/* Stats Overview */}

{analytics.map((item, i) => (

{item.positive ? : } {item.trend}

{item.title}

{item.title.includes('Revenue') || item.title.includes('Ticket') ? 'AED ' : ''}{item.value}

))}

{/* Main Content Area */}

Recent Transactions

Audit log of all employer subscription payments

Employer Plan Name Amount (AED) Date Status Ref {payments.length === 0 ? ( No transactions found. ) : ( payments.map((pay) => ( openDetails(pay)} >

{pay.employer}

{pay.plan} {pay.amount} {pay.date}

{pay.status === 'Completed' && } {pay.status === 'Pending' && } {pay.status === 'Failed' && } {pay.status}

{pay.id} )) )}

Showing {payments.length} transactions

); }