Merge pull request 'feat: ✨ version number links to releases' (#54) from v2.0.1 into main

Reviewed-on: http://git.jdbnet.co.uk/jamie/ipam/pulls/54

.devcontainer/Dockerfile

@@ -1,7 +1,5 @@
-FROM mcr.microsoft.com/devcontainers/python:3.13
+FROM mcr.microsoft.com/devcontainers/python:3.14
 
-# Set the working directory
 WORKDIR /workspace
 
-# Default command
 CMD ["sleep", "infinity"]

.devcontainer/devcontainer.json

@@ -6,10 +6,14 @@
   "settings": {},
   "customizations": {
     "vscode": {
-      "extensions": ["ms-python.python"]
+      "extensions": [
+        "ms-python.python",
+        "vivaxy.vscode-conventional-commits",
+        "esbenp.prettier-vscode"
+      ]
     }
   },
-  "postCreateCommand": "pip install -r requirements.txt; curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64; chmod +x tailwindcss-linux-x64; mv tailwindcss-linux-x64 tailwindcss",
+  "postCreateCommand": "pip install -r requirements.txt; curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -; sudo apt-get install -y nodejs",
   "forwardPorts": [5000],
   "remoteUser": "vscode"
 }

.dockerignore

@@ -1,10 +1,10 @@
+# Frontend dev
+frontend/node_modules/
+
 # Documentation
-README.md
-CHANGELOG.md
 *.md
 
 # Deployment files
-deployment.yml
 run.sh
 Dockerfile
 .dockerignore
@@ -13,6 +13,7 @@ Dockerfile
 .git
 .gitignore
 .gitattributes
+.gitea
 
 # Python cache
 __pycache__/
@@ -43,9 +44,6 @@ ENV/
 *.log
 logs/
 
-# Build tools
-tailwindcss
-
 # OS files
 .DS_Store
 Thumbs.db

.gitea/workflows/dev.yml

@@ -0,0 +1,45 @@
+name: Dev
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Build and push Docker image
+        run: |
+          docker build -t cr.jdbnet.co.uk/public/ipam:dev --build-arg VERSION=dev .
+          docker push cr.jdbnet.co.uk/public/ipam:dev
+
+  sonarqube:
+    name: SonarQube
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Create Valid Project Key
+        id: sonar_setup
+        run: |
+          CLEAN_KEY=$(echo "${{ gitea.repository }}" | tr '/' ':')
+          echo "key=$CLEAN_KEY" >> $GITHUB_OUTPUT
+
+      - name: SonarQube Scan
+        uses: sonarsource/sonarqube-scan-action@master
+        continue-on-error: true
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+        with:
+          args: >
+            -Dsonar.projectKey=${{ steps.sonar_setup.outputs.key }}
+            -Dsonar.projectName=${{ gitea.repository }}
+            -Dsonar.qualitygate.wait=true

.gitea/workflows/release.yml

@@ -0,0 +1,75 @@
+name: Release
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  release:
+    name: Build & Release
+    if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'v')
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Extract Version
+        id: get_version
+        run: echo "VERSION=${{ github.head_ref }}" >> $GITHUB_OUTPUT
+
+      - name: Generate Changelog
+        id: changelog
+        uses: https://github.com/metcalfc/changelog-generator@v4.6.2
+        with:
+          myToken: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        run: |
+          VERSION=${{ steps.get_version.outputs.VERSION }}
+          docker build -t cr.jdbnet.co.uk/public/ipam:$VERSION \
+                       -t cr.jdbnet.co.uk/public/ipam:v2 \
+                       -t cr.jdbnet.co.uk/public/ipam:latest \
+                       --build-arg VERSION=$VERSION \
+                       .
+          docker push cr.jdbnet.co.uk/public/ipam:$VERSION
+          docker push cr.jdbnet.co.uk/public/ipam:latest
+
+      - name: Create Gitea Release
+        uses: https://gitea.com/actions/gitea-release-action@v1
+        with:
+          tag_name: ${{ steps.get_version.outputs.VERSION }}
+          name: ${{ steps.get_version.outputs.VERSION }}
+          body: ${{ steps.changelog.outputs.changelog }}
+          draft: false
+          prerelease: false
+
+  sonarqube:
+    name: SonarQube
+    runs-on: build-htz-01
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Create Valid Project Key
+        id: sonar_setup
+        run: |
+          CLEAN_KEY=$(echo "${{ gitea.repository }}" | tr '/' ':')
+          echo "key=$CLEAN_KEY" >> $GITHUB_OUTPUT
+
+      - name: SonarQube Scan
+        uses: sonarsource/sonarqube-scan-action@master
+        continue-on-error: true
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+        with:
+          args: >
+            -Dsonar.projectKey=${{ steps.sonar_setup.outputs.key }}
+            -Dsonar.projectName=${{ gitea.repository }}
+            -Dsonar.qualitygate.wait=true

.github/workflows/release-please.yml

@@ -1,72 +0,0 @@
-name: Release Please
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-  pull-requests: write
-  packages: write
-
-jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    outputs:
-      release_created: ${{ steps.release.outputs.release_created }}
-    steps:
-      - uses: googleapis/release-please-action@v4
-        id: release
-        with:
-          manifest-file: .release-please-manifest.json
-          config-file: .release-please-config.json
-
-      - name: Checkout
-        if: ${{ steps.release.outputs.release_created }}
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        if: ${{ steps.release.outputs.release_created }}
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GitHub Container Registry
-        if: ${{ steps.release.outputs.release_created }}
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Read version
-        if: ${{ steps.release.outputs.release_created }}
-        id: version
-        run: |
-          VERSION=$(cat VERSION)
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-          echo "VERSION=$VERSION" >> $GITHUB_ENV
-
-      - name: Build and push Docker image
-        if: ${{ steps.release.outputs.release_created }}
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          tags: |
-            ghcr.io/jdb-net/ipam:${{ env.VERSION }}
-            ghcr.io/jdb-net/ipam:latest
-          build-args: |
-            VERSION=${{ env.VERSION }}
-
-  deploy:
-    name: Deploy to Kubernetes
-    needs: release-please
-    if: ${{ needs.release-please.outputs.release_created }}
-    runs-on: [ k3s-lan-01 ]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Apply manifests
-        run: |
-          sudo kubectl replace -f deployment.yml --grace-period=60 --force

.gitignore

@@ -1,4 +1,4 @@
 __pycache__
-tailwindcss
-static/css/output.css
 .env
+frontend/node_modules/
+static/dist/

.release-please-config.json

@@ -1,10 +0,0 @@
-{
-    "packages": {
-      ".": {
-        "release-type": "simple",
-        "version-file": "VERSION"
-      }
-    },
-    "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json"
-  }
-  

.release-please-manifest.json

@@ -1,3 +0,0 @@
-{
-    ".": "1.4.0"
-}

API.md

@@ -0,0 +1,77 @@
+# IPAM API v2
+
+All endpoints are JSON under `/api/v2`. The Vue SPA uses **session cookies** (`credentials: include`); automation uses **API keys** (`X-API-Key`, `Authorization: Bearer`, or `?api_key=`).
+
+## Authentication
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/v2/auth/login` | `{ email, password }` → `{ ok }` or `{ requires_2fa }` / `{ requires_setup }` |
+| POST | `/api/v2/auth/verify-2fa` | `{ code, use_backup? }` |
+| POST | `/api/v2/auth/setup-2fa` | `{ action: "generate" \| "verify", code? }` |
+| POST | `/api/v2/auth/logout` | Clear session |
+| GET | `/api/v2/auth/me` | User, permissions, org branding |
+
+## Account
+
+| Method | Endpoint |
+|--------|----------|
+| GET | `/api/v2/account` |
+| POST | `/api/v2/account/change-password` |
+| POST | `/api/v2/account/disable-2fa` |
+| POST | `/api/v2/account/regenerate-backup-codes` |
+
+## List response format
+
+List endpoints return `{ "items": [...] }`. Exceptions:
+
+- **Audit log** — `{ "items": [...], "total": N }` (supports pagination)
+- **Devices by tag** — `{ "items": [...], "meta": { "tag_name", "count" } }`
+- **Single resources** (device, subnet, rack) — flat object, not wrapped in `items`
+
+## Core resources
+
+| Resource | Endpoints |
+|----------|-----------|
+| Dashboard | `GET /api/v2/dashboard` |
+| Search | `GET /api/v2/search?q=` |
+| Devices | CRUD + `/ips`, `/tags`, `/ip-history`, `/custom-fields` |
+| Subnets | CRUD + `/available-ips`, `/next_free_ip`, `/export`, `/dhcp`, `/custom-fields` |
+| IP addresses | `PATCH /api/v2/ip-addresses/{id}` (notes) |
+| IP history | `GET /api/v2/ips/{ip}/history` |
+| Tags | CRUD + device tag assign/remove |
+| Racks | CRUD + `/devices`, `/export` |
+| Custom fields | CRUD + `POST /custom-fields/reorder` |
+| Audit | `GET /audit`, `GET /audit/actions`, `GET /audit/export` |
+| Users & roles | CRUD + `POST /users/{id}/regenerate-api-key` |
+| Permissions | `GET /permissions` |
+| Bulk | `POST /bulk/assign-ips`, `/create-devices`, `/assign-tags`, `/export-subnets` |
+
+### Subnet IP helpers
+
+- `GET /api/v2/subnets/{id}/available-ips` — unassigned IPs outside DHCP pools
+- `GET /api/v2/subnets/{id}/next_free_ip` — first available IP (also excludes DHCP pools)
+
+### Audit query parameters
+
+| Param | Description |
+|-------|-------------|
+| `limit` | Page size (default 100) |
+| `offset` | Offset for pagination (default 0) |
+| `user` | Filter by user name (partial match) |
+| `action` | Exact action match (see `GET /audit/actions` for values) |
+| `from` | Start date (`YYYY-MM-DD`) |
+| `to` | End date (`YYYY-MM-DD`) |
+
+Export (`GET /audit/export`) accepts the same filter params.
+
+See route handlers in `app.py` for required permissions and request bodies.
+
+## Example
+
+```bash
+curl -H "X-API-Key: YOUR_KEY" https://host/api/v2/devices
+curl -c cookies.txt -X POST -H "Content-Type: application/json" \
+  -d '{"email":"admin@example.com","password":"password"}' \
+  https://host/api/v2/auth/login
+```

CHANGELOG.md

@@ -1,51 +0,0 @@
-# Changelog
-
-## [1.4.0](https://github.com/JDB-NET/ipam/compare/v1.3.0...v1.4.0) (2025-11-06)
-
-
-### Features
-
-* :sparkles: full api integration ([c53472c](https://github.com/JDB-NET/ipam/commit/c53472c5d760e28e53a737cb0546e85c9a422d15))
-
-## [1.3.0](https://github.com/JDB-NET/ipam/compare/v1.2.0...v1.3.0) (2025-11-06)
-
-
-### Features
-
-* :sparkles: role based access control ([3bf2697](https://github.com/JDB-NET/ipam/commit/3bf269701030bc1f14a48c5af488286c424dbfa7))
-
-## [1.2.0](https://github.com/JDB-NET/ipam/compare/v1.1.1...v1.2.0) (2025-11-06)
-
-
-### Features
-
-* :sparkles: added the ability to create/edit/remove device types ([d68eefc](https://github.com/JDB-NET/ipam/commit/d68eefcf0cc4a59cda9cedb3e126d974ee45d2ad))
-
-
-### Bug Fixes
-
-* :bug: missing button classes ([f93fa15](https://github.com/JDB-NET/ipam/commit/f93fa155eb5d6c9ff4ed19f332c3ad6fff328d31))
-
-## [1.1.1](https://github.com/JDB-NET/ipam/compare/v1.1.0...v1.1.1) (2025-11-01)
-
-
-### Bug Fixes
-
-* :bug: image name ([de123fa](https://github.com/JDB-NET/ipam/commit/de123fafd40d97ea6e545bd8dd1d3a812e2a709f))
-
-## [1.1.0](https://github.com/JDB-NET/ipam/compare/v1.0.0...v1.1.0) (2025-11-01)
-
-
-### Features
-
-* Added icon on login button. Closes [#1](https://github.com/JDB-NET/ipam/issues/1) ([6e068b6](https://github.com/JDB-NET/ipam/commit/6e068b672592f7d23ca66a0a6189b5763d89a698))
-* Added light mode up to admin ([38c8402](https://github.com/JDB-NET/ipam/commit/38c840251f03c8f1e1a2c407efa77621df70ce2f))
-* Rack stuff now complete ([5d220d3](https://github.com/JDB-NET/ipam/commit/5d220d354df83db8b2bfbf8e2c87bd78ba91f6e5))
-
-
-### Bug Fixes
-
-* Back buttons now hidden on mobile ([40a7a2f](https://github.com/JDB-NET/ipam/commit/40a7a2f2d58f6c89a7e7e74908c088e7eddf966a))
-* Corrected image in deployment ([9ecd492](https://github.com/JDB-NET/ipam/commit/9ecd492065fcd226d274f8e343d401437e1c8de8))
-* Fixed back button on device page ([9734e4d](https://github.com/JDB-NET/ipam/commit/9734e4df0b27461867393c132991f9e2ec907de4))
-* Fixed database initialisation and dropped to 1 worker ([7cd6a0f](https://github.com/JDB-NET/ipam/commit/7cd6a0f96d8dc20743603d55498d8c1af8069690))

Dockerfile

@@ -1,12 +1,18 @@
-FROM python:3.13-slim
+FROM node:22-bookworm-slim AS frontend
 WORKDIR /app
-COPY . /app
+COPY frontend/package.json ./frontend/
-RUN pip install -r requirements.txt
+RUN cd frontend && npm install
-RUN apt-get update && apt-get install -y curl
+COPY frontend/ ./frontend/
-RUN rm -rf /var/lib/apt/lists/*
+RUN cd frontend && npm run build
-RUN curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 \
+
-    && chmod +x tailwindcss-linux-x64 \
+FROM python:3.14-slim
-    && ./tailwindcss-linux-x64 -i ./static/css/input.css -o ./static/css/output.css --content "./templates/*.html,./static/js/*.js" --minify \
+LABEL org.opencontainers.image.vendor="JDB-NET"
-    && rm tailwindcss-linux-x64
+WORKDIR /app
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+COPY app.py db.py ./
+COPY --from=frontend /app/static/dist ./static/dist
+ARG VERSION=unknown
+ENV VERSION=${VERSION}
 EXPOSE 5000
 CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app", "--log-level", "warning"]

HELP.md

@@ -0,0 +1,229 @@
+## Configuration
+
+### Environment Variables
+
+- `MYSQL_HOST`: MySQL/MariaDB host (default: localhost)
+- `MYSQL_USER`: Database user (default: user)
+- `MYSQL_PASSWORD`: Database password (default: password)
+- `MYSQL_DATABASE`: Database name (default: ipam)
+- `SECRET_KEY`: Flask secret key for sessions (**REQUIRED in production!**)
+- `NAME`: Organisation name displayed in header (default: JDB-NET)
+- `LOGO_PNG`: URL or path to organisation logo (default: JDB-NET logo)
+
+### Database Setup
+
+The application automatically initializes the database schema on first run. Ensure the database and user exist with appropriate 
+permissions:
+
+```sql
+CREATE DATABASE ipam;
+CREATE USER 'ipam'@'%' IDENTIFIED BY 'your_password';
+GRANT ALL PRIVILEGES ON ipam.* TO 'ipam'@'%';
+FLUSH PRIVILEGES;
+```
+
+### Upgrading from v1.x
+
+See [v1-to-v2-breaking-changes.md](v1-to-v2-breaking-changes.md) for removed features, route changes, and automatic database migrations. 
+Back up your database before upgrading.
+
+## Usage
+
+### First Login
+
+1. Access the web interface at `http://your-server:5000`
+2. Log in with the default credentials:
+   - Email: `admin@example.com`
+   - Password: `password`
+3. **Change the default password immediately** via the Users page
+
+### Managing Subnets
+
+1. Navigate to **Subnet Management** from the main menu (`/subnets/manage`)
+2. Click **Add Subnet** and fill in:
+   - **Name**: Friendly name for the subnet (e.g., "Office LAN")
+   - **CIDR**: Subnet in CIDR notation (e.g., `192.168.1.0/24`)
+   - **Site**: Site/location identifier
+3. The system automatically generates all IP addresses in the subnet
+
+### Adding Devices
+
+1. Navigate to "Devices" from the main menu
+2. Click "Add Device"
+3. Enter device name (and optional description)
+4. Click "Create Device"
+
+### Assigning IP Addresses to Devices
+
+1. Open a device from the Devices page
+2. Select a subnet and available IP address
+3. Click "Assign IP" - the hostname is automatically updated
+
+### Configuring DHCP Pools
+
+1. Open a subnet from the dashboard or subnet list
+2. Click **DHCP** to open the DHCP pool modal
+3. Set the start and end IP addresses
+4. Optionally specify excluded IPs (comma-separated)
+5. IPs within the pool range are automatically marked as "DHCP"
+
+### Managing Racks
+
+1. Navigate to "Racks" from the main menu
+2. Click "Add Rack" and specify:
+   - **Name**: Rack identifier
+   - **Site**: Site location
+   - **Height**: Rack height in U units
+3. Open a rack to assign devices to specific U positions (front or back)
+
+### Device Tagging
+
+1. **Managing Tags** (requires `add_tag` / `edit_tag` / `delete_tag` permissions):
+   - Navigate to **Tags** from the main menu
+   - Create tags with custom colours and descriptions
+   - Edit or delete existing tags as permitted by your role
+
+2. **Assigning Tags to Devices**:
+   - Open any device from the Devices page
+   - Use the tag assignment dropdown to add multiple tags
+   - Remove tags by clicking the × button next to the tag name
+
+3. **Filtering by Tags**:
+   - Use the tag filter dropdown on the Devices page to view devices with specific tags
+   - Tags appear as colored badges throughout the interface for easy identification
+
+### Audit Log
+
+View changes in **Audit Log**. Filter by user name, action type, and date range. Export filtered results to CSV.
+
+### Exporting Data
+
+- **Subnet CSV**: Click "Export CSV" on any subnet page to download IP addresses with hostnames
+- **Rack CSV**: Click "Export CSV" on any rack page to download rack layout information
+
+### Role-Based Access Control
+
+The system uses a granular role-based access control (RBAC) system to manage user permissions:
+
+1. **Default Roles**:
+   - **Admin**: Full access to all features including user and role management
+   - **User**: Can view and manage most features (devices, subnets, racks, etc.) but cannot manage users or roles
+   - **View Only**: Read-only access to view pages but cannot make any changes
+
+2. **Custom Roles**: Administrators can create custom roles with specific permission sets from the Users page
+
+3. **Permission Granularity**: Permissions are organized into categories:
+   - View permissions (access to pages)
+   - Device Management (add, edit, delete devices)
+   - Network Management (subnet operations)
+   - Rack Management (rack operations)
+   - DHCP Configuration
+   - Administration (user and role management)
+
+4. **User Management**: Navigate to the Users page to:
+   - Create and manage users
+   - Assign roles to users
+   - Create custom roles with specific permissions
+   - View and regenerate API keys
+
+### REST API
+
+Programmatic access uses **`/api/v2`**. The browser SPA uses session cookies; automation uses API keys via:
+
+- `X-API-Key` header
+- `Authorization: Bearer <api_key>` header
+- `?api_key=<api_key>` query parameter
+
+Each user has an API key (view/regenerate on the Users page). Keys respect the same RBAC permissions as the web UI.
+
+Full endpoint reference: [API.md](API.md)
+
+```bash
+# List devices
+curl -H "X-API-Key: YOUR_KEY" https://your-server:5000/api/v2/devices
+
+# Session login (browser-style)
+curl -c cookies.txt -X POST -H "Content-Type: application/json" \
+  -d '{"email":"admin@example.com","password":"password"}' \
+  https://your-server:5000/api/v2/auth/login
+```
+
+## Kubernetes Deployment
+
+Example deployment manifest:
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ipam
+  namespace: ipam
+spec:
+  replicas: 1
+  template:
+    spec:
+      containers:
+      - name: ipam
+        image: cr.jdbnet.co.uk/public/ipam:latest
+        ports:
+        - containerPort: 5000
+        env:
+        - name: SECRET_KEY
+          valueFrom:
+            secretKeyRef:
+              name: ipam-secrets
+              key: secret-key
+        - name: MYSQL_HOST
+          value: "mysql-service"
+        - name: MYSQL_USER
+          value: "ipam"
+        - name: MYSQL_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: ipam-secrets
+              key: mysql-password
+        - name: MYSQL_DATABASE
+          value: "ipam"
+```
+
+## Security Notes
+
+- **CHANGE THE DEFAULT ADMIN PASSWORD** immediately after first login
+- **CHANGE THE SECRET_KEY** in production - use a strong random string (e.g., `openssl rand -hex 32`)
+- Use strong passwords for database access
+- Ensure database connections are secured (consider SSL/TLS for MySQL connections)
+- Review audit logs regularly for unauthorized changes
+- Limit database user permissions if possible (though CREATE/ALTER may be needed for schema initialization)
+- **API Keys**: Keep API keys secure and never share them publicly. Regenerate keys if they may have been compromised
+- **Role-Based Access**: Use the RBAC system to grant users only the permissions they need (principle of least privilege)
+- **HTTPS**: Use HTTPS in production to protect API keys and session data in transit
+
+## Troubleshooting
+
+### Database Connection Issues
+
+- Ensure MySQL/MariaDB is running and accessible from the container
+- Check database credentials in environment variables
+- Verify database and user exist with proper permissions
+- Check network connectivity between container and database
+- Ensure the database name matches exactly (case-sensitive on some systems)
+
+### Application Not Starting
+
+- Check container logs: `docker logs ipam`
+- Verify all required environment variables are set
+- Ensure port 5000 is not already in use
+- Check that MySQL/MariaDB is reachable
+
+### Subnet or IP Not Appearing
+
+- Verify CIDR notation is correct (supports /24 to /32)
+- Check subnet was created successfully (Subnet Management page)
+- Ensure you're logged in with appropriate permissions
+- Check application logs for errors
+
+### Device IP Assignment Issues
+
+- Verify the IP address is available (not already assigned)
+- Check that the IP is not in a DHCP pool range
+- Ensure the device exists and is visible in the Devices list

README.md

@@ -1,286 +1,43 @@
 <div align="center">
-  <img src="https://projects.jdbnet.co.uk/ipam/img/favicon.png" alt="IPAM" width="200" />
+  <img src="https://assets.jdbnet.co.uk/projects/ipam.png" alt="IPAM" width="200" />
 
   # IP Address Management
 </div>
 
-A Flask-based web application for comprehensive IP Address Management (IPAM). Manage subnets, IP addresses, devices, DHCP pools, and physical rack infrastructure with an intuitive web interface.
+A Flask-based web application for IP Address Management (IPAM). Manage subnets, IP addresses, devices, DHCP pools, and rack infrastructure through a Vue 3 web interface and a JSON REST API.
 
 ## Features
 
-- **Subnet Management**: Create and manage IP subnets with CIDR notation (supports /24 to /32)
+- **Subnet management** - CIDR subnets with automatic IP generation
-- **IP Address Tracking**: Automatic IP address generation and tracking for each subnet
+- **IP assignment** - Assign addresses to devices with hostname tracking
-- **Device Management**: Track devices with types (Server, VM, Switch, Firewall, WiFi AP, Printer, Other)
+- **Device management** - Names, descriptions, tags, and custom fields
-- **IP Assignment**: Assign IP addresses to devices with automatic hostname updates
+- **DHCP pools** — Configure ranges and excluded IPs per subnet
-- **DHCP Pool Configuration**: Configure DHCP pools with start/end IP ranges and excluded IPs
+- **Rack management** - U positions with front/back layout
-- **Rack Management**: Physical infrastructure tracking with U positions and front/back sides
+- **Site organisation** - Group subnets and devices by location
-- **Site Organization**: Organize subnets and devices by site/location
+- **Audit logging** - Filterable change history with CSV export
-- **Audit Logging**: Complete audit trail of all changes with user, action, details, and timestamps
+- **Role-based access control** - Granular permissions and custom roles
-- **User Management**: Multi-user support with secure password authentication
+- **REST API v2** - Session cookies for the browser, API keys for automation
-- **Role-Based Access Control (RBAC)**: Granular permission system with default roles (admin, user, view_only) and custom role creation
-- **REST API**: Full-featured REST API with API key authentication for programmatic access
-- **CSV Export**: Export subnet and rack data to CSV files
-- **Device Statistics**: View device counts by type
-- **Web Interface**: Modern, responsive web GUI built with Tailwind CSS and dark mode support
 
-## Quick Start with Docker
+## Screenshot
 
-### Docker Run
+![IPAM Dashboard](img/screenshot.png)
 
-```bash
+## Docker Compose
-docker run -d \
-  --name ipam \
-  -p 5000:5000 \
-  -e MYSQL_HOST=10.10.2.27 \
-  -e MYSQL_USER=ipam \
-  -e MYSQL_PASSWORD=your_password \
-  -e MYSQL_DATABASE=ipam \
-  -e SECRET_KEY=your_secret_key \
-  -e NAME="Your Organization" \
-  -e LOGO_PNG="https://example.com/logo.png" \
-  ghcr.io/jdb-net/ipam:latest
-```
-
-### Docker Compose
 
 ```yaml
-version: '3.8'
-
 services:
   ipam:
-    image: ghcr.io/jdb-net/ipam:latest
+    image: cr.jdbnet.co.uk/public/ipam:latest
     container_name: ipam
     restart: unless-stopped
     ports:
-      - "5000:5000"  # Web interface
+      - "5000:5000"
     environment:
       - MYSQL_HOST=10.10.2.27
       - MYSQL_USER=ipam
       - MYSQL_PASSWORD=your_password
       - MYSQL_DATABASE=ipam
       - SECRET_KEY=your_secret_key
-      - NAME=Your Organization
+      - NAME=Your Organisation
       - LOGO_PNG=https://example.com/logo.png
 ```
-
-## Configuration
-
-### Environment Variables
-
-- `MYSQL_HOST`: MySQL/MariaDB host (default: localhost)
-- `MYSQL_USER`: Database user (default: user)
-- `MYSQL_PASSWORD`: Database password (default: password)
-- `MYSQL_DATABASE`: Database name (default: ipam)
-- `SECRET_KEY`: Flask secret key for sessions (**REQUIRED in production!**)
-- `NAME`: Organization name displayed in header (default: JDB-NET)
-- `LOGO_PNG`: URL or path to organization logo (default: JDB-NET logo)
-
-### Database Setup
-
-The application automatically initializes the database schema on first run. Ensure the database and user exist with appropriate permissions:
-
-```sql
-CREATE DATABASE ipam;
-CREATE USER 'ipam'@'%' IDENTIFIED BY 'your_password';
-GRANT ALL PRIVILEGES ON ipam.* TO 'ipam'@'%';
-FLUSH PRIVILEGES;
-```
-
-## Usage
-
-### First Login
-
-1. Access the web interface at `http://your-server:5000`
-2. Log in with the default credentials:
-   - Email: `admin@example.com`
-   - Password: `password`
-3. **Change the default password immediately** via the Users page
-
-### Managing Subnets
-
-1. Navigate to "Admin" from the main menu
-2. Click "Add Subnet" and fill in:
-   - **Name**: Friendly name for the subnet (e.g., "Office LAN")
-   - **CIDR**: Subnet in CIDR notation (e.g., `192.168.1.0/24`)
-   - **Site**: Site/location identifier
-3. The system automatically generates all IP addresses in the subnet
-
-### Adding Devices
-
-1. Navigate to "Devices" from the main menu
-2. Click "Add Device"
-3. Enter device name and select device type
-4. Click "Create Device"
-
-### Assigning IP Addresses to Devices
-
-1. Open a device from the Devices page
-2. Select a subnet and available IP address
-3. Click "Assign IP" - the hostname is automatically updated
-
-### Configuring DHCP Pools
-
-1. Open a subnet view
-2. Click "Configure DHCP Pool"
-3. Set the start and end IP addresses
-4. Optionally specify excluded IPs (comma-separated)
-5. IPs within the pool range are automatically marked as "DHCP"
-
-### Managing Racks
-
-1. Navigate to "Racks" from the main menu
-2. Click "Add Rack" and specify:
-   - **Name**: Rack identifier
-   - **Site**: Site location
-   - **Height**: Rack height in U units
-3. Open a rack to assign devices to specific U positions (front or back)
-
-### Audit Log
-
-View all changes and actions in the "Audit Log" section, with filtering by user, subnet, action type, or device name.
-
-### Exporting Data
-
-- **Subnet CSV**: Click "Export CSV" on any subnet page to download IP addresses with hostnames
-- **Rack CSV**: Click "Export CSV" on any rack page to download rack layout information
-
-### Role-Based Access Control
-
-The system uses a granular role-based access control (RBAC) system to manage user permissions:
-
-1. **Default Roles**:
-   - **Admin**: Full access to all features including user and role management
-   - **User**: Can view and manage most features (devices, subnets, racks, etc.) but cannot manage users or roles
-   - **View Only**: Read-only access to view pages but cannot make any changes
-
-2. **Custom Roles**: Administrators can create custom roles with specific permission sets from the Users page
-
-3. **Permission Granularity**: Permissions are organized into categories:
-   - View permissions (access to pages)
-   - Device Management (add, edit, delete devices)
-   - Network Management (subnet operations)
-   - Rack Management (rack operations)
-   - DHCP Configuration
-   - Administration (user and role management)
-
-4. **User Management**: Navigate to the Users page to:
-   - Create and manage users
-   - Assign roles to users
-   - Create custom roles with specific permissions
-   - View and regenerate API keys
-
-### REST API
-
-The application includes a comprehensive REST API for programmatic access:
-
-1. **Authentication**: All API requests require an API key, which can be provided via:
-   - `X-API-Key` header
-   - `Authorization: Bearer <api_key>` header
-   - `?api_key=<api_key>` query parameter
-
-2. **Base URL**: All API endpoints are prefixed with `/api/v1`
-
-3. **Available Endpoints**:
-   - **Devices**: `GET`, `POST`, `PUT`, `DELETE /api/v1/devices`
-   - **Subnets**: `GET`, `POST`, `PUT`, `DELETE /api/v1/subnets`
-   - **Racks**: `GET`, `POST`, `DELETE /api/v1/racks`
-   - **Device Types**: `GET /api/v1/device-types`
-   - **DHCP**: `GET`, `POST /api/v1/subnets/{id}/dhcp`
-   - **Audit Log**: `GET /api/v1/audit`
-   - **Users & Roles**: `GET /api/v1/users`, `GET /api/v1/roles` (admin only)
-
-4. **API Keys**: Each user has a unique API key that can be viewed and regenerated from the Users page. API keys respect the same role-based permissions as the web interface.
-
-5. **Documentation**: Full API documentation is available in the Help page of the web interface.
-
-**Example API Request**:
-```bash
-curl -H "X-API-Key: your_api_key" \
-     https://your-server:5000/api/v1/devices
-```
-
-## Kubernetes Deployment
-
-The project includes a Kubernetes deployment manifest. See `deployment.yml` for details.
-
-**Example Kubernetes deployment:**
-
-```yaml
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: ipam
-  namespace: ipam
-spec:
-  replicas: 1
-  template:
-    spec:
-      containers:
-      - name: ipam
-        image: ghcr.io/jdb-net/ipam:latest
-        ports:
-        - containerPort: 5000
-        env:
-        - name: SECRET_KEY
-          valueFrom:
-            secretKeyRef:
-              name: ipam-secrets
-              key: secret-key
-        - name: MYSQL_HOST
-          value: "mysql-service"
-        - name: MYSQL_USER
-          value: "ipam"
-        - name: MYSQL_PASSWORD
-          valueFrom:
-            secretKeyRef:
-              name: ipam-secrets
-              key: mysql-password
-        - name: MYSQL_DATABASE
-          value: "ipam"
-```
-
-## Security Notes
-
-- **CHANGE THE DEFAULT ADMIN PASSWORD** immediately after first login
-- **CHANGE THE SECRET_KEY** in production - use a strong random string (e.g., `openssl rand -hex 32`)
-- Use strong passwords for database access
-- Ensure database connections are secured (consider SSL/TLS for MySQL connections)
-- Review audit logs regularly for unauthorized changes
-- Limit database user permissions if possible (though CREATE/ALTER may be needed for schema initialization)
-- **API Keys**: Keep API keys secure and never share them publicly. Regenerate keys if they may have been compromised
-- **Role-Based Access**: Use the RBAC system to grant users only the permissions they need (principle of least privilege)
-- **HTTPS**: Use HTTPS in production to protect API keys and session data in transit
-
-## Troubleshooting
-
-### Database Connection Issues
-
-- Ensure MySQL/MariaDB is running and accessible from the container
-- Check database credentials in environment variables
-- Verify database and user exist with proper permissions
-- Check network connectivity between container and database
-- Ensure the database name matches exactly (case-sensitive on some systems)
-
-### Application Not Starting
-
-- Check container logs: `docker logs ipam`
-- Verify all required environment variables are set
-- Ensure port 5000 is not already in use
-- Check that MySQL/MariaDB is reachable
-
-### Subnet or IP Not Appearing
-
-- Verify CIDR notation is correct (supports /24 to /32)
-- Check subnet was created successfully (view in Admin page)
-- Ensure you're logged in with appropriate permissions
-- Check application logs for errors
-
-### Device IP Assignment Issues
-
-- Verify the IP address is available (not already assigned)
-- Check that the IP is not in a DHCP pool range
-- Ensure the device exists and is visible in the Devices list
-
-## License
-
-This project is provided as-is for IP Address Management.

VERSION

@@ -1 +0,0 @@
-1.4.0

db.py

@@ -3,8 +3,10 @@ import hashlib
 import base64
 import secrets
 import mysql.connector
+import logging
 from flask import current_app
 
+# ── Connection, crypto, schema init ─────────────────────────────────────────
 def hash_password(password, salt=None):
     if salt is None:
         salt = base64.b64encode(os.urandom(16)).decode('utf-8')
@@ -64,8 +66,8 @@ def init_db(app=None):
         details TEXT,
         subnet_id INTEGER,
         timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
-        FOREIGN KEY (user_id) REFERENCES User(id),
+        FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE SET NULL,
-        FOREIGN KEY (subnet_id) REFERENCES Subnet(id)
+        FOREIGN KEY (subnet_id) REFERENCES Subnet(id) ON DELETE SET NULL
     )
     ''')
     cursor.execute('''
@@ -78,19 +80,10 @@ def init_db(app=None):
     )
     ''')
     cursor.execute('''
-    CREATE TABLE IF NOT EXISTS DeviceType (
-        id INTEGER PRIMARY KEY AUTO_INCREMENT,
-        name VARCHAR(255) NOT NULL UNIQUE,
-        icon_class VARCHAR(255) NOT NULL
-    )
-    ''')
-    cursor.execute('''
     CREATE TABLE IF NOT EXISTS Device (
         id INTEGER PRIMARY KEY AUTO_INCREMENT,
         name VARCHAR(255) NOT NULL,
-        description TEXT,
+        description TEXT
-        device_type_id INTEGER DEFAULT 1,
-        FOREIGN KEY (device_type_id) REFERENCES DeviceType(id)
     )
     ''')
     cursor.execute('''
@@ -132,28 +125,6 @@ def init_db(app=None):
         FOREIGN KEY (device_id) REFERENCES Device(id) ON DELETE CASCADE
     )
     ''')
-    cursor.execute('SELECT COUNT(*) FROM DeviceType')
-    if cursor.fetchone()[0] == 0:
-        cursor.executemany('INSERT INTO DeviceType (name, icon_class) VALUES (%s, %s)', [
-            ('Server', 'fa-server'),
-            ('Virtual Machine', 'fa-boxes-stacked'),
-            ('Switch', 'fa-network-wired'),
-            ('Firewall', 'fa-shield-halved'),
-            ('WiFi AP', 'fa-wifi'),
-            ('Printer', 'fa-print'),
-            ('Other', 'fa-question')
-        ])
-    cursor.execute("SHOW COLUMNS FROM Device LIKE 'device_type_id'")
-    if not cursor.fetchone():
-        cursor.execute('ALTER TABLE Device ADD COLUMN device_type_id INTEGER DEFAULT NULL')
-    cursor.execute("SELECT id FROM DeviceType WHERE name='Other'")
-    other_id = cursor.fetchone()[0]
-    cursor.execute('UPDATE Device SET device_type_id = %s WHERE device_type_id IS NULL', (other_id,))
-    try:
-        cursor.execute('ALTER TABLE Device ADD CONSTRAINT fk_device_type FOREIGN KEY (device_type_id) REFERENCES DeviceType(id)')
-    except mysql.connector.Error as e:
-        if e.errno != 1061 and e.errno != 1826 and 'Duplicate' not in str(e):
-            raise
     # Create Role table
     cursor.execute('''
     CREATE TABLE IF NOT EXISTS Role (
@@ -199,6 +170,146 @@ def init_db(app=None):
     if not cursor.fetchone():
         cursor.execute('ALTER TABLE User ADD COLUMN api_key VARCHAR(255) DEFAULT NULL UNIQUE')
     
+    # Add 2FA columns to User table if they don't exist
+    cursor.execute("SHOW COLUMNS FROM User LIKE 'totp_secret'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE User ADD COLUMN totp_secret VARCHAR(255) DEFAULT NULL')
+    
+    cursor.execute("SHOW COLUMNS FROM User LIKE 'totp_enabled'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE User ADD COLUMN totp_enabled BOOLEAN DEFAULT FALSE')
+    
+    cursor.execute("SHOW COLUMNS FROM User LIKE 'backup_codes'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE User ADD COLUMN backup_codes TEXT DEFAULT NULL')
+    
+    cursor.execute("SHOW COLUMNS FROM User LIKE 'two_fa_setup_complete'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE User ADD COLUMN two_fa_setup_complete BOOLEAN DEFAULT FALSE')
+    
+    # Add require_2fa column to Role table if it doesn't exist
+    cursor.execute("SHOW COLUMNS FROM Role LIKE 'require_2fa'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Role ADD COLUMN require_2fa BOOLEAN DEFAULT FALSE')
+    
+    # Ensure AuditLog foreign keys have ON DELETE SET NULL to preserve audit logs
+    # This is critical - audit logs should NEVER be deleted, even when referenced entities are deleted
+    try:
+        # Check and update user_id foreign key
+        cursor.execute('''
+            SELECT CONSTRAINT_NAME 
+            FROM information_schema.KEY_COLUMN_USAGE 
+            WHERE TABLE_SCHEMA = DATABASE() 
+            AND TABLE_NAME = 'AuditLog' 
+            AND COLUMN_NAME = 'user_id' 
+            AND REFERENCED_TABLE_NAME = 'User'
+        ''')
+        fk_user = cursor.fetchone()
+        if fk_user:
+            fk_name = fk_user[0]
+            # Drop and recreate with ON DELETE SET NULL
+            cursor.execute(f'ALTER TABLE AuditLog DROP FOREIGN KEY {fk_name}')
+            cursor.execute('ALTER TABLE AuditLog ADD CONSTRAINT fk_auditlog_user FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE SET NULL')
+    except mysql.connector.Error as e:
+        # Foreign key might not exist or already be correct, continue
+        if e.errno != 1025 and e.errno != 1091:  # Not "Cannot drop foreign key" or "Unknown key"
+            logging.warning(f"Could not update AuditLog user_id foreign key: {e}")
+    
+    try:
+        # Check and update subnet_id foreign key
+        cursor.execute('''
+            SELECT CONSTRAINT_NAME 
+            FROM information_schema.KEY_COLUMN_USAGE 
+            WHERE TABLE_SCHEMA = DATABASE() 
+            AND TABLE_NAME = 'AuditLog' 
+            AND COLUMN_NAME = 'subnet_id' 
+            AND REFERENCED_TABLE_NAME = 'Subnet'
+        ''')
+        fk_subnet = cursor.fetchone()
+        if fk_subnet:
+            fk_name = fk_subnet[0]
+            # Drop and recreate with ON DELETE SET NULL
+            cursor.execute(f'ALTER TABLE AuditLog DROP FOREIGN KEY {fk_name}')
+            cursor.execute('ALTER TABLE AuditLog ADD CONSTRAINT fk_auditlog_subnet FOREIGN KEY (subnet_id) REFERENCES Subnet(id) ON DELETE SET NULL')
+    except mysql.connector.Error as e:
+        # Foreign key might not exist or already be correct, continue
+        if e.errno != 1025 and e.errno != 1091:  # Not "Cannot drop foreign key" or "Unknown key"
+            logging.warning(f"Could not update AuditLog subnet_id foreign key: {e}")
+    
+    # Create Tag table
+    cursor.execute('''
+    CREATE TABLE IF NOT EXISTS Tag (
+        id INTEGER PRIMARY KEY AUTO_INCREMENT,
+        name VARCHAR(255) NOT NULL UNIQUE,
+        color VARCHAR(7) DEFAULT '#6B7280',
+        description TEXT,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )
+    ''')
+    
+    # Create DeviceTag junction table
+    cursor.execute('''
+    CREATE TABLE IF NOT EXISTS DeviceTag (
+        id INTEGER PRIMARY KEY AUTO_INCREMENT,
+        device_id INTEGER NOT NULL,
+        tag_id INTEGER NOT NULL,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        UNIQUE KEY unique_device_tag (device_id, tag_id),
+        FOREIGN KEY (device_id) REFERENCES Device(id) ON DELETE CASCADE,
+        FOREIGN KEY (tag_id) REFERENCES Tag(id) ON DELETE CASCADE
+    )
+    ''')
+    
+    # Create CustomFieldDefinition table
+    cursor.execute('''
+    CREATE TABLE IF NOT EXISTS CustomFieldDefinition (
+        id INTEGER PRIMARY KEY AUTO_INCREMENT,
+        entity_type ENUM('device', 'subnet') NOT NULL,
+        name VARCHAR(255) NOT NULL,
+        field_key VARCHAR(255) NOT NULL UNIQUE,
+        field_type VARCHAR(50) NOT NULL,
+        required BOOLEAN DEFAULT FALSE,
+        default_value TEXT,
+        help_text TEXT,
+        display_order INTEGER DEFAULT 0,
+        validation_rules TEXT,
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    )
+    ''')
+    
+    # Add custom_fields column to Device table if it doesn't exist
+    cursor.execute("SHOW COLUMNS FROM Device LIKE 'custom_fields'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Device ADD COLUMN custom_fields TEXT DEFAULT NULL')
+        # Initialize existing records with empty JSON object
+        cursor.execute("UPDATE Device SET custom_fields = '{}' WHERE custom_fields IS NULL")
+    
+    # Add custom_fields column to Subnet table if it doesn't exist
+    cursor.execute("SHOW COLUMNS FROM Subnet LIKE 'custom_fields'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Subnet ADD COLUMN custom_fields TEXT DEFAULT NULL')
+        # Initialize existing records with empty JSON object
+        cursor.execute("UPDATE Subnet SET custom_fields = '{}' WHERE custom_fields IS NULL")
+    
+    # Add notes column to IPAddress table if it doesn't exist
+    cursor.execute("SHOW COLUMNS FROM IPAddress LIKE 'notes'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE IPAddress ADD COLUMN notes TEXT DEFAULT NULL')
+    
+    # Add VLAN columns to Subnet table if they don't exist
+    cursor.execute("SHOW COLUMNS FROM Subnet LIKE 'vlan_id'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Subnet ADD COLUMN vlan_id INTEGER DEFAULT NULL')
+    
+    cursor.execute("SHOW COLUMNS FROM Subnet LIKE 'vlan_description'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Subnet ADD COLUMN vlan_description VARCHAR(255) DEFAULT NULL')
+    
+    cursor.execute("SHOW COLUMNS FROM Subnet LIKE 'vlan_notes'")
+    if not cursor.fetchone():
+        cursor.execute('ALTER TABLE Subnet ADD COLUMN vlan_notes TEXT DEFAULT NULL')
+    
     # Define all permissions with categories
     permissions = [
         # View permissions
@@ -211,15 +322,11 @@ def init_db(app=None):
         ('view_audit', 'View Audit Log', 'View'),
         ('view_admin', 'View Admin panel', 'View'),
         ('view_users', 'View Users page', 'View'),
-        ('view_device_types', 'View Device Types page', 'View'),
-        ('view_device_type_stats', 'View Device Type Statistics', 'View'),
-        ('view_devices_by_type', 'View Devices by Type', 'View'),
         ('view_dhcp', 'View DHCP configuration', 'View'),
-        ('view_help', 'View Help page', 'View'),
         
         # Device permissions
         ('add_device', 'Add new device', 'Device'),
-        ('edit_device', 'Edit device (rename, description, type)', 'Device'),
+        ('edit_device', 'Edit device (rename, description)', 'Device'),
         ('delete_device', 'Delete device', 'Device'),
         ('add_device_ip', 'Add IP address to device', 'Device'),
         ('remove_device_ip', 'Remove IP address from device', 'Device'),
@@ -241,10 +348,17 @@ def init_db(app=None):
         # DHCP permissions
         ('configure_dhcp', 'Configure DHCP pools', 'DHCP'),
         
-        # Device Type permissions
+        # Tag permissions
-        ('add_device_type', 'Add device type', 'Device Type'),
+        ('view_tags', 'View tags', 'Tag'),
-        ('edit_device_type', 'Edit device type', 'Device Type'),
+        ('add_tag', 'Add new tag', 'Tag'),
-        ('delete_device_type', 'Delete device type', 'Device Type'),
+        ('edit_tag', 'Edit tag', 'Tag'),
+        ('delete_tag', 'Delete tag', 'Tag'),
+        ('assign_device_tag', 'Assign tag to device', 'Tag'),
+        ('remove_device_tag', 'Remove tag from device', 'Tag'),
+        
+        # Custom Fields permissions
+        ('view_custom_fields', 'View custom fields', 'Custom Fields'),
+        ('manage_custom_fields', 'Manage custom fields (add, edit, delete)', 'Custom Fields'),
         
         # Admin permissions
         ('manage_users', 'Manage users (add, edit, delete)', 'Admin'),
@@ -299,14 +413,15 @@ def init_db(app=None):
     # Assign non-admin permissions to user role
     non_admin_permissions = [
         'view_index', 'view_devices', 'view_device', 'view_subnet', 'view_racks', 'view_rack',
-        'view_audit', 'view_device_types', 'view_device_type_stats', 'view_devices_by_type',
+        'view_audit',
-        'view_dhcp', 'view_help',
+        'view_dhcp',
         'add_device', 'edit_device', 'delete_device', 'add_device_ip', 'remove_device_ip',
         'add_subnet', 'edit_subnet', 'delete_subnet', 'export_subnet_csv',
         'add_rack', 'delete_rack', 'add_device_to_rack', 'remove_device_from_rack',
         'add_nonnet_device_to_rack', 'export_rack_csv',
         'configure_dhcp',
-        'add_device_type', 'edit_device_type', 'delete_device_type'
+        'view_tags', 'add_tag', 'edit_tag', 'delete_tag', 'assign_device_tag', 'remove_device_tag',
+        'view_custom_fields', 'manage_custom_fields'
     ]
     
     for perm_name in non_admin_permissions:
@@ -324,8 +439,8 @@ def init_db(app=None):
     # Same view permissions as user role, but excluding admin views (view_admin, view_users)
     view_only_permissions = [
         'view_index', 'view_devices', 'view_device', 'view_subnet', 'view_racks', 'view_rack',
-        'view_audit', 'view_device_types', 'view_device_type_stats', 'view_devices_by_type',
+        'view_audit',
-        'view_dhcp', 'view_help'
+        'view_dhcp', 'view_tags', 'view_custom_fields'
     ]
     
     for perm_name in view_only_permissions:
@@ -355,5 +470,129 @@ def init_db(app=None):
         api_key = generate_api_key()
         cursor.execute('''INSERT INTO User (name, email, password, role_id, api_key) VALUES (%s, %s, %s, %s, %s)''',
             ('admin', 'admin@example.com', hash_password('password'), admin_role_id, api_key))
+    
+    # Create indexes for performance optimization
+    logging.info("Creating database indexes for performance...")
+    
+    def create_index_if_not_exists(cursor, index_name, table_name, columns):
+        """Helper function to create index if it doesn't exist"""
+        try:
+            # Check if index exists
+            cursor.execute('''
+                SELECT COUNT(*) FROM information_schema.statistics 
+                WHERE table_schema = DATABASE() 
+                AND table_name = %s 
+                AND index_name = %s
+            ''', (table_name, index_name))
+            if cursor.fetchone()[0] == 0:
+                cursor.execute(f'CREATE INDEX {index_name} ON {table_name}({columns})')
+                logging.info(f"Created index {index_name}")
+            else:
+                logging.debug(f"Index {index_name} already exists")
+        except mysql.connector.Error as e:
+            logging.warning(f"Could not create index {index_name}: {e}")
+    
+    # IPAddress table indexes
+    create_index_if_not_exists(cursor, 'idx_ipaddress_subnet_id', 'IPAddress', 'subnet_id')
+    create_index_if_not_exists(cursor, 'idx_ipaddress_hostname', 'IPAddress', 'hostname')
+    create_index_if_not_exists(cursor, 'idx_ipaddress_ip', 'IPAddress', 'ip')
+    create_index_if_not_exists(cursor, 'idx_ipaddress_subnet_hostname', 'IPAddress', 'subnet_id, hostname')
+    create_index_if_not_exists(cursor, 'idx_ipaddress_notes', 'IPAddress', 'notes(255)')
+    
+    # DeviceIPAddress table indexes
+    create_index_if_not_exists(cursor, 'idx_deviceipaddress_device_id', 'DeviceIPAddress', 'device_id')
+    create_index_if_not_exists(cursor, 'idx_deviceipaddress_ip_id', 'DeviceIPAddress', 'ip_id')
+    create_index_if_not_exists(cursor, 'idx_deviceipaddress_device_ip', 'DeviceIPAddress', 'device_id, ip_id')
+    
+    # AuditLog table indexes
+    create_index_if_not_exists(cursor, 'idx_auditlog_timestamp', 'AuditLog', 'timestamp')
+    create_index_if_not_exists(cursor, 'idx_auditlog_user_id', 'AuditLog', 'user_id')
+    create_index_if_not_exists(cursor, 'idx_auditlog_subnet_id', 'AuditLog', 'subnet_id')
+    create_index_if_not_exists(cursor, 'idx_auditlog_action', 'AuditLog', 'action')
+    create_index_if_not_exists(cursor, 'idx_auditlog_user_timestamp', 'AuditLog', 'user_id, timestamp')
+    create_index_if_not_exists(cursor, 'idx_auditlog_subnet_timestamp', 'AuditLog', 'subnet_id, timestamp')
+    
+    # Subnet table indexes
+    create_index_if_not_exists(cursor, 'idx_subnet_site', 'Subnet', 'site')
+    create_index_if_not_exists(cursor, 'idx_subnet_site_name', 'Subnet', 'site, name')
+    
+    # DeviceTag table indexes
+    create_index_if_not_exists(cursor, 'idx_devicetag_device_id', 'DeviceTag', 'device_id')
+    create_index_if_not_exists(cursor, 'idx_devicetag_tag_id', 'DeviceTag', 'tag_id')
+    
+    # DHCPPool table indexes
+    create_index_if_not_exists(cursor, 'idx_dhcppool_subnet_id', 'DHCPPool', 'subnet_id')
+    
+    # RackDevice table indexes
+    create_index_if_not_exists(cursor, 'idx_rackdevice_rack_id', 'RackDevice', 'rack_id')
+    create_index_if_not_exists(cursor, 'idx_rackdevice_device_id', 'RackDevice', 'device_id')
+    create_index_if_not_exists(cursor, 'idx_rackdevice_rack_side', 'RackDevice', 'rack_id, side')
+    
+    # Device table indexes
+    
+    # User table indexes (api_key already has UNIQUE index)
+    create_index_if_not_exists(cursor, 'idx_user_role_id', 'User', 'role_id')
+    
+    # CustomFieldDefinition table indexes
+    create_index_if_not_exists(cursor, 'idx_customfield_entity_type', 'CustomFieldDefinition', 'entity_type')
+    create_index_if_not_exists(cursor, 'idx_customfield_field_key', 'CustomFieldDefinition', 'field_key')
+    create_index_if_not_exists(cursor, 'idx_customfield_entity_order', 'CustomFieldDefinition', 'entity_type, display_order')
+    
+    logging.info("Database indexes created successfully")
+
+    run_v2_migrations(cursor, conn)
+
     conn.commit()
     conn.close()
+
+
+def run_v2_migrations(cursor, conn):
+    """One-time schema cleanup for v2 upgrades from v1.x."""
+    logging.info("Running v2 database migrations...")
+
+    cursor.execute('DROP TABLE IF EXISTS FeatureFlags')
+
+    cursor.execute("SHOW COLUMNS FROM CustomFieldDefinition LIKE 'searchable'")
+    if cursor.fetchone():
+        cursor.execute('ALTER TABLE CustomFieldDefinition DROP COLUMN searchable')
+        logging.info("Dropped CustomFieldDefinition.searchable column")
+
+    for perm_name in ('view_help',):
+        cursor.execute('SELECT id FROM Permission WHERE name = %s', (perm_name,))
+        row = cursor.fetchone()
+        if row:
+            perm_id = row[0]
+            cursor.execute('DELETE FROM RolePermission WHERE permission_id = %s', (perm_id,))
+            cursor.execute('DELETE FROM Permission WHERE id = %s', (perm_id,))
+            logging.info("Removed orphaned permission: %s", perm_name)
+
+    cursor.execute("SHOW COLUMNS FROM Device LIKE 'device_type_id'")
+    if cursor.fetchone():
+        cursor.execute("""
+            SELECT CONSTRAINT_NAME FROM information_schema.KEY_COLUMN_USAGE
+            WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'Device'
+            AND COLUMN_NAME = 'device_type_id' AND REFERENCED_TABLE_NAME IS NOT NULL
+        """)
+        for (fk_name,) in cursor.fetchall():
+            cursor.execute(f'ALTER TABLE Device DROP FOREIGN KEY `{fk_name}`')
+        cursor.execute('ALTER TABLE Device DROP COLUMN device_type_id')
+        logging.info("Dropped Device.device_type_id column")
+
+    cursor.execute("SHOW TABLES LIKE 'DeviceType'")
+    if cursor.fetchone():
+        cursor.execute('DROP TABLE DeviceType')
+        logging.info("Dropped DeviceType table")
+
+    for perm_name in (
+        'view_device_types', 'view_device_type_stats', 'view_devices_by_type',
+        'add_device_type', 'edit_device_type', 'delete_device_type',
+    ):
+        cursor.execute('SELECT id FROM Permission WHERE name = %s', (perm_name,))
+        row = cursor.fetchone()
+        if row:
+            perm_id = row[0]
+            cursor.execute('DELETE FROM RolePermission WHERE permission_id = %s', (perm_id,))
+            cursor.execute('DELETE FROM Permission WHERE id = %s', (perm_id,))
+            logging.info("Removed orphaned permission: %s", perm_name)
+
+    logging.info("v2 database migrations complete")

deployment.yml

@@ -1,64 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: ipam
-  namespace: ipam
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: ipam
-  template:
-    metadata:
-      labels:
-        app: ipam
-    spec:
-      containers:
-        - name: ipam
-          image: ghcr.io/jdb-net/ipam:latest
-          imagePullPolicy: Always
-          ports:
-            - containerPort: 5000
-              name: "ipam"
-          env:
-            - name: SECRET_KEY
-              value: "41TbN7v5peFLZPrdwSCc64J3mjmiUk5fkVWsmb2m"
-            - name: MYSQL_HOST
-              value: "10.10.2.27"
-            - name: MYSQL_USER
-              value: "ipam"
-            - name: MYSQL_PASSWORD
-              value: "WXPmo05sGCfjGe"
-            - name: MYSQL_DATABASE
-              value: "ipam"
----
-apiVersion: v1
-kind: Service
-metadata:
-  name: ipam-ingress-service
-  namespace: ipam
-spec:
-  selector:
-    app: ipam
-  ports:
-    - protocol: TCP
-      port: 80
-      targetPort: 5000
----
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: ipam-ingress
-  namespace: ipam
-spec:
-  rules:
-  - host: ipam.jdb143.uk
-    http:
-      paths:
-      - pathType: Prefix
-        path: "/"
-        backend:
-          service:
-            name: ipam-ingress-service
-            port:
-              number: 80

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IPAM</title>
+    <link rel="icon" href="/favicon.ico" type="image/png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-surface text-slate-900 dark:text-slate-100 antialiased">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ipam-frontend",
+  "private": true,
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-vue-next": "^0.468.0",
+    "pinia": "^2.2.6",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { RouterView } from "vue-router";
+</script>
+<template>
+  <RouterView />
+</template>

frontend/src/api.ts

@@ -0,0 +1,447 @@
+const jsonHeaders = { "Content-Type": "application/json" };
+
+let onUnauthorized: (() => void) | null = null;
+
+export function setUnauthorizedHandler(fn: () => void) {
+  onUnauthorized = fn;
+}
+
+async function handle<T>(res: Response): Promise<T> {
+  if (res.status === 401) {
+    onUnauthorized?.();
+    throw new Error("unauthorized");
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error((data as { error?: string }).error || res.statusText);
+  return data as T;
+}
+
+function fetchApi(path: string, init?: RequestInit) {
+  return fetch(path, { credentials: "include", ...init });
+}
+
+export interface MeResponse {
+  logged_in: boolean;
+  app_version?: string;
+  org?: { name: string; logo: string };
+  user?: { id: number; name: string; email: string };
+  permissions?: string[];
+}
+
+export interface Device {
+  id: number;
+  name: string;
+  description?: string;
+  ip_addresses?: IpOnDevice[];
+  tags?: Tag[];
+  custom_fields?: Record<string, unknown>;
+}
+
+export interface IpOnDevice {
+  id: number;
+  ip: string;
+  hostname?: string;
+  subnet_id?: number;
+  subnet_name?: string;
+  cidr?: string;
+  site?: string;
+  notes?: string;
+}
+
+export interface Subnet {
+  id: number;
+  name: string;
+  cidr: string;
+  site?: string;
+  vlan_id?: number;
+  vlan_description?: string;
+  vlan_notes?: string;
+  utilization?: number;
+  total_ips?: number;
+  used_ips?: number;
+  custom_fields?: Record<string, unknown>;
+  ip_addresses?: SubnetIp[];
+}
+
+export interface SubnetIp {
+  id: number;
+  ip: string;
+  hostname?: string;
+  device_id?: number;
+  device_name?: string;
+  notes?: string;
+}
+
+export interface Tag {
+  id: number;
+  name: string;
+  color?: string;
+  description?: string;
+}
+
+export interface Rack {
+  id: number;
+  name: string;
+  site: string;
+  height_u: number;
+  used_u?: number;
+  percent_full?: number;
+  devices?: RackDevice[];
+  site_devices?: { id: number; name: string; description?: string }[];
+}
+
+export interface RackDevice {
+  id: number;
+  position_u: number;
+  side: string;
+  device_id?: number;
+  device_name?: string;
+  nonnet_device_name?: string;
+}
+
+export interface AuditEntry {
+  id: number;
+  user_name?: string;
+  action: string;
+  details?: string;
+  timestamp?: string;
+}
+
+export interface UserRow {
+  id: number;
+  name: string;
+  email: string;
+  role_id?: number;
+  role_name?: string;
+}
+
+export interface RoleRow {
+  id: number;
+  name: string;
+  description?: string;
+  require_2fa?: boolean;
+  permissions?: { id: number; name: string; category?: string }[];
+}
+
+export interface CustomFieldDef {
+  id: number;
+  entity_type: string;
+  name: string;
+  field_key: string;
+  field_type: string;
+  required?: boolean;
+  display_order?: number;
+  default_value?: string;
+  help_text?: string;
+  validation_rules?: { select_options?: string[] };
+}
+
+export interface AuditParams {
+  limit?: number;
+  offset?: number;
+  user?: string;
+  action?: string;
+  from?: string;
+  to?: string;
+}
+
+export const api = {
+  async me(): Promise<MeResponse> {
+    return handle(await fetchApi("/api/v2/auth/me"));
+  },
+  async login(email: string, password: string) {
+    return handle<{ ok?: boolean; requires_2fa?: boolean; requires_setup?: boolean }>(
+      await fetchApi("/api/v2/auth/login", {
+        method: "POST",
+        headers: jsonHeaders,
+        body: JSON.stringify({ email, password }),
+      }),
+    );
+  },
+  async verify2fa(code: string, useBackup = false) {
+    return handle(await fetchApi("/api/v2/auth/verify-2fa", {
+      method: "POST",
+      headers: jsonHeaders,
+      body: JSON.stringify({ code, use_backup: useBackup }),
+    }));
+  },
+  async setup2fa(action: "generate" | "verify", code?: string) {
+    return handle<{ secret?: string; qr_code?: string; backup_codes?: string[] }>(
+      await fetchApi("/api/v2/auth/setup-2fa", {
+        method: "POST",
+        headers: jsonHeaders,
+        body: JSON.stringify({ action, code }),
+      }),
+    );
+  },
+  async logout() {
+    return handle(await fetchApi("/api/v2/auth/logout", { method: "POST" }));
+  },
+  async dashboard() {
+    return handle<{
+      stats: {
+        total_ips: number;
+        used_ips: number;
+        available_ips: number;
+        utilization_percent: number;
+        subnet_count: number;
+        alerting_subnets: number;
+        device_count: number;
+      };
+      subnet_overview: {
+        id: number;
+        name: string;
+        cidr: string;
+        site: string;
+        vlan_id?: number;
+        utilization: number;
+        available: number;
+        status: "active" | "alerting";
+      }[];
+      activity: { hour: number; count: number }[];
+    }>(await fetchApi("/api/v2/dashboard"));
+  },
+  async search(q: string) {
+    return handle<Record<string, unknown[]>>(await fetchApi(`/api/v2/search?q=${encodeURIComponent(q)}`));
+  },
+  async devices(params?: { tag?: string; site?: string }) {
+    const p = new URLSearchParams();
+    if (params?.tag) p.set("tag", params.tag);
+    if (params?.site) p.set("site", params.site);
+    const q = p.toString();
+    const d = await handle<{ items: Device[] }>(await fetchApi(`/api/v2/devices${q ? `?${q}` : ""}`));
+    return d.items;
+  },
+  async device(id: number) {
+    return handle<Device>(await fetchApi(`/api/v2/devices/${id}`));
+  },
+  async createDevice(body: Partial<Device>) {
+    return handle(await fetchApi("/api/v2/devices", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateDevice(id: number, body: Partial<Device>) {
+    return handle(await fetchApi(`/api/v2/devices/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteDevice(id: number) {
+    return handle(await fetchApi(`/api/v2/devices/${id}`, { method: "DELETE" }));
+  },
+  async assignIp(deviceId: number, ipId: number) {
+    return handle(await fetchApi(`/api/v2/devices/${deviceId}/ips`, {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ ip_id: ipId }),
+    }));
+  },
+  async removeIp(deviceId: number, ipId: number) {
+    return handle(await fetchApi(`/api/v2/devices/${deviceId}/ips/${ipId}`, { method: "DELETE" }));
+  },
+  async deviceIpHistory(deviceId: number) {
+    const d = await handle<{ items: unknown[] }>(await fetchApi(`/api/v2/devices/${deviceId}/ip-history`));
+    return d.items;
+  },
+  async subnets(includeUtil = true) {
+    const d = await handle<{ items: Subnet[] }>(
+      await fetchApi(`/api/v2/subnets${includeUtil ? "?include=utilization" : ""}`),
+    );
+    return d.items;
+  },
+  async subnet(id: number) {
+    return handle<Subnet>(await fetchApi(`/api/v2/subnets/${id}`));
+  },
+  async createSubnet(body: Partial<Subnet>) {
+    return handle(await fetchApi("/api/v2/subnets", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateSubnet(id: number, body: Partial<Subnet>) {
+    return handle(await fetchApi(`/api/v2/subnets/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteSubnet(id: number) {
+    return handle(await fetchApi(`/api/v2/subnets/${id}`, { method: "DELETE" }));
+  },
+  async availableIps(subnetId: number) {
+    const d = await handle<{ items: { id: number; ip: string }[] }>(await fetchApi(`/api/v2/subnets/${subnetId}/available-ips`));
+    return d.items;
+  },
+  async patchIpNotes(ipId: number, notes: string) {
+    return handle(await fetchApi(`/api/v2/ip-addresses/${ipId}`, {
+      method: "PATCH", headers: jsonHeaders, body: JSON.stringify({ notes }),
+    }));
+  },
+  async ipHistory(ip: string) {
+    const d = await handle<{ items: unknown[] }>(await fetchApi(`/api/v2/ips/${encodeURIComponent(ip)}/history`));
+    return d.items;
+  },
+  subnetExportUrl(id: number) {
+    return `/api/v2/subnets/${id}/export`;
+  },
+  async tags() {
+    const d = await handle<{ items: Tag[] }>(await fetchApi("/api/v2/tags"));
+    return d.items;
+  },
+  async createTag(body: Partial<Tag>) {
+    return handle(await fetchApi("/api/v2/tags", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateTag(id: number, body: Partial<Tag>) {
+    return handle(await fetchApi(`/api/v2/tags/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteTag(id: number) {
+    return handle(await fetchApi(`/api/v2/tags/${id}`, { method: "DELETE" }));
+  },
+  async assignTag(deviceId: number, tagId: number) {
+    return handle(await fetchApi(`/api/v2/devices/${deviceId}/tags`, {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ tag_id: tagId }),
+    }));
+  },
+  async removeTag(deviceId: number, tagId: number) {
+    return handle(await fetchApi(`/api/v2/devices/${deviceId}/tags/${tagId}`, { method: "DELETE" }));
+  },
+  async racks() {
+    const d = await handle<{ items: Rack[] }>(await fetchApi("/api/v2/racks"));
+    return d.items;
+  },
+  async rack(id: number) {
+    return handle<Rack>(await fetchApi(`/api/v2/racks/${id}`));
+  },
+  async createRack(body: Partial<Rack>) {
+    return handle(await fetchApi("/api/v2/racks", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteRack(id: number) {
+    return handle(await fetchApi(`/api/v2/racks/${id}`, { method: "DELETE" }));
+  },
+  async updateRack(id: number, body: Partial<Rack>) {
+    return handle(await fetchApi(`/api/v2/racks/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async addRackDevice(rackId: number, body: { position_u: number; side: string; device_id?: number; nonnet_device_name?: string }) {
+    return handle(await fetchApi(`/api/v2/racks/${rackId}/devices`, { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async removeRackDevice(rackId: number, rackDeviceId: number) {
+    return handle(await fetchApi(`/api/v2/racks/${rackId}/devices/${rackDeviceId}`, { method: "DELETE" }));
+  },
+  rackExportUrl(id: number) {
+    return `/api/v2/racks/${id}/export`;
+  },
+  async createCustomField(body: Record<string, unknown>) {
+    return handle(await fetchApi("/api/v2/custom_fields", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateCustomField(id: number, body: Record<string, unknown>) {
+    return handle(await fetchApi(`/api/v2/custom_fields/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteCustomField(id: number) {
+    return handle(await fetchApi(`/api/v2/custom_fields/${id}`, { method: "DELETE" }));
+  },
+  async reorderCustomFields(entityType: string, fieldOrders: Record<number, number>) {
+    return handle(await fetchApi("/api/v2/custom-fields/reorder", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ entity_type: entityType, field_orders: fieldOrders }),
+    }));
+  },
+  async createUser(body: { name: string; email: string; password: string; role_id?: number }) {
+    return handle(await fetchApi("/api/v2/users", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateUser(id: number, body: Record<string, unknown>) {
+    return handle(await fetchApi(`/api/v2/users/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteUser(id: number) {
+    return handle(await fetchApi(`/api/v2/users/${id}`, { method: "DELETE" }));
+  },
+  async regenerateApiKey(userId: number) {
+    return handle<{ api_key: string }>(await fetchApi(`/api/v2/users/${userId}/regenerate-api-key`, { method: "POST" }));
+  },
+  async createRole(body: { name: string; description?: string; permission_ids?: number[]; require_2fa?: boolean }) {
+    return handle(await fetchApi("/api/v2/roles", { method: "POST", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async updateRole(id: number, body: Record<string, unknown>) {
+    return handle(await fetchApi(`/api/v2/roles/${id}`, { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }));
+  },
+  async deleteRole(id: number) {
+    return handle(await fetchApi(`/api/v2/roles/${id}`, { method: "DELETE" }));
+  },
+  async disable2fa(password: string) {
+    return handle(await fetchApi("/api/v2/account/disable-2fa", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ password }),
+    }));
+  },
+  async regenerateBackupCodes(password: string) {
+    return handle<{ backup_codes: string[] }>(await fetchApi("/api/v2/account/regenerate-backup-codes", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ password }),
+    }));
+  },
+  async audit(params: AuditParams = {}) {
+    const p = new URLSearchParams();
+    if (params.limit != null) p.set("limit", String(params.limit));
+    if (params.offset != null) p.set("offset", String(params.offset));
+    if (params.user) p.set("user", params.user);
+    if (params.action) p.set("action", params.action);
+    if (params.from) p.set("from", params.from);
+    if (params.to) p.set("to", params.to);
+    const q = p.toString();
+    return handle<{ items: AuditEntry[]; total: number }>(await fetchApi(`/api/v2/audit${q ? `?${q}` : ""}`));
+  },
+  async auditActions() {
+    const d = await handle<{ items: string[] }>(await fetchApi("/api/v2/audit/actions"));
+    return d.items;
+  },
+  auditExportUrl(params: AuditParams = {}) {
+    const p = new URLSearchParams();
+    if (params.user) p.set("user", params.user);
+    if (params.action) p.set("action", params.action);
+    if (params.from) p.set("from", params.from);
+    if (params.to) p.set("to", params.to);
+    const q = p.toString();
+    return `/api/v2/audit/export${q ? `?${q}` : ""}`;
+  },
+  async users() {
+    const d = await handle<{ items: UserRow[] }>(await fetchApi("/api/v2/users"));
+    return d.items;
+  },
+  async roles() {
+    const d = await handle<{ items: RoleRow[] }>(await fetchApi("/api/v2/roles"));
+    return d.items;
+  },
+  async permissions() {
+    const d = await handle<{ items: { id: number; name: string; category?: string }[] }>(
+      await fetchApi("/api/v2/permissions"),
+    );
+    return d.items;
+  },
+  async customFields(entityType: string) {
+    const d = await handle<{ items: CustomFieldDef[] }>(await fetchApi(`/api/v2/custom_fields/${entityType}`));
+    return d.items;
+  },
+  async patchDeviceCustomFields(deviceId: number, customFields: Record<string, unknown>) {
+    return handle(await fetchApi(`/api/v2/devices/${deviceId}/custom-fields`, {
+      method: "PATCH", headers: jsonHeaders, body: JSON.stringify({ custom_fields: customFields }),
+    }));
+  },
+  async patchSubnetCustomFields(subnetId: number, customFields: Record<string, unknown>) {
+    return handle(await fetchApi(`/api/v2/subnets/${subnetId}/custom-fields`, {
+      method: "PATCH", headers: jsonHeaders, body: JSON.stringify({ custom_fields: customFields }),
+    }));
+  },
+  async bulkAssignIps(deviceId: number, ipIds: number[]) {
+    return handle(await fetchApi("/api/v2/bulk/assign-ips", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ device_id: deviceId, ip_ids: ipIds }),
+    }));
+  },
+  async bulkCreateDevices(names: string[]) {
+    return handle(await fetchApi("/api/v2/bulk/create-devices", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ names }),
+    }));
+  },
+  async bulkAssignTags(deviceIds: number[], tagId: number) {
+    return handle(await fetchApi("/api/v2/bulk/assign-tags", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ device_ids: deviceIds, tag_id: tagId }),
+    }));
+  },
+  async account() {
+    return handle(await fetchApi("/api/v2/account"));
+  },
+  async changePassword(current: string, newPw: string) {
+    return handle(await fetchApi("/api/v2/account/change-password", {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify({ current_password: current, new_password: newPw }),
+    }));
+  },
+  async getDhcp(subnetId: number) {
+    return handle(await fetchApi(`/api/v2/subnets/${subnetId}/dhcp`));
+  },
+  async setDhcp(subnetId: number, body: unknown) {
+    return handle(await fetchApi(`/api/v2/subnets/${subnetId}/dhcp`, {
+      method: "POST", headers: jsonHeaders, body: JSON.stringify(body),
+    }));
+  },
+};

frontend/src/components/AppLayout.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
+import { Menu, Search, X, Home, Server, Grid3x3, Settings, Users, Tag, Layers, FileText, User, Network } from "lucide-vue-next";
+import { useAuthStore } from "@/stores/auth";
+import { api } from "@/api";
+
+const RELEASES_URL = "https://git.jdbnet.co.uk/jamie/ipam/releases";
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+const sidebarOpen = ref(false);
+const searchOpen = ref(false);
+const searchQ = ref("");
+const searchInput = ref<HTMLInputElement | null>(null);
+const searchResults = ref<Record<string, unknown[]>>({});
+const searchLoading = ref(false);
+
+const nav = computed(() =>
+  [
+    { to: "/", label: "Home", icon: Home, perm: "view_index" },
+    { to: "/subnets", label: "Subnets", icon: Network, perm: "view_subnet", match: (path: string) => path === "/subnets" || /^\/subnets\/\d+/.test(path) },
+    { to: "/devices", label: "Devices", icon: Server, perm: "view_devices" },
+    { to: "/racks", label: "Racks", icon: Grid3x3, perm: "view_racks" },
+    { to: "/tags", label: "Tags", icon: Tag, perm: "view_tags" },
+    { to: "/audit", label: "Audit", icon: FileText, perm: "view_audit" },
+    { to: "/subnets/manage", label: "Subnet Management", icon: Settings, perm: "view_admin" },
+    { to: "/users", label: "Users", icon: Users, perm: "view_users" },
+    { to: "/custom-fields", label: "Fields", icon: Layers, perm: "view_custom_fields" },
+    { to: "/account", label: "Account", icon: User, perm: null },
+  ].filter((n) => !n.perm || auth.can(n.perm)),
+);
+
+const hasResults = computed(() =>
+  Object.values(searchResults.value).some((items) => items.length > 0),
+);
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+async function logout() {
+  await auth.logout();
+  router.push("/login");
+}
+
+function openSearch() {
+  searchOpen.value = true;
+  searchQ.value = "";
+  searchResults.value = {};
+  nextTick(() => searchInput.value?.focus());
+}
+
+function closeSearch() {
+  searchOpen.value = false;
+}
+
+async function runSearch() {
+  const q = searchQ.value.trim();
+  if (!q) {
+    searchResults.value = {};
+    return;
+  }
+  searchLoading.value = true;
+  try {
+    searchResults.value = await api.search(q);
+  } finally {
+    searchLoading.value = false;
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "/" && !["INPUT", "TEXTAREA"].includes((e.target as HTMLElement)?.tagName)) {
+    e.preventDefault();
+    openSearch();
+  }
+  if (e.key === "Escape" && searchOpen.value) {
+    closeSearch();
+  }
+}
+
+watch(searchQ, () => {
+  if (!searchOpen.value) return;
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(runSearch, 250);
+});
+
+onMounted(() => window.addEventListener("keydown", onKeydown));
+onUnmounted(() => {
+  window.removeEventListener("keydown", onKeydown);
+  if (searchTimer) clearTimeout(searchTimer);
+});
+</script>
+
+<template>
+  <div class="flex h-screen overflow-hidden bg-surface font-sans">
+    <!-- Mobile overlay -->
+    <div v-if="sidebarOpen" class="fixed inset-0 z-40 bg-black/50 lg:hidden" @click="sidebarOpen = false" />
+
+    <!-- Sidebar -->
+    <aside
+      class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 flex-col border-r border-slate-200 bg-surface-raised transition-transform dark:border-slate-800 lg:static lg:h-screen lg:translate-x-0"
+      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+    >
+      <div class="flex shrink-0 items-center gap-3 border-b border-slate-200 p-4 dark:border-slate-800">
+        <img v-if="auth.org.logo" :src="auth.org.logo" alt="" class="h-8 rounded" />
+        <div class="min-w-0 flex-1">
+          <div class="truncate text-sm font-semibold">{{ auth.org.name }} IPAM</div>
+          <a
+            :href="RELEASES_URL"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs text-slate-500 hover:text-accent hover:underline"
+          >{{ auth.version }}</a>
+        </div>
+        <button class="lg:hidden" @click="sidebarOpen = false"><X class="h-5 w-5" /></button>
+      </div>
+      <nav class="min-h-0 flex-1 overflow-y-auto p-2">
+        <RouterLink
+          v-for="item in nav"
+          :key="item.to"
+          :to="item.to"
+          class="mb-0.5 flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition"
+          :class="(item.match ? item.match(route.path) : route.path === item.to || route.path.startsWith(item.to + '/'))
+            ? 'bg-accent/15 text-accent font-medium'
+            : 'text-slate-600 hover:bg-surface-overlay dark:text-slate-400'"
+          @click="sidebarOpen = false"
+        >
+          <component :is="item.icon" class="h-4 w-4 shrink-0" />
+          {{ item.label }}
+        </RouterLink>
+      </nav>
+      <div class="shrink-0 border-t border-slate-200 p-3 dark:border-slate-800">
+        <div class="truncate text-xs text-slate-500">{{ auth.user?.name }}</div>
+        <button class="mt-2 text-xs text-accent hover:underline" @click="logout">Sign out</button>
+      </div>
+    </aside>
+
+    <!-- Main -->
+    <div class="flex min-h-0 min-w-0 flex-1 flex-col">
+      <header class="flex shrink-0 items-center gap-3 border-b border-slate-200 bg-surface-raised px-4 py-3 dark:border-slate-800">
+        <button class="lg:hidden" @click="sidebarOpen = true"><Menu class="h-6 w-6" /></button>
+        <span class="font-semibold lg:hidden">{{ auth.org.name }} IPAM</span>
+        <button
+          class="ml-auto rounded-lg p-2 text-slate-600 transition hover:bg-surface-overlay hover:text-accent dark:text-slate-400"
+          title="Search (/)"
+          @click="openSearch"
+        >
+          <Search class="h-5 w-5" />
+        </button>
+      </header>
+      <main class="min-h-0 flex-1 overflow-auto p-4 md:p-6">
+        <RouterView />
+      </main>
+    </div>
+
+    <!-- Search modal -->
+    <div v-if="searchOpen" class="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4 pt-[10vh]" @click.self="closeSearch">
+      <div class="card flex max-h-[75vh] w-full max-w-xl flex-col">
+        <div class="flex items-center gap-2">
+          <Search class="h-5 w-5 shrink-0 text-slate-400" />
+          <input
+            ref="searchInput"
+            v-model="searchQ"
+            class="input-field flex-1 border-0 bg-transparent px-0 shadow-none focus:ring-0"
+            placeholder="Search subnets, IPs, devices…"
+            autofocus
+            @keydown.esc="closeSearch"
+          />
+          <button class="rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200" @click="closeSearch">
+            <X class="h-5 w-5" />
+          </button>
+        </div>
+        <p class="mt-1 text-xs text-slate-500">Press <kbd class="rounded bg-surface-overlay px-1">/</kbd> to open · <kbd class="rounded bg-surface-overlay px-1">Esc</kbd> to close</p>
+
+        <div v-if="searchLoading" class="mt-4 text-sm text-slate-500">Searching…</div>
+        <div v-else-if="searchQ.trim() && !hasResults" class="mt-4 text-sm text-slate-500">No results</div>
+        <div v-else-if="hasResults" class="mt-4 -mx-1 flex-1 space-y-4 overflow-y-auto px-1">
+          <section v-if="searchResults.devices?.length">
+            <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">Devices</h2>
+            <ul class="mt-1">
+              <li v-for="d in searchResults.devices as { id: number; name: string }[]" :key="d.id">
+                <RouterLink :to="`/devices/${d.id}`" class="block rounded-lg px-2 py-1.5 text-sm hover:bg-surface-overlay" @click="closeSearch">{{ d.name }}</RouterLink>
+              </li>
+            </ul>
+          </section>
+          <section v-if="searchResults.subnets?.length">
+            <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">Subnets</h2>
+            <ul class="mt-1">
+              <li v-for="s in searchResults.subnets as { id: number; name: string; cidr: string }[]" :key="s.id">
+                <RouterLink :to="`/subnets/${s.id}`" class="block rounded-lg px-2 py-1.5 text-sm hover:bg-surface-overlay" @click="closeSearch">{{ s.name }} <span class="font-mono text-slate-500">({{ s.cidr }})</span></RouterLink>
+              </li>
+            </ul>
+          </section>
+          <section v-if="searchResults.ips?.length">
+            <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">IPs</h2>
+            <ul class="mt-1">
+              <li v-for="ip in searchResults.ips as { ip: string; subnet_id: number; hostname?: string }[]" :key="ip.ip">
+                <RouterLink :to="`/subnets/${ip.subnet_id}`" class="block rounded-lg px-2 py-1.5 font-mono text-sm hover:bg-surface-overlay" @click="closeSearch">
+                  {{ ip.ip }}<span v-if="ip.hostname" class="ml-2 font-sans text-slate-500">{{ ip.hostname }}</span>
+                </RouterLink>
+              </li>
+            </ul>
+          </section>
+          <section v-if="searchResults.racks?.length">
+            <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">Racks</h2>
+            <ul class="mt-1">
+              <li v-for="r in searchResults.racks as { id: number; name: string; site: string }[]" :key="r.id">
+                <RouterLink :to="`/racks/${r.id}`" class="block rounded-lg px-2 py-1.5 text-sm hover:bg-surface-overlay" @click="closeSearch">{{ r.name }} <span class="text-slate-500">· {{ r.site }}</span></RouterLink>
+              </li>
+            </ul>
+          </section>
+          <section v-if="searchResults.tags?.length">
+            <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tags</h2>
+            <ul class="mt-1">
+              <li v-for="t in searchResults.tags as { id: number; name: string }[]" :key="t.id">
+                <RouterLink to="/tags" class="block rounded-lg px-2 py-1.5 text-sm hover:bg-surface-overlay" @click="closeSearch">{{ t.name }}</RouterLink>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/components/CustomFieldValues.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from "vue";
+import { api, type CustomFieldDef } from "@/api";
+
+const props = defineProps<{
+  entityType: "device" | "subnet";
+  entityId: number;
+  values?: Record<string, unknown>;
+  canEdit: boolean;
+}>();
+
+const emit = defineEmits<{ saved: [values: Record<string, unknown>] }>();
+
+const fields = ref<CustomFieldDef[]>([]);
+const form = ref<Record<string, unknown>>({});
+const loading = ref(true);
+const saving = ref(false);
+const err = ref("");
+const msg = ref("");
+
+const visible = computed(() => fields.value.length > 0 || Object.keys(props.values ?? {}).length > 0);
+
+function initForm() {
+  const next: Record<string, unknown> = {};
+  for (const f of fields.value) {
+    const existing = props.values?.[f.field_key];
+    if (existing !== undefined && existing !== null) {
+      next[f.field_key] = existing;
+    } else if (f.default_value) {
+      next[f.field_key] = f.field_type === "checkbox" ? f.default_value === "true" : f.default_value;
+    } else {
+      next[f.field_key] = f.field_type === "checkbox" ? false : "";
+    }
+  }
+  form.value = next;
+}
+
+async function loadFields() {
+  loading.value = true;
+  err.value = "";
+  try {
+    fields.value = await api.customFields(props.entityType);
+    initForm();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to load fields";
+    fields.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadFields);
+
+watch(() => props.values, () => {
+  if (fields.value.length) initForm();
+}, { deep: true });
+
+async function save() {
+  if (!props.canEdit) return;
+  saving.value = true;
+  err.value = "";
+  msg.value = "";
+  try {
+    const payload = { ...form.value };
+    if (props.entityType === "device") {
+      await api.patchDeviceCustomFields(props.entityId, payload);
+    } else {
+      await api.patchSubnetCustomFields(props.entityId, payload);
+    }
+    msg.value = "Saved";
+    emit("saved", payload);
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to save";
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="visible" class="card">
+    <h2 class="font-semibold">Custom fields</h2>
+    <p v-if="loading" class="mt-2 text-sm text-slate-500">Loading…</p>
+    <form v-else class="mt-3 space-y-3" @submit.prevent="save">
+      <div v-for="f in fields" :key="f.id">
+        <label class="mb-1 block text-sm font-medium">
+          {{ f.name }}<span v-if="f.required" class="text-red-500"> *</span>
+        </label>
+        <p v-if="f.help_text" class="mb-1 text-xs text-slate-500">{{ f.help_text }}</p>
+        <template v-if="canEdit">
+          <textarea
+            v-if="f.field_type === 'textarea'"
+            v-model="form[f.field_key]"
+            class="input-field"
+            :required="f.required"
+          />
+          <select
+            v-else-if="f.field_type === 'select'"
+            v-model="form[f.field_key]"
+            class="input-field"
+            :required="f.required"
+          >
+            <option value="">—</option>
+            <option v-for="opt in f.validation_rules?.select_options ?? []" :key="opt" :value="opt">{{ opt }}</option>
+          </select>
+          <label v-else-if="f.field_type === 'checkbox'" class="flex items-center gap-2 text-sm">
+            <input v-model="form[f.field_key]" type="checkbox" />
+            <span>Enabled</span>
+          </label>
+          <input
+            v-else
+            v-model="form[f.field_key]"
+            class="input-field"
+            :type="f.field_type === 'number' ? 'number' : f.field_type === 'date' ? 'date' : 'text'"
+            :required="f.required"
+          />
+        </template>
+        <p v-else class="text-sm text-slate-600 dark:text-slate-400">
+          {{ f.field_type === 'checkbox' ? (form[f.field_key] ? 'Yes' : 'No') : (form[f.field_key] || '—') }}
+        </p>
+      </div>
+      <div v-if="canEdit && fields.length" class="flex gap-2">
+        <button type="submit" class="btn-primary text-sm" :disabled="saving">Save fields</button>
+      </div>
+      <p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
+      <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+    </form>
+  </div>
+</template>

frontend/src/components/DhcpModal.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { X } from "lucide-vue-next";
+import { api } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const props = defineProps<{
+  open: boolean;
+  subnetId: number | null;
+}>();
+
+const emit = defineEmits<{ close: []; saved: [] }>();
+
+const auth = useAuthStore();
+const loading = ref(false);
+const saving = ref(false);
+const err = ref("");
+const msg = ref("");
+const hasPool = ref(false);
+const form = ref({ start_ip: "", end_ip: "", excluded_ips: "" });
+
+const canEdit = () => auth.can("configure_dhcp");
+
+async function loadPool() {
+  if (!props.subnetId) return;
+  loading.value = true;
+  err.value = "";
+  msg.value = "";
+  hasPool.value = false;
+  form.value = { start_ip: "", end_ip: "", excluded_ips: "" };
+  try {
+    const d = await api.getDhcp(props.subnetId) as { pools?: { start_ip: string; end_ip: string; excluded_ips?: string }[] };
+    if (d.pools?.[0]) {
+      hasPool.value = true;
+      form.value.start_ip = d.pools[0].start_ip;
+      form.value.end_ip = d.pools[0].end_ip;
+      form.value.excluded_ips = d.pools[0].excluded_ips || "";
+    }
+  } catch (e) {
+    if (auth.can("view_dhcp")) {
+      err.value = e instanceof Error ? e.message : "Failed to load DHCP pool";
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [props.open, props.subnetId] as const,
+  ([open]) => {
+    if (open) loadPool();
+  },
+);
+
+async function save() {
+  if (!props.subnetId || !canEdit()) return;
+  saving.value = true;
+  err.value = "";
+  msg.value = "";
+  try {
+    await api.setDhcp(props.subnetId, {
+      pools: [{
+        start_ip: form.value.start_ip,
+        end_ip: form.value.end_ip,
+        excluded_ips: form.value.excluded_ips.split(",").map((s) => s.trim()).filter(Boolean),
+      }],
+    });
+    hasPool.value = true;
+    msg.value = "Saved";
+    emit("saved");
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to save";
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function remove() {
+  if (!props.subnetId || !canEdit() || !confirm("Remove this DHCP pool?")) return;
+  saving.value = true;
+  err.value = "";
+  msg.value = "";
+  try {
+    await api.setDhcp(props.subnetId, { remove: true });
+    hasPool.value = false;
+    form.value = { start_ip: "", end_ip: "", excluded_ips: "" };
+    msg.value = "Removed";
+    emit("saved");
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to remove";
+  } finally {
+    saving.value = false;
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") emit("close");
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      @click.self="emit('close')"
+      @keydown="onKeydown"
+    >
+      <form class="card w-full max-w-lg space-y-4 shadow-xl" @submit.prevent="save">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold">DHCP pool</h2>
+          <button type="button" class="rounded-lg p-1 hover:bg-surface-overlay" aria-label="Close" @click="emit('close')">
+            <X class="h-5 w-5" />
+          </button>
+        </div>
+        <p v-if="loading" class="text-sm text-slate-500">Loading…</p>
+        <template v-else>
+          <input
+            v-model="form.start_ip"
+            class="input-field"
+            placeholder="Start IP"
+            required
+            :disabled="!canEdit()"
+          />
+          <input
+            v-model="form.end_ip"
+            class="input-field"
+            placeholder="End IP"
+            required
+            :disabled="!canEdit()"
+          />
+          <input
+            v-model="form.excluded_ips"
+            class="input-field"
+            placeholder="Excluded IPs (comma-separated)"
+            :disabled="!canEdit()"
+          />
+          <div v-if="canEdit()" class="flex gap-2">
+            <button type="submit" class="btn-primary" :disabled="saving">Save</button>
+            <button v-if="hasPool" type="button" class="btn-secondary" :disabled="saving" @click="remove">Remove pool</button>
+            <button type="button" class="btn-secondary" @click="emit('close')">Cancel</button>
+          </div>
+          <div v-else class="flex justify-end">
+            <button type="button" class="btn-secondary" @click="emit('close')">Close</button>
+          </div>
+          <p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
+          <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        </template>
+      </form>
+    </div>
+  </Teleport>
+</template>

frontend/src/components/IpHistoryModal.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { X } from "lucide-vue-next";
+import { api } from "@/api";
+import { formatLocalTime } from "@/utils/datetime";
+
+export interface IpHistoryEntry {
+  ip: string;
+  action: "assigned" | "removed";
+  device_name: string;
+  subnet_name?: string;
+  subnet_cidr?: string;
+  user_name?: string;
+  timestamp?: string;
+}
+
+const props = defineProps<{
+  ip: string | null;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const loading = ref(false);
+const error = ref("");
+const history = ref<IpHistoryEntry[]>([]);
+
+watch(
+  () => props.ip,
+  async (ip) => {
+    if (!ip) {
+      history.value = [];
+      error.value = "";
+      return;
+    }
+    loading.value = true;
+    error.value = "";
+    try {
+      history.value = (await api.ipHistory(ip)) as IpHistoryEntry[];
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Failed to load history";
+      history.value = [];
+    } finally {
+      loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+function formatTime(ts?: string) {
+  return formatLocalTime(ts, "Unknown");
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") emit("close");
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="ip"
+      class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-4 sm:items-center"
+      @click.self="emit('close')"
+      @keydown="onKeydown"
+    >
+      <div class="card max-h-[80vh] w-full max-w-lg overflow-hidden p-0 shadow-xl">
+        <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-700">
+          <h2 class="font-semibold">IP history · <span class="font-mono text-accent">{{ ip }}</span></h2>
+          <button type="button" class="rounded-lg p-1 hover:bg-surface-overlay" aria-label="Close" @click="emit('close')">
+            <X class="h-5 w-5" />
+          </button>
+        </div>
+        <div class="max-h-[60vh] overflow-y-auto p-4">
+          <p v-if="loading" class="text-center text-sm text-slate-500">Loading…</p>
+          <p v-else-if="error" class="text-center text-sm text-red-500">{{ error }}</p>
+          <p v-else-if="history.length === 0" class="text-center text-sm text-slate-500">No assignment history for this address.</p>
+          <ul v-else class="space-y-3">
+            <li
+              v-for="(entry, i) in history"
+              :key="i"
+              class="flex gap-3 border-b border-slate-100 pb-3 last:border-0 dark:border-slate-800"
+            >
+              <span
+                class="mt-0.5 shrink-0 text-xs font-semibold uppercase"
+                :class="entry.action === 'assigned' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500'"
+              >
+                {{ entry.action === "assigned" ? "Assigned" : "Removed" }}
+              </span>
+              <div class="min-w-0 flex-1 text-sm">
+                <div>
+                  <span class="font-medium">{{ entry.device_name }}</span>
+                  <span v-if="entry.subnet_name" class="text-slate-500">
+                    · {{ entry.subnet_name }}<span v-if="entry.subnet_cidr"> ({{ entry.subnet_cidr }})</span>
+                  </span>
+                </div>
+                <div class="mt-1 text-xs text-slate-500">
+                  {{ entry.user_name || "Unknown" }} · {{ formatTime(entry.timestamp) }}
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

frontend/src/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import { setUnauthorizedHandler } from "./api";
+import { useAuthStore } from "./stores/auth";
+import "./style.css";
+
+const pinia = createPinia();
+const app = createApp(App);
+app.use(pinia).use(router);
+
+setUnauthorizedHandler(() => {
+  const auth = useAuthStore();
+  const current = router.currentRoute.value;
+  if (current.meta.public) return;
+  auth.logout();
+  router.push({ name: "login", query: { redirect: current.fullPath } });
+});
+
+app.mount("#app");

frontend/src/router/index.ts

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/login", name: "login", component: () => import("@/views/LoginView.vue"), meta: { public: true } },
+    { path: "/verify-2fa", name: "verify-2fa", component: () => import("@/views/Verify2faView.vue"), meta: { public: true } },
+    { path: "/setup-2fa", name: "setup-2fa", component: () => import("@/views/Setup2faView.vue"), meta: { public: true } },
+    {
+      path: "/",
+      component: () => import("@/components/AppLayout.vue"),
+      children: [
+        { path: "", name: "dashboard", component: () => import("@/views/DashboardView.vue") },
+        { path: "subnets", name: "subnets", component: () => import("@/views/SubnetsBrowseView.vue") },
+        { path: "devices", name: "devices", component: () => import("@/views/DevicesView.vue") },
+        { path: "devices/:id", name: "device", component: () => import("@/views/DeviceDetailView.vue") },
+        { path: "subnets/:id", name: "subnet", component: () => import("@/views/SubnetDetailView.vue") },
+        { path: "subnets/:id/dhcp", redirect: (to) => `/subnets/${to.params.id}` },
+        { path: "racks", name: "racks", component: () => import("@/views/RacksView.vue") },
+        { path: "racks/:id", name: "rack", component: () => import("@/views/RackDetailView.vue") },
+        { path: "search", redirect: "/" },
+        { path: "tags", name: "tags", component: () => import("@/views/TagsView.vue") },
+        { path: "device-types", redirect: "/devices" },
+        { path: "custom-fields", name: "custom-fields", component: () => import("@/views/CustomFieldsView.vue") },
+        { path: "bulk", redirect: "/devices" },
+        { path: "audit", name: "audit", component: () => import("@/views/AuditView.vue") },
+        { path: "subnets/manage", name: "subnet-management", component: () => import("@/views/SubnetsView.vue") },
+        { path: "admin", redirect: "/subnets/manage" },
+        { path: "users", name: "users", component: () => import("@/views/UsersView.vue") },
+        { path: "account", name: "account", component: () => import("@/views/AccountView.vue") },
+      ],
+    },
+  ],
+});
+
+router.beforeEach(async (to) => {
+  const auth = useAuthStore();
+  if (!auth.loaded) await auth.fetchMe().catch(() => {});
+  if (to.meta.public) return true;
+  if (!auth.loggedIn) return { name: "login", query: { redirect: to.fullPath } };
+  return true;
+});
+
+export { router };
+export default router;

frontend/src/stores/auth.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { api, type MeResponse } from "@/api";
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    loaded: false,
+    loggedIn: false,
+    user: null as MeResponse["user"] | null,
+    permissions: [] as string[],
+    org: { name: "IPAM", logo: "" },
+    version: "unknown",
+  }),
+  getters: {
+    can: (state) => (perm: string) => state.permissions.includes(perm),
+  },
+  actions: {
+    async fetchMe() {
+      const data = await api.me();
+      this.loaded = true;
+      this.loggedIn = data.logged_in;
+      this.user = data.user ?? null;
+      this.permissions = data.permissions ?? [];
+      this.org = data.org ?? this.org;
+      this.version = data.app_version ?? "unknown";
+    },
+    async login(email: string, password: string) {
+      return api.login(email, password);
+    },
+    async logout() {
+      await api.logout();
+      this.loggedIn = false;
+      this.user = null;
+      this.permissions = [];
+    },
+  },
+});

frontend/src/style.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --surface: 248 250 252;
+    --surface-raised: 255 255 255;
+    --surface-overlay: 241 245 249;
+    --accent: 6 182 212;
+    --accent-muted: 8 145 178;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --surface: 15 20 25;
+      --surface-raised: 21 28 36;
+      --surface-overlay: 26 35 46;
+      --accent: 34 211 238;
+      --accent-muted: 6 182 212;
+    }
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply rounded-lg bg-accent px-4 py-2 text-sm font-medium text-slate-950 transition hover:opacity-90 disabled:opacity-50;
+  }
+  .btn-secondary {
+    @apply rounded-lg border border-slate-300 bg-surface-raised px-4 py-2 text-sm font-medium transition hover:bg-surface-overlay dark:border-slate-700;
+  }
+  .input-field {
+    @apply w-full rounded-lg border border-slate-300 bg-surface-overlay px-3 py-2 text-sm outline-none ring-accent focus:border-accent focus:ring-1 dark:border-slate-700;
+  }
+  .card {
+    @apply rounded-xl border border-slate-200 bg-surface-raised p-4 shadow-sm dark:border-slate-800;
+  }
+}

frontend/src/utils/datetime.ts

@@ -0,0 +1,23 @@
+/** Parse API timestamps (GMT strings, ISO, or naive UTC) for local display. */
+export function parseApiTimestamp(ts?: string | null): Date | null {
+  if (!ts) return null;
+  const trimmed = ts.trim();
+  if (!trimmed) return null;
+
+  // RFC/GMT strings from Flask/MySQL — parse as-is
+  if (/GMT|Z|[+-]\d{2}:\d{2}$/.test(trimmed)) {
+    const d = new Date(trimmed);
+    if (!Number.isNaN(d.getTime())) return d;
+  }
+
+  // Naive datetime — treat as UTC
+  const normalized = trimmed.includes("T") ? trimmed : trimmed.replace(" ", "T");
+  const d = new Date(normalized.endsWith("Z") ? normalized : `${normalized}Z`);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+export function formatLocalTime(ts?: string | null, fallback = "—"): string {
+  const d = parseApiTimestamp(ts);
+  if (!d) return ts?.trim() || fallback;
+  return d.toLocaleString();
+}

frontend/src/views/AccountView.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { RouterLink } from "vue-router";
+import { api } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const profile = ref<{
+  totp_enabled?: boolean;
+  role_requires_2fa?: boolean;
+  backup_codes?: string[];
+} | null>(null);
+const pw = ref({ current: "", newPw: "" });
+const mfaPw = ref("");
+const msg = ref("");
+const err = ref("");
+const newBackupCodes = ref<string[]>([]);
+
+onMounted(async () => { profile.value = await api.account() as typeof profile.value; });
+
+async function changePw() {
+  err.value = "";
+  try {
+    await api.changePassword(pw.value.current, pw.value.newPw);
+    msg.value = "Password updated";
+    pw.value = { current: "", newPw: "" };
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function disable2fa() {
+  if (!mfaPw.value || !confirm("Disable two-factor authentication?")) return;
+  err.value = "";
+  try {
+    await api.disable2fa(mfaPw.value);
+    mfaPw.value = "";
+    profile.value = await api.account() as typeof profile.value;
+    msg.value = "2FA disabled";
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function regenCodes() {
+  if (!mfaPw.value || !confirm("Regenerate backup codes? Old codes will stop working.")) return;
+  err.value = "";
+  try {
+    const r = await api.regenerateBackupCodes(mfaPw.value);
+    newBackupCodes.value = r.backup_codes;
+    mfaPw.value = "";
+    profile.value = await api.account() as typeof profile.value;
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Account</h1>
+    <div class="card mt-6 max-w-md space-y-2">
+      <p><strong>{{ auth.user?.name }}</strong></p>
+      <p class="text-slate-500">{{ auth.user?.email }}</p>
+      <p class="text-sm">2FA: {{ profile?.totp_enabled ? "Enabled" : "Disabled" }}</p>
+    </div>
+
+    <div class="card mt-6 max-w-md space-y-4">
+      <h2 class="font-semibold">Two-factor authentication</h2>
+      <template v-if="profile?.totp_enabled">
+        <div v-if="profile.backup_codes?.length">
+          <p class="text-sm text-slate-500">Backup codes:</p>
+          <ul class="mt-2 rounded-lg bg-surface-overlay p-3 font-mono text-sm">
+            <li v-for="c in profile.backup_codes" :key="c">{{ c }}</li>
+          </ul>
+        </div>
+        <div v-if="newBackupCodes.length">
+          <p class="text-sm font-medium text-accent">New backup codes — save these now:</p>
+          <ul class="mt-2 rounded-lg bg-surface-overlay p-3 font-mono text-sm">
+            <li v-for="c in newBackupCodes" :key="c">{{ c }}</li>
+          </ul>
+        </div>
+        <input v-model="mfaPw" type="password" class="input-field" placeholder="Password to confirm" />
+        <div class="flex flex-wrap gap-2">
+          <button class="btn-secondary text-sm" @click="regenCodes">Regenerate backup codes</button>
+          <button
+            v-if="!profile.role_requires_2fa"
+            class="text-sm text-red-500 hover:underline"
+            @click="disable2fa"
+          >Disable 2FA</button>
+          <p v-else class="text-sm text-slate-500">Your role requires 2FA — it cannot be disabled.</p>
+        </div>
+      </template>
+      <template v-else>
+        <p class="text-sm text-slate-500">Protect your account with an authenticator app.</p>
+        <RouterLink to="/setup-2fa" class="btn-primary inline-block text-sm">Enable 2FA</RouterLink>
+      </template>
+    </div>
+
+    <form class="card mt-6 max-w-md space-y-3" @submit.prevent="changePw">
+      <h2 class="font-semibold">Change password</h2>
+      <input v-model="pw.current" type="password" class="input-field" placeholder="Current password" />
+      <input v-model="pw.newPw" type="password" class="input-field" placeholder="New password" />
+      <button class="btn-primary">Update</button>
+      <p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
+      <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+    </form>
+  </div>
+</template>

frontend/src/views/AuditView.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { api, type AuditEntry } from "@/api";
+import { formatLocalTime } from "@/utils/datetime";
+
+const logs = ref<AuditEntry[]>([]);
+const actions = ref<string[]>([]);
+const total = ref(0);
+const loading = ref(true);
+const error = ref("");
+const limit = 50;
+const offset = ref(0);
+
+const filters = ref({ user: "", action: "", from: "", to: "" });
+const applied = ref({ user: "", action: "", from: "", to: "" });
+
+const exportUrl = computed(() => api.auditExportUrl({
+  user: applied.value.user || undefined,
+  action: applied.value.action || undefined,
+  from: applied.value.from || undefined,
+  to: applied.value.to || undefined,
+}));
+
+const page = computed(() => Math.floor(offset.value / limit) + 1);
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit)));
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const d = await api.audit({
+      limit,
+      offset: offset.value,
+      user: applied.value.user || undefined,
+      action: applied.value.action || undefined,
+      from: applied.value.from || undefined,
+      to: applied.value.to || undefined,
+    });
+    logs.value = d.items;
+    total.value = d.total;
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load audit log";
+    logs.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(async () => {
+  try {
+    actions.value = await api.auditActions();
+  } catch {
+    actions.value = [];
+  }
+  await load();
+});
+
+function applyFilters() {
+  applied.value = { ...filters.value };
+  offset.value = 0;
+  load();
+}
+
+function clearFilters() {
+  filters.value = { user: "", action: "", from: "", to: "" };
+  applied.value = { user: "", action: "", from: "", to: "" };
+  offset.value = 0;
+  load();
+}
+
+function prevPage() {
+  if (offset.value >= limit) {
+    offset.value -= limit;
+    load();
+  }
+}
+
+function nextPage() {
+  if (offset.value + limit < total.value) {
+    offset.value += limit;
+    load();
+  }
+}
+</script>
+<template>
+  <div>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-bold">Audit log</h1>
+      <a :href="exportUrl" class="btn-secondary text-sm">Export CSV</a>
+    </div>
+
+    <form class="card mt-6 flex flex-wrap items-end gap-3" @submit.prevent="applyFilters">
+      <div>
+        <label class="mb-1 block text-xs text-slate-500">User</label>
+        <input v-model="filters.user" class="input-field py-1.5 text-sm" placeholder="Name contains…" />
+      </div>
+      <div>
+        <label class="mb-1 block text-xs text-slate-500">Action</label>
+        <select v-model="filters.action" class="input-field py-1.5 text-sm">
+          <option value="">All actions</option>
+          <option v-for="a in actions" :key="a" :value="a">{{ a }}</option>
+        </select>
+      </div>
+      <div>
+        <label class="mb-1 block text-xs text-slate-500">From</label>
+        <input v-model="filters.from" type="date" class="input-field py-1.5 text-sm" />
+      </div>
+      <div>
+        <label class="mb-1 block text-xs text-slate-500">To</label>
+        <input v-model="filters.to" type="date" class="input-field py-1.5 text-sm" />
+      </div>
+      <button type="submit" class="btn-primary text-sm">Apply</button>
+      <button type="button" class="btn-secondary text-sm" @click="clearFilters">Clear</button>
+    </form>
+
+    <p v-if="loading" class="mt-6 text-slate-500">Loading…</p>
+    <p v-else-if="error" class="mt-6 text-red-500">{{ error }}</p>
+    <div v-else class="card mt-6 overflow-x-auto">
+      <table class="w-full text-left text-sm">
+        <thead>
+          <tr class="border-b dark:border-slate-700">
+            <th class="p-2">Time</th>
+            <th class="p-2">User</th>
+            <th class="p-2">Action</th>
+            <th class="p-2">Details</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="l in logs" :key="l.id" class="border-b dark:border-slate-800">
+            <td class="p-2 whitespace-nowrap text-xs text-slate-500">{{ formatLocalTime(l.timestamp) }}</td>
+            <td class="p-2">{{ l.user_name || "—" }}</td>
+            <td class="p-2 font-mono text-xs">{{ l.action }}</td>
+            <td class="p-2 max-w-md truncate">{{ l.details }}</td>
+          </tr>
+          <tr v-if="!logs.length">
+            <td colspan="4" class="p-4 text-center text-slate-500">No audit entries match your filters.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="!loading && !error && total > 0" class="mt-4 flex items-center justify-between text-sm text-slate-500">
+      <span>{{ total }} entries · page {{ page }} of {{ totalPages }}</span>
+      <div class="flex gap-2">
+        <button type="button" class="btn-secondary text-sm" :disabled="offset === 0" @click="prevPage">Previous</button>
+        <button type="button" class="btn-secondary text-sm" :disabled="offset + limit >= total" @click="nextPage">Next</button>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/CustomFieldsView.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { api, type CustomFieldDef } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const tab = ref<"device" | "subnet">("device");
+const fields = ref<CustomFieldDef[]>([]);
+const form = ref({ name: "", field_key: "", field_type: "text", required: false, default_value: "", help_text: "" });
+const editForm = ref({ id: 0, name: "", field_key: "", field_type: "text", required: false, default_value: "", help_text: "" });
+const showAdd = ref(false);
+const showEdit = ref(false);
+const err = ref("");
+
+const fieldTypes = ["text", "textarea", "number", "select", "checkbox", "date"];
+
+async function load() {
+  fields.value = await api.customFields(tab.value);
+}
+
+onMounted(load);
+
+async function create() {
+  err.value = "";
+  try {
+    await api.createCustomField({ ...form.value, entity_type: tab.value });
+    showAdd.value = false;
+    form.value = { name: "", field_key: "", field_type: "text", required: false, default_value: "", help_text: "" };
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+function openEdit(f: CustomFieldDef) {
+  editForm.value = {
+    id: f.id,
+    name: f.name,
+    field_key: f.field_key,
+    field_type: f.field_type,
+    required: !!f.required,
+    default_value: "",
+    help_text: "",
+  };
+  showEdit.value = true;
+  err.value = "";
+}
+
+async function saveEdit() {
+  err.value = "";
+  try {
+    await api.updateCustomField(editForm.value.id, {
+      name: editForm.value.name,
+      field_type: editForm.value.field_type,
+      required: editForm.value.required,
+      default_value: editForm.value.default_value || null,
+      help_text: editForm.value.help_text || null,
+    });
+    showEdit.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function del(id: number) {
+  if (!confirm("Delete this custom field?")) return;
+  await api.deleteCustomField(id);
+  await load();
+}
+
+async function moveField(index: number, dir: -1 | 1) {
+  const target = index + dir;
+  if (target < 0 || target >= fields.value.length) return;
+  const reordered = [...fields.value];
+  const [item] = reordered.splice(index, 1);
+  reordered.splice(target, 0, item);
+  const orders: Record<number, number> = {};
+  reordered.forEach((f, i) => { orders[f.id] = i; });
+  await api.reorderCustomFields(tab.value, orders);
+  fields.value = reordered;
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Custom fields</h1>
+    <div class="mt-4 flex flex-wrap items-center gap-2">
+      <button class="rounded-lg px-3 py-1 text-sm" :class="tab === 'device' ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="tab = 'device'; load()">Device</button>
+      <button class="rounded-lg px-3 py-1 text-sm" :class="tab === 'subnet' ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="tab = 'subnet'; load()">Subnet</button>
+      <button v-if="auth.can('manage_custom_fields')" class="btn-primary ml-auto text-sm" @click="showAdd = true; err = ''">Add field</button>
+    </div>
+    <ul class="mt-6 space-y-2">
+      <li v-for="(f, i) in fields" :key="f.id" class="card flex flex-wrap items-center justify-between gap-2">
+        <span>{{ f.name }} <span class="text-slate-500">({{ f.field_type }})</span></span>
+        <span class="font-mono text-xs text-slate-500">{{ f.field_key }}</span>
+        <div v-if="auth.can('manage_custom_fields')" class="flex gap-2">
+          <button class="text-sm text-slate-500 hover:underline" :disabled="i === 0" @click="moveField(i, -1)">↑</button>
+          <button class="text-sm text-slate-500 hover:underline" :disabled="i === fields.length - 1" @click="moveField(i, 1)">↓</button>
+          <button class="text-sm text-accent hover:underline" @click="openEdit(f)">Edit</button>
+          <button class="text-sm text-red-500 hover:underline" @click="del(f.id)">Delete</button>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="showAdd" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAdd = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="create">
+        <h2 class="text-lg font-semibold">Add custom field</h2>
+        <input v-model="form.name" class="input-field" placeholder="Display name" required />
+        <input v-model="form.field_key" class="input-field font-mono text-sm" placeholder="field_key" required />
+        <select v-model="form.field_type" class="input-field">
+          <option v-for="t in fieldTypes" :key="t" :value="t">{{ t }}</option>
+        </select>
+        <label class="flex items-center gap-2 text-sm"><input v-model="form.required" type="checkbox" /> Required</label>
+        <input v-model="form.default_value" class="input-field" placeholder="Default value" />
+        <input v-model="form.help_text" class="input-field" placeholder="Help text" />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Create</button>
+          <button type="button" class="btn-secondary" @click="showAdd = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="showEdit" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showEdit = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="saveEdit">
+        <h2 class="text-lg font-semibold">Edit custom field</h2>
+        <input v-model="editForm.name" class="input-field" required />
+        <input v-model="editForm.field_key" class="input-field font-mono text-sm" disabled />
+        <select v-model="editForm.field_type" class="input-field">
+          <option v-for="t in fieldTypes" :key="t" :value="t">{{ t }}</option>
+        </select>
+        <label class="flex items-center gap-2 text-sm"><input v-model="editForm.required" type="checkbox" /> Required</label>
+        <input v-model="editForm.default_value" class="input-field" placeholder="Default value" />
+        <input v-model="editForm.help_text" class="input-field" placeholder="Help text" />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Save</button>
+          <button type="button" class="btn-secondary" @click="showEdit = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/DashboardView.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { RouterLink } from "vue-router";
+import { Network, Wifi, Layers, Server } from "lucide-vue-next";
+import { api } from "@/api";
+
+interface DashboardStats {
+  total_ips: number;
+  used_ips: number;
+  available_ips: number;
+  utilization_percent: number;
+  subnet_count: number;
+  device_count: number;
+}
+
+interface SubnetOverviewRow {
+  id: number;
+  name: string;
+  cidr: string;
+  site: string;
+  vlan_id?: number;
+  utilization: number;
+  available: number;
+}
+
+interface ActivityPoint {
+  hour: number;
+  count: number;
+}
+
+const loading = ref(true);
+const error = ref("");
+const stats = ref<DashboardStats | null>(null);
+const subnetOverview = ref<SubnetOverviewRow[]>([]);
+const activity = ref<ActivityPoint[]>([]);
+
+const donutStyle = computed(() => {
+  const pct = stats.value?.utilization_percent ?? 0;
+  return { background: `conic-gradient(rgb(6 182 212) ${pct}%, rgb(var(--surface-overlay)) ${pct}%)` };
+});
+
+const maxActivity = computed(() => Math.max(1, ...activity.value.map((a) => a.count)));
+
+onMounted(async () => {
+  try {
+    const d = await api.dashboard();
+    stats.value = d.stats;
+    subnetOverview.value = d.subnet_overview;
+    activity.value = d.activity;
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load dashboard";
+  } finally {
+    loading.value = false;
+  }
+});
+
+function formatHour(h: number) {
+  if (h === 0) return "12 AM";
+  if (h === 12) return "12 PM";
+  return h < 12 ? `${h} AM` : `${h - 12} PM`;
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Dashboard</h1>
+    <p class="mt-1 text-slate-500">Network overview</p>
+
+    <p v-if="loading" class="mt-8 text-slate-500">Loading…</p>
+    <p v-else-if="error" class="mt-8 text-red-500">{{ error }}</p>
+
+    <template v-else-if="stats">
+      <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <div class="card flex items-start gap-4">
+          <div class="rounded-lg bg-accent/15 p-3 text-accent"><Network class="h-6 w-6" /></div>
+          <div>
+            <div class="text-xs font-medium uppercase tracking-wide text-slate-500">Total IPv4 addresses</div>
+            <div class="mt-1 text-2xl font-bold text-accent">{{ stats.total_ips.toLocaleString() }}</div>
+            <div class="text-sm text-slate-500">{{ stats.utilization_percent }}% utilised</div>
+          </div>
+        </div>
+        <div class="card flex items-start gap-4">
+          <div class="rounded-lg bg-surface-overlay p-3 text-slate-500"><Wifi class="h-6 w-6" /></div>
+          <div>
+            <div class="text-xs font-medium uppercase tracking-wide text-slate-500">Available IPs</div>
+            <div class="mt-1 text-2xl font-bold">{{ stats.available_ips.toLocaleString() }}</div>
+            <div class="text-sm text-slate-500">{{ 100 - stats.utilization_percent }}% free</div>
+          </div>
+        </div>
+        <div class="card flex items-start gap-4">
+          <div class="rounded-lg bg-surface-overlay p-3 text-slate-500"><Layers class="h-6 w-6" /></div>
+          <div>
+            <div class="text-xs font-medium uppercase tracking-wide text-slate-500">Subnets</div>
+            <div class="mt-1 text-2xl font-bold">{{ stats.subnet_count }}</div>
+            <div class="text-sm text-slate-500">Total</div>
+          </div>
+        </div>
+        <div class="card flex items-start gap-4">
+          <div class="rounded-lg bg-surface-overlay p-3 text-slate-500"><Server class="h-6 w-6" /></div>
+          <div>
+            <div class="text-xs font-medium uppercase tracking-wide text-slate-500">Devices</div>
+            <div class="mt-1 text-2xl font-bold">{{ stats.device_count.toLocaleString() }}</div>
+            <div class="text-sm text-slate-500">Managed</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 grid gap-4 lg:grid-cols-2">
+        <div class="card">
+          <h2 class="font-semibold">IPv4 usage distribution</h2>
+          <div class="mt-6 flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
+            <div class="relative h-44 w-44 shrink-0 rounded-full" :style="donutStyle">
+              <div class="absolute inset-5 flex flex-col items-center justify-center rounded-full bg-surface-raised text-center">
+                <span class="text-2xl font-bold">{{ stats.total_ips.toLocaleString() }}</span>
+                <span class="text-xs uppercase tracking-wide text-slate-500">Total</span>
+              </div>
+            </div>
+            <div class="space-y-3 text-sm">
+              <div class="flex items-center gap-2">
+                <span class="h-3 w-3 rounded-full bg-accent" />
+                <span>{{ stats.utilization_percent }}% Used ({{ stats.used_ips.toLocaleString() }})</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="h-3 w-3 rounded-full bg-surface-overlay ring-1 ring-slate-300 dark:ring-slate-600" />
+                <span>{{ 100 - stats.utilization_percent }}% Free ({{ stats.available_ips.toLocaleString() }})</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <h2 class="font-semibold">Activity — last 24 hours</h2>
+          <p class="mt-1 text-xs text-slate-500">Audit log entries by hour</p>
+          <div class="mt-4 flex h-40 items-end gap-0.5">
+            <div
+              v-for="point in activity"
+              :key="point.hour"
+              class="flex-1 rounded-t bg-accent/80 transition-all hover:bg-accent"
+              :style="{ height: `${Math.max(4, (point.count / maxActivity) * 100)}%` }"
+              :title="`${formatHour(point.hour)}: ${point.count}`"
+            />
+          </div>
+          <div class="mt-2 flex justify-between text-[10px] text-slate-500">
+            <span>12 AM</span>
+            <span>6 AM</span>
+            <span>12 PM</span>
+            <span>6 PM</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mt-6 overflow-x-auto">
+        <div class="mb-4 flex items-center justify-between gap-3">
+          <h2 class="font-semibold">Subnet overview</h2>
+          <RouterLink to="/subnets" class="text-sm text-accent hover:underline">View all subnets</RouterLink>
+        </div>
+        <table class="w-full min-w-[640px] text-left text-sm">
+          <thead>
+            <tr class="border-b border-slate-200 text-xs font-medium uppercase tracking-wide text-slate-500 dark:border-slate-700">
+              <th class="p-2">Subnet</th>
+              <th class="p-2">Name</th>
+              <th class="p-2">Utilised</th>
+              <th class="p-2">Available</th>
+              <th class="p-2">Site</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="s in subnetOverview"
+              :key="s.id"
+              class="border-b border-slate-100 dark:border-slate-800"
+            >
+              <td class="p-2">
+                <RouterLink :to="`/subnets/${s.id}`" class="font-mono text-accent hover:underline">{{ s.cidr }}</RouterLink>
+              </td>
+              <td class="p-2">{{ s.name }}</td>
+              <td class="p-2">
+                <div class="flex items-center gap-2">
+                  <div class="h-1.5 w-16 overflow-hidden rounded-full bg-surface-overlay">
+                    <div
+                      class="h-full rounded-full bg-accent"
+                      :style="{ width: `${s.utilization}%` }"
+                    />
+                  </div>
+                  <span>{{ s.utilization }}%</span>
+                </div>
+              </td>
+              <td class="p-2">{{ s.available }}</td>
+              <td class="p-2">{{ s.site }}</td>
+            </tr>
+            <tr v-if="!subnetOverview.length">
+              <td colspan="5" class="p-4 text-center text-slate-500">No subnets configured.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </div>
+</template>

frontend/src/views/DeviceDetailView.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter, RouterLink } from "vue-router";
+import { api, type Device, type Tag, type Subnet } from "@/api";
+import type { IpHistoryEntry } from "@/components/IpHistoryModal.vue";
+import CustomFieldValues from "@/components/CustomFieldValues.vue";
+import { useAuthStore } from "@/stores/auth";
+import { formatLocalTime } from "@/utils/datetime";
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+const device = ref<Device | null>(null);
+const allTags = ref<Tag[]>([]);
+const subnets = ref<Subnet[]>([]);
+const availableIps = ref<{ id: number; ip: string }[]>([]);
+const history = ref<IpHistoryEntry[]>([]);
+const editName = ref("");
+const editDescription = ref("");
+const saving = ref(false);
+const loading = ref(true);
+const error = ref("");
+const showAssignIp = ref(false);
+const assignForm = ref({ site: "", subnet_id: 0, ip_id: 0 });
+const err = ref("");
+
+const sites = computed(() => {
+  const list = [...new Set(subnets.value.map((s) => s.site || "Unassigned"))];
+  return list.sort((a, b) => {
+    if (a === "Unassigned") return -1;
+    if (b === "Unassigned") return 1;
+    return a.localeCompare(b);
+  });
+});
+
+const deviceSites = computed(() =>
+  [...new Set((device.value?.ip_addresses ?? []).map((ip) => ip.site || "Unassigned"))],
+);
+
+const assignableSites = computed(() =>
+  deviceSites.value.length ? sites.value.filter((s) => deviceSites.value.includes(s)) : sites.value,
+);
+
+const subnetsForSite = computed(() =>
+  subnets.value.filter((s) => (s.site || "Unassigned") === assignForm.value.site),
+);
+
+async function loadDevice() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const id = Number(route.params.id);
+    const [d, tags, h, sn] = await Promise.all([
+      api.device(id),
+      api.tags(),
+      api.deviceIpHistory(id).catch(() => []),
+      api.subnets(false),
+    ]);
+    device.value = d;
+    editName.value = d.name;
+    editDescription.value = d.description || "";
+    allTags.value = tags;
+    subnets.value = sn;
+    history.value = h as IpHistoryEntry[];
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load device";
+    device.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => route.params.id,
+  () => {
+    showAssignIp.value = false;
+    err.value = "";
+    loadDevice();
+  },
+  { immediate: true },
+);
+
+async function loadAvailableIps(subnetId: number) {
+  if (!subnetId) {
+    availableIps.value = [];
+    assignForm.value.ip_id = 0;
+    return;
+  }
+  availableIps.value = await api.availableIps(subnetId);
+  assignForm.value.ip_id = availableIps.value[0]?.id ?? 0;
+}
+
+async function onSiteChange() {
+  const list = subnetsForSite.value;
+  assignForm.value.subnet_id = list[0]?.id ?? 0;
+  await loadAvailableIps(assignForm.value.subnet_id);
+}
+
+async function onSubnetChange() {
+  await loadAvailableIps(assignForm.value.subnet_id);
+}
+
+async function openAssignIpModal() {
+  err.value = "";
+  const defaultSite = assignableSites.value[0] ?? sites.value[0] ?? "";
+  const defaultSubnet = subnets.value.find((s) => (s.site || "Unassigned") === defaultSite) ?? subnets.value[0];
+  assignForm.value = {
+    site: defaultSite,
+    subnet_id: defaultSubnet?.id ?? 0,
+    ip_id: 0,
+  };
+  if (assignForm.value.subnet_id) await loadAvailableIps(assignForm.value.subnet_id);
+  showAssignIp.value = true;
+}
+
+async function saveDevice() {
+  if (!device.value) return;
+  saving.value = true;
+  err.value = "";
+  try {
+    await api.updateDevice(device.value.id, { name: editName.value, description: editDescription.value });
+    device.value.name = editName.value;
+    device.value.description = editDescription.value;
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to save";
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function assignTag(tagId: number) {
+  if (!device.value || !tagId) return;
+  await api.assignTag(device.value.id, tagId);
+  device.value = await api.device(device.value.id);
+}
+
+async function removeTag(tagId: number) {
+  if (!device.value || !confirm("Remove this tag?")) return;
+  await api.removeTag(device.value.id, tagId);
+  device.value = await api.device(device.value.id);
+}
+
+async function assignIp() {
+  if (!device.value || !assignForm.value.ip_id) return;
+  err.value = "";
+  try {
+    await api.assignIp(device.value.id, assignForm.value.ip_id);
+    showAssignIp.value = false;
+    await loadDevice();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function removeIp(ipId: number) {
+  if (!device.value || !confirm("Remove this IP from the device?")) return;
+  await api.removeIp(device.value.id, ipId);
+  await loadDevice();
+}
+
+async function deleteDevice() {
+  if (!device.value || !confirm(`Delete device "${device.value.name}"? This cannot be undone.`)) return;
+  await api.deleteDevice(device.value.id);
+  router.push("/devices");
+}
+
+function onCustomFieldsSaved(values: Record<string, unknown>) {
+  if (device.value) device.value.custom_fields = values;
+}
+
+function formatTime(ts?: string) {
+  return formatLocalTime(ts, "Unknown");
+}
+</script>
+<template>
+  <div>
+    <RouterLink to="/devices" class="text-sm text-accent hover:underline">← Devices</RouterLink>
+    <p v-if="loading" class="mt-8 text-slate-500">Loading…</p>
+    <p v-else-if="error" class="mt-8 text-red-500">{{ error }}</p>
+    <template v-else-if="device">
+      <div class="mt-4 flex flex-wrap items-start justify-between gap-4">
+        <div class="flex min-w-0 max-w-2xl flex-1 flex-col gap-2">
+          <template v-if="auth.can('edit_device')">
+            <input
+              v-model="editName"
+              class="input-field block w-full border-0 bg-transparent px-0 py-0 text-2xl font-bold shadow-none focus:ring-0"
+              aria-label="Device name"
+              @blur="saveDevice"
+            />
+            <textarea
+              v-model="editDescription"
+              class="input-field block w-full resize-y text-sm"
+              placeholder="Add a description…"
+              rows="2"
+              @blur="saveDevice"
+            />
+          </template>
+          <template v-else>
+            <h1 class="text-2xl font-bold">{{ device.name }}</h1>
+            <p v-if="device.description" class="text-slate-500">{{ device.description }}</p>
+          </template>
+          <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        </div>
+        <button
+          v-if="auth.can('delete_device')"
+          class="shrink-0 text-sm text-red-500 hover:underline"
+          @click="deleteDevice"
+        >Delete device</button>
+      </div>
+      <div class="mt-6 grid gap-4 lg:grid-cols-2">
+        <div class="card">
+          <div class="flex items-center justify-between">
+            <h2 class="font-semibold">IP addresses</h2>
+            <button v-if="auth.can('add_device_ip')" class="text-sm text-accent hover:underline" @click="openAssignIpModal">Assign IP</button>
+          </div>
+          <ul class="mt-3 space-y-2">
+            <li v-for="ip in device.ip_addresses" :key="ip.id" class="flex items-center justify-between gap-3 font-mono text-sm">
+              <span class="min-w-0">
+                {{ ip.ip }}
+                <span v-if="ip.notes || ip.subnet_name" class="font-sans text-slate-500">
+                  {{ ip.notes || ip.subnet_name }}
+                </span>
+              </span>
+              <button v-if="auth.can('remove_device_ip')" class="text-red-500 hover:underline" @click="removeIp(ip.id)">Remove</button>
+            </li>
+            <li v-if="!device.ip_addresses?.length" class="text-sm text-slate-500">None assigned</li>
+          </ul>
+        </div>
+        <div class="card">
+          <h2 class="font-semibold">Tags</h2>
+          <div class="mt-2 flex flex-wrap gap-2">
+            <span v-for="t in device.tags" :key="t.id" class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs" :style="{ backgroundColor: (t.color || '#6B7280') + '33' }">
+              {{ t.name }}
+              <button v-if="auth.can('assign_device_tag')" class="text-red-500 hover:underline" @click="removeTag(t.id)">×</button>
+            </span>
+            <span v-if="!device.tags?.length" class="text-sm text-slate-500">No tags</span>
+          </div>
+          <select v-if="auth.can('assign_device_tag')" class="input-field mt-3" @change="assignTag(Number(($event.target as HTMLSelectElement).value)); ($event.target as HTMLSelectElement).value = ''">
+            <option value="">Add tag…</option>
+            <option v-for="t in allTags.filter((t) => !device!.tags?.some((dt) => dt.id === t.id))" :key="t.id" :value="t.id">{{ t.name }}</option>
+          </select>
+        </div>
+        <CustomFieldValues
+          v-if="auth.can('view_custom_fields')"
+          class="lg:col-span-2"
+          entity-type="device"
+          :entity-id="device.id"
+          :values="device.custom_fields"
+          :can-edit="auth.can('edit_device')"
+          @saved="onCustomFieldsSaved"
+        />
+        <div class="card lg:col-span-2">
+          <h2 class="font-semibold">IP history</h2>
+          <p v-if="!history.length" class="mt-2 text-sm text-slate-500">No assignment history.</p>
+          <ul v-else class="mt-3 space-y-3">
+            <li v-for="(entry, i) in history" :key="i" class="flex gap-3 text-sm">
+              <span class="shrink-0 text-xs font-semibold uppercase" :class="entry.action === 'assigned' ? 'text-emerald-600' : 'text-red-500'">
+                {{ entry.action === "assigned" ? "Assigned" : "Removed" }}
+              </span>
+              <span class="font-mono">{{ entry.ip }}</span>
+              <span class="text-slate-500">· {{ entry.user_name }} · {{ formatTime(entry.timestamp) }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div v-if="showAssignIp" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAssignIp = false">
+        <form class="card w-full max-w-md space-y-3" @submit.prevent="assignIp">
+          <h2 class="text-lg font-semibold">Assign IP</h2>
+          <select v-if="!deviceSites.length" v-model="assignForm.site" class="input-field" @change="onSiteChange">
+            <option v-for="site in assignableSites" :key="site" :value="site">{{ site }}</option>
+          </select>
+          <select v-model="assignForm.subnet_id" class="input-field" @change="onSubnetChange">
+            <option v-for="s in subnetsForSite" :key="s.id" :value="s.id">{{ s.name }} ({{ s.cidr }})</option>
+          </select>
+          <select v-model="assignForm.ip_id" class="input-field" required>
+            <option v-for="ip in availableIps" :key="ip.id" :value="ip.id">{{ ip.ip }}</option>
+          </select>
+          <p v-if="assignForm.subnet_id && !availableIps.length" class="text-sm text-slate-500">No available IPs in this subnet</p>
+          <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+          <div class="flex gap-2">
+            <button type="submit" class="btn-primary" :disabled="!assignForm.ip_id">Assign</button>
+            <button type="button" class="btn-secondary" @click="showAssignIp = false">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </div>
+</template>

frontend/src/views/DevicesView.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { RouterLink } from "vue-router";
+import { api, type Device, type Subnet } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const devices = ref<Device[]>([]);
+const tagFilter = ref("");
+const tags = ref<string[]>([]);
+const subnets = ref<Subnet[]>([]);
+const availableIps = ref<{ id: number; ip: string }[]>([]);
+const loading = ref(true);
+
+const showAdd = ref(false);
+const showBulk = ref(false);
+const assignIpOnCreate = ref(false);
+const addForm = ref({ name: "", description: "", site: "", subnet_id: 0, ip_id: 0 });
+const bulkForm = ref({ names: "" });
+const err = ref("");
+
+const sites = computed(() =>
+  [...new Set(subnets.value.map((s) => s.site || "Unassigned"))].sort(),
+);
+
+const subnetsForSite = computed(() =>
+  subnets.value.filter((s) => (s.site || "Unassigned") === addForm.value.site),
+);
+
+const bySite = computed(() => {
+  const m: Record<string, Device[]> = {};
+  for (const d of devices.value) {
+    const site = d.ip_addresses?.[0]?.site || "Unassigned";
+    if (!m[site]) m[site] = [];
+    m[site].push(d);
+  }
+  return m;
+});
+
+const siteOrder = computed(() =>
+  Object.keys(bySite.value).sort((a, b) => {
+    if (a === "Unassigned") return -1;
+    if (b === "Unassigned") return 1;
+    return a.localeCompare(b);
+  }),
+);
+
+async function loadDevices() {
+  loading.value = true;
+  devices.value = await api.devices({ tag: tagFilter.value || undefined });
+  loading.value = false;
+}
+
+onMounted(async () => {
+  const [tagList, sn] = await Promise.all([api.tags(), api.subnets(false)]);
+  tags.value = tagList.map((t) => t.name);
+  subnets.value = sn;
+  if (sn.length) {
+    addForm.value.site = sn[0].site || "Unassigned";
+    addForm.value.subnet_id = sn[0].id;
+  }
+  await loadDevices();
+});
+
+async function loadAvailableIps(subnetId: number) {
+  if (!subnetId) {
+    availableIps.value = [];
+    addForm.value.ip_id = 0;
+    return;
+  }
+  availableIps.value = await api.availableIps(subnetId);
+  addForm.value.ip_id = availableIps.value[0]?.id ?? 0;
+}
+
+async function onAddSiteChange() {
+  const list = subnetsForSite.value;
+  addForm.value.subnet_id = list[0]?.id ?? 0;
+  await loadAvailableIps(addForm.value.subnet_id);
+}
+
+async function onAddSubnetChange() {
+  await loadAvailableIps(addForm.value.subnet_id);
+}
+
+async function onAssignIpToggle() {
+  if (assignIpOnCreate.value) {
+    if (!addForm.value.site) addForm.value.site = sites.value[0] ?? "";
+    await onAddSiteChange();
+  } else {
+    availableIps.value = [];
+    addForm.value.ip_id = 0;
+  }
+}
+
+async function openAddModal() {
+  err.value = "";
+  assignIpOnCreate.value = false;
+  availableIps.value = [];
+  const defaultSite = sites.value[0] ?? "";
+  const defaultSubnet = subnets.value.find((s) => (s.site || "Unassigned") === defaultSite) ?? subnets.value[0];
+  addForm.value = {
+    name: "",
+    description: "",
+    site: defaultSite,
+    subnet_id: defaultSubnet?.id ?? 0,
+    ip_id: 0,
+  };
+  showAdd.value = true;
+}
+
+async function filterTag(t: string) {
+  tagFilter.value = t;
+  await loadDevices();
+}
+
+async function createDevice() {
+  err.value = "";
+  try {
+    const created = await api.createDevice({
+      name: addForm.value.name,
+      description: addForm.value.description,
+    }) as { id: number };
+    if (assignIpOnCreate.value) {
+      if (!addForm.value.ip_id) {
+        err.value = "Select an IP address or uncheck “Assign an IP address”";
+        return;
+      }
+      if (auth.can("add_device_ip")) {
+        await api.assignIp(created.id, addForm.value.ip_id);
+      }
+    }
+    showAdd.value = false;
+    assignIpOnCreate.value = false;
+    availableIps.value = [];
+    addForm.value = {
+      name: "",
+      description: "",
+      site: sites.value[0] ?? "",
+      subnet_id: subnets.value[0]?.id ?? 0,
+      ip_id: 0,
+    };
+    await loadDevices();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function bulkCreate() {
+  err.value = "";
+  const names = bulkForm.value.names.split("\n").map((n) => n.trim()).filter(Boolean);
+  if (!names.length) {
+    err.value = "Enter at least one device name";
+    return;
+  }
+  try {
+    await api.bulkCreateDevices(names);
+    showBulk.value = false;
+    bulkForm.value.names = "";
+    await loadDevices();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+</script>
+<template>
+  <div>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-bold">Devices</h1>
+      <div v-if="auth.can('add_device')" class="flex gap-2">
+        <button class="btn-primary text-sm" @click="openAddModal">Add device</button>
+        <button class="btn-secondary text-sm" @click="showBulk = true; err = ''">Bulk add</button>
+      </div>
+    </div>
+    <div class="mt-4 flex flex-wrap gap-2">
+      <button class="rounded-full px-3 py-1 text-xs" :class="!tagFilter ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="filterTag('')">All</button>
+      <button v-for="t in tags" :key="t" class="rounded-full px-3 py-1 text-xs" :class="tagFilter === t ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="filterTag(t)">{{ t }}</button>
+    </div>
+    <div v-if="loading" class="mt-8 text-slate-500">Loading…</div>
+    <div v-else class="mt-6 space-y-6">
+      <section v-for="site in siteOrder" :key="site">
+        <h2 class="mb-2 font-semibold text-accent">{{ site }}</h2>
+        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          <RouterLink v-for="d in bySite[site]" :key="d.id" :to="`/devices/${d.id}`" class="card flex items-center gap-3 py-3 transition hover:border-accent/50">
+            <div class="min-w-0 flex-1">
+              <div class="truncate font-medium">{{ d.name }}</div>
+              <div class="truncate text-xs text-slate-500">{{ d.ip_addresses?.map((i) => i.ip).join(", ") || "No IPs" }}</div>
+            </div>
+          </RouterLink>
+        </div>
+      </section>
+    </div>
+
+    <div v-if="showAdd" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAdd = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="createDevice">
+        <h2 class="text-lg font-semibold">Add device</h2>
+        <input v-model="addForm.name" class="input-field" placeholder="Name" required />
+        <input v-model="addForm.description" class="input-field" placeholder="Description" />
+        <template v-if="auth.can('add_device_ip') && subnets.length">
+          <label class="flex items-center gap-2 text-sm">
+            <input v-model="assignIpOnCreate" type="checkbox" @change="onAssignIpToggle" />
+            Assign an IP address
+          </label>
+          <template v-if="assignIpOnCreate">
+            <select v-model="addForm.site" class="input-field" @change="onAddSiteChange">
+              <option v-for="site in sites" :key="site" :value="site">{{ site }}</option>
+            </select>
+            <select v-model="addForm.subnet_id" class="input-field" @change="onAddSubnetChange">
+              <option v-for="s in subnetsForSite" :key="s.id" :value="s.id">{{ s.name }} ({{ s.cidr }})</option>
+            </select>
+            <select v-model="addForm.ip_id" class="input-field" required>
+              <option v-for="ip in availableIps" :key="ip.id" :value="ip.id">{{ ip.ip }}</option>
+            </select>
+            <p v-if="addForm.subnet_id && !availableIps.length" class="text-xs text-slate-500">No available IPs in this subnet</p>
+          </template>
+        </template>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Create</button>
+          <button type="button" class="btn-secondary" @click="showAdd = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="showBulk" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showBulk = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="bulkCreate">
+        <h2 class="text-lg font-semibold">Bulk add devices</h2>
+        <textarea v-model="bulkForm.names" class="input-field h-32" placeholder="One device name per line" required />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Create</button>
+          <button type="button" class="btn-secondary" @click="showBulk = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/LoginView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+
+const email = ref("");
+const password = ref("");
+const err = ref("");
+const busy = ref(false);
+const auth = useAuthStore();
+const router = useRouter();
+const route = useRoute();
+
+async function submit() {
+  err.value = "";
+  busy.value = true;
+  try {
+    const r = await auth.login(email.value.trim(), password.value);
+    if (r.requires_setup) {
+      router.push("/setup-2fa");
+      return;
+    }
+    if (r.requires_2fa) {
+      router.push("/verify-2fa");
+      return;
+    }
+    await auth.fetchMe();
+    router.push((route.query.redirect as string) || "/");
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Login failed";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-surface p-6">
+    <div class="card w-full max-w-md p-8">
+      <h1 class="text-2xl font-semibold">Sign in</h1>
+      <p class="mt-1 text-sm text-slate-500">Access your IP address management workspace.</p>
+      <form class="mt-8 space-y-4" @submit.prevent="submit">
+        <div>
+          <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-500">Email</label>
+          <input v-model="email" type="email" class="input-field" required autocomplete="username" />
+        </div>
+        <div>
+          <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-500">Password</label>
+          <input v-model="password" type="password" class="input-field" required autocomplete="current-password" />
+        </div>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <button type="submit" class="btn-primary w-full" :disabled="busy">{{ busy ? "Signing in…" : "Sign in" }}</button>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/RackDetailView.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, RouterLink } from "vue-router";
+import { api, type Rack } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const route = useRoute();
+const auth = useAuthStore();
+const rack = ref<Rack | null>(null);
+const showAddDevice = ref(false);
+const showAddNonnet = ref(false);
+const addForm = ref({ device_id: 0, position_u: 1, side: "front" });
+const nonnetForm = ref({ nonnet_device_name: "", position_u: 1, side: "front" });
+const err = ref("");
+
+async function load() {
+  rack.value = await api.rack(Number(route.params.id));
+  const devs = rack.value?.site_devices || [];
+  if (devs.length) addForm.value.device_id = devs[0].id;
+}
+
+onMounted(load);
+
+const siteDevices = () => rack.value?.site_devices || [];
+
+const slotsForSide = (r: Rack, rackSide: string) => {
+  const h = r.height_u;
+  const map: Record<number, typeof r.devices> = {};
+  for (const d of r.devices || []) {
+    if (d.side === rackSide) (map[d.position_u] ??= []).push(d);
+  }
+  return Array.from({ length: h }, (_, i) => ({ u: h - i, devices: map[h - i] || [] }));
+};
+
+async function addDevice() {
+  err.value = "";
+  try {
+    await api.addRackDevice(Number(route.params.id), {
+      device_id: addForm.value.device_id,
+      position_u: addForm.value.position_u,
+      side: addForm.value.side,
+    });
+    showAddDevice.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function addNonnet() {
+  err.value = "";
+  try {
+    await api.addRackDevice(Number(route.params.id), {
+      nonnet_device_name: nonnetForm.value.nonnet_device_name,
+      position_u: nonnetForm.value.position_u,
+      side: nonnetForm.value.side,
+    });
+    showAddNonnet.value = false;
+    nonnetForm.value.nonnet_device_name = "";
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function removeDevice(rackDeviceId: number) {
+  if (!confirm("Remove this device from the rack?")) return;
+  await api.removeRackDevice(Number(route.params.id), rackDeviceId);
+  await load();
+}
+</script>
+<template>
+  <div v-if="rack">
+    <RouterLink to="/racks" class="text-sm text-accent hover:underline">← Racks</RouterLink>
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+      <div>
+        <h1 class="text-2xl font-bold">{{ rack.name }}</h1>
+        <p class="text-slate-500">{{ rack.site }} · {{ rack.height_u }}U</p>
+      </div>
+      <a v-if="auth.can('export_rack_csv')" :href="`/api/v2/racks/${rack.id}/export`" class="btn-secondary text-sm">Export CSV</a>
+    </div>
+    <div class="mt-4 flex flex-wrap gap-2">
+      <button v-if="auth.can('add_device_to_rack')" class="btn-secondary text-sm" @click="showAddDevice = true; err = ''">Add device</button>
+      <button v-if="auth.can('add_nonnet_device_to_rack')" class="btn-secondary text-sm" @click="showAddNonnet = true; err = ''">Add non-networked</button>
+    </div>
+
+    <div class="mt-6 grid gap-6 lg:grid-cols-2">
+      <div v-for="rackSide in ['front', 'back'] as const" :key="rackSide" class="card font-mono text-sm">
+        <h2 class="mb-3 border-b border-slate-200 pb-2 text-base font-semibold capitalize dark:border-slate-700">{{ rackSide }}</h2>
+        <div v-for="row in slotsForSide(rack, rackSide)" :key="row.u" class="flex border-b border-slate-200 py-2 dark:border-slate-700">
+          <span class="w-10 shrink-0 text-slate-500">U{{ row.u }}</span>
+          <span class="flex flex-1 flex-col gap-1">
+            <span v-for="d in row.devices" :key="d.id" class="flex items-center gap-2">
+              <RouterLink v-if="d.device_id" :to="`/devices/${d.device_id}`" class="text-accent hover:underline">{{ d.device_name }}</RouterLink>
+              <span v-else>{{ d.nonnet_device_name }}</span>
+              <button v-if="auth.can('remove_device_from_rack')" class="text-red-500 hover:underline" @click="removeDevice(d.id)">×</button>
+            </span>
+            <span v-if="!row.devices.length" class="text-slate-500">—</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showAddDevice" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAddDevice = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="addDevice">
+        <h2 class="text-lg font-semibold">Add device to rack</h2>
+        <select v-model="addForm.device_id" class="input-field" required>
+          <option v-for="d in siteDevices()" :key="d.id" :value="d.id">{{ d.name }}</option>
+        </select>
+        <input v-model.number="addForm.position_u" type="number" :min="1" :max="rack.height_u" class="input-field" placeholder="U position" required />
+        <select v-model="addForm.side" class="input-field">
+          <option value="front">Front</option>
+          <option value="back">Back</option>
+        </select>
+        <p class="text-xs text-slate-500">For multi-U devices, add each U separately.</p>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Add</button>
+          <button type="button" class="btn-secondary" @click="showAddDevice = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="showAddNonnet" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAddNonnet = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="addNonnet">
+        <h2 class="text-lg font-semibold">Add non-networked device</h2>
+        <input v-model="nonnetForm.nonnet_device_name" class="input-field" placeholder="Device name" required />
+        <input v-model.number="nonnetForm.position_u" type="number" :min="1" :max="rack.height_u" class="input-field" placeholder="U position" required />
+        <select v-model="nonnetForm.side" class="input-field">
+          <option value="front">Front</option>
+          <option value="back">Back</option>
+        </select>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Add</button>
+          <button type="button" class="btn-secondary" @click="showAddNonnet = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/RacksView.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { RouterLink } from "vue-router";
+import { api, type Rack } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const racks = ref<Rack[]>([]);
+const showAdd = ref(false);
+const showEdit = ref(false);
+const form = ref({ name: "", site: "", height_u: 42 });
+const editId = ref(0);
+const loading = ref(true);
+const err = ref("");
+
+async function load() {
+  loading.value = true;
+  err.value = "";
+  try {
+    racks.value = await api.racks();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to load racks";
+    racks.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+async function create() {
+  err.value = "";
+  try {
+    await api.createRack({ ...form.value, height_u: Number(form.value.height_u) });
+    showAdd.value = false;
+    form.value = { name: "", site: "", height_u: 42 };
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+function openEdit(r: Rack) {
+  editId.value = r.id;
+  form.value = { name: r.name, site: r.site, height_u: r.height_u };
+  showEdit.value = true;
+  err.value = "";
+}
+
+async function saveEdit() {
+  err.value = "";
+  try {
+    await api.updateRack(editId.value, { ...form.value, height_u: Number(form.value.height_u) });
+    showEdit.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function del(id: number) {
+  if (!confirm("Delete this rack?")) return;
+  await api.deleteRack(id);
+  await load();
+}
+</script>
+<template>
+  <div>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h1 class="text-2xl font-bold">Racks</h1>
+      <button v-if="auth.can('add_rack')" class="btn-primary text-sm" @click="showAdd = true; err = ''">Add rack</button>
+    </div>
+    <p v-if="loading" class="mt-6 text-slate-500">Loading…</p>
+    <p v-else-if="err && !racks.length" class="mt-6 text-red-500">{{ err }}</p>
+    <p v-else-if="!racks.length" class="mt-6 text-slate-500">No racks yet.</p>
+    <div v-else class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <div v-for="r in racks" :key="r.id" class="card">
+        <RouterLink :to="`/racks/${r.id}`" class="block transition hover:text-accent">
+          <div class="font-medium">{{ r.name }}</div>
+          <div class="text-sm text-slate-500">{{ r.site }} · {{ r.height_u }}U · {{ r.percent_full ?? 0 }}% full</div>
+        </RouterLink>
+        <div v-if="auth.can('add_rack') || auth.can('delete_rack')" class="mt-3 flex gap-2">
+          <button v-if="auth.can('add_rack')" class="text-sm text-accent hover:underline" @click="openEdit(r)">Edit</button>
+          <button v-if="auth.can('delete_rack')" class="text-sm text-red-500 hover:underline" @click="del(r.id)">Delete</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showAdd || showEdit" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showAdd = false; showEdit = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="showEdit ? saveEdit() : create()">
+        <h2 class="text-lg font-semibold">{{ showEdit ? "Edit rack" : "Add rack" }}</h2>
+        <input v-model="form.name" class="input-field" placeholder="Name" required />
+        <input v-model="form.site" class="input-field" placeholder="Site" required />
+        <input v-model.number="form.height_u" type="number" min="1" class="input-field" placeholder="Height (U)" required />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">{{ showEdit ? "Save" : "Create" }}</button>
+          <button type="button" class="btn-secondary" @click="showAdd = false; showEdit = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/Setup2faView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { api } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const step = ref<"generate" | "verify" | "done">("generate");
+const qrCode = ref("");
+const secret = ref("");
+const code = ref("");
+const backupCodes = ref<string[]>([]);
+const err = ref("");
+const router = useRouter();
+const auth = useAuthStore();
+
+onMounted(async () => {
+  try {
+    const r = await api.setup2fa("generate");
+    qrCode.value = r.qr_code || "";
+    secret.value = r.secret || "";
+    step.value = "verify";
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to start setup";
+  }
+});
+
+async function verify() {
+  err.value = "";
+  try {
+    const r = await api.setup2fa("verify", code.value.trim());
+    backupCodes.value = r.backup_codes || [];
+    step.value = "done";
+    await auth.fetchMe();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Invalid code";
+  }
+}
+
+function finish() {
+  router.push("/");
+}
+</script>
+<template>
+  <div class="flex min-h-screen items-center justify-center p-6">
+    <div class="card w-full max-w-md p-8">
+      <h1 class="text-xl font-semibold">Set up 2FA</h1>
+      <div v-if="step === 'verify'" class="mt-4 space-y-4">
+        <img v-if="qrCode" :src="`data:image/png;base64,${qrCode}`" alt="QR" class="mx-auto rounded-lg" />
+        <p class="break-all font-mono text-xs text-slate-500">{{ secret }}</p>
+        <input v-model="code" class="input-field text-center font-mono" placeholder="6-digit code" maxlength="6" />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <button class="btn-primary w-full" @click="verify">Verify & enable</button>
+      </div>
+      <div v-else-if="step === 'done'" class="mt-4 space-y-4">
+        <p class="text-sm text-slate-500">Save these backup codes securely:</p>
+        <ul class="rounded-lg bg-surface-overlay p-3 font-mono text-sm">
+          <li v-for="c in backupCodes" :key="c">{{ c }}</li>
+        </ul>
+        <button class="btn-primary w-full" @click="finish">Continue</button>
+      </div>
+      <p v-else-if="err" class="mt-4 text-red-500">{{ err }}</p>
+      <p v-else class="mt-4 text-slate-500">Loading…</p>
+    </div>
+  </div>
+</template>

frontend/src/views/SubnetDetailView.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute, RouterLink } from "vue-router";
+import { api, type Subnet } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+import IpHistoryModal from "@/components/IpHistoryModal.vue";
+import DhcpModal from "@/components/DhcpModal.vue";
+import CustomFieldValues from "@/components/CustomFieldValues.vue";
+
+const route = useRoute();
+const auth = useAuthStore();
+const subnet = ref<Subnet | null>(null);
+const historyIp = ref<string | null>(null);
+const showDhcp = ref(false);
+const loading = ref(true);
+const error = ref("");
+const notesErr = ref("");
+
+async function loadSubnet() {
+  loading.value = true;
+  error.value = "";
+  try {
+    subnet.value = await api.subnet(Number(route.params.id));
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load subnet";
+    subnet.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadSubnet);
+
+async function saveNotes(ipId: number, notes: string) {
+  notesErr.value = "";
+  try {
+    await api.patchIpNotes(ipId, notes);
+  } catch (e) {
+    notesErr.value = e instanceof Error ? e.message : "Failed to save notes";
+  }
+}
+
+function onCustomFieldsSaved(values: Record<string, unknown>) {
+  if (subnet.value) subnet.value.custom_fields = values;
+}
+
+function isDhcpRow(hostname?: string) {
+  return hostname === "DHCP";
+}
+</script>
+<template>
+  <div>
+    <RouterLink to="/subnets" class="text-sm text-accent hover:underline">← Subnets</RouterLink>
+    <p v-if="loading" class="mt-8 text-slate-500">Loading…</p>
+    <p v-else-if="error" class="mt-8 text-red-500">{{ error }}</p>
+    <template v-else-if="subnet">
+      <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h1 class="text-2xl font-bold">{{ subnet.name }}</h1>
+          <div class="mt-1 flex flex-wrap items-center gap-2 font-mono text-slate-500">
+            <span>{{ subnet.cidr }} · {{ subnet.site || "Unassigned" }}</span>
+            <span
+              v-if="subnet.vlan_id"
+              class="rounded-full bg-surface-overlay px-2 py-0.5 text-xs font-semibold font-sans text-slate-600 dark:text-slate-300"
+            >VLAN {{ subnet.vlan_id }}</span>
+          </div>
+          <p v-if="subnet.vlan_description" class="mt-1 text-sm text-slate-500">{{ subnet.vlan_description }}</p>
+          <p v-if="subnet.vlan_notes" class="text-sm text-slate-400">{{ subnet.vlan_notes }}</p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            v-if="auth.can('view_dhcp') || auth.can('configure_dhcp')"
+            type="button"
+            class="btn-secondary text-sm"
+            @click="showDhcp = true"
+          >
+            DHCP
+          </button>
+          <a v-if="auth.can('export_subnet_csv')" :href="`/api/v2/subnets/${subnet.id}/export`" class="btn-secondary text-sm">Export CSV</a>
+        </div>
+      </div>
+
+      <CustomFieldValues
+        v-if="auth.can('view_custom_fields')"
+        class="mt-6"
+        entity-type="subnet"
+        :entity-id="subnet.id"
+        :values="subnet.custom_fields"
+        :can-edit="auth.can('edit_subnet')"
+        @saved="onCustomFieldsSaved"
+      />
+
+      <div class="card mt-6 overflow-x-auto">
+        <p v-if="notesErr" class="mb-2 text-sm text-red-500">{{ notesErr }}</p>
+        <table class="w-full text-left text-sm">
+          <thead>
+            <tr class="border-b border-slate-200 dark:border-slate-700">
+              <th class="p-2 font-medium">IP</th>
+              <th class="p-2 font-medium">Hostname</th>
+              <th class="p-2 font-medium">Notes</th>
+              <th class="p-2"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="ip in subnet.ip_addresses"
+              :key="ip.id"
+              class="border-b border-slate-100 dark:border-slate-800"
+              :class="isDhcpRow(ip.hostname) ? 'bg-amber-50/80 italic dark:bg-amber-950/20' : ''"
+            >
+              <td class="p-2 font-mono">{{ ip.ip }}</td>
+              <td class="p-2" :class="isDhcpRow(ip.hostname) ? 'text-amber-700 dark:text-amber-400' : ''">
+                <RouterLink v-if="ip.device_id" :to="`/devices/${ip.device_id}`" class="text-accent hover:underline not-italic">{{ ip.device_name || ip.hostname }}</RouterLink>
+                <span v-else>{{ ip.hostname || "—" }}</span>
+              </td>
+              <td class="p-2">
+                <input
+                  v-if="auth.can('edit_subnet')"
+                  :value="ip.notes || ''"
+                  class="input-field py-1 text-xs"
+                  @change="saveNotes(ip.id, ($event.target as HTMLInputElement).value)"
+                />
+                <span v-else>{{ ip.notes || "—" }}</span>
+              </td>
+              <td class="p-2">
+                <button type="button" class="text-xs text-accent hover:underline" @click="historyIp = ip.ip">History</button>
+              </td>
+            </tr>
+            <tr v-if="!subnet.ip_addresses?.length">
+              <td colspan="4" class="p-4 text-center text-slate-500">No IP addresses in this subnet.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <IpHistoryModal :ip="historyIp" @close="historyIp = null" />
+      <DhcpModal :open="showDhcp" :subnet-id="subnet.id" @close="showDhcp = false" @saved="loadSubnet" />
+    </template>
+  </div>
+</template>

frontend/src/views/SubnetsBrowseView.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { RouterLink } from "vue-router";
+import { api, type Subnet } from "@/api";
+
+const subnets = ref<Subnet[]>([]);
+const loading = ref(true);
+const error = ref("");
+
+const bySite = computed(() => {
+  const m: Record<string, Subnet[]> = {};
+  for (const s of subnets.value) {
+    const site = s.site || "Unassigned";
+    if (!m[site]) m[site] = [];
+    m[site].push(s);
+  }
+  return m;
+});
+
+const siteOrder = computed(() =>
+  Object.keys(bySite.value).sort((a, b) => {
+    if (a === "Unassigned") return -1;
+    if (b === "Unassigned") return 1;
+    return a.localeCompare(b);
+  }),
+);
+
+onMounted(async () => {
+  try {
+    subnets.value = await api.subnets(true);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load subnets";
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Subnets</h1>
+    <p class="mt-1 text-slate-500">Browse subnets grouped by site</p>
+    <p v-if="loading" class="mt-8 text-slate-500">Loading…</p>
+    <p v-else-if="error" class="mt-8 text-red-500">{{ error }}</p>
+    <p v-else-if="!subnets.length" class="mt-8 text-slate-500">No subnets yet.</p>
+    <div v-else class="mt-6 space-y-8">
+      <section v-for="site in siteOrder" :key="site">
+        <h2 class="mb-3 text-lg font-semibold text-accent">{{ site }}</h2>
+        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <RouterLink
+            v-for="s in bySite[site]"
+            :key="s.id"
+            :to="`/subnets/${s.id}`"
+            class="card block transition hover:border-accent/50"
+          >
+            <div class="font-medium">{{ s.name }}</div>
+            <div class="mt-1 flex flex-wrap items-center gap-2">
+              <span class="font-mono text-sm text-slate-500">{{ s.cidr }}</span>
+              <span
+                v-if="s.vlan_id"
+                class="rounded-full bg-surface-overlay px-2 py-0.5 text-xs font-semibold text-slate-600 dark:text-slate-300"
+              >VLAN {{ s.vlan_id }}</span>
+            </div>
+            <div class="mt-3">
+              <div class="h-2 overflow-hidden rounded-full bg-surface-overlay">
+                <div
+                  class="h-full rounded-full transition-all"
+                  :class="(s.utilization ?? 0) >= 90 ? 'bg-red-500' : 'bg-accent'"
+                  :style="{ width: `${s.utilization ?? 0}%` }"
+                />
+              </div>
+              <div class="mt-1 text-xs text-slate-500">{{ s.utilization ?? 0 }}% used</div>
+            </div>
+          </RouterLink>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>

frontend/src/views/SubnetsView.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { RouterLink } from "vue-router";
+import { api, type Subnet } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const subnets = ref<Subnet[]>([]);
+const form = ref({ name: "", cidr: "", site: "", vlan_id: "" as string | number, vlan_description: "", vlan_notes: "" });
+const editForm = ref({ id: 0, name: "", cidr: "", site: "", vlan_id: "" as string | number, vlan_description: "", vlan_notes: "" });
+const showEdit = ref(false);
+const err = ref("");
+
+onMounted(async () => { subnets.value = await api.subnets(); });
+
+async function reload() {
+  subnets.value = await api.subnets();
+}
+
+async function add() {
+  err.value = "";
+  try {
+    const body: Partial<Subnet> = {
+      name: form.value.name,
+      cidr: form.value.cidr,
+      site: form.value.site,
+      vlan_description: form.value.vlan_description || undefined,
+      vlan_notes: form.value.vlan_notes || undefined,
+    };
+    if (form.value.vlan_id) body.vlan_id = Number(form.value.vlan_id);
+    await api.createSubnet(body);
+    form.value = { name: "", cidr: "", site: "", vlan_id: "", vlan_description: "", vlan_notes: "" };
+    await reload();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+function openEdit(s: Subnet) {
+  editForm.value = {
+    id: s.id,
+    name: s.name,
+    cidr: s.cidr,
+    site: s.site || "",
+    vlan_id: s.vlan_id ?? "",
+    vlan_description: s.vlan_description || "",
+    vlan_notes: s.vlan_notes || "",
+  };
+  showEdit.value = true;
+  err.value = "";
+}
+
+async function saveEdit() {
+  err.value = "";
+  try {
+    const body: Partial<Subnet> = {
+      name: editForm.value.name,
+      cidr: editForm.value.cidr,
+      site: editForm.value.site,
+      vlan_description: editForm.value.vlan_description || null,
+      vlan_notes: editForm.value.vlan_notes || null,
+      vlan_id: editForm.value.vlan_id ? Number(editForm.value.vlan_id) : null,
+    };
+    await api.updateSubnet(editForm.value.id, body);
+    showEdit.value = false;
+    await reload();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function del(id: number) {
+  if (!confirm("Delete subnet and all IPs?")) return;
+  await api.deleteSubnet(id);
+  await reload();
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Subnet management</h1>
+    <form v-if="auth.can('add_subnet')" class="card mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3" @submit.prevent="add">
+      <input v-model="form.name" class="input-field" placeholder="Name" required />
+      <input v-model="form.cidr" class="input-field font-mono" placeholder="192.168.1.0/24" required />
+      <input v-model="form.site" class="input-field" placeholder="Site" />
+      <input v-model="form.vlan_id" type="number" class="input-field" placeholder="VLAN ID" min="1" max="4094" />
+      <input v-model="form.vlan_description" class="input-field" placeholder="VLAN description" />
+      <input v-model="form.vlan_notes" class="input-field" placeholder="VLAN notes" />
+      <button class="btn-primary sm:col-span-2 lg:col-span-3 sm:max-w-xs">Add subnet</button>
+      <p v-if="err" class="text-sm text-red-500 sm:col-span-3">{{ err }}</p>
+    </form>
+    <ul class="mt-8 space-y-2">
+      <li
+        class="hidden px-4 text-xs font-medium text-slate-500 sm:grid sm:grid-cols-[minmax(0,1.5fr)_minmax(9rem,1fr)_5.5rem_auto] sm:items-center sm:gap-4"
+      >
+        <span>Name</span>
+        <span>CIDR</span>
+        <span>VLAN</span>
+        <span class="text-right">Actions</span>
+      </li>
+      <li
+        v-for="s in subnets"
+        :key="s.id"
+        class="card grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1.5fr)_minmax(9rem,1fr)_5.5rem_auto] sm:items-center sm:gap-4"
+      >
+        <RouterLink :to="`/subnets/${s.id}`" class="font-medium text-accent hover:underline">{{ s.name }}</RouterLink>
+        <span class="font-mono text-sm text-slate-500">{{ s.cidr }}</span>
+        <span class="text-xs">
+          <span v-if="s.vlan_id" class="inline-block rounded-full bg-surface-overlay px-2 py-0.5">VLAN {{ s.vlan_id }}</span>
+          <span v-else class="text-slate-500">—</span>
+        </span>
+        <div class="flex gap-2 sm:justify-end">
+          <button v-if="auth.can('edit_subnet')" class="text-sm text-accent hover:underline" @click="openEdit(s)">Edit</button>
+          <button v-if="auth.can('delete_subnet')" class="text-sm text-red-500" @click="del(s.id)">Delete</button>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="showEdit" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showEdit = false">
+      <form class="card w-full max-w-lg space-y-3" @submit.prevent="saveEdit">
+        <h2 class="text-lg font-semibold">Edit subnet</h2>
+        <input v-model="editForm.name" class="input-field" placeholder="Name" required />
+        <input v-model="editForm.cidr" class="input-field font-mono" placeholder="CIDR" required />
+        <input v-model="editForm.site" class="input-field" placeholder="Site" />
+        <input v-model="editForm.vlan_id" type="number" class="input-field" placeholder="VLAN ID" min="1" max="4094" />
+        <input v-model="editForm.vlan_description" class="input-field" placeholder="VLAN description" />
+        <input v-model="editForm.vlan_notes" class="input-field" placeholder="VLAN notes" />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Save</button>
+          <button type="button" class="btn-secondary" @click="showEdit = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/TagsView.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { api, type Tag } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const tags = ref<Tag[]>([]);
+const form = ref({ name: "", color: "#06b6d4", description: "" });
+const editForm = ref({ id: 0, name: "", color: "#06b6d4", description: "" });
+const showEdit = ref(false);
+const loading = ref(true);
+const err = ref("");
+
+async function load() {
+  loading.value = true;
+  err.value = "";
+  try {
+    tags.value = await api.tags();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed to load tags";
+    tags.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+async function create() {
+  err.value = "";
+  try {
+    await api.createTag(form.value);
+    form.value = { name: "", color: "#06b6d4", description: "" };
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function del(id: number) {
+  if (!confirm("Delete tag?")) return;
+  err.value = "";
+  try {
+    await api.deleteTag(id);
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+function openEdit(t: Tag) {
+  editForm.value = { id: t.id, name: t.name, color: t.color || "#06b6d4", description: t.description || "" };
+  showEdit.value = true;
+  err.value = "";
+}
+
+async function saveEdit() {
+  err.value = "";
+  try {
+    await api.updateTag(editForm.value.id, {
+      name: editForm.value.name,
+      color: editForm.value.color,
+      description: editForm.value.description,
+    });
+    showEdit.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Tags</h1>
+    <form v-if="auth.can('add_tag')" class="card mt-6 flex flex-wrap gap-3" @submit.prevent="create">
+      <input v-model="form.name" class="input-field max-w-xs" placeholder="Name" required />
+      <input v-model="form.color" type="color" class="h-10 w-14 rounded border-0" />
+      <input v-model="form.description" class="input-field max-w-xs" placeholder="Description" />
+      <button class="btn-primary">Add tag</button>
+    </form>
+    <p v-if="loading" class="mt-6 text-slate-500">Loading…</p>
+    <p v-else-if="err && !tags.length" class="mt-6 text-red-500">{{ err }}</p>
+    <p v-else-if="!tags.length" class="mt-6 text-slate-500">No tags yet.</p>
+    <ul v-else class="mt-6 space-y-2">
+      <li v-for="t in tags" :key="t.id" class="card flex items-center justify-between">
+        <span><span class="inline-block h-3 w-3 rounded-full mr-2" :style="{ backgroundColor: t.color }" />{{ t.name }}</span>
+        <div v-if="auth.can('edit_tag') || auth.can('delete_tag')" class="flex gap-2">
+          <button v-if="auth.can('edit_tag')" class="text-sm text-accent hover:underline" @click="openEdit(t)">Edit</button>
+          <button v-if="auth.can('delete_tag')" class="text-sm text-red-500" @click="del(t.id)">Delete</button>
+        </div>
+      </li>
+    </ul>
+    <p v-if="err && tags.length" class="mt-4 text-sm text-red-500">{{ err }}</p>
+
+    <div v-if="showEdit" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showEdit = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="saveEdit">
+        <h2 class="text-lg font-semibold">Edit tag</h2>
+        <input v-model="editForm.name" class="input-field" placeholder="Name" required />
+        <input v-model="editForm.color" type="color" class="h-10 w-14 rounded border-0" />
+        <input v-model="editForm.description" class="input-field" placeholder="Description" />
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Save</button>
+          <button type="button" class="btn-secondary" @click="showEdit = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/views/UsersView.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { api, type UserRow, type RoleRow } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const tab = ref<"users" | "roles">("users");
+const users = ref<UserRow[]>([]);
+const roles = ref<RoleRow[]>([]);
+const permissions = ref<{ id: number; name: string; category?: string }[]>([]);
+const err = ref("");
+
+const showUserForm = ref(false);
+const editUserId = ref<number | null>(null);
+const userForm = ref({ name: "", email: "", password: "", role_id: 0 });
+
+const showRoleForm = ref(false);
+const editRoleId = ref<number | null>(null);
+const roleForm = ref({ name: "", description: "", require_2fa: false, permission_ids: [] as number[] });
+
+const showApiKey = ref("");
+const permByCategory = computed(() => {
+  const m: Record<string, typeof permissions.value> = {};
+  for (const p of permissions.value) {
+    const cat = p.category || "Other";
+    (m[cat] ??= []).push(p);
+  }
+  return m;
+});
+
+async function load() {
+  [users.value, roles.value] = await Promise.all([api.users(), api.roles()]);
+  if (auth.can("manage_roles")) {
+    permissions.value = await api.permissions().catch(() => []);
+  }
+}
+
+onMounted(load);
+
+function openAddUser() {
+  editUserId.value = null;
+  userForm.value = { name: "", email: "", password: "", role_id: roles.value[0]?.id ?? 0 };
+  showUserForm.value = true;
+  err.value = "";
+}
+
+function openEditUser(u: UserRow) {
+  editUserId.value = u.id;
+  userForm.value = { name: u.name, email: u.email, password: "", role_id: u.role_id ?? 0 };
+  showUserForm.value = true;
+  err.value = "";
+}
+
+async function saveUser() {
+  err.value = "";
+  try {
+    if (editUserId.value) {
+      const body: Record<string, unknown> = { name: userForm.value.name, email: userForm.value.email, role_id: userForm.value.role_id };
+      if (userForm.value.password) body.password = userForm.value.password;
+      await api.updateUser(editUserId.value, body);
+    } else {
+      await api.createUser(userForm.value);
+    }
+    showUserForm.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function delUser(id: number) {
+  if (!confirm("Delete this user?")) return;
+  await api.deleteUser(id);
+  await load();
+}
+
+async function regenKey(id: number) {
+  if (!confirm("Regenerate API key? The old key will stop working.")) return;
+  const r = await api.regenerateApiKey(id);
+  showApiKey.value = r.api_key;
+}
+
+function openAddRole() {
+  editRoleId.value = null;
+  roleForm.value = { name: "", description: "", require_2fa: false, permission_ids: [] };
+  showRoleForm.value = true;
+  err.value = "";
+}
+
+function openEditRole(r: RoleRow) {
+  editRoleId.value = r.id;
+  roleForm.value = {
+    name: r.name,
+    description: r.description || "",
+    require_2fa: !!r.require_2fa,
+    permission_ids: r.permissions?.map((p) => p.id) ?? [],
+  };
+  showRoleForm.value = true;
+  err.value = "";
+}
+
+function togglePerm(id: number) {
+  const idx = roleForm.value.permission_ids.indexOf(id);
+  if (idx >= 0) roleForm.value.permission_ids.splice(idx, 1);
+  else roleForm.value.permission_ids.push(id);
+}
+
+async function saveRole() {
+  err.value = "";
+  try {
+    if (editRoleId.value) {
+      await api.updateRole(editRoleId.value, roleForm.value);
+    } else {
+      await api.createRole(roleForm.value);
+    }
+    showRoleForm.value = false;
+    await load();
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  }
+}
+
+async function delRole(id: number) {
+  if (!confirm("Delete this role?")) return;
+  await api.deleteRole(id);
+  await load();
+}
+</script>
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Users & roles</h1>
+    <div class="mt-4 flex gap-2">
+      <button class="rounded-lg px-3 py-1 text-sm" :class="tab === 'users' ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="tab = 'users'">Users</button>
+      <button class="rounded-lg px-3 py-1 text-sm" :class="tab === 'roles' ? 'bg-accent text-slate-950' : 'bg-surface-overlay'" @click="tab = 'roles'">Roles</button>
+    </div>
+
+    <section v-if="tab === 'users'" class="mt-8">
+      <div class="mb-4 flex items-center justify-between">
+        <h2 class="font-semibold text-accent">Users</h2>
+        <button v-if="auth.can('manage_users')" class="btn-primary text-sm" @click="openAddUser">Add user</button>
+      </div>
+      <ul class="space-y-2">
+        <li
+          class="hidden px-4 text-xs font-medium text-slate-500 sm:grid sm:grid-cols-[minmax(0,1fr)_8rem_13rem] sm:items-center sm:gap-4"
+        >
+          <span>User</span>
+          <span>Role</span>
+          <span v-if="auth.can('manage_users')" class="text-right">Actions</span>
+        </li>
+        <li
+          v-for="u in users"
+          :key="u.id"
+          class="card grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_8rem_13rem] sm:items-center sm:gap-4"
+        >
+          <span class="min-w-0">{{ u.name }} <span class="text-slate-500">&lt;{{ u.email }}&gt;</span></span>
+          <span class="text-sm text-slate-500">{{ u.role_name }}</span>
+          <div v-if="auth.can('manage_users')" class="flex gap-2 sm:justify-end">
+            <button class="text-sm text-accent hover:underline" @click="openEditUser(u)">Edit</button>
+            <button class="text-sm text-accent hover:underline" @click="regenKey(u.id)">API key</button>
+            <button class="text-sm text-red-500 hover:underline" @click="delUser(u.id)">Delete</button>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="tab === 'roles'" class="mt-8">
+      <div class="mb-4 flex items-center justify-between">
+        <h2 class="font-semibold text-accent">Roles</h2>
+        <button v-if="auth.can('manage_roles')" class="btn-primary text-sm" @click="openAddRole">Add role</button>
+      </div>
+      <ul class="space-y-2">
+        <li v-for="r in roles" :key="r.id" class="card">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <div class="font-medium">{{ r.name }} <span v-if="r.require_2fa" class="text-xs text-slate-500">(2FA required)</span></div>
+              <div class="text-sm text-slate-500">{{ r.description }}</div>
+            </div>
+            <div v-if="auth.can('manage_roles')" class="flex gap-2">
+              <button class="text-sm text-accent hover:underline" @click="openEditRole(r)">Edit</button>
+              <button class="text-sm text-red-500 hover:underline" @click="delRole(r.id)">Delete</button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <div v-if="showUserForm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showUserForm = false">
+      <form class="card w-full max-w-md space-y-3" @submit.prevent="saveUser">
+        <h2 class="text-lg font-semibold">{{ editUserId ? "Edit user" : "Add user" }}</h2>
+        <input v-model="userForm.name" class="input-field" placeholder="Name" required />
+        <input v-model="userForm.email" type="email" class="input-field" placeholder="Email" required />
+        <input v-model="userForm.password" type="password" class="input-field" :placeholder="editUserId ? 'New password (optional)' : 'Password'" :required="!editUserId" />
+        <select v-model="userForm.role_id" class="input-field">
+          <option v-for="r in roles" :key="r.id" :value="r.id">{{ r.name }}</option>
+        </select>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Save</button>
+          <button type="button" class="btn-secondary" @click="showUserForm = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="showRoleForm" class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[10vh]" @click.self="showRoleForm = false">
+      <form class="card w-full max-w-lg space-y-3" @submit.prevent="saveRole">
+        <h2 class="text-lg font-semibold">{{ editRoleId ? "Edit role" : "Add role" }}</h2>
+        <input v-model="roleForm.name" class="input-field" placeholder="Name" required />
+        <input v-model="roleForm.description" class="input-field" placeholder="Description" />
+        <label class="flex items-center gap-2 text-sm">
+          <input v-model="roleForm.require_2fa" type="checkbox" />
+          Require 2FA
+        </label>
+        <div v-if="permissions.length" class="max-h-48 overflow-y-auto rounded-lg border border-slate-200 p-3 dark:border-slate-700">
+          <div v-for="(perms, cat) in permByCategory" :key="cat" class="mb-3">
+            <div class="text-xs font-semibold uppercase text-slate-500">{{ cat }}</div>
+            <label v-for="p in perms" :key="p.id" class="mt-1 flex items-center gap-2 text-sm">
+              <input type="checkbox" :checked="roleForm.permission_ids.includes(p.id)" @change="togglePerm(p.id)" />
+              {{ p.name }}
+            </label>
+          </div>
+        </div>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <div class="flex gap-2">
+          <button type="submit" class="btn-primary">Save</button>
+          <button type="button" class="btn-secondary" @click="showRoleForm = false">Cancel</button>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="showApiKey" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showApiKey = ''">
+      <div class="card w-full max-w-md space-y-3">
+        <h2 class="text-lg font-semibold">New API key</h2>
+        <p class="text-sm text-slate-500">Copy this key now — it won't be shown again.</p>
+        <code class="block break-all rounded-lg bg-surface-overlay p-3 text-sm">{{ showApiKey }}</code>
+        <button class="btn-primary" @click="showApiKey = ''">Done</button>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/views/Verify2faView.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { api } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const code = ref("");
+const useBackup = ref(false);
+const err = ref("");
+const busy = ref(false);
+const router = useRouter();
+const auth = useAuthStore();
+
+async function submit() {
+  err.value = "";
+  busy.value = true;
+  try {
+    await api.verify2fa(code.value.trim(), useBackup.value);
+    await auth.fetchMe();
+    router.push("/");
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Verification failed";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <div class="flex min-h-screen items-center justify-center p-6">
+    <div class="card w-full max-w-md p-8">
+      <h1 class="text-xl font-semibold">Two-factor authentication</h1>
+      <form class="mt-6 space-y-4" @submit.prevent="submit">
+        <input v-model="code" class="input-field text-center font-mono text-lg tracking-widest" :placeholder="useBackup ? 'Backup code' : '000000'" />
+        <label class="flex items-center gap-2 text-sm">
+          <input v-model="useBackup" type="checkbox" /> Use backup code
+        </label>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+        <button class="btn-primary w-full" :disabled="busy">Verify</button>
+      </form>
+    </div>
+  </div>
+</template>

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: "media",
+  theme: {
+    extend: {
+      colors: {
+        surface: {
+          DEFAULT: "rgb(var(--surface) / <alpha-value>)",
+          raised: "rgb(var(--surface-raised) / <alpha-value>)",
+          overlay: "rgb(var(--surface-overlay) / <alpha-value>)",
+        },
+        accent: {
+          DEFAULT: "rgb(var(--accent) / <alpha-value>)",
+          muted: "rgb(var(--accent-muted) / <alpha-value>)",
+        },
+      },
+      fontFamily: {
+        sans: ["IBM Plex Sans", "system-ui", "sans-serif"],
+        mono: ["IBM Plex Mono", "ui-monospace", "monospace"],
+      },
+    },
+  },
+  plugins: [],
+};

frontend/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": { "@/*": ["./src/*"] },
+    "baseUrl": "."
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

frontend/vite.config.ts

@@ -0,0 +1,56 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig, type Plugin } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const staticRoot = path.resolve(__dirname, "../static");
+
+function servePwaFromStatic(): Plugin {
+  return {
+    name: "serve-pwa-from-static",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url?.split("?")[0] ?? "";
+        if (url !== "/manifest.webmanifest" && url !== "/sw.js") {
+          next();
+          return;
+        }
+        const name = url.slice(1);
+        const filePath = path.join(staticRoot, name);
+        if (!fs.existsSync(filePath)) {
+          next();
+          return;
+        }
+        const body = fs.readFileSync(filePath);
+        const type = name.endsWith(".webmanifest")
+          ? "application/manifest+json"
+          : "application/javascript";
+        res.setHeader("Content-Type", type);
+        res.end(body);
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [vue(), servePwaFromStatic()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
+  build: {
+    outDir: "../static/dist",
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://127.0.0.1:5000",
+      "/ws": {
+        target: "ws://127.0.0.1:5000",
+        ws: true,
+      },
+    },
+  },
+});

requirements.txt

@@ -2,3 +2,5 @@ Flask
 mysql-connector-python
 dotenv
 gunicorn
+pyotp
+qrcode[pil]

run.sh

@@ -1,7 +1,6 @@
 #!/bin/bash
-
+set -e
-echo "Generating CSS..."
+echo "Building frontend..."
-./tailwindcss -i ./static/css/input.css -o ./static/css/output.css --content "./templates/*.html,./static/js/*.js" --minify
+(cd frontend && npm ci && npm run build)
-
 echo "Starting app..."
 python app.py

static/css/device_types.css

@@ -1,94 +0,0 @@
-/* Icon search suggestions styling */
-.icon-suggestions {
-    max-height: 240px;
-    overflow-y: auto;
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.icon-suggestion-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    transition: background-color 0.15s ease-in-out;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.icon-suggestion-item:last-child {
-    border-bottom: none;
-}
-
-.icon-suggestion-item:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.dark .icon-suggestion-item {
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-}
-
-.dark .icon-suggestion-item:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.icon-suggestion-item i {
-    width: 20px;
-    text-align: center;
-    font-size: 1.125rem;
-    color: #4b5563;
-}
-
-.dark .icon-suggestion-item i {
-    color: #d1d5db;
-}
-
-.icon-suggestion-item span {
-    font-family: 'Courier New', monospace;
-    font-size: 0.875rem;
-    color: #374151;
-}
-
-.dark .icon-suggestion-item span {
-    color: #e5e7eb;
-}
-
-/* Icon preview styling */
-.icon-preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 2rem;
-}
-
-/* Scrollbar styling for suggestions */
-.icon-suggestions::-webkit-scrollbar {
-    width: 8px;
-}
-
-.icon-suggestions::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 4px;
-}
-
-.dark .icon-suggestions::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.icon-suggestions::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-}
-
-.dark .icon-suggestions::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.icon-suggestions::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
-}
-
-.dark .icon-suggestions::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
-}
-

static/css/devices.css

@@ -1,16 +0,0 @@
-h2 {
-    cursor: pointer;
-}
-form:not(.mb-6), .mt-4 {
-    display: none;
-}
-.allocated-ips {
-    display: block;
-    margin-top: 1rem;
-}
-.button-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    justify-items: center;
-}

static/css/input.css

@@ -1 +0,0 @@
-@import "tailwindcss"

static/js/add_subnet.js

@@ -1,15 +0,0 @@
-function validateSubnetForm() {
-    const cidrInput = document.getElementById('cidr-input');
-    const errorSpan = document.getElementById('cidr-error');
-    const cidrPattern = /^(?:\d{1,3}\.){3}\d{1,3}\/([0-9]|[1-2][0-9]|3[0-2])$/;
-    if (!cidrPattern.test(cidrInput.value.trim())) {
-        errorSpan.textContent = 'Please enter a valid CIDR (e.g., 192.168.1.0/24)';
-        errorSpan.classList.remove('hidden');
-        cidrInput.classList.add('border-red-500');
-        return false;
-    }
-    errorSpan.textContent = '';
-    errorSpan.classList.add('hidden');
-    cidrInput.classList.remove('border-red-500');
-    return true;
-}

static/js/device.js

@@ -1,61 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const siteSelect = document.getElementById('site-select');
-    const subnetSelect = document.getElementById('subnet-select');
-    const ipSelect = document.getElementById('ip-select');
-    const renameBtn = document.querySelector('.rename-btn');
-    const saveBtn = document.querySelector('.save-btn');
-    const cancelBtn = document.querySelector('.cancel-btn');
-    const nameInput = document.querySelector('input[name="new_name"]');
-    const h1 = document.querySelector('h1');
-    siteSelect.addEventListener('change', function() {
-        const selectedSite = this.value;
-        let firstSubnet = null;
-        Array.from(subnetSelect.options).forEach(option => {
-            if (!option.value) return;
-            if (option.getAttribute('data-site') === selectedSite) {
-                option.style.display = '';
-                if (!firstSubnet) firstSubnet = option.value;
-            } else {
-                option.style.display = 'none';
-            }
-        });
-        subnetSelect.value = firstSubnet || '';
-        const event = new Event('change', { bubbles: true });
-        subnetSelect.dispatchEvent(event);
-    });
-    subnetSelect.addEventListener('change', function() {
-        const subnetId = this.value;
-        if (!subnetId) {
-            ipSelect.innerHTML = '<option value="" disabled selected>Select IP</option>';
-            return;
-        }
-        fetch(`/get_available_ips?subnet_id=${subnetId}`)
-            .then(response => response.json())
-            .then(data => {
-                ipSelect.innerHTML = '<option value="" disabled selected>Select IP</option>';
-                data.available_ips.forEach(ip => {
-                    const option = document.createElement('option');
-                    option.value = ip.id;
-                    option.textContent = ip.ip;
-                    ipSelect.appendChild(option);
-                });
-            });
-    });
-    if (renameBtn && saveBtn && cancelBtn && nameInput && h1) {
-        renameBtn.addEventListener('click', function(e) {
-            e.preventDefault();
-            nameInput.classList.remove('hidden');
-            saveBtn.classList.remove('hidden');
-            cancelBtn.classList.remove('hidden');
-            h1.classList.add('hidden');
-            nameInput.focus();
-        });
-        cancelBtn.addEventListener('click', function(e) {
-            e.preventDefault();
-            nameInput.classList.add('hidden');
-            saveBtn.classList.add('hidden');
-            cancelBtn.classList.add('hidden');
-            h1.classList.remove('hidden');
-        });
-    }
-});

static/js/device_types.js

@@ -1,157 +0,0 @@
-// Font Awesome icon search functionality
-// Common Font Awesome icons for device types
-const fontAwesomeIcons = [
-    // Network & Server
-    'fa-server', 'fa-router', 'fa-network-wired', 'fa-switch', 'fa-hub', 'fa-ethernet',
-    'fa-satellite-dish', 'fa-broadcast-tower', 'fa-tower-cell', 'fa-wifi', 'fa-network',
-    'fa-project-diagram', 'fa-sitemap', 'fa-diagram-project', 'fa-cloud',
-    
-    // Security
-    'fa-shield-halved', 'fa-shield', 'fa-shield-alt', 'fa-firewall', 'fa-lock', 'fa-unlock',
-    'fa-key', 'fa-fingerprint', 'fa-user-shield', 'fa-user-lock',
-    
-    // Hardware
-    'fa-print', 'fa-boxes-stacked', 'fa-database', 'fa-hard-drive', 'fa-memory', 'fa-microchip',
-    'fa-cpu', 'fa-usb', 'fa-fan', 'fa-battery-full', 'fa-power-off', 'fa-plug', 'fa-bolt',
-    'fa-lightbulb', 'fa-monitor', 'fa-display', 'fa-tv', 'fa-camera', 'fa-video',
-    
-    // Computing
-    'fa-laptop', 'fa-desktop', 'fa-tablet', 'fa-mobile-alt', 'fa-phone', 'fa-keyboard',
-    'fa-mouse', 'fa-microphone', 'fa-headphones', 'fa-speaker',
-    
-    // Storage & Files
-    'fa-box', 'fa-package', 'fa-archive', 'fa-folder', 'fa-file', 'fa-hdd', 'fa-ssd',
-    'fa-floppy-disk', 'fa-disk', 'fa-save', 'fa-folder-open', 'fa-folder-plus',
-    
-    // Data & Analytics
-    'fa-chart-line', 'fa-chart-bar', 'fa-chart-pie', 'fa-graph', 'fa-analytics',
-    'fa-database', 'fa-file-database', 'fa-file-chart-line', 'fa-file-chart-pie',
-    
-    // Location & Infrastructure
-    'fa-globe', 'fa-earth', 'fa-map', 'fa-location', 'fa-map-marker', 'fa-building',
-    'fa-warehouse', 'fa-home', 'fa-office', 'fa-industry',
-    
-    // Tools & Utilities
-    'fa-robot', 'fa-cog', 'fa-gear', 'fa-wrench', 'fa-tools', 'fa-question',
-    'fa-code', 'fa-terminal', 'fa-console', 'fa-bug', 'fa-bug-slash',
-    
-    // Identification
-    'fa-id-card', 'fa-credit-card', 'fa-qrcode', 'fa-barcode', 'fa-rfid',
-    
-    // Transport & Logistics
-    'fa-truck', 'fa-shipping-fast', 'fa-conveyor-belt', 'fa-pallet', 'fa-dolly',
-    'fa-cube', 'fa-cubes', 'fa-layer-group', 'fa-stack',
-    
-    // UI & Display
-    'fa-th', 'fa-th-large', 'fa-th-list', 'fa-list', 'fa-list-ul', 'fa-list-ol',
-    'fa-table', 'fa-columns', 'fa-grid', 'fa-window-maximize', 'fa-window-restore',
-    'fa-window-minimize', 'fa-window-close', 'fa-expand', 'fa-compress',
-    
-    // Actions
-    'fa-sync', 'fa-sync-alt', 'fa-redo', 'fa-undo', 'fa-refresh', 'fa-download',
-    'fa-upload', 'fa-exchange-alt', 'fa-share', 'fa-link', 'fa-unlink', 'fa-chain',
-    'fa-chain-broken', 'fa-arrows-alt', 'fa-arrows', 'fa-move',
-    
-    // Time & Calendar
-    'fa-clock', 'fa-hourglass', 'fa-stopwatch', 'fa-timer', 'fa-calendar',
-    'fa-calendar-alt', 'fa-calendar-check', 'fa-calendar-times', 'fa-history',
-    
-    // Media
-    'fa-play', 'fa-pause', 'fa-stop', 'fa-step-backward', 'fa-step-forward',
-    'fa-fast-backward', 'fa-fast-forward', 'fa-eject', 'fa-record-vinyl',
-    'fa-compact-disc', 'fa-cd', 'fa-dvd',
-    
-    // Users
-    'fa-user-shield', 'fa-user-lock', 'fa-user-secret', 'fa-user-cog', 'fa-user-gear',
-    'fa-user-tie', 'fa-user-ninja', 'fa-users', 'fa-users-cog', 'fa-user-group',
-    'fa-user-friends', 'fa-user-plus', 'fa-user-minus', 'fa-user-times', 'fa-user-check',
-    'fa-user-xmark', 'fa-user-slash'
-];
-
-function initIconSearch() {
-    const iconInputs = document.querySelectorAll('.icon-search-input');
-    
-    iconInputs.forEach(input => {
-        const container = input.closest('.icon-search-container');
-        const preview = container.querySelector('.icon-preview');
-        const suggestions = container.querySelector('.icon-suggestions');
-        
-        if (!preview || !suggestions) return;
-        
-        // Initialize preview if input already has a value
-        if (input.value && input.value.trim()) {
-            const iconClass = input.value.trim().startsWith('fa-') ? input.value.trim() : `fa-${input.value.trim()}`;
-            preview.innerHTML = `<i class="fas ${iconClass}"></i>`;
-            preview.classList.remove('hidden');
-        }
-        
-        input.addEventListener('input', (e) => {
-            const query = e.target.value.toLowerCase().trim();
-            
-            // Update preview
-            if (query) {
-                const iconClass = query.startsWith('fa-') ? query : `fa-${query}`;
-                preview.innerHTML = `<i class="fas ${iconClass}"></i>`;
-                preview.classList.remove('hidden');
-            } else {
-                preview.classList.add('hidden');
-            }
-            
-            // Filter and display suggestions
-            if (query.length > 0) {
-                const filtered = fontAwesomeIcons.filter(icon => 
-                    icon.includes(query) || icon.replace('fa-', '').includes(query)
-                ).slice(0, 10); // Show top 10 matches
-                
-                if (filtered.length > 0) {
-                    suggestions.innerHTML = filtered.map(icon => `
-                        <div class="icon-suggestion-item" data-icon="${icon}">
-                            <i class="fas ${icon}"></i>
-                            <span>${icon}</span>
-                        </div>
-                    `).join('');
-                    suggestions.classList.remove('hidden');
-                    
-                    // Add click handlers
-                    suggestions.querySelectorAll('.icon-suggestion-item').forEach(item => {
-                        item.addEventListener('click', () => {
-                            input.value = item.dataset.icon;
-                            preview.innerHTML = `<i class="fas ${item.dataset.icon}"></i>`;
-                            preview.classList.remove('hidden');
-                            suggestions.classList.add('hidden');
-                        });
-                    });
-                } else {
-                    suggestions.classList.add('hidden');
-                }
-            } else {
-                suggestions.classList.add('hidden');
-            }
-        });
-        
-        // Hide suggestions when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!container.contains(e.target)) {
-                suggestions.classList.add('hidden');
-            }
-        });
-        
-        // Update preview on blur if value exists
-        input.addEventListener('blur', () => {
-            const value = input.value.trim();
-            if (value && preview) {
-                const iconClass = value.startsWith('fa-') ? value : `fa-${value}`;
-                preview.innerHTML = `<i class="fas ${iconClass}"></i>`;
-                preview.classList.remove('hidden');
-            }
-        });
-    });
-}
-
-// Initialize when DOM is ready
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initIconSearch);
-} else {
-    initIconSearch();
-}
-

static/js/devices.js

@@ -1,110 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-
-    // Expand/collapse site groups
-    document.querySelectorAll('.site-header').forEach(header => {
-        header.addEventListener('click', function(e) {
-            const deviceList = this.closest('.site-group').querySelector('.device-list');
-            const icon = this.querySelector('.expand-btn i');
-            if (deviceList.classList.contains('hidden')) {
-                deviceList.classList.remove('hidden');
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-up');
-            } else {
-                deviceList.classList.add('hidden');
-                icon.classList.remove('fa-chevron-up');
-                icon.classList.add('fa-chevron-down');
-            }
-        });
-    });
-
-    // Search functionality
-    const searchInput = document.getElementById('search');
-    searchInput.addEventListener('keypress', function(event) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const query = this.value.toLowerCase();
-            document.querySelectorAll('.site-group').forEach(siteGroup => {
-                let anyVisible = false;
-                siteGroup.querySelectorAll('.device-list li').forEach(li => {
-                    const deviceName = li.querySelector('span').textContent.toLowerCase();
-                    const ipSpans = li.querySelectorAll('span.inline-block');
-                    let match = deviceName.includes(query);
-                    if (!match) {
-                        ipSpans.forEach(ipSpan => {
-                            if (ipSpan.textContent.toLowerCase().includes(query)) {
-                                match = true;
-                            }
-                        });
-                    }
-                    li.style.display = match ? '' : 'none';
-                    const card = li.querySelector('a');
-                    if (match) {
-                        anyVisible = true;
-                        siteGroup.querySelector('.device-list').classList.remove('hidden');
-                        const icon = siteGroup.querySelector('.expand-btn i');
-                        if (icon && icon.classList.contains('fa-chevron-down')) {
-                            icon.classList.remove('fa-chevron-down');
-                            icon.classList.add('fa-chevron-up');
-                        }
-                        if (card) {
-                            card.style.transition = 'background-color 0.3s';
-                            card.style.backgroundColor = '#2563eb';
-                            card.style.color = '#fff';
-                            setTimeout(() => {
-                                card.style.backgroundColor = '';
-                                card.style.color = '';
-                            }, 2000);
-                        }
-                    } else {
-                        if (card) {
-                            card.style.backgroundColor = '';
-                            card.style.color = '';
-                        }
-                    }
-                });
-                siteGroup.style.display = anyVisible ? '' : 'none';
-            });
-        }
-    });
-
-    // Scroll to Top Button
-    const scrollToTopButton = document.createElement('button');
-    scrollToTopButton.innerHTML = '<i class="fas fa-arrow-up"></i>';
-    scrollToTopButton.style.fontSize = '26px';
-    scrollToTopButton.className = 'fixed bottom-5 right-5 bg-gray-200 dark:bg-zinc-800 text-black dark:text-white p-3 rounded-full shadow-lg hidden';
-    scrollToTopButton.style.width = '60px';
-    scrollToTopButton.style.height = '60px';
-    scrollToTopButton.style.borderRadius = '50%';
-    document.body.appendChild(scrollToTopButton);
-
-    const style = document.createElement('style');
-    style.textContent = `
-        @keyframes bob {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(-5px);
-            }
-        }
-
-        .bobbing {
-            animation: bob 1.5s infinite;
-        }
-    `;
-    document.head.appendChild(style);
-
-    scrollToTopButton.classList.add('bobbing');
-
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 200) {
-            scrollToTopButton.classList.remove('hidden');
-        } else {
-            scrollToTopButton.classList.add('hidden');
-        }
-    });
-
-    scrollToTopButton.addEventListener('click', () => {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    });
-});

static/js/export_csv.js

@@ -1,7 +0,0 @@
-document.querySelectorAll('.export-csv-btn').forEach(btn => {
-    btn.addEventListener('click', function(e) {
-        e.stopPropagation();
-        const subnetId = this.getAttribute('data-subnet-id');
-        window.location.href = `/subnet/${subnetId}/export_csv`;
-    });
-});

static/js/header.js

@@ -1,12 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const navToggle = document.getElementById('nav-toggle');
-    const mobileNav = document.getElementById('mobile-nav');
-    navToggle.addEventListener('click', function() {
-        mobileNav.classList.toggle('hidden');
-    });
-    document.addEventListener('click', function(e) {
-        if (!mobileNav.contains(e.target) && !navToggle.contains(e.target)) {
-            mobileNav.classList.add('hidden');
-        }
-    });
-});

static/js/sitelist.js

@@ -1,34 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    document.querySelectorAll('.site-header').forEach(header => {
-        header.addEventListener('click', function(e) {
-            if (e.target.closest('button')) return;
-            const subnetList = this.closest('.site-group').querySelector('.subnet-list');
-            const icon = this.querySelector('.expand-btn i');
-            if (subnetList.classList.contains('hidden')) {
-                subnetList.classList.remove('hidden');
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-up');
-            } else {
-                subnetList.classList.add('hidden');
-                icon.classList.remove('fa-chevron-up');
-                icon.classList.add('fa-chevron-down');
-            }
-        });
-    });
-    document.querySelectorAll('.expand-btn').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            e.stopPropagation();
-            const subnetList = this.closest('.site-group').querySelector('.subnet-list');
-            const icon = this.querySelector('i');
-            if (subnetList.classList.contains('hidden')) {
-                subnetList.classList.remove('hidden');
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-up');
-            } else {
-                subnetList.classList.add('hidden');
-                icon.classList.remove('fa-chevron-up');
-                icon.classList.add('fa-chevron-down');
-            }
-        });
-    });
-});

static/js/subnet.js

@@ -1,79 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.querySelector('form');
-    if (form) {
-        form.addEventListener('submit', (event) => {
-            event.preventDefault();
-        });
-
-        const searchInput = document.createElement('input');
-        searchInput.type = 'text';
-        searchInput.placeholder = 'Search by IP or Hostname';
-        searchInput.className = 'p-2 w-full rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600 focus:outline-none focus:border-blue-400 mb-4 text-center';
-        form.insertAdjacentElement('beforebegin', searchInput);
-
-        searchInput.addEventListener('keypress', (event) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                const searchTerm = searchInput.value.toLowerCase();
-                const rows = document.querySelectorAll('tbody tr');
-
-                rows.forEach(row => {
-                    const ipCell = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
-                    const hostnameCell = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
-
-                    if (ipCell.includes(searchTerm) || hostnameCell.includes(searchTerm)) {
-                        row.style.backgroundColor = 'rgba(59, 130, 246, 0.5)';
-                        row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
-                        setTimeout(() => {
-                            row.style.backgroundColor = '';
-                        }, 3000);
-                    } else {
-                        row.style.backgroundColor = '';
-                    }
-                });
-            }
-        });
-    }
-
-    // Scroll to Top Button
-    const scrollToTopButton = document.createElement('button');
-    scrollToTopButton.innerHTML = '<i class="fas fa-arrow-up"></i>';
-    scrollToTopButton.style.fontSize = '26px';
-    scrollToTopButton.className = 'fixed bottom-5 right-5 bg-gray-200 dark:bg-zinc-800 text-black dark:text-white p-3 rounded-full shadow-lg hidden';
-    scrollToTopButton.style.width = '60px';
-    scrollToTopButton.style.height = '60px';
-    scrollToTopButton.style.borderRadius = '50%';
-    document.body.appendChild(scrollToTopButton);
-
-    const style = document.createElement('style');
-    style.textContent = `
-        @keyframes bob {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(-5px);
-            }
-        }
-
-        .bobbing {
-            animation: bob 1.5s infinite;
-        }
-    `;
-    document.head.appendChild(style);
-
-    scrollToTopButton.classList.add('bobbing');
-
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 200) {
-            scrollToTopButton.classList.remove('hidden');
-        } else {
-            scrollToTopButton.classList.add('hidden');
-        }
-    });
-
-    scrollToTopButton.addEventListener('click', () => {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    });
-});

templates/add_device.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Add Device</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-md pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="javascript:window.history.back()" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">Add Device</h1>
-            </div>
-            <form action="/add_device" method="POST" class="flex flex-col space-y-4">
-                <input type="text" name="device_name" placeholder="Device Name" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600" required>
-                <label for="device_type" class="block mb-2">Device Type</label>
-                <select id="device_type" name="device_type" class="p-2 rounded w-full mb-4 bg-gray-200 dark:bg-zinc-800 border border-gray-600" required>
-                    {% for dtype in device_types %}
-                        <option value="{{ dtype[0] }}">{{ dtype[1] }}</option>
-                    {% endfor %}
-                </select>
-                <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Add Device</button>
-            </form>
-        </div>
-    </div>
-</body>
-</html>

templates/add_rack.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Add Rack</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-md pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="/racks" class="absolute left-0 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">Add Rack</h1>
-            </div>
-            <form action="/rack/add" method="POST" class="space-y-6 bg-gray-200 dark:bg-zinc-800 rounded-lg shadow-md p-6">
-                <div>
-                    <label for="name" class="block font-medium mb-1">Rack Name</label>
-                    <input type="text" id="name" name="name" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600 w-full" required>
-                </div>
-                <div>
-                    <label for="site" class="block font-medium mb-1">Site</label>
-                    <input type="text" id="site" name="site" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600 w-full" required>
-                </div>
-                <div>
-                    <label for="height_u" class="block font-medium mb-1">Height (U)</label>
-                    <input type="number" id="height_u" name="height_u" min="1" max="60" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600 w-full" required>
-                </div>
-                <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg w-full">Add Rack</button>
-            </form>
-        </div>
-    </div>
-</body>
-</html>

templates/admin.html

@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Panel</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 mx-4 py-8 pt-20">
-        <div class="container max-w-7xl mx-auto">
-            <h1 class="text-3xl font-bold mb-6 text-center">Admin Panel</h1>
-            
-            {% if error %}
-            <div class="bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 p-4 rounded-lg mb-6">
-                {{ error }}
-            </div>
-            {% endif %}
-            
-            <!-- Quick Links -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
-                <a href="/audit" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors">
-                    <div class="flex items-center space-x-4">
-                        <i class="fas fa-clipboard-list text-3xl text-blue-500"></i>
-                        <div>
-                            <h3 class="text-lg font-bold">Audit Log</h3>
-                            <p class="text-sm text-gray-600 dark:text-gray-400">View system activity</p>
-                        </div>
-                    </div>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </a>
-                <a href="/users" class="bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 p-6 rounded-lg shadow-md flex items-center justify-between transition-colors">
-                    <div class="flex items-center space-x-4">
-                        <i class="fas fa-users text-3xl text-green-500"></i>
-                        <div>
-                            <h3 class="text-lg font-bold">User Management</h3>
-                            <p class="text-sm text-gray-600 dark:text-gray-400">Manage users & roles</p>
-                        </div>
-                    </div>
-                    <i class="fas fa-chevron-right text-gray-400"></i>
-                </a>
-            </div>
-            
-            <!-- Subnet Management Section -->
-            <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold">Subnet Management</h2>
-                    {% if can_add_subnet %}
-                    <button onclick="showAddSubnetModal()" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-6 py-2 rounded-lg font-medium">
-                        <i class="fas fa-plus mr-2"></i>Add Subnet
-                    </button>
-                    {% endif %}
-                </div>
-                
-                {% if subnets %}
-                <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead>
-                            <tr class="border-b border-gray-600">
-                                <th class="text-left p-3">Name</th>
-                                <th class="text-left p-3">CIDR</th>
-                                <th class="text-left p-3">Site</th>
-                                <th class="text-left p-3">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for subnet in subnets %}
-                            <tr class="border-b border-gray-600 hover:bg-gray-300 dark:hover:bg-zinc-700">
-                                <td class="p-3 font-medium">{{ subnet.name }}</td>
-                                <td class="p-3 font-mono text-sm">{{ subnet.cidr }}</td>
-                                <td class="p-3">
-                                    <span class="px-2 py-1 bg-blue-200 dark:bg-blue-800 rounded text-sm">{{ subnet.site }}</span>
-                                </td>
-                                <td class="p-3">
-                                    <div class="flex items-center space-x-2">
-                                        <a href="/subnet/{{ subnet.id }}" class="text-blue-500 hover:text-blue-700" title="View Subnet">
-                                            <i class="fas fa-eye"></i>
-                                        </a>
-                                        {% if can_edit_subnet %}
-                                        <button onclick="editSubnet({{ subnet.id }}, '{{ subnet.name|replace("'", "\\'") }}', '{{ subnet.cidr|replace("'", "\\'") }}', '{{ subnet.site|replace("'", "\\'") }}')" class="text-green-500 hover:text-green-700" title="Edit Subnet">
-                                            <i class="fas fa-edit"></i>
-                                        </button>
-                                        {% endif %}
-                                        {% if can_delete_subnet %}
-                                        <form action="/delete_subnet" method="POST" onsubmit="return confirm('Are you sure you want to delete this subnet and all its IPs? This action is irreversible.');" class="inline">
-                                            <input type="hidden" name="subnet_id" value="{{ subnet.id }}">
-                                            <button type="submit" class="text-red-500 hover:text-red-700" title="Delete Subnet">
-                                                <i class="fas fa-trash"></i>
-                                            </button>
-                                        </form>
-                                        {% endif %}
-                                    </div>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-                {% else %}
-                <div class="text-center py-8 text-gray-500">
-                    <i class="fas fa-network-wired text-4xl mb-4"></i>
-                    <p>No subnets found. Add your first subnet to get started.</p>
-                </div>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    
-    <!-- Add Subnet Modal -->
-    <div id="add-subnet-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50">
-        <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Add New Subnet</h2>
-                <button onclick="closeAddSubnetModal()" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form action="/add_subnet" method="POST" onsubmit="return validateSubnetForm();">
-                <div class="space-y-4">
-                    <input type="text" name="name" id="add-subnet-name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <input type="text" name="cidr" id="add-subnet-cidr" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <input type="text" name="site" id="add-subnet-site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <span id="cidr-error" class="text-red-500 text-sm hidden"></span>
-                </div>
-                <div class="flex justify-end space-x-2 mt-6">
-                    <button type="button" onclick="closeAddSubnetModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
-                    <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Add Subnet</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <!-- Edit Subnet Modal -->
-    <div id="edit-subnet-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50">
-        <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Edit Subnet</h2>
-                <button onclick="closeEditSubnetModal()" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form action="/edit_subnet" method="POST" onsubmit="return validateEditSubnetForm();">
-                <input type="hidden" name="subnet_id" id="edit-subnet-id">
-                <div class="space-y-4">
-                    <input type="text" name="name" id="edit-subnet-name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <input type="text" name="cidr" id="edit-subnet-cidr" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <input type="text" name="site" id="edit-subnet-site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                    <span id="edit-cidr-error" class="text-red-500 text-sm hidden"></span>
-                </div>
-                <div class="flex justify-end space-x-2 mt-6">
-                    <button type="button" onclick="closeEditSubnetModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
-                    <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Save Changes</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <script src="/static/js/add_subnet.js"></script>
-    <script>
-        function showAddSubnetModal() {
-            document.getElementById('add-subnet-modal').classList.remove('hidden');
-            document.getElementById('add-subnet-name').value = '';
-            document.getElementById('add-subnet-cidr').value = '';
-            document.getElementById('add-subnet-site').value = '';
-        }
-        
-        function closeAddSubnetModal() {
-            document.getElementById('add-subnet-modal').classList.add('hidden');
-            document.getElementById('cidr-error').classList.add('hidden');
-        }
-        
-        function editSubnet(subnetId, name, cidr, site) {
-            document.getElementById('edit-subnet-id').value = subnetId;
-            document.getElementById('edit-subnet-name').value = name;
-            document.getElementById('edit-subnet-cidr').value = cidr;
-            document.getElementById('edit-subnet-site').value = site;
-            document.getElementById('edit-subnet-modal').classList.remove('hidden');
-        }
-        
-        function closeEditSubnetModal() {
-            document.getElementById('edit-subnet-modal').classList.add('hidden');
-            document.getElementById('edit-cidr-error').classList.add('hidden');
-        }
-        
-        function validateEditSubnetForm() {
-            const cidrInput = document.getElementById('edit-subnet-cidr');
-            const cidrError = document.getElementById('edit-cidr-error');
-            const cidr = cidrInput.value.trim();
-            
-            // Basic CIDR validation
-            const cidrPattern = /^(\d{1,3}\.){3}\d{1,3}\/\d{1,2}$/;
-            if (!cidrPattern.test(cidr)) {
-                cidrError.textContent = 'Invalid CIDR format. Use format like 192.168.1.0/24';
-                cidrError.classList.remove('hidden');
-                return false;
-            }
-            
-            // Check prefix length
-            const parts = cidr.split('/');
-            if (parts.length === 2) {
-                const prefixLen = parseInt(parts[1]);
-                if (prefixLen < 24 || prefixLen > 32) {
-                    cidrError.textContent = 'Subnet must be /24 or smaller (e.g., /24, /25, ... /32)';
-                    cidrError.classList.remove('hidden');
-                    return false;
-                }
-            }
-            
-            cidrError.classList.add('hidden');
-            return true;
-        }
-        
-        // Close modals when clicking outside
-        window.onclick = function(event) {
-            const addModal = document.getElementById('add-subnet-modal');
-            const editModal = document.getElementById('edit-subnet-modal');
-            if (event.target === addModal) {
-                closeAddSubnetModal();
-            }
-            if (event.target === editModal) {
-                closeEditSubnetModal();
-            }
-        }
-    </script>
-</body>
-</html>

templates/audit.html

@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Audit Log</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-8xl pt-20">
-            <h1 class="text-3xl font-bold mb-6 text-center">Audit Log</h1>
-            <form method="GET" class="flex flex-wrap gap-4 mb-6 justify-center">
-                <select name="user_id" class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600">
-                    <option value="">All Users</option>
-                    {% for user in users %}
-                    <option value="{{ user[0] }}" {% if request.args.get('user_id') == user[0]|string %}selected{% endif %}>{{ user[1] }}</option>
-                    {% endfor %}
-                </select>
-                <select name="subnet_id" class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600">
-                    <option value="">All Subnets</option>
-                    {% for subnet in subnets %}
-                    <option value="{{ subnet[0] }}" {% if request.args.get('subnet_id') == subnet[0]|string %}selected{% endif %}>{{ subnet[1] }}</option>
-                    {% endfor %}
-                </select>
-                <select name="action" class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600">
-                    <option value="">All Actions</option>
-                    {% for a in actions %}
-                    <option value="{{ a }}" {% if request.args.get('action') == a %}selected{% endif %}>{{ a }}</option>
-                    {% endfor %}
-                </select>
-                <select name="device_name" class="border p-2 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600">
-                    <option value="">All Devices</option>
-                    {% for device in devices %}
-                    <option value="{{ device[0] }}" {% if request.args.get('device_name') == device[0] %}selected{% endif %}>{{ device[0] }}</option>
-                    {% endfor %}
-                </select>
-                <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg flex items-center gap-2">
-                    <i class="fas fa-search"></i>
-                    <span>Filter</span>
-                </button>
-            </form>
-            <table class="w-full table-auto bg-gray-200 dark:bg-zinc-800 rounded-lg overflow-hidden">
-                <thead>
-                    <tr class="bg-gray-400 dark:bg-zinc-700">
-                        <th class="px-4 py-2 text-center">User</th>
-                        <th class="px-4 py-2 text-center">Action</th>
-                        <th class="px-4 py-2 text-center">Details</th>
-                        <th class="px-4 py-2 text-center">Subnet</th>
-                        <th class="px-4 py-2 text-center">Timestamp</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for log in logs %}
-                    <tr class="border-b border-gray-700">
-                        <td class="px-4 py-2 text-center">{{ log[1] or 'Unknown' }}</td>
-                        <td class="px-4 py-2 text-center">{{ log[2] }}</td>
-                        <td class="px-4 py-2 text-center truncate" title="{{ log[3] }}">{{ log[3][:100] ~ ('…' if log[3]|length > 100 else '') }}</td>
-                        <td class="px-4 py-2 text-center">{{ log[4] or 'N/A' }}</td>
-                        <td class="px-4 py-2 text-center" data-utc="{{ log[5] }}">{{ log[5] }}</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% if total_pages > 1 %}
-            <div class="flex justify-center mt-6 space-x-2">
-                {% if page > 1 %}
-                {% set prev_args = query_args.copy() %}
-                {% set _ = prev_args.update({'page': page-1}) %}
-                <a href="{{ url_for('audit', **prev_args) }}" class="px-3 py-1 rounded bg-gray-400 hover:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center gap-2">
-                    <i class="fa fa-angle-left"></i>
-                    <span class="hidden sm:inline">Prev</span>
-                </a>
-                {% endif %}
-                {% for p in range(1, total_pages+1) %}
-                {% set page_args = query_args.copy() %}
-                {% set _ = page_args.update({'page': p}) %}
-                <a href="{{ url_for('audit', **page_args) }}" class="px-3 py-1 rounded {{ 'bg-gray-200 dark:bg-gray-500' if p == page else 'bg-gray-400 hover:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600' }}">{{ p }}</a>
-                {% endfor %}
-                {% if page < total_pages %}
-                {% set next_args = query_args.copy() %}
-                {% set _ = next_args.update({'page': page+1}) %}
-                <a href="{{ url_for('audit', **next_args) }}" class="px-3 py-1 rounded bg-gray-400 hover:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center gap-2">
-                    <span class="hidden sm:inline">Next</span>
-                    <i class="fa fa-angle-right"></i>
-                </a>
-                {% endif %}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        document.querySelectorAll('td[data-utc]').forEach(function(td) {
-            const utc = td.getAttribute('data-utc');
-            if (utc) {
-                const date = new Date(utc + 'Z');
-                td.textContent = date.toLocaleString();
-            }
-        });
-    });
-    </script>
-</body>
-</html>

templates/device.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ device.name }} - Device Details</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-            <div class="container py-8 w-auto min-w-[20rem] max-w-2xl pt-20">
-                <div class="flex items-center mb-8 relative justify-between gap-4">
-                    <a href="/devices" class="hidden sm:flex bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center justify-center rounded-full w-11 h-11 shrink-0"><i class="fas fa-arrow-left"></i></a>
-                    <h1 class="text-3xl font-bold text-center flex-1 min-w-0 truncate">{{ device.name }}</h1>
-                    <form action="/update_device_type" method="POST" class="hidden md:inline ml-2">
-                        <input type="hidden" name="device_id" value="{{ device.id }}">
-                        <select name="device_type_id" class="border p-2 rounded bg-gray-200 dark:bg-zinc-800 border-gray-600" onchange="this.form.submit()">
-                            {% for dtype in device_types %}
-                                <option value="{{ dtype[0] }}" {% if device.device_type_id == dtype[0] %}selected{% endif %}>{{ dtype[1] }}</option>
-                            {% endfor %}
-                        </select>
-                    </form>
-                    <div class="flex items-center shrink-0">
-                        <form action="/rename_device" method="POST" class="inline">
-                            <input type="hidden" name="device_id" value="{{ device.id }}">
-                            <input type="text" name="new_name" value="{{ device.name }}" class="hidden border p-1 rounded bg-gray-200 dark:bg-zinc-800 border-gray-600 w-32 mr-2" style="vertical-align: middle;" required>
-                            <button type="button" class="text-blue-400 hover:text-blue-600 hover:cursor-pointer ml-2 rename-btn" title="Rename Device"><i class="fas fa-pencil-alt"></i></button>
-                            <button type="submit" class="text-green-400 hover:text-green-600 hover:cursor-pointer ml-2 save-btn hidden" title="Save Name"><i class="fas fa-check"></i></button>
-                            <button type="button" class="text-gray-400 hover:text-gray-600 hover:cursor-pointer ml-2 cancel-btn hidden" title="Cancel"><i class="fas fa-times"></i></button>
-                        </form>
-                        <form action="/delete_device" method="POST" onsubmit="return confirm('Are you sure you want to delete this device?');">
-                            <input type="hidden" name="device_id" value="{{ device.id }}">
-                            <button type="submit" class="ml-4 text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete Device">
-                                <i class="fas fa-trash fa-lg"></i>
-                            </button>
-                        </form>
-                    </div>
-                </div>
-                <form action="/device/{{ device.id }}/add_ip" method="POST" class="mb-6">
-                    <div class="flex flex-col space-y-4">
-                        <select name="site" id="site-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
-                            <option value="" disabled selected>Select Site...</option>
-                            {% set sites = subnets | map(attribute='site') | unique | list %}
-                            {% for site in sites %}
-                            <option value="{{ site }}">{{ site }}</option>
-                            {% endfor %}
-                        </select>
-                        <select name="subnet_id" id="subnet-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
-                            <option value="" disabled selected>Select Subnet...</option>
-                            {% for subnet in subnets %}
-                            <option value="{{ subnet.id }}" data-site="{{ subnet.site }}">{{ subnet.name }} ({{ subnet.cidr }})</option>
-                            {% endfor %}
-                        </select>
-                        <select name="ip_id" id="ip-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full" required>
-                            <option value="" disabled selected>Select IP...</option>
-                        </select>
-                        <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg w-full">Add IP</button>
-                    </div>
-                </form>
-                <div class="allocated-ips">
-                    <h3 class="text-lg font-bold mb-2">Allocated IPs:</h3>
-                    <ul class="space-y-2">
-                        {% for ip in device_ips %}
-                        <li class="flex justify-between items-center bg-gray-200 dark:bg-zinc-700 p-2 rounded-lg">
-                            <span class="allocated-ip">{{ ip.ip }}</span>
-                            <form action="/device/{{ device.id }}/delete_ip" method="POST" class="inline">
-                                <input type="hidden" name="device_ip_id" value="{{ ip.device_ip_id }}">
-                                <button type="submit" class="text-red-500 hover:text-red-600 hover:cursor-pointer py-1 mr-2 text-lg"><i class="fas fa-trash"></i></button>
-                            </form>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                </div>
-                <form action="/update_device_description" method="POST" class="mb-6 mt-4">
-                    <input type="hidden" name="device_id" value="{{ device.id }}">
-                    <label for="description" class="block mb-2 text-lg font-bold">Description</label>
-                    <textarea id="description" name="description" rows="3" class="border p-2 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full resize-y" placeholder="Enter device description...">{{ device.description or '' }}</textarea>
-                    <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg w-full mt-2">Save Description</button>
-                </form>
-            </div>
-        </div>
-    <script src="/static/js/device.js"></script>
-</body>
-</html>

templates/device_type_stats.html

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Device Type Statistics</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-2xl pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="/devices" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">Device Stats</h1>
-                <a href="/device_types" class="hidden sm:flex absolute right-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-lg px-4 py-2 text-sm"><i class="fas fa-cog mr-2"></i>Manage Types</a>
-            </div>
-            <div class="bg-gray-200 dark:bg-zinc-800 rounded-lg shadow-md p-6">
-                <table class="w-full table-auto">
-                    <thead>
-                        <tr class="dark:bg-zinc-700">
-                            <th class="px-4 py-2 text-left">Type</th>
-                            <th class="px-4 py-2 text-center">Count</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for name, icon_class, count in stats %}
-                        <tr class="border-b border-gray-700">
-                            <td class="px-4 py-3 flex items-center gap-2">
-                                <a href="{{ url_for('devices_by_type', device_type=name) }}" class="hover:underline flex items-center gap-2">
-                                    <i class="fas {{ icon_class }} dark:text-white"></i> {{ name }}
-                                </a>
-                            </td>
-                            <td class="px-4 py-3 text-center font-bold">{{ count }}</td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

templates/device_types.html

@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Device Type Management</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="/static/css/device_types.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-6xl pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="/device_type_stats" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">Device Type Management</h1>
-            </div>
-            {% if error %}
-            <div class="mb-4 bg-red-200 dark:bg-red-800 text-red-900 dark:text-red-100 p-4 rounded-lg">
-                {{ error }}
-            </div>
-            {% endif %}
-            <form action="/device_types" method="POST" class="mb-8 bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md">
-                <input type="hidden" name="action" value="add">
-                <h2 class="text-xl font-bold mb-4">Add New Device Type</h2>
-                <div class="flex flex-col space-y-4">
-                    <div class="flex flex-col md:flex-row gap-4">
-                        <input type="text" name="name" placeholder="Device Type Name (e.g., Router, Load Balancer)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 flex-1" required>
-                        <div class="icon-search-container relative flex-1">
-                            <div class="flex items-center gap-2">
-                                <div class="icon-preview hidden text-2xl text-gray-600 dark:text-gray-400 flex-shrink-0"></div>
-                                <input type="text" name="icon_class" placeholder="Icon Class (e.g., fa-server, fa-router)" class="icon-search-input border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 flex-1" required>
-                            </div>
-                            <div class="icon-suggestions hidden absolute z-10 w-full mt-1 bg-gray-300 dark:bg-zinc-900 border border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                            </div>
-                        </div>
-                        <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg whitespace-nowrap">Add Device Type</button>
-                    </div>
-                    <div class="text-sm text-gray-600 dark:text-gray-400">
-                        <p><strong>Icon Class Format:</strong> Start typing to see icon suggestions. Use Font Awesome icon classes (e.g., <code>fa-server</code>, <code>fa-router</code>, <code>fa-database</code>).</p>
-                        <p class="mt-1">Common icons: <code>fa-server</code>, <code>fa-network-wired</code>, <code>fa-shield-halved</code>, <code>fa-wifi</code>, <code>fa-print</code>, <code>fa-boxes-stacked</code>, <code>fa-question</code></p>
-                    </div>
-                </div>
-            </form>
-            <h2 class="text-xl font-bold mb-4">Existing Device Types</h2>
-            {% if device_types %}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {% for device_type in device_types %}
-                <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
-                    <form id="edit-form-{{ device_type[0] }}" action="/device_types" method="POST" class="space-y-4">
-                        <input type="hidden" name="action" value="edit">
-                        <input type="hidden" name="device_type_id" value="{{ device_type[0] }}">
-                        <div class="flex flex-col space-y-3">
-                            <div class="flex items-center justify-center mb-2">
-                                <i class="fas {{ device_type[2] }} text-4xl text-gray-700 dark:text-gray-300"></i>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
-                                <input type="text" name="name" value="{{ device_type[1] }}" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                            </div>
-                            <div class="icon-search-container relative">
-                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Icon</label>
-                                <div class="flex items-center gap-2">
-                                    <div class="icon-preview text-xl text-gray-600 dark:text-gray-400 flex-shrink-0">
-                                        <i class="fas {{ device_type[2] }}"></i>
-                                    </div>
-                                    <input type="text" name="icon_class" value="{{ device_type[2] }}" class="icon-search-input border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 flex-1" required>
-                                </div>
-                                <div class="icon-suggestions hidden absolute z-10 w-full mt-1 bg-gray-300 dark:bg-zinc-900 border border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                    <div class="flex gap-2 pt-2">
-                        <button type="submit" form="edit-form-{{ device_type[0] }}" class="flex-1 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-3 py-2 rounded-lg text-sm font-medium transition-colors">
-                            <i class="fas fa-save mr-1"></i> Save
-                        </button>
-                        <form action="/device_types" method="POST" onsubmit="return confirm('Are you sure you want to delete this device type?');" class="inline">
-                            <input type="hidden" name="action" value="delete">
-                            <input type="hidden" name="device_type_id" value="{{ device_type[0] }}">
-                            <button type="submit" class="bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 hover:cursor-pointer text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors" title="Delete Device Type">
-                                <i class="fas fa-trash mr-1"></i> Delete
-                            </button>
-                        </form>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-            {% else %}
-            <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg text-center text-gray-600 dark:text-gray-400">
-                <p>No device types found. Add your first device type above.</p>
-            </div>
-            {% endif %}
-        </div>
-    </div>
-    <script src="/static/js/device_types.js"></script>
-</body>
-</html>
-

templates/devices.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Device Manager</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-    <link href="/static/css/devices.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-4xl pt-20">
-            <h1 class="text-3xl font-bold mb-6 text-center">Device Manager</h1>
-            <div class="flex flex-row justify-center gap-4 mb-6">
-                <a href="/add_device" class="text-center bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg">Add New Device</a>
-                <a href="/device_type_stats" class="text-center bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg">View Device Stats</a>
-            </div>
-            <div class="mb-6">
-                <input type="text" id="search" placeholder="Search devices or IPs..." class="border p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border-gray-600 w-full">
-            </div>
-            <div id="site-list" class="space-y-6">
-                {% for site, devices in sites_devices.items() %}
-                <div class="site-group bg-gray-200 dark:bg-zinc-800 rounded-lg shadow-md">
-                    <div class="flex flex-row items-center justify-between p-4 cursor-pointer site-header">
-                        <h2 class="text-xl font-bold mb-0 dark:text-white">{{ site }}</h2>
-                        <button type="button" class="expand-btn text-gray-400 hover:text-gray-200 hover:cursor-pointer ml-2 flex items-center" aria-label="Expand site">
-                            <i class="fas fa-chevron-down"></i>
-                        </button>
-                    </div>
-                    <ul class="device-list hidden px-6 pb-4">
-                        {% for device in devices %}
-                        <li class="my-2">
-                            <a href="/device/{{ device.id }}" class="flex items-center justify-between bg-gray-300 hover:bg-gray-100 dark:bg-zinc-900 dark:hover:bg-gray-700 dark:text-gray-200 font-semibold rounded-lg px-4 py-2 shadow transition-colors duration-150">
-                                <span><i class="fas {{ device.icon_class or 'fa-server' }} mr-2"></i>{{ device.name }}</span>
-                                {% set ips = device_ips.get(device.id, []) %}
-                                <span class="flex flex-row flex-wrap justify-end items-center ml-4 text-xs text-blue-300 font-normal align-middle">
-                                    {% if ips|length > 0 %}
-                                        {% for ip in ips %}
-                                            <span class="inline-block bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-white rounded px-2 py-1 ml-1 font-mono">{{ ip[1] }}</span>
-                                        {% endfor %}
-                                    {% else %}
-                                        <span class="text-gray-400">No IPs</span>
-                                    {% endif %}
-                                </span>
-                            </a>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-    <script src="/static/js/devices.js"></script>
-</body>
-</html>

templates/devices_by_type.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ device_type }} Devices</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-3xl pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="/device_type_stats" class="absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">
-                    <i class="fas {{ icon_class }}"></i> {{ device_type }} Devices
-                </h1>
-            </div>
-            {% for site, devices in site_devices.items() %}
-            <div class="mb-8">
-                <h2 class="text-xl font-bold mb-4 dark:text-white">{{ site }}</h2>
-                <div class="bg-gray-200 dark:bg-zinc-800 rounded-lg shadow-md p-4">
-                    <table class="w-full table-auto mb-2">
-                        <thead>
-                            <tr class="bg-gray-200 dark:bg-zinc-700">
-                                <th class="px-4 py-2 text-left">Device Name</th>
-                                <th class="px-4 py-2 text-left">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for device in devices %}
-                            <tr class="border-b border-gray-700">
-                                <td class="px-4 py-3">
-                                    <a href="/device/{{ device.id }}" class="hover:underline dark:text-white">{{ device.name }}</a>
-                                </td>
-                                <td class="px-4 py-3">{{ device.description or '' }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                        <tfoot>
-                            <tr class="bg-gray-200 dark:bg-zinc-900 font-bold">
-                                <td class="px-4 py-2 text-right" colspan="2">Total: {{ devices|length }}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-</body>
-</html>

templates/dhcp.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Define DHCP Pool - {{ subnet.name }}</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 w-full sm:max-w-3/4 pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="/subnet/{{ subnet.id }}" class="absolute left-0 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">DHCP Pool for {{ subnet.name }}</h1>
-            </div>
-            {% if error %}
-            <div class="text-red-500 text-center mb-4">{{ error }}</div>
-            {% endif %}
-            <form action="" method="POST" class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md flex flex-col gap-4">
-                <label for="start_ip" class="font-medium">Start IP Address</label>
-                <input type="text" id="start_ip" name="start_ip" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" placeholder="e.g. 192.168.1.100" required value="{{ dhcp_pool.start_ip if dhcp_pool else '' }}">
-                <label for="end_ip" class="font-medium">End IP Address</label>
-                <input type="text" id="end_ip" name="end_ip" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" placeholder="e.g. 192.168.1.200" required value="{{ dhcp_pool.end_ip if dhcp_pool else '' }}">
-                <label for="excluded_ips" class="font-medium">Exclude IPs (comma separated)</label>
-                <input type="text" id="excluded_ips" name="excluded_ips" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" placeholder="e.g. 192.168.1.105,192.168.1.110" value="{{ dhcp_pool.excluded_ips if dhcp_pool and dhcp_pool.excluded_ips else '' }}">
-                <div class="flex gap-4 mt-4">
-                    <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Save DHCP Pool</button>
-                    {% if dhcp_pool %}
-                    <button type="submit" name="remove" value="1" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Remove DHCP Pool</button>
-                    {% endif %}
-                </div>
-            </form>
-            {% if dhcp_pool %}
-            <div class="mt-8 bg-gray-200 dark:bg-zinc-800 p-4 rounded-lg">
-                <h2 class="text-xl font-bold mb-2">Current DHCP Pool</h2>
-                <div>Start: <span class="font-mono">{{ dhcp_pool.start_ip }}</span></div>
-                <div>End: <span class="font-mono">{{ dhcp_pool.end_ip }}</span></div>
-                {% if dhcp_pool.excluded_ips %}
-                <div>Excluded: <span class="font-mono break-words inline-block max-w-full whitespace-normal">{{ dhcp_pool.excluded_ips }}</span></div>
-                {% endif %}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-</body>
-</html>

templates/header.html

@@ -1,67 +0,0 @@
-<header class="bg-zinc-800 shadow-md py-3 px-6 flex items-center justify-between relative">
-    <a href="/" class="flex items-center space-x-3">
-        <img src="{{ LOGO_PNG }}" alt="Logo" class="h-8 rounded">
-        <span class="text-2xl font-bold text-white">{{ NAME }} IPAM <span class="text-sm font-normal text-gray-300">v{{ VERSION }}</span></span>
-    </a>
-    <div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 text-white text-lg font-medium whitespace-nowrap">
-        {% if current_user_name %}Hello, {{ current_user_name }}{% endif %}
-    </div>
-    <nav class="hidden md:flex items-center space-x-6" id="main-nav">
-        {% if has_permission('view_index') %}
-        <a href="/" class="text-gray-200 hover:text-gray-400 font-medium">Home</a>
-        {% endif %}
-        {% if has_permission('view_devices') %}
-        <a href="/devices" class="text-gray-200 hover:text-gray-400 font-medium">Devices</a>
-        {% endif %}
-        {% if has_permission('view_racks') %}
-        <a href="/racks" class="text-gray-200 hover:text-gray-400 font-medium">Racks</a>
-        {% endif %}
-        {% if has_permission('view_admin') %}
-        <a href="/admin" class="text-gray-200 hover:text-gray-400 font-medium">Admin</a>
-        {% endif %}
-        {% if has_permission('view_users') %}
-        <a href="/users" class="text-gray-200 hover:text-gray-400 font-medium">Users</a>
-        {% endif %}
-        {% if has_permission('view_audit') %}
-        <a href="/audit" class="text-gray-200 hover:text-gray-400 font-medium">Audit Log</a>
-        {% endif %}
-        {% if has_permission('view_help') %}
-        <a href="/help" class="text-gray-200 hover:text-gray-400 font-medium">Help</a>
-        {% endif %}
-        {% if current_user_name %}
-        <a href="/logout" class="text-gray-200 hover:text-gray-400 font-medium">Logout</a>
-        {% endif %}
-    </nav>
-    <button class="md:hidden flex items-center text-gray-200 hover:cursor-pointer focus:outline-none" id="nav-toggle" aria-label="Open navigation menu">
-        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-    </button>
-    <div class="md:hidden absolute top-16 right-6 bg-zinc-800 rounded-lg shadow-lg z-50 w-48 hidden flex-col py-2" id="mobile-nav">
-        {% if has_permission('view_index') %}
-        <a href="/" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Home</a>
-        {% endif %}
-        {% if has_permission('view_devices') %}
-        <a href="/devices" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Devices</a>
-        {% endif %}
-        {% if has_permission('view_racks') %}
-        <a href="/racks" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Racks</a>
-        {% endif %}
-        {% if has_permission('view_admin') %}
-        <a href="/admin" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Admin</a>
-        {% endif %}
-        {% if has_permission('view_users') %}
-        <a href="/users" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Users</a>
-        {% endif %}
-        {% if has_permission('view_audit') %}
-        <a href="/audit" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Audit Log</a>
-        {% endif %}
-        {% if has_permission('view_help') %}
-        <a href="/help" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Help</a>
-        {% endif %}
-        {% if current_user_name %}
-        <a href="/logout" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium">Logout</a>
-        {% endif %}
-    </div>
-    <script src="/static/js/header.js"></script>
-</header>

templates/help.html

@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Help & User Guide</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-2xl pt-20">
-            <h1 class="text-3xl font-bold mb-8 text-center">Help & User Guide</h1>
-            <div class="space-y-10 text-lg">
-                <div class="bg-gray-200 dark:bg-zinc-800 rounded-2xl shadow-lg p-8">
-                    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">Subnets & Devices</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Managing Subnets</h3>
-                            <p>To add or edit subnets, go to the <a href="/admin" class="text-blue-600 dark:text-blue-400 hover:underline">Admin</a> page. Click <span class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded">Add Subnet</span> to create a new subnet, or use the edit button to modify existing subnets. Subnets are associated with sites and can be organised by location.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Adding a Device</h3>
-                            <p>To add a device, visit the <a href="/devices" class="text-blue-600 dark:text-blue-400 hover:underline">Devices</a> page and click <span class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded">Add Device</span>.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Assigning IP Addresses</h3>
-                            <p>To assign an IP address, you must first add a device. Then, from the <a href="/devices" class="text-blue-600 dark:text-blue-400 hover:underline">Devices</a> page, click on a device to view its details and use the <span class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded">Add IP</span> option to assign an IP address from a subnet.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Viewing and Editing Devices</h3>
-                            <p>Click on any device in the <a href="/devices" class="text-blue-600 dark:text-blue-400 hover:underline">Devices</a> list to view or edit its details, including assigned IPs, device types and a description where necessary.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-200 dark:bg-zinc-800 rounded-2xl shadow-lg p-8">
-                    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">Racks</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Adding a Rack</h3>
-                            <p>To add a new rack, go to the <a href="/racks" class="text-blue-600 dark:text-blue-400 hover:underline">Racks</a> page and click the <span class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded">Add Rack</span> button. Fill in the details and submit the form.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Assigning Devices to Racks</h3>
-                            <p>After adding a device, you can assign it to a rack from the <a href="/racks" class="text-blue-600 dark:text-blue-400 hover:underline">Rack</a> details page. Click on a rack from the <a href="/racks" class="text-blue-600 dark:text-blue-400 hover:underline">Racks</a> page, then use the options to add or remove devices within the rack.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Non-Networked Devices</h3>
-                            <p>Racks can also contain non-networked devices (such as shelves, patch panels, or other equipment that does not require an IP address). To add a non-networked device, go to a rack details page and use the option to add a device by name without assigning an IP address. These devices will appear in the rack layout but will not be listed on the Devices page.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-200 dark:bg-zinc-800 rounded-2xl shadow-lg p-8">
-                    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">User Management & Audit</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">User & Role Management</h3>
-                            <p>Administrators can manage users and roles from the <a href="/users" class="text-blue-600 dark:text-blue-400 hover:underline">Users</a> page. This includes creating users, assigning roles, and managing custom roles with specific permission sets. Only users with the appropriate permissions can access this page.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Understanding Roles</h3>
-                            <p>The system uses role-based access control to manage what users can do. There are three default roles:</p>
-                            <ul class="list-disc list-inside mt-2 space-y-1 ml-4">
-                                <li><strong>Admin:</strong> Full access to all features including user and role management</li>
-                                <li><strong>User:</strong> Can view and manage most features (devices, subnets, racks, etc.) but cannot manage users or roles</li>
-                                <li><strong>View Only:</strong> Read-only access to view pages but cannot make any changes</li>
-                            </ul>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Custom Roles</h3>
-                            <p>Administrators can create custom roles with specific permission sets. Go to the <a href="/users" class="text-blue-600 dark:text-blue-400 hover:underline">Users</a> page and click the "Roles & Permissions" tab to create and manage roles.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Permission Granularity</h3>
-                            <p>Permissions are very granular, allowing fine-grained control over what each role can do. Permissions are organised into categories like View, Device Management, Network Management, Rack Management, and Administration.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Audit & History</h3>
-                            <p>All changes are logged and can be reviewed on the <a href="/audit" class="text-blue-600 dark:text-blue-400 hover:underline">Audit</a> page for accountability and troubleshooting. The audit log shows who made changes, what was changed, and when.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">API Keys</h3>
-                            <p>Each user has a unique API key that can be used to authenticate API requests. API keys can be viewed and regenerated from the <a href="/users" class="text-blue-600 dark:text-blue-400 hover:underline">Users</a> page. Keep your API key secure and never share it publicly.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-200 dark:bg-zinc-800 rounded-2xl shadow-lg p-8">
-                    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">API Documentation</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Authentication</h3>
-                            <p>All API requests require authentication using an API key. You can provide the API key in one of three ways:</p>
-                            <ul class="list-disc list-inside mt-2 space-y-1 ml-4">
-                                <li><strong>Header:</strong> <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">X-API-Key: your_api_key</code></li>
-                                <li><strong>Authorization Header:</strong> <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">Authorization: Bearer your_api_key</code></li>
-                                <li><strong>Query Parameter:</strong> <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">?api_key=your_api_key</code></li>
-                            </ul>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Base URL</h3>
-                            <p>All API endpoints are prefixed with <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">/api/v1</code></p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Available Endpoints</h3>
-                            <div class="space-y-3 mt-2">
-                                <div>
-                                    <h4 class="font-semibold">Devices</h4>
-                                    <ul class="list-disc list-inside ml-4 text-sm space-y-1">
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/devices</code> - List all devices</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/devices/{id}</code> - Get device details</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/devices</code> - Create device</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">PUT /api/v1/devices/{id}</code> - Update device</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">DELETE /api/v1/devices/{id}</code> - Delete device</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/devices/{id}/ips</code> - Add IP to device</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">DELETE /api/v1/devices/{id}/ips/{ip_id}</code> - Remove IP from device</li>
-                                    </ul>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold">Subnets</h4>
-                                    <ul class="list-disc list-inside ml-4 text-sm space-y-1">
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/subnets</code> - List all subnets</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/subnets/{id}</code> - Get subnet details</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/subnets</code> - Create subnet</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">PUT /api/v1/subnets/{id}</code> - Update subnet</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">DELETE /api/v1/subnets/{id}</code> - Delete subnet</li>
-                                    </ul>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold">Racks</h4>
-                                    <ul class="list-disc list-inside ml-4 text-sm space-y-1">
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/racks</code> - List all racks</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/racks/{id}</code> - Get rack details</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/racks</code> - Create rack</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">DELETE /api/v1/racks/{id}</code> - Delete rack</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/racks/{id}/devices</code> - Add device to rack</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">DELETE /api/v1/racks/{id}/devices/{rack_device_id}</code> - Remove device from rack</li>
-                                    </ul>
-                                </div>
-                                <div>
-                                    <h4 class="font-semibold">Other</h4>
-                                    <ul class="list-disc list-inside ml-4 text-sm space-y-1">
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/info</code> - Get API info and user details</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/device-types</code> - List device types</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/subnets/{id}/dhcp</code> - Get DHCP pools</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">POST /api/v1/subnets/{id}/dhcp</code> - Configure DHCP pools</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/audit</code> - Get audit log</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/users</code> - List users (admin only)</li>
-                                        <li><code class="bg-gray-300 dark:bg-zinc-700 px-1 rounded">GET /api/v1/roles</code> - List roles (admin only)</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Permissions</h3>
-                            <p>API endpoints respect the same role-based permissions as the web interface. Users can only perform actions that their role allows. If a user lacks the required permission, the API will return a <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">403 Forbidden</code> error.</p>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-semibold mb-1">Response Format</h3>
-                            <p>All API responses are in JSON format. Successful requests return <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">200 OK</code> or <code class="bg-gray-300 dark:bg-zinc-700 px-2 py-1 rounded text-sm">201 Created</code> with the requested data. Errors return appropriate HTTP status codes with an error message in the response body.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

templates/index.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ NAME }} IPAM</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-md pt-20">
-            <h1 class="text-3xl font-bold mb-6 text-center">{{ NAME }} IPAM</h1>
-            <ul class="space-y-4">
-                {% for site, subnets in sites_subnets.items() %}
-                <li class="site-group bg-gray-200 dark:bg-zinc-800 rounded-xl shadow-lg">
-                    <div class="flex flex-row items-center justify-between p-4 cursor-pointer site-header">
-                        <h2 class="text-xl font-bold mb-0 text-gray-900 dark:text-white">{{ site }}</h2>
-                        <button type="button" class="expand-btn ml-2 flex items-center hover:cursor-pointer" aria-label="Expand site">
-                            <i class="fas fa-chevron-down"></i>
-                        </button>
-                    </div>
-                    <ul class="subnet-list hidden space-y-4 px-2 pb-4">
-                        {% for subnet in subnets %}
-                        <li class="p-4 bg-gray-300 hover:bg-gray-100 dark:bg-zinc-900 hover:dark:bg-zinc-700 rounded-lg shadow-md flex items-center justify-between">
-                            <a href="/subnet/{{ subnet.id }}">
-                                <p class="text-gray-900 dark:text-white text-lg font-medium">{{ subnet.name }}</p>
-                                <p class="text-sm text-gray-800 dark:text-gray-400">{{ subnet.cidr }}</p>
-                            </a>
-                            <button type="button" class="export-csv-btn ml-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-600 dark:hover:bg-zinc-500 hover:cursor-pointer flex items-center justify-center rounded-full w-9 h-9" title="Export as CSV" data-subnet-id="{{ subnet.id }}">
-                                <i class="fas fa-file-csv"></i>
-                            </button>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                </li>
-                {% endfor %}
-            </ul>
-            <script src="/static/js/sitelist.js"></script>
-            <script src="/static/js/export_csv.js"></script>
-        </div>
-    </div>
-</body>
-</html>

templates/login.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ NAME }} IPAM</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-md pt-20">
-            <div class="bg-gray-200 dark:bg-zinc-800 rounded-2xl shadow-lg p-8">
-                <h1 class="text-3xl font-bold mb-6 text-center">{{ NAME }} IPAM</h1>
-                <form action="/login" method="POST" class="flex flex-col space-y-4">
-                    <input type="email" name="email" placeholder="Email Address" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600" required>
-                    <input type="password" name="password" placeholder="Password" class="p-3 rounded-lg bg-gray-200 dark:bg-zinc-800 border border-gray-600" required>
-                    <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg flex items-center gap-2 justify-center w-full">
-                        <i class="fas fa-sign-in-alt"></i>
-                        <span>Login</span>
-                    </button>
-                </form>
-                {% if error %}
-                <p class="text-red-500 text-center mt-4">{{ error }}</p>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-</body>
-</html>

templates/rack.html

@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ rack.name }} - Rack View</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-2xl pt-20">
-            <div class="flex flex-col items-center mb-6 relative min-h-[3.5rem]">
-                <a href="/racks" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full mb-0">{{ rack.name }}</h1>
-                <span class="text-base mt-1">({{ rack.height_u }}U, {{ rack.site }})</span>
-                <form action="/rack/{{ rack.id }}/delete" method="POST" onsubmit="return confirm('Delete this rack?');" class="hidden sm:flex absolute right-0 mr-14">
-                    <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer items-center justify-center rounded-full w-11 h-11 flex" title="Delete Rack">
-                        <i class="fas fa-times fa-lg"></i>
-                    </button>
-                </form>
-                <button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-rack-id="{{ rack.id }}">
-                    <i class="fas fa-file-csv fa-lg"></i>
-                </button>
-                <script>
-                document.addEventListener('DOMContentLoaded', function() {
-                    var btn = document.getElementById('export-csv');
-                    if (btn) {
-                        btn.addEventListener('click', function() {
-                            window.location = '/rack/' + btn.getAttribute('data-rack-id') + '/export_csv';
-                        });
-                    }
-                });
-                </script>
-            </div>
-            <div class="flex flex-col gap-4 mb-6 items-stretch">
-                <div class="flex gap-4 w-full justify-center">
-                    <a href="?side=front" id="front-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 {% if current_side == 'front' %}ring-2 ring-gray-400{% endif %}">Front</a>
-                    <a href="?side=back" id="back-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 {% if current_side == 'back' %}ring-2 ring-gray-400{% endif %}">Back</a>
-                </div>
-                <div class="flex flex-wrap gap-4 w-full justify-center">
-                    <button id="show-add-device-form" type="button" class="flex-1 min-w-[12rem] max-w-[16rem] bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Device</button>
-                    <button id="show-nonnet-form" type="button" class="flex-[1.5_1.5_0%] min-w-[16rem] max-w-[28rem] bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Non-Networked Device</button>
-                </div>
-            </div>
-            <form id="add-device-form" action="/rack/{{ rack.id }}/add_device" method="POST" class="hidden mb-6 bg-gray-200 dark:bg-zinc-800 rounded-lg p-4">
-                <div class="flex flex-col md:flex-row gap-2 mb-2">
-                    <select name="device_id" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:flex-1" required>
-                        <option value="" disabled selected>Select Device...</option>
-                        {% for device in site_devices %}
-                            {% if device.device_type_id != 2 and device.device_type_id != 6 %}
-                                <option value="{{ device.id }}">{{ device.name }}</option>
-                            {% endif %}
-                        {% endfor %}
-                    </select>
-                    <input type="number" name="position_u" min="1" max="{{ rack.height_u }}" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:w-24" placeholder="U" required>
-                    <select name="side" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:w-28" required>
-                        <option value="front">Front</option>
-                        <option value="back">Back</option>
-                    </select>
-                    <button type="submit" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Add Device</button>
-                    <button id="hide-add-device-form" type="button" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button>
-                </div>
-                <div class="text-xs dark:text-gray-400">To add a multi-U device, repeat for each U position.</div>
-            </form>
-            <form id="nonnet-form" action="/rack/{{ rack.id }}/add_nonnet_device" method="POST" class="hidden flex flex-col gap-2 mt-2 mb-6 bg-gray-200 dark:bg-zinc-800 rounded-lg p-4">
-                <div class="flex flex-col md:flex-row gap-2">
-                    <input type="text" name="device_name" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:flex-1" placeholder="Device Name" required>
-                    <input type="number" name="position_u" min="1" max="{{ rack.height_u }}" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:w-24" placeholder="U" required>
-                    <select name="side" class="border p-2 rounded bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full md:w-28" required>
-                        <option value="front">Front</option>
-                        <option value="back">Back</option>
-                    </select>
-                    <button type="submit" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Add</button>
-                    <button id="hide-nonnet-form" type="button" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button>
-                </div>
-                <div class="text-xs dark:text-gray-400 mt-2">Add a non-networked device.</div>
-            </form>
-            <script>
-            function showBothAddButtons() {
-                document.getElementById('show-add-device-form').classList.remove('hidden');
-                document.getElementById('show-nonnet-form').classList.remove('hidden');
-            }
-            document.addEventListener('DOMContentLoaded', function() {
-                showBothAddButtons();
-                document.getElementById('show-nonnet-form').onclick = function() {
-                    document.getElementById('nonnet-form').classList.remove('hidden');
-                    this.classList.add('hidden');
-                };
-                document.getElementById('hide-nonnet-form').onclick = function() {
-                    document.getElementById('nonnet-form').classList.add('hidden');
-                    showBothAddButtons();
-                };
-                document.getElementById('show-add-device-form').onclick = function() {
-                    document.getElementById('add-device-form').classList.remove('hidden');
-                    this.classList.add('hidden');
-                };
-                document.getElementById('hide-add-device-form').onclick = function() {
-                    document.getElementById('add-device-form').classList.add('hidden');
-                    showBothAddButtons();
-                };
-            });
-            </script>
-            {% if error %}
-            <div class="mb-4 p-3 bg-red-700 text-white rounded-lg text-center font-semibold">{{ error }}</div>
-            {% endif %}
-            <div id="rack-visual" class="bg-gray-200 dark:bg-zinc-800 rounded-lg shadow-md p-4">
-                <h2 class="text-xl font-bold mb-2 dark:text-white" id="rack-side-label">{{ current_side|capitalize }}</h2>
-                <div id="rack-units">
-                    {% for u in range(rack.height_u, 0, -1) %}
-                    <div class="flex items-center h-10 border-b border-gray-700 hover:bg-gray-700/30 transition group">
-                        <span class="w-16 text-right dark:text-gray-400 text-base font-mono pr-4">U{{ u }}</span>
-                        <span class="flex-1 ml-4 flex items-center min-h-8">
-                            {% set found = false %}
-                            {% for rd in rack_devices %}
-                                {% if rd.position_u == u and rd.side == current_side %}
-                                    {% if rd.device_id %}
-                                        <a href="/device/{{ rd.device_id }}" class="dark:text-white hover:underline text-base">{{ rd.device_name }}</a>
-                                    {% else %}
-                                        <span class="dark:text-white text-base">{{ rd.nonnet_device_name }}</span>
-                                    {% endif %}
-                                    <form action="/rack/{{ rack.id }}/remove_device" method="POST" style="display:inline" onsubmit="return confirm('Are you sure you want to remove this device from the rack?');">
-                                        <input type="hidden" name="rack_device_id" value="{{ rd.id }}">
-                                        <button type="submit" class="ml-3 text-red-400 hover:text-red-600 hover:cursor-pointer"><i class="fas fa-times"></i></button>
-                                    </form>
-                                    {% set found = true %}
-                                {% endif %}
-                            {% endfor %}
-                        </span>
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

templates/racks.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Racks</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 max-w-md pt-20">
-            <h1 class="text-3xl font-bold mb-8 text-center">Racks</h1>
-            <div class="flex justify-center mb-6">
-                <a href="/rack/add" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg inline-block"><i class="fas fa-plus"></i> Add Rack</a>
-            </div>
-            <div class="space-y-6">
-                {% for rack in racks %}
-                <a href="/rack/{{ rack.id }}" class="bg-gray-200 hover:bg-gray-100 dark:bg-zinc-800 hover:dark:bg-zinc-700 rounded-lg shadow-md p-4 flex items-start justify-between hover:ring-2 hover:ring-gray-400 transition group">
-                    <div>
-                        <h2 class="text-xl font-bold dark:text-white mb-1">{{ rack.name }}</h2>
-                        <div class="dark:text-gray-400">Site: {{ rack.site }} | Height: {{ rack.height_u }}U</div>
-                    </div>
-                    <div class="ml-6 flex-shrink-0">
-                        <div class="relative flex items-center justify-center w-16 h-16 group">
-                            <svg class="w-16 h-16 rotate-[-90deg]" viewBox="0 0 100 100">
-                                <circle cx="50" cy="50" r="42" stroke="#374151" stroke-width="12" fill="none" />
-                                <circle cx="50" cy="50" r="42" stroke="#6b7280" stroke-width="12" fill="none" stroke-dasharray="264" stroke-dashoffset="{{ 264 - (264 * rack.percent_full / 100) }}" style="transition: stroke-dashoffset 0.5s;" />
-                            </svg>
-                            <div class="absolute inset-0 flex flex-col items-center justify-center">
-                                <span class="text-sm font-bold">{{ rack.percent_full }}%</span>
-                                <span class="text-xs dark:text-gray-300">Full</span>
-                            </div>
-                        </div>
-                    </div>
-                </a>
-                {% else %}
-                <div class="text-center text-gray-400">No racks defined yet.</div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-</body>
-</html>

templates/subnet.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ subnet.name }} - Subnet Details</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <script src="/static/js/subnet.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 flex items-center justify-center mx-4">
-        <div class="container py-8 w-full sm:max-w-3/4 pt-20">
-            <div class="flex items-center mb-6 relative">
-                <a href="javascript:window.history.back()" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
-                <h1 class="text-3xl font-bold text-center w-full">{{ subnet.name }} ({{ subnet.cidr }})</h1>
-                <button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-subnet-id="{{ subnet.id }}">
-                    <i class="fas fa-file-csv fa-lg"></i>
-                </button>
-            </div>
-            <div class="flex justify-center mb-4">
-                <a href="/subnet/{{ subnet.id }}/dhcp" class="hidden sm:flex bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg shadow items-center gap-2">
-                    <i class="fas fa-network-wired"></i> Define DHCP Pool
-                </a>
-            </div>
-            <button id="toggle-desc" class="sm:hidden bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button>
-            <form action="" method="POST">
-                <table class="table-auto w-full mb-6">
-                    <thead>
-                        <tr>
-                            <th class="text-center text-gray-700 dark:text-gray-400">IP Address</th>
-                            <th class="text-center text-gray-700 dark:text-gray-400">Hostname</th>
-                            <th class="text-center text-gray-700 dark:text-gray-400 hidden sm:table-cell" id="desc-col-header">Description</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-700">
-                        {% for ip in ip_addresses %}
-                        <tr>
-                            <td class="font-bold text-center">{{ ip[1] }}</td>
-                            <td class="text-center">
-                                {% if ip[2] == 'DHCP' %}
-                                    <span class="font-semibold">DHCP</span>
-                                {% elif ip[2] and ip[3] %}
-                                    <a href="/device/{{ ip[3] }}" class="hover:text-blue-300">{{ ip[2] }}</a>
-                                {% elif ip[2] %}
-                                    {{ ip[2] }}
-                                {% else %}
-                                    {{ '' }}
-                                {% endif %}
-                            </td>
-                            <td class="text-left align-top hidden sm:table-cell desc-col">
-                                <textarea readonly rows="1" class="border border-gray-600 rounded w-full resize-y cursor-pointer p-2">{{ ip[4].split('\n')[0] if ip[4] else '' }}</textarea>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </form>
-        </div>
-    </div>
-    <script src="/static/js/export_csv.js"></script>
-    <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const toggleBtn = document.getElementById('toggle-desc');
-    const descCols = document.querySelectorAll('.desc-col');
-    const descHeader = document.getElementById('desc-col-header');
-    let shown = false;
-    if (toggleBtn) {
-        toggleBtn.addEventListener('click', function() {
-            shown = !shown;
-            descCols.forEach(col => col.classList.toggle('hidden', !shown));
-            if (descHeader) descHeader.classList.toggle('hidden', !shown);
-            toggleBtn.textContent = shown ? 'Hide Descriptions' : 'Show Descriptions';
-        });
-    }
-});
-</script>
-</body>
-</html>

templates/users.html

@@ -1,540 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User & Role Management</title>
-    <link rel="icon" type="image/png" href="{{ LOGO_PNG }}">
-    <link href="/static/css/output.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 min-h-screen flex flex-col">
-    {% include 'header.html' %}
-    <div class="flex-1 mx-4 py-8 pt-20">
-        <div class="container max-w-7xl mx-auto">
-            <h1 class="text-3xl font-bold mb-6 text-center">User & Role Management</h1>
-            
-            {% if error %}
-            <div class="bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 p-4 rounded-lg mb-6">
-                {{ error }}
-            </div>
-            {% endif %}
-            
-            <!-- Tabs -->
-            <div class="mb-6 border-b border-gray-600">
-                <button onclick="showTab('users')" id="tab-users" class="tab-button px-6 py-3 font-medium border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 hover:text-gray-800 dark:hover:text-gray-200 hover:cursor-pointer">
-                    Users
-                </button>
-                <button onclick="showTab('roles')" id="tab-roles" class="tab-button px-6 py-3 font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:cursor-pointer">
-                    Roles & Permissions
-                </button>
-            </div>
-            
-            <!-- Users Tab -->
-            <div id="users-tab" class="tab-content">
-                {% if can_manage_users %}
-                <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md mb-8">
-                    <h2 class="text-xl font-bold mb-4">Add New User</h2>
-                    <form action="/users" method="POST" class="space-y-4">
-                        <input type="hidden" name="action" value="add_user">
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <input type="text" name="name" placeholder="Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" required>
-                            <input type="email" name="email" placeholder="Email Address" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" required>
-                            <input type="password" name="password" placeholder="Password" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" required>
-                            <select name="role_id" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600">
-                                <option value="">No Role</option>
-                                {% for role in roles %}
-                                <option value="{{ role[0] }}">{{ role[1] }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-4 py-2 rounded-lg">Add User</button>
-                    </form>
-                </div>
-                {% endif %}
-                
-                <h2 class="text-xl font-bold mb-4">Existing Users</h2>
-                <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md">
-                    <div class="overflow-x-auto">
-                        <table class="w-full">
-                            <thead>
-                                <tr class="border-b border-gray-600">
-                                    <th class="text-left p-2">Name</th>
-                                    <th class="text-left p-2">Email</th>
-                                    <th class="text-center p-2">Role</th>
-                                    {% if can_manage_users %}
-                                    <th class="text-center p-2">Actions</th>
-                                    {% endif %}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for user in users %}
-                                <tr class="border-b border-gray-600">
-                                    <td class="p-2">{{ user[1] }}</td>
-                                    <td class="p-2">{{ user[2] }}</td>
-                                    <td class="p-2 text-center">
-                                        <span class="px-2 py-1 bg-gray-300 dark:bg-zinc-700 rounded">{{ user[4] or 'No Role' }}</span>
-                                    </td>
-                                    {% if can_manage_users %}
-                                    <td class="p-2 text-center">
-                                        <button onclick="editUser({{ user[0] }}, '{{ user[1]|replace("'", "\\'") }}', '{{ user[2]|replace("'", "\\'") }}', {{ user[3] if user[3] else 'null' }}, '{{ user[5]|replace("'", "\\'") if user[5] else '' }}')" class="text-blue-500 hover:text-blue-700 mr-2 hover:cursor-pointer" title="Edit User">
-                                            <i class="fas fa-edit"></i>
-                                        </button>
-                                        <form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to regenerate the API key for this user?');" class="inline mr-2">
-                                            <input type="hidden" name="action" value="regenerate_api_key">
-                                            <input type="hidden" name="user_id" value="{{ user[0] }}">
-                                            <button type="submit" class="text-yellow-500 hover:text-yellow-700 hover:cursor-pointer" title="Regenerate API Key">
-                                                <i class="fas fa-key"></i>
-                                            </button>
-                                        </form>
-                                        <form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');" class="inline">
-                                            <input type="hidden" name="action" value="delete_user">
-                                            <input type="hidden" name="user_id" value="{{ user[0] }}">
-                                            <button type="submit" class="text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete User">
-                                                <i class="fas fa-trash"></i>
-                                            </button>
-                                        </form>
-                                    </td>
-                                    {% endif %}
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Roles Tab -->
-            <div id="roles-tab" class="tab-content hidden">
-                {% if can_manage_roles %}
-                <div class="mb-6 flex justify-end">
-                    <button type="button" onclick="showAddRoleModal(); return false;" class="bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer px-6 py-2 rounded-lg font-medium">
-                        <i class="fas fa-plus mr-2"></i>Add New Role
-                    </button>
-                </div>
-                {% endif %}
-                
-                <h2 class="text-xl font-bold mb-4">Roles</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    {% for role in roles %}
-                    <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
-                        <div class="flex justify-between items-start mb-3">
-                            <div class="flex-1">
-                                <h3 class="text-lg font-bold mb-1">{{ role[1] }}</h3>
-                                {% if role[2] %}
-                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{{ role[2] }}</p>
-                                {% endif %}
-                            </div>
-                            {% if can_manage_roles %}
-                            <div class="flex space-x-2">
-                                <button type="button" onclick="editRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}', '{{ (role[2] or '')|replace("'", "\\'") }}'); return false;" class="text-blue-500 hover:text-blue-700 hover:cursor-pointer" title="Edit Role">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                                <button type="button" onclick="deleteRole({{ role[0] }}, '{{ role[1]|replace("'", "\\'") }}'); return false;" class="text-red-500 hover:text-red-700 hover:cursor-pointer" title="Delete Role">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                            {% endif %}
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Permissions:</p>
-                            {% set role_perms = role_permissions.get(role[0], []) %}
-                            {% set perm_dict = {} %}
-                            {% for perm in permissions %}
-                            {% set _ = perm_dict.update({perm[0]: perm[2]}) %}
-                            {% endfor %}
-                            <div class="flex flex-wrap gap-1">
-                                {% for perm_id in role_perms[:5] %}
-                                <span class="px-2 py-1 bg-green-200 dark:bg-green-800 rounded text-xs">{{ perm_dict.get(perm_id, 'Unknown') }}</span>
-                                {% endfor %}
-                                {% if role_perms|length > 5 %}
-                                <span class="px-2 py-1 bg-gray-300 dark:bg-gray-700 rounded text-xs">+{{ role_perms|length - 5 }} more</span>
-                                {% endif %}
-                                {% if not role_perms %}
-                                <span class="text-gray-500 text-xs">No permissions</span>
-                                {% endif %}
-                            </div>
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <!-- Edit User Modal -->
-    <div id="edit-user-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50">
-        <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Edit User</h2>
-                <button onclick="closeEditUserModal()" class="text-gray-500 hover:text-gray-700 hover:cursor-pointer">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form action="/users" method="POST" class="space-y-4">
-                <input type="hidden" name="action" value="edit_user">
-                <input type="hidden" name="user_id" id="edit-user-id">
-                <input type="text" name="name" id="edit-user-name" placeholder="Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                <input type="email" name="email" id="edit-user-email" placeholder="Email Address" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full" required>
-                <input type="password" name="password" id="edit-user-password" placeholder="New Password (leave blank to keep)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
-                <select name="role_id" id="edit-user-role" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600 w-full">
-                    <option value="">No Role</option>
-                    {% for role in roles %}
-                    <option value="{{ role[0] }}">{{ role[1] }}</option>
-                    {% endfor %}
-                </select>
-                <div class="border p-3 rounded-lg bg-gray-300 dark:bg-zinc-900 border-gray-600 w-full">
-                    <label class="text-sm font-semibold mb-2 block">API Key</label>
-                    <code id="edit-user-api-key" class="text-xs font-mono break-all block bg-gray-200 dark:bg-zinc-800 px-2 py-1 rounded"></code>
-                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-2">Use this API key to authenticate API requests. Keep it secure!</p>
-                </div>
-                <div class="flex justify-end space-x-2">
-                    <button type="button" onclick="closeEditUserModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
-                    <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Save</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <!-- Add Role Modal -->
-    <div id="add-role-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50 overflow-y-auto py-8">
-        <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-3xl w-full mx-4 my-8">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Add New Role</h2>
-                <button onclick="closeAddRoleModal()" class="text-gray-500 hover:text-gray-700 hover:cursor-pointer">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form action="/users" method="POST" class="space-y-4">
-                <input type="hidden" name="action" value="add_role">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <input type="text" name="role_name" placeholder="Role Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" required>
-                    <input type="text" name="role_description" placeholder="Description (optional)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600">
-                </div>
-                <div class="mb-4">
-                    <h3 class="font-bold mb-3">Permissions</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto border border-gray-600 rounded-lg p-4 bg-gray-300 dark:bg-zinc-900">
-                        <!-- View Permissions -->
-                        <div class="col-span-full">
-                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">View Permissions</h4>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                                {% for perm in permissions %}
-                                {% if perm[3] == 'View' %}
-                                <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                    <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                    <span class="text-sm">{{ perm[2] }}</span>
-                                </label>
-                                {% endif %}
-                                {% endfor %}
-                            </div>
-                        </div>
-                        
-                        <!-- Device Management -->
-                        <div>
-                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Device Management</h4>
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'Device' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'Device Type' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                        </div>
-                        
-                        <!-- Network Management -->
-                        <div>
-                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Network Management</h4>
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'Subnet' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'DHCP' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                        </div>
-                        
-                        <!-- Rack Management -->
-                        <div>
-                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Rack Management</h4>
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'Rack' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                        </div>
-                        
-                        <!-- Admin -->
-                        <div>
-                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Administration</h4>
-                            {% for perm in permissions %}
-                            {% if perm[3] == 'Admin' %}
-                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="{{ perm[0] }}" class="mr-2">
-                                <span class="text-sm">{{ perm[2] }}</span>
-                            </label>
-                            {% endif %}
-                            {% endfor %}
-                        </div>
-                    </div>
-                </div>
-                <div class="flex justify-end space-x-2">
-                    <button type="button" onclick="closeAddRoleModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
-                    <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Add Role</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <!-- Edit Role Modal -->
-    <div id="edit-role-modal" class="hidden fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50 overflow-y-auto py-8">
-        <div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-3xl w-full mx-4 my-8">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Edit Role</h2>
-                <button onclick="closeEditRoleModal()" class="text-gray-500 hover:text-gray-700 hover:cursor-pointer">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form action="/users" method="POST" class="space-y-4">
-                <input type="hidden" name="action" value="edit_role">
-                <input type="hidden" name="role_id" id="edit-role-id">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <input type="text" name="role_name" id="edit-role-name" placeholder="Role Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600" required>
-                    <input type="text" name="role_description" id="edit-role-description" placeholder="Description (optional)" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-zinc-900 dark:text-gray-100 border-gray-600">
-                </div>
-                <div class="mb-4">
-                    <h3 class="font-bold mb-3">Permissions</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto border border-gray-600 rounded-lg p-4 bg-gray-300 dark:bg-zinc-900" id="edit-role-permissions">
-                        <!-- Permissions will be populated by JavaScript -->
-                    </div>
-                </div>
-                <div class="flex justify-end space-x-2">
-                    <button type="button" onclick="closeEditRoleModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Cancel</button>
-                    <button type="submit" class="px-4 py-2 bg-gray-200 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 hover:cursor-pointer rounded-lg">Save</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <script>
-        const permissions = {{ permissions | tojson | safe }};
-        const rolePermissions = {{ role_permissions | tojson | safe }};
-        
-        function showTab(tab) {
-            document.getElementById('users-tab').classList.add('hidden');
-            document.getElementById('roles-tab').classList.add('hidden');
-            document.getElementById('tab-users').classList.remove('border-blue-500', 'text-blue-600', 'dark:text-blue-400');
-            document.getElementById('tab-users').classList.add('border-transparent', 'text-gray-600', 'dark:text-gray-400');
-            document.getElementById('tab-roles').classList.remove('border-blue-500', 'text-blue-600', 'dark:text-blue-400');
-            document.getElementById('tab-roles').classList.add('border-transparent', 'text-gray-600', 'dark:text-gray-400');
-            
-            if (tab === 'users') {
-                document.getElementById('users-tab').classList.remove('hidden');
-                document.getElementById('tab-users').classList.remove('border-transparent', 'text-gray-600', 'dark:text-gray-400');
-                document.getElementById('tab-users').classList.add('border-blue-500', 'text-blue-600', 'dark:text-blue-400');
-            } else {
-                document.getElementById('roles-tab').classList.remove('hidden');
-                document.getElementById('tab-roles').classList.remove('border-transparent', 'text-gray-600', 'dark:text-gray-400');
-                document.getElementById('tab-roles').classList.add('border-blue-500', 'text-blue-600', 'dark:text-blue-400');
-            }
-        }
-        
-        function editUser(userId, name, email, roleId, apiKey) {
-            document.getElementById('edit-user-id').value = userId;
-            document.getElementById('edit-user-name').value = name;
-            document.getElementById('edit-user-email').value = email;
-            document.getElementById('edit-user-password').value = '';
-            document.getElementById('edit-user-role').value = (roleId === null || roleId === 'null') ? '' : roleId;
-            document.getElementById('edit-user-api-key').textContent = apiKey || 'No API Key';
-            document.getElementById('edit-user-modal').classList.remove('hidden');
-        }
-        
-        function closeEditUserModal() {
-            document.getElementById('edit-user-modal').classList.add('hidden');
-        }
-        
-        function showAddRoleModal() {
-            // Make sure edit modal is closed first
-            document.getElementById('edit-role-modal').classList.add('hidden');
-            // Clear any form data
-            const addForm = document.querySelector('#add-role-modal form');
-            if (addForm) {
-                addForm.reset();
-            }
-            // Show add modal
-            document.getElementById('add-role-modal').classList.remove('hidden');
-        }
-        
-        function closeAddRoleModal() {
-            document.getElementById('add-role-modal').classList.add('hidden');
-        }
-        
-        function editRole(roleId, roleName, roleDescription) {
-            // Make sure add modal is closed first
-            document.getElementById('add-role-modal').classList.add('hidden');
-            document.getElementById('edit-role-id').value = roleId;
-            document.getElementById('edit-role-name').value = roleName;
-            document.getElementById('edit-role-description').value = roleDescription || '';
-            
-            const permissionsDiv = document.getElementById('edit-role-permissions');
-            permissionsDiv.innerHTML = '';
-            
-            const rolePerms = rolePermissions[roleId] || [];
-            
-            // Group permissions by merged categories
-            const viewPerms = permissions.filter(p => p[3] === 'View');
-            const devicePerms = permissions.filter(p => p[3] === 'Device');
-            const deviceTypePerms = permissions.filter(p => p[3] === 'Device Type');
-            const subnetPerms = permissions.filter(p => p[3] === 'Subnet');
-            const dhcpPerms = permissions.filter(p => p[3] === 'DHCP');
-            const rackPerms = permissions.filter(p => p[3] === 'Rack');
-            const adminPerms = permissions.filter(p => p[3] === 'Admin');
-            
-            let html = '';
-            
-            // View Permissions
-            html += '                        <!-- View Permissions -->\n';
-            html += '                        <div class="col-span-full">\n';
-            html += '                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">View Permissions</h4>\n';
-            html += '                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">\n';
-            viewPerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            html += '                            </div>\n';
-            html += '                        </div>\n';
-            html += '                        \n';
-            
-            // Device Management
-            html += '                        <!-- Device Management -->\n';
-            html += '                        <div>\n';
-            html += '                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Device Management</h4>\n';
-            devicePerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            deviceTypePerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            html += '                        </div>\n';
-            html += '                        \n';
-            
-            // Network Management
-            html += '                        <!-- Network Management -->\n';
-            html += '                        <div>\n';
-            html += '                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Network Management</h4>\n';
-            subnetPerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            dhcpPerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            html += '                        </div>\n';
-            html += '                        \n';
-            
-            // Rack Management
-            html += '                        <!-- Rack Management -->\n';
-            html += '                        <div>\n';
-            html += '                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Rack Management</h4>\n';
-            rackPerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            html += '                        </div>\n';
-            html += '                        \n';
-            
-            // Admin
-            html += '                        <!-- Admin -->\n';
-            html += '                        <div>\n';
-            html += '                            <h4 class="font-semibold text-base mb-2 border-b border-gray-500 pb-1">Administration</h4>\n';
-            adminPerms.forEach(perm => {
-                const checked = rolePerms.includes(perm[0]) ? 'checked' : '';
-                html += `                            <label class="flex items-center mb-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-zinc-800 p-2 rounded">
-                                <input type="checkbox" name="permissions" value="${perm[0]}" ${checked} class="mr-2">
-                                <span class="text-sm">${perm[2]}</span>
-                            </label>\n`;
-            });
-            html += '                        </div>\n';
-            
-            permissionsDiv.innerHTML = html;
-            
-            document.getElementById('edit-role-modal').classList.remove('hidden');
-        }
-        
-        function closeEditRoleModal() {
-            document.getElementById('edit-role-modal').classList.add('hidden');
-        }
-        
-        function deleteRole(roleId, roleName) {
-            if (confirm(`Are you sure you want to delete the role "${roleName}"?`)) {
-                const form = document.createElement('form');
-                form.method = 'POST';
-                form.action = '/users';
-                form.innerHTML = `
-                    <input type="hidden" name="action" value="delete_role">
-                    <input type="hidden" name="role_id" value="${roleId}">
-                `;
-                document.body.appendChild(form);
-                form.submit();
-            }
-        }
-        
-        // Close modals when clicking outside
-        window.onclick = function(event) {
-            const editUserModal = document.getElementById('edit-user-modal');
-            const editRoleModal = document.getElementById('edit-role-modal');
-            const addRoleModal = document.getElementById('add-role-modal');
-            if (event.target === editUserModal) {
-                closeEditUserModal();
-            }
-            if (event.target === editRoleModal) {
-                closeEditRoleModal();
-            }
-            if (event.target === addRoleModal) {
-                closeAddRoleModal();
-            }
-        }
-    </script>
-</body>
-</html>

v1-to-v2-breaking-changes.md

@@ -0,0 +1,131 @@
+# v1 → v2 Breaking Changes
+
+This document lists breaking changes when upgrading from IPAM v1.x to v2.0.
+
+**Upgrade steps:** pull/deploy the v2 image or code, restart the application. Database migrations run automatically on startup via `init_db()`. No manual SQL is required for standard upgrades.
+
+---
+
+## Removed features
+
+| Feature | v1 | v2 |
+|---------|----|----|
+| Response caching / rate limiting | Flask-Limiter + in-app cache layer | Removed — direct DB queries |
+| In-app update checker | `/check_update` + header toast | Removed — check releases yourself |
+| Feature flags | Admin toggles for racks, tags, IP notes, bulk ops | Removed — features always available, gated by permissions only |
+| Backup & restore | Admin UI + `/backup/*` routes | Removed — use your own DB backup strategy |
+| Help page | `/help` | Removed |
+| Interactive API docs | `/api-docs` web page | Removed — see [API.md](API.md) |
+| Custom field “searchable” flag | UI checkbox + DB column | Removed — was never wired to search |
+| Device types | Device type CRUD, `device_type_id` on devices, rack placement filters | Removed — devices are untyped; use tags or custom fields instead |
+
+### Dependencies removed
+
+- `requests` (update checker)
+- `Flask-Limiter` and the custom cache module (already gone in v2 prep)
+
+---
+
+## Removed routes
+
+| Method | v1 path | Notes |
+|--------|---------|-------|
+| GET | `/check_update` | Update checker |
+| GET/POST | `/backup`, `/backup/create`, `/backup/download/<file>`, `/backup/restore`, `/backup/delete/<file>` | Backup UI |
+| GET | `/help` | Help page |
+| GET | `/api-docs` | Swagger-style docs |
+| GET/POST | `/admin/feature_flags` | Feature flag toggles |
+| GET | `/custom_fields/<entity_type>` | Duplicate of API; use `/api/v1/custom_fields/{entity_type}` |
+| GET | `/api/device/<id>/ip_history` | Moved — see below |
+| GET | `/api/ip/<ip>/history` | Moved — see below |
+| GET/POST/PUT/DELETE | `/api/v1/device-types`, `/api/v2/device-types` | Device types removed |
+
+---
+
+## API changes
+
+### v2 is API-only + Vue SPA
+
+v2 removes **all Jinja/HTML routes**. The UI is a Vue 3 SPA served from `static/dist/`. All functionality goes through `/api/v2/*`.
+
+| v1 | v2 |
+|----|-----|
+| `/api/v1/*` | **`/api/v2/*`** (v1 removed) |
+| Session via HTML login forms | `POST /api/v2/auth/login` + session cookie |
+| API key only on API routes | **Same routes** accept session cookie **or** API key |
+| `{ "devices": [...] }` list responses | **`{ "items": [...] }`** for all list endpoints |
+| `{ "tags" }`, `{ "users" }`, `{ "roles" }`, `{ "racks" }`, `{ "logs" }`, `{ "fields" }` wrappers | **`{ "items" }`** (audit also includes `total`; devices-by-tag includes `meta`) |
+
+### Version
+
+`GET /api/v2/info` reports `"api_version": "2.0"`.
+
+### IP history endpoints
+
+| v1 (removed) | v2 replacement | Auth |
+|--------------|----------------|------|
+| `GET /api/device/<id>/ip_history` | `GET /api/v2/devices/<id>/ip-history` | Session or API key |
+| `GET /api/ip/<ip>/history` | `GET /api/v2/ips/<ip>/history` | Session or API key |
+
+### Audit logging for API calls
+
+v1 logged **every** API request (including GETs) to the audit log as `api_usage`.
+
+v2 logs **mutating** requests only: `POST`, `PUT`, `DELETE`, `PATCH`. GET traffic is no longer audited. If you relied on GET audit entries for compliance, adjust your monitoring.
+
+---
+
+## Database migrations (automatic)
+
+On startup, v2 runs these migrations against existing databases:
+
+1. **Drop `FeatureFlags` table** — feature flags removed
+2. **Drop `CustomFieldDefinition.searchable` column** — if present
+3. **Remove orphaned permission `view_help`** — help page removed
+4. **Drop `Device.device_type_id` column and `DeviceType` table** — device types removed
+5. **Remove device-type permissions** — `view_device_types`, `add_device_type`, etc.
+
+No data loss for core IPAM entities (subnets, IPs, devices, racks, tags, users, audit log). Device type labels are not migrated; use tags or custom fields if you need classification.
+
+---
+
+## Permissions & sessions
+
+- **`view_help`** permission is removed from the database on upgrade.
+- **Device-type permissions** (`view_device_types`, `add_device_type`, etc.) are removed on upgrade.
+- Feature-flag toggles no longer hide UI; use **roles and permissions** instead.
+- Permissions are **cached in the session at login**. If an admin changes a user's role, that user must **log out and back in** for permission changes to take effect.
+
+---
+
+## Configuration
+
+No new required environment variables. Removed features did not introduce new config keys.
+
+Docker images no longer need a `/backups` volume mount for in-app backup (remove if you added it only for IPAM backup).
+
+---
+
+## Codebase layout (operators / fork maintainers)
+
+| v1 | v2 |
+|----|----|
+| `app.py` + `routes.py` + `cache.py` + `totp_utils.py` | Single `app.py` + `db.py` |
+| `templates/`, legacy `static/js` | **Deleted** — replaced by `frontend/` → `static/dist/` |
+| Server-rendered Tailwind | Vue 3 + Vite + Tailwind (auto light/dark, cyan accents) |
+
+---
+
+## Recommended pre-upgrade checklist
+
+1. **Back up your MariaDB/MySQL database** using your normal tooling (`mysqldump`, volume snapshot, etc.).
+2. Note any integrations using removed routes (update checker, backup API, legacy IP history paths).
+3. Deploy v2 and restart the container/process once.
+4. Verify login, home page, devices, and one API call with your API key.
+5. Have affected users re-login if roles were changed recently.
+
+---
+
+## Questions
+
+For API reference after upgrade, see [API.md](API.md).