dynamic graph

components/bed-pressure/StatsCards.tsx

@@ -0,0 +1,68 @@
+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>
+  )
+}