-
- {BOARD_TYPES.map((bt) => {
- const isSel = boardType === bt.value;
- return (
-
- );
- })}
+
+ {/* Row 1: Vesper family */}
+
+ {BOARD_TYPES.filter((b) => b.family === "vesper").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+ {/* Row 2: Agnus family β 2 cols left-aligned */}
+
+
+ {BOARD_TYPES.filter((b) => b.family === "agnus").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+
+ {/* Row 3: Chronos family β 2 cols left-aligned */}
+
+
+ {BOARD_TYPES.filter((b) => b.family === "chronos").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+
diff --git a/frontend/src/manufacturing/DeviceInventory.jsx b/frontend/src/manufacturing/DeviceInventory.jsx
index 96c2b11..69be9c0 100644
--- a/frontend/src/manufacturing/DeviceInventory.jsx
+++ b/frontend/src/manufacturing/DeviceInventory.jsx
@@ -5,16 +5,23 @@ import api from "../api/client";
// βββ constants ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+// Row layout: Vesper Pro / Vesper Plus / Vesper | Agnus / Agnus Mini | Chronos Pro / Chronos
const BOARD_TYPES = [
- { value: "vs", name: "VESPER", codename: "vesper-basic" },
- { value: "vp", name: "VESPER PLUS", codename: "vesper-plus" },
- { value: "vx", name: "VESPER PRO", codename: "vesper-pro" },
- { value: "cb", name: "CHRONOS", codename: "chronos-basic" },
- { value: "cp", name: "CHRONOS PRO", codename: "chronos-pro" },
- { value: "am", name: "AGNUS MINI", codename: "agnus-mini" },
- { value: "ab", name: "AGNUS", codename: "agnus-basic" },
+ { value: "vx", name: "VESPER PRO", codename: "vesper-pro", family: "vesper" },
+ { value: "vp", name: "VESPER PLUS", codename: "vesper-plus", family: "vesper" },
+ { value: "vs", name: "VESPER", codename: "vesper-basic", family: "vesper" },
+ { value: "ab", name: "AGNUS", codename: "agnus-basic", family: "agnus" },
+ { value: "am", name: "AGNUS MINI", codename: "agnus-mini", family: "agnus" },
+ { value: "cp", name: "CHRONOS PRO", codename: "chronos-pro", family: "chronos" },
+ { value: "cb", name: "CHRONOS", codename: "chronos-basic", family: "chronos" },
];
+const BOARD_FAMILY_COLORS = {
+ vesper: { selectedBg: "#0a1929", selectedBorder: "#3b82f6", selectedText: "#60a5fa", hoverBorder: "#3b82f6", glowColor: "rgba(59,130,246,0.35)", idleBorder: "#1d3a5c", idleText: "#7ca8d4" },
+ agnus: { selectedBg: "#1a1400", selectedBorder: "#f59e0b", selectedText: "#fbbf24", hoverBorder: "#f59e0b", glowColor: "rgba(245,158,11,0.35)", idleBorder: "#4a3800", idleText: "#c79d3a" },
+ chronos: { selectedBg: "#1a0808", selectedBorder: "#ef4444", selectedText: "#f87171", hoverBorder: "#ef4444", glowColor: "rgba(239,68,68,0.35)", idleBorder: "#5c1a1a", idleText: "#d47a7a" },
+};
+
const BOARD_TYPE_LABELS = Object.fromEntries(BOARD_TYPES.map((b) => [b.value, b.name]));
const STATUS_STYLES = {
@@ -188,6 +195,35 @@ function ColumnToggle({ visible, orderedIds, onChange, onReorder }) {
);
}
+// βββ Board Type Tile ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+function BoardTypeTile({ bt, isSelected, pal, onClick }) {
+ const [hovered, setHovered] = useState(false);
+ const borderColor = isSelected ? pal.selectedBorder : hovered ? pal.hoverBorder : pal.idleBorder;
+ const boxShadow = isSelected
+ ? `0 0 0 1px ${pal.selectedBorder}, 0 0 14px 4px ${pal.glowColor}`
+ : hovered ? `0 0 12px 3px ${pal.glowColor}` : "none";
+ return (
+
+ );
+}
+
// βββ Add Device Modal βββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
function AddDeviceModal({ onClose, onCreated }) {
@@ -222,26 +258,29 @@ function AddDeviceModal({ onClose, onCreated }) {
Add Single Device
Board Type
-
- {BOARD_TYPES.map((bt) => {
- const isSel = boardType === bt.value;
- return (
-
- );
- })}
+
+ {/* Row 1: Vesper family β 3 columns */}
+
+ {BOARD_TYPES.filter((b) => b.family === "vesper").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+ {/* Row 2: Agnus family β 2 columns (left-aligned in 3-col grid) */}
+
+
+ {BOARD_TYPES.filter((b) => b.family === "agnus").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+
+ {/* Row 3: Chronos family β 2 columns (left-aligned in 3-col grid) */}
+
+
+ {BOARD_TYPES.filter((b) => b.family === "chronos").map((bt) => (
+ setBoardType(bt.value)} />
+ ))}
+
+