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>
This commit is contained in:
2026-03-21 22:02:16 -05:00
parent 0b4e9ea1e5
commit f4e139972e
4 changed files with 418 additions and 2 deletions
+5 -1
View File
@@ -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">