cool-dashboard

As a user I want to explore the platform on the Landing page before logging in. Implement the Landing page based on the existing JSX design (v2). The page includes: animated ocean background with wave movements, interactive device buoys on the map with MAC address labels, hover tooltips showing device details, time-of-day dynamic color shifts, micro-animations for buoys bobbing, and CTAs leading to Login. Guest users land here to view demo and explore features. Navigates to: Login page.

As a user I want to securely log in via the Login page. Implement the Login page based on the existing JSX design (v1). Includes: email/password form, secure authentication flow, forgot password link, form validation with error states, and redirect to Dashboard on success. Styled with the marine dark theme, glassmorphism card, aqua CTA button. Navigates from: Landing. Navigates to: Dashboard.

As a user I want to view all assigned devices on the Dashboard after login. Implement the Dashboard page based on the existing JSX design (v1). Includes: device overview cards with status indicators, quick navigation to Live Stream and Device List, interactive ocean map concept with floating buoys representing devices, welcome banner, and stats summary. Admin sees all devices; User sees assigned devices only. Navigates from: Login. Navigates to: Live Stream, Device List, Profile.

As a user I want to use backend API for secure login and session management. Implement FastAPI authentication endpoints: POST /auth/login (email+password, returns JWT), POST /auth/logout, POST /auth/forgot-password, GET /auth/me (current user profile). Secure JWT token generation, password hashing (bcrypt), role-based access control for Admin/User/Guest personas. Integrates with MySQL/MariaDB user store.

As a user I want to use backend API for fetching assigned devices and their details. Implement FastAPI device endpoints: GET /devices (list devices for authenticated user, supports MAC Address search and status filter), GET /devices/{mac_address} (device detail), GET /devices/{mac_address}/cameras (list cameras). Role-based filtering: Admin sees all devices, User sees only assigned. Returns device name, MAC address, status, last seen, camera count, CPU/RAM/Temp metrics.

As a user I want to use backend API for viewing and updating my profile. Implement FastAPI profile endpoints: GET /users/me/profile (fetch current user profile details), PATCH /users/me/profile (update name, email, avatar and other profile fields). Input validation, unique email constraint, secure field update with re-authentication for sensitive changes. Integrates with MySQL/MariaDB user store.

As a user I want to watch live camera feeds on the Live Stream page. Implement the Live Stream page (design to be created as part of this task). Includes: device MAC Address selector dropdown, camera count selector (1-8 simultaneous streams), responsive video grid layout, per-stream video player controls (play/pause, quality selector, screenshot capture), camera switcher dropdown, aqua-themed UI controls. Supports up to 8 simultaneous camera feeds without lag. Navigates from: Dashboard. Key performance requirement: no lag on 8 streams.

As a user I want to view and update my account information on the Profile page. Implement the Profile page based on the existing JSX design (v1). Includes: profile details display (name, email, role, avatar), editable form fields for updating profile information, save/cancel actions, IST timezone indicator, marine-themed form styling with aqua accents and surface cards. Navigates from: Dashboard (TopBar or Sidebar). Supports both Admin and User persona profile updates.

As a user I want to search and browse all assigned devices in the Device List page. Implement the Device List page based on the existing JSX design (v1). Includes: data table with MAC Address, Device Name, Status, Last Seen, Camera count, CPU/RAM/Temp indicators, action buttons (View, Stream, History); MAC Address search input; status filter dropdown; device stats strip (Total, Online, Offline, Warning); pagination bar. Read-only access. Navigates from: Dashboard. Navigates to: Device History.

As a user I want to use backend API for querying historical device metrics. Implement FastAPI endpoints: GET /devices/{mac_address}/history (filter by date range, returns time-series data for Temperature, CPU Usage, GPU Usage, RAM Usage). Supports IST timezone-aware date filtering, pagination, and aggregation. Stores and retrieves data from MongoDB for flexible NoSQL metric storage.

As a user I want to use backend API for initiating and managing live camera streams. Implement FastAPI streaming endpoints: GET /devices/{mac_address}/stream/cameras (list available cameras), POST /devices/{mac_address}/stream/start (start stream session for selected cameras, up to 8), POST /stream/{session_id}/screenshot (capture frame), PATCH /stream/{session_id}/quality (change quality). WebSocket or HLS protocol support for real-time video delivery. Meets performance NFR of 8 simultaneous streams without lag.

As a user I want to view historical device metrics on the Device History page. Implement the Device History page based on the existing JSX design (v1). Includes: filter controls for MAC Address and date range (IST timezone default), performance metric charts for Temperature, CPU Usage, GPU Usage, RAM Usage, time-series graphs with aqua accent colors, data table of historical records, export option. Navigates from: Device List. Helps users analyze device performance over time.

As a user I want all frontend pages to fetch real data from the backend APIs. Wire up all React pages to their respective FastAPI endpoints using axios/fetch: Dashboard device list, Device List search and filter, Device History metric charts, Live Stream video player and controls, Profile view and update. Implement API client service layer, JWT token attachment to requests, loading states, error handling, and toast notifications. Configure API base URL for Docker and K8s environments.