implement freight permissions for trains, wagons, and routes

apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderDetailPage.tsx

@@ -45,6 +45,8 @@ import {
 import { TrainCompositionDiagram } from "@/components/trainScheduling/TrainCompositionDiagram";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { api } from "@/services/api";
+import { useAuth } from "@/auth/useAuth";
+import { canFleetAction, FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { useToast } from "@/hooks/use-toast";
 
 const parseError = (error: unknown, fallback: string) => {
@@ -76,6 +78,12 @@ export default function TrainBuilderDetailPage() {
   const [yardModalOpen, setYardModalOpen] = useState(false);
   const [disbandOpen, setDisbandOpen] = useState(false);
   const [deactivateOpen, setDeactivateOpen] = useState(false);
+  const { user } = useAuth();
+  const canUpdate = canFleetAction(user, "trains", "update");
+  const canDelete = canFleetAction(user, "trains", "delete");
+  const canAssign =
+    hasPermission(user, FREIGHT_PERMS.trains.assignWagons) ||
+    hasPermission(user, FREIGHT_PERMS.fleet.manage);
 
   const compositionQuery = useQuery(
     api.trainBuilder.composition.queryOptions({ input: { id }, enabled: Boolean(id) }),
@@ -162,59 +170,67 @@ export default function TrainBuilderDetailPage() {
           </Group>
         }
         action={
-          <Menu position="bottom-end" withinPortal shadow="md" width={220}>
-            <Menu.Target>
-              <Button variant="default" rightSection={<MoreHorizontal size={16} />}>
-                Actions
-              </Button>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<Replace size={15} />}
-                disabled={!composition.editable}
-                onClick={() => setLocoModalOpen(true)}
-              >
-                Change locomotives
-              </Menu.Item>
-              <Menu.Item
-                leftSection={<MapPin size={15} />}
-                disabled={!composition.editable}
-                onClick={() => setYardModalOpen(true)}
-              >
-                Change yard
-              </Menu.Item>
-              {composition.status === "DEACTIVATED" ? (
-                <Menu.Item
-                  leftSection={<Power size={15} />}
-                  disabled={blockingLocomotives.length > 0}
-                  onClick={() =>
-                    void withToast(async () => {
-                      await activate.mutateAsync(composition.id);
-                      toast({ title: `Train ${composition.code} reactivated` });
-                    }, "Could not reactivate train")
-                  }
-                >
-                  Reactivate train
-                </Menu.Item>
-              ) : (
-                <Menu.Item
-                  leftSection={<PowerOff size={15} />}
-                  disabled={composition.activeSchedules.length > 0}
-                  onClick={() => setDeactivateOpen(true)}
-                >
-                  Deactivate train
-                </Menu.Item>
-              )}
-              <Menu.Item
-                color="red"
-                leftSection={<Trash2 size={15} />}
-                disabled={composition.activeSchedules.length > 0}
-                onClick={() => setDisbandOpen(true)}
-              >
-                Disband train
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
+          canUpdate || canDelete ? (
+            <Menu position="bottom-end" withinPortal shadow="md" width={220}>
+              <Menu.Target>
+                <Button variant="default" rightSection={<MoreHorizontal size={16} />}>
+                  Actions
+                </Button>
+              </Menu.Target>
+              <Menu.Dropdown>
+                {canUpdate ? (
+                  <>
+                    <Menu.Item
+                      leftSection={<Replace size={15} />}
+                      disabled={!composition.editable}
+                      onClick={() => setLocoModalOpen(true)}
+                    >
+                      Change locomotives
+                    </Menu.Item>
+                    <Menu.Item
+                      leftSection={<MapPin size={15} />}
+                      disabled={!composition.editable}
+                      onClick={() => setYardModalOpen(true)}
+                    >
+                      Change yard
+                    </Menu.Item>
+                    {composition.status === "DEACTIVATED" ? (
+                      <Menu.Item
+                        leftSection={<Power size={15} />}
+                        disabled={blockingLocomotives.length > 0}
+                        onClick={() =>
+                          void withToast(async () => {
+                            await activate.mutateAsync(composition.id);
+                            toast({ title: `Train ${composition.code} reactivated` });
+                          }, "Could not reactivate train")
+                        }
+                      >
+                        Reactivate train
+                      </Menu.Item>
+                    ) : (
+                      <Menu.Item
+                        leftSection={<PowerOff size={15} />}
+                        disabled={composition.activeSchedules.length > 0}
+                        onClick={() => setDeactivateOpen(true)}
+                      >
+                        Deactivate train
+                      </Menu.Item>
+                    )}
+                  </>
+                ) : null}
+                {canDelete ? (
+                  <Menu.Item
+                    color="red"
+                    leftSection={<Trash2 size={15} />}
+                    disabled={composition.activeSchedules.length > 0}
+                    onClick={() => setDisbandOpen(true)}
+                  >
+                    Disband train
+                  </Menu.Item>
+                ) : null}
+              </Menu.Dropdown>
+            </Menu>
+          ) : undefined
         }
       />
 
@@ -259,16 +275,18 @@ export default function TrainBuilderDetailPage() {
               .
             </Text>
             <Group gap="xs">
-              <Button
-                size="compact-sm"
-                variant="light"
-                color="red"
-                leftSection={<Replace size={14} />}
-                disabled={!composition.editable}
-                onClick={() => setLocoModalOpen(true)}
-              >
-                Detach & replace locomotives
-              </Button>
+              {canUpdate ? (
+                <Button
+                  size="compact-sm"
+                  variant="light"
+                  color="red"
+                  leftSection={<Replace size={14} />}
+                  disabled={!composition.editable}
+                  onClick={() => setLocoModalOpen(true)}
+                >
+                  Detach & replace locomotives
+                </Button>
+              ) : null}
               <Button
                 size="compact-sm"
                 variant="subtle"
@@ -330,7 +348,7 @@ export default function TrainBuilderDetailPage() {
       </Stack>
 
       <Grid gap="lg" align="stretch">
-        {composition.editable ? (
+        {composition.editable && canAssign ? (
           <Grid.Col span={{ base: 12, md: 5 }}>
             <Card h="100%">
               <Stack gap="sm">
@@ -355,7 +373,7 @@ export default function TrainBuilderDetailPage() {
             </Card>
           </Grid.Col>
         ) : null}
-        <Grid.Col span={{ base: 12, md: composition.editable ? 7 : 12 }}>
+        <Grid.Col span={{ base: 12, md: composition.editable && canAssign ? 7 : 12 }}>
           <Card h="100%">
             <Stack gap="sm">
               <Text fw={600}>Wagon order</Text>
@@ -364,7 +382,7 @@ export default function TrainBuilderDetailPage() {
               </Text>
               <ConsistWagonList
                 wagons={composition.wagons}
-                editable={composition.editable}
+                editable={composition.editable && canAssign}
                 busy={busy}
                 onReorder={(wagonIds) =>
                   void withToast(

apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx

@@ -35,6 +35,8 @@ import {
   trainStatusLabel,
 } from "@/components/trainBuilder/trainStatus";
 import { api } from "@/services/api";
+import { useAuth } from "@/auth/useAuth";
+import { canFleetAction } from "@/lib/permissions";
 import type {
   BuiltTrainListFilters,
   BuiltTrainStatus,
@@ -54,6 +56,9 @@ export default function TrainBuilderListPage() {
   const [yardFilter, setYardFilter] = useState("ALL");
   const [buildOpen, setBuildOpen] = useState(false);
   const [editTarget, setEditTarget] = useState<BuiltTrainSummary | null>(null);
+  const { user } = useAuth();
+  const canCreate = canFleetAction(user, "trains", "create");
+  const canUpdate = canFleetAction(user, "trains", "update");
 
   const resetPage = useCallback(() => {
     setPagination((prev) =>
@@ -240,24 +245,25 @@ export default function TrainBuilderListPage() {
         id: "actions",
         header: "",
         meta: { headerClassName, cellClassName },
-        cell: ({ row }) => (
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            aria-label={`Edit train ${row.original.code}`}
-            title="Edit name & train numbers"
-            onClick={(e) => {
-              // Row click navigates to the detail page — keep the edit local.
-              e.stopPropagation();
-              setEditTarget(row.original);
-            }}
-          >
-            <Pencil size={15} />
-          </ActionIcon>
-        ),
+        cell: ({ row }) =>
+          canUpdate ? (
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              aria-label={`Edit train ${row.original.code}`}
+              title="Edit name & train numbers"
+              onClick={(e) => {
+                // Row click navigates to the detail page — keep the edit local.
+                e.stopPropagation();
+                setEditTarget(row.original);
+              }}
+            >
+              <Pencil size={15} />
+            </ActionIcon>
+          ) : null,
       },
     ];
-  }, []);
+  }, [canUpdate]);
 
   const tableStatus = trainsQuery.isLoading
     ? "loading"
@@ -271,9 +277,11 @@ export default function TrainBuilderListPage() {
         title="Train Builder"
         subtitle="Assemble coded trains from locomotives and wagons in a yard, ready to schedule as a unit."
         action={
-          <Button leftSection={<Hammer size={18} />} onClick={() => setBuildOpen(true)}>
-            Build train
-          </Button>
+          canCreate ? (
+            <Button leftSection={<Hammer size={18} />} onClick={() => setBuildOpen(true)}>
+              Build train
+            </Button>
+          ) : undefined
         }
       />