diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx index f60ac3045..6ae71cdc0 100644 --- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx +++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx @@ -307,6 +307,14 @@ const RuleEngineFormDialog = ({ size="md" radius="md" styles={inputStyles} + rightSection={ + field.suffix ? ( + + {field.suffix} + + ) : undefined + } + rightSectionWidth={field.suffix ? 52 : undefined} /> ); }; diff --git a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx index 5251141a4..5ec7597b9 100644 --- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx +++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx @@ -94,6 +94,15 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode => return {Number.isNaN(num) ? String(value) : num.toLocaleString()}; } + if (format === "currency") { + const num = Number(value); + return ( + + {Number.isNaN(num) ? String(value) : `USD ${num.toLocaleString()}`} + + ); + } + if (format === "date") { const d = new Date(String(value)); if (Number.isNaN(d.getTime())) return {String(value)}; diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts index 1740cfbe6..23b77f943 100644 --- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts +++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts @@ -11,6 +11,7 @@ export type ColumnFormat = | "rateStatus" | "date" | "number" + | "currency" | "entityLabel" | "rateLabel"; @@ -36,6 +37,8 @@ export interface FormFieldDef { placeholder?: string; description?: string; disabled?: boolean; + /** Trailing unit label shown inside the input (e.g. "USD" on a rate value). */ + suffix?: string; /** Hide this field when another field currently equals one of these values. */ hideWhen?: { field: string; equals: string[] }; /** @@ -402,7 +405,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [ columns: [ { id: "appliesTo", header: "Applies to", accessorKey: "appliesTo", format: "code" }, { id: "trigger", header: "Trigger", accessorKey: "trigger" }, - { id: "rateValue", header: "Value", accessorKey: "rateValue", format: "number" }, + { id: "rateValue", header: "Value", accessorKey: "rateValue", format: "currency" }, { id: "rateUnit", header: "Unit", accessorKey: "rateUnit" }, { id: "status", header: "Status", accessorKey: "status", format: "rateStatus" }, { id: "effectiveFrom", header: "From", accessorKey: "effectiveFrom", format: "date" }, @@ -454,7 +457,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [ placeholder: "Select bulk commodity (optional)", showWhen: { field: "appliesTo", equals: ["BULK", "INTERCITY"] }, }, - { name: "rateValue", label: "Rate value", type: "number", required: true }, + { name: "rateValue", label: "Rate value", type: "number", required: true, suffix: "USD" }, { name: "rateUnit", label: "Rate unit", type: "select", required: true, options: RATE_UNITS }, { name: "effectiveFrom", label: "Effective from", type: "date", required: true }, { name: "effectiveTo", label: "Effective to", type: "date" },