FlowGuard

The Problem

The Harrison Food Factory required a "Smart Building" vision to manage 44 factory units with only two shared loading bays. This creates severe logistics bottlenecks. Additionally, the client required a way to automate hygiene compliance and identify "abandoned objects" (pallets or bags left for >2 minutes) that pose safety risks.

UX Strategy & Phase 1 Scope

Designing for a building under construction allowed for a "blank canvas" tech-driven infrastructure. For Phase 1, the focus is on Intelligent Surveillance (CCTV + AI) to address immediate safety and density management needs:

• Anomaly Alerts: Dashboard UI triggers visual alerts when objects are detected as stationary in high-traffic zones for over 120 seconds.
• People Counting: Real-time visualization of unit density to ensure safety compliance and manpower management.

Frontend React Snippet

// Handling Real-time CCTV Anomaly Alerts
import React, { useState, useEffect } from 'react';

export default function SurveillanceFeed() {
    const [alerts, setAlerts] = useState([]);

    useEffect(() => {
        // Phase 1 Focus: CCTV Stream Alerts
        const ws = new WebSocket('wss://api.flowguard.io/cctv');
        
        ws.onmessage = (e) => {
            const data = JSON.parse(e.data);
            // Trigger alert if object left for > 120s
            if (data.type === 'ANOMALY' && data.timer > 120) {
                setAlerts(prev => [data, ...prev]);
            }
        };
        return () => ws.close();
    }, []);

    return (
        <div className="alert-container">
            {alerts.map(a => <AlertCard key={a.id} zone={a.zone} />)}
        </div>
    );
}