74 lines
2.6 KiB
Markdown
74 lines
2.6 KiB
Markdown
# 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)
|