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:
keyhan
2026-06-20 00:41:17 +03:30
parent bc224a2291
commit 7438b44120
4 changed files with 41 additions and 16 deletions
@@ -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);