Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: the invoice and receipt documents in the booking

Browse Source
This commit is contained in:
Nathnael
2026-07-22 08:00:38 +00:00
parent 905bf75bce
commit 16dc143e66
2 changed files with 112 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx
View File

@@ -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>
);

74
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/WarehousePaymentsSection.tsx
View File

@@ -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}