Create monorepo from known-good production state

app/components/portal/SettingsSwitcher.tsx

@@ -0,0 +1,127 @@
+// components/portal/SettingsSwitcher.tsx
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import dynamic from "next/dynamic";
+import { cn } from "@/lib/utils";
+
+// Existing canonical pages (Fiber/UV/Gantry still use their pages for now)
+const FiberPanel     = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
+const UVPanel        = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
+const CO2GalvoPanel  = dynamic(() => import("@/components/portal/panels/CO2GalvoPanel"), { ssr: false });
+const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });
+
+// NEW: embed the submission form in the "Add" tab
+const SettingsSubmit = dynamic(
+    () => import("@/components/forms/SettingsSubmit"),
+                               { ssr: false }
+);
+
+type DataTab = "fiber" | "uv" | "co2-gantry" | "co2-galvo";
+type Tab = DataTab | "add" | "my";
+
+const TABS: { key: Tab; label: string }[] = [
+    { key: "fiber",      label: "Fiber" },
+{ key: "uv",         label: "UV" },
+{ key: "co2-gantry", label: "CO₂ Gantry" },
+{ key: "co2-galvo",  label: "CO₂ Galvo" },
+{ key: "my",         label: "My Settings" },  // ← NEW
+{ key: "add",        label: "Add Setting" },
+];
+
+const isDataTab = (k: string): k is DataTab =>
+k === "fiber" || k === "uv" || k === "co2-gantry" || k === "co2-galvo";
+
+const tabToTarget: Record<DataTab,
+"settings_fiber" | "settings_uv" | "settings_co2gan" | "settings_co2gal"
+> = {
+    fiber: "settings_fiber",
+    uv: "settings_uv",
+    "co2-gantry": "settings_co2gan",
+    "co2-galvo": "settings_co2gal",
+};
+
+function Panel({ tab, lastDataTab }: { tab: Tab; lastDataTab: DataTab }) {
+    switch (tab) {
+        case "fiber":      return <FiberPanel />;
+        case "uv":         return <UVPanel />;
+        case "co2-galvo":  return <CO2GalvoPanel />;
+        case "co2-gantry": return <CO2GantryPanel />;
+        case "add":
+            return (
+                <div className="space-y-3">
+                <h3 className="font-semibold">Add Setting</h3>
+                <SettingsSubmit mode="create" />
+                </div>
+            );
+        case "my":
+            // We navigate away for "My Settings", so this branch is not normally rendered.
+            // Fallback content (just in case someone forces ?t=my on this page):
+            return (
+                <div className="text-sm">
+                Opening <span className="font-medium">My Settings</span>…
+                </div>
+            );
+        default:
+            return <FiberPanel />;
+    }
+}
+
+export default function SettingsSwitcher() {
+    const router = useRouter();
+    const sp = useSearchParams();
+
+    const activeRaw = (sp.get("t") || "fiber").toLowerCase();
+    const active: Tab = (TABS.some(t => t.key === activeRaw) ? activeRaw : "fiber") as Tab;
+
+    // last data tab is taken from ?last=… (or fallback to current active if it’s a data tab)
+    const lastParam = (sp.get("last") || (isDataTab(active) ? active : "fiber")).toLowerCase();
+    const lastDataTab: DataTab = isDataTab(lastParam) ? (lastParam as DataTab) : "fiber";
+
+    function setTab(nextKey: Tab) {
+        // NEW: "My Settings" navigates to its own page
+        if (nextKey === "my") {
+            router.push("/portal/my-settings");
+            return;
+        }
+
+        const q = new URLSearchParams(sp.toString());
+        q.set("t", nextKey);
+
+        // Clear detail-related params when switching tabs to avoid stale state
+        q.delete("view");
+        q.delete("id");
+        q.delete("edit");
+
+        // keep track of last data tab so the Add tab knows which target to preselect
+        if (nextKey === "add") {
+            q.set("last", isDataTab(active) ? (active as DataTab) : lastDataTab);
+        } else if (isDataTab(nextKey)) {
+            q.set("last", nextKey);
+        }
+
+        router.replace(`/portal/laser-settings?${q.toString()}`, { scroll: false });
+    }
+
+    return (
+        <div>
+        <div className="mb-4 flex flex-wrap items-center gap-2">
+        {TABS.map(({ key, label }) => (
+            <button
+            key={key}
+            onClick={() => setTab(key)}
+            className={cn(
+                "rounded-md border px-3 py-1.5 text-sm transition",
+                active === key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+            )}
+            >
+            {label}
+            </button>
+        ))}
+        </div>
+
+        {/* No extra border/padding wrapper → avoids double-framing */}
+        <Panel tab={active} lastDataTab={lastDataTab} />
+        </div>
+    );
+}