abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Localize user and admin invoice pages.

Browse Source 
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
2026-06-11 13:00:15 +03:30
parent e99dccaff1
commit f8ee1ca168
5 changed files with 215 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
+51 -55
View File
@@ -5,17 +5,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { FileText, Search, User, Wallet, CreditCard, XCircle, Download } from 'lucide-react'; import { FileText, Search, User, Wallet, CreditCard, XCircle, Download } from 'lucide-react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import api from '@/lib/api'; import api from '@/lib/api';
import { useT, useLocale } from '@/i18n/I18nProvider';
import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types'; 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> = { const statusClasses: Record<InvoiceStatus, string> = {
draft: 'badge-gray', draft: 'badge-gray',
issued: 'badge-yellow', issued: 'badge-yellow',
@@ -26,6 +18,10 @@ const statusClasses: Record<InvoiceStatus, string> = {
}; };
export default function AdminInvoicesPage() { 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 queryClient = useQueryClient();
const [status, setStatus] = useState<'all' | InvoiceStatus>('all'); const [status, setStatus] = useState<'all' | InvoiceStatus>('all');
const [paymentMethod, setPaymentMethod] = useState<'all' | PaymentMethod>('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 }) => mutationFn: ({ invoiceId, nextStatus, reason }: { invoiceId: string; nextStatus: InvoiceStatus; reason: string }) =>
api.patch(`/billing/admin/invoices/${invoiceId}/status`, { status: nextStatus, reason }).then((r) => r.data), api.patch(`/billing/admin/invoices/${invoiceId}/status`, { status: nextStatus, reason }).then((r) => r.data),
onSuccess: () => { onSuccess: () => {
toast.success('Invoice status updated'); toast.success(inv.statusUpdated);
setStatusReason(''); setStatusReason('');
queryClient.invalidateQueries({ queryKey: ['admin-invoices'] }); queryClient.invalidateQueries({ queryKey: ['admin-invoices'] });
queryClient.invalidateQueries({ queryKey: ['admin-invoice', selectedId] }); 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({ const downloadPdfMutation = useMutation({
@@ -74,16 +70,16 @@ export default function AdminInvoicesPage() {
link.remove(); link.remove();
window.URL.revokeObjectURL(url); 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 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) => { const handleStatusUpdate = (nextStatus: InvoiceStatus) => {
if (!selectedInvoice) return; if (!selectedInvoice) return;
if (!statusReason.trim()) { if (!statusReason.trim()) {
toast.error('Reason is required for manual status changes'); toast.error(inv.reasonRequired);
return; return;
} }
updateStatusMutation.mutate({ updateStatusMutation.mutate({
@@ -97,32 +93,32 @@ export default function AdminInvoicesPage() {
<div className="max-w-7xl mx-auto space-y-6 animate-fade-in"> <div className="max-w-7xl mx-auto space-y-6 animate-fade-in">
<div> <div>
<h1 className="page-title flex items-center gap-2"> <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> </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>
<div className="card grid grid-cols-1 md:grid-cols-4 gap-3"> <div className="card grid grid-cols-1 md:grid-cols-4 gap-3">
<div className="relative md:col-span-2"> <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 <input
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
placeholder="Search invoice, email, or application" placeholder={inv.searchPlaceholder}
className="input-field pl-9 w-full" className="input-field pl-9 rtl:pl-3 rtl:pr-9 w-full"
/> />
</div> </div>
<select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field"> <select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field">
<option value="all">All statuses</option> <option value="all">{inv.allStatuses}</option>
{Object.entries(statusLabels).map(([value, label]) => ( {(Object.keys(inv.status) as InvoiceStatus[]).map((value) => (
<option key={value} value={value}>{label}</option> <option key={value} value={value}>{statusLabel(value)}</option>
))} ))}
</select> </select>
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field"> <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field">
<option value="all">All methods</option> <option value="all">{inv.allMethods}</option>
<option value="wallet">Wallet</option> <option value="wallet">{inv.methodWallet}</option>
<option value="gateway">Gateway</option> <option value="gateway">{inv.methodGateway}</option>
<option value="mixed">Mixed</option> <option value="mixed">{inv.methodMixed}</option>
</select> </select>
</div> </div>
@@ -132,18 +128,18 @@ export default function AdminInvoicesPage() {
<table className="min-w-full divide-y divide-gray-100"> <table className="min-w-full divide-y divide-gray-100">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <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 rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colInvoice}</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 rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colUser}</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 rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colStatus}</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-left rtl:text-right text-xs font-semibold text-gray-500 uppercase">{inv.colMethod}</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-right rtl:text-left text-xs font-semibold text-gray-500 uppercase">{inv.colDue}</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 bg-white"> <tbody className="divide-y divide-gray-100 bg-white">
{isLoading ? ( {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 ? ( ) : 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) => ( ) : invoices.map((invoice) => (
<tr <tr
key={invoice.id} key={invoice.id}
@@ -158,12 +154,12 @@ export default function AdminInvoicesPage() {
<p className="text-sm text-gray-900">{invoice.user?.email || invoice.userId}</p> <p className="text-sm text-gray-900">{invoice.user?.email || invoice.userId}</p>
</td> </td>
<td className="px-4 py-3"> <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>
<td className="px-4 py-3 text-sm text-gray-600">{invoice.paymentMethod || '-'}</td> <td className="px-4 py-3 text-sm text-gray-600">{invoice.paymentMethod || '-'}</td>
<td className="px-4 py-3 text-right"> <td className="px-4 py-3 text-right rtl:text-left">
<p className="text-sm font-bold text-gray-900">{formatPrice(invoice.dueAmount)} T</p> <p className="text-sm font-bold text-gray-900">{formatPrice(invoice.dueAmount)} {t.common.currencyShort}</p>
<p className="text-xs text-gray-400">Total {formatPrice(invoice.total)} T</p> <p className="text-xs text-gray-400">{inv.total} {formatPrice(invoice.total)} {t.common.currencyShort}</p>
</td> </td>
</tr> </tr>
))} ))}
@@ -176,7 +172,7 @@ export default function AdminInvoicesPage() {
{!selectedInvoice ? ( {!selectedInvoice ? (
<div className="text-center py-12 text-gray-400"> <div className="text-center py-12 text-gray-400">
<FileText className="w-10 h-10 mx-auto mb-3" /> <FileText className="w-10 h-10 mx-auto mb-3" />
Select an invoice {inv.selectInvoiceShort}
</div> </div>
) : ( ) : (
<div className="space-y-5"> <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> <p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
</div> </div>
<div className="flex flex-col items-end gap-2"> <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 <button
type="button" type="button"
onClick={() => downloadPdfMutation.mutate(selectedInvoice)} 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" className="btn-secondary text-xs inline-flex items-center gap-1 disabled:opacity-50"
> >
<Download className="w-3.5 h-3.5" /> <Download className="w-3.5 h-3.5" />
Download PDF {inv.downloadPdf}
</button> </button>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="bg-gray-50 rounded-xl p-3"> <div className="bg-gray-50 rounded-xl p-3">
<p className="text-xs text-gray-500">Total</p> <p className="text-xs text-gray-500">{inv.total}</p>
<p className="font-bold text-gray-900">{formatPrice(selectedInvoice.total)} T</p> <p className="font-bold text-gray-900">{formatPrice(selectedInvoice.total)} {t.common.currencyShort}</p>
</div> </div>
<div className="bg-gray-50 rounded-xl p-3"> <div className="bg-gray-50 rounded-xl p-3">
<p className="text-xs text-gray-500">Due</p> <p className="text-xs text-gray-500">{inv.due}</p>
<p className="font-bold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} T</p> <p className="font-bold text-primary-700">{formatPrice(selectedInvoice.dueAmount)} {t.common.currencyShort}</p>
</div> </div>
</div> </div>
@@ -217,16 +213,16 @@ export default function AdminInvoicesPage() {
</div> </div>
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<CreditCard className="w-4 h-4 text-gray-400" /> <CreditCard className="w-4 h-4 text-gray-400" />
Tracking: {selectedInvoice.gatewayTrackingCode || '-'} {inv.tracking}: {selectedInvoice.gatewayTrackingCode || '-'}
</div> </div>
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<Wallet className="w-4 h-4 text-gray-400" /> <Wallet className="w-4 h-4 text-gray-400" />
Method: {selectedInvoice.paymentMethod || '-'} {inv.method}: {selectedInvoice.paymentMethod || '-'}
</div> </div>
</div> </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"> <div className="space-y-2">
{(selectedInvoice.lines || []).map((line) => ( {(selectedInvoice.lines || []).map((line) => (
<div key={line.id} className="border border-gray-100 rounded-xl p-3 flex justify-between gap-3"> <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> <p className="text-sm font-medium text-gray-900">{line.label}</p>
{line.description && <p className="text-xs text-gray-500">{line.description}</p>} {line.description && <p className="text-xs text-gray-500">{line.description}</p>}
</div> </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>
</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 ? ( {(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"> <div className="space-y-2">
{(selectedInvoice.transactions || []).map((tx) => ( {(selectedInvoice.transactions || []).map((tx) => (
<div key={tx.id} className="border border-gray-100 rounded-xl p-3"> <div key={tx.id} className="border border-gray-100 rounded-xl p-3">
<div className="flex justify-between gap-3"> <div className="flex justify-between gap-3">
<span className="text-sm text-gray-700">{tx.description || tx.type}</span> <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> </div>
<p className="text-xs text-gray-400 mt-1">{tx.type} · {formatDate(tx.createdAt)}</p> <p className="text-xs text-gray-400 mt-1">{tx.type} · {formatDate(tx.createdAt)}</p>
</div> </div>
@@ -260,12 +256,12 @@ export default function AdminInvoicesPage() {
</div> </div>
<div className="border-t border-gray-100 pt-4 space-y-3"> <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 <textarea
value={statusReason} value={statusReason}
onChange={(e) => setStatusReason(e.target.value)} onChange={(e) => setStatusReason(e.target.value)}
className="input-field w-full min-h-[80px]" 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"> <div className="grid grid-cols-2 gap-2">
<button <button
@@ -274,7 +270,7 @@ export default function AdminInvoicesPage() {
disabled={updateStatusMutation.isPending} disabled={updateStatusMutation.isPending}
className="btn-secondary text-red-600 flex items-center justify-center gap-2 disabled:opacity-50" 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>
<button <button
type="button" type="button"
@@ -282,7 +278,7 @@ export default function AdminInvoicesPage() {
disabled={updateStatusMutation.isPending} disabled={updateStatusMutation.isPending}
className="btn-secondary disabled:opacity-50" className="btn-secondary disabled:opacity-50"
> >
Void {inv.voidBtn}
</button> </button>
</div> </div>
</div> </div>
frontend/src/app/[lang]/dashboard/invoices/page.tsx
+39 -41
View File
@@ -6,17 +6,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { CreditCard, FileText, Wallet, XCircle, CheckCircle, Clock, Download } from 'lucide-react'; import { CreditCard, FileText, Wallet, XCircle, CheckCircle, Clock, Download } from 'lucide-react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import api from '@/lib/api'; import api from '@/lib/api';
import { useT, useLocale } from '@/i18n/I18nProvider';
import type { Invoice, InvoiceStatus } from '@/types'; 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> = { const statusClasses: Record<InvoiceStatus, string> = {
draft: 'badge-gray', draft: 'badge-gray',
issued: 'badge-yellow', issued: 'badge-yellow',
@@ -27,6 +19,10 @@ const statusClasses: Record<InvoiceStatus, string> = {
}; };
export default function InvoicesPage() { 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 queryClient = useQueryClient();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [statusFilter, setStatusFilter] = useState<'all' | 'unpaid' | InvoiceStatus>('all'); 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 }) => mutationFn: ({ invoiceId, trackingCode, amount }: { invoiceId: string; trackingCode: string; amount: number }) =>
api.post(`/billing/invoices/${invoiceId}/gateway/verify`, { trackingCode, amount }).then((r) => r.data), api.post(`/billing/invoices/${invoiceId}/gateway/verify`, { trackingCode, amount }).then((r) => r.data),
onSuccess: (data) => { onSuccess: (data) => {
toast.success(data.effect ? 'Payment complete and service updated' : 'Payment complete'); toast.success(data.effect ? inv.paymentCompleteUpdated : inv.paymentComplete);
refresh(); refresh();
window.history.replaceState({}, '', window.location.pathname); 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(() => { useEffect(() => {
@@ -103,10 +99,10 @@ export default function InvoicesPage() {
}, },
onSuccess: (data) => { onSuccess: (data) => {
if (data.gatewayUrl && data.gatewayAmount > 0) return; 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(); 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({ const downloadPdfMutation = useMutation({
@@ -121,11 +117,11 @@ export default function InvoicesPage() {
link.remove(); link.remove();
window.URL.revokeObjectURL(url); 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 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 dueAmount = Number(selectedInvoice?.dueAmount || 0);
const walletBalance = Number(walletData?.balance || 0); const walletBalance = Number(walletData?.balance || 0);
const isPayable = selectedInvoice?.status === 'issued' || selectedInvoice?.status === 'partially_paid'; 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 className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div> <div>
<h1 className="page-title flex items-center gap-2"> <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> </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>
<div className="card py-3 px-4 flex items-center gap-3"> <div className="card py-3 px-4 flex items-center gap-3">
<Wallet className="w-5 h-5 text-primary-600" /> <Wallet className="w-5 h-5 text-primary-600" />
<div> <div>
<p className="text-xs text-gray-500">Wallet balance</p> <p className="text-xs text-gray-500">{inv.walletBalance}</p>
<p className="font-bold text-gray-900">{formatPrice(walletBalance)} Toman</p> <p className="font-bold text-gray-900">{formatPrice(walletBalance)} {inv.toman}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -160,7 +156,7 @@ export default function InvoicesPage() {
: 'bg-white text-gray-700 border-gray-200 hover:bg-gray-50' : '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> </button>
))} ))}
</div> </div>
@@ -168,9 +164,9 @@ export default function InvoicesPage() {
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
<div className="lg:col-span-3 card p-0 overflow-hidden"> <div className="lg:col-span-3 card p-0 overflow-hidden">
{isLoading ? ( {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 ? ( ) : 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"> <div className="divide-y divide-gray-100">
{visibleInvoices.map((invoice) => ( {visibleInvoices.map((invoice) => (
@@ -178,7 +174,7 @@ export default function InvoicesPage() {
key={invoice.id} key={invoice.id}
type="button" type="button"
onClick={() => setSelectedId(invoice.id)} 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' selectedId === invoice.id ? 'bg-primary-50' : 'bg-white'
}`} }`}
> >
@@ -189,11 +185,11 @@ export default function InvoicesPage() {
{invoice.application?.name || invoice.reason} · {formatDate(invoice.createdAt)} {invoice.application?.name || invoice.reason} · {formatDate(invoice.createdAt)}
</p> </p>
</div> </div>
<span className={statusClasses[invoice.status]}>{statusLabels[invoice.status]}</span> <span className={statusClasses[invoice.status]}>{statusLabel(invoice.status)}</span>
</div> </div>
<div className="mt-3 flex items-center justify-between text-sm"> <div className="mt-3 flex items-center justify-between text-sm">
<span className="text-gray-500">Total {formatPrice(invoice.total)} Toman</span> <span className="text-gray-500">{inv.total} {formatPrice(invoice.total)} {inv.toman}</span>
<span className="font-semibold text-gray-900">Due {formatPrice(invoice.dueAmount)} Toman</span> <span className="font-semibold text-gray-900">{inv.due} {formatPrice(invoice.dueAmount)} {inv.toman}</span>
</div> </div>
</button> </button>
))} ))}
@@ -205,7 +201,7 @@ export default function InvoicesPage() {
{!selectedInvoice ? ( {!selectedInvoice ? (
<div className="text-center py-12 text-gray-400"> <div className="text-center py-12 text-gray-400">
<FileText className="w-10 h-10 mx-auto mb-3" /> <FileText className="w-10 h-10 mx-auto mb-3" />
Select an invoice to view details {inv.selectInvoice}
</div> </div>
) : ( ) : (
<div className="space-y-5"> <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> <p className="text-sm text-gray-500">{selectedInvoice.application?.name || selectedInvoice.reason}</p>
</div> </div>
<div className="flex flex-col items-end gap-2"> <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 <button
type="button" type="button"
onClick={() => downloadPdfMutation.mutate(selectedInvoice)} 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" className="btn-secondary text-xs inline-flex items-center gap-1 disabled:opacity-50"
> >
<Download className="w-3.5 h-3.5" /> <Download className="w-3.5 h-3.5" />
Download PDF {inv.downloadPdf}
</button> </button>
</div> </div>
</div> </div>
<div className="bg-gray-50 rounded-xl p-4 space-y-2 text-sm"> <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">{inv.total}</span><span className="font-semibold">{formatPrice(selectedInvoice.total)} {inv.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">{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">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">{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">Method</span><span>{selectedInvoice.paymentMethod || '-'}</span></div> <div className="flex justify-between"><span className="text-gray-500">{inv.method}</span><span>{selectedInvoice.paymentMethod || '-'}</span></div>
</div> </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"> <div className="space-y-2">
{(selectedInvoice.lines || []).map((line) => ( {(selectedInvoice.lines || []).map((line) => (
<div key={line.id} className="border border-gray-100 rounded-xl p-3"> <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> <p className="text-sm font-medium text-gray-900">{line.label}</p>
{line.description && <p className="text-xs text-gray-500">{line.description}</p>} {line.description && <p className="text-xs text-gray-500">{line.description}</p>}
</div> </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>
</div> </div>
))} ))}
@@ -254,10 +250,12 @@ export default function InvoicesPage() {
{isPayable && ( {isPayable && (
<div className="space-y-3 border-t border-gray-100 pt-4"> <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 && ( {walletBalance < dueAmount && (
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded-lg p-2"> <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> </p>
)} )}
<button <button
@@ -267,24 +265,24 @@ export default function InvoicesPage() {
className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50" className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50"
> >
<CreditCard className="w-4 h-4" /> <CreditCard className="w-4 h-4" />
{payMutation.isPending || verifyGatewayMutation.isPending ? 'در حال پردازش...' : 'پرداخت'} {payMutation.isPending || verifyGatewayMutation.isPending ? inv.processing : inv.pay}
</button> </button>
</div> </div>
)} )}
{selectedInvoice.status === 'paid' && ( {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"> <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> </div>
)} )}
{selectedInvoice.status === 'failed' && ( {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"> <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> </div>
)} )}
{selectedInvoice.status === 'partially_paid' && ( {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"> <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>
)} )}
</div> </div>
frontend/src/i18n/dictionaries/en.ts
+62
View File
@@ -335,6 +335,68 @@ const en: Dictionary = {
hours: '{n} hours', hours: '{n} hours',
days: '{n} days', days: '{n} days',
}, },
invoices: {
status: {
draft: 'Draft',
issued: 'Unpaid',
partially_paid: 'Partially paid',
paid: 'Paid',
void: 'Void',
failed: 'Failed',
},
title: 'Invoices',
subtitle: 'Review what each payment was for and pay open invoices.',
walletBalance: 'Wallet balance',
toman: 'Toman',
filterAll: 'All',
filterUnpaid: 'Unpaid',
loadingInvoices: 'Loading invoices...',
noInvoices: 'No invoices found',
total: 'Total',
due: 'Due',
paidLabel: 'Paid',
method: 'Method',
selectInvoice: 'Select an invoice to view details',
downloadPdf: 'Download PDF',
lineItems: 'Line items',
payment: 'Payment',
walletCoversNote: 'Wallet balance covers {wallet} Toman. The remaining {rest} Toman will be paid through the gateway.',
processing: 'Processing...',
pay: 'Pay',
paidOn: 'Paid on {date}',
paymentFailed: 'Payment failed',
waitingRemaining: 'Waiting for the remaining payment.',
paymentComplete: 'Payment complete',
paymentCompleteUpdated: 'Payment complete and service updated',
gatewayFailed: 'Gateway payment failed',
invoicePaid: 'Invoice paid',
invoicePaidUpdated: 'Invoice paid and service updated',
downloadFailed: 'Failed to download invoice PDF',
adminTitle: 'Invoice Management',
adminSubtitle: 'Track all user invoices, payments, gateway refs, and wallet transactions.',
searchPlaceholder: 'Search invoice, email, or application',
allStatuses: 'All statuses',
allMethods: 'All methods',
methodWallet: 'Wallet',
methodGateway: 'Gateway',
methodMixed: 'Mixed',
colInvoice: 'Invoice',
colUser: 'User',
colStatus: 'Status',
colMethod: 'Method',
colDue: 'Due',
selectInvoiceShort: 'Select an invoice',
tracking: 'Tracking',
transactions: 'Transactions',
noTransactions: 'No linked transactions yet',
manualStatusChange: 'Manual status change',
reasonPlaceholder: 'Reason is required for audit visibility',
failedBtn: 'Failed',
voidBtn: 'Void',
statusUpdated: 'Invoice status updated',
statusUpdateFailed: 'Failed to update invoice status',
reasonRequired: 'Reason is required for manual status changes',
},
}, },
}; };
frontend/src/i18n/dictionaries/fa.ts
+62
View File
@@ -334,6 +334,68 @@ const fa = {
hours: '{n} ساعت', hours: '{n} ساعت',
days: '{n} روز', days: '{n} روز',
}, },
invoices: {
status: {
draft: 'پیش‌نویس',
issued: 'پرداخت‌نشده',
partially_paid: 'پرداخت جزئی',
paid: 'پرداخت‌شده',
void: 'باطل',
failed: 'ناموفق',
},
title: 'فاکتورها',
subtitle: 'ببین هر پرداخت بابت چه بوده و فاکتورهای باز را پرداخت کن.',
walletBalance: 'موجودی کیف‌پول',
toman: 'تومان',
filterAll: 'همه',
filterUnpaid: 'پرداخت‌نشده',
loadingInvoices: 'در حال بارگذاری فاکتورها…',
noInvoices: 'فاکتوری پیدا نشد',
total: 'مجموع',
due: 'مانده',
paidLabel: 'پرداخت‌شده',
method: 'روش',
selectInvoice: 'برای دیدن جزئیات یک فاکتور را انتخاب کن',
downloadPdf: 'دانلود PDF',
lineItems: 'اقلام',
payment: 'پرداخت',
walletCoversNote: 'موجودی کیف‌پول {wallet} تومان را پوشش می‌دهد. مابقی {rest} تومان از طریق درگاه پرداخت می‌شود.',
processing: 'در حال پردازش…',
pay: 'پرداخت',
paidOn: 'پرداخت‌شده در {date}',
paymentFailed: 'پرداخت ناموفق بود',
waitingRemaining: 'منتظر پرداخت مابقی.',
paymentComplete: 'پرداخت کامل شد',
paymentCompleteUpdated: 'پرداخت کامل شد و سرویس به‌روزرسانی شد',
gatewayFailed: 'پرداخت درگاهی ناموفق بود',
invoicePaid: 'فاکتور پرداخت شد',
invoicePaidUpdated: 'فاکتور پرداخت شد و سرویس به‌روزرسانی شد',
downloadFailed: 'دانلود PDF فاکتور ناموفق بود',
adminTitle: 'مدیریت فاکتورها',
adminSubtitle: 'پیگیری همهٔ فاکتورهای کاربران، پرداخت‌ها، ارجاع درگاه و تراکنش‌های کیف‌پول.',
searchPlaceholder: 'جستجوی فاکتور، ایمیل یا اپلیکیشن',
allStatuses: 'همهٔ وضعیت‌ها',
allMethods: 'همهٔ روش‌ها',
methodWallet: 'کیف‌پول',
methodGateway: 'درگاه',
methodMixed: 'ترکیبی',
colInvoice: 'فاکتور',
colUser: 'کاربر',
colStatus: 'وضعیت',
colMethod: 'روش',
colDue: 'مانده',
selectInvoiceShort: 'یک فاکتور را انتخاب کن',
tracking: 'کد رهگیری',
transactions: 'تراکنش‌ها',
noTransactions: 'هنوز تراکنشی متصل نشده',
manualStatusChange: 'تغییر دستی وضعیت',
reasonPlaceholder: 'برای ثبت در لاگ، ذکر دلیل الزامی است',
failedBtn: 'ناموفق',
voidBtn: 'باطل',
statusUpdated: 'وضعیت فاکتور به‌روزرسانی شد',
statusUpdateFailed: 'به‌روزرسانی وضعیت فاکتور ناموفق بود',
reasonRequired: 'برای تغییر دستی وضعیت، ذکر دلیل الزامی است',
},
}, },
}; };
frontend/tsconfig.tsbuildinfo
+1 -1
View File
File diff suppressed because one or more lines are too long