Switch auth to plain-text password env var (remove bcrypt)

- Replace ADMIN_PASSWORD_HASH with ADMIN_PASSWORD in auth route and docker-compose
- Remove bcryptjs / @types/bcryptjs dependencies
- Delete scripts/hashPassword.ts (no longer needed)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install:*)",
+      "Bash(mkdir -p data)",
+      "Bash(DATABASE_URL=\"file:./data/rackmapper.db\" npx prisma migrate dev --name init)",
+      "Bash(npx prisma:*)",
+      "Bash(npx tsc:*)",
+      "Bash(git commit:*)",
+      "Bash(npm uninstall:*)",
+      "Bash(git add:*)"
+    ]
+  }
+}

client/src/api/client.ts

@@ -101,6 +101,8 @@ const modules = {
     }>
   ) => put<Module>(`/modules/${id}`, data),
   delete: (id: string) => del<null>(`/modules/${id}`),
+  move: (id: string, rackId: string, uPosition: number) =>
+    post<Module>(`/modules/${id}/move`, { rackId, uPosition }),
   getPorts: (id: string) => get<Port[]>(`/modules/${id}/ports`),
 };
 

client/src/components/modals/AddModuleModal.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from 'react';
+import { useState, useEffect, type FormEvent } from 'react';
 import { toast } from 'sonner';
 import type { ModuleType } from '../../types';
 import { Modal } from '../ui/Modal';
@@ -17,6 +17,8 @@ interface AddModuleModalProps {
   onClose: () => void;
   rackId: string;
   uPosition: number;
+  /** Pre-select a type (e.g. from a palette drag) — skips the type picker step. */
+  initialType?: ModuleType;
 }
 
 const ALL_TYPES: ModuleType[] = [
@@ -24,17 +26,29 @@ const ALL_TYPES: ModuleType[] = [
   'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
 ];
 
-export function AddModuleModal({ open, onClose, rackId, uPosition }: AddModuleModalProps) {
+export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }: AddModuleModalProps) {
   const { addModule } = useRackStore();
-  const [selectedType, setSelectedType] = useState<ModuleType | null>(null);
+  const [selectedType, setSelectedType] = useState<ModuleType | null>(initialType ?? null);
-  const [name, setName] = useState('');
+  const [name, setName] = useState(initialType ? MODULE_TYPE_LABELS[initialType] : '');
-  const [uSize, setUSize] = useState(1);
+  const [uSize, setUSize] = useState(initialType ? MODULE_U_DEFAULTS[initialType] : 1);
-  const [portCount, setPortCount] = useState(0);
+  const [portCount, setPortCount] = useState(initialType ? MODULE_PORT_DEFAULTS[initialType] : 0);
   const [ipAddress, setIpAddress] = useState('');
   const [manufacturer, setManufacturer] = useState('');
   const [model, setModel] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Sync state when modal opens with a new initialType (e.g. drag-drop reuse)
+  useEffect(() => {
+    if (open && initialType) {
+      setSelectedType(initialType);
+      setName(MODULE_TYPE_LABELS[initialType]);
+      setUSize(MODULE_U_DEFAULTS[initialType]);
+      setPortCount(MODULE_PORT_DEFAULTS[initialType]);
+    } else if (!open) {
+      reset();
+    }
+  }, [open, initialType]); // eslint-disable-line react-hooks/exhaustive-deps
+
   function handleTypeSelect(type: ModuleType) {
     setSelectedType(type);
     setName(MODULE_TYPE_LABELS[type]);

client/src/components/modals/PortConfigModal.tsx

@@ -14,7 +14,7 @@ interface PortConfigModalProps {
 }
 
 export function PortConfigModal({ portId, open, onClose }: PortConfigModalProps) {
-  const { racks, updateModuleLocal } = useRackStore();
+  const { racks, fetchRacks } = useRackStore();
   const [port, setPort] = useState<Port | null>(null);
   const [vlans, setVlans] = useState<Vlan[]>([]);
   const [label, setLabel] = useState('');
@@ -82,12 +82,8 @@ export function PortConfigModal({ portId, open, onClose }: PortConfigModalProps)
         vlans: vlanAssignments,
       });
 
-      // Refresh racks to reflect changes
+      // Refresh all rack state so port dots and VLAN assignments are current
-      const portsInRack = racks.flatMap((r) => r.modules).find((m) => m.ports.some((p) => p.id === portId));
+      await fetchRacks();
-      if (portsInRack) {
-        const updatedPorts = await apiClient.modules.getPorts(portsInRack.id);
-        updateModuleLocal(portsInRack.id, { ports: updatedPorts });
-      }
 
       toast.success('Port saved');
       onClose();

client/src/components/rack/DevicePalette.tsx

@@ -1,11 +1,11 @@
-/**
+import { useDraggable } from '@dnd-kit/core';
- * 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 {
+  MODULE_TYPE_LABELS,
+  MODULE_TYPE_COLORS,
+  MODULE_U_DEFAULTS,
+  MODULE_PORT_DEFAULTS,
+} from '../../lib/constants';
 import { cn } from '../../lib/utils';
 
 const ALL_TYPES: ModuleType[] = [
@@ -13,44 +13,51 @@ const ALL_TYPES: ModuleType[] = [
   'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
 ];
 
-interface DevicePaletteProps {
+function PaletteItem({ type }: { type: ModuleType }) {
-  /** Called when user clicks a device type to place it. */
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-  onSelect?: (type: ModuleType) => void;
+    id: `palette-${type}`,
+    data: { type },
+  });
+
+  const colors = MODULE_TYPE_COLORS[type];
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className={cn(
+        'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full cursor-grab active:cursor-grabbing transition-all select-none',
+        colors.bg,
+        colors.border,
+        isDragging ? 'opacity-40' : 'hover:brightness-125'
+      )}
+      aria-label={`Drag ${MODULE_TYPE_LABELS[type]} onto a rack slot`}
+    >
+      <div className={cn('w-2 h-2 rounded-sm shrink-0 brightness-150', colors.bg)} />
+      <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>
+    </div>
+  );
 }
 
-export function DevicePalette({ onSelect }: DevicePaletteProps) {
+export function DevicePalette() {
   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>
+        <p className="text-[10px] text-slate-600 mt-0.5">Drag onto a slot or click a slot</p>
       </div>
       <div className="flex flex-col gap-1 p-2">
-        {ALL_TYPES.map((type) => {
+        {ALL_TYPES.map((type) => (
-          const colors = MODULE_TYPE_COLORS[type];
+          <PaletteItem key={type} type={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>
   );

client/src/components/rack/RackColumn.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { Trash2, MapPin } from 'lucide-react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Trash2, MapPin, GripVertical } from 'lucide-react';
 import { toast } from 'sonner';
 import type { Rack } from '../../types';
 import { buildOccupancyMap } from '../../lib/utils';
@@ -10,14 +12,29 @@ import { useRackStore } from '../../store/useRackStore';
 
 interface RackColumnProps {
   rack: Rack;
+  /** ID of the module currently being dragged — render its slots as droppable ghosts. */
+  draggingModuleId?: string | null;
 }
 
-export function RackColumn({ rack }: RackColumnProps) {
+export function RackColumn({ rack, draggingModuleId }: RackColumnProps) {
   const { deleteRack } = useRackStore();
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
+  // Sortable for rack reorder
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: rack.id,
+    data: { dragType: 'rack' },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+
   const occupancy = buildOccupancyMap(rack.modules);
+  const renderedModuleIds = new Set<string>();
 
   async function handleDelete() {
     setDeleting(true);
@@ -32,20 +49,21 @@ export function RackColumn({ rack }: RackColumnProps) {
     }
   }
 
-  // Build the slot render list — modules span multiple U slots
-  const slots: Array<{ u: number; moduleId: string | null }> = [];
-  const renderedModuleIds = new Set<string>();
-
-  for (let u = 1; u <= rack.totalU; u++) {
-    const moduleId = occupancy.get(u) ?? null;
-    slots.push({ u, moduleId });
-  }
-
   return (
     <>
-      <div className="flex flex-col min-w-[200px] w-48 shrink-0">
+      <div ref={setNodeRef} style={style} className="flex flex-col min-w-[200px] w-48 shrink-0">
-        {/* Rack header */}
+        {/* Rack header — drag handle for reorder */}
         <div className="flex items-center gap-1 bg-slate-700 border border-slate-600 rounded-t-lg px-2 py-1.5 group">
+          {/* Drag handle */}
+          <div
+            {...listeners}
+            {...attributes}
+            className="cursor-grab active:cursor-grabbing text-slate-500 hover:text-slate-300 transition-colors shrink-0 touch-none"
+            aria-label="Drag to reorder rack"
+          >
+            <GripVertical size={13} />
+          </div>
+
           <div className="flex-1 min-w-0">
             <div className="text-sm font-semibold text-slate-100 truncate">{rack.name}</div>
             {rack.location && (
@@ -55,6 +73,7 @@ export function RackColumn({ rack }: RackColumnProps) {
               </div>
             )}
           </div>
+
           <button
             onClick={() => setConfirmDeleteOpen(true)}
             aria-label={`Delete rack ${rack.name}`}
@@ -66,16 +85,25 @@ export function RackColumn({ rack }: RackColumnProps) {
 
         {/* U-slot body */}
         <div className="border-x border-slate-600 bg-[#1e2433] flex flex-col">
-          {slots.map(({ u, moduleId }) => {
+          {Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => {
+            const moduleId = occupancy.get(u) ?? null;
+
             if (moduleId) {
               const module = rack.modules.find((m) => m.id === moduleId);
               if (!module) return null;
 
-              // Only render the block on its first U (top)
+              // Only render ModuleBlock at its top U
               if (module.uPosition !== u) return null;
               if (renderedModuleIds.has(moduleId)) return null;
               renderedModuleIds.add(moduleId);
 
+              // If this module is being dragged, show empty droppable slot(s) instead
+              if (moduleId === draggingModuleId) {
+                return (
+                  <RackSlot key={`ghost-${u}`} rackId={rack.id} uPosition={u} />
+                );
+              }
+
               return <ModuleBlock key={module.id} module={module} />;
             }
 

client/src/components/rack/RackPlanner.tsx

@@ -1,56 +1,205 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { toast } from 'sonner';
 import { useRackStore } from '../../store/useRackStore';
+import { apiClient } from '../../api/client';
 import { RackToolbar } from './RackToolbar';
 import { RackColumn } from './RackColumn';
+import { DevicePalette } from './DevicePalette';
+import { AddModuleModal } from '../modals/AddModuleModal';
 import { RackSkeleton } from '../ui/Skeleton';
+import type { ModuleType } from '../../types';
+import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
+import { cn } from '../../lib/utils';
+
+interface PendingDrop {
+  rackId: string;
+  uPosition: number;
+  type: ModuleType;
+}
+
+function DragOverlayItem({ type }: { type: ModuleType }) {
+  const colors = MODULE_TYPE_COLORS[type];
+  return (
+    <div
+      className={cn(
+        'px-3 py-1.5 rounded border text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none',
+        colors.bg,
+        colors.border
+      )}
+    >
+      {MODULE_TYPE_LABELS[type]}
+    </div>
+  );
+}
+
+function ModuleDragOverlay({ label }: { label: string }) {
+  return (
+    <div className="px-3 py-1.5 rounded border bg-slate-600 border-slate-400 text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none">
+      {label}
+    </div>
+  );
+}
 
 export function RackPlanner() {
-  const { racks, loading, fetchRacks } = useRackStore();
+  const { racks, loading, fetchRacks, moveModule, updateRack } = useRackStore();
   const canvasRef = useRef<HTMLDivElement>(null);
 
+  // Drag state
+  const [activePaletteType, setActivePaletteType] = useState<ModuleType | null>(null);
+  const [activeDragModuleLabel, setActiveDragModuleLabel] = useState<string | null>(null);
+  const [draggingModuleId, setDraggingModuleId] = useState<string | null>(null);
+  const [pendingDrop, setPendingDrop] = useState<PendingDrop | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  );
+
   useEffect(() => {
     fetchRacks().catch(() => toast.error('Failed to load racks'));
   }, [fetchRacks]);
 
-  return (
+  function handleDragStart(event: DragStartEvent) {
-    <div className="flex flex-col h-screen bg-[#0f1117]">
+    const data = event.active.data.current as Record<string, unknown>;
-      <RackToolbar rackCanvasRef={canvasRef} />
+    if (data?.dragType === 'palette') {
+      setActivePaletteType(data.type as ModuleType);
+    } else if (data?.dragType === 'module') {
+      setDraggingModuleId(data.moduleId as string);
+      setActiveDragModuleLabel(data.label as string);
+    }
+  }
 
-      <div className="flex flex-1 overflow-hidden">
+  async function handleDragEnd(event: DragEndEvent) {
-        {/* Main rack canvas */}
+    const { active, over } = event;
-        <div className="flex-1 overflow-auto">
+    setActivePaletteType(null);
-          {loading ? (
+    setActiveDragModuleLabel(null);
-            <RackSkeleton />
+    setDraggingModuleId(null);
-          ) : racks.length === 0 ? (
+
-            <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
+    if (!over) return;
-              <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">
+    const dragData = active.data.current as Record<string, unknown>;
-                  <rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
+    const dropData = over.data.current as Record<string, unknown> | undefined;
-                  <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" />
+    // --- Palette → slot: open AddModuleModal pre-filled ---
-                </svg>
+    if (dragData?.dragType === 'palette' && dropData?.dropType === 'slot') {
+      setPendingDrop({
+        type: dragData.type as ModuleType,
+        rackId: dropData.rackId as string,
+        uPosition: dropData.uPosition as number,
+      });
+      return;
+    }
+
+    // --- Module → slot: move the module ---
+    if (dragData?.dragType === 'module' && dropData?.dropType === 'slot') {
+      const moduleId = dragData.moduleId as string;
+      const targetRackId = dropData.rackId as string;
+      const targetUPosition = dropData.uPosition as number;
+
+      // No-op if dropped on own position
+      if (dragData.fromRackId === targetRackId && dragData.fromUPosition === targetUPosition) return;
+
+      try {
+        await moveModule(moduleId, targetRackId, targetUPosition);
+        toast.success('Module moved');
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Move failed');
+      }
+      return;
+    }
+
+    // --- Rack header → rack header: reorder racks ---
+    if (dragData?.dragType === 'rack' && over.data.current?.dragType === 'rack') {
+      const oldIndex = racks.findIndex((r) => r.id === active.id);
+      const newIndex = racks.findIndex((r) => r.id === over.id);
+      if (oldIndex === newIndex) return;
+
+      const reordered = arrayMove(racks, oldIndex, newIndex);
+      // Persist new displayOrder values
+      try {
+        await Promise.all(
+          reordered.map((rack, idx) =>
+            rack.displayOrder !== idx ? apiClient.racks.update(rack.id, { displayOrder: idx }) : Promise.resolve(rack)
+          )
+        );
+        // Refresh store to sync
+        await fetchRacks();
+      } catch {
+        toast.error('Failed to save rack order');
+        await fetchRacks(); // rollback
+      }
+    }
+  }
+
+  const rackIds = racks.map((r) => r.id);
+
+  return (
+    <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      <div className="flex flex-col h-screen bg-[#0f1117]">
+        <RackToolbar rackCanvasRef={canvasRef} />
+
+        <div className="flex flex-1 overflow-hidden">
+          <DevicePalette />
+
+          <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>
+            ) : (
-                <p className="text-slate-300 font-medium">No racks yet</p>
+              <SortableContext items={rackIds} strategy={horizontalListSortingStrategy}>
-                <p className="text-slate-500 text-sm mt-1">
+                <div
-                  Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
+                  ref={canvasRef}
-                </p>
+                  className="flex gap-4 p-4 min-h-full items-start"
-              </div>
+                  style={{ background: '#0f1117' }}
-            </div>
+                >
-          ) : (
+                  {racks.map((rack) => (
-            <div
+                    <RackColumn key={rack.id} rack={rack} draggingModuleId={draggingModuleId} />
-              ref={canvasRef}
+                  ))}
-              className="flex gap-4 p-4 min-h-full items-start"
+                </div>
-              style={{ background: '#0f1117' }}
+              </SortableContext>
-            >
+            )}
-              {racks.map((rack) => (
+          </div>
-                <RackColumn key={rack.id} rack={rack} />
-              ))}
-            </div>
-          )}
         </div>
       </div>
-    </div>
+
+      <DragOverlay dropAnimation={null}>
+        {activePaletteType && <DragOverlayItem type={activePaletteType} />}
+        {activeDragModuleLabel && <ModuleDragOverlay label={activeDragModuleLabel} />}
+      </DragOverlay>
+
+      {pendingDrop && (
+        <AddModuleModal
+          open={true}
+          onClose={() => setPendingDrop(null)}
+          rackId={pendingDrop.rackId}
+          uPosition={pendingDrop.uPosition}
+          initialType={pendingDrop.type}
+        />
+      )}
+    </DndContext>
   );
 }

client/src/components/rack/RackSlot.tsx

@@ -1,24 +1,33 @@
 import { useState } from 'react';
+import { useDroppable } from '@dnd-kit/core';
 import { Plus } from 'lucide-react';
 import { U_HEIGHT_PX } from '../../lib/constants';
+import { cn } from '../../lib/utils';
 import { AddModuleModal } from '../modals/AddModuleModal';
 
 interface RackSlotProps {
   rackId: string;
   uPosition: number;
-  /** True if this slot is occupied (skips rendering — ModuleBlock renders instead) */
-  occupied?: boolean;
 }
 
-export function RackSlot({ rackId, uPosition, occupied = false }: RackSlotProps) {
+export function RackSlot({ rackId, uPosition }: RackSlotProps) {
   const [addModuleOpen, setAddModuleOpen] = useState(false);
 
-  if (occupied) return null;
+  const { setNodeRef, isOver } = useDroppable({
+    id: `slot-${rackId}-${uPosition}`,
+    data: { dropType: 'slot', rackId, uPosition },
+  });
 
   return (
     <>
       <div
-        className="w-full border border-dashed border-slate-700/50 hover:border-blue-500/50 hover:bg-blue-500/5 transition-colors group cursor-pointer flex items-center justify-between px-2"
+        ref={setNodeRef}
+        className={cn(
+          'w-full border border-dashed transition-colors group cursor-pointer flex items-center justify-between px-2',
+          isOver
+            ? 'border-blue-400 bg-blue-500/15'
+            : 'border-slate-700/50 hover:border-blue-500/50 hover:bg-blue-500/5'
+        )}
         style={{ height: U_HEIGHT_PX }}
         onClick={() => setAddModuleOpen(true)}
         role="button"
@@ -26,12 +35,22 @@ export function RackSlot({ rackId, uPosition, occupied = false }: RackSlotProps)
         aria-label={`Add module at U${uPosition}`}
         onKeyDown={(e) => e.key === 'Enter' && setAddModuleOpen(true)}
       >
-        <span className="text-[10px] text-slate-600 group-hover:text-slate-500 font-mono">
+        <span
+          className={cn(
+            'text-[10px] font-mono transition-colors',
+            isOver ? 'text-blue-400' : 'text-slate-600 group-hover:text-slate-500'
+          )}
+        >
           U{uPosition}
         </span>
         <Plus
           size={10}
-          className="text-slate-700 group-hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity"
+          className={cn(
+            'transition-opacity',
+            isOver
+              ? 'text-blue-400 opacity-100'
+              : 'text-slate-700 group-hover:text-blue-500 opacity-0 group-hover:opacity-100'
+          )}
         />
       </div>
 

client/src/store/useRackStore.ts

@@ -14,6 +14,7 @@ interface RackState {
   deleteRack: (id: string) => Promise<void>;
   // Module CRUD (optimistic update helpers)
   addModule: (rackId: string, data: Parameters<typeof apiClient.racks.addModule>[1]) => Promise<Module>;
+  moveModule: (moduleId: string, targetRackId: string, targetUPosition: number) => Promise<void>;
   updateModuleLocal: (moduleId: string, data: Partial<Module>) => void;
   removeModuleLocal: (moduleId: string) => void;
   // Selection
@@ -68,6 +69,24 @@ export const useRackStore = create<RackState>((set, get) => ({
     return module;
   },
 
+  moveModule: async (moduleId, targetRackId, targetUPosition) => {
+    const updated = await apiClient.modules.move(moduleId, targetRackId, targetUPosition);
+    set((s) => {
+      // Remove from source rack, insert into target rack
+      const racks = s.racks.map((r) => ({
+        ...r,
+        modules: r.modules.filter((m) => m.id !== moduleId),
+      }));
+      return {
+        racks: racks.map((r) =>
+          r.id === targetRackId
+            ? { ...r, modules: [...r.modules, updated].sort((a, b) => a.uPosition - b.uPosition) }
+            : r
+        ),
+      };
+    });
+  },
+
   updateModuleLocal: (moduleId, data) => {
     set((s) => ({
       racks: s.racks.map((r) => ({

docker-compose.yml

@@ -11,7 +11,7 @@ services:
       - PORT=3001
       - DATABASE_URL=file:./data/rackmapper.db
       - ADMIN_USERNAME=${ADMIN_USERNAME:-admin}
-      - ADMIN_PASSWORD_HASH=${ADMIN_PASSWORD_HASH}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
       - JWT_SECRET=${JWT_SECRET}
       - JWT_EXPIRY=${JWT_EXPIRY:-8h}
     volumes:

package-lock.json

@@ -9,7 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@prisma/client": "^5.22.0",
-        "bcryptjs": "^2.4.3",
         "better-sqlite3": "^11.5.0",
         "cookie-parser": "^1.4.7",
         "cors": "^2.8.5",
@@ -18,7 +17,6 @@
         "jsonwebtoken": "^9.0.2"
       },
       "devDependencies": {
-        "@types/bcryptjs": "^2.4.6",
         "@types/better-sqlite3": "^7.6.12",
         "@types/cookie-parser": "^1.4.8",
         "@types/cors": "^2.8.17",
@@ -1098,13 +1096,6 @@
         "win32"
       ]
     },
-    "node_modules/@types/bcryptjs": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
-      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/better-sqlite3": {
       "version": "7.6.13",
       "resolved": "https://registry.npmjs.org/@types/better-sqlite3/-/better-sqlite3-7.6.13.tgz",
@@ -1541,12 +1532,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
-      "license": "MIT"
-    },
     "node_modules/better-sqlite3": {
       "version": "11.10.0",
       "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-11.10.0.tgz",

package.json

@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@prisma/client": "^5.22.0",
-    "bcryptjs": "^2.4.3",
     "better-sqlite3": "^11.5.0",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
@@ -28,7 +27,6 @@
     "jsonwebtoken": "^9.0.2"
   },
   "devDependencies": {
-    "@types/bcryptjs": "^2.4.6",
     "@types/better-sqlite3": "^7.6.12",
     "@types/cookie-parser": "^1.4.8",
     "@types/cors": "^2.8.17",

scripts/hashPassword.ts

@@ -1,20 +0,0 @@
-/**
- * Generates a bcrypt hash for use as ADMIN_PASSWORD_HASH env var.
- *
- * Usage:
- *   npx tsx scripts/hashPassword.ts yourpassword
- *
- * Copy the output and paste it into your Docker env var or .env file.
- */
-import bcrypt from 'bcryptjs';
-
-const password = process.argv[2];
-
-if (!password) {
-  console.error('Usage: npx tsx scripts/hashPassword.ts <password>');
-  process.exit(1);
-}
-
-bcrypt.hash(password, 12).then((hash) => {
-  console.log(hash);
-});

server/routes/auth.ts

@@ -1,5 +1,4 @@
 import { Router, Request, Response, NextFunction } from 'express';
-import bcrypt from 'bcryptjs';
 import jwt from 'jsonwebtoken';
 import { AppError, ok } from '../types/index';
 import { authMiddleware } from '../middleware/authMiddleware';
@@ -13,7 +12,7 @@ const COOKIE_OPTS = {
   path: '/',
 };
 
-authRouter.post('/login', async (req: Request, res: Response, next: NextFunction) => {
+authRouter.post('/login', (req: Request, res: Response, next: NextFunction) => {
   try {
     const { username, password } = req.body as { username?: string; password?: string };
 
@@ -22,17 +21,13 @@ authRouter.post('/login', async (req: Request, res: Response, next: NextFunction
     }
 
     const adminUsername = process.env.ADMIN_USERNAME;
-    const adminHash = process.env.ADMIN_PASSWORD_HASH;
+    const adminPassword = process.env.ADMIN_PASSWORD;
 
-    if (!adminUsername || !adminHash) {
+    if (!adminUsername || !adminPassword) {
       throw new AppError('Server not configured: admin credentials missing', 500, 'CONFIG_ERROR');
     }
 
-    const usernameMatch = username === adminUsername;
+    if (username !== adminUsername || password !== adminPassword) {
-    // Always run bcrypt to prevent timing attacks even if username is wrong
-    const passwordMatch = await bcrypt.compare(password, adminHash);
-
-    if (!usernameMatch || !passwordMatch) {
       throw new AppError('Invalid username or password', 401, 'INVALID_CREDENTIALS');
     }
 

server/routes/modules.ts

@@ -42,6 +42,15 @@ modulesRouter.delete('/:id', async (req: Request, res: Response, next: NextFunct
   }
 });
 
+modulesRouter.post('/:id/move', async (req: Request, res: Response, next: NextFunction) => {
+  try {
+    const { rackId, uPosition } = req.body as { rackId: string; uPosition: number };
+    res.json(ok(await moduleService.moveModule(req.params.id, rackId, uPosition)));
+  } catch (e) {
+    next(e);
+  }
+});
+
 modulesRouter.get('/:id/ports', async (req: Request, res: Response, next: NextFunction) => {
   try {
     res.json(ok(await moduleService.getModulePorts(req.params.id)));

server/services/moduleService.ts

@@ -135,6 +135,42 @@ export async function deleteModule(id: string) {
   return prisma.module.delete({ where: { id } });
 }
 
+/**
+ * Move a module to a new rack and/or U-position.
+ * Ports and VLAN assignments move with the module (they're linked by moduleId).
+ */
+export async function moveModule(
+  id: string,
+  targetRackId: string,
+  targetUPosition: number
+) {
+  const existing = await prisma.module.findUnique({ where: { id } });
+  if (!existing) throw new AppError('Module not found', 404, 'NOT_FOUND');
+
+  const targetRack = await prisma.rack.findUnique({ where: { id: targetRackId } });
+  if (!targetRack) throw new AppError('Target rack not found', 404, 'NOT_FOUND');
+
+  if (targetUPosition < 1 || targetUPosition + existing.uSize - 1 > targetRack.totalU) {
+    throw new AppError(
+      `Module does not fit within target rack (U1–U${targetRack.totalU})`,
+      400,
+      'OUT_OF_BOUNDS'
+    );
+  }
+
+  // Collision check in target rack, excluding self (handles same-rack moves)
+  const excludeInTarget = targetRackId === existing.rackId ? id : undefined;
+  if (await hasCollision(targetRackId, targetUPosition, existing.uSize, excludeInTarget)) {
+    throw new AppError('U-slot collision in target rack', 409, 'COLLISION');
+  }
+
+  return prisma.module.update({
+    where: { id },
+    data: { rackId: targetRackId, uPosition: targetUPosition },
+    include: moduleInclude,
+  });
+}
+
 export async function getModulePorts(id: string) {
   const existing = await prisma.module.findUnique({ where: { id } });
   if (!existing) throw new AppError('Module not found', 404, 'NOT_FOUND');