simple-pos-system/PLANS AND STRATEGIES/05_SYSADMIN_PANEL.md

Guide 05 — Sysadmin Panel (React + Vite, Cloud-hosted)

Overview

A simple web app hosted on your VPS alongside the cloud backend. Used exclusively by you (sysadmin) to manage all registered restaurant sites. Not used in day-to-day restaurant operations.

---

Project Structure

sysadmin_panel/
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── api/client.js        # Points to CLOUD backend URL
│   ├── store/authStore.js
│   ├── pages/
│   │   ├── LoginPage.jsx
│   │   ├── SitesPage.jsx    # Home — list of all sites
│   │   ├── SiteDetailPage.jsx
│   │   └── RegisterSitePage.jsx
│   └── components/
│       ├── SiteCard.jsx
│       ├── LicenseStatus.jsx
│       └── ConfirmModal.jsx
└── package.json

---

Pages

LoginPage

• Username + password (full password, not PIN — this is your personal admin tool)
• Redirects to SitesPage on success

SitesPage

• Cards or table of all registered sites
• Each shows: name, owner, license expiry, last heartbeat, status (active/locked)
• Color indicator: green (active, recent heartbeat) | yellow (no heartbeat >12h) | red (locked/expired)
• "Register New Site" button
• Click site → SiteDetailPage

SiteDetailPage

• Site info: name, owner, contact, site ID
• License section: expiry date, "Extend License" button (date picker)
• Status section: last heartbeat timestamp + IP, current lock status
• Actions:
  • Lock Site (with reason input) → calls POST /api/sites/:id/lock
  • Unlock Site → calls POST /api/sites/:id/unlock
  • Delete/Deregister site (with confirmation)
• Heartbeat history (last 10 check-ins): timestamp + IP

RegisterSitePage

• Form: restaurant name, owner name, contact email
• On submit: calls POST /api/sites → displays the generated site_id and secret_key
• One-time display warning: "Copy this secret key now. It will not be shown again."
• These credentials are then configured in the local backend's environment

---

UI Design Direction

• Theme: Dark, utilitarian. This is your ops tool, not a customer-facing product.
• Accent: Cyan or electric blue. Clear status colors (green/yellow/red) for site health.
• Density: Compact. You want to see all sites at a glance.
• No over-design needed — functional and clear is the goal.

---

Deployment

• Build with vite build, serve static files via nginx on your VPS
• Or run as a separate Vite dev server proxied through nginx
• Protect with nginx basic auth as an extra layer (optional but recommended)