Use invoice items instead of amount

frontend/src/components/PaymentDialog.tsx

@@ -51,6 +51,8 @@ export default function PaymentDialog(props: PaymentDialogProps) {
     props.onClose()
   }
 
+  const totalSats = () => props.invoice.items.reduce((sum, item) => sum + item.sats, 0)
+
   const periodLabel = () => {
     const start = new Date(props.invoice.period_start * 1000)
     const end = new Date(props.invoice.period_end * 1000)
@@ -69,9 +71,9 @@ export default function PaymentDialog(props: PaymentDialogProps) {
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="text-lg font-semibold text-gray-900">Pay Invoice</h2>
-            <Show when={props.invoice.amount}>
+            <Show when={totalSats() > 0}>
               <p class="text-2xl font-bold text-gray-900 mt-1">
-                {props.invoice.amount.toLocaleString()} <span class="text-base font-normal text-gray-500">sats</span>
+                {totalSats().toLocaleString()} <span class="text-base font-normal text-gray-500">sats</span>
               </p>
             </Show>
             <Show when={props.invoice.period_start && props.invoice.period_end}>

frontend/src/lib/api.ts

@@ -100,11 +100,18 @@ export type Tenant = {
   billing_anchor: number
 }
 
+export type InvoiceItem = {
+  id: string
+  invoice: string
+  relay: string
+  sats: number
+}
+
 export type Invoice = {
   id: string
   tenant: string
   status: string
-  amount: number
+  items: InvoiceItem[]
   created_at: number
   attempted_at: number
   error: string

frontend/src/pages/Account.tsx

@@ -133,7 +133,9 @@ export default function Account() {
                         <div class="flex items-center justify-between gap-3">
                           <div>
                             <span class="font-medium text-gray-900">
-                              {invoice.amount ? `${invoice.amount.toLocaleString()} sats` : "—"}
+                              {invoice.items.length > 0
+                                ? `${invoice.items.reduce((sum, item) => sum + item.sats, 0).toLocaleString()} sats`
+                                : "—"}
                             </span>
                             <Show when={invoice.period_start && invoice.period_end}>
                               <p class="text-xs text-gray-500 mt-0.5">{periodLabel()}</p>