m2-inno-bedpressure/components/bed-pressure/StatsCards.tsx
2025-06-21 12:55:27 +07:00

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>
)
}