feat: enhance booking management with shipping line support and cargo handling improvements

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -13,12 +13,14 @@ import {
   MoreHorizontal,
   Package,
   RefreshCw,
+  Ship,
   Truck,
   Wallet,
   Weight,
 } from "lucide-react";
 import {
   ActionIcon,
+  Badge,
   Box,
   Button,
   Center,
@@ -174,7 +176,14 @@ export default function BookingRequestDetailPage() {
   };
 
   const company = booking.company;
+  const shippingLine = booking.shippingLineCompany ?? null;
   const customerName = toBookingListRow(booking).customerLabel;
+  // What is being shipped, in words: bulk → the commodity (Wheat, Steel…);
+  // containers → the shipper's own description when given.
+  const cargoLabel =
+    booking.freightType === "BULK"
+      ? (booking.cargoType?.label ?? booking.cargoType?.name ?? null)
+      : (booking.cargoFreeText?.trim() || null);
 
   const amount = Number(booking.totalAmount);
   const containers = booking.bookingContainers ?? [];
@@ -237,10 +246,27 @@ export default function BookingRequestDetailPage() {
         }
         subtitle={
           <Group gap={6} wrap="wrap">
-            <EntityLink
-              to={company?.id ? `/dashboard/customers/${company.id}` : null}
-              label={customerName ?? "—"}
-            />
+            {shippingLine ? (
+              <Group gap={6} wrap="nowrap">
+                <Ship size={14} />
+                <Text size="sm" fw={600}>
+                  {shippingLine.name}
+                </Text>
+                <Badge size="xs" radius="sm" variant="light" color="teal">
+                  Shipping line
+                </Badge>
+              </Group>
+            ) : (
+              <EntityLink
+                to={company?.id ? `/dashboard/customers/${company.id}` : null}
+                label={customerName ?? "—"}
+              />
+            )}
+            {cargoLabel ? (
+              <Text size="sm" c="dimmed">
+                · {cargoLabel}
+              </Text>
+            ) : null}
             <Text size="sm" c="dimmed">
               · Scheduled {booking.scheduledDate}
             </Text>

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -18,6 +18,7 @@ import {
   Package,
   Plus,
   RefreshCw,
+  Ship,
   User,
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -62,6 +63,12 @@ const BOOKING_KIND_OPTIONS: { value: BookingKind; label: string }[] = [
   { value: "GENERAL_CONTRACT", label: "General booking" },
 ];
 
+/** Who booked: shipping lines own bookings via `shippingLineCompanyId`, not a customer company. */
+const CUSTOMER_KIND_OPTIONS = [
+  { value: "SHIPPING_LINE", label: "Shipping line" },
+  { value: "CUSTOMER", label: "Customer" },
+];
+
 /** Status options for the filter select — built from the shared status styles. */
 const STATUS_OPTIONS = Object.entries(BOOKING_STATUS_STYLES).map(
   ([value, { label }]) => ({ value, label }),
@@ -132,6 +139,7 @@ export default function BookingRequestsPage() {
   // split), so a deep link can never land behind "More filters" unseen.
   const bookingFilterDefs: FilterDef[] = useMemo(
     () => [
+      { key: "customerKind", label: "Booked by", type: "enum", multiple: false, options: CUSTOMER_KIND_OPTIONS },
       { key: "bookingType", label: "Kind", type: "enum", multiple: false, options: BOOKING_KIND_OPTIONS },
       { key: "statuses", label: "Status", type: "enum", options: STATUS_OPTIONS },
       {
@@ -301,8 +309,17 @@ export default function BookingRequestsPage() {
                 </Badge>
               </div>
               <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
-                <User className="size-3 shrink-0 opacity-70" />
+                {b.isShippingLine ? (
+                  <Ship className="size-3 shrink-0 opacity-70" />
+                ) : (
+                  <User className="size-3 shrink-0 opacity-70" />
+                )}
                 {b.customerLabel}
+                {b.isShippingLine ? (
+                  <Badge variant="secondary" className="h-4 shrink-0 px-1 text-[9px] font-medium">
+                    Shipping line
+                  </Badge>
+                ) : null}
               </p>
             </div>
           </div>