# RackMapper

A self-hosted, dark-mode web app for visualising and managing network rack infrastructure. Built for Unraid / Docker single-container deployment.

## Features

### Rack Planner (`/rack`)
- Drag-and-drop module placement from a device palette onto U-slots
- Drag modules between racks or reorder racks via header grip
- Resize modules by dragging the bottom handle
- Click any module to edit name, IP, manufacturer, model, notes, uSize
- Port indicator dots — click any dot to open the port configuration modal
  - Set mode (Access / Trunk / Hybrid), native VLAN, tagged VLANs
  - Quick-create VLANs without leaving the modal
- Export the full rack view as PNG

### Service Mapper (`/map`)
- React Flow canvas for mapping service dependencies and traffic flows
- Right-click canvas → add any node type at cursor position
- Right-click node → Edit, Duplicate, Delete
- Right-click edge → Toggle animation, change edge type, Delete
- Double-click a node → edit label, accent colour, and rack module link
- Auto-populate nodes from all rack modules ("Import Rack" button)
- Connect nodes by dragging from handles; Delete key removes selected items
- Minimap, zoom controls, snap-to-grid (15px), PNG export

### VLAN Management (`/vlans`)
- Create, edit, and delete VLANs with ID, name, description, and colour
- VLANs defined here are available in all port configuration modals

---

## Quick Start (Docker Compose)

**1. Create a `docker-compose.yml`:**

```yaml
version: '3.8'
services:
  rackmapper:
    image: rackmapper
    build: .
    container_name: rackmapper
    ports:
      - "3001:3001"
    environment:
      - NODE_ENV=production
      - PORT=3001
      - DATABASE_URL=file:./data/rackmapper.db
      - ADMIN_USERNAME=admin
      - ADMIN_PASSWORD=yourpassword
      - JWT_SECRET=your-random-secret-min-32-chars
      - JWT_EXPIRY=8h
    volumes:
      - ./data:/app/data
    restart: unless-stopped
```

**2. Build and run:**
```bash
docker compose up --build -d
```

**3. Open** `http://localhost:3001` and log in with the credentials above.

---

## Environment Variables

| Variable | Required | Default | Description |
|---|---|---|---|
| `ADMIN_USERNAME` | Yes | `admin` | Login username |
| `ADMIN_PASSWORD` | Yes | — | Login password (plain text) |
| `JWT_SECRET` | Yes | — | Secret for signing JWTs (min 32 chars) |
| `JWT_EXPIRY` | No | `8h` | Session token lifetime |
| `DATABASE_URL` | No | `file:./data/rackmapper.db` | SQLite file path |
| `PORT` | No | `3001` | HTTP port |
| `NODE_ENV` | No | — | Set to `production` in Docker |

To change the password, update `ADMIN_PASSWORD` in your Docker environment and restart the container.

---

## Data Persistence

The SQLite database is stored at `./data/rackmapper.db` inside the container. Mount `./data:/app/data` to persist it across container restarts (already included in the compose file above).

---

## Tech Stack

| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| Styling | Tailwind CSS (dark-mode only) |
| State | Zustand |
| Node Graph | React Flow (`@xyflow/react` v12+) |
| Drag & Drop | `@dnd-kit/core` + `@dnd-kit/sortable` |
| Backend | Node.js + Express |
| Database | SQLite via Prisma ORM (`better-sqlite3`) |
| Auth | JWT in `httpOnly` cookie |
| Containerisation | Docker — single container serves API + static build |