feat(billing): filter, show and export invoice payment method

The settled method is split across two stores: a gateway settlement records
the real provider on the linked freight.payments row (cbe-bill, telebirr)
while the invoice's own payments ledger only writes a flat "GATEWAY"; a
manual settlement has no payments row at all and the ledger is the only
source (BANK_TRANSFER, OFFLINE, or whatever PayInvoiceDto.method carried).

invoicePaymentMethodExpr folds both into one UPPER_SNAKE vocabulary —
provider first, newest ledger entry as the fallback — and the list filter,
the export field and the export filter all use that same expression, so the
screen and the file can never disagree.

The paymentMethods param is deliberately not validated against a fixed list:
the manual pay endpoint takes a free-form method, so an IsIn would silently
drop real values.

apps/edr-freight-web/backoffice/src/pages/invoices/InvoiceDetailPage.tsx

@@ -15,7 +15,14 @@ import {
   Text,
 } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
-import { ArrowLeft, Building2, Download, FileText, Printer } from "lucide-react";
+import {
+  ArrowLeft,
+  Building2,
+  CreditCard,
+  Download,
+  FileText,
+  Printer,
+} from "lucide-react";
 import { useAuth } from "@/auth/useAuth";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { EimsFilingCard } from "@/components/invoices/EimsFilingCard";
@@ -34,7 +41,11 @@ import { LinkedEntityCard, type FieldRowProps } from "@/components/detail";
 import { useBookingDetail } from "@/hooks/bookings/useBookings";
 import { api } from "@/services/api";
 import { invoicesService } from "@/services/invoices.service";
-import type { Invoice } from "@/types/invoice";
+import {
+  invoicePaymentMethod,
+  paymentMethodLabel,
+  type Invoice,
+} from "@/types/invoice";
 
 function openPdfBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
@@ -124,6 +135,45 @@ function RecipientCard({ invoice }: { invoice: Invoice }) {
   );
 }
 
+/**
+ * How the invoice was settled. The method and the provider's transaction
+ * reference live on the linked gateway payment for an online settlement, and in
+ * the invoice's own `payments` ledger for a manual one — this reads whichever
+ * exists, same precedence the API filters by. Not rendered at all until
+ * something has been settled.
+ */
+function PaymentCard({ invoice }: { invoice: Invoice }) {
+  const method = invoicePaymentMethod(invoice);
+  const lastEntry = invoice.payments?.at(-1);
+  if (!method && !lastEntry) return null;
+
+  // The gateway's own reference first; `merchantOrderId` is our order id, which
+  // is still the number a provider support desk can trace. The ledger reference
+  // is what a manual settlement carries (bank slip / transfer reference).
+  const transactionRef =
+    invoice.payment?.transactionId ??
+    invoice.payment?.merchantOrderId ??
+    lastEntry?.reference ??
+    undefined;
+
+  return (
+    <LinkedEntityCard
+      icon={CreditCard}
+      title="Payment"
+      name={method ? paymentMethodLabel(method) : "Settled"}
+      rows={[
+        { label: "Transaction ref", value: transactionRef },
+        { label: "Provider status", value: invoice.payment?.status },
+        {
+          label: "Paid",
+          value: invoice.paidAt ? formatDate(invoice.paidAt) : undefined,
+        },
+      ]}
+      emptyMessage="No provider reference recorded for this settlement."
+    />
+  );
+}
+
 /** What the invoice was raised for — a booking's route/wagons when the
  *  source is a booking; otherwise just the source type and its raw id
  *  (warehouse/demurrage/first-mile/last-mile ids don't link anywhere). */
@@ -393,6 +443,7 @@ export default function InvoiceDetailPage() {
         <Grid.Col span={{ base: 12, lg: 4 }}>
           <Stack gap="lg">
             <RecipientCard invoice={invoice} />
+            <PaymentCard invoice={invoice} />
             <SourceCard invoice={invoice} />
           </Stack>
         </Grid.Col>

apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx

@@ -18,7 +18,13 @@ import CreditInvoiceActions from "@/components/shipping-lines/CreditInvoiceActio
 import { ExportButton } from "@/components/export/ExportButton";
 import { useExchangeSettingsQuery } from "@/hooks/useExchangeSettings";
 import { api } from "@/services/api";
-import type { Invoice, InvoiceListFilter } from "@/types/invoice";
+import {
+  PAYMENT_METHOD_OPTIONS,
+  invoicePaymentMethod,
+  paymentMethodLabel,
+  type Invoice,
+  type InvoiceListFilter,
+} from "@/types/invoice";
 import { DataTable, DataTableFooter, type ColumnDef } from "@edr/ui-common";
 
 const STATUS_OPTIONS = Object.values(Freight.InvoiceStatus).map((value) => ({
@@ -74,6 +80,12 @@ const INVOICE_FILTER_DEFS: FilterDef[] = [
     toParams: (v) =>
       v.v[0] === "overdue" ? { overdue: "true" } : { hasBalance: "true" },
   },
+  {
+    key: "paymentMethods",
+    label: "Payment method",
+    type: "enum",
+    options: PAYMENT_METHOD_OPTIONS,
+  },
   {
     key: "issued",
     label: "Issued",
@@ -274,6 +286,22 @@ export default function InvoicesPanel() {
           </Text>
         ),
       },
+      {
+        id: "paymentMethod",
+        header: "Method",
+        cell: ({ row }) => {
+          const method = invoicePaymentMethod(row.original);
+          return method ? (
+            <Badge size="sm" variant="light" color="gray">
+              {paymentMethodLabel(method)}
+            </Badge>
+          ) : (
+            <Text size="sm" c="dimmed">
+              —
+            </Text>
+          );
+        },
+      },
       {
         id: "dueAt",
         header: "Due",
@@ -361,7 +389,7 @@ export default function InvoicesPanel() {
           </Box>
 
           <Box style={{ overflowX: "auto" }} w="100%">
-            <Box miw={920}>
+            <Box miw={1040}>
               <DataTable
                 columns={columns}
                 data={rows}

apps/edr-freight-web/backoffice/src/types/invoice.ts

@@ -16,10 +16,40 @@ export interface InvoiceSourceRef {
   shippingLineName: string | null;
 }
 
+/** One recorded settlement from the invoice's own `payments` jsonb ledger. */
+export interface InvoicePaymentEntry {
+  amount: number;
+  /** "GATEWAY" for an online settlement, else the manual method ("BANK_TRANSFER", …). */
+  method?: string | null;
+  reference?: string | null;
+  paidAt: string;
+}
+
+/**
+ * The gateway payment intent that settled the invoice, joined on `paymentId`.
+ * Absent on manually-settled invoices — those carry their method and reference
+ * in the `payments` ledger instead.
+ */
+export interface InvoiceGatewayPayment {
+  id: string;
+  /** Provider slug as the gateway stores it, lowercase-hyphen: "cbe-bill", "telebirr". */
+  method: string;
+  status: string;
+  /** The provider's own transaction reference. Null until the provider returns one. */
+  transactionId?: string | null;
+  merchantOrderId?: string | null;
+  paidAt?: string | null;
+}
+
 /** Mirrors backend `Invoice` (the shared `Freight.IInvoice` omits a couple of raw entity columns). */
 export interface Invoice extends Freight.IInvoice {
   subtotalAmount: number;
   taxAmount: number;
+  /** Set once fully settled. */
+  paidAt?: string | null;
+  /** Settlement ledger, newest last. */
+  payments?: InvoicePaymentEntry[];
+  payment?: InvoiceGatewayPayment | null;
   /** Present on list reads (`findAllPaginated`), absent on a single-invoice fetch. */
   sourceRef?: InvoiceSourceRef | null;
 }
@@ -42,6 +72,8 @@ export interface InvoiceListFilter {
   sources?: string;
   /** CSV of EIMS filing states. */
   eimsStatuses?: string;
+  /** CSV of normalised UPPER_SNAKE payment methods (see `PAYMENT_METHOD_OPTIONS`). */
+  paymentMethods?: string;
   search?: string;
   currency?: "USD" | "ETB";
   /** ISO instants — inclusive bounds on `issuedAt` / `dueAt`. */
@@ -90,3 +122,47 @@ export interface PaginatedOfflineUsdInvoices {
 
 /** Total collected (`paidAmount`) across every filtered invoice, keyed by currency. */
 export type InvoiceCollectedSummary = Record<string, number>;
+
+/**
+ * The payment methods the invoice list filters by. Normalised UPPER_SNAKE, the
+ * one vocabulary the API's `invoicePaymentMethodExpr` folds both sources into:
+ * the gateway's own provider slugs (`cbe-bill` → CBE_BILL) and the flat labels
+ * a manual settlement writes to the ledger.
+ *
+ * Not exhaustive — the manual pay endpoint takes a free-form method — so treat
+ * an unknown value as displayable, never as invalid.
+ */
+export const PAYMENT_METHOD_OPTIONS: { value: string; label: string }[] = [
+  { value: "TELEBIRR", label: "Telebirr" },
+  { value: "CBE_BIRR", label: "CBE Birr" },
+  { value: "CBE_BILL", label: "CBE Bill" },
+  { value: "EBIRR", label: "E-Birr" },
+  { value: "WAAFI", label: "Waafi" },
+  { value: "CARD", label: "Card" },
+  { value: "DMONEY", label: "D-Money" },
+  { value: "CAC_BANK", label: "CAC Bank" },
+  { value: "BANK_TRANSFER", label: "Bank transfer" },
+  { value: "OFFLINE", label: "Offline" },
+  { value: "GATEWAY", label: "Gateway" },
+];
+
+const PAYMENT_METHOD_LABELS = new Map(
+  PAYMENT_METHOD_OPTIONS.map((o) => [o.value, o.label]),
+);
+
+/** Normalise a raw method from either source to the vocabulary above. */
+export const normalizePaymentMethod = (raw?: string | null): string | null =>
+  raw ? raw.toUpperCase().replace(/-/g, "_") : null;
+
+/**
+ * An invoice's settled method, resolved the same way the API does: the gateway
+ * provider first, the newest ledger entry as the fallback. Null while unpaid.
+ */
+export function invoicePaymentMethod(invoice: Invoice): string | null {
+  const ledger = invoice.payments?.at(-1)?.method;
+  return normalizePaymentMethod(invoice.payment?.method ?? ledger);
+}
+
+/** Human label for a method value; unknown values are shown as-is. */
+export const paymentMethodLabel = (method: string): string =>
+  PAYMENT_METHOD_LABELS.get(method) ?? method;