405 lines
13 KiB
Markdown
405 lines
13 KiB
Markdown
# 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
|