"use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Activity, AlertTriangle, Download, Pause, Play, Settings, User } from "lucide-react" // Mock data generator const generateTimeSeriesData = (hours = 24) => { const data = [] const now = new Date() for (let i = hours * 60; i >= 0; i -= 5) { const time = new Date(now.getTime() - i * 60 * 1000) data.push({ time: time.toLocaleTimeString("en-US", { hour12: false }), timestamp: time.getTime(), pressure: Math.random() * 100 + Math.sin(i / 60) * 20 + 40, }) } return data } // Sensor configuration interface interface SensorConfig { id: string; x: number; y: number; zone: string; label: string; pin?: number; } const getPressureColor = (pressure: number) => { if (pressure < 30) return "#22c55e" // Green - Low pressure if (pressure < 50) return "#eab308" // Yellow - Medium pressure if (pressure < 70) return "#f97316" // Orange - High pressure return "#ef4444" // Red - Very high pressure } const getPressureLevel = (pressure: number) => { if (pressure < 30) return "Low" if (pressure < 50) return "Medium" if (pressure < 70) return "High" return "Critical" } interface SensorData { id: string; x: number; y: number; zone: string; label: string; currentPressure: number; data: Array<{ time: string; timestamp: number; pressure: number }>; status: string; source?: 'hardware' | 'mock'; pin?: number; digitalState?: number; } export default function Component() { const [sensorData, setSensorData] = useState>({}) const [sensorConfig, setSensorConfig] = useState([]) const [selectedSensor, setSelectedSensor] = useState(null) const [isModalOpen, setIsModalOpen] = useState(false) const [isMonitoring, setIsMonitoring] = useState(true) const [alerts, setAlerts] = useState>([]) // Initialize sensor configuration useEffect(() => { const fetchSensorConfig = async () => { try { const response = await fetch('/api/sensors/config') const data = await response.json() if (data.success && data.sensors) { setSensorConfig(data.sensors) } } catch (error) { console.error('Failed to fetch sensor config:', error) } } fetchSensorConfig() }, []) // Initialize sensor data useEffect(() => { if (sensorConfig.length === 0) return const initialData: Record = {} sensorConfig.forEach((sensor) => { initialData[sensor.id] = { ...sensor, currentPressure: Math.random() * 100, data: generateTimeSeriesData(), status: "normal", } }) setSensorData(initialData) }, [sensorConfig]) // Fetch sensor data from API useEffect(() => { if (!isMonitoring) return const fetchSensorData = async () => { try { const response = await fetch('/api/sensors') const data = await response.json() if (data.success && data.sensors) { setSensorData((prev) => { const updated = { ...prev } const newAlerts: Array<{ id: string; message: string; time: string }> = [] data.sensors.forEach((sensor: { id: string; label: string; zone: string; pressure: number; source: 'hardware' | 'mock'; pin?: number; digitalState?: number; }) => { const currentSensor = updated[sensor.id] const newPressure = sensor.pressure // Check for alerts if (newPressure > 80 && currentSensor && currentSensor.currentPressure <= 80) { newAlerts.push({ id: `${sensor.id}-${Date.now()}`, message: `High pressure detected at ${sensor.label}`, time: new Date().toLocaleTimeString(), }) } // Update sensor data updated[sensor.id] = { ...sensorConfig.find(s => s.id === sensor.id), id: sensor.id, x: sensorConfig.find(s => s.id === sensor.id)?.x || 50, y: sensorConfig.find(s => s.id === sensor.id)?.y || 50, zone: sensor.zone, label: sensor.label, currentPressure: newPressure, data: currentSensor ? [ ...currentSensor.data.slice(1), { time: new Date().toLocaleTimeString("en-US", { hour12: false }), timestamp: Date.now(), pressure: newPressure, }, ] : [{ time: new Date().toLocaleTimeString("en-US", { hour12: false }), timestamp: Date.now(), pressure: newPressure, }], status: newPressure > 80 ? "critical" : newPressure > 60 ? "warning" : "normal", source: sensor.source, pin: sensor.pin, digitalState: sensor.digitalState } }) if (newAlerts.length > 0) { setAlerts((prev) => [...newAlerts, ...prev].slice(0, 10)) } return updated }) } } catch (error) { console.error('Failed to fetch sensor data:', error) } } // Initial fetch fetchSensorData() // Set up polling const interval = setInterval(fetchSensorData, 2000) return () => clearInterval(interval) }, [isMonitoring, sensorConfig]) const averagePressure = Object.values(sensorData).reduce((sum: number, sensor: SensorData) => sum + (sensor.currentPressure || 0), 0) / Object.keys(sensorData).length const criticalSensors = Object.values(sensorData).filter((sensor: SensorData) => sensor.currentPressure > 80).length return (
{/* Header */}

Bed Pressure Monitor

{isMonitoring ? "Live" : "Paused"}
{/* Stats Cards */}

Patient

John Doe - Room 204

Average Pressure

{averagePressure.toFixed(1)} mmHg

Active Sensors

{Object.keys(sensorData).length}

0 ? "text-red-600" : "text-gray-400"}`} />

Critical Alerts

0 ? "text-red-600" : "text-gray-600"}`}> {criticalSensors}

{/* Bed Visualization */}
Pressure Distribution Map

Click on any sensor point to view detailed pressure graphs

{/* Bed outline */} {/* Bed frame */} {/* Pillow area */} {/* Pressure sensors */} {sensorConfig.map((sensor) => { const sensorInfo = sensorData[sensor.id] if (!sensorInfo) return null return ( { setSelectedSensor(sensor.id) setIsModalOpen(true) }} /> ) })} {/* Pressure Legend */}
Low ({"<"}30)
Medium (30-50)
High (50-70)
Critical ({">"}70)
{/* Sensor Details & Alerts */}
{/* Pressure Graph Modal */} {isModalOpen && selectedSensor && sensorData[selectedSensor] && (

{sensorData[selectedSensor].label}

Pressure Monitoring Details

Current Pressure

{sensorData[selectedSensor].currentPressure.toFixed(1)}

mmHg

Status Level

{getPressureLevel(sensorData[selectedSensor].currentPressure)}

Body Zone

{sensorData[selectedSensor].zone}

{/* Large Pressure Chart */} 24-Hour Pressure Trend
[`${value.toFixed(1)} mmHg`, "Pressure"]} labelFormatter={(label) => `Time: ${label}`} />
{/* Additional Statistics */}

Max Pressure

{Math.max(...sensorData[selectedSensor].data.map((d: { time: string; timestamp: number; pressure: number }) => d.pressure)).toFixed(1)}

Min Pressure

{Math.min(...sensorData[selectedSensor].data.map((d: { time: string; timestamp: number; pressure: number }) => d.pressure)).toFixed(1)}

Average

{( sensorData[selectedSensor].data.reduce((sum: number, d: { time: string; timestamp: number; pressure: number }) => sum + d.pressure, 0) / sensorData[selectedSensor].data.length ).toFixed(1)}

Data Points

{sensorData[selectedSensor].data.length}

)} {/* Alerts */} Recent Alerts
{alerts.length === 0 ? (

No recent alerts

) : ( alerts.map((alert) => (

{alert.message}

{alert.time}

)) )}
) }