added sub-tabs for 'additions'
This commit is contained in:
parent
d0e6c0bf2f
commit
049f5fb841
5 changed files with 176 additions and 32 deletions
|
|
@ -1,5 +1,5 @@
|
|||
// app/portal/projects/page.tsx
|
||||
import ProjectsPage from "@/app/projects/page";
|
||||
import ProjectsSwitcher from "@/components/portal/ProjectsSwitcher";
|
||||
|
||||
export const metadata = { title: "MakerDash • Projects" };
|
||||
|
||||
|
|
@ -7,10 +7,7 @@ export default function ProjectsPortalPage() {
|
|||
return (
|
||||
<div className="rounded-lg border p-6">
|
||||
<h2 className="mb-4 text-xl font-semibold">Projects</h2>
|
||||
<div className="rounded-md border p-4">
|
||||
{/* Render canonical projects page directly (Server Component OK) */}
|
||||
<ProjectsPage />
|
||||
</div>
|
||||
<ProjectsSwitcher />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// app/portal/rigs/page.tsx
|
||||
import RigsListClient from "@/app/rigs/RigsListClient";
|
||||
import RigsSwitcher from "@/components/portal/RigsSwitcher";
|
||||
|
||||
export const metadata = { title: "MakerDash • Rigs" };
|
||||
|
||||
|
|
@ -7,9 +7,7 @@ export default function RigsPortalPage() {
|
|||
return (
|
||||
<div className="rounded-lg border p-6">
|
||||
<h2 className="mb-4 text-xl font-semibold">Rigs</h2>
|
||||
<div className="rounded-md border p-4">
|
||||
<RigsListClient />
|
||||
</div>
|
||||
<RigsSwitcher />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
74
components/portal/ProjectsSwitcher.tsx
Normal file
74
components/portal/ProjectsSwitcher.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// components/portal/ProjectsSwitcher.tsx
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import dynamic from "next/dynamic";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Canonical viewer page; use dynamic in a client component
|
||||
const ProjectsView = dynamic(() => import("@/app/projects/page"), { ssr: false });
|
||||
|
||||
const TABS = [
|
||||
{ key: "list", label: "Projects" },
|
||||
{ key: "add", label: "Add Project" },
|
||||
];
|
||||
|
||||
function Panel({ tab }: { tab: string }) {
|
||||
switch (tab) {
|
||||
case "list":
|
||||
return (
|
||||
<div className="rounded-md border p-4">
|
||||
<ProjectsView />
|
||||
</div>
|
||||
);
|
||||
case "add":
|
||||
return (
|
||||
<div className="rounded-md border p-4 space-y-3">
|
||||
<h3 className="font-semibold">Add Project</h3>
|
||||
<div className="text-sm opacity-70">
|
||||
Project submission form will be embedded here. We’ll wire to an authenticated endpoint (e.g. <code>POST /api/my/projects</code>) and auto-assign owner.
|
||||
</div>
|
||||
<ul className="text-sm list-disc pl-5 opacity-70">
|
||||
<li>Fields: name (required), description, attachments, etc.</li>
|
||||
<li>Server derives <code>owner</code> from bearer (<code>/users/me</code>)</li>
|
||||
<li>On success: toast + navigate back to list</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function ProjectsSwitcher() {
|
||||
const router = useRouter();
|
||||
const sp = useSearchParams();
|
||||
const active = sp.get("t") || "list";
|
||||
|
||||
function setTab(nextKey: string) {
|
||||
const q = new URLSearchParams(sp.toString());
|
||||
q.set("t", nextKey);
|
||||
router.replace(`/portal/projects?${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>
|
||||
|
||||
<Panel tab={active} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
components/portal/RigsSwitcher.tsx
Normal file
71
components/portal/RigsSwitcher.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// components/portal/RigsSwitcher.tsx
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import RigsListClient from "@/app/rigs/RigsListClient";
|
||||
|
||||
const TABS = [
|
||||
{ key: "my", label: "My Rigs" },
|
||||
{ key: "add", label: "Add Rig" },
|
||||
];
|
||||
|
||||
function Panel({ tab }: { tab: string }) {
|
||||
switch (tab) {
|
||||
case "my":
|
||||
return (
|
||||
<div className="rounded-md border p-4">
|
||||
<RigsListClient />
|
||||
</div>
|
||||
);
|
||||
case "add":
|
||||
// Placeholder: we’ll retrofit the builder (or a minimal create form) next sprint
|
||||
return (
|
||||
<div className="rounded-md border p-4 space-y-3">
|
||||
<div className="text-sm opacity-70">
|
||||
Add Rig form will go here. We’ll wire to <code>POST /api/my/rigs</code> with user auth.
|
||||
</div>
|
||||
<ul className="text-sm list-disc pl-5 opacity-70">
|
||||
<li>Fields: name (required), rig_type (required), optional notes</li>
|
||||
<li>Use <code>/api/options/user_rig_type</code> for types</li>
|
||||
<li>On success: refresh list tab</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function RigsSwitcher() {
|
||||
const router = useRouter();
|
||||
const sp = useSearchParams();
|
||||
const active = sp.get("t") || "my";
|
||||
|
||||
function setTab(nextKey: string) {
|
||||
const q = new URLSearchParams(sp.toString());
|
||||
q.set("t", nextKey);
|
||||
router.replace(`/portal/rigs?${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>
|
||||
|
||||
<Panel tab={active} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,36 +5,42 @@ import { useRouter, useSearchParams } from "next/navigation";
|
|||
import dynamic from "next/dynamic";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* IMPORTANT:
|
||||
* We dynamically import the existing settings pages so you do NOT have to move their contents.
|
||||
* These imports point directly at your canonical routes:
|
||||
* /app/settings/fiber/page.tsx
|
||||
* /app/settings/uv/page.tsx
|
||||
* /app/settings/co2-galvo/page.tsx
|
||||
* /app/settings/co2-gantry/page.tsx
|
||||
*
|
||||
* If any of those filenames differ, update the paths below accordingly.
|
||||
*/
|
||||
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
|
||||
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
|
||||
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
|
||||
// Use existing canonical pages; dynamic imports in a client component are OK
|
||||
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
|
||||
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
|
||||
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
|
||||
const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });
|
||||
|
||||
const TABS = [
|
||||
{ key: "fiber", label: "Fiber" },
|
||||
{ key: "uv", label: "UV" },
|
||||
{ key: "co2-galvo", label: "CO₂ Galvo" },
|
||||
{ key: "fiber", label: "Fiber" },
|
||||
{ key: "uv", label: "UV" },
|
||||
{ key: "co2-gantry", label: "CO₂ Gantry" },
|
||||
{ key: "co2-galvo", label: "CO₂ Galvo" },
|
||||
{ key: "add", label: "Add Setting" }, // new
|
||||
];
|
||||
|
||||
function Panel({ tab }: { tab: string }) {
|
||||
switch (tab) {
|
||||
case "fiber": return <FiberPanel />;
|
||||
case "uv": return <UVPanel />;
|
||||
case "co2-galvo": return <CO2GalvoPanel />;
|
||||
case "fiber": return <FiberPanel />;
|
||||
case "uv": return <UVPanel />;
|
||||
case "co2-galvo": return <CO2GalvoPanel />;
|
||||
case "co2-gantry": return <CO2GantryPanel />;
|
||||
default: return <FiberPanel />;
|
||||
case "add":
|
||||
return (
|
||||
<div className="rounded-md border p-4 space-y-3">
|
||||
<h3 className="font-semibold">Add Setting</h3>
|
||||
<div className="text-sm opacity-70">
|
||||
Submission form will be embedded here. We’ll retrofit your existing public submission to require auth and record owner.
|
||||
</div>
|
||||
<ul className="text-sm list-disc pl-5 opacity-70">
|
||||
<li>Route: <code>POST /api/my/settings/:type</code> (fiber|uv|co2-gantry|co2-galvo)</li>
|
||||
<li>Server adds <code>owner</code> using <code>/users/me</code> via bearer</li>
|
||||
<li>On success: toast + refresh current view tab</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return <FiberPanel />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +57,6 @@ export default function SettingsSwitcher() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{/* sub-tabs */}
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
{TABS.map(({ key, label }) => (
|
||||
<button
|
||||
|
|
@ -67,7 +72,6 @@ export default function SettingsSwitcher() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* panel */}
|
||||
<div className="rounded-md border p-4">
|
||||
<Panel tab={active} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue