opal-cctv

As a user, I want to be able to use the frontend Login page so that I can sign in with my credentials and access the system. Implement the Login page based on the existing JSX design (Login v2). Includes role-based routing after login (Admin → Dashboard, Operator → Live Monitor, Viewer → Live Monitor), JWT token handling, and form validation. This page is the entry point for all personas per the user flow diagrams.

As an admin, I want to be able to use the backend API for camera management so that I can add, edit, delete, and retrieve camera configurations with RTSP/HTTP/ONVIF stream details. Implement FastAPI endpoints: GET /cameras, POST /cameras, PUT /cameras/{id}, DELETE /cameras/{id}. Includes MySQL metadata storage, camera grouping logic, and status tracking (online/offline). Integrates with FFmpeg for stream validation on add/edit.

As an admin, I want to be able to use the backend API for alerts and events so that I can receive real-time motion detection alerts, retrieve alert history, and configure notifications. Implement FastAPI endpoints: GET /alerts, POST /alerts, GET /alerts/history. Includes Socket.io real-time alert broadcasting, motion detection event processing pipeline (TensorFlow integration hook), email/push notification dispatcher, and alert log storage in MySQL.

As an admin, I want to be able to use the backend API for settings so that I can save and retrieve storage configurations, recording quality preferences, and system settings. Implement FastAPI endpoints: GET /settings, PUT /settings. Includes storage path configuration (local DB, external/NAS), recording quality parameters, system health monitoring data endpoints, and user preference persistence in MySQL.

As an admin, I want to be able to use the frontend Dashboard page so that I can view analytics, system health, active streams, total cameras, and navigate to other modules. Implement the Dashboard page based on the existing JSX design (Dashboard v1). Includes system overview widgets (total cameras, active streams, alerts count), usage stats, event analytics charts, and navigation links to Live Monitor, Camera Management, Alerts, and Settings. This is the hub page for Admins per the user flow.

As a user, I want to be able to use the frontend Live Monitor page so that I can view live camera feeds in a dynamic grid layout (1x1, 2x2, 4x4, 8x8, 20x20 up to 400 cameras). Implement the Live Monitor page based on the existing JSX design (Live Monitor v2). Includes: dynamic camera grid, audio toggle, snapshot capture, PTZ controls, fullscreen mode per feed, real-time camera status indicators, glowing red border for active alerts, zoom/pan on grid, hover quick-actions. Uses WebRTC/HLS.js for stream rendering. This page is accessible by all personas.

As an admin, I want to be able to use the frontend Camera Management page so that I can add, edit, delete, and configure cameras with RTSP/HTTP/ONVIF stream settings. Implement the Camera Management page based on the existing JSX design (Camera Mgmt v1). Includes: camera list/grid view with status indicators (online/offline), add/edit/delete modals, RTSP/HTTP/ONVIF configuration forms, camera grouping by location/building/floor, thumbnail previews. Navigation flows from Dashboard → Camera Mgmt → Configure RTSP.

As an admin, I want to be able to use the frontend Alerts & Events page so that I can view real-time motion detection alerts, browse alert history logs, and configure email/push notifications. Implement the Alerts page based on the existing JSX design (Alerts v2). Includes: real-time alert feed via WebSockets, alert history table with filters, notification configuration panel (email/push). Navigation flows from Dashboard → Alerts → Configure Notifications.

As a user, I want to be able to use the frontend Playback page so that I can select a date/time range, browse recordings, play/pause/fast-forward/rewind footage, view event-based clips, and download/export recorded footage. Implement the Playback page based on the existing JSX design (Playback v1). Includes: timeline UI with date/time picker, playback controls bar, event-based clip filtering (motion detection), download/export button, and camera selector. Accessible by all personas. Navigation flows from Live Monitor → Playback.

As an admin, I want to be able to use the frontend Settings page so that I can configure storage settings, recording quality preferences, and user preferences (dark/light theme). Implement the Settings page based on the existing JSX design (Settings v1). Includes: storage configuration panel (local DB path, external/NAS settings), recording quality selector, dark/light theme toggle, system health monitoring display. Navigation flows from Dashboard → Settings: Configure Storage.

As a user, I want to be able to use the backend RTSP/WebRTC streaming service so that live camera feeds are transcoded and delivered with low latency (<200ms). Implement FFmpeg-based RTSP ingestion pipeline, transcode streams to WebRTC-compatible format, expose WebSocket signaling endpoint for WebRTC peer connections, and support HLS fallback. Handles up to 400 concurrent streams with GPU transcoding support.

As an admin, I want to be able to use the backend API for analytics so that the Dashboard can display system health metrics, usage stats, and event analytics charts. Implement FastAPI endpoints: GET /analytics/system-health (CPU, memory, storage), GET /analytics/usage (active streams, total cameras), GET /analytics/events (chart data for event trends). Data aggregated from MySQL and real-time system metrics.

As an operator, I want to be able to use the backend API for PTZ controls so that I can pan, tilt, and zoom supported cameras from the Live Monitor page. Implement FastAPI endpoints: POST /cameras/{id}/ptz with direction/speed params. Integrates ONVIF PTZ command dispatch for supported cameras and WebSocket real-time acknowledgment.

As a user, I want the Live Monitor page to connect to real WebRTC streams from the backend so that I can view actual live camera feeds in the grid. Integrate the Live Monitor frontend with the RTSP Stream Service backend: WebRTC peer connection setup per camera cell, WebSocket signaling client, HLS.js fallback for non-WebRTC browsers, and stream error/retry handling. Connects the t4 frontend with the t11 backend service.

As a user, I want to be able to use the backend API for video playback so that I can retrieve recorded footage by date/time range, download clips, and access event-based recordings. Implement FastAPI endpoints: GET /recordings, GET /recordings/{id}/stream, GET /recordings/{id}/download, GET /recordings/events. Includes FFmpeg-based clip extraction, date/time range filtering, event-based clip indexing (motion timestamps), and file serving for export/download.

As an admin, I want to be able to use the AI motion detection service so that camera feeds are analyzed in real-time and motion/intrusion events are automatically detected and logged. Implement TensorFlow-based motion detection model inference pipeline: frame extraction from FFmpeg streams, model inference per frame, threshold-based event triggering, and event publishing to the Alerts API. Supports AI detection overlays (bounding boxes) for Live Monitor page.

As an admin, I want the Camera Management frontend page to be connected to the live backend API so that camera CRUD operations, RTSP configuration, and status updates are persisted and real-time. Integrate t5 Camera Management page with t10 Camera Management API: Axios service layer for all endpoints, loading/error/retry states, real-time online/offline status via Socket.io, and stream validation feedback on add/edit.

As an admin, I want the Alerts & Events frontend page to be connected to the live backend so that I receive real-time alerts via WebSockets and can interact with alert history and notification settings. Integrate t6 Alerts page with t13 Alerts API: Socket.io client for live alert push, Axios for history fetch and notification config save, and dynamic alert badge on Topbar/Sidebar navigation.

As an admin, I want the Dashboard frontend page to be connected to the live backend analytics API so that system health, usage stats, and event charts display real data. Integrate t3 Dashboard page with t15 Analytics API: Axios service for all analytics endpoints, chart rendering with real data (e.g., Recharts/Chart.js), and auto-refresh polling for live system health metrics.

As an admin, I want the Settings frontend page to be connected to the live backend settings API so that storage and recording configurations are persisted. Integrate t8 Settings page with t16 Settings API: Axios service for GET/PUT settings, form state management with Zustand, and live system health display from API.

As an operator, I want to be able to use the backend snapshot service so that I can capture and store still images from live camera feeds. Implement POST /cameras/{id}/snapshot endpoint: FFmpeg frame extraction from active RTSP stream, save to local storage (SQLite metadata + file path), and return snapshot URL. Frontend Live Monitor page calls this and displays confirmation.

As an admin, I want to be able to use the real-time camera status service so that online/offline status changes are instantly reflected in the Live Monitor and Camera Management pages. Implement Socket.io broadcaster: periodic health check pings to all RTSP stream endpoints, status change event emission, and MySQL status log updates. Frontend consumes via Socket.io client in both Live Monitor and Camera Management pages.

As a user, I want the Playback frontend page to be connected to the live backend API so that I can browse, play, and download real recorded footage. Integrate t7 Playback page with t14 Playback API: Axios service for recordings retrieval and download, video player integration (HLS.js) for clip streaming, event-based clip loading, and date/time range query handling.