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 || [ { id: 'PAY-001', employer: 'Al Barari Real Estate', plan: 'Premium Pass', amount: 199, date: '2026-05-15', status: 'Completed', method: 'Visa •••• 4242', period: 'May 2026 - June 2026' }, { id: 'PAY-002', employer: 'Marina Cleaners', plan: 'Basic Search', amount: 99, date: '2026-05-14', status: 'Completed', method: 'Mastercard •••• 8812', period: 'May 2026 - June 2026' }, { id: 'PAY-003', employer: 'Golden Hospitality', plan: 'VIP Concierge', amount: 499, date: '2026-05-14', status: 'Pending', method: 'Bank Transfer', period: 'May 2026 - June 2026' }, { id: 'PAY-004', employer: 'Emirates Logistics', plan: 'Premium Pass', amount: 199, date: '2026-05-13', status: 'Completed', method: 'Visa •••• 1002', period: 'May 2026 - June 2026' }, { id: 'PAY-005', employer: 'Dubai Mall Services', plan: 'Premium Pass', amount: 199, date: '2026-05-12', status: 'Failed', method: 'Visa •••• 4242', period: 'May 2026 - June 2026' }, ]; const analytics = [ { title: 'Total Revenue', value: '42,850', icon: BadgeDollarSign, trend: '+15.2%', positive: true, color: 'emerald' }, { title: 'Active Subscriptions', value: '184', icon: Users, trend: '+4.3%', positive: true, color: 'blue' }, { title: 'Failed Payments', value: '3', icon: XCircle, trend: '-2.1%', positive: true, color: 'rose' }, { title: 'Average Ticket', value: '232', icon: TrendingUp, trend: '+0.8%', 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.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 5 of 1,284 transactions

); }