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>

client/src/components/rack/RackPlanner.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { useRackStore } from '../../store/useRackStore';
+import { RackToolbar } from './RackToolbar';
+import { RackColumn } from './RackColumn';
+import { RackSkeleton } from '../ui/Skeleton';
+
+export function RackPlanner() {
+  const { racks, loading, fetchRacks } = useRackStore();
+  const canvasRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetchRacks().catch(() => toast.error('Failed to load racks'));
+  }, [fetchRacks]);
+
+  return (
+    <div className="flex flex-col h-screen bg-[#0f1117]">
+      <RackToolbar rackCanvasRef={canvasRef} />
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Main rack canvas */}
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <RackSkeleton />
+          ) : racks.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
+              <div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
+                <svg width="32" height="32" viewBox="0 0 18 18" fill="none">
+                  <rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
+                  <rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
+                  <rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
+                </svg>
+              </div>
+              <div>
+                <p className="text-slate-300 font-medium">No racks yet</p>
+                <p className="text-slate-500 text-sm mt-1">
+                  Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div
+              ref={canvasRef}
+              className="flex gap-4 p-4 min-h-full items-start"
+              style={{ background: '#0f1117' }}
+            >
+              {racks.map((rack) => (
+                <RackColumn key={rack.id} rack={rack} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}