Initial scaffold: full-stack RackMapper application

Complete project scaffold with working auth, REST API, Prisma/SQLite schema, Docker config, and React frontend for both Rack Planner and Service Mapper modules. Both server and client pass TypeScript strict mode with zero errors. Initial migration applied. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-21 21:48:56 -05:00
parent 61a4d37d94
commit 231de3d005
79 changed files with 12983 additions and 0 deletions
--- a/client/src/components/rack/DevicePalette.tsx
+++ b/client/src/components/rack/DevicePalette.tsx
@@ -0,0 +1,57 @@
+/**
+ * DevicePalette — sidebar showing all available device types.
+ *
+ * SCAFFOLD: Currently a static visual list. Full drag-to-rack DnD requires
+ * @dnd-kit integration with the RackColumn drop targets (see roadmap).
+ */
+import type { ModuleType } from '../../types';
+import { MODULE_TYPE_LABELS, MODULE_TYPE_COLORS, MODULE_U_DEFAULTS, MODULE_PORT_DEFAULTS } from '../../lib/constants';
+import { cn } from '../../lib/utils';
+
+const ALL_TYPES: ModuleType[] = [
+  'SWITCH', 'AGGREGATE_SWITCH', 'ROUTER', 'FIREWALL', 'PATCH_PANEL',
+  'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
+];
+
+interface DevicePaletteProps {
+  /** Called when user clicks a device type to place it. */
+  onSelect?: (type: ModuleType) => void;
+}
+
+export function DevicePalette({ onSelect }: DevicePaletteProps) {
+  return (
+    <aside className="w-44 shrink-0 flex flex-col bg-slate-800 border-r border-slate-700 overflow-y-auto">
+      <div className="px-3 py-2 border-b border-slate-700">
+        <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Devices</p>
+        <p className="text-[10px] text-slate-600 mt-0.5">Click a slot, then choose type</p>
+      </div>
+      <div className="flex flex-col gap-1 p-2">
+        {ALL_TYPES.map((type) => {
+          const colors = MODULE_TYPE_COLORS[type];
+          return (
+            <button
+              key={type}
+              onClick={() => onSelect?.(type)}
+              className={cn(
+                'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full hover:brightness-125 transition-all',
+                colors.bg,
+                colors.border
+              )}
+              aria-label={`Add ${MODULE_TYPE_LABELS[type]}`}
+            >
+              <div className={cn('w-2 h-2 rounded-sm shrink-0', colors.bg, 'brightness-150')} />
+              <div className="min-w-0 flex-1">
+                <div className="text-xs font-medium text-white truncate">
+                  {MODULE_TYPE_LABELS[type]}
+                </div>
+                <div className="text-[10px] text-slate-400">
+                  {MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}