Localize user and admin invoice pages.
Move both invoice views onto a shared invoices dictionary — statuses, filters, payment/line-item/transaction labels, manual status controls and toasts — with locale-aware Link, dates and RTL-aware table/search layout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
@@ -5,17 +5,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { FileText, Search, User, Wallet, CreditCard, XCircle, Download } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
import api from '@/lib/api';
|
||||
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||
import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types';
|
||||
|
||||
const statusLabels: Record<InvoiceStatus, string> = {
|
||||
draft: 'Draft',
|
||||
issued: 'Unpaid',
|
||||
partially_paid: 'Partially paid',
|
||||
paid: 'Paid',
|
||||
void: 'Void',
|
||||
failed: 'Failed',
|
||||
};
|
||||
|
||||
const statusClasses: Record<InvoiceStatus, string> = {
|
||||
draft: 'badge-gray',
|
||||
issued: 'badge-yellow',
|
||||
@@ -26,6 +18,10 @@ const statusClasses: Record<InvoiceStatus, string> = {
|
||||
};
|
||||
|
||||
export default function AdminInvoicesPage() {
|
||||
const t = useT();
|
||||
const inv = t.dashboard.invoices;
|
||||
const locale = useLocale();
|
||||
const statusLabel = (s: InvoiceStatus) => (inv.status as Record<string, string>)[s] ?? s;
|
||||
const queryClient = useQueryClient();
|
||||
const [status, setStatus] = useState<'all' | InvoiceStatus>('all');
|
||||
const [paymentMethod, setPaymentMethod] = useState<'all' | PaymentMethod>('all');
|
||||
@@ -54,12 +50,12 @@ export default function AdminInvoicesPage() {
|
||||
mutationFn: ({ invoiceId, nextStatus, reason }: { invoiceId: string; nextStatus: InvoiceStatus; reason: string }) =>
|
||||
api.patch(`/billing/admin/invoices/${invoiceId}/status`, { status: nextStatus, reason }).then((r) => r.data),
|
||||
onSuccess: () => {
|
||||
toast.success('Invoice status updated');
|
||||
toast.success(inv.statusUpdated);
|
||||
setStatusReason('');
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-invoices'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-invoice', selectedId] });
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to update invoice status'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || inv.statusUpdateFailed),
|
||||
});
|
||||
|
||||
const downloadPdfMutation = useMutation({
|
||||
@@ -74,16 +70,16 @@ export default function AdminInvoicesPage() {
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
},
|
||||
onError: () => toast.error('Failed to download invoice PDF'),
|
||||
onError: () => toast.error(inv.downloadFailed),
|
||||
});
|
||||
|
||||
const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
|
||||
const formatDate = (value?: string) => value ? new Date(value).toLocaleString('en-US') : '-';
|
||||
const formatDate = (value?: string) => value ? new Date(value).toLocaleString(locale) : '-';
|
||||
|
||||
const handleStatusUpdate = (nextStatus: InvoiceStatus) => {
|
||||
if (!selectedInvoice) return;
|
||||
if (!statusReason.trim()) {
|
||||
toast.error('Reason is required for manual status changes');
|
||||
toast.error(inv.reasonRequired);
|
||||
return;
|
||||
}
|
||||
updateStatusMutation.mutate({
|
||||
@@ -97,32 +93,32 @@ export default function AdminInvoicesPage() {
|
||||
<div className="max-w-7xl mx-auto space-y-6 animate-fade-in">
|
||||
<div>
|
||||
<h1 className="page-title flex items-center gap-2">
|
||||
<FileText className="w-6 h-6" /> Invoice Management
|
||||
<FileText className="w-6 h-6" /> {inv.adminTitle}
|
||||
</h1>
|
||||
<p className="page-subtitle">Track all user invoices, payments, gateway refs, and wallet transactions.</p>
|
||||
<p className="page-subtitle">{inv.adminSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="card grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||
<div className="relative md:col-span-2">
|
||||
<Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
||||
<Search className="w-4 h-4 text-gray-400 absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search invoice, email, or application"
|
||||
className="input-field pl-9 w-full"
|
||||
placeholder={inv.searchPlaceholder}
|
||||
className="input-field pl-9 rtl:pl-3 rtl:pr-9 w-full"
|
||||
/>
|
||||
</div>
|
||||
<select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field">
|
||||
<option value="all">All statuses</option>
|
||||
{Object.entries(statusLabels).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
<option value="all">{inv.allStatuses}</option>
|
||||
{(Object.keys(inv.status) as InvoiceStatus[]).map((value) => (
|
||||
<option key={value} value={value}>{statusLabel(value)}</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field">
|
||||
<option value="all">All methods</option>
|
||||
<option value="wallet">Wallet</option>
|
||||
<option value="gateway">Gateway</option>
|
||||
<option value="mixed">Mixed</option>
|
||||
<option value="all">{inv.allMethods}</option>
|
||||
<option value="wallet">{inv.methodWallet}</option>
|
||||
<option value="gateway">{inv.methodGateway}</option>
|
||||
<option value="mixed">{inv.methodMixed}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -132,18 +128,18 @@ export default function AdminInvoicesPage() {
|
||||
<table className="min-w-full divide-y divide-gray-100">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Invoice</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">User</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Method</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Due</th>
|
||||
<th className="px-4 py-3 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colInvoice}</th>
|
||||
<th className="px-4 py-3 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colUser}</th>
|
||||
<th className="px-4 py-3 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colStatus}</th>
|
||||
<th className="px-4 py-3 text-left rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colMethod}</th>
|
||||
<th className="px-4 py-3 text-right rtl:text-left text-xs font-semibold text-gray-500 uppercase">{inv.colDue}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 bg-white">
|
||||
{isLoading ? (
|
||||
<tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">Loading...</td></tr>
|
||||
<tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">{t.common.loading}</td></tr>
|
||||
) : invoices.length === 0 ? (
|
||||
<tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">No invoices found</td></tr>
|
||||
<tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">{inv.noInvoices}</td></tr>
|
||||
) : invoices.map((invoice) => (
|
||||
<tr
|
||||
key={invoice.id}
|
||||
@@ -158,12 +154,12 @@ export default function AdminInvoicesPage() {
|
||||
<p className="text-sm text-gray-900">{invoice.user?.email || invoice.userId}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={statusClasses[invoice.status]}>{statusLabels[invoice.status]}</span>
|
||||
<span className={statusClasses[invoice.status]}>{statusLabel(invoice.status)}</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">{invoice.paymentMethod || '-'}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<p className="text-sm font-bold text-gray-900">{formatPrice(invoice.dueAmount)} T</p>
|
||||
<p className="text-xs text-gray-400">Total {formatPrice(invoice.total)} T</p>
|
||||
<td className="px-4 py-3 text-right rtl:text-left">
|
||||
<p className="text-sm font-bold text-gray-900">{formatPrice(invoice.dueAmount)} {t.common.currencyShort}</p>
|
||||
<p className="text-xs text-gray-400">{inv.total} {formatPrice(invoice.total)} {t.common.currencyShort}</p>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -176,7 +172,7 @@ export default function AdminInvoicesPage() {
|
||||
{!selectedInvoice ? (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<FileText className="w-10 h-10 mx-auto mb-3" />
|
||||
Select an invoice
|
||||
{inv.selectInvoiceShort}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
@@ -186,7 +182,7 @@ export default function AdminInvoicesPage() {
|
||||
<p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<span className={statusClasses[selectedInvoice.status]}>{statusLabels[selectedInvoice.status]}</span>
|
||||
<span className={statusClasses[selectedInvoice.status]}>{statusLabel(selectedInvoice.status)}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadPdfMutation.mutate(selectedInvoice)}
|
||||
@@ -194,19 +190,19 @@ export default function AdminInvoicesPage() {
|
||||
className="btn-secondary text-xs inline-flex items-center gap-1 disabled:opacity-50"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
Download PDF
|
||||
{inv.downloadPdf}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-gray-50 rounded-xl p-3">
|
||||
<p className="text-xs text-gray-500">Total</p>
|
||||
<p className="font-bold text-gray-900">{formatPrice(selectedInvoice.total)} T</p>
|
||||
<p className="text-xs text-gray-500">{inv.total}</p>
|
||||
<p className="font-bold text-gray-900">{formatPrice(selectedInvoice.total)} {t.common.currencyShort}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-xl p-3">
|
||||
<p className="text-xs text-gray-500">Due</p>
|
||||
<p className="font-bold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} T</p>
|
||||
<p className="text-xs text-gray-500">{inv.due}</p>
|
||||
<p className="font-bold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} {t.common.currencyShort}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -217,16 +213,16 @@ export default function AdminInvoicesPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<CreditCard className="w-4 h-4 text-gray-400" />
|
||||
Tracking: {selectedInvoice.gatewayTrackingCode || '-'}
|
||||
{inv.tracking}: {selectedInvoice.gatewayTrackingCode || '-'}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-700">
|
||||
<Wallet className="w-4 h-4 text-gray-400" />
|
||||
Method: {selectedInvoice.paymentMethod || '-'}
|
||||
{inv.method}: {selectedInvoice.paymentMethod || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">Line items</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">{inv.lineItems}</h3>
|
||||
<div className="space-y-2">
|
||||
{(selectedInvoice.lines || []).map((line) => (
|
||||
<div key={line.id} className="border border-gray-100 rounded-xl p-3 flex justify-between gap-3">
|
||||
@@ -234,23 +230,23 @@ export default function AdminInvoicesPage() {
|
||||
<p className="text-sm font-medium text-gray-900">{line.label}</p>
|
||||
{line.description && <p className="text-xs text-gray-500">{line.description}</p>}
|
||||
</div>
|
||||
<span className="text-sm font-bold">{formatPrice(line.amount)} T</span>
|
||||
<span className="text-sm font-bold">{formatPrice(line.amount)} {t.common.currencyShort}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">Transactions</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">{inv.transactions}</h3>
|
||||
{(selectedInvoice.transactions || []).length === 0 ? (
|
||||
<p className="text-sm text-gray-400">No linked transactions yet</p>
|
||||
<p className="text-sm text-gray-400">{inv.noTransactions}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(selectedInvoice.transactions || []).map((tx) => (
|
||||
<div key={tx.id} className="border border-gray-100 rounded-xl p-3">
|
||||
<div className="flex justify-between gap-3">
|
||||
<span className="text-sm text-gray-700">{tx.description || tx.type}</span>
|
||||
<span className="text-sm font-bold">{formatPrice(tx.amount)} T</span>
|
||||
<span className="text-sm font-bold">{formatPrice(tx.amount)} {t.common.currencyShort}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">{tx.type} · {formatDate(tx.createdAt)}</p>
|
||||
</div>
|
||||
@@ -260,12 +256,12 @@ export default function AdminInvoicesPage() {
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-4 space-y-3">
|
||||
<h3 className="text-sm font-semibold text-gray-900">Manual status change</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900">{inv.manualStatusChange}</h3>
|
||||
<textarea
|
||||
value={statusReason}
|
||||
onChange={(e) => setStatusReason(e.target.value)}
|
||||
className="input-field w-full min-h-[80px]"
|
||||
placeholder="Reason is required for audit visibility"
|
||||
placeholder={inv.reasonPlaceholder}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
@@ -274,7 +270,7 @@ export default function AdminInvoicesPage() {
|
||||
disabled={updateStatusMutation.isPending}
|
||||
className="btn-secondary text-red-600 flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<XCircle className="w-4 h-4" /> Failed
|
||||
<XCircle className="w-4 h-4" /> {inv.failedBtn}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -282,7 +278,7 @@ export default function AdminInvoicesPage() {
|
||||
disabled={updateStatusMutation.isPending}
|
||||
className="btn-secondary disabled:opacity-50"
|
||||
>
|
||||
Void
|
||||
{inv.voidBtn}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,17 +6,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { CreditCard, FileText, Wallet, XCircle, CheckCircle, Clock, Download } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
import api from '@/lib/api';
|
||||
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||
import type { Invoice, InvoiceStatus } from '@/types';
|
||||
|
||||
const statusLabels: Record<InvoiceStatus, string> = {
|
||||
draft: 'Draft',
|
||||
issued: 'Unpaid',
|
||||
partially_paid: 'Partially paid',
|
||||
paid: 'Paid',
|
||||
void: 'Void',
|
||||
failed: 'Failed',
|
||||
};
|
||||
|
||||
const statusClasses: Record<InvoiceStatus, string> = {
|
||||
draft: 'badge-gray',
|
||||
issued: 'badge-yellow',
|
||||
@@ -27,6 +19,10 @@ const statusClasses: Record<InvoiceStatus, string> = {
|
||||
};
|
||||
|
||||
export default function InvoicesPage() {
|
||||
const t = useT();
|
||||
const inv = t.dashboard.invoices;
|
||||
const locale = useLocale();
|
||||
const statusLabel = (s: InvoiceStatus) => (inv.status as Record<string, string>)[s] ?? s;
|
||||
const queryClient = useQueryClient();
|
||||
const searchParams = useSearchParams();
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'unpaid' | InvoiceStatus>('all');
|
||||
@@ -73,11 +69,11 @@ export default function InvoicesPage() {
|
||||
mutationFn: ({ invoiceId, trackingCode, amount }: { invoiceId: string; trackingCode: string; amount: number }) =>
|
||||
api.post(`/billing/invoices/${invoiceId}/gateway/verify`, { trackingCode, amount }).then((r) => r.data),
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.effect ? 'Payment complete and service updated' : 'Payment complete');
|
||||
toast.success(data.effect ? inv.paymentCompleteUpdated : inv.paymentComplete);
|
||||
refresh();
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Gateway payment failed'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || inv.gatewayFailed),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -103,10 +99,10 @@ export default function InvoicesPage() {
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
if (data.gatewayUrl && data.gatewayAmount > 0) return;
|
||||
toast.success(data.effect ? 'Invoice paid and service updated' : 'Invoice paid');
|
||||
toast.success(data.effect ? inv.invoicePaidUpdated : inv.invoicePaid);
|
||||
refresh();
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Payment failed'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || inv.paymentFailed),
|
||||
});
|
||||
|
||||
const downloadPdfMutation = useMutation({
|
||||
@@ -121,11 +117,11 @@ export default function InvoicesPage() {
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
},
|
||||
onError: () => toast.error('Failed to download invoice PDF'),
|
||||
onError: () => toast.error(inv.downloadFailed),
|
||||
});
|
||||
|
||||
const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
|
||||
const formatDate = (value?: string) => value ? new Date(value).toLocaleString('en-US') : '-';
|
||||
const formatDate = (value?: string) => value ? new Date(value).toLocaleString(locale) : '-';
|
||||
const dueAmount = Number(selectedInvoice?.dueAmount || 0);
|
||||
const walletBalance = Number(walletData?.balance || 0);
|
||||
const isPayable = selectedInvoice?.status === 'issued' || selectedInvoice?.status === 'partially_paid';
|
||||
@@ -135,15 +131,15 @@ export default function InvoicesPage() {
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title flex items-center gap-2">
|
||||
<FileText className="w-6 h-6" /> Invoices
|
||||
<FileText className="w-6 h-6" /> {inv.title}
|
||||
</h1>
|
||||
<p className="page-subtitle">Review what each payment was for and pay open invoices.</p>
|
||||
<p className="page-subtitle">{inv.subtitle}</p>
|
||||
</div>
|
||||
<div className="card py-3 px-4 flex items-center gap-3">
|
||||
<Wallet className="w-5 h-5 text-primary-600" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Wallet balance</p>
|
||||
<p className="font-bold text-gray-900">{formatPrice(walletBalance)} Toman</p>
|
||||
<p className="text-xs text-gray-500">{inv.walletBalance}</p>
|
||||
<p className="font-bold text-gray-900">{formatPrice(walletBalance)} {inv.toman}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,7 +156,7 @@ export default function InvoicesPage() {
|
||||
: 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{status === 'all' ? 'All' : status === 'unpaid' ? 'Unpaid' : statusLabels[status]}
|
||||
{status === 'all' ? inv.filterAll : status === 'unpaid' ? inv.filterUnpaid : statusLabel(status)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -168,9 +164,9 @@ export default function InvoicesPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||||
<div className="lg:col-span-3 card p-0 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center text-gray-400">Loading invoices...</div>
|
||||
<div className="p-8 text-center text-gray-400">{inv.loadingInvoices}</div>
|
||||
) : visibleInvoices.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-400">No invoices found</div>
|
||||
<div className="p-8 text-center text-gray-400">{inv.noInvoices}</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{visibleInvoices.map((invoice) => (
|
||||
@@ -178,7 +174,7 @@ export default function InvoicesPage() {
|
||||
key={invoice.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedId(invoice.id)}
|
||||
className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
|
||||
className={`w-full text-left rtl:text-right p-4 hover:bg-gray-50 transition-colors ${
|
||||
selectedId === invoice.id ? 'bg-primary-50' : 'bg-white'
|
||||
}`}
|
||||
>
|
||||
@@ -189,11 +185,11 @@ export default function InvoicesPage() {
|
||||
{invoice.application?.name || invoice.reason} · {formatDate(invoice.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<span className={statusClasses[invoice.status]}>{statusLabels[invoice.status]}</span>
|
||||
<span className={statusClasses[invoice.status]}>{statusLabel(invoice.status)}</span>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center justify-between text-sm">
|
||||
<span className="text-gray-500">Total {formatPrice(invoice.total)} Toman</span>
|
||||
<span className="font-semibold text-gray-900">Due {formatPrice(invoice.dueAmount)} Toman</span>
|
||||
<span className="text-gray-500">{inv.total} {formatPrice(invoice.total)} {inv.toman}</span>
|
||||
<span className="font-semibold text-gray-900">{inv.due} {formatPrice(invoice.dueAmount)} {inv.toman}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@@ -205,7 +201,7 @@ export default function InvoicesPage() {
|
||||
{!selectedInvoice ? (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
<FileText className="w-10 h-10 mx-auto mb-3" />
|
||||
Select an invoice to view details
|
||||
{inv.selectInvoice}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
@@ -215,7 +211,7 @@ export default function InvoicesPage() {
|
||||
<p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<span className={statusClasses[selectedInvoice.status]}>{statusLabels[selectedInvoice.status]}</span>
|
||||
<span className={statusClasses[selectedInvoice.status]}>{statusLabel(selectedInvoice.status)}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadPdfMutation.mutate(selectedInvoice)}
|
||||
@@ -223,20 +219,20 @@ export default function InvoicesPage() {
|
||||
className="btn-secondary text-xs inline-flex items-center gap-1 disabled:opacity-50"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5" />
|
||||
Download PDF
|
||||
{inv.downloadPdf}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-4 space-y-2 text-sm">
|
||||
<div className="flex justify-between"><span className="text-gray-500">Total</span><span className="font-semibold">{formatPrice(selectedInvoice.total)} Toman</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">Paid</span><span className="font-semibold text-green-600">{formatPrice(selectedInvoice.paidAmount)} Toman</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">Due</span><span className="font-semibold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} Toman</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">Method</span><span>{selectedInvoice.paymentMethod || '-'}</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">{inv.total}</span><span className="font-semibold">{formatPrice(selectedInvoice.total)} {inv.toman}</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">{inv.paidLabel}</span><span className="font-semibold text-green-600">{formatPrice(selectedInvoice.paidAmount)} {inv.toman}</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">{inv.due}</span><span className="font-semibold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} {inv.toman}</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-500">{inv.method}</span><span>{selectedInvoice.paymentMethod || '-'}</span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">Line items</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2">{inv.lineItems}</h3>
|
||||
<div className="space-y-2">
|
||||
{(selectedInvoice.lines || []).map((line) => (
|
||||
<div key={line.id} className="border border-gray-100 rounded-xl p-3">
|
||||
@@ -245,7 +241,7 @@ export default function InvoicesPage() {
|
||||
<p className="text-sm font-medium text-gray-900">{line.label}</p>
|
||||
{line.description && <p className="text-xs text-gray-500">{line.description}</p>}
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-900">{formatPrice(line.amount)} T</span>
|
||||
<span className="text-sm font-bold text-gray-900">{formatPrice(line.amount)} {t.common.currencyShort}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -254,10 +250,12 @@ export default function InvoicesPage() {
|
||||
|
||||
{isPayable && (
|
||||
<div className="space-y-3 border-t border-gray-100 pt-4">
|
||||
<h3 className="text-sm font-semibold text-gray-900">Payment</h3>
|
||||
<h3 className="text-sm font-semibold text-gray-900">{inv.payment}</h3>
|
||||
{walletBalance < dueAmount && (
|
||||
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded-lg p-2">
|
||||
Wallet balance covers {formatPrice(walletBalance)} Toman. The remaining {formatPrice(dueAmount - walletBalance)} Toman will be paid through the gateway.
|
||||
{inv.walletCoversNote
|
||||
.replace('{wallet}', formatPrice(walletBalance))
|
||||
.replace('{rest}', formatPrice(dueAmount - walletBalance))}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
@@ -267,24 +265,24 @@ export default function InvoicesPage() {
|
||||
className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<CreditCard className="w-4 h-4" />
|
||||
{payMutation.isPending || verifyGatewayMutation.isPending ? 'در حال پردازش...' : 'پرداخت'}
|
||||
{payMutation.isPending || verifyGatewayMutation.isPending ? inv.processing : inv.pay}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedInvoice.status === 'paid' && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-700 bg-green-50 border border-green-100 rounded-xl p-3">
|
||||
<CheckCircle className="w-4 h-4" /> Paid on {formatDate(selectedInvoice.paidAt)}
|
||||
<CheckCircle className="w-4 h-4" /> {inv.paidOn.replace('{date}', formatDate(selectedInvoice.paidAt))}
|
||||
</div>
|
||||
)}
|
||||
{selectedInvoice.status === 'failed' && (
|
||||
<div className="flex items-center gap-2 text-sm text-red-700 bg-red-50 border border-red-100 rounded-xl p-3">
|
||||
<XCircle className="w-4 h-4" /> {selectedInvoice.statusReason || 'Payment failed'}
|
||||
<XCircle className="w-4 h-4" /> {selectedInvoice.statusReason || inv.paymentFailed}
|
||||
</div>
|
||||
)}
|
||||
{selectedInvoice.status === 'partially_paid' && (
|
||||
<div className="flex items-center gap-2 text-sm text-blue-700 bg-blue-50 border border-blue-100 rounded-xl p-3">
|
||||
<Clock className="w-4 h-4" /> Waiting for the remaining payment.
|
||||
<Clock className="w-4 h-4" /> {inv.waitingRemaining}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user