# ArchNest Dashboard — Blueprint

> Complete spec for a 6-page custom dashboard. Portfolio showcase piece.

---

## Global Design Language

### Color Palette
| Role | Value | Usage |
|------|-------|-------|
| Background (page) | `#0D0E10` | Near-black, warm undertone |
| Background (cards) | `#141518` | Slightly elevated surfaces |
| Background (sidebar) | `#0A0B0D` | Darker than page |
| Border (cards) | `#1E2025` | Subtle 1px card outlines |
| Border (hover/active) | `#C8A434` | Gold highlight on interaction |
| Accent (primary) | `#C8A434` | Gold — links, active states, progress bars |
| Accent (success) | `#2ECC71` | Green — operational, running, completed |
| Accent (warning) | `#E67E22` | Orange — warnings, medium alerts |
| Accent (danger) | `#E74C3C` | Red — critical, high alerts, errors |
| Text (primary) | `#E8E6E0` | Warm white/cream |
| Text (secondary) | `#7A7D85` | Muted gray — labels, timestamps |
| Text (accent) | `#C8A434` | Gold — active nav, status labels |

### Typography
| Element | Style |
|---------|-------|
| Card titles | 12-13px, uppercase, letter-spacing 1px, secondary color |
| Large numbers | 28-36px, bold, primary color |
| Body text | 14px, primary color |
| Labels/descriptions | 12-13px, secondary color |
| Nav items | 14px, secondary (gold when active) |

### Card Style
- Border radius: 12px
- Background: `#141518`
- Border: 1px solid `#1E2025`
- Padding: 20-24px
- No shadows (flat design)
- Hover: border transitions to gold (0.2s ease)

---

## Shared Components (appear on every page)

### Sidebar (fixed left, ~80px)
- **Logo**: ArchNest arch icon (gold gradient) + "ARCHNEST" text (gold, 10px caps)
- **Nav items**: icon (18px) + label (14px), active = gold text + gold left border (3px)
- **Bottom**: Green dot + "System Status" / "All Systems Operational" (gold)

**Final Nav (6 items):**

| # | Icon | Label | Route |
|---|------|-------|-------|
| 1 | grid | Glance | `/` |
| 2 | server | Infrastructure | `/infrastructure` |
| 3 | globe | Network | `/network` |
| 4 | bookmark | BookNest | `/booknest` |
| 5 | terminal | Terminal | `/terminal` |
| 6 | settings | Settings | `/settings` |

### Top Bar (~56px height)
- **Left**: Page title (bold, uppercase, 18px)
- **Center-right**: Search bar (rounded, ~300px, placeholder varies by page)
- **Right**: Bell icon (with badge) + User avatar (36px, gold ring) + "ArchNest Ops" / "Administrator" + chevron

### Hero Banner
- Full width of main content area, 12px radius, overflow hidden
- Image: `archnest-brand.png` (dark cityscape + gold arch)
- Height varies: ~200px on Glance, ~120px on sub-pages
- Not shown on Terminal or Settings pages

### Page Footer / Status Bar
- Height: ~40px, subtle top border
- Content: Contextual stats (varies per page) + "Last updated: 2m ago" (right)

---

## Interactions & Behaviors

- Sidebar nav: click navigates, gold highlight on active
- Card hover: border → gold (0.2s)
- Close buttons (X): hide/collapse cards
- "View all" links: navigate to full views
- Progress rings/bars: animated fill on load
- Sparklines: subtle animation, periodic update

---

## Responsive Behavior

- **Desktop (>1200px)**: Full layout
- **Tablet (768-1200px)**: Sidebar → icons only (~50px), cards 2-column
- **Mobile (<768px)**: Sidebar → bottom nav, cards single column

---

## Tech Stack

- React 19 + Vite + TypeScript
- Zustand (state)
- Chart.js or Recharts (sparklines, donuts, area charts)
- Lucide React (icons)
- xterm.js (terminal page)
- CSS Modules or Tailwind
- Deploy: Docker on racknerd1 → NPM proxy at archnest.snsnetlabs.com

---

## Assets

| Asset | CDN Path | Usage |
|-------|----------|-------|
| Logo | `logos/brands/archnest-logo.png` | Sidebar |
| Banner | `backgrounds/archnest-brand.png` | Hero |
| Network bg | `backgrounds/archnest-network-bg.jpg` | Network page alt |
| Geometric bg | `backgrounds/archnest-geometric-bg.jpg` | Texture overlay |

CDN base: `https://raw.githubusercontent.com/SamuelSJames/assets-public/master/`

---

## Page 1: Glance (`/`)

> Main operations dashboard — system health at a glance

### Status Cards Row (4 cards)

| Card | Icon | Number | Subtitle | Extra |
|------|------|--------|----------|-------|
| System Status | checkmark | 100% | All Systems Operational | Circular progress ring + sparkline |
| Infrastructure | server | 24 | Total Resources | 🟢24 Running 🟡0 Warning 🔴0 Critical |
| Security | shield | 2 | Active Alerts | 🟡2 Low 🟡0 Medium 🔴0 High |
| Network | nodes | 98.7% | Network Uptime | Sparkline |

### Middle Row (3 columns: 30% | 40% | 30%)

**Resource Overview** (left):
- 5 progress bars: Compute 18/24, Storage 12.4/20 TB, Database 8/12, Network 98.7%, Containers 32/40

**Recent Activity** (center):
- Backup completed (2m) | Security scan completed (8m) | Instance launched (15m) | Config updated (22m) | User login (35m)

**Top Alerts** (right):
- 🔴 High CPU Usage – App Server 02 (2m)
- 🟡 Disk Space Low – Database Cluster 01 (15m)
- 🟡 Unauthorized Login – Web Frontend (32m)
- 🟡 SSL Cert Expiring – api.archnest.io (1h)

### Bottom Row (2 columns: 65% | 35%)

**Network Traffic** (left):
- Area chart (gold gradient) + stats: Incoming 1.23 Gbps (↓12.4%), Outgoing 1.08 Gbps (↑8.7%)

**Shortcuts** (right):
- 4 icon buttons: Add Server | Create Backup | Deploy App | View Logs

### Footer Stats
- System Status 100% | 24 Resources | 2 Alerts | 98.7% Uptime

---

## Page 2: Infrastructure (`/infrastructure`)

> Monitor and manage your cloud infrastructure

### Sub-Tabs
Overview | Compute | Storage | Network | Database | Containers | Load Balancers | DNS | Backups | Tags

**Actions**: "+ Add Resource" button, gear icon

### Status Cards Row (5 cards)

| Card | Number | Subtitle | Trend |
|------|--------|----------|-------|
| Total Resources | 128 | Across all regions | ↑12.4% 7d |
| Total Cost (MTD) | $24,560.75 | Across all services | ↓8.7% month |
| Resource Health | 98.7% | Healthy | ↑2.1% 7d |
| Active Alerts | 2 | Requires attention | ↓63% 7d |
| Uptime | 99.98% | Global uptime | ↑0.01% 7d |

### Middle Row (30% | 40% | 30%)

**Resource Distribution** (left):
- Donut chart: 128 Total — Compute 38 (29.7%), Storage 24 (18.8%), Database 16 (12.5%), Network 20 (15.6%), Containers 18 (14.1%), Others 12 (9.4%)

**Infrastructure Map** (center):
- Dark world map with gold glowing dots (region markers), connection lines
- Footer: 6 Regions | 18 AZs | 128 Resources | 🟢 Live

**Top Resources by Utilization** (right):
- web-app-01 (m6i.large) 85% | api-server-02 (c6i.xlarge) 72% | db-primary (db.r6g.xlarge) 68% | cache-cluster 55% | worker-node-01 48%

### Bottom Row (35% | 35% | 30%)

**Resource Trend** (left):
- Multi-line area chart (7 days): Compute, Storage, Database, Network lines

**Cost Breakdown MTD** (center):
- Donut: $24,560.75 Total — Compute $12,450 (50.7%), Storage $5,213 (21.2%), Database $3,452 (14.1%), Network $2,134 (8.7%), Others $1,310 (5.3%)

**Recent Activity** (right):
- EC2 web-app-01 created (2m) | RDS backup (15m) | SG updated (32m) | S3 bucket created (1h) | LB updated (2h)

### Footer Stats
- AWS | 6 Regions | 18 AZs | 128 Resources | 98.7% Health | $24,560.75 MTD | 2 Alerts

---

## Page 3: Network (`/network`)

> Monitor and manage your network performance and security

### Sub-Tabs
Overview | Traffic | Topology | Devices | Interfaces | VPN | DNS | Firewalls | Load Balancers | Alerts | Reports

**Actions**: "Last 24 Hours" dropdown, "Export Report" button

### Status Cards Row (6 cards)

| Card | Number | Trend |
|------|--------|-------|
| Network Health | 98.7% "Excellent" | ↑2.3% yesterday |
| Total Traffic | 1.23 Tbps | ↑18.6% yesterday |
| Packet Loss | 0.02% | ↓0.01% yesterday |
| Active Connections | 28,457 | ↑6.7% yesterday |
| Threats Blocked | 152 | ↑12.4% yesterday (⚠) |
| Avg. Latency | 12.4 ms | ↓8.1% yesterday |

### Middle Row (25% | 50% | 25%)

**Top Talkers** (left):
- web-app-01 203.4 Gbps | db-primary 156.7 Gbps | cache-cluster 98.3 Gbps | api-gateway 76.1 Gbps | backup-server 54.8 Gbps

**Network Topology** (center):
- Dark world map with gold node dots, connection lines, glow effects
- Legend: 🟢 Live | 🟡 Warning | 🔴 Critical
- Controls: Zoom +/-, Fullscreen

**Interface Utilization + Alert Summary** (right, stacked):
- Interfaces: ethernet1/1 85%, 1/2 72%, 1/3 68%, 1/4 55%, 1/5 48% (green/gold bars)
- Alert Summary: 🔴 2 Critical | 🟡 5 Warning | 🟢 12 Info

### Bottom Row (35% | 35% | 30%)

**Traffic Over Time** (left):
- Area chart (24h): Inbound (gold), Outbound (amber), Total (teal)
- Y: 250 Gbps – 1.5 Tbps, X: 00:00–20:00

**Protocol Distribution** (center):
- Donut: 1.23 Tbps Total — TCP 65.2%, UDP 18.7%, ICMP 7.3%, DNS 4.1%, Others 4.7%

**Recent Events** (right):
- ethernet1/2 UP (2m) | High bandwidth web-app-01 (8m) | New device 10.0.1.45 (15m) | VPN tunnel us-west-2 (22m) | Blocked threat 185.199.108.153 (35m)

### Footer Stats
- 6 Regions | 42 Sites | 248 Devices | 1,245 Interfaces | 28,457 Connections | 98.7% Health

---

## Page 4: BookNest (`/booknest`)

> Your Digital Library — categorized bookmarks with health monitoring

### Page Stats (below title)
🔗 **312** Links | 📁 **18** Categories | ⭐ **12** Favorites

### Layout: Main (75%) + Right Sidebar (25%)

### Quick Access Row (5 cards)
| Category | Icons shown | Count |
|----------|------------|-------|
| Infrastructure | Proxmox, Cloudflare, Portainer, Cockpit, CasaOS | 5 links |
| Development | GitHub, GitLab, Gitea, VSCode, Docker | 5 links |
| AI Tools | ChatGPT, Claude, AI icons, OpenWebUI | 5 links |
| AWS | AWS service icons | 5 links |
| Networking | NetBird, Wireshark, Cisco, Ubiquiti | 5 links |

### Bookmark Groups — Row 1 (4 columns)

**Infrastructure & Self Hosted** (10 links):
CasaOS, Proxmox (pve1), Proxmox (mtr), Portainer, Cockpit, Cloudflare, NPM, NetBird, Linode, RackNerd

**Development & Code** (8 links):
GitHub, Gitea, Trillium Notes, VSCode Web, Docker Hub, GitLab, Terraform Registry, Ansible Galaxy

**Lab & Networking** (8 links):
GNS3, EVE-NG, OpenClaw, NetBird, Cisco Docs, Juniper Docs, Wireshark, iPerf3

**AWS** (8 links):
AWS Console, IAM, EC2, S3, CloudFormation, Route 53, VPC, Billing

### Bookmark Groups — Row 2 (4 columns)

**AI Tools** (7 links):
ChatGPT, Claude, Gemini, PartyRock, Perplexity, OpenWebUI, Ollama

**Learning** (6 links):
WGU, Udemy, AWS Skill Builder, YouTube, LinkedIn Learning, Coursera

**Finance** (5 links):
Bank, Budget, Investments, Retirement, Credit Cards

**Life** (6 links):
Calendar, Email, Photos, Drive, Notes, Travel

### Right Sidebar Widgets

**Favorites**: Proxmox (pve1), GitHub, AWS Console, ChatGPT, NetBird

**Recently Used**: Proxmox 5m, GitHub 15m, AWS Console 1h, Trilium 2h, GNS3 3h

**Link Health** (donut): 304 Online, 6 Warning, 2 Offline (312 total)

**Category Breakdown** (donut): Infrastructure 32%, Development 24%, AI Tools 18%, Learning 10%, Finance 8%, Life 8%

### Link Item Design
- Icon (colored, 16-20px) + Name (14px) + Star toggle (right, gold when favorited)

---

## Page 5: Terminal (`/terminal`)

> Embedded SSH terminal — no hero banner, no cards grid

### Layout: Full-height terminal viewport

### Tab Bar (top, 40px)
- Tabs: host name + colored dot (🟢 connected, ⚪ disconnected)
- Active tab: gold bottom border
- "+" button: open new connection
- Quick-connect dropdown with saved hosts

**Saved Hosts:**
| Label | Connection |
|-------|-----------|
| Pre (Audio) | ssh pre |
| Proxmox | ssh mtr |
| Linode (NPM) | ssh linode |
| RackNerd 1 | ssh racknerd1 |
| RackNerd 3 (Forge) | ssh racknerd3 |
| Studio (DevOps) | ssh studio |

### Terminal Viewport
- Font: JetBrains Mono / Fira Code, 14px
- Prompt: Gold | Commands: Warm white | Output: Secondary gray | Errors: Red | Dirs: Teal
- Cursor: Gold block, blinking
- Scrollback: 5000 lines

### Status Bar (bottom, 28px)
- 🟢 Connected | Host: `pre` | Session: 12m 34s | Shell: bash
- Right: Split pane | Fullscreen | Disconnect

### Implementation
- xterm.js for browser terminal
- Node.js WebSocket-to-SSH bridge on racknerd1

---

## Page 6: Settings (`/settings`)

> User preferences and system configuration — no hero banner

### Layout: Settings Nav (200px left) + Content (right, scrollable)

### Nav Sections
1. Profile | 2. Appearance | 3. Integrations | 4. Notifications | 5. Data & Backup | 6. About

### Profile
- Avatar (64px, gold ring) + Display Name + Role (badge) + Email + Timezone
- "Save Changes" button (gold)

### Appearance
- Theme: Dark/Light toggle
- Accent: Color swatches (Gold active, Teal, Purple, Blue, Green, Red)
- Font Size: 12-16px slider
- Sidebar: Expanded/Collapsed toggle
- Animations: On/Off
- Card Border Radius: 4-16px slider

### Integrations
| Service | Status | Config Fields |
|---------|--------|---------------|
| Proxmox | 🟢 | Host URL, API Token |
| Docker | 🟢 | Socket/remote URL |
| NetBird | 🟢 | API key |
| Cloudflare | 🟢 | API token, Zone ID |
| AWS | 🟢 | Access Key, Secret (masked), Region |
| Uptime Kuma | ⚪ | URL, API key |
| Weather API | 🟢 | Location, Units |

- Masked secrets with eye toggle, "Test Connection" per card

### Notifications
- Enable toggle | Threshold dropdown (All/Critical/Warning+) | Email toggle | Browser push | Sound + volume

### Data & Backup
- Export/Import Bookmarks (JSON) | Export Settings | Reset to Defaults (danger) | Clear Cache

### About
- App: ArchNest Dashboard v1.0.0
- Author: Samuel James
- Repo: github.com/SamuelSJames/archnest
- Stack: React 19, Vite, TypeScript
- License: MIT