13 KiB
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
- 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