68 lines
No EOL
2.3 KiB
TypeScript
68 lines
No EOL
2.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import { AlertTriangle, User } from "lucide-react"
|
|
import { useBedPressureStore } from "@/stores/bedPressureStore"
|
|
|
|
const getValueColor = (value: number) => {
|
|
if (value < 1500) return "#22c55e" // Green - Low value
|
|
if (value < 2500) return "#eab308" // Yellow - Medium value
|
|
if (value < 3500) return "#f97316" // Orange - High value
|
|
return "#ef4444" // Red - Very high value
|
|
}
|
|
|
|
export function StatsCards() {
|
|
const { sensorData, averageValue, criticalSensors } = useBedPressureStore()
|
|
|
|
const avgValue = averageValue()
|
|
const criticalCount = criticalSensors()
|
|
const activeSensors = Object.keys(sensorData).length
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-5 h-5 text-blue-600" />
|
|
<div>
|
|
<p className="text-sm text-gray-600">Patient</p>
|
|
<p className="font-semibold">John Doe - Room 204</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Average Value</p>
|
|
<p className="text-2xl font-bold" style={{ color: getValueColor(avgValue) }}>
|
|
{avgValue.toFixed(0)}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Active Sensors</p>
|
|
<p className="text-2xl font-bold text-green-600">{activeSensors}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className={`w-5 h-5 ${criticalCount > 0 ? "text-red-600" : "text-gray-400"}`} />
|
|
<div>
|
|
<p className="text-sm text-gray-600">Critical Alerts</p>
|
|
<p className={`text-2xl font-bold ${criticalCount > 0 ? "text-red-600" : "text-gray-600"}`}>
|
|
{criticalCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
} |