Merge pull request #12 from jasonMPM/v9

Add files via upload

README.md

@@ -1,54 +1,64 @@
-# UniFi Access Badge-In Dashboard (V3)
+# UniFi Access Badge-In Dashboard
 
-A Dockerised Flask + SQLite web app that receives UniFi Access `access.door.unlock` webhooks,
-resolves UUIDs to real user names via the UniFi Access API, and displays a modern dark
-attendance dashboard with on-time / late status, first + latest badge times, and a test reset button.
+A Dockerised Flask + SQLite attendance dashboard that receives real-time door unlock
+webhooks from the **UniFi Access Developer API**, resolves badge holders to real names,
+and displays a live attendance table with first/latest badge times and ON TIME / LATE status.
 
 ---
 
-## Features
+## Requirements
 
-- Receives webhooks from the UniFi Access developer API or legacy Alarm Manager format
-- Resolves badge holder UUIDs to real names via the UniFi Access REST API
-- User name cache stored in SQLite, auto-refreshed every 6 hours
-- **First Badge In** column — locked to the earliest entry of the day, never overwritten
-- **Latest Badge In** column — updates with each subsequent badge-in
-- ON TIME / LATE status based on a configurable cutoff time (green / red chips)
-- **Sync Users** button — manually pulls the latest user list from your controller
-- **Reset Day** button — confirmation modal wipes all records for the selected date (testing only)
-- Fully Dockerised — single container, SQLite persisted to a host volume
+- Unraid server (or any Linux host with Docker + Docker Compose)
+- UniFi OS console running **UniFi Access 1.9.1 or later**
+- UniFi Access on the same LAN as your Unraid server
+- Port **12445** open from your Unraid host to the UniFi controller IP
+- A UniFi Access **Developer API token** (NOT a UniFi OS / Network API token)
 
 ---
 
-## Project layout
+## Step 1 — Open firewall port 12445
 
-```
-.
-├── app.py                  # Flask application + API endpoints
-├── requirements.txt        # Python dependencies
-├── Dockerfile              # Container image definition
-├── docker-compose.yml      # Compose file for Unraid deployment
-├── .env.example            # Environment variable template (copy to .env)
-├── .gitignore
-└── static/
-    └── index.html          # Single-page dashboard UI
+The UniFi Access Open API runs exclusively on **port 12445** (HTTPS, self-signed cert).
+Your Unraid server and any machine running the dashboard must be able to reach it.
+
+In UniFi Network → Settings → Firewall & Security → Firewall Rules, add a **LAN IN** rule:
+
+| Field | Value |
+|---|---|
+| Action | Accept |
+| Protocol | TCP |
+| Destination Port | 12445 |
+| Source | your LAN subnet (e.g. `10.0.0.0/8`) |
+
+Verify from your Unraid SSH terminal or PowerShell:
+
+```bash
+# Linux / Unraid:
+nc -zv 10.0.0.1 12445
+
+# Windows PowerShell:
+Test-NetConnection -ComputerName 10.0.0.1 -Port 12445
+# TcpTestSucceeded : True  ← required
 ```
 
 ---
 
-## Step 1 — Generate a UniFi Access API token
+## Step 2 — Generate a UniFi Access Developer API token
 
-1. Open your **UniFi OS** web interface (e.g. `https://192.168.1.1`).
-2. Navigate to **UniFi Access → Settings → Integrations** (or **Developer API**).
-3. Click **Create API Key**, give it a name (e.g. `Dashboard`), and copy the token.
+> ⚠️ This token is different from the UniFi OS / Network API token.
+> Creating it in the wrong place will result in 401 Unauthorized errors.
 
-> Use a dedicated read-only admin account to generate the token where possible.
+1. Open your UniFi OS console at `https://<controller-ip>` in a browser.
+2. Navigate into the **Access** app (blue door icon).
+3. Go to **Settings → General → Advanced → API Token**.
+4. Click **Create New**, enter a name and validity period, enable **all permission scopes**.
+5. Click **Create** and **immediately copy the token** — it is shown only once.
 
 ---
 
-## Step 2 — Clone the repo on your Unraid server
+## Step 3 — Clone the repo on Unraid
 
-SSH into Unraid and run:
+SSH into your Unraid server and run:
 
 ```bash
 cd /mnt/user/appdata
@@ -58,18 +68,20 @@ cd unifi-access-dashboard
 
 ---
 
-## Step 3 — Create your .env file
+## Step 4 — Create your .env file
 
 ```bash
 cp .env.example .env
 nano .env
 ```
 
-Fill in your values:
+Fill in all values:
 
 ```dotenv
-UNIFI_HOST=192.168.1.1          # IP address of your UniFi OS controller
-UNIFI_API_TOKEN=YOUR_TOKEN_HERE # Bearer token from Step 1
+UNIFI_HOST=10.0.0.1              # IP of your UniFi OS controller
+UNIFI_PORT=12445                 # UniFi Access Open API port — do not change
+UNIFI_API_TOKEN=YOUR_TOKEN_HERE  # Developer API token from Step 2
+WEBHOOK_SECRET=                  # Leave blank until Step 6 gives you the secret
 TZ=America/Chicago               # Your local timezone
 DB_PATH=/data/dashboard.db       # Path inside the container — do not change
 ```
@@ -78,126 +90,133 @@ DB_PATH=/data/dashboard.db      # Path inside the container — do not change
 
 ---
 
-## Step 4 — Build and start the container
+## Step 5 — Build and start the container
 
 ```bash
-docker compose up -d --build
+cd /mnt/user/appdata/unifi-access-dashboard
+/usr/bin/docker compose up -d --build
 ```
 
 The container will:
 - Build the image from the local `Dockerfile`
 - Start Flask on port **8000**
 - Create `/data/dashboard.db` inside the container (mapped to `./data/` on the host)
-- Immediately sync users from your UniFi Access controller
+- Immediately sync all users from your UniFi Access controller
 - Schedule a user cache refresh every 6 hours
 
 Verify it is running:
 
 ```bash
-docker ps
+/usr/bin/docker ps
 # Should show: unifi-access-dashboard   Up X seconds
-```
 
-Check logs:
-
-```bash
-docker logs -f unifi-access-dashboard
+/usr/bin/docker logs -f unifi-access-dashboard
+# Should show: INFO:app:Synced X users from UniFi Access
 ```
 
 ---
 
-## Step 5 — Register the webhook with UniFi Access (run once)
+## Step 6 — Register the webhook with UniFi Access
 
-Run this from any machine on the same LAN as your controller.
-Replace `192.168.1.1`, `YOUR_TOKEN_HERE`, and `YOUR_UNRAID_IP` with your real values:
+This registers your dashboard URL with UniFi Access so it receives door unlock events.
+Run this **once** from inside the container console.
+
+### Open the container console
+
+In Unraid UI → **Docker tab** → click `unifi-access-dashboard` → **Console**
+
+Then paste this Python script (replace values with yours):
 
 ```bash
-curl -k -X POST "https://192.168.1.1:45/api1/webhooks/endpoints" \
-  -H "Authorization: Bearer YOUR_TOKEN_HERE" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "name": "Dashboard Unlock Events",
-    "endpoint": "http://YOUR_UNRAID_IP:8000/api/unifi-access",
+python3 -c "
+import requests, urllib3
+urllib3.disable_warnings()
+
+HOST     = '10.0.0.1'
+TOKEN    = 'YOUR_ACCESS_DEVELOPER_TOKEN_HERE'
+DASH_URL = 'http://YOUR_UNRAID_IP:8000/api/unifi-access'
+
+r = requests.post(
+    f'https://{HOST}:12445/api/v1/developer/webhooks/endpoints',
+    headers={
+        'Authorization': f'Bearer {TOKEN}',
+        'Content-Type': 'application/json'
+    },
+    json={
+        'name': 'Dashboard Unlock Events',
+        'endpoint': DASH_URL,
+        'events': ['access.door.unlock']
+    },
+    verify=False,
+    timeout=10
+)
+print('Status:', r.status_code)
+print('Response:', r.text)
+"
+```
+
+A successful response looks like:
+
+```json
+{
+  "code": "SUCCESS",
+  "data": {
+    "endpoint": "http://10.2.0.11:8000/api/unifi-access",
     "events": ["access.door.unlock"],
-    "headers": { "X-Source": "unifi-access" }
-  }'
+    "id": "afdb4271-...",
+    "name": "Dashboard Unlock Events",
+    "secret": "6e1d30c6ea8fa423"
+  }
+}
 ```
 
-Verify it was registered:
+Copy the **`secret`** value from the response.
+
+### Add the secret to your .env
+
+On Unraid SSH:
 
 ```bash
-curl -k -X GET "https://192.168.1.1:45/api1/webhooks/endpoints" \
-  -H "Authorization: Bearer YOUR_TOKEN_HERE"
+nano /mnt/user/appdata/unifi-access-dashboard/.env
+# Set: WEBHOOK_SECRET=6e1d30c6ea8fa423  (use your actual secret)
 ```
 
-You should see your webhook listed with a unique `id` field.
+Then restart the container to pick up the new value:
 
-> **Note:** The UniFi Access API runs on **port 45** over HTTPS with a self-signed certificate.
-> Always use `-k` with curl, and `verify=False` is already set in the Python code.
+```bash
+/usr/bin/docker compose up -d --build
+```
 
 ---
 
-## Step 6 — Open the dashboard
+## Step 7 — Open the dashboard
 
-In a browser navigate to:
+Navigate to:
 
 ```
 http://<UNRAID-IP>:8000/
 ```
 
-### Using the dashboard
+### Dashboard controls
 
 | Control | Description |
 |---|---|
 | **Date picker** | Choose which day to view |
-| **Badged in by** | Set your on-time cutoff (24-hr format, e.g. `09:00`) |
-| **Refresh** | Reload the table for the selected date and cutoff |
-| **Sync Users** | Immediately pull the latest user list from UniFi Access |
-| **Reset Day** | Delete all badge-in records for the selected date (testing only — requires confirmation) |
+| **Badged in by** | Set your on-time cutoff (e.g. `09:00 AM`) |
+| **Refresh** | Reload the table for the selected date/cutoff |
+| **Sync Users** | Immediately pull latest users from UniFi Access |
+| **Reset Day** | Delete all badge records for the selected date (testing only) |
 
-### Status chips
-
-| Chip | Meaning |
-|---|---|
-| 🟢 ON TIME | First badge-in was at or before the cutoff |
-| 🔴 LATE | First badge-in was after the cutoff |
-
-### Columns
+### Dashboard columns
 
 | Column | Description |
 |---|---|
 | **#** | Row number |
 | **Name** | Resolved display name from UniFi Access |
-| **First Badge In** | Earliest door entry for the day — never changes |
-| **Latest Badge In** | Most recent door entry — shows *"— same"* if only one badge event |
+| **First Badge In** | Earliest door entry for the day — never changes once set |
+| **Latest Badge In** | Most recent entry — shows *"— same"* if only one badge event |
 | **Actor ID** | First 8 characters of the UniFi user UUID |
-| **Status** | ON TIME or LATE chip based on first badge vs cutoff |
-
----
-
-## Unraid GUI deployment (alternative to docker-compose)
-
-If you prefer the Unraid Docker tab UI after pushing an image to Docker Hub:
-
-```bash
-# On your workstation:
-docker build -t <dockerhub-user>/unifi-access-dashboard:latest .
-docker push <dockerhub-user>/unifi-access-dashboard:latest
-```
-
-Then in Unraid → **Docker → Add Container**:
-
-| Field | Value |
-|---|---|
-| Name | `unifi-access-dashboard` |
-| Repository | `<dockerhub-user>/unifi-access-dashboard:latest` |
-| Network Type | Bridge |
-| Port mapping | Host `8000` → Container `8000` (TCP) |
-| Path mapping | Host `/mnt/user/appdata/unifi-access-dashboard/data` → Container `/data` |
-| Variable: `UNIFI_HOST` | `192.168.1.x` |
-| Variable: `UNIFI_API_TOKEN` | your token |
-| Variable: `TZ` | e.g. `America/Chicago` |
-| Variable: `DB_PATH` | `/data/dashboard.db` |
+| **Status** | ON TIME (green) or LATE (red) based on first badge vs cutoff |
 
 ---
 
@@ -206,39 +225,45 @@ Then in Unraid → **Docker → Add Container**:
 ```bash
 cd /mnt/user/appdata/unifi-access-dashboard
 git pull
-docker compose up -d --build
+/usr/bin/docker compose up -d --build
 ```
 
+The SQLite database in `./data/` persists across rebuilds automatically.
+
 ---
 
-## API endpoints reference
+## API reference
 
-| Method | Path | Query params | Description |
+| Method | Path | Params | Description |
 |---|---|---|---|
 | `POST` | `/api/unifi-access` | — | Receives UniFi Access webhook |
 | `GET` | `/api/first-badge-status` | `date`, `cutoff` | Returns first + latest badge per user |
 | `GET` | `/api/sync-users` | — | Triggers immediate user cache sync |
-| `DELETE` | `/api/reset-day` | `date` | Deletes all records for the given date |
+| `DELETE` | `/api/reset-day` | `date` | Deletes all records for given date |
+| `GET` | `/api/debug-user-cache` | `actor_id` | Queries Access API for a specific user ID |
 
 ---
 
 ## Troubleshooting
 
-| Symptom | Likely cause | Fix |
+| Symptom | Cause | Fix |
 |---|---|---|
-| Names show as `Unknown (UUID…)` | Users not cached yet | Click **Sync Users** or wait for the 6-hr job |
-| Webhook POST not arriving | Firewall or Docker network | Ensure port `8000` is reachable from the UniFi controller IP |
-| `curl` returns SSL error | Self-signed cert on controller | Add `-k` to curl; already handled in Python |
-| 404 on `/api1/users` | API path differs for your firmware | Try `/api/v1/users`; check your Access app version |
-| Flask exits immediately | `.env` missing or malformed | Ensure `.env` exists alongside `docker-compose.yml` |
-| Duplicate events | Both Alarm Manager and API webhooks active | Remove one; both are harmless but will store duplicate rows |
-| Container rebuilds but old DB persists | Volume mount working correctly | This is expected — `./data/` survives rebuilds |
+| `Webhook signature mismatch` | Wrong or missing `WEBHOOK_SECRET` in `.env` | Copy `secret` from Step 6 response into `.env`, rebuild |
+| `401 Unauthorized` on webhook | Token invalid or wrong scope | Regenerate token in Access → Settings → General → API Token |
+| `Port 12445 connection refused` | Firewall blocking port | Add LAN IN firewall rule in UniFi Network (Step 1) |
+| Names show as `(Unknown)` | Users not cached yet | Click **Sync Users**; check logs for `Synced X users` |
+| `before_first_request` error | Running Flask 3.0+ with old code | Use the latest `app.py` which uses `with app.app_context()` |
+| `-SkipCertificateCheck` error in PowerShell | PowerShell 5.1 (not Core) | Add `[System.Net.ServicePointManager]::ServerCertificateValidationCallback = { $true }` before the request |
+| Webhook POST returns 400 / no actor | Old `app.py` extracting wrong field | Use latest `app.py` which reads `data.actor.id` |
+| Dashboard shows stale names after user rename | Cache not refreshed | Click **Sync Users** or wait for 6-hour auto-sync |
+| Container starts but no users synced | `UNIFI_API_TOKEN` missing or wrong in `.env` | Check `.env` and rebuild |
 
 ---
 
 ## Security notes
 
 - `.env` is excluded from git via `.gitignore` — never commit it.
-- The API token is never exposed to the browser or frontend.
-- For access outside your LAN, place Nginx or Traefik with HTTPS in front of port `8000`.
-- The `/api/reset-day` endpoint has no authentication — keep the container on your internal network only.
+- The `WEBHOOK_SECRET` ensures only genuine UniFi Access events are accepted (HMAC-SHA256).
+- The API token is never exposed to the browser.
+- The `/api/reset-day` and `/api/debug-user-cache` endpoints have no authentication — keep the container on your internal network only.
+- For external access, place Nginx or Traefik with HTTPS in front of port `8000`.

app.py

@@ -96,8 +96,7 @@ def sync_unifi_users():
 
 
 def verify_signature(payload_bytes, sig_header):
-    """
-    UniFi Access signature format:
+    """Validate UniFi Access webhook signature.
 
     Header name : Signature
     Header value: t=<unix_timestamp>,v1=<hex_hmac_sha256>
@@ -148,11 +147,8 @@ def receive_webhook():
 
     event = payload.get("event") or payload.get("event_object_id", "") or ""
 
-    # Data block per UniFi Access docs: payload["data"]["actor"], ["event"], etc.
     data = payload.get("data") or {}
     actor_obj = data.get("actor") or {}
-
-    # Use the same field as in your debug output
     actor = actor_obj.get("id")
 
     if "access.door.unlock" not in str(event):
@@ -162,7 +158,6 @@ def receive_webhook():
         log.warning("Webhook has no actor id: %s", json.dumps(payload)[:300])
         return jsonify({"error": "no actor"}), 400
 
-    # Prefer data.event.published (ms since epoch) if present
     event_meta = data.get("event") or {}
     ts_ms = event_meta.get("published")
     if ts_ms:

static/index.html

@@ -1,115 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8">
   <title>UniFi Access Attendance</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg: #050508;
-      --bg-card: #111113;
-      --gold: #d4af37;
-      --gold-soft: #b89630;
-      --text: #f5f5f5;
-      --muted: #888;
-      --danger: #ff4d4f;
-      --success: #2ecc71;
-      --warn: #f39c12;
-      --border: #222;
+      --bg: #050508; --bg-card: #111113; --gold: #d4af37; --gold-soft: #b89630;
+      --text: #f5f5f5; --muted: #888; --danger: #ff4d4f; --success: #2ecc71;
+      --warn: #f39c12; --border: #222;
     }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      background: radial-gradient(circle at top, #18181c 0, #050508 55%);
+      background: radial-gradient(circle at top, #18181c 0%, #050508 55%);
       color: var(--text);
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      min-height: 100vh;
-      display: flex;
-      justify-content: center;
-      padding: 32px 16px;
+      min-height: 100vh; display: flex; justify-content: center; padding: 32px 16px;
     }
     .app-shell {
       width: 100%; max-width: 1280px;
       background: rgba(5,5,8,0.96);
-      border-radius: 20px;
-      border: 1px solid rgba(212,175,55,0.3);
+      border-radius: 20px; border: 1px solid rgba(212,175,55,0.3);
       box-shadow: 0 32px 80px rgba(0,0,0,0.7);
       padding: 24px 24px 32px;
     }
-    header {
-      display: flex; justify-content: space-between;
-      align-items: center; margin-bottom: 20px; gap: 16px;
-    }
+    header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
     .title-block { display: flex; flex-direction: column; gap: 4px; }
     h1 { font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
     .subtitle { font-size: 0.9rem; color: var(--muted); }
     .badge {
-      border-radius: 999px;
-      border: 1px solid rgba(212,175,55,0.5);
-      padding: 4px 10px; font-size: 0.75rem;
-      text-transform: uppercase; letter-spacing: 0.12em;
-      color: var(--gold-soft);
-      background: linear-gradient(90deg,rgba(212,175,55,0.1),rgba(212,175,55,0.02));
-    }
-    .controls {
-      display: flex; flex-wrap: wrap; gap: 12px;
-      margin-bottom: 18px; align-items: center;
+      border-radius: 999px; border: 1px solid rgba(212,175,55,0.5);
+      padding: 4px 10px; font-size: 0.75rem; text-transform: uppercase;
+      letter-spacing: 0.12em; color: var(--gold-soft);
+      background: linear-gradient(90deg, rgba(212,175,55,0.1), rgba(212,175,55,0.02));
     }
+    .controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; align-items: center; }
     .control-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
     .spacer { flex: 1; }
     label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
     input {
-      background: var(--bg-card); border-radius: 999px;
-      border: 1px solid var(--border);
-      padding: 8px 14px; font-size: 0.9rem; color: var(--text);
-      outline: none; min-width: 130px;
+      background: var(--bg-card); border-radius: 999px; border: 1px solid var(--border);
+      padding: 8px 14px; font-size: 0.9rem; color: var(--text); outline: none; min-width: 130px;
     }
     input:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 1px rgba(212,175,55,0.4); }
     button {
-      border-radius: 999px;
-      border: 1px solid rgba(212,175,55,0.7);
-      background: radial-gradient(circle at top,rgba(212,175,55,0.35),rgba(2,2,4,0.95));
-      color: var(--text); padding: 8px 18px;
-      font-size: 0.85rem; letter-spacing: 0.1em;
-      text-transform: uppercase; cursor: pointer;
-      transition: transform 0.08s, box-shadow 0.08s;
-      white-space: nowrap;
+      border-radius: 999px; border: 1px solid rgba(212,175,55,0.7);
+      background: radial-gradient(circle at top, rgba(212,175,55,0.35), rgba(2,2,4,0.95));
+      color: var(--text); padding: 8px 18px; font-size: 0.85rem;
+      letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
+      transition: transform 0.08s, box-shadow 0.08s; white-space: nowrap;
     }
     button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
     button:active { transform: translateY(1px); box-shadow: none; }
     button:disabled { opacity: 0.45; cursor: default; transform: none; }
-    .sync-btn {
-      border-color: rgba(100,180,255,0.6);
-      background: radial-gradient(circle at top,rgba(100,180,255,0.18),rgba(2,2,4,0.95));
-    }
-    .reset-btn {
-      border-color: rgba(255,100,100,0.6);
-      background: radial-gradient(circle at top,rgba(255,80,80,0.18),rgba(2,2,4,0.95));
-    }
-    .summary-row {
-      display: flex; flex-wrap: wrap; gap: 12px;
-      margin-bottom: 16px; font-size: 0.85rem;
-    }
-    .summary-pill {
-      display: inline-flex; align-items: center; gap: 8px;
-      background: var(--bg-card); border-radius: 999px;
-      padding: 6px 14px; border: 1px solid var(--border); color: var(--muted);
-    }
+    .sync-btn { border-color: rgba(100,180,255,0.6); background: radial-gradient(circle at top, rgba(100,180,255,0.18), rgba(2,2,4,0.95)); }
+    .reset-btn { border-color: rgba(255,100,100,0.6); background: radial-gradient(circle at top, rgba(255,80,80,0.18), rgba(2,2,4,0.95)); }
+    .summary-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; font-size: 0.85rem; }
+    .summary-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border-radius: 999px; padding: 6px 14px; border: 1px solid var(--border); color: var(--muted); }
     .dot { width: 9px; height: 9px; border-radius: 50%; }
     .dot.on  { background: var(--success); box-shadow: 0 0 10px rgba(46,204,113,0.7); }
     .dot.off { background: var(--danger);  box-shadow: 0 0 10px rgba(255,77,79,0.7); }
     .dot.all { background: var(--gold-soft); box-shadow: 0 0 10px rgba(184,150,48,0.5); }
     .table-card {
-      background: linear-gradient(135deg,rgba(17,17,19,0.98),rgba(8,8,10,0.98));
-      border-radius: 14px; border: 1px solid rgba(255,255,255,0.04);
-      overflow: hidden;
+      background: linear-gradient(135deg, rgba(17,17,19,0.98), rgba(8,8,10,0.98));
+      border-radius: 14px; border: 1px solid rgba(255,255,255,0.04); overflow: hidden;
     }
     table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-    thead { background: radial-gradient(circle at top left,rgba(212,175,55,0.22),rgba(10,10,12,0.9)); }
-    th, td {
-      padding: 10px 16px; text-align: left;
-      border-bottom: 1px solid rgba(255,255,255,0.04);
-      white-space: nowrap;
-    }
+    thead { background: radial-gradient(circle at top left, rgba(212,175,55,0.22), rgba(10,10,12,0.9)); }
+    th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
     th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
     tbody tr:last-child td { border-bottom: none; }
     tbody tr:hover { background: rgba(212,175,55,0.04); }
@@ -122,50 +80,31 @@
     .status-chip {
       display: inline-flex; align-items: center; justify-content: center;
       min-width: 88px; padding: 5px 12px; border-radius: 999px;
-      font-size: 0.78rem; font-weight: 600;
-      text-transform: uppercase; letter-spacing: 0.1em;
+      font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
     }
     .status-on  { background: rgba(46,204,113,0.1); color: #c9f7dc; border: 1px solid rgba(46,204,113,0.65); box-shadow: 0 0 14px rgba(46,204,113,0.2); }
     .status-off { background: rgba(255,77,79,0.1);  color: #ffd6d7; border: 1px solid rgba(255,77,79,0.75);  box-shadow: 0 0 14px rgba(255,77,79,0.2); }
     .chip-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; }
     .empty-state { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 0.9rem; }
     .empty-state span { color: var(--gold-soft); }
-
     /* Modal */
-    .modal-overlay {
-      display: none; position: fixed; inset: 0;
-      background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
-      z-index: 100; align-items: center; justify-content: center;
-    }
+    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
     .modal-overlay.open { display: flex; }
-    .modal {
-      background: var(--bg-card);
-      border: 1px solid rgba(255,100,100,0.5);
-      border-radius: 16px; padding: 28px 32px;
-      max-width: 400px; width: 90%; text-align: center;
-      box-shadow: 0 24px 60px rgba(0,0,0,0.8);
-    }
+    .modal { background: var(--bg-card); border: 1px solid rgba(255,100,100,0.5); border-radius: 16px; padding: 28px 32px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.8); }
     .modal h2 { color: var(--danger); font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
     .modal p { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; line-height: 1.6; }
     .modal p strong { color: var(--text); }
     .modal-actions { display: flex; gap: 12px; justify-content: center; }
-    .modal-cancel {
-      border-color: rgba(255,255,255,0.15);
-      background: rgba(255,255,255,0.05);
-    }
+    .modal-cancel  { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }
     .modal-confirm { border-color: rgba(255,100,100,0.6); background: rgba(255,80,80,0.18); }
-
     /* Toast */
     .toast {
-      position: fixed; bottom: 24px; right: 24px;
-      background: var(--bg-card); border: 1px solid rgba(212,175,55,0.5);
-      border-radius: 12px; padding: 12px 18px; font-size: 0.85rem;
-      color: var(--gold); opacity: 0; transform: translateY(12px);
-      transition: opacity 0.25s, transform 0.25s;
-      pointer-events: none; z-index: 200;
+      position: fixed; bottom: 24px; right: 24px; background: var(--bg-card);
+      border: 1px solid rgba(212,175,55,0.5); border-radius: 12px; padding: 12px 18px;
+      font-size: 0.85rem; color: var(--gold); opacity: 0; transform: translateY(12px);
+      transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 200;
     }
     .toast.show { opacity: 1; transform: translateY(0); }
-
     @media (max-width: 800px) {
       header { flex-direction: column; align-items: flex-start; }
       .controls { flex-direction: column; align-items: stretch; }
@@ -176,11 +115,10 @@
 </head>
 <body>
 <div class="app-shell">
-
   <header>
     <div class="title-block">
       <h1>Building Access</h1>
-      <div class="subtitle">Daily badge-in attendance — powered by UniFi Access</div>
+      <div class="subtitle">Daily badge-in attendance &mdash; powered by UniFi Access</div>
     </div>
     <div class="badge">LIVE ATTENDANCE DASHBOARD</div>
   </header>
@@ -188,11 +126,11 @@
   <section class="controls">
     <div class="control-group">
       <label for="date">Date</label>
-      <input type="date" id="date" />
+      <input type="date" id="date">
     </div>
     <div class="control-group">
       <label for="cutoff">Badged in by</label>
-      <input type="time" id="cutoff" value="09:00" />
+      <input type="time" id="cutoff" value="09:00">
     </div>
     <div class="spacer"></div>
     <div class="control-group">
@@ -203,9 +141,9 @@
   </section>
 
   <section class="summary-row">
-    <div class="summary-pill"><div class="dot on"></div><span id="on-time-count">0 on time</span></div>
-    <div class="summary-pill"><div class="dot off"></div><span id="late-count">0 late</span></div>
-    <div class="summary-pill"><div class="dot all"></div><span id="total-count">0 total</span></div>
+    <div class="summary-pill"><div class="dot on"></div><span id="on-time-count">0</span> on time</div>
+    <div class="summary-pill"><div class="dot off"></div><span id="late-count">0</span> late</div>
+    <div class="summary-pill"><div class="dot all"></div><span id="total-count">0</span> total</div>
   </section>
 
   <section class="table-card">
@@ -225,14 +163,13 @@
       </tbody>
     </table>
   </section>
-
 </div>
 
 <!-- Reset confirmation modal -->
 <div class="modal-overlay" id="reset-modal">
   <div class="modal">
     <h2>&#9888; Reset Day</h2>
-    <p>This will permanently delete all badge-in records for <strong id="modal-date-label"></strong>.<br/>Use this for testing only.</p>
+    <p>This will permanently delete all badge-in records for <strong id="modal-date-label"></strong>.<br>Use this for testing only.</p>
     <div class="modal-actions">
       <button class="modal-cancel" id="modal-cancel">Cancel</button>
       <button class="modal-confirm" id="modal-confirm">Yes, Reset</button>
@@ -260,12 +197,12 @@
     const cutoff = document.getElementById('cutoff').value || '09:00';
     const params = new URLSearchParams({ date, cutoff });
 
-    let data = [];
+    let data;
     try {
       const res = await fetch('/api/first-badge-status?' + params.toString());
       data = await res.json();
     } catch {
-      showToast('⚠ Could not load data');
+      showToast('Could not load data');
       return;
     }
 
@@ -275,7 +212,7 @@
     if (!data.length) {
       tbody.innerHTML = '<tr><td colspan="6" class="empty-state">No badge-in records for this day.</td></tr>';
       ['on-time-count','late-count','total-count'].forEach(id => {
-        document.getElementById(id).textContent = id === 'total-count' ? '0 total' : id === 'on-time-count' ? '0 on time' : '0 late';
+        document.getElementById(id).textContent = '0';
       });
       return;
     }
@@ -291,68 +228,72 @@
       numTd.textContent = i + 1;
       tr.appendChild(numTd);
 
-      // Name
+      // Name — use row.name directly (server resolves Unknown fallback)
       const nameTd = document.createElement('td');
       nameTd.className = 'name-cell';
-      nameTd.textContent = row.actor_name || '(Unknown)';
+      nameTd.textContent = row.name;
       tr.appendChild(nameTd);
 
-      // First badge in (always show bold)
+      // First badge in
       const firstTd = document.createElement('td');
       firstTd.className = 'time-first';
-      firstTd.textContent = row.badge_time;
+      firstTd.textContent = row.first_ts || '—';
       tr.appendChild(firstTd);
 
-      // Latest badge in (show dashes if same as first)
+      // Latest badge in
       const latestTd = document.createElement('td');
-      if (row.latest_time === row.badge_time) {
+      if (!row.latest_ts) {
         latestTd.className = 'same-badge';
         latestTd.textContent = '— same';
       } else {
         latestTd.className = 'time-latest';
-        latestTd.textContent = row.latest_time;
+        latestTd.textContent = row.latest_ts;
       }
       tr.appendChild(latestTd);
 
       // Actor ID (truncated)
       const idTd = document.createElement('td');
       idTd.className = 'muted-cell';
-      idTd.textContent = row.actor_id ? row.actor_id.slice(0, 8) + '…' : '';
+      idTd.textContent = row.actor_id ? row.actor_id.slice(0, 8) + '...' : '—';
       tr.appendChild(idTd);
 
       // Status chip
       const statusTd = document.createElement('td');
       statusTd.className = 'align-center';
       const chip = document.createElement('div');
-      chip.className = 'status-chip ' + (row.on_time ? 'status-on' : 'status-off');
-      chip.innerHTML = '<span class="chip-dot"></span>' + (row.on_time ? 'ON TIME' : 'LATE');
+      const isOnTime = row.status === 'ON TIME';
+      chip.className = 'status-chip ' + (isOnTime ? 'status-on' : 'status-off');
+      chip.innerHTML = '<span class="chip-dot"></span>' + (isOnTime ? 'ON TIME' : 'LATE');
       statusTd.appendChild(chip);
       tr.appendChild(statusTd);
 
       tbody.appendChild(tr);
-      row.on_time ? onTime++ : late++;
+
+      isOnTime ? onTime++ : late++;
     });
 
-    document.getElementById('on-time-count').textContent = onTime + ' on time';
-    document.getElementById('late-count').textContent    = late   + ' late';
-    document.getElementById('total-count').textContent   = (onTime + late) + ' total';
+    document.getElementById('on-time-count').textContent = onTime;
+    document.getElementById('late-count').textContent    = late;
+    document.getElementById('total-count').textContent   = onTime + late;
   }
 
   async function syncUsers() {
     const btn = document.getElementById('sync-btn');
-    btn.textContent = '⏳ Syncing…'; btn.disabled = true;
+    btn.textContent = 'Syncing…';
+    btn.disabled = true;
     try {
       await fetch('/api/sync-users');
-      showToast('✔ User list synced from UniFi Access');
+      showToast('User list synced from UniFi Access');
       await loadData();
     } catch {
-      showToast('⚠ Sync failed — check server logs');
+      showToast('Sync failed — check server logs');
     } finally {
-      btn.textContent = '↻ Sync Users'; btn.disabled = false;
+      btn.textContent = '⟳ Sync Users';
+      btn.disabled = false;
     }
   }
 
-  // ── Reset day modal ─────────────────────────────────────────────────────────
+  // Reset day modal
   document.getElementById('reset-btn').addEventListener('click', () => {
     const date = document.getElementById('date').value || isoToday();
     document.getElementById('modal-date-label').textContent = date;
@@ -369,14 +310,13 @@
     try {
       const res  = await fetch('/api/reset-day?date=' + date, { method: 'DELETE' });
       const json = await res.json();
-      showToast(`✔ Reset complete — ${json.deleted} record(s) deleted for ${date}`);
+      showToast(`Reset complete — ${json.deleted} record(s) deleted for ${date}`);
       await loadData();
     } catch {
-      showToast('⚠ Reset failed — check server logs');
+      showToast('Reset failed — check server logs');
     }
   });
 
-  // Close modal on overlay click
   document.getElementById('reset-modal').addEventListener('click', e => {
     if (e.target === document.getElementById('reset-modal'))
       document.getElementById('reset-modal').classList.remove('open');