feat(invoices): show customer name/phone, align meta column, totals left, JPEG
- Invoice PDF now shows the customer's full name and a phone row (sourced from the auth store for the user page, invoice.user for admin) instead of just email. - Left-align all meta values into a single clean column (unicode-bidi:plaintext so Persian names stay RTL while phone/dates read LTR). - Move the totals box to the left side of the page. - Rasterize as JPEG (q0.9) instead of PNG to keep the file small (~130KB). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ import api from '@/lib/api';
|
||||
import { useT, useLocale } from '@/i18n/I18nProvider';
|
||||
import { translateInvoiceLabel, translateInvoiceDescription, translateInvoiceReason } from '@/lib/invoice-labels';
|
||||
import { downloadInvoicePdf, buildInvoicePdfData } from '@/lib/invoice-pdf';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import type { Invoice, InvoiceStatus } from '@/types';
|
||||
|
||||
const statusClasses: Record<InvoiceStatus, string> = {
|
||||
@@ -29,6 +30,7 @@ export default function InvoicesPage() {
|
||||
const lineLabel = (label?: string) => (isFa ? translateInvoiceLabel(label) : (label ?? '-'));
|
||||
const lineDesc = (desc?: string) => (isFa ? translateInvoiceDescription(desc) : (desc ?? ''));
|
||||
const reasonLabel = (reason?: string) => (isFa ? translateInvoiceReason(reason) : (reason ?? '-'));
|
||||
const authUser = useAuthStore((s) => s.user);
|
||||
const queryClient = useQueryClient();
|
||||
const searchParams = useSearchParams();
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'unpaid' | InvoiceStatus>('all');
|
||||
@@ -116,7 +118,14 @@ export default function InvoicesPage() {
|
||||
|
||||
const downloadPdfMutation = useMutation({
|
||||
mutationFn: (invoice: Invoice) =>
|
||||
downloadInvoicePdf(buildInvoicePdfData(invoice, { inv, appName: t.common.appName, locale })),
|
||||
downloadInvoicePdf(
|
||||
buildInvoicePdfData(invoice, {
|
||||
inv,
|
||||
appName: t.common.appName,
|
||||
locale,
|
||||
customer: invoice.user ?? authUser ?? undefined,
|
||||
}),
|
||||
),
|
||||
onError: () => notify.error(inv.downloadFailed),
|
||||
});
|
||||
const dueAmount = Number(selectedInvoice?.dueAmount || 0);
|
||||
|
||||
Reference in New Issue
Block a user