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

View File

@@ -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