shipping line

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingCargoCard.tsx

@@ -1,5 +1,5 @@
 import { Package } from "lucide-react";
-import { SimpleGrid, Divider, Box, Table, Text } from "@mantine/core";
+import { SimpleGrid, Divider, Box, Table, Text, Badge } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
 import { cargoTonsAndItems } from "@/utils/cargoWeight";
@@ -16,6 +16,19 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
   const containers = booking.bookingContainers ?? [];
   const { tons, items } = cargoTonsAndItems(booking);
 
+  // Booking-level flags OR any container line carrying a count — the flag can
+  // lag the lines (per-line opt-ins), so either alone must light the tile.
+  const isHazardous =
+    booking.isHazardous ||
+    containers.some((c) => Number(c.hazardousQuantity ?? 0) > 0);
+  const isReefer =
+    booking.isReefer ||
+    containers.some((c) => Number(c.reeferQuantity ?? 0) > 0);
+  const showHandlingColumns = containers.some(
+    (c) =>
+      Number(c.hazardousQuantity ?? 0) > 0 || Number(c.reeferQuantity ?? 0) > 0,
+  );
+
   return (
     <SectionCard icon={Package} title="Cargo specifications" accent="orange">
       <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
@@ -27,11 +40,33 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
         {items != null && <MetricTile label="Items" value={`${items}`} />}
         <MetricTile
           label="Hazardous"
-          value={booking.isHazardous ? "Yes" : "No"}
-          highlight={booking.isHazardous}
+          value={isHazardous ? "Yes" : "No"}
+          highlight={isHazardous}
+        />
+        <MetricTile
+          label="Refrigerated"
+          value={isReefer ? "Yes" : "No"}
+          highlight={isReefer}
         />
       </SimpleGrid>
 
+      {/* Handling that changes how the yard treats the shipment is flagged
+          loudly, not buried in the grid. */}
+      {(isHazardous || isReefer) && (
+        <Box mt="sm">
+          {isHazardous && (
+            <Badge color="red" variant="filled" radius="sm" mr={8}>
+              Hazardous cargo
+            </Badge>
+          )}
+          {isReefer && (
+            <Badge color="blue" variant="filled" radius="sm">
+              Refrigerated cargo
+            </Badge>
+          )}
+        </Box>
+      )}
+
       {containers.length > 0 && (
         <>
           <Divider my="lg" color="var(--mantine-color-gray-2)" />
@@ -42,6 +77,8 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
                   <Table.Th>Container type</Table.Th>
                   <Table.Th>Qty</Table.Th>
                   <Table.Th>VGM / unit</Table.Th>
+                  {showHandlingColumns && <Table.Th>Hazardous</Table.Th>}
+                  {showHandlingColumns && <Table.Th>Reefer</Table.Th>}
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
@@ -54,6 +91,28 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
                     </Table.Td>
                     <Table.Td>{c.quantity}</Table.Td>
                     <Table.Td>{c.vgmPerUnitTons} t</Table.Td>
+                    {showHandlingColumns && (
+                      <Table.Td>
+                        {Number(c.hazardousQuantity ?? 0) > 0 ? (
+                          <Text fw={700} c="red" size="sm">
+                            {c.hazardousQuantity}
+                          </Text>
+                        ) : (
+                          "—"
+                        )}
+                      </Table.Td>
+                    )}
+                    {showHandlingColumns && (
+                      <Table.Td>
+                        {Number(c.reeferQuantity ?? 0) > 0 ? (
+                          <Text fw={700} c="blue" size="sm">
+                            {c.reeferQuantity}
+                          </Text>
+                        ) : (
+                          "—"
+                        )}
+                      </Table.Td>
+                    )}
                   </Table.Tr>
                 ))}
               </Table.Tbody>

apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx

@@ -24,6 +24,7 @@ import {
   Send,
   Settings,
   ShieldCheck,
+  HandCoins,
   Ship,
   SlidersHorizontal,
   Train,
@@ -76,6 +77,12 @@ export const buildSidebarSections = (
           icon: <Ship />,
           permission: FREIGHT_PERMS.shippingLines.view,
         },
+        {
+          label: "Shipping Line Credits",
+          href: "/dashboard/shipping-line-credits",
+          icon: <HandCoins />,
+          permission: FREIGHT_PERMS.shippingLineCredits.view,
+        },
         {
           label: "Contracts",
           href: "/dashboard/contract-requests",

apps/edr-freight-web/backoffice/src/components/shipping-lines/CreditInvoiceActions.tsx

@@ -0,0 +1,363 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+} from "@mantine/core";
+import { useMutation } from "@tanstack/react-query";
+import { Ban, Check, HandCoins, X } from "lucide-react";
+import { useState } from "react";
+
+import { useAuth } from "@/auth/useAuth";
+import { formatMoney } from "@/components/customers";
+import { useToast } from "@/hooks/use-toast";
+import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
+import { api } from "@/services/api";
+import type {
+  CreditInvoiceActionType,
+  CreditInvoicePendingAction,
+} from "@/types/shippingLineCredit";
+
+/** The slice of an invoice row the actions need — both list pages have it. */
+export interface CreditInvoiceActionTarget {
+  id: string;
+  invoiceNumber: string;
+  status: string;
+  currency: string;
+  totalAmount: string | number;
+  paidAmount: string | number;
+  balanceAmount: string | number;
+}
+
+/** Statuses an offline payment can still be recorded against. */
+const MARK_PAID_STATUSES = new Set([
+  "ISSUED",
+  "PENDING",
+  "PAYMENT_PROCESSING",
+  "PARTIALLY_PAID",
+  "OVERDUE",
+]);
+
+const ACTION_LABEL: Record<CreditInvoiceActionType, string> = {
+  MARK_PAID: "Mark paid",
+  CANCEL: "Cancel invoice",
+};
+
+export interface CreditInvoiceActionsProps {
+  invoice: CreditInvoiceActionTarget;
+  pendingAction: CreditInvoicePendingAction | null;
+}
+
+/**
+ * Two-step actions for ONE shipping-line credit invoice, embeddable in any
+ * invoice list. Gated purely by permission: the request grants raise
+ * mark-paid / cancel, the approve/reject grants decide ANY pending request —
+ * the holder's own included. Renders only the buttons the signed-in user's
+ * grants allow; the API enforces the same gates server-side.
+ */
+export default function CreditInvoiceActions({
+  invoice,
+  pendingAction,
+}: CreditInvoiceActionsProps) {
+  const { user } = useAuth();
+  const { toast } = useToast();
+
+  const canRequestPaid = hasPermission(
+    user,
+    FREIGHT_PERMS.shippingLineCredits.invoiceMarkPaid,
+  );
+  const canRequestCancel = hasPermission(
+    user,
+    FREIGHT_PERMS.shippingLineCredits.invoiceCancel,
+  );
+  const canApprove = hasPermission(
+    user,
+    FREIGHT_PERMS.shippingLineCredits.invoiceApprove,
+  );
+  const canReject = hasPermission(
+    user,
+    FREIGHT_PERMS.shippingLineCredits.invoiceReject,
+  );
+
+  const [requestAction, setRequestActionModal] =
+    useState<CreditInvoiceActionType | null>(null);
+  const [reason, setReason] = useState("");
+  const [paymentReference, setPaymentReference] = useState("");
+  const [decideApprove, setDecideApprove] = useState<boolean | null>(null);
+  const [decisionNote, setDecisionNote] = useState("");
+
+  const closeRequest = () => {
+    setRequestActionModal(null);
+    setReason("");
+    setPaymentReference("");
+  };
+  const closeDecide = () => {
+    setDecideApprove(null);
+    setDecisionNote("");
+  };
+
+  const { mutate: submitRequest, isPending: isRequesting } = useMutation(
+    api.shippingLineCredits.requestInvoiceAction.mutationOptions({
+      onSuccess: (_, variables) => {
+        closeRequest();
+        toast({
+          title: "Request submitted",
+          description: `${ACTION_LABEL[variables.action]} on ${invoice.invoiceNumber} now awaits a chief's approval.`,
+        });
+      },
+      onError: (err) =>
+        toast({
+          title: "Could not submit request",
+          description: err.message,
+          variant: "destructive",
+        }),
+    }),
+  );
+
+  const { mutate: submitDecision, isPending: isDeciding } = useMutation(
+    api.shippingLineCredits.decideInvoiceAction.mutationOptions({
+      onSuccess: (_, variables) => {
+        closeDecide();
+        toast({
+          title: variables.approve ? "Request approved" : "Request rejected",
+          description: variables.approve
+            ? pendingAction?.action === "MARK_PAID"
+              ? "The offline payment was recorded; the invoice and its credits are now paid."
+              : "The invoice was cancelled; its credits returned to the unbilled pool."
+            : "The request was rejected and nothing was changed.",
+        });
+      },
+      onError: (err) =>
+        toast({
+          title: "Could not decide request",
+          description: err.message,
+          variant: "destructive",
+        }),
+    }),
+  );
+
+  let body = null;
+  if (pendingAction) {
+    body = (
+      <Stack gap={6} py={4}>
+        <Badge variant="light" color="orange" title={pendingAction.reason}>
+          {ACTION_LABEL[pendingAction.action]} — awaiting approval
+        </Badge>
+        {canApprove || canReject ? (
+          <Group gap={6} wrap="nowrap">
+            {canApprove ? (
+              <Button
+                size="compact-xs"
+                color="edr-green"
+                leftSection={<Check size={12} />}
+                onClick={() => setDecideApprove(true)}
+              >
+                Approve
+              </Button>
+            ) : null}
+            {canReject ? (
+              <Button
+                size="compact-xs"
+                variant="outline"
+                color="red"
+                leftSection={<X size={12} />}
+                onClick={() => setDecideApprove(false)}
+              >
+                Reject
+              </Button>
+            ) : null}
+          </Group>
+        ) : null}
+      </Stack>
+    );
+  } else {
+    const showMarkPaid =
+      canRequestPaid && MARK_PAID_STATUSES.has(invoice.status);
+    const showCancel =
+      canRequestCancel &&
+      invoice.status !== "CANCELLED" &&
+      invoice.status !== "PAID" &&
+      invoice.status !== "REFUNDED" &&
+      Number(invoice.paidAmount) === 0;
+    body =
+      !showMarkPaid && !showCancel ? (
+        <Text size="sm" c="dimmed">
+          —
+        </Text>
+      ) : (
+        <Group gap={6} wrap="nowrap">
+          {showMarkPaid ? (
+            <Button
+              size="compact-xs"
+              variant="light"
+              color="edr-green"
+              leftSection={<HandCoins size={12} />}
+              onClick={() => setRequestActionModal("MARK_PAID")}
+            >
+              Mark paid
+            </Button>
+          ) : null}
+          {showCancel ? (
+            <Button
+              size="compact-xs"
+              variant="light"
+              color="red"
+              leftSection={<Ban size={12} />}
+              onClick={() => setRequestActionModal("CANCEL")}
+            >
+              Cancel
+            </Button>
+          ) : null}
+        </Group>
+      );
+  }
+
+  return (
+    <>
+      {body}
+
+      {/* Maker: raise the request. */}
+      <Modal
+        opened={requestAction !== null}
+        onClose={closeRequest}
+        title={
+          requestAction
+            ? `${ACTION_LABEL[requestAction]} — ${invoice.invoiceNumber}`
+            : ""
+        }
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            {requestAction === "MARK_PAID"
+              ? "Records a full offline settlement of the outstanding balance. Takes effect only after a chief approves."
+              : "Voids the invoice and returns its credits to the unbilled pool. Takes effect only after a chief approves."}
+          </Text>
+          {requestAction === "MARK_PAID" ? (
+            <TextInput
+              label="Payment reference"
+              description="Bank slip / transfer number, if any."
+              value={paymentReference}
+              onChange={(e) => setPaymentReference(e.currentTarget.value)}
+            />
+          ) : null}
+          <Textarea
+            label="Reason"
+            withAsterisk
+            minRows={2}
+            placeholder={
+              requestAction === "MARK_PAID"
+                ? "Paid by bank transfer, slip #…"
+                : "Raised in error / rebilling with corrections…"
+            }
+            value={reason}
+            onChange={(e) => setReason(e.currentTarget.value)}
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button
+              variant="default"
+              onClick={closeRequest}
+              disabled={isRequesting}
+            >
+              Cancel
+            </Button>
+            <Button
+              loading={isRequesting}
+              disabled={reason.trim().length < 3}
+              onClick={() =>
+                requestAction &&
+                submitRequest({
+                  invoiceId: invoice.id,
+                  action: requestAction,
+                  reason: reason.trim(),
+                  paymentReference: paymentReference.trim() || undefined,
+                })
+              }
+            >
+              Submit for approval
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* Checker: decide the request. */}
+      <Modal
+        opened={decideApprove !== null}
+        onClose={closeDecide}
+        title={
+          pendingAction
+            ? `${decideApprove ? "Approve" : "Reject"}: ${ACTION_LABEL[pendingAction.action]} — ${invoice.invoiceNumber}`
+            : ""
+        }
+        centered
+      >
+        <Stack gap="md">
+          {pendingAction ? (
+            <Stack gap={4}>
+              <Text size="sm">
+                <Text component="span" c="dimmed">
+                  Requested reason:{" "}
+                </Text>
+                {pendingAction.reason}
+              </Text>
+              {pendingAction.paymentReference ? (
+                <Text size="sm">
+                  <Text component="span" c="dimmed">
+                    Payment reference:{" "}
+                  </Text>
+                  {pendingAction.paymentReference}
+                </Text>
+              ) : null}
+            </Stack>
+          ) : null}
+          {decideApprove && pendingAction ? (
+            <Text size="sm" c="dimmed">
+              {pendingAction.action === "MARK_PAID"
+                ? `Approving records ${formatMoney(
+                    Number(invoice.balanceAmount ?? invoice.totalAmount),
+                    invoice.currency,
+                  )} as paid offline and settles the invoice's credits.`
+                : "Approving cancels the invoice and returns its credits to the unbilled pool."}
+            </Text>
+          ) : null}
+          <Textarea
+            label={decideApprove ? "Note (optional)" : "Rejection note"}
+            withAsterisk={!decideApprove}
+            minRows={2}
+            value={decisionNote}
+            onChange={(e) => setDecisionNote(e.currentTarget.value)}
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button
+              variant="default"
+              onClick={closeDecide}
+              disabled={isDeciding}
+            >
+              Back
+            </Button>
+            <Button
+              color={decideApprove ? "edr-green" : "red"}
+              loading={isDeciding}
+              disabled={!decideApprove && !decisionNote.trim()}
+              onClick={() =>
+                pendingAction &&
+                decideApprove !== null &&
+                submitDecision({
+                  approvalId: pendingAction.id,
+                  approve: decideApprove,
+                  note: decisionNote.trim() || undefined,
+                })
+              }
+            >
+              {decideApprove ? "Approve & execute" : "Reject request"}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}