booking operations and trains scheduling also allocations

apps/edr-freight-web/backoffice/src/components/fleet/useFleetViewMode.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+
+import type { FleetResourceSlug } from "@/pages/fleet/config/resources";
+
+export type FleetViewMode = "table" | "cards";
+
+const STORAGE_PREFIX = "edr-freight-fleet-view:";
+
+type ViewModeSlug = FleetResourceSlug | "routes" | "train-scheduling-v2";
+
+const readStored = (slug: ViewModeSlug): FleetViewMode => {
+  try {
+    const raw = localStorage.getItem(`${STORAGE_PREFIX}${slug}`);
+    return raw === "cards" ? "cards" : "table";
+  } catch {
+    return "table";
+  }
+};
+
+export const useFleetViewMode = (slug: ViewModeSlug) => {
+  const [viewMode, setViewModeState] = useState<FleetViewMode>(() => readStored(slug));
+
+  useEffect(() => {
+    setViewModeState(readStored(slug));
+  }, [slug]);
+
+  const setViewMode = useCallback(
+    (mode: FleetViewMode) => {
+      setViewModeState(mode);
+      try {
+        localStorage.setItem(`${STORAGE_PREFIX}${slug}`, mode);
+      } catch {
+        /* ignore */
+      }
+    },
+    [slug],
+  );
+
+  return { viewMode, setViewMode };
+};