266 lines
17 KiB
JavaScript
266 lines
17 KiB
JavaScript
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 (
|
|
<AdminLayout title="Financial Analytics">
|
|
<Head title="Payments & Revenue" />
|
|
|
|
<div className="space-y-8">
|
|
{/* Stats Overview */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{analytics.map((item, i) => (
|
|
<div key={i} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center bg-${item.color}-50 text-${item.color}-600 shadow-inner`}>
|
|
<item.icon className="w-6 h-6" />
|
|
</div>
|
|
<div className={`flex items-center space-x-1 px-2 py-1 rounded-full text-[10px] font-black uppercase tracking-tight ${
|
|
item.positive ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'
|
|
}`}>
|
|
{item.positive ? <ArrowUpRight className="w-3 h-3" /> : <ArrowDownRight className="w-3 h-3" />}
|
|
<span>{item.trend}</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-sm font-semibold text-slate-500 mb-1">{item.title}</h3>
|
|
<div className="flex items-baseline space-x-2">
|
|
<span className="text-2xl font-black text-slate-900 tracking-tight">{item.title.includes('Revenue') || item.title.includes('Ticket') ? 'AED ' : ''}{item.value}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div className="p-6 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-lg font-black text-slate-900 tracking-tight">Recent Transactions</h2>
|
|
<p className="text-xs text-slate-500 font-medium uppercase tracking-widest mt-1">Audit log of all employer subscription payments</p>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by Employer..."
|
|
className="pl-10 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-lg text-xs font-bold focus:ring-4 focus:ring-teal-500/10 outline-none w-48 lg:w-64"
|
|
/>
|
|
</div>
|
|
<button className="p-2.5 bg-slate-50 text-slate-500 rounded-lg border border-slate-100 hover:bg-slate-100 transition-colors">
|
|
<Filter className="w-4 h-4" />
|
|
</button>
|
|
<button className="flex items-center space-x-2 px-4 py-2 bg-[#0F6E56] text-white rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-[#085041] transition-all shadow-lg shadow-teal-500/10">
|
|
<Download className="w-4 h-4" />
|
|
<span>Export</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 pl-8">Employer</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Plan Name</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Amount (AED)</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Date</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Status</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 text-right pr-8">Ref</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{payments.map((pay) => (
|
|
<TableRow
|
|
key={pay.id}
|
|
className="hover:bg-slate-50 transition-colors cursor-pointer group"
|
|
onClick={() => openDetails(pay)}
|
|
>
|
|
<TableCell className="py-5 pl-8">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-teal-50 group-hover:text-teal-600 transition-colors">
|
|
<Building2 className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold text-slate-900 text-sm">{pay.employer}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="px-2.5 py-1 bg-blue-50 text-blue-600 rounded-lg text-[10px] font-black uppercase tracking-tight">
|
|
{pay.plan}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="font-black text-slate-900 tracking-tight">{pay.amount}</TableCell>
|
|
<TableCell className="text-xs font-bold text-slate-400">{pay.date}</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center space-x-2">
|
|
{pay.status === 'Completed' && <CheckCircle2 className="w-4 h-4 text-emerald-500" />}
|
|
{pay.status === 'Pending' && <Clock className="w-4 h-4 text-amber-500" />}
|
|
{pay.status === 'Failed' && <XCircle className="w-4 h-4 text-rose-500" />}
|
|
<span className={`text-[10px] font-black uppercase tracking-widest ${
|
|
pay.status === 'Completed' ? 'text-emerald-600' :
|
|
pay.status === 'Pending' ? 'text-amber-600' : 'text-rose-600'
|
|
}`}>
|
|
{pay.status}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right pr-8">
|
|
<span className="text-[10px] font-mono font-bold text-slate-300 uppercase">{pay.id}</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
<div className="p-6 border-t border-slate-100 flex items-center justify-between bg-slate-50/30">
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Showing 5 of 1,284 transactions</p>
|
|
<div className="flex items-center space-x-2">
|
|
<button className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-slate-50 transition-colors">Previous</button>
|
|
<button className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-slate-50 transition-colors">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="max-w-2xl bg-white p-0 overflow-hidden rounded-[32px] border-none shadow-2xl">
|
|
<div className="bg-slate-900 p-8 text-white relative">
|
|
<div className="absolute top-0 right-0 p-8 opacity-10">
|
|
<BadgeDollarSign className="w-32 h-32" />
|
|
</div>
|
|
<div className="relative z-10 space-y-2">
|
|
<div className="flex items-center space-x-2 text-[10px] font-black uppercase tracking-[0.2em] text-teal-400">
|
|
<Zap className="w-3 h-3" />
|
|
<span>Transaction Details</span>
|
|
</div>
|
|
<h2 className="text-3xl font-black tracking-tight">{selectedPayment?.id}</h2>
|
|
<p className="text-slate-400 text-sm font-medium">{selectedPayment?.date} • External Reference: TRX-99283-PL</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-8">
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Employer</label>
|
|
<div className="flex items-center space-x-2 text-sm font-bold text-slate-900">
|
|
<Building2 className="w-4 h-4 text-[#0F6E56]" />
|
|
<span>{selectedPayment?.employer}</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Subscription Plan</label>
|
|
<div className="flex items-center space-x-2 text-sm font-bold text-slate-900">
|
|
<Zap className="w-4 h-4 text-amber-500" />
|
|
<span>{selectedPayment?.plan}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4 text-right">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Amount Paid</label>
|
|
<div className="text-2xl font-black text-slate-900">AED {selectedPayment?.amount}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Payment Status</label>
|
|
<div className={`text-xs font-black uppercase tracking-widest ${
|
|
selectedPayment?.status === 'Completed' ? 'text-emerald-600' :
|
|
selectedPayment?.status === 'Pending' ? 'text-amber-600' : 'text-rose-600'
|
|
}`}>
|
|
{selectedPayment?.status}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 rounded-2xl p-6 border border-slate-100 grid grid-cols-2 gap-6">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Billing Period</label>
|
|
<div className="text-xs font-bold text-slate-700 flex items-center space-x-2">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
<span>{selectedPayment?.period}</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Payment Method</label>
|
|
<div className="text-xs font-bold text-slate-700 flex items-center space-x-2">
|
|
<CreditCard className="w-3.5 h-3.5" />
|
|
<span>{selectedPayment?.method}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
|
<div className="flex items-center space-x-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
<Globe className="w-3.5 h-3.5" />
|
|
<span>IP: 192.168.1.1 (Dubai, UAE)</span>
|
|
</div>
|
|
<button className="text-[10px] font-black text-[#0F6E56] uppercase tracking-widest hover:underline flex items-center space-x-1">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>Download PDF Invoice</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
);
|
|
}
|