# Sentinel AI — Industrial Surveillance Dashboard ## Complete UX/UI Design Document **Version:** 1.0 **Date:** June 2025 **Target Platform:** Desktop-optimized web application (React/Next.js + FastAPI) **Target User:** Non-technical security operators and administrators **Camera System:** CP PLUS DVR (8 cameras) --- ## Table of Contents 1. [Design System Foundations](#1-design-system-foundations) 2. [Global Design Elements](#2-global-design-elements) 3. [Page-by-Page UX Specifications](#3-page-by-page-ux-specifications) - 3.1 Login Page - 3.2 Dashboard (Home) - 3.3 Live Camera View - 3.4 Alert Center - 3.5 Recent Detections - 3.6 Person Gallery - 3.7 Unknown Persons Review Queue - 3.8 Person Profile Page - 3.9 Suspicious Activity Timeline - 3.10 Search & Filter Page - 3.11 Watchlist Management - 3.12 AI Vibe Settings Page - 3.13 Training Review Page - 3.14 System Health Page - 3.15 Notification Settings - 3.16 Admin User Management - 3.17 Camera Management - 3.18 Retention & Storage Settings 4. [Component Specifications](#4-component-specifications) 5. [User Flows](#5-user-flows) 6. [Interaction Patterns](#6-interaction-patterns) 7. [Responsive Behavior](#7-responsive-behavior) 8. [Implementation Notes](#8-implementation-notes) --- ## 1. Design System Foundations ### 1.1 Color Palette #### Core Colors (Dark Mode Default) | Token | Hex | Usage | |-------|-----|-------| | `--bg-primary` | `#0B0E14` | Main background, deepest layer | | `--bg-secondary` | `#131821` | Cards, panels, elevated surfaces | | `--bg-tertiary` | `#1B2230` | Input fields, hover states, nested panels | | `--bg-elevated` | `#232D3F` | Modals, dropdowns, popover menus | | `--border-subtle` | `#2A3447` | Card borders, dividers | | `--border-active` | `#3A4A63` | Focused element borders | | `--text-primary` | `#E8ECF1` | Headings, primary labels | | `--text-secondary` | `#9BA3B4` | Body text, descriptions | | `--text-muted` | `#5E6A7E` | Timestamps, placeholders, disabled text | | `--text-inverse` | `#0B0E14` | Text on accent-colored buttons | #### Accent Colors | Token | Hex | Usage | |-------|-----|-------| | `--accent-primary` | `#3B82F6` | Primary action buttons, active nav, links | | `--accent-primary-hover` | `#2563EB` | Primary button hover | | `--accent-primary-glow` | `rgba(59, 130, 246, 0.15)` | Glow effects, subtle highlights | | `--accent-secondary` | `#0EA5E9` | Secondary actions, info indicators | | `--accent-tertiary` | `#6366F1` | Tertiary accent, tags, badges | #### Semantic Status Colors | Token | Hex | Usage | |-------|-----|-------| | `--status-success` | `#22C55E` | Online, OK, acknowledged, resolved | | `--status-success-bg` | `rgba(34, 197, 94, 0.12)` | Success badge background | | `--status-warning` | `#EAB308` | Warning, pending, moderate severity | | `--status-warning-bg` | `rgba(234, 179, 8, 0.12)` | Warning badge background | | `--status-danger` | `#EF4444` | Critical alert, offline, error, high severity | | `--status-danger-bg` | `rgba(239, 68, 68, 0.12)` | Danger badge background | | `--status-info` | `#3B82F6` | Informational, blue alerts | | `--status-info-bg` | `rgba(59, 130, 246, 0.12)` | Info badge background | | `--status-unknown` | `#6B7280` | Unknown state, not configured | #### Severity Gradient (Alerts) | Level | Color | Icon | |-------|-------|------| | Critical | `#EF4444` (red) | `AlertTriangle` | | High | `#F97316` (orange) | `AlertCircle` | | Medium | `#EAB308` (yellow) | `AlertTriangle` | | Low | `#3B82F6` (blue) | `Info` | | Info | `#6B7280` (gray) | `Info` | #### Camera Status Colors | Status | Color | Indicator | |--------|-------|-----------| | Online + Recording | `#22C55E` green | Pulsing green dot | | Online + Idle | `#3B82F6` blue | Solid blue dot | | Offline | `#EF4444` red | Solid red dot with X | | Reconnecting | `#EAB308` yellow | Pulsing yellow dot | | Disabled | `#6B7280` gray | Gray dot | ### 1.2 Typography | Element | Font | Size | Weight | Line Height | Letter Spacing | |---------|------|------|--------|-------------|----------------| | Display (page titles) | Inter | 28px | 600 | 1.2 | -0.02em | | H1 (section titles) | Inter | 22px | 600 | 1.3 | -0.01em | | H2 (card titles) | Inter | 16px | 600 | 1.4 | 0 | | H3 (sub-headings) | Inter | 14px | 600 | 1.4 | 0 | | Body | Inter | 14px | 400 | 1.5 | 0 | | Body Small | Inter | 13px | 400 | 1.5 | 0 | | Caption | Inter | 12px | 400 | 1.4 | 0.01em | | Label | Inter | 11px | 500 | 1.2 | 0.03em | | Mono (timestamps, IDs) | JetBrains Mono | 12px | 400 | 1.4 | 0 | ### 1.3 Spacing Scale | Token | Value | Usage | |-------|-------|-------| | `--space-1` | 4px | Tight gaps, icon padding | | `--space-2` | 8px | Small gaps, compact padding | | `--space-3` | 12px | Card internal padding small | | `--space-4` | 16px | Card padding, standard gaps | | `--space-5` | 20px | Section gaps | | `--space-6` | 24px | Large section spacing | | `--space-8` | 32px | Page-level padding | | `--space-10` | 40px | Major section dividers | | `--space-12` | 48px | Layout-level spacing | ### 1.4 Border Radius | Token | Value | Usage | |-------|-------|-------| | `--radius-sm` | 6px | Buttons, badges, small tags | | `--radius-md` | 8px | Input fields, small cards | | `--radius-lg` | 12px | Cards, panels, modals | | `--radius-xl` | 16px | Large cards, feature panels | | `--radius-full` | 9999px | Pills, avatars, circular buttons | ### 1.5 Shadows & Elevation | Token | Value | Usage | |-------|-------|-------| | `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.3)` | Subtle lift | | `--shadow-md` | `0 4px 12px rgba(0,0,0,0.4)` | Cards, dropdowns | | `--shadow-lg` | `0 8px 24px rgba(0,0,0,0.5)` | Modals, popovers | | `--shadow-glow-green` | `0 0 12px rgba(34,197,94,0.3)` | Online status glow | | `--shadow-glow-red` | `0 0 12px rgba(239,68,68,0.3)` | Critical alert glow | | `--shadow-glow-blue` | `0 0 12px rgba(59,130,246,0.3)` | Active element glow | ### 1.6 Z-Index Scale | Layer | Z-Index | Element | |-------|---------|---------| | Background | 0 | Base layout | | Content | 10 | Page content | | Sticky headers | 100 | Fixed nav elements | | Dropdowns | 200 | Select menus, tooltips | | Modals | 300 | Dialog overlays | | Toasts | 400 | Notification banners | | Critical overlay | 500 | Full-screen alerts | --- ## 2. Global Design Elements ### 2.1 Sidebar Navigation **Layout:** Fixed left sidebar, collapsible, 260px expanded / 72px collapsed **Background:** `--bg-secondary` with right border `--border-subtle` **Behavior:** - Hovering the collapsed sidebar (64px) shows a tooltip with the label - Clicking the hamburger toggle expands/collapses with smooth 250ms ease transition - Collapsed state shows only icon (24x24px), centered in 72px width - Expanded state shows icon + label, with 12px spacing between icon and text **Navigation Items (top to bottom):** | Icon | Label | Route | Badge | |------|-------|-------|-------| | `LayoutDashboard` | Dashboard | `/` | None | | `Video` | Live View | `/live` | None | | `Bell` | Alert Center | `/alerts` | Alert count (red pill) | | `ScanEye` | Recent Detections | `/detections` | None | | `Users` | Person Gallery | `/gallery` | None | | `UserQuestion` | Unknown Review | `/unknowns` | Pending count (yellow pill) | | `ClockAlert` | Suspicious Activity | `/timeline` | None | | `Search` | Search & Filter | `/search` | None | | `ShieldAlert` | Watchlists | `/watchlists` | None | | `Sparkles` | AI Vibe Settings | `/ai-settings` | None | | `Brain` | Training Review | `/training` | Pending count | | `Activity` | System Health | `/health` | Status dot | | `Settings` | Settings | `/settings` | — | **Settings Submenu (expandable):** - Notification Settings (`BellRing`) - Camera Management (`Camera`) - Retention & Storage (`HardDrive`) - Admin Users (`UserCog`) — only visible to admin role **Bottom Section:** - Dark/Light toggle (small icon button) - User avatar + name (collapsed: just avatar) - Logout button (`LogOut` icon) **Active State:** - Background: `--accent-primary` at 10% opacity - Left border: 3px solid `--accent-primary` - Icon color: `--accent-primary` - Text color: `--text-primary` - Font weight: 600 **Hover State:** - Background: `--bg-tertiary` - Transition: 150ms ease ### 2.2 Top Bar **Height:** 56px **Background:** `--bg-secondary` **Border:** Bottom 1px `--border-subtle` **Layout:** Flex row, space-between **Left Section:** - Hamburger toggle (visible on tablet/mobile) - Page title (H1 style) — updates based on current route - Breadcrumb trail (on nested pages): Home > Section > Page **Center Section:** - Live clock: HH:MM:SS format, mono font, `--text-secondary` - Date: DD MMM YYYY, caption style below the time **Right Section:** - Search quick access (magnifying glass icon button) - Notification bell with red dot indicator for unread alerts - Critical alert indicator (pulsing red when any critical alert is unacknowledged) - User avatar (36px circle) with online status dot ### 2.3 Toast Notifications **Position:** Top-right corner, 16px from edges **Max visible:** 5 toasts, stack vertically with 8px gap **Auto-dismiss:** 5 seconds for info/success, persistent for critical until acknowledged **Animation:** Slide in from right (300ms), fade out (200ms) **Toast Types:** | Type | Background | Border | Icon | |------|-----------|--------|------| | Success | `rgba(34,197,94,0.1)` | `#22C55E` | `CheckCircle` green | | Error | `rgba(239,68,68,0.1)` | `#EF4444` | `XCircle` red | | Warning | `rgba(234,179,8,0.1)` | `#EAB308` | `AlertTriangle` yellow | | Info | `rgba(59,130,246,0.1)` | `#3B82F6` | `Info` blue | | Critical | `rgba(239,68,68,0.2)` | `#EF4444` with glow | `AlertOctagon` red pulsing | **Toast Content:** - Icon (left) - Title (bold, one line) - Description (optional, 2 lines max) - Timestamp (caption, right) - Close button (X, top right) - Action button (optional, e.g., "View Alert") ### 2.4 Modal/Dialog Pattern **Overlay:** Black at 60% opacity, blur 4px backdrop **Modal container:** `--bg-elevated`, border-radius `--radius-lg`, shadow `--shadow-lg` **Max width variants:** - Small: 400px (confirmations, simple forms) - Medium: 560px (standard forms, detail views) - Large: 800px (complex forms, image viewers) - X-Large: 1100px (full data tables, comparison views) - Fullscreen: 95vw x 95vh (camera grid, video playback) **Modal Structure:** 1. Header: Title (H1) + close button (X) 2. Body: Scrollable content area (max-height: 70vh) 3. Footer: Action buttons (right-aligned) - Primary action: filled button - Secondary: outlined button - Destructive: red outlined/filled ### 2.5 Card Component Pattern **Standard Card:** - Background: `--bg-secondary` - Border: 1px solid `--border-subtle` - Border-radius: `--radius-lg` (12px) - Padding: `--space-4` (16px) - Hover: border transitions to `--border-active`, subtle lift - Optional: top colored accent border (4px) for status cards **Stat Card (Dashboard):** - Standard card base - Top row: Icon (in colored circle, 40px) + value (large number, 28px bold) - Bottom row: Label (caption) + trend indicator (optional) - Background gradient subtle tint matching the icon color **Alert Card:** - Left edge: 4px severity color strip - Top-right: Severity badge + timestamp - Thumbnail: Left side, 120x80px rounded - Content: Alert type, camera name, person name (if known) - Bottom: Action buttons (Acknowledge, View Details, Ignore) ### 2.6 Badge/Pill Component | Variant | Background | Text | Border | |---------|-----------|------|--------| | Online | `--status-success-bg` | `#22C55E` | none | | Offline | `--status-danger-bg` | `#EF4444` | none | | Warning | `--status-warning-bg` | `#EAB308` | none | | Info | `--status-info-bg` | `#3B82F6` | none | | Neutral | `--bg-tertiary` | `--text-secondary` | none | | Tag (selectable) | transparent | `--text-secondary` | 1px `--border-subtle` | | Tag (selected) | `--accent-primary-glow` | `--accent-primary` | 1px `--accent-primary` | ### 2.7 Button Variants | Variant | Background | Text | Border | Hover | |---------|-----------|------|--------|-------| | Primary | `--accent-primary` | white | none | `--accent-primary-hover` | | Secondary | transparent | `--text-primary` | 1px `--border-subtle` | `--bg-tertiary` | | Ghost | transparent | `--text-secondary` | none | `--bg-tertiary` | | Danger | `--status-danger` | white | none | darken 10% | | Danger Ghost | transparent | `--status-danger` | none | `--status-danger-bg` | | Icon Button | `--bg-tertiary` | `--text-secondary` | none | `--bg-elevated` | **Sizes:** - Small: 28px height, 8px horizontal padding, 12px font - Medium: 36px height, 16px horizontal padding, 14px font (default) - Large: 44px height, 24px horizontal padding, 14px font ### 2.8 Form Input Pattern **Text Input:** - Height: 40px - Background: `--bg-tertiary` - Border: 1px solid `--border-subtle` - Border-radius: `--radius-md` - Text: `--text-primary` - Placeholder: `--text-muted` - Focus: border `--accent-primary`, subtle blue glow - Error state: border `--status-danger`, red glow - Label: above input, `--text-secondary`, 12px, 500 weight, 8px bottom margin - Helper text: below input, `--text-muted`, 12px **Select/Dropdown:** - Same base as text input - Dropdown arrow icon on right - Dropdown list: `--bg-elevated`, shadow `--shadow-md`, max-height 240px **Toggle Switch:** - Track: 44x24px, `--bg-tertiary` (off) / `--accent-primary` (on) - Thumb: 20x20px white circle - Transition: 150ms ease **Segmented Control (AI Settings):** - Container: `--bg-tertiary`, border-radius `--radius-full`, padding 4px - Option: padding 8px 16px, border-radius `--radius-full` - Active: `--accent-primary` background, white text - Inactive: transparent, `--text-secondary` - Transition: 150ms ease ### 2.9 Tooltip Pattern - Background: `--bg-elevated` - Border: 1px `--border-subtle` - Text: `--text-secondary`, 12px - Padding: 8px 12px - Border-radius: `--radius-md` - Arrow: 6px triangle pointing to trigger - Delay: 400ms before appearing - Max width: 280px ### 2.10 Empty State Pattern - Centered in container - Icon: 64px, `--text-muted` - Title: H2, "Nothing here yet" or contextual message - Description: Body, `--text-secondary`, max 2 lines - Action: Optional CTA button to create/add --- ## 3. Page-by-Page UX Specifications ### 3.1 Login Page **Route:** `/login` **Layout:** Full-screen centered, single column **Background:** Gradient from `#0B0E14` to `#131821`, subtle radial glow from center (`--accent-primary` at 3% opacity) **Visual Structure:** ``` +----------------------------------------------------------+ | [Company Logo - centered, 80px wide] | | "Sentinel AI" - Display font, centered | | "Secure Surveillance Dashboard" - Body, muted | | | | +----------------------------------------------------+ | | | Login Card (400px max width, centered) | | | | | | | | "Welcome Back" - H1 | | | | "Sign in to your account" - Body muted | | | | | | | | [Username Label] | | | | [_________________________] [User icon] | | | | | | | | [Password Label] [Show/Hide toggle] | | | | [_________________________] [Lock icon] | | | | | | | | [x] Remember me Forgot password? | | | | | | | | [========== Sign In ==========] Primary button | | | | | | | | ----------------- OR ----------------- | | | | | | | | [======= Sign In with Company SSO =======] | | | | | | | +----------------------------------------------------+ | | | | "Secured by Sentinel AI v2.1" - Caption, muted | +----------------------------------------------------------+ ``` **Elements Detail:** 1. **Company Branding Area:** - Top-center: Company logo (configurable, default Sentinel AI logo) - Logo size: 80px width, auto height - Below logo: "Sentinel AI" in 24px weight 700 - Tagline: "Intelligent Surveillance Platform" in 14px `--text-muted` - Below: version badge "v2.1" in pill format 2. **Login Card:** - Background: `--bg-secondary` - Border: 1px `--border-subtle` - Border-radius: `--radius-xl` (16px) - Padding: 32px - Shadow: `--shadow-md` - Max-width: 400px 3. **Username Field:** - Label: "Username or Email" - Placeholder: "Enter your username" - Left icon: `User` from lucide - Auto-focus on page load - Tab order: 1 4. **Password Field:** - Label: "Password" - Placeholder: "Enter your password" - Left icon: `Lock` - Right: Eye/EyeOff toggle for show/hide - Tab order: 2 5. **Remember Me:** - Checkbox, default unchecked - Label: "Keep me signed in for 7 days" 6. **Forgot Password:** - Text link, `--accent-primary` - Click: opens modal with email input for reset link 7. **Sign In Button:** - Full width, Primary variant, Large size - Loading state: spinner + "Signing in..." - Success: brief green flash, redirect to `/` - Error: shake animation + red error message below 8. **MFA Flow (Optional):** - After successful credentials, if MFA enabled: - Card transitions to MFA view (fade animation) - Title: "Two-Factor Authentication" - Description: "Enter the 6-digit code from your authenticator app" - 6 individual digit input boxes (auto-tab between) - "Verify" button - "Back to login" link 9. **Footer:** - "Don't have an account? Contact your administrator" - Copyright text, 12px muted **Error States:** - Invalid credentials: "Invalid username or password. Please try again." in red below the form - Account locked: "Account temporarily locked. Contact administrator." with warning icon - Session expired (redirected from app): Yellow banner at top "Your session has expired. Please sign in again." --- ### 3.2 Dashboard (Home) **Route:** `/` **Layout:** Sidebar + Top Bar + Content Grid **Content Area:** CSS Grid, auto-fill with gaps **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Dashboard" Clock [Avatar] | | |------------------------------------------------| | [Nav] | +----------+ +----------+ +----------+ +-----+| | | | Cameras | |Detection | | Pending | |Unkno+| | | | 8/8 | | 24 | | 3 | | 7 | | | | Online | | Today | | Alerts | |Today | | | +----------+ +----------+ +----------+ +-----+| | | | | | +--------------------------------------------+| | | | Live Camera Grid (2x4) || | | | +----------+ +----------+ +----------+ +--+|| | | | | CAM-01 | | CAM-02 | | CAM-03 | |..||| | | | | [LIVE] | | [LIVE] | | [LIVE] | |..||| | | | | Lobby | | Gate A | | Warehouse| |..||| | | | | [Record] | | [Record] | | [Record] | |..||| | | | +----------+ +----------+ +----------+ +--+|| | | | +----------+ +----------+ +----------+ +--+|| | | | | CAM-05 | | CAM-06 | | CAM-07 | |..||| | | | | Office | | Parking | | Hallway | |..||| | | | | [Offline]| | [LIVE] | | [LIVE] | |..||| | | | +----------+ +----------+ +----------+ +--+|| | | +--------------------------------------------+| | | | | | +--------------------+ +--------------------+|| | | | Recent Alerts | | Quick Actions ||| | | | [Alert 1 - Critical]| | [Go to Live View] ||| | | | [Alert 2 - High] | | [View All Alerts] ||| | | | [Alert 3 - Medium] | | [Review Unknowns] ||| | | | [Alert 4 - Low] | | [Open Settings] ||| | | | [Alert 5 - Info] | | ||| | | +--------------------+ +--------------------+|| +----------------------------------------------------------+ ``` **Section 1: Stats Row (Top)** 4 stat cards in a horizontal row, each taking ~25% width on desktop. | Card | Icon | Color | Value | Label | Trend | |------|------|-------|-------|-------|-------| | Cameras Online | `Video` | Green | "8/8" | "Online" | None | | Today's Detections | `ScanEye` | Blue | e.g. "24" | "Detections today" | +12% vs yesterday | | Pending Alerts | `Bell` | Orange | e.g. "3" | "Need attention" | Pulsing if >0 | | Unknown Today | `UserQuestion` | Purple | e.g. "7" | "Unknown persons" | None | - Each card: Standard card component with left colored icon circle (40px, colored bg at 15% opacity) - Value: 28px bold `--text-primary` - Label: 12px `--text-secondary` - Trend: 11px green/red arrow with percentage **Section 2: Live Camera Grid** - Container: Standard card spanning full width - Header: "Live Feeds" (H1) + layout toggle (2x4 / 1x8 / grid icons) + "View All" link - Grid: CSS Grid, `grid-template-columns: repeat(4, 1fr)`, gap 12px - Each cell: Camera feed card (see below) **Camera Feed Card (in grid):** - Aspect ratio: 16:9 - Background: `--bg-tertiary` with "No Signal" placeholder if offline - Live feed: RTSP stream via WebRTC/HLS, fills container - Top bar overlay (gradient from top, semi-transparent): - Left: Recording indicator (red pulsing dot when recording) - Center: Camera name (e.g., "CAM-01 Lobby") in white 12px - Right: Status badge (Online/Offline/Reconnecting) - Bottom bar overlay (gradient from bottom): - Left: Timestamp overlay (mono font, 11px) - Right: Expand icon button (`Maximize2`, 24px white) - Hover state: Shows action bar with: - Snapshot button (`Camera` icon) - Mute/unmute audio (`Volume2/VolumeX`) - Fullscreen button - Border: 2px solid transparent, transitions to `--accent-primary` on hover - Offline state: Gray "No Signal" text with camera icon, solid red left border **Section 3: Bottom Row** Split 60/40: **Left: Recent Alerts Card (60%)** - Header: "Recent Alerts" + badge count + "View All" link - List of 5 most recent alert mini-cards - Each mini-card: - 4px left border colored by severity - Icon: Alert type icon (person detected, unknown person, motion, etc.) - Text: Alert description (1 line) - Time: Relative ("2 min ago") - Hover: full row highlight, click opens alert detail modal - Footer: "View Alert Center" link **Right: Quick Actions Card (40%)** - Header: "Quick Actions" - Vertical list of action buttons: - "Open Live View" (`Video` icon, primary) - "Review Alerts" (`Bell` icon, secondary) - "Check Unknown Persons" (`UserQuestion` icon, secondary) - "AI Settings" (`Sparkles` icon, secondary) - "System Health" (`Activity` icon, ghost) - Each button: full width, icon left + label, medium size --- ### 3.3 Live Camera View **Route:** `/live` **Layout:** Full-width content, optional hide sidebar for maximum space **Purpose:** Dedicated page for viewing all camera feeds with full controls **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Live Camera View" [Layout] [Full] | | |------------------------------------------------| | [Nav] | Layout Toggle: [2x4] [1x8] [3x3] [Customize] | | | | | | +----------+ +----------+ +----------+ +--+ | | | | CAM-01 | | CAM-02 | | CAM-03 | |CAM| | | | | [LIVE] | | [LIVE] | | [OFFLINE]| |04 | | | | | Lobby | | Gate A | | Warehouse| | | | | | | [Record] | | [Record] | | | | | | | | +----------+ +----------+ +----------+ +--+ | | | +----------+ +----------+ +----------+ +--+ | | | | CAM-05 | | CAM-06 | | CAM-07 | |CAM| | | | | Office | | Parking | | Hallway | |08 | | | | | [LIVE] | | [LIVE] | | [LIVE] | | | | | | | | | | | | | | | | | +----------+ +----------+ +----------+ +--+ | | | | | | Bandwidth: 12.4 Mbps | CPU: 34% | Latency:45ms| +----------------------------------------------------------+ ``` **Layout Options:** | Layout | Grid | Best For | |--------|------|----------| | 2x4 (default) | 2 rows x 4 cols | 8 cameras, balanced view | | 1x8 | Single row, 8 cols | Wide monitors, quick scanning | | 3x3 | 3x3 with center emphasized | 8 cameras + 1 enlarged | | Custom | User-defined | Personalized preference | **Camera Feed (Enhanced from Dashboard):** Each camera cell is larger than on the dashboard, with more controls visible: - **Size:** Fills grid cell, 16:9 aspect ratio maintained - **Top overlay bar** (always visible): - Left: Recording indicator + "REC" text when recording (red, pulsing) - Center: Camera name in bold white text - Right: HD/SD quality badge + Online status dot - **Bottom overlay bar** (on hover): - Left: Timestamp - Center: Camera location - Right: Control buttons: - `Camera` — Take snapshot (saves to gallery, toast confirmation) - `Volume2/X` — Toggle audio - `Maximize2` — Expand to modal fullscreen - `Settings` — Quick camera settings - **Double-click:** Expands to fullscreen modal view - **Drag & drop:** Reorder cameras (in custom layout mode) - **Right-click context menu:** - "Open in Fullscreen" - "Take Snapshot" - "View Camera Details" - "Copy Stream URL" - "Configure Zones" **Fullscreen Single Camera Modal:** - Opens as fullscreen modal (95vw x 95vh) - Camera feed fills the modal - Floating control bar at bottom (auto-hide after 3s of mouse idle): - Play/Pause - Snapshot - Record toggle - Digital zoom (1x, 2x, 4x) - Pan controls (if PTZ supported) - Quality selector (Auto/HD/SD) - Close button - Camera info overlay (top-left): - Name, location, resolution, frame rate, bitrate - Alert history sidebar (collapsible, right side): - List of recent alerts for this camera - Click to jump to that timestamp **Bottom Status Bar:** - Fixed at bottom of content area - Background: `--bg-secondary` with top border - Height: 36px - Left: Total bandwidth consumption (live updating, mono font) - Center: System CPU usage percentage - Right: Stream latency (ms), color-coded (<100ms green, <300ms yellow, >300ms red) --- ### 3.4 Alert Center **Route:** `/alerts` **Layout:** Sidebar + two-panel layout (filters left, alert list right) **Purpose:** Central hub for all security alerts and notifications **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Alert Center" [Filter] [Export] [..] | | |------------------------------------------------| | [Nav] | +----------+ +--------------------------------+| | | | FILTERS | | Alert Cards List || | | | | | || | | | Severity:| | [CRITICAL] CAM-01 Lobby 2m ago|| | | | [x]Critical | Unknown person detected || | | | [x] High | [Ack] [View] [Ignore] || | | | [x] Medium | || | | | [x] Low | [HIGH] CAM-03 Warehouse 15m ago|| | | | | Motion detected in restricted || | | | Camera: | [Ack] [View] [Ignore] || | | | [All v] | || | | | | [MED] CAM-05 Office 1h ago || | | | Type: | Person: John Smith (Employee) || | | | [x] Unknown| [Ack] [View] [Ignore] || | | | [x] Motion | || | | | [x] Face +--------------------------------+| | | | [x] Night | Page 1 [2] [3] ... [25] | | | | | | | | | Time Range:| +------+ +------+ +------+ | | | | [Today v] | |Batch | |Clear | |Export| | | | | | |Ack | |All | |CSV | | | | | Status: | +------+ +------+ +------+ | | | | [x]Pending | | | | | [x]Ack | | | | | [x]Resolved| | | | +----------+ | +----------------------------------------------------------+ ``` **Left Panel: Filters (280px fixed width)** Filter sections with collapsible headers: 1. **Severity Filter:** - Checkboxes for each severity level - Color-coded: Critical (red), High (orange), Medium (yellow), Low (blue), Info (gray) - "Select All" / "Clear All" links - Badge count per severity showing available alerts 2. **Camera Filter:** - Multi-select dropdown: "All Cameras" or select individual - Each option shows camera name + online status dot 3. **Alert Type Filter:** - Checkboxes: Unknown Person, Known Person Detected, Motion, Night Mode, Watchlist Match, System - Each with representative icon 4. **Time Range:** - Preset buttons: "Last Hour", "Today", "Last 24h", "Last 7 Days", "Custom" - Custom: Date/time picker inputs 5. **Status Filter:** - Checkboxes: Pending, Acknowledged, Resolved, Ignored - Default: Pending + Acknowledged checked **Right Panel: Alert List** - Header: Total alerts count + sort dropdown (Newest First / Oldest First / Severity) - Alert cards: Vertical list with 12px gap **Alert Card Design:** ``` +----------------------------------------------------------+ | || Alert Card | | || 4px left border (severity color) | | |+-----------------------------------------------------+| | || [THUMB] | Alert Title (bold) [Severity Badge] || | || 120x80 | Description (1-2 lines) [Time badge] || | || | Camera: CAM-01 Lobby || | || | Person: Unknown #42 or John Smith || | |+-----------------------------------------------------+| | || [Acknowledge] [View Details] [Ignore dropdown] || | +-------------------------------------------------------+ ``` - **Thumbnail:** Left side, 120x80px, rounded `--radius-md` - Shows detected person face or event snapshot - Play icon overlay if video available - **Severity Badge:** Top-right, colored pill with icon + text - **Actions:** Bottom row of buttons - "Acknowledge" — Secondary button, marks as acknowledged - "View Details" — Opens detail modal - "Ignore" — Ghost button with dropdown for "Ignore Once" / "Ignore This Person" / "Ignore This Camera" **Alert Detail Modal (Medium-Large, 800px):** ``` +----------------------------------------------------------+ | [Alert #1234] [X] | | Critical — Unknown Person Detected | |----------------------------------------------------------| | +------------------------+ +----------------------------+| | | | | Details || | | [Large Image/Video] | | || | | | | Camera: CAM-01 Lobby || | | | | Time: 2025-06-15 14:32:05 || | | | | Severity: CRITICAL || | | | | Type: Unknown Person || | | | | Confidence: 94.2% || | | | | || | | | | Person Detected: || | | | | [Face thumbnail] Unknown || | | | | || | | | | Similar Matches: || | | | | [Face 1] 87% [Face 2] 72%||| | | | | || | | | | Actions: || | | | | [Name This Person] || | | | | [Add to Watchlist] || | | | | [Mark as False Positive] || | +------------------------+ +----------------------------+| |----------------------------------------------------------| | [Acknowledge] [Resolve] [Escalate] [Ignore] | +----------------------------------------------------------+ ``` **Batch Actions:** - Checkbox on each alert card for multi-select - Bottom bar appears when any selected: "Acknowledge All (N)", "Resolve All (N)", "Export Selected" --- ### 3.5 Recent Detections **Route:** `/detections` **Layout:** Sidebar + filter bar + detection grid **Purpose:** Browse all recent person detections with face thumbnails **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Recent Detections" [Avatar] | | |------------------------------------------------| | [Nav] | [All] [Known] [Unknown] [Today] [Custom...] | | | Filter: [Camera v] [Person v] [Sort v] | | | | | | +--------+ +--------+ +--------+ +--------+ | | | | [Face] | | [Face] | | [Face] | | [Face] | | | | | John | |Unknown | | Jane | |Unknown | | | | | 14:32 | | #12 | | 14:28 | | #15 | | | | | CAM-01 | | CAM-03 | | CAM-02 | | CAM-01 | | | | +--------+ +--------+ +--------+ +--------+ | | | +--------+ +--------+ +--------+ +--------+ | | | | [Face] | | [Face] | | [Face] | | [Face] | | | | | ... | | ... | | ... | | ... | | | | +--------+ +--------+ +--------+ +--------+ | | | | | | [Load More] or Infinite Scroll | +----------------------------------------------------------+ ``` **Filter Bar (sticky top):** - Tab pills: "All Detections" / "Known Persons" / "Unknown Persons" / "Watchlist Matches" - Camera filter dropdown - Person search (autocomplete for known persons) - Sort: "Newest First" / "Oldest First" / "Confidence High-Low" - Date range: quick buttons (Today / Yesterday / Last 7 Days / Custom) **Detection Card:** ``` +------------------+ | [Face Image] | | Square aspect | | ratio, fills card | | | | [Watchlist badge] | +------------------+ | Name: John Smith | | or "Unknown #12" | | 14:32:05 | | CAM-01 Lobby | | [View] [Name] | +------------------+ ``` - Face image: Square, 1:1 aspect ratio, fills top portion - Border: 3px bottom border color-coded: - Green: Known employee - Blue: Known visitor - Orange: Unknown person - Red: Watchlist match - Name: 14px bold, green for known, orange for unknown - Time: Mono font, 12px, `--text-muted` - Camera: 12px, `--text-secondary` - Actions (bottom, on card hover): - "View Details" — Opens detection detail modal - "Name This Person" — Only for unknowns, opens naming modal - "Add to Gallery" — Quick add **Detection Detail Modal:** - Large face image (left, ~50%) - Details panel (right): - Person name or "Unknown" - Detection time, camera, confidence - Full-frame image (the wider camera view showing context) - If known: link to person profile, last 5 sightings - If unknown: "Name This Person" prominent button + similar known persons suggestions **"Name This Person" Flow:** 1. Click "Name This Person" button (only shown for unknowns) 2. Modal opens with: - Large face image on left - Form on right: - "Name" text input (required) - "Role" select (Employee / Visitor / Vendor / Contractor / Other) - "Department" text input (optional) - "Company" text input (optional) - "Notes" textarea (optional) - "Tags" multi-select (predefined: VIP, Contractor, Temporary, etc.) - "Similar existing persons" section below: - Shows top 5 face matches from gallery with confidence % - "This is [Name]" button for each — merges detection into existing person - Bottom: "Save & Create Profile" primary button + "Cancel" 3. On save: Toast "Profile created for [Name]" + detection card updates in place --- ### 3.6 Person Gallery **Route:** `/gallery` **Layout:** Sidebar + search/filter bar + person grid **Purpose:** Directory of all known persons with search and filtering **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Person Gallery" | | |------------------------------------------------| | [Nav] | [Search by name...] [Role v] [Tag v] [Sort v] | | | [Employee] [Visitor] [Vendor] [Contractor] [+]| | | | | | +--------+ +--------+ +--------+ +--------+ | | | | [Face] | | [Face] | | [Face] | | [Face] | | | | | John | | Jane | | Mike | | Sarah | | | | | Smith | | Doe | | Johnson| | Lee | | | | |Employee| |Visitor | |Vendor | |Employee| | | | |IT Dept | |Sales | |ABC Inc | |HR | | | | +--------+ +--------+ +--------+ +--------+ | | | +--------+ +--------+ ... | | | | | | Showing 48 persons [1] [2] [3] ... | +----------------------------------------------------------+ ``` **Search & Filter Bar:** - Search input: "Search by name, role, or department..." with search icon - Role filter: All / Employee / Visitor / Vendor / Contractor / Other - Tag filter: Multi-select pills for tags (VIP, Temporary, Restricted, etc.) - Sort: Name A-Z / Name Z-A / Most Recent Sightings / Most Sightings / Date Added - View toggle: Grid (default) / List **Person Card (Grid View):** ``` +------------------+ | [Face Image] | | 1:1 square, | | object-fit cover | +------------------+ | John Smith | <- Full name, 14px bold | Employee | <- Role, 12px, colored pill | IT Department | <- Department, 12px muted | ABC Company | <- Company, 12px muted (optional) | Last seen: 2h ago | <- Timestamp, 11px muted | [View Profile] | <- Button appears on hover +------------------+ ``` - Card size: ~200px width, auto height - Face image: 1:1, `--radius-lg` on top corners only - Role badge: Colored pill below the image - Employee: Blue pill - Visitor: Green pill - Vendor: Purple pill - Contractor: Orange pill - Hover: Card lifts slightly, "View Profile" button appears at bottom - Click anywhere: Opens person profile page **Person Card (List View):** - Compact horizontal row - Face thumbnail: 48x48 circle - Name, role, department, last seen, sightings count - Actions: View, Edit, Quick Actions dropdown **Add Person Button:** - Floating action button (FAB) bottom-right on mobile, top-right "+ Add Person" on desktop - Opens modal: "Add New Person to Gallery" - Upload reference photo(s) — drag & drop zone or file picker, multiple allowed - Name, role, department, company, notes, tags - "Create Profile" button --- ### 3.7 Unknown Persons Review Queue **Route:** `/unknowns` **Layout:** Sidebar + filter bar + unknown cluster list **Purpose:** Review and process unknown person clusters detected by the system **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Unknown Persons Review" [Badge:3] | | |------------------------------------------------| | [Nav] | 12 unknown clusters need review | | | [Auto-Review] [Mark All Reviewed] [Settings] | | | | | | Sort: [Recent First v] Filter: [Camera v] | | | | | | +------------------------------------------+ | | | | [Face] Unknown Cluster #12 [12 sightings] | | | | First seen: 3 days ago | | | | | Last seen: 2 hours ago CAM-01, CAM-03 | | | | | [Name This Person] [Mark Reviewed] [Ignore]| | | | +------------------------------------------+ | | | | | | +------------------------------------------+ | | | | [Face] Unknown Cluster #8 [45 sightings] | | | | First seen: 2 weeks ago | | | | | Last seen: 1 day ago CAM-02, CAM-04 | | | | | [Name This Person] [Merge] [Mark Reviewed] | | | | +------------------------------------------+ | | | | | | +------------------------------------------+ | | | | [Face] Unknown Cluster #3 [8 sightings] | | | | ... | | | | | [Name] [Mark Reviewed] [Ignore] [Merge v] | | | | +------------------------------------------+ | +----------------------------------------------------------+ ``` **Header Stats:** - Large number: Total unknown clusters pending review - Subtext: "clusters need your attention" - Action buttons: "Auto-Review" (AI suggestions), "Mark All Reviewed" (with confirmation) **Unknown Cluster Card:** ``` +----------------------------------------------------------+ | +----------+ Unknown Cluster #42 | | | | 23 sightings over 5 days | | | [Rep | First: Jun 10, 14:32 | Last: Jun 15, 09:15| | | Face] | Cameras: CAM-01, CAM-03, CAM-05 | | | | Often seen: Weekdays, 9AM-6PM | +----------+------------------------------------------------ | [Name This Person] [Mark Reviewed] [Ignore] [Merge v] | +----------------------------------------------------------+ ``` - Representative face: 80x80px square, left side - Cluster ID: "Unknown Cluster #N" (auto-generated) - Sighting count: Badge with number - Time range: First seen / Last seen - Camera list: Which cameras this person was seen on - Pattern insight: AI-generated pattern (e.g., "Often seen: Weekdays, 9AM-6PM") **Actions per Cluster:** | Action | Button | Effect | |--------|--------|--------| | Name This Person | Primary | Opens the naming modal (same as in Recent Detections) | | Mark Reviewed | Secondary | Moves to "Reviewed" state, removes from queue | | Ignore | Ghost | Ignores this cluster, won't alert again, confirmation required | | Merge | Dropdown | Merge with another unknown cluster or existing person | **Merge Flow:** 1. Click "Merge" dropdown → "Merge with..." 2. Modal opens showing: - Current cluster face (left) - "Select target" search/scroll list of all other unknown clusters + known persons - Each option shows face thumbnail + name/ID - "Merge" button (disabled until target selected) 3. Confirmation dialog: "Merge Cluster #12 into John Smith? This cannot be undone." 4. On confirm: Toast "Clusters merged successfully" **Auto-Review Feature:** - "Auto-Review" button analyzes clusters and suggests: - "This cluster matches [Known Person] with 87% confidence" - "This cluster appears to be a false positive (lighting artifact)" - "This cluster has similar patterns to Cluster #8" - Shows suggestions inline with "Accept" / "Reject" buttons --- ### 3.8 Person Profile Page **Route:** `/gallery/:personId` **Layout:** Sidebar + two-column layout (info left, content right) **Purpose:** Comprehensive view of a single person's profile and activity **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Person Profile" [Edit] [Actions] | | |------------------------------------------------| | [Nav] | Breadcrumb: Gallery > John Smith | | | | | | +----------+ +--------------------------------+| | | | [Large | | John Smith || | | | Face | | Role: Employee || | | | Image] | | Department: Information Tech || | | | | | Company: Sentinel Corp || | | | | | Tags: [VIP] [IT] [Full-time] || | | | | | || | | | [Upload | | Notes: || | | | Photo] | | Regular employee. Access to || | | | | | server room approved. || | | +----------+ | Added: Jun 1, 2025 by admin || | | | Last seen: 2 hours ago || | | +--------------------------------+| | | | | | +----------------------------------------------+| | | | Sightings Timeline || | | | [Timeline graph showing activity over time] || | | | || | | | Jun 15, 2025 || | | | 14:32 [thumb] CAM-01 Lobby [View] || | | | 12:15 [thumb] CAM-03 Warehouse [View] || | | | 09:00 [thumb] CAM-01 Lobby [View] || | | | || | | | Jun 14, 2025 || | | | 16:45 [thumb] CAM-05 Office [View] || | | | ... || | | +----------------------------------------------+| | | | | | +--------------------+ +---------------------+ | | | | Training Images | | Watchlist Membership| | | | | [img] [img] [img] | | [x] VIP Watchlist | | | | | [img] [+] [Upload] | | [ ] Blacklist | | | | | 4 reference photos | | [ ] After Hours | | | | +--------------------+ +---------------------+ | +----------------------------------------------------------+ ``` **Left Column (320px fixed):** 1. **Large Face Image:** - 280x280px, 1:1, rounded `--radius-lg` - Best quality reference image - Hover: "Change Photo" overlay 2. **Upload Photo Button:** - Below the image - Opens file picker for new reference/training image - Supports drag & drop **Right Column (flex, remaining width):** 1. **Identity Header:** - Name: 22px bold - Role badge: Colored pill - Department, Company: 14px `--text-secondary` - Tags: Row of colored pills - Edit button (pencil icon) — opens edit modal 2. **Notes Section:** - Text area, scrollable if long - Edit in place (click to edit, blur to save) 3. **Metadata:** - "Added: [date] by [user]" - "Total sightings: [N]" - "Last seen: [relative time] at [camera]" - "First seen: [date] at [camera]" **Sightings Timeline:** - Date-grouped list (sticky date headers) - Each sighting: - Time (mono font) - Face thumbnail (48x48) - Camera name + location - Confidence percentage (colored: >90% green, >70% yellow, <70% orange) - "View" button — opens detection detail modal - Scrollable container, lazy load older sightings **Training Images Section:** - Grid of all reference/training images - Each image: 80x80px thumbnail, click to enlarge - "+" button to upload more - Hover on image: Delete button (with confirmation) **Watchlist Membership:** - Checkbox list of all watchlists - Checked = person is on that watchlist - Changes apply immediately with toast confirmation **Alert Preference Override:** - Override global alert settings for this person - "Use default settings" toggle - If off: Custom severity selector + notification preference **Edit Profile Modal:** - All fields editable: Name, Role, Department, Company, Notes, Tags - "Save Changes" primary button - "Delete Profile" destructive button (with confirmation dialog) --- ### 3.9 Suspicious Activity Timeline **Route:** `/timeline` **Layout:** Sidebar + filter bar + timeline visualization **Purpose:** Chronological view of suspicious/night-mode events for security review **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Suspicious Activity Timeline" | | |------------------------------------------------| | [Nav] | [Filter] [Export] [Date Range] | | | | | | +----------------------------------------------+| | | | TIMELINE VISUALIZATION || | | | || | | | 22:00 | || | | | 21:00 | [orange] Motion CAM-03 || | | | 20:00 | || | | | 19:00 | [red] Unknown person CAM-01 || | | | 18:00 | [orange] Motion CAM-05 || | | | 17:00 | || | | | +--------------------------------------|| | | | CAM-01 CAM-02 CAM-03 CAM-04 CAM-05 || | | +----------------------------------------------+| | | | | | Jun 15, 2025 — 5 events | | | | | | +----------------------------------------------+| | | | [red dot] 19:32:15 Unknown Person Detected || | | | CAM-01 Lobby | 94% confidence || | | | [View Details] [Acknowledge] || | | +----------------------------------------------+| | | | [orange] 18:45:22 Motion Detected || | | | CAM-05 Office | Restricted hours || | | | [View Details] [Acknowledge] || | | +----------------------------------------------+| | | | [yellow] 14:20:00 Person Detected || | | | CAM-02 Gate A | John Smith || | | | [View Details] || | | +----------------------------------------------+| +----------------------------------------------------------+ ``` **Timeline Visualization (Top):** - Horizontal bar chart showing events across cameras - X-axis: Cameras (CAM-01 through CAM-08) - Y-axis: Time (most recent at top) - Event dots: Colored by severity, sized by importance - Hover on dot: Tooltip with event summary - Click on dot: Scrolls to event detail below - Zoom controls: "1h" / "6h" / "24h" / "7d" / Custom **Event List (Bottom):** - Chronological list, newest first - Date headers as sticky sections - Each event card: - Color-coded severity dot (left edge) - Time (mono font, bold) - Event title (bold) - Camera name + location - Additional info (confidence, person name, etc.) - Action buttons: View Details, Acknowledge - Click card: Opens event detail modal with full image/video evidence **Filters:** - Event type: Motion / Unknown Person / Known Person / Watchlist Match / System - Severity: Critical / High / Medium / Low - Camera: Multi-select - Date range: Date picker --- ### 3.10 Search & Filter Page **Route:** `/search` **Layout:** Sidebar + search panel + results area **Purpose:** Advanced search across all detections, alerts, and persons **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Search & Filter" | | |------------------------------------------------| | [Nav] | +----------+ +--------------------------------+| | | | ADVANCED | | Search Results || | | | SEARCH | | "24 results for your criteria" || | | | | | || | | | Date: | | [Grid/List toggle] [Sort] [Exp]|| | | | [From] | | || | | | [To] | | +--------+ +--------+ +------+ || | | | | | | Result | | Result | | Res | || | | | Cameras: | | +--------+ +--------+ +------+ || | | | [x]CAM-01| | || | | | [x]CAM-02| | +--------+ +--------+ +------+ || | | | ... | | +--------+ +--------+ +------+ || | | | | | || | | | Persons: | | [1] [2] [3] ... [5] || | | | [Search] | +--------------------------------+| | | | | | | | | Event | Saved Searches: | | | | Types: | [Daily Report] [Night Shift] [..]| | | | [x]Motion| | | | | [x]Face | | | | | [x]Unkn | | | | | | | | | | Severity:| | | | | [x]High | | | | | [x]Med | | | | | | | | | |[Search] | | | | |[Clear] | | | | |[Save] | | | | +----------+ | +----------------------------------------------------------+ ``` **Advanced Search Panel (Left, 320px):** - **Date Range:** - "From" date-time picker - "To" date-time picker - Quick buttons: "Today", "Yesterday", "Last 7 Days", "Last 30 Days" - **Cameras:** - Checkbox list of all 8 cameras with online status - "Select All" / "Clear" links - **Persons:** - Search input: "Search known persons..." - Autocomplete dropdown with face thumbnails - "Include unknown persons" checkbox - **Event Types:** - Checkboxes: Person Detection, Motion, Watchlist Match, Night Mode Event, System Event - **Alert Severity:** - Checkboxes: Critical, High, Medium, Low, Info - **Watchlist:** - "Any watchlist match" checkbox - Or select specific watchlists - **Action Buttons (bottom, sticky):** - "Search" — Primary, full width - "Clear All" — Secondary - "Save Search" — Ghost (saves current criteria for future use) **Results Area:** - Results count: "Found 124 results for your search criteria" - View toggle: Grid / List - Sort: Relevance / Newest / Oldest - Export: CSV / JSON button **Result Card (Grid):** - Thumbnail image (event snapshot or face) - Event type badge - Timestamp - Camera name - Person name (if applicable) - Confidence score **Saved Searches:** - Below results or in collapsible section - List of saved searches with name + quick "Run" button - "Delete" option on hover - Default saved searches: "Daily Report" (last 24h), "Night Shift" (10PM-6AM), "Unknown Persons This Week" --- ### 3.11 Watchlist Management **Route:** `/watchlists` **Layout:** Sidebar + watchlist cards/panels **Purpose:** Manage watchlists (VIP, Blacklist, Custom) and their members **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "Watchlist Management" [+ New List] | | |------------------------------------------------| | [Nav] | | | | +-------------------+ +---------------------+ | | | | VIP Watchlist | | Blacklist | | | | | [Shield icon] | | [ShieldAlert icon] | | | | | | | | | | | | 12 persons | | 5 persons | | | | | Alert: Immediate | | Alert: Immediate | | | | | Notify: Security | | Notify: Manager+Sec | | | | | | | | | | | | [View] [Settings] | | [View] [Settings] | | | | +-------------------+ +---------------------+ | | | | | | +-------------------+ +---------------------+ | | | | After Hours | | [+ Create New | | | | | [Moon icon] | | Watchlist] | | | | | | | | | | | | 8 persons | | | | | | | Alert: Delayed | | | | | | | Notify: Security | | | | | | | | | | | | | | [View] [Settings] | | | | | | +-------------------+ +---------------------+ | +----------------------------------------------------------+ ``` **Watchlist Summary Card:** - Header: Watchlist name + icon - Color-coded top border: - VIP: Gold `#EAB308` - Blacklist: Red `#EF4444` - After Hours: Indigo `#6366F1` - Custom: User-defined color - Stats: Person count, alert rule summary, notification target - Actions: "View Members" (primary), "Settings" (secondary) **Watchlist Detail View (click "View"):** ``` +----------------------------------------------------------+ | VIP Watchlist [Edit] | |----------------------------------------------------------| | Alert Rule: Immediate notification on detection | | Notify: Security Team Telegram + WhatsApp | | | | +------+ +------+ +------+ +------+ +------+ | | | John | | Jane | | Mike | | +Add | | | | | |Smith | | Doe | |Brown | |Person| | | | | |[Rem] | |[Rem] | |[Rem] | | | | | | | +------+ +------+ +------+ +------+ +------+ | | | | [Add from Gallery] [Add by Detection] [Import CSV] | +----------------------------------------------------------+ ``` - Members grid: Face thumbnail + name + remove button (X on hover) - "+ Add Person" card at end of grid — opens person search/selector - Add options: - "Add from Gallery" — Opens gallery search modal - "Add by Recent Detection" — Shows recent detections, click to add - "Import from CSV" — Upload CSV with names/roles **Watchlist Settings Modal:** - Watchlist name - Icon selector (from preset icons) - Color picker - Alert rules: - Alert timing: Immediate / Delayed (specify minutes) / Digest (batch notifications) - Severity override: Use global / Force Critical / Force High - Notification channels: Telegram / WhatsApp / In-app / Email - Quiet hours override: Follow global / Custom per watchlist - "Delete Watchlist" destructive action (with confirmation) **Create New Watchlist:** - Modal with: Name, Icon, Color, Description - Default alert rules inherited from global settings - "Create" button → redirects to new watchlist detail page --- ### 3.12 AI Vibe Settings Page **Route:** `/ai-settings` **Layout:** Sidebar + scrollable settings cards **Purpose:** Simplified AI behavior tuning for non-technical operators > **CRITICAL:** This page MUST be extremely simple. Every control uses friendly language with plain-English explanations. No technical jargon exposed by default. **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "AI Vibe Settings" | | |------------------------------------------------| | [Nav] | These settings control how the AI behaves. | | | Changes take effect immediately. | | | [Restore Defaults] [? Help] | | | | | | +--------------------------------------------+ | | | | DETECTION SENSITIVITY | | | | | How carefully should the AI watch? | | | | | | | | | | [Low] [Balanced] [High] | | | | | Relaxed |●| Very Careful | | | | | | | | | | Low: Fewer alerts, might miss subtle things| | | | | Balanced: Good mix of accuracy and speed | | | | | High: Catches everything, more alerts | | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | FACE MATCH STRICTNESS | | | | | How sure must the AI be before naming | | | | | someone? | | | | | | | | | | [Relaxed] [Balanced] [Strict] | | | | | Easy match |●| Very careful match | | | | | | | | | | Relaxed: Names people more freely | | | | | Balanced: Good accuracy for most uses | | | | | Strict: Only names when very confident | | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | NIGHT MODE SENSITIVITY | | | | | How alert should the AI be after hours? | | | | | | | | | | [Low] [Balanced] [High] | | | | | Normal watch|●| Extra vigilant | | | | | | | | | | Low: Normal detection after hours | | | | | Balanced: Slightly more sensitive at night | | | | | High: Maximum sensitivity after hours | | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | EVIDENCE CAPTURE | | | | | How much evidence should the AI save? | | | | | | | | | | [Minimal] [Normal] [Detailed] | | | | | Save space |●| Save everything | | | | | | | | | | Minimal: Face snapshot only | | | | | Normal: Face + 5 second clip | | | | | Detailed: Face + 15 second clip + full frame| | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | ALERT STYLE | | | | | How urgently should the AI alert you? | | | | | | | | | | [Quiet] [Normal] [Critical] | | | | | Subtle |●| Very urgent | | | | | | | | | | Quiet: In-app notifications only | | | | | Normal: In-app + Telegram | | | | | Critical: All channels + sound alerts | | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | LEARNING MODE | | | | | How should the AI learn new faces? | | | | | | | | | | [Manual Only] [Suggested] [Approved Auto] | | | | | I teach it |●| It learns on its own | | | | | | | | | | Manual: You must approve every new person | | | | | Suggested: AI suggests, you confirm | | | | | Auto: AI learns automatically (review later)| | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | PRIVACY MODE | | | | | How should face data be handled? | | | | | | | | | | [Standard] [Restricted] [High Privacy] | | | | | Full features|●| Maximum privacy | | | | | | | | | | Standard: Normal face recognition | | | | | Restricted: No storage of raw face images | | | | | High Privacy: Face data encrypted + limited| | | | +--------------------------------------------+ | | | | | | +--------------------------------------------+ | | | | ADVANCED SETTINGS (expandable) | | | | | Show internal configuration mapping | | | | | [v] Expand | | | | +--------------------------------------------+ | +----------------------------------------------------------+ ``` **Each Settings Card Structure:** ``` +--------------------------------------------------+ | SETTING NAME (uppercase, 13px, muted) | | Friendly question (16px, bold) | | | | [Option 1] [Option 2] [Option 3] | | Slider visual | | | | Description text for selected option (14px, | | secondary color) | +--------------------------------------------------+ ``` **Control Component — Segmented Slider:** Each setting uses the same interactive pattern: - Three labeled options as a horizontal segmented control - Visual slider indicator shows current selection - Click any option to select - Smooth transition animation (200ms) when switching | Setting | Option 1 | Option 2 (default) | Option 3 | |---------|----------|-------------------|----------| | Detection Sensitivity | Low (0.7) | Balanced (0.5) | High (0.3) | | Face Match Strictness | Relaxed (0.6) | Balanced (0.75) | Strict (0.9) | | Night Mode Sensitivity | Low (0.6) | Balanced (0.5) | High (0.35) | | Evidence Capture | Minimal (face only) | Normal (face+5s) | Detailed (face+15s+frame) | | Alert Style | Quiet (in-app) | Normal (in-app+telegram) | Critical (all+sound) | | Learning Mode | Manual (0) | Suggested (1) | Approved Auto (2) | | Privacy Mode | Standard (0) | Restricted (1) | High Privacy (2) | **Dynamic Description:** - When an option is selected, the description text below updates to explain that option - Descriptions are short (1 line) and use plain English - Tooltip on each option: More detailed explanation on hover (400ms delay) **Advanced Settings Section (Collapsed by Default):** Click "Expand" to reveal a table showing the internal mapping: ``` +------------------+---------------+----------------+----------------+ | Setting | Internal Key | Current Value | Range | +------------------+---------------+----------------+----------------+ | Detection Sens. | conf_threshold| 0.50 | 0.10 - 0.90 | | Face Match | match_threshold| 0.75 | 0.50 - 0.95 | | Night Sens. | night_threshold| 0.50 | 0.20 - 0.80 | | Evidence Mode | capture_mode | "normal" | enum | | Alert Channels | alert_channels| ["app","tg"] | array | | Learning Mode | auto_learn | 1 | 0, 1, 2 | | Privacy Mode | privacy_level | 0 | 0, 1, 2 | +------------------+---------------+----------------+----------------+ ``` - Table is read-only for non-admin users - Admin users can directly edit numerical values - "Restore Defaults" button resets all to factory settings - Settings auto-save (no "Save" button needed) - Toast appears on change: "Detection Sensitivity updated to Balanced" **Help Button:** - Opens a modal with simple explanations of each setting - Uses analogies: "Think of Detection Sensitivity like the volume knob on a radio — Low means you'll hear only loud sounds..." --- ### 3.13 Training Review Page **Route:** `/training` **Layout:** Sidebar + tabbed interface **Purpose:** Review and manage AI training data and model performance **Tabs:** 1. **Pending Review** (default) 2. **Training Queue** 3. **Model History** 4. **Performance** **Tab 1: Pending Review** ``` +----------------------------------------------------------+ | 6 suggestions waiting for your review | | | | +------------------------------------------------------+ | | | [Face] Is this "John Smith"? | | | | Detected at CAM-01 on Jun 15, 14:32 | | | | Current match confidence: 87% | | | | Similar to: John Smith (82%), Mike Brown (45%) | | | | [Yes, that's John] [No, different person] | | | | [Not sure, skip] | | | +------------------------------------------------------+ | | | | +------------------------------------------------------+ | | | [Face] Is this a new person or existing? | | | | Detected at CAM-03 on Jun 15, 13:20 | | | | No good match found (best: 62%) | | | | [New Person] [Matches existing...] [Skip] | | | +------------------------------------------------------+ | ``` - Each suggestion card shows: - Face image (left, 100x100) - AI's question (bold) - Context: where/when detected - Confidence details - Action buttons - "Approve All Similar" button (bulk action) - "Review Later" — defers suggestion **Tab 2: Training Queue** - Shows images queued for training - Status: Pending / Processing / Completed / Failed - Progress bar for processing batch - "Add Images to Queue" button - "Process Queue Now" button (triggers training job) **Tab 3: Model History** - Table of model versions: - Version number - Training date - Number of training images - Accuracy score - Status: Active / Rolled Back / Archived - Actions: View Details, Rollback (if not active) **Tab 4: Performance** - Key metrics cards: - Face recognition accuracy: XX% - False positive rate: XX% - Processing speed: XX ms per frame - Total training images: XXX - Simple line chart: Accuracy over time (last 30 days) - "Trigger Retrain" button: Starts a new training cycle with confirmation dialog --- ### 3.14 System Health Page **Route:** `/health` **Layout:** Sidebar + status grid + detail panels **Purpose:** Monitor system health, service status, and diagnostics **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "System Health" [Run Self-Test] [?] | | |------------------------------------------------| | [Nav] | Overall Status: [GREEN DOT] All Systems OK | | | Last checked: 2 minutes ago | | | | | | +----------+ +----------+ +----------+ +-----+| | | | Camera | | AI Engine| | Storage | |Net- | | | | | System | | Pipeline | | | |work | | | | | | | | | | | | | | | | 8 Online | | Running | | 67% used | | OK | | | | | 0 Offline| | 34ms/f | | 234GB fr | |12ms | | | | | [View] | | [View] | | [View] | |[V] | | | | +----------+ +----------+ +----------+ +-----+| | | | | | +--------------------------------------------+| | | | Camera Connectivity Detail || | | | CAM-01 [green] Online 12ms 1080p@25fps || | | | CAM-02 [green] Online 15ms 1080p@25fps || | | | CAM-03 [green] Online 11ms 1080p@25fps || | | | CAM-04 [red] Offline -- -- || | | | CAM-05 [green] Online 18ms 1080p@25fps || | | | CAM-06 [green] Online 14ms 1080p@25fps || | | | CAM-07 [yellow]Interm. 245ms 720p@15fps || | | | CAM-08 [green] Online 13ms 1080p@25fps || | | +--------------------------------------------+| | | | | | +--------------------------------------------+| | | | AI Pipeline Status || | | | Face Detection: Running [green] || | | | Face Recognition: Running [green] || | | | Motion Detection: Running [green] || | | | Night Mode: Running [green] || | | | Alert Engine: Running [green] || | | | Notification: Running [green] || | | | Model Version: v2.3.1 (trained Jun 10) || | | | Uptime: 14 days, 6 hours || | | +--------------------------------------------+| +----------------------------------------------------------+ ``` **Service Status Cards (Top Row):** 4 cards, each representing a service group: | Card | Icon | Metrics | Status Colors | |------|------|---------|---------------| | Camera System | `Video` | Online count, offline count | Green/Red | | AI Pipeline | `Brain` | Status, processing speed | Green/Yellow/Red | | Storage | `HardDrive` | Used %, free space | Green/Yellow/Red | | Network | `Wifi` | Latency, packet loss | Green/Yellow/Red | - Each card: Status dot in top-right (pulsing green for healthy) - Click "View" to expand detail section below - Yellow warning at >80% storage, >100ms latency, <720p stream - Red critical at 100% storage, camera offline, AI pipeline down **Camera Connectivity Detail:** - Table: Camera name, status dot, status text, latency, resolution/fps - Status: Online (green) / Offline (red) / Intermittent (yellow) - Click row: Opens camera detail modal - Reconnect button for offline cameras **AI Pipeline Status:** - List of pipeline stages with status - Each: Stage name, status dot, status text - Processing speed: ms per frame - Model version info - System uptime **Storage Detail:** - Donut chart: Used vs Free - Numbers: Total / Used / Free - Breakdown: Video recordings / Images / Logs / Other - Yellow warning at >80%, red at >95% **Recent Errors Section:** - Collapsible section - Table: Timestamp, service, error message, severity - "View Logs" button links to log viewer **Self-Test Feature:** - "Run Self-Test" button in header - Opens modal with progress: - "Testing camera connections..." → 8 checks - "Testing AI pipeline..." → 5 checks - "Testing storage..." → 1 check - "Testing notifications..." → 1 check - Results: Green checkmarks or red X for each test - "Last Self-Test Results" section shows historical test runs - "Download Report" button (JSON/CSV) --- ### 3.15 Notification Settings **Route:** `/settings/notifications` **Layout:** Sidebar + settings sections **Purpose:** Configure how and where alerts are sent **Section 1: Telegram** ``` +----------------------------------------------------------+ | Telegram Notifications | | Send alerts to your Telegram group or personal chat. | | | | [x] Enable Telegram notifications | | | | Bot Token: | | [______________________________] [? How to get this] | | | | Chat ID: | | [______________________________] [? How to find this] | | | | Message Format: [Standard v] [Preview] | | | | [Test Telegram] Last test: Success (Jun 15, 14:32) | +----------------------------------------------------------+ ``` - Bot Token input: Password-masked, with show/hide toggle - Chat ID input: Plain text - Help tooltips: "How to create a Telegram bot" and "How to find your chat ID" - Test button: Sends a test message, shows result inline - Message format: Standard / Minimal / Detailed **Section 2: WhatsApp** ``` +----------------------------------------------------------+ | WhatsApp Notifications | | Send alerts via WhatsApp Business API. | | | | [x] Enable WhatsApp notifications | | | | API Key: | | [______________________________] [?] | | | | Recipients (one per line): | | [______________________________] | | [+ Add Recipient] | | | | [Test WhatsApp] Last test: Failed (check API key) | +----------------------------------------------------------+ ``` - Similar structure to Telegram - Recipients: Multi-line input for phone numbers - Add Recipient button for individual entry with validation **Section 3: Alert Routing Rules** ``` +----------------------------------------------------------+ | Alert Routing Rules | | Decide which alerts go where. | | | | Rule 1: Critical alerts → Telegram + WhatsApp | | [Edit] [Delete] | | | | Rule 2: Unknown persons → Telegram only | | [Edit] [Delete] | | | | [+ Add New Rule] | +----------------------------------------------------------+ ``` - Each rule: Condition (severity/type/camera) → Action (channels) - Add Rule modal: - When: [Severity is / Type is / Camera is / Person is] [value] - Then send to: [x] Telegram [x] WhatsApp [x] In-app [x] Email - "Save Rule" button **Section 4: Quiet Hours** ``` +----------------------------------------------------------+ | Quiet Hours | | Suppress non-critical alerts during these hours. | | | | [x] Enable Quiet Hours | | | | From: [21:00 v] To: [07:00 v] [Every Day v] | | | | During quiet hours: | | (x) Only critical alerts | | ( ) All alerts in-app only (no external notifications) | | ( ) Completely silent | +----------------------------------------------------------+ ``` - Time pickers with 30-minute increments - Repeat: Every Day / Weekdays / Weekends / Custom days - During quiet hours: Radio button options **Section 5: Per-Camera Overrides** - Table: Camera name, default behavior, override - Override dropdown: Default / Always notify / Quiet / Ignore **Section 6: Per-Person Overrides** - Searchable list of known persons - Override dropdown per person: Default / Always notify / Quiet / Ignore --- ### 3.16 Admin User Management **Route:** `/settings/users` **Layout:** Sidebar + user list **Access:** Admin role only **Purpose:** Manage system users and their permissions **Visual Structure:** ``` +----------------------------------------------------------+ | Sidebar | Top Bar: "User Management" [+ Add User] | | |------------------------------------------------| | [Nav] | Search: [________________] Role: [All v] | | | | | | +------------------------------------------------ | | | [Avatar] John Smith [Admin] [Edit] | | | | john@company.com Last: 2h ago [..] | | | | 2FA: Enabled Status: Active | | | +------------------------------------------------ | | | [Avatar] Jane Doe [Operator] [Edit] | | | | jane@company.com Last: 1d ago [..] | | | | 2FA: Disabled Status: Active | | | +------------------------------------------------ | | | [Avatar] Mike Brown [Viewer] [Edit] | | | | mike@company.com Last: 5d ago [..] | | | | 2FA: Disabled Status: Inactive | | | +------------------------------------------------ +----------------------------------------------------------+ ``` **User List:** - Each row: Avatar (40px circle), Name, Email, Role badge, 2FA status, Last login, Status, Actions - Sortable columns: Name, Role, Last Login, Status - Filter: Role dropdown, Status dropdown - Search: Name or email **Roles:** | Role | Badge Color | Permissions | |------|------------|-------------| | Admin | Red | Full access: users, cameras, AI settings, system | | Operator | Blue | Alerts, detections, gallery, watchlists, review | | Viewer | Green | View-only: live feeds, gallery, timeline | **Add/Edit User Modal:** - Name (required) - Email (required) - Role (select) - Password (required for new, optional for edit) - Force password change on first login (toggle) - 2FA: Enabled/Disabled - Status: Active / Inactive / Locked - "Save" / "Cancel" / "Delete User" (destructive) **User Detail View (click row):** - Full profile info - Activity log: Login history (timestamp, IP, device) - Actions taken: Alerts acknowledged, persons named, settings changed - "Deactivate Account" / "Reset Password" / "Delete Account" **Activity Log:** - Separate tab or section - Table: Timestamp, User, Action, Target, Details - Filter by user, action type, date range - Export to CSV --- ### 3.17 Camera Management **Route:** `/settings/cameras` **Layout:** Sidebar + camera cards **Purpose:** Configure cameras, zones, and stream settings **Camera List:** ``` +----------------------------------------------------------+ | 8 cameras configured | | | | +-----------------------------------------------------+ | | | [CAM-01] Lobby [Edit] [Zones] [..]| | | | [green] Online | 192.168.1.101 | H264 1080p@25 | | | | Stream: Active | Last seen: 2s ago | | | +-----------------------------------------------------+ | | | | +-----------------------------------------------------+ | | | [CAM-02] Main Gate [Edit] [Zones] [..]| | | | [green] Online | 192.168.1.102 | H264 1080p@25 | | | | Stream: Active | Night Mode: ON | | | +-----------------------------------------------------+ | | | | +-----------------------------------------------------+ | | | [CAM-03] Warehouse [Edit] [Zones] [..]| | | | [red] Offline | 192.168.1.103 | -- | | | | Last seen: 2h ago | [Reconnect Now] | | | +-----------------------------------------------------+ | +----------------------------------------------------------+ ``` **Camera Card:** - Camera name + custom label - Status: Online/Offline with colored dot - IP address / connection string - Stream info: Codec, resolution, framerate - Action buttons: Edit, Configure Zones, More (...) - Night mode toggle (if applicable) - Quick disable/enable toggle **Edit Camera Modal:** - Camera Name (required) - Location description - Stream URL / IP address - RTSP port - Username / Password (for DVR authentication) - Channel number (for DVR: 1-8) - Stream settings: - Resolution: 1080p / 720p / 480p - Frame rate: 30 / 25 / 20 / 15 fps - Codec: H264 / H265 / MJPEG - Advanced: Bitrate, keyframe interval - "Save Changes" / "Test Connection" / "Delete Camera" **Zone Configuration:** ``` +----------------------------------------------------------+ | Configure Zones — CAM-01 Lobby | | | | +----------------------------------------------------+ | | | | | | | [Camera Live Feed] | | | | | | | | [Polygon drawing overlay] | | | | | | | | Zone 1 (blue polygon) | | | | Zone 2 (red polygon) | | | | | | | +----------------------------------------------------+ | | | | Zones: | | Zone 1: Entrance Area [blue] [Edit] [Delete] | | Zone 2: Restricted Area [red] [Edit] [Delete] | | | | [+ Add Zone] Click on the image to draw a polygon. | +----------------------------------------------------------+ ``` - Live camera feed as background image - Click points on image to draw polygon zones - Each zone: Name, color picker, sensitivity slider - Zone types: Entrance / Restricted / Detection / Ignore - "Clear All Zones" / "Save Zones" buttons **Stream Settings Per Camera:** - Enable/disable this camera (toggle) - Night mode: Enable / Disable / Follow global schedule - Recording: Always / On Detection / Never - Detection zones: Use global / Custom zones --- ### 3.18 Retention & Storage Settings **Route:** `/settings/storage` **Layout:** Sidebar + settings sections **Purpose:** Manage data retention policies and storage **Visual Structure:** ``` +----------------------------------------------------------+ | Storage Overview | | | | [Donut Chart: 67% used] | | | | Total: 1 TB Used: 670 GB Free: 330 GB | | | | Breakdown: | | Video Recordings [||||||| ] 350 GB (52%) | | Detection Images [||| ] 150 GB (22%) | | Training Images [|| ] 100 GB (15%) | | Logs [| ] 50 GB (7%) | | Other [| ] 20 GB (4%) | | | +----------------------------------------------------------+ Retention Policies Video Recordings: [30 days v] [? Keep recordings for] Detection Images: [90 days v] [? Keep detection photos] Training Images: [1 year v] [? Keep training data] System Logs: [30 days v] [? Keep system logs] Alert History: [1 year v] [? Keep alert records] Auto-cleanup: [x] Enable automatic cleanup Run daily at [02:00 v] [Save Settings] [Run Cleanup Now] [Export Storage Report] ``` **Storage Overview:** - Donut chart showing usage breakdown (4 categories) - Numerical values: Total / Used / Free - Color-coded by category - Warning at >80% usage (yellow), critical at >95% (red) **Retention Policy Controls:** - Each policy: Label + Select dropdown (days/months/years) - Dropdown options: 7 days / 14 days / 30 days / 60 days / 90 days / 6 months / 1 year / 2 years / Forever - Tooltip explaining each **Auto-Cleanup:** - Enable toggle - Schedule time picker - "Run Cleanup Now" — triggers immediate cleanup with confirmation - Progress modal showing cleanup status **Actions:** - "Save Settings" — Primary button - "Run Cleanup Now" — Secondary button with confirmation - "Export Storage Report" — Downloads detailed breakdown --- ## 4. Component Specifications ### 4.1 Camera Feed Component **Props:** | Prop | Type | Default | Description | |------|------|---------|-------------| | `cameraId` | string | required | Unique camera identifier | | `name` | string | required | Display name | | `streamUrl` | string | required | HLS/WebRTC stream URL | | `status` | 'online' \| 'offline' \| 'reconnecting' \| 'disabled' | 'offline' | Connection status | | `isRecording` | boolean | false | Recording state indicator | | `layout` | 'grid' \| 'fullscreen' | 'grid' | Display mode | | `showControls` | boolean | true | Show overlay controls | | `onExpand` | () => void | undefined | Expand to fullscreen callback | | `onSnapshot` | () => void | undefined | Snapshot taken callback | | `quality` | 'auto' \| 'hd' \| 'sd' | 'auto' | Stream quality | **States:** - Loading: Spinner overlay while stream initializes - Playing: Live stream active - Paused: User paused - Error: Connection failed, retry button shown - Offline: Gray placeholder with camera icon ### 4.2 Alert Card Component **Props:** | Prop | Type | Description | |------|------|-------------| | `id` | string | Alert unique ID | | `severity` | 'critical' \| 'high' \| 'medium' \| 'low' \| 'info' | Alert severity | | `type` | string | Alert type (unknown_person, motion, etc.) | | `cameraName` | string | Source camera | | `timestamp` | Date | When the alert occurred | | `thumbnail` | string | Image URL for the event | | `personName` | string? | Identified person name, if known | | `description` | string | Alert description text | | `status` | 'pending' \| 'acknowledged' \| 'resolved' \| 'ignored' | Current status | | `onAcknowledge` | () => void | Acknowledge handler | | `onResolve` | () => void | Resolve handler | | `onIgnore` | () => void | Ignore handler | | `onViewDetails` | () => void | View details handler | ### 4.3 Person Card Component **Props:** | Prop | Type | Description | |------|------|-------------| | `id` | string | Person unique ID | | `name` | string | Display name | | `faceImage` | string | Face image URL | | `role` | 'employee' \| 'visitor' \| 'vendor' \| 'contractor' \| 'other' | Role type | | `department` | string? | Department name | | `company` | string? | Company name | | `tags` | string[] | Array of tag strings | | `lastSeen` | Date? | Last detection timestamp | | `sightingsCount` | number | Total number of sightings | | `isKnown` | boolean | Whether person is identified | | `variant` | 'grid' \| 'list' \| 'compact' | Display variant | | `onClick` | () => void | Click handler | ### 4.4 Stat Card Component **Props:** | Prop | Type | Description | |------|------|-------------| | `title` | string | Card label | | `value` | string \| number | Main value to display | | `icon` | LucideIcon | Icon component | | `color` | 'green' \| 'blue' \| 'orange' \| 'red' \| 'purple' | Accent color | | `trend` | number? | Percentage change (optional) | | `trendLabel` | string? | Trend description | | `onClick` | () => void? | Optional click handler | ### 4.5 Segmented Control Component **Props:** | Prop | Type | Description | |------|------|-------------| | `options` | Array<{label: string, value: string, description: string}> | Available options | | `value` | string | Currently selected value | | `onChange` | (value: string) => void | Selection change handler | | `size` | 'sm' \| 'md' \| 'lg' | Control size | **Behavior:** - Click option to select - Visual slider animates to selected position (200ms ease) - Description text updates below based on selection --- ## 5. User Flows ### 5.1 Daily Operator Flow (Monitor & Respond) ``` Step 1: Login ↓ Enter credentials ↓ MFA if enabled ↓ Redirect to Dashboard Step 2: Dashboard Review (30 seconds) ↓ Glance at stats (all cameras online? any pending alerts?) ↓ Scan recent alerts card (last 5 alerts) ↓ If critical alert visible → click to Alert Center ↓ If no urgent alerts → proceed to Live View Step 3: Live Camera View (ongoing) ↓ View 2x4 grid of all cameras ↓ Observe feeds for any anomalies ↓ If alert toast appears → click toast to view details Step 4: Alert Response (when alert occurs) ↓ Click alert toast or navigate to Alert Center ↓ Review alert card (thumbnail, camera, type, severity) ↓ Click "View Details" for full information ↓ Review full image/video evidence ↓ If false positive → "Mark as False Positive" ↓ If legitimate → "Acknowledge" or "Resolve" ↓ If unknown person needs identification → "Name This Person" ↓ Return to monitoring Step 5: End of Shift ↓ Review any unacknowledged alerts ↓ Check System Health page ↓ Log out ``` ### 5.2 New Person Onboarding Flow ``` Step 1: Detection occurs ↓ System detects unknown person ↓ Alert created (if alert settings allow) Step 2: Review in Recent Detections ↓ Operator navigates to Recent Detections ↓ Filters by "Unknown" ↓ Clicks on detection card Step 3: Name the Person ↓ Clicks "Name This Person" button ↓ Enters name, selects role (Employee) ↓ Fills department, adds notes ↓ Checks "Similar existing persons" — no match ↓ Clicks "Save & Create Profile" Step 4: Profile Created ↓ Toast: "Profile created for John Smith" ↓ Detection card updates to show "John Smith" ↓ Person is now in Gallery Step 5: Add Training Images (optional) ↓ Navigate to Person Profile ↓ Upload additional reference photos ↓ System queues for retraining ``` ### 5.3 Unknown Person Review Flow ``` Step 1: Navigate to Unknown Review Queue ↓ Sidebar → "Unknown Persons Review" ↓ View list of unknown clusters Step 2: Review Cluster ↓ Click on cluster card ↓ View representative face + sighting history ↓ Check AI pattern insight Step 3: Decision ├─ If person is known → "Name This Person" → enter details → save ├─ If person matches existing cluster → "Merge" → select target → confirm ├─ If false detection → "Ignore" → confirm └─ If unsure → "Mark as Reviewed" → remains resolved, can revisit later Step 4: Queue Updates ↓ Processed item removed from queue ↓ Toast confirms action ↓ Proceed to next cluster ``` ### 5.4 AI Settings Adjustment Flow ``` Step 1: Navigate to AI Vibe Settings ↓ Sidebar → "AI Vibe Settings" ↓ View all 7 settings on one scrollable page Step 2: Adjust Detection Sensitivity ↓ Read friendly question: "How carefully should the AI watch?" ↓ Current: "Balanced" ↓ Change to "High" (more alerts after recent incidents) ↓ Description updates: "High: Catches everything, more alerts" ↓ Toast: "Detection Sensitivity updated to High" Step 3: Adjust Alert Style ↓ Change from "Normal" to "Critical" ↓ All channels will now be used for alerts Step 4: Review Advanced (optional) ↓ Click "Expand" on Advanced Settings ↓ View internal numerical values ↓ (Admin only: directly edit values) Step 5: Done ↓ No save button needed (auto-save) ↓ Return to monitoring ↓ Changes effective immediately ``` ### 5.5 Watchlist Alert Configuration Flow ``` Step 1: Navigate to Watchlists ↓ Sidebar → "Watchlists" ↓ View existing watchlists Step 2: Create New Watchlist (optional) ↓ Click "+ New Watchlist" ↓ Enter name: "Server Room Access" ↓ Select icon: Shield ↓ Choose color: Orange ↓ Click "Create" Step 3: Add Members ↓ Click "Add from Gallery" ↓ Search and select authorized persons ↓ Click "Add to Watchlist" Step 4: Configure Alerts ↓ Click "Settings" on the watchlist ↓ Alert timing: Immediate ↓ Severity: Force Critical ↓ Notify: Security Team ↓ Quiet hours: Follow global ↓ Save Step 5: Test ↓ Click "Test Alert" ↓ Verify notification received on configured channels ``` --- ## 6. Interaction Patterns ### 6.1 Real-Time Updates - **WebSocket Connection:** Persistent connection for live updates - **Camera Feeds:** HLS/WebRTC streams update continuously - **Alerts:** New alerts appear as toast notifications + update alert count badge - **Status Changes:** Camera online/offline updates in real-time (green/red dot transitions) - **Stats:** Dashboard stats refresh every 30 seconds (with subtle pulse animation on change) ### 6.2 Loading States | Scenario | Pattern | Duration Handling | |----------|---------|-------------------| | Page load | Skeleton screens matching content layout | Remove on data fetch | | Camera stream | Spinner overlay → fade to stream | Retry 3x, then show error | | Search | Inline spinner in search field | Debounce 300ms | | Form submit | Button loading state (spinner + text) | Until API response | | Data fetch | Skeleton cards | Remove on data ready | | AI processing | Progress bar with step labels | Until completion | ### 6.3 Empty States | Page | Empty Message | CTA | |------|--------------|-----| | Dashboard alerts | "No alerts in the last 24 hours. All clear!" | None | | Alert Center (filtered) | "No alerts match your filters." | "Clear Filters" | | Recent Detections | "No detections yet. System may be initializing." | None | | Person Gallery | "No persons in gallery yet." | "Add First Person" | | Unknown Queue | "Great job! No unknown persons to review." | None | | Training Review | "No pending training suggestions." | None | | Watchlists | "No watchlists created yet." | "Create Watchlist" | ### 6.4 Confirmation Patterns | Action | Confirmation Type | Message | |--------|-------------------|---------| | Delete person | Modal dialog | "Delete John Smith? This cannot be undone. All detection history will be lost." | | Ignore alert | Inline + undo | "Alert ignored. [Undo]" (5s) | | Mark all reviewed | Modal dialog | "Mark all 12 clusters as reviewed?" | | Run cleanup | Modal dialog | "This will permanently delete 45GB of old data. Continue?" | | Delete user | Modal dialog | "Delete user account? All activity history will be preserved." | | Change AI settings | None (auto-save with toast) | "Setting updated" | | Retrain model | Modal dialog | "Retraining will take 10-30 minutes. The system will use the last known model during training. Continue?" | ### 6.5 Keyboard Shortcuts | Shortcut | Action | |----------|--------| | `Esc` | Close modal / exit fullscreen | | `F` | Toggle fullscreen on focused camera | | `S` | Take snapshot of focused camera | | `1-8` | Focus camera 1-8 in live view | | `A` | Acknowledge selected alert | | `N` | Name unknown person (when viewing) | | `/` | Focus global search | | `?` | Show keyboard shortcuts help | ### 6.6 Animation Guidelines | Animation | Duration | Easing | Usage | |-----------|----------|--------|-------| | Page transition | 200ms | ease-out | Route changes | | Modal open | 250ms | cubic-bezier(0.16, 1, 0.3, 1) | Dialog appearance | | Modal close | 150ms | ease-in | Dialog dismissal | | Sidebar toggle | 250ms | ease-in-out | Collapse/expand | | Toast slide-in | 300ms | ease-out | Notification appear | | Toast fade-out | 200ms | ease-in | Notification dismiss | | Card hover lift | 150ms | ease | Card hover effect | | Segmented slider | 200ms | ease | AI settings toggle | | Pulse (status) | 2s | ease-in-out | Recording indicator | | Stats update | 500ms | ease | Number count-up | | Skeleton shimmer | 1.5s | linear infinite | Loading state | --- ## 7. Responsive Behavior ### 7.1 Desktop (1200px+ — Primary Target) - **Sidebar:** Expanded, 260px width - **Camera Grid:** 2x4 default, 4 columns for dashboard - **Content:** Full multi-column layouts - **Stats Row:** 4 cards horizontal - **Person Gallery:** 4-6 columns - **All features available** ### 7.2 Tablet (768px - 1199px) - **Sidebar:** Collapsed by default, tap hamburger to expand overlay - **Camera Grid:** 2x4 or adaptive grid - **Stats Row:** 2x2 grid - **Person Gallery:** 3-4 columns - **Alert Center:** Filters as collapsible drawer - **Touch-friendly:** Larger tap targets (min 44px) ### 7.3 Mobile (< 768px — Not Primary) - **Sidebar:** Hidden, hamburger menu opens full-screen overlay - **Camera Grid:** 1 column (scroll vertically), 2 columns optional - **Stats Row:** 2x2 grid or horizontal scroll - **Person Gallery:** 2 columns - **Alert Center:** Full-width cards, filters in bottom sheet - **AI Settings:** Full-width segmented controls (stacked if needed) - **Simplified navigation:** Bottom tab bar option for key pages ### 7.4 Breakpoints | Breakpoint | Width | Layout Changes | |------------|-------|---------------| | `xl` | 1400px+ | Max content width 1400px, centered | | `lg` | 1200px | Full desktop layout | | `md` | 992px | Collapsible sidebar, 3-col grids | | `sm` | 768px | Mobile navigation, 2-col grids | | `xs` | 576px | Single column, stacked layouts | --- ## 8. Implementation Notes ### 8.1 Technology Stack Mapping | Layer | Technology | Notes | |-------|-----------|-------| | Frontend | React + Next.js 14+ | App Router, Server Components | | Styling | Tailwind CSS + CSS Variables | Dark mode via `dark` class | | UI Components | shadcn/ui base | Customized for dark theme | | Icons | Lucide React | Consistent icon set | | State Management | Zustand | Lightweight global state | | Real-time | Socket.IO client | WebSocket for live updates | | Video | hls.js / native WebRTC | HLS for camera streams | | Charts | Recharts | Performance metrics, timelines | | Maps (zones) | SVG + native events | Polygon drawing on camera feed | | Backend API | FastAPI | RESTful + WebSocket endpoints | ### 8.2 API Endpoint Conventions | Endpoint Pattern | Purpose | |-----------------|---------| | `GET /api/cameras` | List all cameras with status | | `GET /api/cameras/{id}/stream` | Get stream URL | | `GET /api/alerts` | List alerts (with filters) | | `POST /api/alerts/{id}/acknowledge` | Acknowledge alert | | `GET /api/detections` | List detections | | `GET /api/persons` | List known persons | | `POST /api/persons` | Create new person | | `GET /api/persons/{id}` | Get person profile | | `GET /api/unknowns` | List unknown clusters | | `POST /api/unknowns/{id}/name` | Name unknown cluster | | `GET /api/ai-settings` | Get AI settings | | `PUT /api/ai-settings` | Update AI settings | | `GET /api/health` | System health status | | `WS /api/ws` | WebSocket for real-time updates | ### 8.3 Accessibility Considerations - All interactive elements: Minimum 44x44px tap target - Color is never the sole indicator — always paired with icon or text - All images have alt text - Keyboard navigation supported throughout - Focus indicators visible on all interactive elements - Screen reader labels for status indicators - Respect `prefers-reduced-motion` for animations - ARIA labels on icon-only buttons - Form validation with clear error messages ### 8.4 Performance Targets | Metric | Target | |--------|--------| | First Contentful Paint | < 1.5s | | Time to Interactive | < 3s | | Camera stream latency | < 500ms | | Alert notification delay | < 2s from event to toast | | Page transition | < 200ms | | API response time | < 200ms (p95) | | Simultaneous streams | 8 streams at 1080p | ### 8.5 Security Considerations - All API calls require JWT authentication - Camera credentials encrypted at rest - Session timeout: 30 minutes inactivity - Role-based access control (RBAC) enforced on all routes - Audit log for all admin actions - HTTPS-only for all communications - Sensitive settings (API keys) masked in UI --- ## Appendix A: Icon Reference | Usage | Lucide Icon | Size | |-------|------------|------| | Dashboard | `LayoutDashboard` | 20px | | Live View | `Video` | 20px | | Alerts | `Bell` | 20px | | Detections | `ScanEye` | 20px | | Person Gallery | `Users` | 20px | | Unknown Review | `UserQuestion` | 20px | | Timeline | `ClockAlert` | 20px | | Search | `Search` | 20px | | Watchlists | `ShieldAlert` | 20px | | AI Settings | `Sparkles` | 20px | | Training | `Brain` | 20px | | System Health | `Activity` | 20px | | Settings | `Settings` | 20px | | Camera | `Camera` | 20px | | Storage | `HardDrive` | 20px | | Users Admin | `UserCog` | 20px | | Online Status | `Circle` (filled) | 8px | | Recording | `Circle` (filled, pulsing) | 8px | | Expand | `Maximize2` | 16px | | Snapshot | `Camera` | 16px | | Close | `X` | 16px | | Edit | `Pencil` | 16px | | Delete | `Trash2` | 16px | | Check | `Check` | 16px | | Warning | `AlertTriangle` | 16px | | Info | `Info` | 16px | | Chevron | `ChevronDown/Right` | 16px | | Trend Up | `TrendingUp` | 14px | | Trend Down | `TrendingDown` | 14px | | Play | `Play` | 20px | | Pause | `Pause` | 20px | | Volume On | `Volume2` | 16px | | Volume Off | `VolumeX` | 16px | | Refresh | `RefreshCw` | 16px | | Export | `Download` | 16px | | Filter | `Filter` | 16px | | Sort | `ArrowUpDown` | 16px | | More Actions | `MoreVertical` | 16px | | Logout | `LogOut` | 16px | --- ## Appendix B: Glossary | Term | Definition | |------|-----------| | CP PLUS DVR | Digital Video Recorder from CP PLUS brand, supports 8 camera channels | | HLS | HTTP Live Streaming, protocol for video streaming | | WebRTC | Web Real-Time Communication, low-latency streaming | | RTSP | Real Time Streaming Protocol, used by DVRs | | Face Cluster | Group of face detections believed to be the same person | | Confidence Score | AI's certainty percentage for a face match (0-100%) | | Watchlist | Curated list of persons with special alert rules | | Night Mode | Enhanced detection sensitivity during configured off-hours | | Zone | User-defined polygonal area within a camera's field of view | | Evidence Capture | Saved media (image + video clip) associated with a detection event | | Self-Test | Automated diagnostic check of all system components | | Training Image | Reference photo used to improve face recognition accuracy | | MFA | Multi-Factor Authentication | | RBAC | Role-Based Access Control | --- *End of Document — Sentinel AI Surveillance Dashboard UX/UI Design*