first commit

src/components/krowcommand/AttentionCard.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { AlertTriangle, TrendingUp, Users, DollarSign, Shield } from "lucide-react";
+
+export default function AttentionCard({ icon: Icon, label, value, sublabel, severity = "normal", onClick }) {
+  const colorMap = {
+    critical: "border-red-200 bg-red-50 text-red-700",
+    high: "border-orange-200 bg-orange-50 text-orange-700",
+    medium: "border-yellow-200 bg-yellow-50 text-yellow-700",
+    normal: "border-slate-200 bg-white text-slate-700",
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`text-left p-4 rounded-xl border-2 transition-all hover:shadow-md ${colorMap[severity]} ${onClick ? "cursor-pointer hover:border-slate-300" : "cursor-default"}`}
+    >
+      <div className="flex items-start justify-between mb-1">
+        <Icon className="w-4 h-4 opacity-70" />
+        {severity !== "normal" && (
+          <span className={`text-[9px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-full ${colorMap[severity]}`}>
+            {severity}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl font-black leading-none">{value}</p>
+      <p className="text-[11px] mt-1 opacity-80">{label}</p>
+      {sublabel && <p className="text-[10px] mt-0.5 opacity-60">{sublabel}</p>}
+    </button>
+  );
+}