feat: add invoice to customer detail on backoffice

apps/edr-freight-web/backoffice/src/components/customers/badges.tsx

@@ -1,3 +1,4 @@
+import type { Freight } from "@edr/types";
 import { Badge, Button, Group, Tooltip } from "@mantine/core";
 import { useMutation } from "@tanstack/react-query";
 import { api } from "@/services/api";
@@ -88,7 +89,13 @@ export function ProfileChips({
 }) {
   if (!profiles.length) {
     return (
-      <Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
+      <Badge
+        color="gray"
+        variant="light"
+        size="sm"
+        radius="md"
+        style={badgeStyle}
+      >
         No profiles
       </Badge>
     );
@@ -118,7 +125,13 @@ export function ProfileChips({
         </Tooltip>
       ))}
       {extra > 0 ? (
-        <Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
+        <Badge
+          color="gray"
+          variant="light"
+          size="sm"
+          radius="md"
+          style={badgeStyle}
+        >
           +{extra}
         </Badge>
       ) : null}
@@ -169,7 +182,11 @@ const BOOKING_STATUS_COLOR: Record<CustomerBookingStatus, string> = {
   CANCELLED: "red",
 };
 
-export function BookingStatusBadge({ status }: { status: CustomerBookingStatus }) {
+export function BookingStatusBadge({
+  status,
+}: {
+  status: CustomerBookingStatus;
+}) {
   return (
     <Badge
       color={BOOKING_STATUS_COLOR[status] ?? "gray"}
@@ -194,7 +211,11 @@ const PAYMENT_STATUS_COLOR: Record<CustomerPaymentStatus, string> = {
   refunded: "grape",
 };
 
-export function PaymentStatusBadge({ status }: { status: CustomerPaymentStatus }) {
+export function PaymentStatusBadge({
+  status,
+}: {
+  status: CustomerPaymentStatus;
+}) {
   return (
     <Badge
       color={PAYMENT_STATUS_COLOR[status] ?? "gray"}
@@ -210,6 +231,38 @@ export function PaymentStatusBadge({ status }: { status: CustomerPaymentStatus }
   );
 }
 
+const INVOICE_STATUS_COLOR: Record<Freight.InvoiceStatus, string> = {
+  DRAFT: "gray",
+  ISSUED: "cyan",
+  PENDING: "yellow",
+  PARTIALLY_PAID: "orange",
+  PAID: "edr-green",
+  OVERDUE: "red",
+  CANCELLED: "gray",
+  REFUNDED: "grape",
+  EXPIRED: "red",
+};
+
+export function InvoiceStatusBadge({
+  status,
+}: {
+  status: Freight.InvoiceStatus;
+}) {
+  return (
+    <Badge
+      color={INVOICE_STATUS_COLOR[status] ?? "gray"}
+      variant="light"
+      size="sm"
+      radius="md"
+      tt="capitalize"
+      fw={600}
+      style={badgeStyle}
+    >
+      {humanize(status)}
+    </Badge>
+  );
+}
+
 /**
  * Inline approval action buttons for a profile row.
  * Transitions: pending → approve/reject | active → suspend | suspended → reactivate/blacklist | blacklisted → reinstate
@@ -225,8 +278,7 @@ export function ProfileApprovalActions({
     api.customers.setProfileStatus.mutationOptions(),
   );
 
-  const act = (next: ProfileStatus) =>
-    mutate({ profileId, status: next });
+  const act = (next: ProfileStatus) => mutate({ profileId, status: next });
 
   if (status === "pending") {
     return (

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

@@ -2,6 +2,7 @@ export {
   BookingStatusBadge,
   CompanyStatusBadge,
   CompanyTypeBadge,
+  InvoiceStatusBadge,
   PaymentStatusBadge,
   ProfileApprovalActions,
   ProfileChips,