Add VLAN management page at /vlans

- Full CRUD: create, inline-edit, delete with confirm dialog
- Table shows VLAN ID, name, description, color swatch
- Add-VLAN form at top; hover shows edit/delete actions per row
- Route registered in App.tsx under ProtectedRoute
- VLANs nav button added to RackToolbar and MapToolbar

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

client/src/App.tsx

@@ -5,6 +5,7 @@ import { LoginPage } from './components/auth/LoginPage';
 import { ProtectedRoute } from './components/auth/ProtectedRoute';
 import { RackPlanner } from './components/rack/RackPlanner';
 import { ServiceMapper } from './components/mapper/ServiceMapper';
+import { VlanPage } from './components/vlans/VlanPage';
 import { Skeleton } from './components/ui/Skeleton';
 
 export default function App() {
@@ -46,6 +47,14 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/vlans"
+          element={
+            <ProtectedRoute>
+              <VlanPage />
+            </ProtectedRoute>
+          }
+        />
         <Route path="*" element={<Navigate to="/rack" replace />} />
       </Routes>
     </BrowserRouter>

client/src/components/mapper/MapToolbar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Download, Server, LogOut, ChevronDown } from 'lucide-react';
+import { Download, Server, LogOut, ChevronDown, Tag } from 'lucide-react';
 import { toast } from 'sonner';
 import { toPng } from 'html-to-image';
 import { useReactFlow } from '@xyflow/react';
@@ -119,6 +119,10 @@ export function MapToolbar({
           <Server size={14} />
           Rack Planner
         </Button>
+        <Button size="sm" variant="secondary" onClick={() => navigate('/vlans')}>
+          <Tag size={14} />
+          VLANs
+        </Button>
         {activeMapId && (
           <>
             <Button size="sm" variant="secondary" onClick={onPopulate} title="Import all rack modules as nodes">

client/src/components/rack/RackToolbar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, Download, Map, LogOut } from 'lucide-react';
+import { Plus, Download, Map, LogOut, Tag } from 'lucide-react';
 import { toast } from 'sonner';
 import { toPng } from 'html-to-image';
 import { Button } from '../ui/Button';
@@ -64,6 +64,10 @@ export function RackToolbar({ rackCanvasRef }: RackToolbarProps) {
             <Map size={14} />
             Service Map
           </Button>
+          <Button size="sm" variant="secondary" onClick={() => navigate('/vlans')}>
+            <Tag size={14} />
+            VLANs
+          </Button>
           <Button size="sm" onClick={() => setAddRackOpen(true)}>
             <Plus size={14} />
             Add Rack

client/src/components/vlans/VlanPage.tsx

@@ -0,0 +1,399 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Pencil, Trash2, Check, X, Server, Map, LogOut, Tag } from 'lucide-react';
+import { toast } from 'sonner';
+import type { Vlan } from '../../types';
+import { apiClient } from '../../api/client';
+import { useAuthStore } from '../../store/useAuthStore';
+import { Button } from '../ui/Button';
+import { ConfirmDialog } from '../ui/ConfirmDialog';
+
+const DEFAULT_COLOR = '#3b82f6';
+
+// ---- Add VLAN form ----
+
+function AddVlanForm({ onCreated }: { onCreated: (v: Vlan) => void }) {
+  const [vlanId, setVlanId] = useState('');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [color, setColor] = useState(DEFAULT_COLOR);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const id = Number(vlanId);
+    if (!id || !name.trim()) return;
+    setLoading(true);
+    try {
+      const created = await apiClient.vlans.create({ vlanId: id, name: name.trim(), description: description.trim() || undefined, color });
+      onCreated(created);
+      setVlanId('');
+      setName('');
+      setDescription('');
+      setColor(DEFAULT_COLOR);
+      toast.success(`VLAN ${id} created`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to create VLAN');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex items-end gap-3 p-4 bg-slate-800/50 border border-slate-700 rounded-xl">
+      <div className="flex flex-col gap-1">
+        <label className="text-xs text-slate-400">VLAN ID</label>
+        <input
+          type="number"
+          min={1}
+          max={4094}
+          value={vlanId}
+          onChange={(e) => setVlanId(e.target.value)}
+          placeholder="e.g. 100"
+          required
+          className="w-24 bg-slate-900 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-slate-100 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1 flex-1">
+        <label className="text-xs text-slate-400">Name</label>
+        <input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g. Management"
+          required
+          className="bg-slate-900 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-slate-100 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1 flex-1 hidden sm:flex">
+        <label className="text-xs text-slate-400">Description</label>
+        <input
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Optional"
+          className="bg-slate-900 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-slate-100 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="text-xs text-slate-400">Color</label>
+        <input
+          type="color"
+          value={color}
+          onChange={(e) => setColor(e.target.value)}
+          className="w-9 h-9 rounded-lg cursor-pointer bg-transparent border border-slate-600 p-0.5"
+        />
+      </div>
+
+      <Button type="submit" size="sm" loading={loading} disabled={!vlanId || !name.trim()}>
+        <Plus size={14} />
+        Add VLAN
+      </Button>
+    </form>
+  );
+}
+
+// ---- Inline editable row ----
+
+interface VlanRowProps {
+  vlan: Vlan;
+  onUpdated: (v: Vlan) => void;
+  onDeleted: (id: string) => void;
+}
+
+function VlanRow({ vlan, onUpdated, onDeleted }: VlanRowProps) {
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState(vlan.name);
+  const [description, setDescription] = useState(vlan.description ?? '');
+  const [color, setColor] = useState(vlan.color ?? DEFAULT_COLOR);
+  const [saving, setSaving] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  function startEdit() {
+    setName(vlan.name);
+    setDescription(vlan.description ?? '');
+    setColor(vlan.color ?? DEFAULT_COLOR);
+    setEditing(true);
+  }
+
+  function cancelEdit() {
+    setEditing(false);
+  }
+
+  async function handleSave() {
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      const updated = await apiClient.vlans.update(vlan.id, {
+        name: name.trim(),
+        description: description.trim() || undefined,
+        color,
+      });
+      onUpdated(updated);
+      setEditing(false);
+      toast.success('VLAN updated');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Update failed');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      await apiClient.vlans.delete(vlan.id);
+      onDeleted(vlan.id);
+      toast.success(`VLAN ${vlan.vlanId} deleted`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Delete failed');
+    } finally {
+      setDeleting(false);
+      setConfirmDelete(false);
+    }
+  }
+
+  if (editing) {
+    return (
+      <>
+        <tr className="bg-slate-800/60">
+          <td className="px-4 py-2 font-mono text-sm text-slate-300 whitespace-nowrap">
+            {vlan.vlanId}
+          </td>
+          <td className="px-4 py-2">
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus
+              className="w-full bg-slate-900 border border-slate-600 rounded px-2 py-1 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </td>
+          <td className="px-4 py-2 hidden sm:table-cell">
+            <input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Description"
+              className="w-full bg-slate-900 border border-slate-600 rounded px-2 py-1 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </td>
+          <td className="px-4 py-2">
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                className="w-7 h-7 rounded cursor-pointer bg-transparent border border-slate-600 p-0.5"
+              />
+              <span className="text-xs text-slate-500 font-mono hidden md:inline">{color}</span>
+            </div>
+          </td>
+          <td className="px-4 py-2">
+            <div className="flex items-center gap-1">
+              <button
+                onClick={handleSave}
+                disabled={saving || !name.trim()}
+                className="p-1.5 rounded bg-blue-600 hover:bg-blue-500 text-white disabled:opacity-50 transition-colors"
+                aria-label="Save"
+              >
+                <Check size={13} />
+              </button>
+              <button
+                onClick={cancelEdit}
+                className="p-1.5 rounded bg-slate-700 hover:bg-slate-600 text-slate-300 transition-colors"
+                aria-label="Cancel"
+              >
+                <X size={13} />
+              </button>
+            </div>
+          </td>
+        </tr>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <tr className="border-t border-slate-700/50 hover:bg-slate-800/40 transition-colors group">
+        <td className="px-4 py-3 font-mono text-sm text-slate-300 whitespace-nowrap">
+          {vlan.vlanId}
+        </td>
+        <td className="px-4 py-3 text-sm text-slate-100">{vlan.name}</td>
+        <td className="px-4 py-3 text-sm text-slate-400 hidden sm:table-cell">
+          {vlan.description ?? <span className="text-slate-600">—</span>}
+        </td>
+        <td className="px-4 py-3">
+          <div className="flex items-center gap-2">
+            <div
+              className="w-5 h-5 rounded-full border border-slate-600 shrink-0"
+              style={{ backgroundColor: vlan.color ?? DEFAULT_COLOR }}
+            />
+            <span className="text-xs text-slate-500 font-mono hidden md:inline">
+              {vlan.color ?? DEFAULT_COLOR}
+            </span>
+          </div>
+        </td>
+        <td className="px-4 py-3">
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <button
+              onClick={startEdit}
+              className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+              aria-label={`Edit VLAN ${vlan.vlanId}`}
+            >
+              <Pencil size={13} />
+            </button>
+            <button
+              onClick={() => setConfirmDelete(true)}
+              className="p-1.5 rounded hover:bg-red-800/50 text-slate-400 hover:text-red-400 transition-colors"
+              aria-label={`Delete VLAN ${vlan.vlanId}`}
+            >
+              <Trash2 size={13} />
+            </button>
+          </div>
+        </td>
+      </tr>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        onClose={() => setConfirmDelete(false)}
+        onConfirm={handleDelete}
+        title="Delete VLAN"
+        message={`Delete VLAN ${vlan.vlanId} "${vlan.name}"? Port assignments using this VLAN will be removed.`}
+        confirmLabel="Delete"
+        loading={deleting}
+      />
+    </>
+  );
+}
+
+// ---- Main page ----
+
+export function VlanPage() {
+  const navigate = useNavigate();
+  const { logout } = useAuthStore();
+  const [vlans, setVlans] = useState<Vlan[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiClient.vlans
+      .list()
+      .then((v) => setVlans(v.sort((a, b) => a.vlanId - b.vlanId)))
+      .catch(() => toast.error('Failed to load VLANs'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  function handleCreated(v: Vlan) {
+    setVlans((prev) => [...prev, v].sort((a, b) => a.vlanId - b.vlanId));
+  }
+
+  function handleUpdated(v: Vlan) {
+    setVlans((prev) => prev.map((x) => (x.id === v.id ? v : x)));
+  }
+
+  function handleDeleted(id: string) {
+    setVlans((prev) => prev.filter((x) => x.id !== id));
+  }
+
+  async function handleLogout() {
+    await logout();
+    navigate('/login', { replace: true });
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0f1117] flex flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-4 py-2 bg-slate-800 border-b border-slate-700">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
+              <svg width="14" height="14" viewBox="0 0 18 18" fill="none">
+                <rect x="1" y="2" width="16" height="3" rx="1" fill="white" />
+                <rect x="1" y="7" width="16" height="3" rx="1" fill="white" opacity="0.7" />
+                <rect x="1" y="12" width="16" height="3" rx="1" fill="white" opacity="0.4" />
+              </svg>
+            </div>
+            <span className="text-sm font-bold text-slate-200 tracking-wider">RACKMAPPER</span>
+          </div>
+          <span className="text-slate-600 text-xs hidden sm:inline">VLAN Management</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="secondary" onClick={() => navigate('/rack')}>
+            <Server size={14} />
+            Rack Planner
+          </Button>
+          <Button size="sm" variant="secondary" onClick={() => navigate('/map')}>
+            <Map size={14} />
+            Service Map
+          </Button>
+          <Button size="sm" variant="ghost" onClick={handleLogout} aria-label="Sign out">
+            <LogOut size={14} />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 p-6 max-w-4xl w-full mx-auto">
+        <div className="mb-6 flex items-center gap-3">
+          <div className="w-8 h-8 bg-violet-600 rounded-lg flex items-center justify-center">
+            <Tag size={16} className="text-white" />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-slate-100">VLANs</h1>
+            <p className="text-xs text-slate-500">
+              Define and manage VLAN labels for port configuration
+            </p>
+          </div>
+          <div className="ml-auto">
+            <span className="text-sm text-slate-500">{vlans.length} VLANs</span>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <AddVlanForm onCreated={handleCreated} />
+
+          {loading ? (
+            <div className="text-center py-12 text-slate-500 text-sm">Loading…</div>
+          ) : vlans.length === 0 ? (
+            <div className="text-center py-12 text-slate-600 text-sm">
+              No VLANs defined yet. Add one above.
+            </div>
+          ) : (
+            <div className="bg-slate-800 border border-slate-700 rounded-xl overflow-hidden">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="bg-slate-700/50">
+                    <th className="px-4 py-2.5 text-xs font-semibold text-slate-400 uppercase tracking-wider w-20">
+                      ID
+                    </th>
+                    <th className="px-4 py-2.5 text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                      Name
+                    </th>
+                    <th className="px-4 py-2.5 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden sm:table-cell">
+                      Description
+                    </th>
+                    <th className="px-4 py-2.5 text-xs font-semibold text-slate-400 uppercase tracking-wider w-36">
+                      Color
+                    </th>
+                    <th className="px-4 py-2.5 w-20" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {vlans.map((v) => (
+                    <VlanRow
+                      key={v.id}
+                      vlan={v}
+                      onUpdated={handleUpdated}
+                      onDeleted={handleDeleted}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}