Warehouse and customer truck edit and KG to Tons

2026-08-30 08:48:11 +00:00 · 2026-07-08 05:19:25 +00:00
parent 22a2a770d2
commit ba821b06ca
5 changed files with 257 additions and 57 deletions
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
@@ -16,7 +16,7 @@ import {
  Text,
  TextInput,
 } from '@mantine/core';
-import { Info, Plus, Trash2 } from 'lucide-react';
+import { Info, Pencil, Plus, Trash2 } from 'lucide-react';

 import { useQuery } from '@tanstack/react-query';

@@ -30,6 +30,8 @@ import {
  useDeleteAllocationRule,
  useDeleteFeeRule,
  useFeeRules,
+  useUpdateAllocationRule,
+  useUpdateFeeRule,
 } from '@/hooks/useWarehouses';
 import { api } from '@/services/api';
 import {
@@ -38,6 +40,8 @@ import {
  FEE_RULE_TYPES,
  FEE_RULE_TYPE_LABELS,
  VEHICLE_TYPES,
+  type AllocationRule,
+  type FeeRule,
  type FeeRuleBasis,
  type FeeRuleType,
 } from '@/types/warehouse';
@@ -121,8 +125,10 @@ function AllocationRules() {
  const { data, isLoading } = useAllocationRules();
  const { data: yards = [], isLoading: yardsLoading } = useAllWarehouseYards();
  const create = useCreateAllocationRule();
+  const update = useUpdateAllocationRule();
  const remove = useDeleteAllocationRule();
  const [open, setOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState({
    name: '',
    priority: 100,
@@ -142,7 +148,8 @@ function AllocationRules() {
      label: `${yard.code} - ${yard.name}${yard.warehouse?.code ? ` (${yard.warehouse.code})` : ''}`,
    }));

-  const resetForm = () =>
+  const resetForm = () => {
+    setEditingId(null);
    setForm({
      name: '',
      priority: 100,
@@ -153,6 +160,22 @@ function AllocationRules() {
      targetYardCode: '',
      storageType: '',
    });
+  };
+
+  const startEdit = (rule: AllocationRule) => {
+    setForm({
+      name: rule.name,
+      priority: rule.priority ?? 100,
+      freightType: rule.freightType ?? '',
+      tradeDirection: rule.tradeDirection ?? '',
+      cargoTypeCode: rule.cargoTypeCode ?? '',
+      containerStatus: rule.containerStatus ?? '',
+      targetYardCode: rule.targetYardCode ?? '',
+      storageType: rule.storageType ?? '',
+    });
+    setEditingId(rule.id);
+    setOpen(true);
+  };

  const submit = async () => {
    if (!form.name.trim() || !form.targetYardCode.trim()) {
@@ -160,7 +183,7 @@ function AllocationRules() {
      return;
    }

-    await create.mutateAsync({
+    const payload = {
      name: form.name.trim(),
      priority: form.priority,
      freightType: clean(form.freightType) ?? null,
@@ -170,10 +193,20 @@ function AllocationRules() {
      targetYardCode: form.targetYardCode.trim(),
      storageType: clean(form.storageType) ?? null,
      isActive: true,
-    } as never);
-    toast({ title: 'Allocation rule created' });
-    setOpen(false);
-    resetForm();
+    };
+    try {
+      if (editingId) {
+        await update.mutateAsync({ id: editingId, payload: payload as never });
+        toast({ title: 'Allocation rule updated' });
+      } else {
+        await create.mutateAsync(payload as never);
+        toast({ title: 'Allocation rule created' });
+      }
+      setOpen(false);
+      resetForm();
+    } catch (error) {
+      toast({ variant: 'destructive', title: editingId ? 'Update failed' : 'Create failed', description: extractErrorMessage(error) });
+    }
  };

  return (
@@ -182,7 +215,7 @@ function AllocationRules() {
        <Text c="dimmed" size="sm">
          {rules.length} rule(s) matched by ascending priority
        </Text>
-        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>
+        <Button leftSection={<Plus size={16} />} onClick={() => { resetForm(); setOpen(true); }}>
          New allocation rule
        </Button>
      </Group>
@@ -229,14 +262,19 @@ function AllocationRules() {
                    </Badge>
                  </Table.Td>
                  <Table.Td ta="right">
-                    <ActionIcon
-                      variant="subtle"
-                      color="red"
-                      onClick={() => remove.mutate(rule.id)}
-                      title="Delete"
-                    >
-                      <Trash2 size={16} />
-                    </ActionIcon>
+                    <Group gap={4} justify="flex-end" wrap="nowrap">
+                      <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(rule)} title="Edit">
+                        <Pencil size={16} />
+                      </ActionIcon>
+                      <ActionIcon
+                        variant="subtle"
+                        color="red"
+                        onClick={() => remove.mutate(rule.id)}
+                        title="Delete"
+                      >
+                        <Trash2 size={16} />
+                      </ActionIcon>
+                    </Group>
                  </Table.Td>
                </Table.Tr>
              ))}
@@ -245,7 +283,7 @@ function AllocationRules() {
        </Table.ScrollContainer>
      )}

-      <Modal opened={open} onClose={() => setOpen(false)} title="New allocation rule" centered size="lg">
+      <Modal opened={open} onClose={() => { setOpen(false); resetForm(); }} title={editingId ? 'Edit allocation rule' : 'New allocation rule'} centered size="lg">
        <Stack gap="md">
          <Card withBorder radius="md" padding="sm" bg="gray.0">
            <Stack gap={4}>
@@ -340,11 +378,11 @@ function AllocationRules() {
            />
          </Group>
          <Group justify="flex-end" mt="sm">
-            <Button variant="default" onClick={() => setOpen(false)}>
+            <Button variant="default" onClick={() => { setOpen(false); resetForm(); }}>
              Cancel
            </Button>
-            <Button loading={create.isPending} onClick={submit}>
-              Create
+            <Button loading={create.isPending || update.isPending} onClick={submit}>
+              {editingId ? 'Save changes' : 'Create'}
            </Button>
          </Group>
        </Stack>
@@ -363,8 +401,10 @@ function FeeRules() {
    api.containerTypes.list.queryOptions({ staleTime: Infinity }),
  );
  const create = useCreateFeeRule();
+  const update = useUpdateFeeRule();
  const remove = useDeleteFeeRule();
  const [open, setOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState({
    name: '',
    ruleType: 'DEMURRAGE_FEE' as FeeRuleType,
@@ -394,7 +434,8 @@ function FeeRules() {
  // Double handling + truck detention apply to IMPORT only — trade direction is locked.
  const isImportOnly = isDoubleHandling || isTruckDetention;

-  const resetForm = () =>
+  const resetForm = () => {
+    setEditingId(null);
    setForm({
      name: '',
      ruleType: 'DEMURRAGE_FEE',
@@ -410,6 +451,27 @@ function FeeRules() {
      tiers: [],
      currency: 'USD',
    });
+  };
+
+  const startEdit = (rule: FeeRule) => {
+    setForm({
+      name: rule.name,
+      ruleType: rule.ruleType,
+      basis: (rule.basis as FeeRuleBasis) ?? 'PER_CONTAINER',
+      freightType: rule.freightType ?? '',
+      tradeDirection: rule.tradeDirection ?? '',
+      cargoTypeCode: rule.cargoTypeCode ?? '',
+      containerType: rule.containerType ?? '',
+      vehicleType: rule.vehicleType ?? '',
+      freeDays: rule.freeDays ?? 3,
+      freeHours: rule.freeHours ?? 3,
+      ratePerDay: rule.ratePerDay ?? 0,
+      tiers: (rule.tiers ?? []).map((t) => ({ fromDay: t.fromDay, toDay: t.toDay, ratePerDay: t.ratePerDay })),
+      currency: rule.currency ?? 'USD',
+    });
+    setEditingId(rule.id);
+    setOpen(true);
+  };

  const addTier = () =>
    setForm((f) => {
@@ -479,12 +541,17 @@ function FeeRules() {
    };

    try {
-      await create.mutateAsync(payload as never);
-      toast({ title: 'Fee rule created' });
+      if (editingId) {
+        await update.mutateAsync({ id: editingId, payload: payload as never });
+        toast({ title: 'Fee rule updated' });
+      } else {
+        await create.mutateAsync(payload as never);
+        toast({ title: 'Fee rule created' });
+      }
      setOpen(false);
      resetForm();
    } catch (error) {
-      if (tiers.length && isUnknownTiersError(error)) {
+      if (!editingId && tiers.length && isUnknownTiersError(error)) {
        const legacyPayload: Omit<typeof payload, 'tiers'> = {
          name: payload.name,
          ruleType: payload.ruleType,
@@ -505,7 +572,7 @@ function FeeRules() {
        resetForm();
        return;
      }
-      toast({ variant: 'destructive', title: 'Create failed', description: extractErrorMessage(error) });
+      toast({ variant: 'destructive', title: editingId ? 'Update failed' : 'Create failed', description: extractErrorMessage(error) });
    }
  };

@@ -515,7 +582,7 @@ function FeeRules() {
        <Text c="dimmed" size="sm">
          {rules.length} rule(s) - most specific match applies
        </Text>
-        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>
+        <Button leftSection={<Plus size={16} />} onClick={() => { resetForm(); setOpen(true); }}>
          New fee rule
        </Button>
      </Group>
@@ -577,14 +644,19 @@ function FeeRules() {
                    </Badge>
                  </Table.Td>
                  <Table.Td ta="right">
-                    <ActionIcon
-                      variant="subtle"
-                      color="red"
-                      onClick={() => remove.mutate(rule.id)}
-                      title="Delete"
-                    >
-                      <Trash2 size={16} />
-                    </ActionIcon>
+                    <Group gap={4} justify="flex-end" wrap="nowrap">
+                      <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(rule)} title="Edit">
+                        <Pencil size={16} />
+                      </ActionIcon>
+                      <ActionIcon
+                        variant="subtle"
+                        color="red"
+                        onClick={() => remove.mutate(rule.id)}
+                        title="Delete"
+                      >
+                        <Trash2 size={16} />
+                      </ActionIcon>
+                    </Group>
                  </Table.Td>
                </Table.Tr>
              ))}
@@ -593,7 +665,7 @@ function FeeRules() {
        </Table.ScrollContainer>
      )}

-      <Modal opened={open} onClose={() => setOpen(false)} title="New fee rule" centered size="lg">
+      <Modal opened={open} onClose={() => { setOpen(false); resetForm(); }} title={editingId ? 'Edit fee rule' : 'New fee rule'} centered size="lg">
        <Stack gap="sm">
          <Group grow>
            <TextInput
@@ -775,11 +847,11 @@ function FeeRules() {
          </Stack>
          )}
          <Group justify="flex-end" mt="sm">
-            <Button variant="default" onClick={() => setOpen(false)}>
+            <Button variant="default" onClick={() => { setOpen(false); resetForm(); }}>
              Cancel
            </Button>
-            <Button loading={create.isPending} onClick={submit}>
-              Create
+            <Button loading={create.isPending || update.isPending} onClick={submit}>
+              {editingId ? 'Save changes' : 'Create'}
            </Button>
          </Group>
        </Stack>