feat(freight-backoffice): support DJF in booking, contract and warehouse screens

Currency dropdowns/pickers (AdditionalPaymentsTab, ClearanceChargesTab, PhasedClearanceActionPanel, AdviseDutyCard, ContractRequestsPage, ruleEngine/resources, WarehouseRulesPage, VehicleDetailPage, FeePreviewModal) offer DJF alongside ETB/USD; GlCreateBookingForm's currency selector gets allowDjf next to allowUsd. Narrow 'ETB'|'USD' type unions widened to include 'DJF' across the warehouse billingCurrency plumbing (useWarehouses, warehouse.service, api.ts) and the customer/invoice types. Ad-hoc money() formatters (BookingTrucksPanel, AccrualDashboard, ImportTrucksPage, EmptyReturnRequestsPage) and formatMoney call sites that hardcoded 2 decimals (wagon-cancellation cards, BookingRequestDetailPage, WagonCancellationsPage, PaymentsPage, WarehouseInvoicesPage) now use currencyDecimals() from @edr/ui-common so DJF renders with 0 decimals instead of forced cents. The 3 duplicate overview formatCurrency/ formatAmount helpers (typed 'ETB'|'USD') widen to accept any currency. Two correctness fixes: OverviewRecentBookingsTable's currency==='USD' ? 'USD' : 'ETB' was mislabeling every non-USD currency as ETB; and WarehouseInvoicesPage's gateway-method default now routes any non-ETB currency (not just USD) to WAAFI, so DJF invoices get a working default instead of TELEBIRR (ETB-only). Claude-Session: https://claude.ai/code/session_01CZy77vCWhka3pnmVF9NDkL
2026-09-06 13:35:03 +00:00 · 2026-09-04 11:53:56 +03:00
parent 34c49e4c50
commit 214f96dbae
30 changed files with 61 additions and 47 deletions
--- a/apps/edr-freight-web/backoffice/src/components/bookings/AdditionalPaymentsTab.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/AdditionalPaymentsTab.tsx
@@ -36,7 +36,7 @@ import { downloadBookingFile, fetchViewableFile } from "@/services/files.service
 import { formatDate, formatDateTime } from "@/lib/format";
 import { extractErrorMessage } from "@/utils/errorExtractor";

-const CURRENCIES = ["ETB", "USD"];
+const CURRENCIES = ["ETB", "USD", "DJF"];

 const STATUS_META: Record<Freight.AdditionalChargeStatus, { label: string; color: string }> = {
  DRAFT: { label: "Draft", color: "gray" },
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingTrucksPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingTrucksPanel.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { Button, Center, Group, Loader, SimpleGrid, Stack, Table, Text } from "@mantine/core";
 import { Coins, Truck } from "lucide-react";
+import { currencyDecimals } from "@edr/ui-common";

 import { api } from "@/services/api";
 import { FeePreviewModal } from "@/components/warehouses/FeePreviewModal";
@@ -12,8 +13,8 @@ import { MetricTile } from "./MetricTile";

 const money = (amount: number, currency: string) =>
  `${Number(amount).toLocaleString(undefined, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
+    minimumFractionDigits: currencyDecimals(currency),
+    maximumFractionDigits: currencyDecimals(currency),
  })} ${currency === "ETB" ? "Birr (ETB)" : currency}`;

 /**
--- a/apps/edr-freight-web/backoffice/src/components/bookings/wagon-cancellation/RebookWagonCancellationModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/wagon-cancellation/RebookWagonCancellationModal.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Button, Group, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
-import { OperationDatePicker } from "@edr/ui-common";
+import { OperationDatePicker, currencyDecimals } from "@edr/ui-common";

 import { api } from "@/auth/http";
 import { api as rpc } from "@/services/api";
@@ -223,7 +223,7 @@ export function RebookWagonCancellationModal({
          <Text size="sm">
            {cancellation.booking?.reference ?? cancellation.bookingId} ·{" "}
            {cancellation.wagonsCancelled} wagon(s) · credit{" "}
-            {formatMoney(cancellation.creditAmount, cancellation.feeCurrency, 2)}
+            {formatMoney(cancellation.creditAmount, cancellation.feeCurrency, currencyDecimals(cancellation.feeCurrency))}
          </Text>
          <Text size="sm" fw={600}>
            Shipment day
--- a/apps/edr-freight-web/backoffice/src/components/bookings/wagon-cancellation/WagonCancellationCreditCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/wagon-cancellation/WagonCancellationCreditCard.tsx
@@ -8,6 +8,7 @@ import { api } from "@/auth/http";
 import { useAuth } from "@/auth/useAuth";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
 import { formatDate, formatMoney } from "@/lib/format";
+import { currencyDecimals } from "@edr/ui-common";
 import { RebookWagonCancellationModal } from "./RebookWagonCancellationModal";
 import {
  canRebookWagonCancellations,
@@ -73,7 +74,7 @@ export function WagonCancellationCreditCard({
                  <Group gap={8} wrap="nowrap">
                    <Text size="sm" fw={600}>
                      {Number(r.wagonsCancelled)} wagon(s) · credit{" "}
-                      {formatMoney(Number(r.creditAmount), r.feeCurrency, 2)}
+                      {formatMoney(Number(r.creditAmount), r.feeCurrency, currencyDecimals(r.feeCurrency))}
                    </Text>
                    <Badge color={chip.color} variant="light" size="sm" radius="md">
                      {chip.label}
@@ -83,7 +84,7 @@ export function WagonCancellationCreditCard({
                    Cancelled {formatDate(r.createdAt)}
                    {r.fault ? ` · ${r.fault === "EDR" ? "EDR fault (no fee)" : "customer fault"}` : ""}
                    {Number(r.feeAmount) > 0
-                      ? ` · fee ${formatMoney(Number(r.feeAmount), r.feeCurrency, 2)}${
+                      ? ` · fee ${formatMoney(Number(r.feeAmount), r.feeCurrency, currencyDecimals(r.feeCurrency))}${
                          r.feePaidAt ? " paid" : " unpaid"
                        }`
                      : ""}
--- a/apps/edr-freight-web/backoffice/src/components/contracts/ClearanceChargesTab.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/ClearanceChargesTab.tsx
@@ -39,7 +39,7 @@ import {
 import { formatDateTime } from "@/lib/format";
 import { extractErrorMessage } from "@/utils/errorExtractor";

-const CURRENCIES = ["ETB", "USD"];
+const CURRENCIES = ["ETB", "USD", "DJF"];

 const STATUS_META: Record<
  Freight.ClearanceChargeStatus,
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
@@ -345,7 +345,7 @@ export default function GlCreateBookingForm() {
  const [notes, setNotes] = useState("");
  // IMPORT bookings pick ETB or USD — starts empty so the choice is
  // deliberate (required before pricing). Everything else is forced to ETB.
-  const [paymentCurrency, setPaymentCurrency] = useState<"USD" | "ETB" | "">("");
+  const [paymentCurrency, setPaymentCurrency] = useState<"USD" | "ETB" | "DJF" | "">("");
  // What the containers carry — captured per booking (moved off the contract).
  const [cargoDescription, setCargoDescription] = useState("");
  const [containerLines, setContainerLines] = useState<ContainerLineDraft[]>([]);
@@ -1144,7 +1144,7 @@ export default function GlCreateBookingForm() {
  ]);

  // Only IMPORT actually chooses — the rest bill ETB regardless of the state.
-  const effectiveCurrency: "USD" | "ETB" =
+  const effectiveCurrency: "USD" | "ETB" | "DJF" =
    isImport && paymentCurrency ? paymentCurrency : "ETB";
  const currencyError =
    isImport && !paymentCurrency
@@ -2351,7 +2351,7 @@ export default function GlCreateBookingForm() {
              {requestCurrencyLocked
                ? "The customer chose the billing currency on the shipment request — it cannot be changed."
                : isImport
-                  ? "Import shipments may be invoiced in ETB or USD. USD is paid by bank transfer, not online."
+                  ? "Import shipments may be invoiced in ETB, USD or DJF. USD is paid by bank transfer, not online."
                  : "Shipments are invoiced in ETB."}
            </Text>
            <CurrencySelector
@@ -2359,6 +2359,7 @@ export default function GlCreateBookingForm() {
              onChange={setPaymentCurrency}
              disabled={!isImport || requestCurrencyLocked}
              allowUsd={isImport}
+              allowDjf={isImport}
              error={currencyError}
            />
          </Box>
--- a/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
@@ -1554,7 +1554,7 @@ function SecondDutyStep({
                />
                <Select
                  label="Currency"
-                  data={["ETB", "USD"]}
+                  data={["ETB", "USD", "DJF"]}
                  value={currency}
                  onChange={(v) => setCurrency(v ?? "ETB")}
                  size="sm"
@@ -1944,7 +1944,7 @@ function DraftDeclarationStep({
            />
            <Select
              label="Currency"
-              data={["ETB", "USD"]}
+              data={["ETB", "USD", "DJF"]}
              value={currency}
              onChange={(v) => setCurrency(v ?? "ETB")}
              size="sm"
@@ -2063,7 +2063,7 @@ function DutyStep({
                />
                <Select
                  label="Currency"
-                  data={["ETB", "USD"]}
+                  data={["ETB", "USD", "DJF"]}
                  value={currency}
                  onChange={(v) => setCurrency(v ?? "ETB")}
                  size="sm"
--- a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AdviseDutyCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AdviseDutyCard.tsx
@@ -54,7 +54,7 @@ export function AdviseDutyCard({
          />
          <Select
            label="Currency"
-            data={["ETB", "USD"]}
+            data={["ETB", "USD", "DJF"]}
            value={currency}
            onChange={(v) => setCurrency(v ?? "ETB")}
            size="sm"
--- a/apps/edr-freight-web/backoffice/src/components/overview/OverviewPaymentChart.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/OverviewPaymentChart.tsx
@@ -18,7 +18,7 @@ function formatDateLabel(date: string) {
  return parsed.toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }

-function formatAmount(value: number, currency: "ETB" | "USD") {
+function formatAmount(value: number, currency: string) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
--- a/apps/edr-freight-web/backoffice/src/components/overview/OverviewRecentBookingsTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/OverviewRecentBookingsTable.tsx
@@ -9,10 +9,9 @@ import { SummaryCard } from "./summary/SummaryCard";

 function formatAmount(amount: number | null, currency: string | null) {
  if (amount == null) return "—";
-  const code = currency === "USD" ? "USD" : "ETB";
  return new Intl.NumberFormat("en-US", {
    style: "currency",
-    currency: code,
+    currency: currency || "ETB",
    maximumFractionDigits: 0,
  }).format(amount);
 }
--- a/apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewHeroKpis.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/summary/OverviewHeroKpis.tsx
@@ -4,7 +4,7 @@ import { KpiStrip, type KpiItem } from "@/components/page";
 import type { IOverviewKpis, IOverviewPeriodTotals } from "@/types/overview";
 import { CountUp } from "./CountUp";

-function formatCurrency(amount: number, currency: "ETB" | "USD") {
+function formatCurrency(amount: number, currency: string) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
@@ -13,7 +13,7 @@ function formatCurrency(amount: number, currency: "ETB" | "USD") {
 }

 /** Compact form ("ETB 58.6M") — the hero cell is too narrow for nine digits. */
-function formatCompactCurrency(amount: number, currency: "ETB" | "USD") {
+function formatCompactCurrency(amount: number, currency: string) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
--- a/apps/edr-freight-web/backoffice/src/components/overview/tabs/OverviewBillingTabPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/overview/tabs/OverviewBillingTabPanel.tsx
@@ -18,7 +18,7 @@ import { OverviewKpiStrip } from "../OverviewKpiStrip";
 import { OverviewPaymentChart } from "../OverviewPaymentChart";
 import { overviewChartColors } from "../overview.styles";

-function formatCurrency(amount: number, currency: "ETB" | "USD") {
+function formatCurrency(amount: number, currency: string) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/AccrualDashboard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/AccrualDashboard.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { ActionIcon, Badge, Card, Group, Loader, Menu, SimpleGrid, Stack, Table, Text, ThemeIcon } from '@mantine/core';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Bell, BellOff, Check, Clock, DollarSign, MoreVertical } from 'lucide-react';
+import { currencyDecimals } from '@edr/ui-common';

 import { useAccrualDashboard } from '@/hooks/useWarehouses';
 import { warehouseService } from '@/services/warehouse.service';
@@ -15,7 +16,8 @@ const ALERT_META: Record<AccrualAlert, { color: string; label: string }> = {
 };

 function money(amount: number, currency: string): string {
-  return `${amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${currency}`;
+  const decimals = currencyDecimals(currency);
+  return `${amount.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })} ${currency}`;
 }

 function freeDaysLabel(row: AccrualDashboardRow): string {
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
@@ -113,7 +113,7 @@ function Row({ label, value }: { label: string; value: string }) {
 /** Batch 5 fee preview + Batch 6 invoice generation / gate clearance for an inventory item. */
 export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModalProps) {
  const { toast } = useToast();
-  const [billingCurrency, setBillingCurrency] = useState<'ETB' | 'USD'>('USD');
+  const [billingCurrency, setBillingCurrency] = useState<'ETB' | 'USD' | 'DJF'>('USD');
  const enabledId = opened ? inventoryId ?? undefined : undefined;
  const { data, isLoading } = useQuery(
    api.warehouses.feePreview.queryOptions({
@@ -211,10 +211,11 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
            <SegmentedControl
              size="xs"
              value={billingCurrency}
-              onChange={(value) => setBillingCurrency(value as 'ETB' | 'USD')}
+              onChange={(value) => setBillingCurrency(value as 'ETB' | 'USD' | 'DJF')}
              data={[
                { value: 'USD', label: 'USD' },
                { value: 'ETB', label: 'Birr' },
+                { value: 'DJF', label: 'DJF' },
              ]}
              disabled={Boolean(activeInvoice)}
            />
--- a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
@@ -221,7 +221,7 @@ export function useOnTimeDispatch() {
 }

 /** Live per-item fee accrual (storage/demurrage) with alerts. */
-export function useAccrualDashboard(billingCurrency?: 'ETB' | 'USD') {
+export function useAccrualDashboard(billingCurrency?: 'ETB' | 'USD' | 'DJF') {
  return useQuery({
    queryKey: ['warehouse-fees', 'accrual-dashboard', billingCurrency ?? 'USD'],
    queryFn: () => warehouseService.accrualDashboard(billingCurrency).then((r) => r.data),
@@ -598,7 +598,7 @@ export const useUpdateFeeRule = () =>
 export const useDeleteFeeRule = () =>
  useRuleMutation((id: string) => warehouseService.deleteFeeRule(id), ['warehouse-fee-rules']);

-export function useFeePreview(inventoryId?: string, billingCurrency: 'ETB' | 'USD' = 'USD') {
+export function useFeePreview(inventoryId?: string, billingCurrency: 'ETB' | 'USD' | 'DJF' = 'USD') {
  return useQuery({
    queryKey: ['warehouse-inventory', inventoryId, 'fee-preview', billingCurrency],
    queryFn: () => warehouseService.feePreview(inventoryId as string, billingCurrency).then((r) => r.data),
@@ -649,7 +649,7 @@ export function useGenerateInvoice() {
    }: {
      inventoryId: string;
      confirmZero?: boolean;
-      billingCurrency?: 'ETB' | 'USD';
+      billingCurrency?: 'ETB' | 'USD' | 'DJF';
    }) => warehouseService.generateInvoice(inventoryId, confirmZero, billingCurrency).then((r) => r.data),
    onSuccess,
  });
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -72,6 +72,7 @@ import { AdditionalPaymentsTab } from "@/components/bookings/AdditionalPaymentsT
 import { getStatusMeta } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
 import { formatDateTime, formatMoney } from "@/lib/format";
+import { currencyDecimals } from "@edr/ui-common";
 import { cargoTonsAndItems } from "@/utils/cargoWeight";
 import type { BookingDetail } from "@/types/booking";
 import {
@@ -254,7 +255,7 @@ export default function BookingRequestDetailPage() {
  const kpis: KpiItem[] = [
    {
      label: "Total value",
-      value: formatMoney(amount, booking.paymentCurrency, 2),
+      value: formatMoney(amount, booking.paymentCurrency, currencyDecimals(booking.paymentCurrency)),
      hint: booking.paymentStatus,
      icon: Wallet,
      color: "edr-green",
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/WagonCancellationsPage.tsx
@@ -25,6 +25,7 @@ import { useAuth } from "@/auth/useAuth";
 import { PageContainer, PageHeader } from "@/components/page";
 import { toDayString } from "@/hooks/useListControls";
 import { formatDate, formatMoney } from "@/lib/format";
+import { currencyDecimals } from "@edr/ui-common";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import {
  DataTable,
@@ -166,7 +167,7 @@ export default function WagonCancellationsPage() {
      header: () => <span>Fee</span>,
      cell: ({ row }) => (
        <Text size="sm" style={{ fontVariantNumeric: "tabular-nums" }}>
-          {formatMoney(row.original.feeAmount, row.original.feeCurrency, 2)}
+          {formatMoney(row.original.feeAmount, row.original.feeCurrency, currencyDecimals(row.original.feeCurrency))}
        </Text>
      ),
    },
@@ -175,7 +176,7 @@ export default function WagonCancellationsPage() {
      header: () => <span>Credit</span>,
      cell: ({ row }) => (
        <Text size="sm" style={{ fontVariantNumeric: "tabular-nums" }}>
-          {formatMoney(row.original.creditAmount, row.original.feeCurrency, 2)}
+          {formatMoney(row.original.creditAmount, row.original.feeCurrency, currencyDecimals(row.original.feeCurrency))}
        </Text>
      ),
    },
@@ -347,7 +348,7 @@ export default function WagonCancellationsPage() {
            <Text size="sm">
              {voiding.booking?.reference ?? voiding.bookingId} ·{" "}
              {voiding.wagonsCancelled} wagon(s) · fee{" "}
-              {formatMoney(voiding.feeAmount, voiding.feeCurrency, 2)}
+              {formatMoney(voiding.feeAmount, voiding.feeCurrency, currencyDecimals(voiding.feeCurrency))}
            </Text>
            <Text size="sm" c="dimmed">
              The pending fee is dropped and the wagons stay on the booking.
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
@@ -82,6 +82,7 @@ const CONTRACT_KIND_OPTIONS = [
 const CURRENCY_OPTIONS = [
  { value: "ETB", label: "ETB" },
  { value: "USD", label: "USD" },
+  { value: "DJF", label: "DJF" },
 ];

 /** value = `${sortBy}:${sortOrder}` for the sort Select. */
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/VehicleDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/VehicleDetailPage.tsx
@@ -279,6 +279,7 @@ const OperationsTab = ({ vehicle }: { vehicle: Vehicle }) => {
            <Group gap="lg" mt={6}>
              <Radio value="ETB" label="ETB" />
              <Radio value="USD" label="USD" />
+              <Radio value="DJF" label="DJF" />
            </Group>
          </Radio.Group>
        </SimpleGrid>
--- a/apps/edr-freight-web/backoffice/src/pages/invoices/UsdPaymentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/UsdPaymentsPage.tsx
@@ -274,7 +274,7 @@ function ConfirmCell({
 export default function UsdPaymentsPanel({
  currency,
 }: {
-  currency: "USD" | "ETB";
+  currency: "USD" | "ETB" | "DJF";
 }) {
  const navigate = useNavigate();
  // Namespaced: the ETB and USD tabs share this panel and live on the same URL
--- a/apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx
@@ -27,6 +27,7 @@ import { useQuery } from "@tanstack/react-query";
 import { KpiStrip } from "@/components/page";
 import { ExportButton } from "@/components/export/ExportButton";
 import { formatDate, formatMoney } from "@/lib/format";
+import { currencyDecimals } from "@edr/ui-common";
 import { api } from "@/services/api";
 import type { PaymentMethod, PaymentRow } from "@/services/payments.service";
 import {
@@ -149,7 +150,7 @@ export default function PaymentsPanel() {
      header: () => <span className={tableHeader}>Amount</span>,
      cell: ({ row }) => (
        <span className="font-mono text-sm font-semibold tabular-nums text-foreground">
-          {formatMoney(row.original.amount, row.original.currency, 2)}
+          {formatMoney(row.original.amount, row.original.currency, currencyDecimals(row.original.currency))}
        </span>
      ),
    },
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -450,6 +450,7 @@ export const rateUnitOptions = (
 const CURRENCIES = [
  { label: "ETB (Birr)", value: "ETB" },
  { label: "USD", value: "USD" },
+  { label: "DJF", value: "DJF" },
 ];

 const PRIORITY_CONFIG_TYPES = [
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/EmptyReturnRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/EmptyReturnRequestsPage.tsx
@@ -16,7 +16,7 @@ import {
  Text,
  Textarea,
 } from "@mantine/core";
-import { DataTable, type ColumnDef } from "@edr/ui-common";
+import { DataTable, type ColumnDef, currencyDecimals } from "@edr/ui-common";

 import { useAuth } from "@/auth/useAuth";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
@@ -45,7 +45,7 @@ const STATUS_META: Record<EmptyReturnRequestStatus, { label: string; color: stri
 const money = (amount: number | null | undefined, currency: string | null | undefined) =>
  amount == null
    ? "—"
-    : `${Number(amount).toLocaleString(undefined, { minimumFractionDigits: 2 })} ${currency ?? ""}`.trim();
+    : `${Number(amount).toLocaleString(undefined, { minimumFractionDigits: currencyDecimals(currency) })} ${currency ?? ""}`.trim();

 /**
 * The queue for customer-initiated empty container returns: a booking sold
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ImportTrucksPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ImportTrucksPage.tsx
@@ -1,4 +1,5 @@
 import { Fragment, useMemo, useState } from "react";
+import { currencyDecimals } from "@edr/ui-common";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
  ActionIcon,
@@ -78,7 +79,7 @@ const TRUCK_COLUMNS = [
 ] as const;

 const money = (amount: number, currency: string) =>
-  `${Number(amount).toLocaleString(undefined, { maximumFractionDigits: 2 })} ${currency === "ETB" ? "ETB" : currency}`;
+  `${Number(amount).toLocaleString(undefined, { maximumFractionDigits: currencyDecimals(currency) })} ${currency === "ETB" ? "ETB" : currency}`;


 export interface BookingGroup {
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
@@ -17,7 +17,7 @@ import {
 } from '@mantine/core';
 import { Ban, CreditCard, DoorOpen, Download, ExternalLink, Eye, Receipt } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { DataTable, type ColumnDef } from '@edr/ui-common';
+import { DataTable, type ColumnDef, currencyDecimals } from '@edr/ui-common';
 import { applyClientFilters, FilterBar, useFilters, type FilterDef } from '@/components/filters';

 import { PageContainer, PageHeader } from '@/components/page';
@@ -50,7 +50,7 @@ const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
  CANCELLED: 'gray',
 };

-const fmt = (n: number, c: string) => formatMoney(n, c, 2);
+const fmt = (n: number, c: string) => formatMoney(n, c, currencyDecimals(c));
 const fmtDate = (d?: string | null) => (d ? new Date(d).toLocaleDateString() : '—');

 const INVOICE_FILTER_DEFS: FilterDef[] = [
@@ -204,7 +204,8 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
  const canGateClear = inv?.status === 'PAID' && Boolean(inv.inventoryId);

  useEffect(() => {
-    setGatewayMethod(inv?.currency === 'USD' ? 'WAAFI' : 'TELEBIRR');
+    // WAAFI settles USD and DJF; TELEBIRR is ETB-only.
+    setGatewayMethod(inv?.currency !== 'ETB' ? 'WAAFI' : 'TELEBIRR');
    setPayerAccount('');
  }, [inv?.id, inv?.currency]);

--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
@@ -69,6 +69,7 @@ const TRADE = [
 const CURRENCIES = [
  { value: 'USD', label: 'USD - Dollar' },
  { value: 'ETB', label: 'ETB - Birr' },
+  { value: 'DJF', label: 'DJF - Djibouti Franc' },
 ];

 const clean = (s: string) => s.trim() || undefined;
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -1532,7 +1532,7 @@ export const api = {
    ),

    feePreview: endpoint<
-      { inventoryId: string; billingCurrency?: "ETB" | "USD" },
+      { inventoryId: string; billingCurrency?: "ETB" | "USD" | "DJF" },
      FeePreview[]
    >(
      "warehouse-inventory",
@@ -1884,7 +1884,7 @@ export const api = {
      {
        inventoryId: string;
        confirmZero?: boolean;
-        billingCurrency?: "ETB" | "USD";
+        billingCurrency?: "ETB" | "USD" | "DJF";
      },
      WarehouseFeeInvoice
    >(
--- a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
@@ -558,11 +558,11 @@ export const warehouseService = {
  updateFeeRule: (id: string, payload: Partial<SaveFeeRulePayload>) =>
    apiClient.patch<FeeRule>(URL_CONSTANTS.WAREHOUSE_RULES.FEES_BY_ID(id), payload),
  deleteFeeRule: (id: string) => apiClient.delete(URL_CONSTANTS.WAREHOUSE_RULES.FEES_BY_ID(id)),
-  feePreview: (inventoryId: string, billingCurrency?: 'ETB' | 'USD') =>
+  feePreview: (inventoryId: string, billingCurrency?: 'ETB' | 'USD' | 'DJF') =>
    apiClient.get<FeePreview[]>(URL_CONSTANTS.WAREHOUSE_RULES.FEE_PREVIEW(inventoryId), {
      params: cleanParams({ billingCurrency }),
    }),
-  accrualDashboard: (billingCurrency?: 'ETB' | 'USD') =>
+  accrualDashboard: (billingCurrency?: 'ETB' | 'USD' | 'DJF') =>
    apiClient.get<AccrualDashboardRow[]>(URL_CONSTANTS.WAREHOUSE_RULES.ACCRUAL_DASHBOARD, {
      params: cleanParams({ billingCurrency }),
    }),
@@ -592,7 +592,7 @@ export const warehouseService = {
    apiClient.get<WarehouseFeeInvoice[]>(URL_CONSTANTS.WAREHOUSE_INVOICES.FOR_INVENTORY(inventoryId)),
  invoicesForBooking: (bookingId: string) =>
    apiClient.get<WarehouseFeeInvoice[]>(URL_CONSTANTS.WAREHOUSE_INVOICES.FOR_BOOKING(bookingId)),
-  generateInvoice: (inventoryId: string, confirmZero = false, billingCurrency?: 'ETB' | 'USD') =>
+  generateInvoice: (inventoryId: string, confirmZero = false, billingCurrency?: 'ETB' | 'USD' | 'DJF') =>
    apiClient.post<WarehouseFeeInvoice>(URL_CONSTANTS.WAREHOUSE_INVOICES.GENERATE(inventoryId), {
      confirmZero,
      billingCurrency,
--- a/apps/edr-freight-web/backoffice/src/types/customer.ts
+++ b/apps/edr-freight-web/backoffice/src/types/customer.ts
@@ -420,7 +420,7 @@ export interface CustomerBooking {
  originLabel: string;
  destinationLabel: string;
  totalAmount: number;
-  currency: "ETB" | "USD";
+  currency: "ETB" | "USD" | "DJF";
  scheduledDate?: string | null;
  createdAt: string;
 }
@@ -469,7 +469,7 @@ export interface CustomerPayment {
  /** Booking reference the payment settles. */
  bookingReference: string;
  amount: number;
-  currency: "ETB" | "USD";
+  currency: "ETB" | "USD" | "DJF";
  method: CustomerPaymentMethod;
  status: CustomerPaymentStatus;
  paidAt?: string | null;
--- a/apps/edr-freight-web/backoffice/src/types/invoice.ts
+++ b/apps/edr-freight-web/backoffice/src/types/invoice.ts
@@ -77,7 +77,7 @@ export interface InvoiceListFilter {
  /** CSV of normalised UPPER_SNAKE payment methods (see `PAYMENT_METHOD_OPTIONS`). */
  paymentMethods?: string;
  search?: string;
-  currency?: "USD" | "ETB";
+  currency?: "USD" | "ETB" | "DJF";
  /** ISO instants — inclusive bounds on `issuedAt` / `dueAt`. */
  issuedFrom?: string;
  issuedTo?: string;