fix issue

apps/edr-freight-web/portal/src/pages/billing/InvoiceDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import {
@@ -65,11 +65,6 @@ function MetaItem({ label, value }: { label: string; value: string }) {
 export default function InvoiceDetailPage() {
   const { id = "" } = useParams();
   const navigate = useNavigate();
-  const [paymentMethod, setPaymentMethod] = useState<"TELEBIRR" | "WAAFI">(
-    "TELEBIRR",
-  );
-  console.log(paymentMethod)
-
   const {
     data: invoice,
     isLoading,
@@ -93,11 +88,6 @@ export default function InvoiceDetailPage() {
     },
   });
 
-  useEffect(() => {
-    if (!invoice) return;
-    setPaymentMethod(invoice.currency === "USD" ? "WAAFI" : "TELEBIRR");
-  }, [invoice?.currency]);
-
   if (isLoading) {
     return (
       <Center py={80}>
@@ -128,7 +118,9 @@ export default function InvoiceDetailPage() {
 
   const payable = isPayable(invoice.status);
   const lines = invoice.lines ?? [];
-  // const amountDue = Number(invoice.balanceAmount ?? invoice.totalAmount);
+  // The backend charges the outstanding balance, not the invoice total — a
+  // partially-paid invoice must show the remaining amount on the pay button.
+  const amountDue = Number(invoice.balanceAmount ?? invoice.totalAmount);
 
   const handlePay = () => {
     setPayModalOpen(true);
@@ -263,8 +255,7 @@ export default function InvoiceDetailPage() {
                   root: { fontWeight: 600, height: 42, paddingInline: 18 },
                 }}
               >
-                Pay{" "}
-                {formatCurrency(Number(invoice.totalAmount), invoice.currency)}
+                Pay {formatCurrency(amountDue, invoice.currency)}
               </Button>
             )}
           </Group>
@@ -390,10 +381,7 @@ export default function InvoiceDetailPage() {
               payMutation.reset();
             }
           }}
-          amountLabel={formatCurrency(
-            Number(invoice.totalAmount),
-            invoice.currency,
-          )}
+          amountLabel={formatCurrency(amountDue, invoice.currency)}
           currency={invoice.currency}
           processing={payMutation.isPending}
           error={

apps/edr-freight-web/portal/src/pages/bookings/payments/PayClearanceFeeButton.tsx

@@ -120,7 +120,9 @@ export function PayClearanceFeeButton({
         onClose={pay.close}
         amountLabel={
           pay.invoice
-            ? `${Number(pay.invoice.totalAmount).toLocaleString()} ${pay.invoice.currency}`
+            ? `${Number(
+                pay.invoice.balanceAmount ?? pay.invoice.totalAmount,
+              ).toLocaleString()} ${pay.invoice.currency}`
             : undefined
         }
         currency={pay.invoice?.currency ?? currency}