From c9bb105e9420ec68b2d2a86058646a13f55b631e Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Fri, 7 Aug 2026 12:54:00 +0000
Subject: [PATCH] feat: add nationality indicator to the customer

---
 .../src/components/customers/badges.tsx       | 26 +++++++++++++++++++
 .../src/components/customers/index.ts         |  1 +
 .../pages/customers/CustomerDetailPage.tsx    |  8 ++++++
 .../src/pages/customers/CustomersPage.tsx     |  2 ++
 .../backoffice/src/types/customer.ts          |  4 +++
 5 files changed, 41 insertions(+)

diff --git a/apps/edr-freight-web/backoffice/src/components/customers/badges.tsx b/apps/edr-freight-web/backoffice/src/components/customers/badges.tsx
index 046493b0f..edcc4a517 100644
--- a/apps/edr-freight-web/backoffice/src/components/customers/badges.tsx
+++ b/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
diff --git a/apps/edr-freight-web/backoffice/src/components/customers/index.ts b/apps/edr-freight-web/backoffice/src/components/customers/index.ts
index 1ccd29f41..81f25fcb2 100644
--- a/apps/edr-freight-web/backoffice/src/components/customers/index.ts
+++ b/apps/edr-freight-web/backoffice/src/components/customers/index.ts
@@ -1,5 +1,6 @@
 export {
   BookingStatusBadge,
+  CompanyNationalityBadge,
   CompanyStatusBadge,
   CompanyTypeBadge,
   InvoiceStatusBadge,
diff --git a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
index a9e56a6d8..f31ce02e9 100644
--- a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
+++ b/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} />
diff --git a/apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx
index 34f90ffff..815615a1b 100644
--- a/apps/edr-freight-web/backoffice/src/pages/customers/CustomersPage.tsx
+++ b/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}
diff --git a/apps/edr-freight-web/backoffice/src/types/customer.ts b/apps/edr-freight-web/backoffice/src/types/customer.ts
index ed77307f9..cd2d67842 100644
--- a/apps/edr-freight-web/backoffice/src/types/customer.ts
+++ b/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;