see /admin/mapping page.

app/builder/page.tsx

@@ -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],
@@ -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">