From 16dc143e66ea46530b2aa4efd6257734509fbf73 Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Wed, 22 Jul 2026 08:00:38 +0000
Subject: [PATCH] fix: the invoice and receipt documents in the booking

---
 .../components/BookingPaymentPanel.tsx        | 99 +++++++++++--------
 .../components/WarehousePaymentsSection.tsx   | 74 ++++++++++----
 2 files changed, 112 insertions(+), 61 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx
index 81f727b29..1cb46d156 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx
@@ -211,10 +211,6 @@ export function BookingPaymentPanel({
     queryKey: ["booking-invoices", booking.id],
     queryFn: () => invoicesService.listForSource("booking", booking.id),
   });
-  // The invoice worth a prominent "Download" — the first issued one, else any.
-  const primary =
-    invoices.find((inv) => inv.status !== "DRAFT") ?? invoices[0];
-  const primaryPaid = primary ? Number(primary.paidAmount) > 0 : false;
 
   const downloadInvoice = async (inv: PortalInvoice) => {
     try {
@@ -380,50 +376,67 @@ export function BookingPaymentPanel({
                 </Box>
                 <Group gap={8} wrap="nowrap">
                   <InvoiceStatusBadge status={inv.status} />
-                  <ActionIcon
-                    variant="subtle"
-                    color="gray"
-                    aria-label="Download invoice"
-                    onClick={() => downloadInvoice(inv)}
-                  >
-                    <Download size={16} />
-                  </ActionIcon>
+                  {invoices.length > 1 && (
+                    <>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label="Download invoice"
+                        onClick={() => downloadInvoice(inv)}
+                      >
+                        <Download size={16} />
+                      </ActionIcon>
+                      {Number(inv.paidAmount) > 0 && (
+                        <ActionIcon
+                          variant="subtle"
+                          color="gray"
+                          aria-label="Download receipt"
+                          onClick={() => downloadReceipt(inv)}
+                        >
+                          <Receipt size={16} />
+                        </ActionIcon>
+                      )}
+                    </>
+                  )}
                 </Group>
               </Group>
             ))}
           </Stack>
-        </>
-      )}
 
-      {primary && (
-        <Button
-          fullWidth
-          mt={16}
-          variant="default"
-          radius={10}
-          leftSection={<FileText size={17} color="#475569" />}
-          onClick={() => downloadInvoice(primary)}
-          styles={{
-            root: { height: 46 },
-            label: { fontSize: 13.5, fontWeight: 700, color: "#10202F" },
-          }}
-        >
-          Download invoice
-        </Button>
-      )}
-      {primary && primaryPaid && (
-        <Button
-          fullWidth
-          mt={8}
-          variant="subtle"
-          color="gray"
-          radius={10}
-          leftSection={<Receipt size={17} />}
-          onClick={() => downloadReceipt(primary)}
-          styles={{ root: { height: 42 }, label: { fontSize: 13, fontWeight: 700 } }}
-        >
-          Download receipt
-        </Button>
+          {/* Single invoice: a prominent download instead of a lone row icon. */}
+          {invoices.length === 1 && (
+            <>
+              <Button
+                fullWidth
+                mt={16}
+                variant="default"
+                radius={10}
+                leftSection={<FileText size={17} color="#475569" />}
+                onClick={() => downloadInvoice(invoices[0])}
+                styles={{
+                  root: { height: 46 },
+                  label: { fontSize: 13.5, fontWeight: 700, color: "#10202F" },
+                }}
+              >
+                Download invoice
+              </Button>
+              {Number(invoices[0].paidAmount) > 0 && (
+                <Button
+                  fullWidth
+                  mt={8}
+                  variant="subtle"
+                  color="gray"
+                  radius={10}
+                  leftSection={<Receipt size={17} />}
+                  onClick={() => downloadReceipt(invoices[0])}
+                  styles={{ root: { height: 42 }, label: { fontSize: 13, fontWeight: 700 } }}
+                >
+                  Download receipt
+                </Button>
+              )}
+            </>
+          )}
+        </>
       )}
     </SectionCard>
   );
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/WarehousePaymentsSection.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/WarehousePaymentsSection.tsx
index acd4dbb25..927f1dbfb 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/WarehousePaymentsSection.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/WarehousePaymentsSection.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Box, Button, Group, Stack, Text } from "@mantine/core";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { CreditCard, Download, Receipt } from "lucide-react";
+import { CreditCard, Download, FileText, Receipt } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 
@@ -184,23 +184,27 @@ export function WarehousePaymentsSection({ bookingId }: { bookingId: string }) {
                     Pay
                   </Button>
                 )}
-                <ActionIcon
-                  variant="subtle"
-                  color="gray"
-                  aria-label="Download invoice"
-                  onClick={() => download(inv)}
-                >
-                  <Download size={16} />
-                </ActionIcon>
-                {Number(inv.paidAmount) > 0 && (
-                  <ActionIcon
-                    variant="subtle"
-                    color="gray"
-                    aria-label="Download receipt"
-                    onClick={() => downloadReceipt(inv)}
-                  >
-                    <Receipt size={16} />
-                  </ActionIcon>
+                {invoices.length > 1 && (
+                  <>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Download invoice"
+                      onClick={() => download(inv)}
+                    >
+                      <Download size={16} />
+                    </ActionIcon>
+                    {Number(inv.paidAmount) > 0 && (
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label="Download receipt"
+                        onClick={() => downloadReceipt(inv)}
+                      >
+                        <Receipt size={16} />
+                      </ActionIcon>
+                    )}
+                  </>
                 )}
               </Group>
             </Group>
@@ -208,6 +212,40 @@ export function WarehousePaymentsSection({ bookingId }: { bookingId: string }) {
         })}
       </Stack>
 
+      {/* Single invoice: a prominent download instead of a lone row icon. */}
+      {invoices.length === 1 && (
+        <>
+          <Button
+            fullWidth
+            mt="md"
+            variant="default"
+            radius={10}
+            leftSection={<FileText size={17} color="#475569" />}
+            onClick={() => download(invoices[0])}
+            styles={{
+              root: { height: 46 },
+              label: { fontSize: 13.5, fontWeight: 700, color: "#10202F" },
+            }}
+          >
+            Download invoice
+          </Button>
+          {Number(invoices[0].paidAmount) > 0 && (
+            <Button
+              fullWidth
+              mt={8}
+              variant="subtle"
+              color="gray"
+              radius={10}
+              leftSection={<Receipt size={17} />}
+              onClick={() => downloadReceipt(invoices[0])}
+              styles={{ root: { height: 42 }, label: { fontSize: 13, fontWeight: 700 } }}
+            >
+              Download receipt
+            </Button>
+          )}
+        </>
+      )}
+
       <PaymentMethodModal
         opened={payInvoice !== null}
         onClose={closePayModal}