first commit

src/components/events/StatusCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Card } from "@/components/ui/card";
+
+export default function StatusCard({ status, count, percentage, color }) {
+  const colorClasses = {
+    blue: "from-[#0A39DF] to-[#0A39DF]/80",
+    purple: "from-purple-600 to-purple-700",
+    green: "from-emerald-600 to-emerald-700",
+    gray: "from-slate-600 to-slate-700",
+    yellow: "from-amber-500 to-amber-600"
+  };
+
+  return (
+    <Card className="p-6 bg-white border-slate-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-slate-500 mb-2">{status}</p>
+          <div className={`w-14 h-14 bg-gradient-to-br ${colorClasses[color]} rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-md`}>
+            {count}
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-3xl font-bold text-[#1C323E]">{percentage}%</div>
+          <p className="text-xs text-slate-500 mt-1">of total</p>
+        </div>
+      </div>
+    </Card>
+  );
+}