Merge branch 'it-works' into develop

2025-12-07 16:54:37 -05:00
parent be03424e26 9e5b86967b
commit ce05593127
8 changed files with 1070 additions and 75 deletions
@@ -4,21 +4,19 @@ import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { CATEGORIES } from "@/data/gunbuilderParts";
-import { CATEGORY_TO_PART_ROLES } from "@/data/partRoleMappings";
 import type { CategoryId, Part } from "@/types/gunbuilder";

 type ViewMode = "card" | "list";

 type GunbuilderProductFromApi = {
-  id: string;
+  id: number;
  name: string;
  brand: string;
  platform: string;
  partRole: string;
  price: number | null;
-  mainImageUrl: string | null;
+  imageUrl: string | null;
  buyUrl: string | null;
-  // optional stock flag if/when backend sends it
  inStock?: boolean | null;
 };

@@ -83,19 +81,14 @@ export default function CategoryPage() {

    async function fetchCategoryParts() {
      try {
-         setLoading(true);
+        setLoading(true);
        setError(null);

-        // FIX: determine which backend partRoles map to this category
-    const roles = CATEGORY_TO_PART_ROLES[categoryId] ?? [];
-
        const search = new URLSearchParams();
        search.set("platform", "AR-15");
-        roles.forEach((r) => search.append("partRoles", r));
+        search.set("categorySlug", categoryId);

-        const url = `${API_BASE_URL}/api/products/gunbuilder${
-          roles.length ? `?${search.toString()}` : ""
-        }`;
+        const url = `${API_BASE_URL}/api/gunbuilder/products/by-category?${search.toString()}`;

        const res = await fetch(url, { signal: controller.signal });

@@ -106,12 +99,12 @@ export default function CategoryPage() {
        const data: GunbuilderProductFromApi[] = await res.json();

        const normalized: UiPart[] = data.map((p) => ({
-          id: p.id,
+          id: String(p.id),                 // normalize to string for BuildState
          categoryId,
          name: p.name,
          brand: p.brand,
          price: p.price ?? 0,
-          imageUrl: p.mainImageUrl ?? undefined,
+          imageUrl: p.imageUrl ?? undefined, // match backend field name
          url: p.buyUrl ?? undefined,
          notes: undefined,
          inStock: p.inStock ?? true,
@@ -4,9 +4,10 @@ import { useMemo, useState, useEffect } from "react";
 import Link from "next/link";
 import { useSearchParams, useRouter } from "next/navigation";
 import { CATEGORIES } from "@/data/gunbuilderParts";
+import { BUILDER_SLOTS, isSlotSatisfied } from "@/data/builderSlots";
 import type { CategoryId, Part } from "@/types/gunbuilder";
 import { PART_ROLE_TO_CATEGORY } from "@/data/partRoleMappings";
-import { Pencil, Link2 } from "lucide-react";
+import { Pencil, Link2, Square, CheckSquare } from "lucide-react";

 type GunbuilderProductFromApi = {
  id: number; // backend numeric id
@@ -205,6 +206,17 @@ export default function GunbuilderPage() {
      .filter(Boolean) as Part[];
  }, [build, parts]);

+  const selectedByCategory: Record<CategoryId, unknown> = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(build).map(([categoryId, partId]) => [
+          categoryId as CategoryId,
+          partId ? true : false,
+        ]),
+      ) as Record<CategoryId, unknown>,
+    [build],
+  );
+
  const totalPrice = useMemo(
    () => selectedParts.reduce((sum, p) => sum + p.price, 0),
    [selectedParts],
@@ -338,10 +350,10 @@ export default function GunbuilderPage() {
        <header className="mb-6">
          <div>
            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
-              Shadow Standard Co.
+              BATTL BUILDERS
            </p>
            <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
-              The Build Bench: <span className="text-amber-300">Early Access</span>
+              BattlBuilder <span className="text-amber-300">Early Access</span>
            </h1>
            <p className="mt-2 text-sm text-zinc-400 max-w-xl">
              Explore components from trusted brands, choose one part per
@@ -352,8 +364,9 @@ export default function GunbuilderPage() {
          </div>
        </header>

-                {/* Build summary panel */}
-                <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+
+        {/* Build summary panel */}
+        <section className="mb-6 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
          {/* Left: title + totals + primary actions */}
          <div className="flex flex-col gap-2">
            <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-300">
@@ -462,6 +475,38 @@ export default function GunbuilderPage() {
          </div>
        </section>

+        {/* Build status strip */}
+        <section className="mb-6 space-y-3">
+          <h2 className="text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-zinc-500">
+            Build Status (Needs Refined)
+          </h2>
+          <div className="flex flex-wrap gap-2 md:gap-3">
+            {BUILDER_SLOTS.map((slot) => {
+              const satisfied = isSlotSatisfied(slot, selectedByCategory);
+
+              return (
+                <div
+                  key={slot.id}
+                  className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[0.7rem] md:text-xs ${
+                    satisfied
+                      ? "border-emerald-500/70 bg-emerald-950/50 text-emerald-200"
+                      : "border-zinc-800 bg-zinc-950/80 text-zinc-200"
+                  }`}
+                >
+                  {satisfied ? (
+                    <CheckSquare className="h-4 w-4 text-emerald-400" />
+                  ) : (
+                    <Square className="h-4 w-4 text-zinc-600/80" />
+                  )}
+                  <span className="font-medium truncate max-w-[9rem] md:max-w-[11rem]">
+                    {slot.label}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
        {/* Layout */}
        <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
          <p className="mb-4 text-xs text-zinc-500">