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
- Design System Foundations
- Global Design Elements
- 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
- Component Specifications
- User Flows
- Interaction Patterns
- Responsive Behavior
- 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 (
LogOuticon)
Active State:
- Background:
--accent-primaryat 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:
- Header: Title (H1) + close button (X)
- Body: Scrollable content area (max-height: 70vh)
- 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-primarybackground, 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:
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
Login Card:
- Background:
--bg-secondary - Border: 1px
--border-subtle - Border-radius:
--radius-xl(16px) - Padding: 32px
- Shadow:
--shadow-md - Max-width: 400px
- Background:
Username Field:
- Label: "Username or Email"
- Placeholder: "Enter your username"
- Left icon:
Userfrom lucide - Auto-focus on page load
- Tab order: 1
Password Field:
- Label: "Password"
- Placeholder: "Enter your password"
- Left icon:
Lock - Right: Eye/EyeOff toggle for show/hide
- Tab order: 2
Remember Me:
- Checkbox, default unchecked
- Label: "Keep me signed in for 7 days"
Forgot Password:
- Text link,
--accent-primary - Click: opens modal with email input for reset link
- Text link,
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
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
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-tertiarywith "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 (
Cameraicon) - Mute/unmute audio (
Volume2/VolumeX) - Fullscreen button
- Snapshot button (
- Border: 2px solid transparent, transitions to
--accent-primaryon 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" (
Videoicon, primary) - "Review Alerts" (
Bellicon, secondary) - "Check Unknown Persons" (
UserQuestionicon, secondary) - "AI Settings" (
Sparklesicon, secondary) - "System Health" (
Activityicon, ghost)
- "Open Live View" (
- 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 audioMaximize2— Expand to modal fullscreenSettings— 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-secondarywith 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:
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
Camera Filter:
- Multi-select dropdown: "All Cameras" or select individual
- Each option shows camera name + online status dot
Alert Type Filter:
- Checkboxes: Unknown Person, Known Person Detected, Motion, Night Mode, Watchlist Match, System
- Each with representative icon
Time Range:
- Preset buttons: "Last Hour", "Today", "Last 24h", "Last 7 Days", "Custom"
- Custom: Date/time picker inputs
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:
- Click "Name This Person" button (only shown for unknowns)
- 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"
- 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-lgon 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:
- Click "Merge" dropdown → "Merge with..."
- 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)
- Confirmation dialog: "Merge Cluster #12 into John Smith? This cannot be undone."
- 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):
Large Face Image:
- 280x280px, 1:1, rounded
--radius-lg - Best quality reference image
- Hover: "Change Photo" overlay
- 280x280px, 1:1, rounded
Upload Photo Button:
- Below the image
- Opens file picker for new reference/training image
- Supports drag & drop
Right Column (flex, remaining width):
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
Notes Section:
- Text area, scrollable if long
- Edit in place (click to edit, blur to save)
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
- VIP: Gold
- 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:
- Pending Review (default)
- Training Queue
- Model History
- 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-motionfor 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