added project, material, sources to portal

app/portal/laser-sources/page.tsx

@@ -1,9 +1,18 @@
 // app/portal/laser-sources/page.tsx
-export default function LaserSourcesPage() {
+import dynamic from "next/dynamic";
+
+export const metadata = { title: "MakerDash • Laser Sources" };
+
+// Mount the existing canonical page (adjust path if needed)
+const LasersView = dynamic(() => import("@/app/lasers/page"), { ssr: false });
+
+export default function LaserSourcesPortalPage() {
     return (
         <div className="rounded-lg border p-6">
-        <h2 className="text-xl font-semibold mb-2">Laser Sources</h2>
-        <p className="opacity-80">WIP: list & manage sources here.</p>
+        <h2 className="mb-4 text-xl font-semibold">Laser Sources</h2>
+        <div className="rounded-md border p-4">
+        <LasersView />
+        </div>
         </div>
     );
 }

app/portal/materials/page.tsx

@@ -1,9 +1,13 @@
 // app/portal/materials/page.tsx
-export default function MaterialsPage() {
+import MaterialsSwitcher from "@/components/portal/MaterialsSwitcher";
+
+export const metadata = { title: "MakerDash • Materials" };
+
+export default function MaterialsPortalPage() {
     return (
         <div className="rounded-lg border p-6">
-        <h2 className="text-xl font-semibold mb-2">Materials</h2>
-        <p className="opacity-80">WIP: materials library management.</p>
+        <h2 className="mb-4 text-xl font-semibold">Materials</h2>
+        <MaterialsSwitcher />
         </div>
     );
 }

app/portal/projects/page.tsx

@@ -1,9 +1,18 @@
 // app/portal/projects/page.tsx
-export default function ProjectsPage() {
+import dynamic from "next/dynamic";
+
+export const metadata = { title: "MakerDash • Projects" };
+
+// Mount the existing canonical page (adjust path if needed)
+const ProjectsView = dynamic(() => import("@/app/projects/page"), { ssr: false });
+
+export default function ProjectsPortalPage() {
     return (
         <div className="rounded-lg border p-6">
-        <h2 className="text-xl font-semibold mb-2">Projects</h2>
-        <p className="opacity-80">WIP: authenticated project list & details.</p>
+        <h2 className="mb-4 text-xl font-semibold">Projects</h2>
+        <div className="rounded-md border p-4">
+        <ProjectsView />
+        </div>
         </div>
     );
 }

app/projects/page.tsx.bak

@@ -1,273 +0,0 @@
-"use client";
-
-import { useEffect, useState, useMemo } from "react";
-import { useSearchParams } from "next/navigation";
-import Link from "next/link";
-import Image from "next/image";
-
-export default function ProjectsPage() {
-  const searchParams = useSearchParams();
-  const initialQuery = searchParams.get("query") || "";
-
-  const [query, setQuery] = useState(initialQuery);
-  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
-  const [projects, setProjects] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [categories] = useState([
-    "assets",
-    "documents",
-    "fixtures",
-    "projects",
-    "templates",
-    "test files",
-    "tools"
-  ]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedQuery(query), 300);
-    return () => clearTimeout(timer);
-  }, [query]);
-
-  useEffect(() => {
-    fetch(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects?fields=submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title&limit=-1fields=*.*`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setProjects(data.data || []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, []);
-
-  const highlight = (text: string) => {
-    if (!debouncedQuery) return text;
-    const regex = new RegExp(`(${debouncedQuery})`, "gi");
-    return text?.replace(regex, '<mark>$1</mark>');
-  };
-
-  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
-
-  const filtered = useMemo(() => {
-    const q = normalize(debouncedQuery);
-    return projects.filter((entry) => {
-      const fieldsToSearch = [
-        entry.title ?? "",
-        entry.uploader ?? "",
-        entry.category ?? "",
-        Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
-      ];
-      return fieldsToSearch.filter(Boolean).some((field) =>
-        normalize(field).includes(q)
-      );
-    });
-  }, [projects, debouncedQuery]);
-
-  const tagCounts = useMemo(() => {
-    const counts: Record<string, number> = {};
-    projects.forEach((p) => {
-      if (Array.isArray(p.tags)) {
-        p.tags.forEach((tag) => {
-          counts[tag] = (counts[tag] || 0) + 1;
-        });
-      }
-    });
-    return counts;
-  }, [projects]);
-
-  const popularTags = Object.entries(tagCounts)
-    .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
-    .slice(0, 10)
-    .map(([tag]) => tag);
-
-  const recentTags = [...projects]
-    .sort((a, b) => b.submission_id - a.submission_id)
-    .slice(0, 10)
-    .flatMap((p) => p.tags || [])
-    .filter((tag, i, self) => self.indexOf(tag) === i)
-    .slice(0, 10);
-
-  const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
-  const totalTags = Object.keys(tagCounts).length;
-
-  return (
-    <div className="p-6 max-w-7xl mx-auto">
-      <style jsx global>{`
-        mark {
-          background: #ffde59;
-          color: #242424;
-          padding: 0 2px;
-          border-radius: 2px;
-        }
-        .card-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-          gap: 1rem;
-        }
-        .project-card {
-          display: flex;
-          background-color: #242424;
-          color: var(--card-foreground);
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          overflow: hidden;
-          height: 150px;
-        }
-        .project-image {
-          width: 150px;
-          height: 150px;
-          object-fit: cover;
-        }
-        .project-content {
-          padding: 0.75rem;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-        }
-        .project-tags {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .project-tags span,
-        .flex.flex-wrap span {
-          display: inline-block;
-          margin-right: 0.25rem;
-          margin-bottom: 0.25rem;
-          padding: 0.25rem 0.5rem;
-          background-color: var(--muted);
-          color: var(--foreground);
-          border-radius: 0.25rem;
-          font-size: 0.7rem;
-          cursor: pointer;
-          transition: background-color 0.2s ease;
-        }
-        .project-tags span:hover,
-        .flex.flex-wrap span:hover {
-          background-color: #ffde59;
-          color: #000;
-        }
-      `}</style>
-
-      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
-        <div className="card bg-card text-card-foreground p-4">
-          <h1 className="text-xl font-bold mb-2">Community Projects</h1>
-          <input
-            type="search"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search projects..."
-            className="w-full dark:bg-background border border-border rounded-md p-2"
-          />
-          <Link
-            href="/"
-            className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
-          >
-            ← Back to Main Menu
-          </Link>
-        </div>
-        <div className="card bg-card text-card-foreground p-4">
-          <h2 className="text-md font-semibold mb-2">Popular Tags</h2>
-          {popularTags.length > 0 ? (
-            <div className="flex flex-wrap">
-              {popularTags.map((tag, i) => (
-                <span key={i} onClick={() => setQuery(tag)} title={tag}>
-                  {tag}
-                </span>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No tags yet.</p>
-          )}
-        </div>
-        <div className="card bg-card text-card-foreground p-4">
-          <h2 className="text-md font-semibold mb-2">Recent Tags</h2>
-          {recentTags.length > 0 ? (
-            <div className="flex flex-wrap">
-              {recentTags.map((tag, i) => (
-                <span key={i} onClick={() => setQuery(tag)} title={tag}>
-                  {tag}
-                </span>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No recent tags.</p>
-          )}
-        </div>
-        <div className="card bg-card text-card-foreground p-4">
-          <h2 className="text-md font-semibold mb-2">Project Stats</h2>
-          <p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
-          <p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
-          <p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
-        </div>
-        <div className="card bg-card text-card-foreground p-4">
-          <h2 className="text-md font-semibold mb-2">Browse by Category</h2>
-          <div className="flex flex-wrap">
-            {categories.map((cat, i) => (
-              <span key={i} onClick={() => setQuery(cat)}>
-                {cat === "test_files" ? "test files" : cat}
-              </span>
-            ))}
-          </div>
-        </div>
-        <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
-          <div>
-            <h2 className="text-md font-semibold mb-2">Submit a Project</h2>
-            <p className="text-sm text-muted-foreground mb-2">
-              Have a cool design, tool, or jig to share? Submit it to the community database.
-            </p>
-          </div>
-          <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
-            Coming Soon
-          </button>
-        </div>
-      </div>
-
-      <hr className="my-8 border-border" />
-
-      {loading ? (
-        <p className="text-muted">Loading projects...</p>
-      ) : filtered.length === 0 ? (
-        <p className="text-muted">No projects found.</p>
-      ) : (
-        <div className="card-grid">
-          {filtered.map((project) => (
-            <div key={project.submission_id} className="project-card">
-              <Image
-                src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
-                alt={project.p_image?.title || "Project image"}
-                width={150}
-                height={150}
-                className="project-image"
-              />
-              <div className="project-content">
-                <div>
-                  <Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
-                    {project.title || "Untitled"}
-                  </Link>
-                  <p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
-                  <p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
-                </div>
-                <div className="project-tags">
-                  {Array.isArray(project.tags) && project.tags.length > 0
-                    ? project.tags.map((tag, i) => (
-                        <span
-                          key={i}
-                          onClick={() => setQuery(tag)}
-                          title={tag}
-                        >
-                          {tag}
-                        </span>
-                      ))
-                    : ""}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-

components/portal/MaterialsSwitcher.tsx

@@ -0,0 +1,59 @@
+// components/portal/MaterialsSwitcher.tsx
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import dynamic from "next/dynamic";
+import { cn } from "@/lib/utils";
+
+// Reuse the *existing* canonical pages.
+// Adjust paths if your folders differ.
+const MaterialsPanel = dynamic(() => import("@/app/materials/materials/page"), { ssr: false });
+const CoatingsPanel  = dynamic(() => import("@/app/materials/materials-coatings/page"), { ssr: false });
+
+const TABS = [
+    { key: "materials",         label: "Materials" },
+{ key: "materials-coatings", label: "Coatings" },
+];
+
+function Panel({ tab }: { tab: string }) {
+    switch (tab) {
+        case "materials":          return <MaterialsPanel />;
+        case "materials-coatings": return <CoatingsPanel />;
+        default:                   return <MaterialsPanel />;
+    }
+}
+
+export default function MaterialsSwitcher() {
+    const router = useRouter();
+    const sp = useSearchParams();
+    const active = sp.get("t") || "materials";
+
+    function setTab(nextKey: string) {
+        const q = new URLSearchParams(sp.toString());
+        q.set("t", nextKey);
+        router.replace(`/portal/materials?${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>
+
+        <div className="rounded-md border p-4">
+        <Panel tab={active} />
+        </div>
+        </div>
+    );
+}