style: inter module integration

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

@@ -1,44 +1,16 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  Building2,
-  FileCheck,
-  Mail,
-  MapPin,
-  Phone,
-  User,
-} from "lucide-react";
-import { Group, Stack, Text, Divider } from "@mantine/core";
+import { Building2, FileCheck, Mail, MapPin, Phone, User } from "lucide-react";
+import { Text } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
+import { LinkedEntityCard } from "@/components/detail";
+import type { FieldRowProps } from "@/components/detail";
 import { SectionCard } from "./SectionCard";
 
-interface InfoRowProps {
-  icon: LucideIcon;
-  label: string;
-  value?: string | null;
-}
-
-function InfoRow({ icon: Icon, label, value }: InfoRowProps) {
-  return (
-    <Group justify="space-between" wrap="nowrap" py={6} gap="md">
-      <Group gap="xs" wrap="nowrap">
-        <Icon size={15} color="var(--mantine-color-gray-5)" />
-        <Text size="sm" c="dimmed">
-          {label}
-        </Text>
-      </Group>
-      <Text size="sm" fw={600} ta="right" style={{ minWidth: 0 }} truncate>
-        {value || "—"}
-      </Text>
-    </Group>
-  );
-}
-
 export interface BookingCompanyCardProps {
   booking: BookingDetail;
 }
 
-/** Customer (company) information for the booking. */
+/** Customer (company) quick info for the booking, linking to its detail page. */
 export function BookingCompanyCard({ booking }: BookingCompanyCardProps) {
   const company = booking.company;
 
@@ -46,11 +18,9 @@ export function BookingCompanyCard({ booking }: BookingCompanyCardProps) {
   if (!company && booking.isGovernment) {
     return (
       <SectionCard icon={Building2} title="Customer" accent="blue">
-        <InfoRow
-          icon={Building2}
-          label="Government"
-          value={booking.governmentInstitution}
-        />
+        <Text size="sm" fw={600}>
+          {booking.governmentInstitution ?? "Government"}
+        </Text>
       </SectionCard>
     );
   }
@@ -67,36 +37,24 @@ export function BookingCompanyCard({ booking }: BookingCompanyCardProps) {
 
   const companyName = company.companyName ?? company.name ?? company.label;
 
-  const rows: InfoRowProps[] = [
+  const rows: FieldRowProps[] = [
     { icon: FileCheck, label: "TIN", value: company.tin },
     { icon: Mail, label: "Email", value: company.email },
     { icon: Phone, label: "Phone", value: company.phone },
     { icon: MapPin, label: "Address", value: company.address },
     { icon: User, label: "Contact person", value: company.contactPersonName },
     { icon: Phone, label: "Contact phone", value: company.contactPersonPhone },
-  ].filter((r) => r.value);
+  ];
 
   return (
-    <SectionCard
+    <LinkedEntityCard
       icon={Building2}
       title="Customer"
-      subtitle={companyName}
+      name={companyName ?? "Unnamed company"}
+      to={company.id ? `/dashboard/customers/${company.id}` : null}
       accent="blue"
-    >
-      <Stack gap={0}>
-        {rows.length === 0 ? (
-          <Text size="sm" c="dimmed">
-            No additional company details available.
-          </Text>
-        ) : (
-          rows.map((row, index) => (
-            <div key={row.label}>
-              {index > 0 && <Divider color="var(--mantine-color-gray-2)" />}
-              <InfoRow {...row} />
-            </div>
-          ))
-        )}
-      </Stack>
-    </SectionCard>
+      rows={rows}
+      emptyMessage="No additional company details available."
+    />
   );
 }

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

@@ -0,0 +1,49 @@
+import { Anchor as AnchorIcon } from "lucide-react";
+import { Code } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+import { LinkedEntityCard } from "@/components/detail";
+import type { FieldRowProps } from "@/components/detail";
+
+export interface BookingContractCardProps {
+  booking: BookingDetail;
+}
+
+/** Parent contract quick info for the booking, linking to its detail page. */
+export function BookingContractCard({ booking }: BookingContractCardProps) {
+  if (!booking.contractId || !booking.contractReference) return null;
+
+  const rows: FieldRowProps[] = [
+    {
+      label: "Kind",
+      value: booking.contractKind === "GENERAL" ? "General" : "One-time",
+    },
+  ];
+
+  return (
+    <LinkedEntityCard
+      icon={AnchorIcon}
+      title="Contract"
+      name={booking.contractReference}
+      to={`/dashboard/contract-requests/${booking.contractId}`}
+      accent="teal"
+      rows={rows}
+      footer={
+        booking.contractSummary ? (
+          <Code
+            block
+            mt={4}
+            style={{
+              maxHeight: 220,
+              overflow: "auto",
+              whiteSpace: "pre-wrap",
+              background: "var(--mantine-color-gray-0)",
+            }}
+          >
+            {booking.contractSummary}
+          </Code>
+        ) : undefined
+      }
+    />
+  );
+}

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

@@ -1,27 +0,0 @@
-import { Anchor } from "lucide-react";
-import { Code } from "@mantine/core";
-
-import { SectionCard } from "./SectionCard";
-
-export interface BookingContractSummaryCardProps {
-  summary: string;
-}
-
-/** Generated contract terms, shown verbatim. */
-export function BookingContractSummaryCard({ summary }: BookingContractSummaryCardProps) {
-  return (
-    <SectionCard icon={Anchor} title="Contract summary" accent="teal">
-      <Code
-        block
-        style={{
-          maxHeight: 256,
-          overflow: "auto",
-          whiteSpace: "pre-wrap",
-          background: "var(--mantine-color-gray-0)",
-        }}
-      >
-        {summary}
-      </Code>
-    </SectionCard>
-  );
-}

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

@@ -1,5 +1,6 @@
+import type { ReactNode } from "react";
 import { Truck } from "lucide-react";
-import { SimpleGrid } from "@mantine/core";
+import { SimpleGrid, Stack } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
 
@@ -8,24 +9,40 @@ import { MetricTile } from "./MetricTile";
 
 export interface BookingMileServicesCardProps {
   booking: BookingDetail;
+  /** Export handover-mode control — how the cargo reaches the train. Lives
+   * here because it's the other "how does the cargo physically travel" fact;
+   * shown even when no mile address is set, since EXPORT bookings still need
+   * the choice made. */
+  handoverSection?: ReactNode;
 }
 
-/** First / last mile addresses. Renders nothing when neither is present. */
-export function BookingMileServicesCard({ booking }: BookingMileServicesCardProps) {
-  if (!booking.firstMilePickupAddress && !booking.lastMileDeliveryAddress) {
+/** First / last mile addresses, plus the export handover control. Renders
+ * nothing when none of the three are present. */
+export function BookingMileServicesCard({
+  booking,
+  handoverSection,
+}: BookingMileServicesCardProps) {
+  const hasAddresses =
+    Boolean(booking.firstMilePickupAddress) || Boolean(booking.lastMileDeliveryAddress);
+  if (!hasAddresses && !handoverSection) {
     return null;
   }
 
   return (
     <SectionCard icon={Truck} title="Mile services" accent="grape">
-      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
-        {booking.firstMilePickupAddress && (
-          <MetricTile label="First mile pickup" value={booking.firstMilePickupAddress} />
+      <Stack gap="md">
+        {hasAddresses && (
+          <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
+            {booking.firstMilePickupAddress && (
+              <MetricTile label="First mile pickup" value={booking.firstMilePickupAddress} />
+            )}
+            {booking.lastMileDeliveryAddress && (
+              <MetricTile label="Last mile delivery" value={booking.lastMileDeliveryAddress} />
+            )}
+          </SimpleGrid>
         )}
-        {booking.lastMileDeliveryAddress && (
-          <MetricTile label="Last mile delivery" value={booking.lastMileDeliveryAddress} />
-        )}
-      </SimpleGrid>
+        {handoverSection}
+      </Stack>
     </SectionCard>
   );
 }

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

@@ -1,258 +0,0 @@
-import type { ReactNode } from "react";
-import {
-  ArrowLeft,
-  Building2,
-  Calendar,
-  Clock,
-  Container as ContainerIcon,
-  Flame,
-  RefreshCw,
-  Wallet,
-  Weight,
-} from "lucide-react";
-import {
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@mantine/core";
-import type { LucideIcon } from "lucide-react";
-
-import type { BookingDetail } from "@/types/booking";
-import { cargoTonsAndItems } from "@/utils/cargoWeight";
-import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
-import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
-import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
-import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
-import { NextStepBanner } from "@/components/bookings/NextStepBanner";
-
-import { formatDate } from "./booking-detail.styles";
-
-export interface BookingRequestHeroProps {
-  booking: BookingDetail;
-  customerLabel: string;
-  onBack: () => void;
-  onRefresh: () => void;
-  isFetching?: boolean;
-}
-
-/** Top hero for the request detail page: identity, status, next step, key figures. */
-export function BookingRequestHero({
-  booking,
-  customerLabel,
-  onBack,
-  onRefresh,
-  isFetching,
-}: BookingRequestHeroProps) {
-  const amount = Number(booking.totalAmount);
-  const containers = booking.bookingContainers ?? [];
-  const containerCount = containers.reduce(
-    (sum, c) => sum + Number(c.quantity ?? 0),
-    0,
-  );
-  const { tons: weight, items: itemCount } = cargoTonsAndItems(booking);
-
-  return (
-    <Paper
-      radius="xl"
-      p="xl"
-      style={{ position: "relative", overflow: "hidden" }}
-    >
-      <Stack gap="lg" style={{ position: "relative" }}>
-        <Group justify="space-between" align="flex-start" wrap="wrap">
-          <Button
-            variant="default"
-            size="compact-sm"
-            radius="lg"
-            leftSection={<ArrowLeft size={16} />}
-            onClick={onBack}
-          >
-            Back to list
-          </Button>
-          <Button
-            variant="light"
-            color="edr-green"
-            size="compact-sm"
-            radius="lg"
-            leftSection={<RefreshCw size={15} />}
-            loading={isFetching}
-            onClick={onRefresh}
-          >
-            Refresh
-          </Button>
-        </Group>
-
-        <Group justify="space-between" align="flex-start" wrap="wrap" gap="lg">
-          <Stack gap="sm" style={{ flex: 1, minWidth: 0 }}>
-            <Text
-              size="xs"
-              fw={700}
-              tt="uppercase"
-              style={{ letterSpacing: 1, color: "#B26C09" }}
-            >
-              Booking reference
-            </Text>
-            <Group gap="sm" align="center" wrap="wrap">
-              <Stack gap={2} miw={0}>
-                <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
-                  {booking.reference}
-                </Title>
-                <ContractReferenceLink
-                  contractId={booking.contractId}
-                  contractReference={booking.contractReference}
-                />
-              </Stack>
-              <BookingStatusBadge status={booking.status} />
-              <BookingPriorityBadge score={booking.priorityScore} />
-              {booking.schedulingStatus ? (
-                <SchedulingStatusBadge status={booking.schedulingStatus} />
-              ) : null}
-            </Group>
-
-            {booking.holdExpiresAt && booking.schedulingStatus === "HOLDING" ? (
-              <Text size="xs" c="orange.7">
-                Hold expires {new Date(booking.holdExpiresAt).toLocaleString()}
-              </Text>
-            ) : null}
-
-            <Group gap="lg" mt={4}>
-              <MetaItem icon={Building2} text={customerLabel} strong />
-              <MetaItem
-                icon={Calendar}
-                text={`Scheduled ${booking.scheduledDate}`}
-              />
-              <MetaItem
-                icon={Clock}
-                text={`Created ${formatDate(booking.createdAt)}`}
-              />
-            </Group>
-          </Stack>
-        </Group>
-
-        {booking.nextStep ? (
-          <Paper
-            radius="lg"
-            p={4}
-            maw={640}
-            style={{
-              background: "var(--mantine-color-gray-0)",
-              border: "1px solid var(--mantine-color-gray-2)",
-            }}
-          >
-            <NextStepBanner nextStep={booking.nextStep} />
-          </Paper>
-        ) : null}
-
-        <Group grow gap="md" align="stretch" wrap="wrap">
-          <HeroTile
-            icon={Wallet}
-            label="Total value"
-            value={`${booking.paymentCurrency} ${amount.toLocaleString(
-              undefined,
-              {
-                minimumFractionDigits: 2,
-              },
-            )}`}
-            hint={booking.paymentStatus}
-            accent="edr-green"
-          />
-          <HeroTile
-            icon={Weight}
-            label="Cargo weight"
-            value={`${weight} T`}
-            hint={itemCount != null ? `${itemCount} items` : "VGM total"}
-            accent="blue"
-          />
-          <HeroTile
-            icon={ContainerIcon}
-            label="Containers"
-            value={containerCount || "—"}
-            hint={`${containers.length} line${containers.length === 1 ? "" : "s"}`}
-            accent="teal"
-          />
-          <HeroTile
-            icon={Flame}
-            label="Priority score"
-            value={booking.priorityScore ?? 0}
-            hint={booking.tradeDirection}
-            accent="orange"
-          />
-        </Group>
-      </Stack>
-    </Paper>
-  );
-}
-
-function MetaItem({
-  icon: Icon,
-  text,
-  strong,
-}: {
-  icon: LucideIcon;
-  text: ReactNode;
-  strong?: boolean;
-}) {
-  return (
-    <Group gap={6} wrap="nowrap">
-      <Icon size={14} color="var(--mantine-color-gray-5)" />
-      <Text size="sm" fw={strong ? 600 : 400} c={strong ? "dark" : "dimmed"}>
-        {text}
-      </Text>
-    </Group>
-  );
-}
-
-function HeroTile({
-  icon: Icon,
-  label,
-  value,
-  hint,
-  accent = "edr-green",
-}: {
-  icon: LucideIcon;
-  label: string;
-  value: ReactNode;
-  hint?: ReactNode;
-  accent?: string;
-}) {
-  return (
-    <Paper
-      p="md"
-      radius="lg"
-      style={{
-        flex: "1 1 160px",
-        minWidth: 150,
-        background: "var(--mantine-color-gray-0)",
-        border: "1px solid var(--mantine-color-gray-2)",
-      }}
-    >
-      <Group gap="sm" wrap="nowrap" align="flex-start">
-        <ThemeIcon size={36} radius="md" variant="light" color={accent}>
-          <Icon size={18} />
-        </ThemeIcon>
-        <Stack gap={2} style={{ minWidth: 0 }}>
-          <Text
-            size="xs"
-            fw={600}
-            tt="uppercase"
-            c="dimmed"
-            style={{ letterSpacing: 0.4 }}
-          >
-            {label}
-          </Text>
-          <Text fw={700} size="lg" lh={1.1} style={{ whiteSpace: "nowrap" }}>
-            {value}
-          </Text>
-          {hint ? (
-            <Text size="xs" c="dimmed" truncate>
-              {hint}
-            </Text>
-          ) : null}
-        </Stack>
-      </Group>
-    </Paper>
-  );
-}

apps/edr-freight-web/backoffice/src/components/bookings/detail/index.ts

@@ -16,10 +16,9 @@ export * from "./BookingPaymentCard";
 export * from "./BookingPaymentCountdownCard";
 export * from "./BookingFactsCard";
 export * from "./BookingDocumentsCard";
-export * from "./BookingRequestHero";
 export * from "./BookingRouteServiceCard";
 export * from "./BookingMileServicesCard";
 export * from "./BookingCargoCard";
-export * from "./BookingContractSummaryCard";
+export * from "./BookingContractCard";
 export * from "./BookingCompanyCard";
 export * from "./BookingSchedulingWindowCard";