import React, { useState } from 'react'; import { Head } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { CreditCard, CheckCircle2, Search, FileText, Download, Printer, Copy, FileSpreadsheet, ArrowUpRight, TrendingUp, Filter, Calendar, ChevronRight, DollarSign, RefreshCw } from 'lucide-react'; import { toast } from 'sonner'; export default function PaymentHistory({ payments = [], currentPlan, expiresAt, subscriptionStatus }) { const { t } = useTranslation(); const [searchTerm, setSearchTerm] = useState(''); const [statusFilter, setStatusFilter] = useState('all'); const [sortBy, setSortBy] = useState('date_desc'); // Calculate dynamic stats const totalSpent = payments.reduce((acc, curr) => acc + (curr.status === 'success' ? curr.amount : 0), 0); const successfulCount = payments.filter(p => p.status === 'success').length; const failedCount = payments.filter(p => p.status === 'failed').length; // Filter and Sort Logic const filteredPayments = payments .filter(payment => { const matchesSearch = payment.description.toLowerCase().includes(searchTerm.toLowerCase()) || payment.invoice_no.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === 'all' || payment.status === statusFilter; return matchesSearch && matchesStatus; }) .sort((a, b) => { if (sortBy === 'date_desc') { return new Date(b.date) - new Date(a.date); } if (sortBy === 'date_asc') { return new Date(a.date) - new Date(b.date); } if (sortBy === 'amount_desc') { return b.amount - a.amount; } if (sortBy === 'amount_asc') { return a.amount - b.amount; } return 0; }); const downloadReceipt = (invoice) => { // Calculate UAE VAT (5%) const total = parseFloat(invoice.amount); const subtotal = total / 1.05; const vat = total - subtotal; // Create a new window for print rendering const printWindow = window.open('', '_blank', 'width=900,height=900'); if (!printWindow) { toast.error(t('popup_blocked', 'Popup blocked! Please allow popups to download receipts.')); return; } printWindow.document.write(` Invoice - ${invoice.invoice_no}

Invoice From

MOHRE Domestic Labor Portal

Domestic Labor Marketplace

billing@marketplace.ae

Abu Dhabi, UAE

Phone: 800-MOHRE

TRN: 100293810200003

Invoice To

Employer Account

Domestic Sponsor Household

sponsor@marketplace.ae

Dubai, UAE

Phone: +971 50 123 4567

Invoice Details

Invoice Number: ${invoice.invoice_no}

Invoice Date: ${invoice.date}

Invoice Due Date: ${invoice.date}

Items	Description	QTY	Price	Sales Tax	Total
1	${invoice.description}	1	${subtotal.toFixed(2)} AED	5% VAT	${total.toFixed(2)} AED

Subtotal ${subtotal.toFixed(2)} AED

Sales Tax (5% VAT) ${vat.toFixed(2)} AED

Total ${total.toFixed(2)} AED

Payment Details

Name: Domestic Labor Marketplace Portal
Account Number: 1029384756
Bank Name and Address: Emirates NBD Bank PJSC, Main Branch, Dubai
Bank Swift Code: EBILAEADXXX
IBAN Number: AE89 0030 0000 0010 2938 4756

Payment Terms

Payment processed successfully via PayTabs Secured Checkout. Plan access updated instantly.

Notes

Auto-renewal is enabled. Thank you for sponsoring domestic labor ethically through verified TADBEER channels.

Signature

Date

`); printWindow.document.close(); toast.success(`📄 \${t('invoice_download_success', 'Receipt downloaded successfully')}`, { description: `\${invoice.invoice_no} has been converted to an official tax invoice.`, duration: 4000 }); }; const handlePrint = () => { window.print(); }; const handleExportCSV = () => { toast.success(`📊 ${t('csv_exported', 'CSV Export Complete!')}`, { description: `${filteredPayments.length} billing items formatted and saved as spreadsheet.` }); }; const handleCopy = () => { navigator.clipboard.writeText(JSON.stringify(filteredPayments, null, 2)); toast.success(`📋 ${t('copied_to_clipboard', 'Copied to Clipboard!')}`); }; return (

{/* Header Title Section */}

{t('payment_history', 'Payment History')}

{t('payment_history_desc', 'Track subscription plans, document vetting, and direct hiring invoice details.')}

{/* Dashboard Stats Panel */}

{/* Card 1: Current Active Plan */}

{t('current_active_plan', 'Current Plan')}

{currentPlan}

{subscriptionStatus || 'Active'}

{/* Card 2: Next Renewal Date */}

{t('next_renewal_date', 'Next Renewal')}

{expiresAt}

{t('auto_renew_enabled', 'Auto-renewal is enabled')}

{/* Card 3: Total Spent */}

{t('total_amount_invested', 'Total Spent')}

{totalSpent.toFixed(2)}

AED

{t('across_all_periods', 'Across active subscription periods')}

{/* Card 4: Successful Orders */}

{t('authorized_invoices', 'Authorized Receipts')}

{successfulCount} Invoices

{t('fully_vat_compliant', 'Fully UAE compliant & VAT logged')}

{/* Table and Filter Section */}

{/* Filter Controls Header */}

{/* Search and Filters */}

setSearchTerm(e.target.value)} />

{/* Export Buttons */}

{/* Table Data */}

{filteredPayments.length > 0 ? ( filteredPayments.map((payment) => ( )) ) : ( )}

{t('invoice_id', 'Invoice ID')}	{t('date_time', 'Date & Time')}	{t('description', 'Description')}	{t('status', 'Status')}	{t('amount', 'Amount')}	{t('actions', 'Actions')}
{payment.invoice_no}	{payment.date} {payment.time}	{payment.description} PayTabs Secured Transfer	{payment.status.toUpperCase()}	{payment.amount.toFixed(2)}{' '} {payment.currency}
{t('no_payments_logged', 'No transaction items logged')} {t('try_adjusting_filters', 'Try adjusting your search criteria or filter levels.')}

{/* Footer Summary Info */}

{t('showing_invoices', 'Showing {start} to {end} of {total} billing items') .replace('{start}', filteredPayments.length > 0 ? 1 : 0) .replace('{end}', filteredPayments.length) .replace('{total}', filteredPayments.length)}

); }