feat: add nationality indicator to the customer

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

@@ -16,6 +16,7 @@ import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { api } from "@/services/api";
 
 import type {
+  CompanyNationality,
   CompanyProfile,
   CompanyStatus,
   CompanyType,
@@ -88,6 +89,31 @@ export function CompanyTypeBadge({ type }: { type: CompanyType }) {
   );
 }
 
+const NATIONALITY_COLOR: Record<CompanyNationality, string> = {
+  ethiopian: "edr-green",
+  foreign: "blue",
+};
+
+export function CompanyNationalityBadge({
+  nationality,
+}: {
+  nationality?: CompanyNationality | null;
+}) {
+  if (!nationality) return null;
+  return (
+    <Badge
+      color={NATIONALITY_COLOR[nationality] ?? "gray"}
+      variant="light"
+      size="sm"
+      radius="md"
+      fw={600}
+      style={badgeStyle}
+    >
+      {humanize(nationality)}
+    </Badge>
+  );
+}
+
 /**
  * Profile chips for a company row: one chip per role (Importer / Exporter / …)
  * carrying its reference code. Caps at three (a company has at most three

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

@@ -1,5 +1,6 @@
 export {
   BookingStatusBadge,
+  CompanyNationalityBadge,
   CompanyStatusBadge,
   CompanyTypeBadge,
   InvoiceStatusBadge,

apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx

@@ -812,6 +812,14 @@ export default function CustomerDetailPage() {
                     }
                   />
                   <InfoField label="Country" value={company.country} />
+                  <InfoField
+                    label="Nationality"
+                    value={
+                      company.nationality
+                        ? humanize(company.nationality)
+                        : undefined
+                    }
+                  />
                   <InfoField label="Address" value={company.address} />
                   <InfoField label="Website" value={company.website} />
                   <InfoField label="Email" value={company.email} />

apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx

@@ -31,6 +31,7 @@ import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import {
+  CompanyNationalityBadge,
   CompanyStatusBadge,
   ProfileChips,
   formatDate,
@@ -149,6 +150,7 @@ export default function CustomersPage() {
                   <Text fw={600} c="edr-text" truncate>
                     {c.name}
                   </Text>
+                  <CompanyNationalityBadge nationality={c.nationality} />
                 </Group>
                 <Text size="xs" c="dimmed">
                   TIN {c.tin}

apps/edr-freight-web/backoffice/src/types/customer.ts

@@ -21,6 +21,9 @@ export type CompanyStatus = "active" | "pending" | "suspended" | "blacklisted";
 /** Mirrors backend `CompanyKind` — commercial customer vs. government entity. */
 export type CompanyKind = "commercial" | "government";
 
+/** Mirrors backend `CompanyNationality`. */
+export type CompanyNationality = "ethiopian" | "foreign";
+
 /** Mirrors backend `ProfileType` (the role a company plays). */
 export type ProfileType =
   | "importer"
@@ -207,6 +210,7 @@ export interface Company {
   vatNumber?: string | null;
   fanNumber?: string | null;
   country: string;
+  nationality?: CompanyNationality | null;
   address?: string | null;
   phone?: string | null;
   email?: string | null;