# 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)