Initial MVP for QA asset backend

hy_qa_asset_backend/frontend/components/StatCard.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+export default function StatCard({
+  title,
+  value,
+  icon,
+  tone = "teal"
+}: {
+  title: string;
+  value: string | number;
+  icon: ReactNode;
+  tone?: "teal" | "amber" | "rose" | "indigo";
+}) {
+  const tones = {
+    teal: "bg-teal-50 text-jade",
+    amber: "bg-amber-50 text-amber-700",
+    rose: "bg-rose-50 text-rose-700",
+    indigo: "bg-indigo-50 text-indigo-700"
+  };
+
+  return (
+    <div className="rounded-md border border-line bg-white p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <div className="text-sm text-slate-500">{title}</div>
+          <div className="mt-2 text-2xl font-semibold text-ink">{value}</div>
+        </div>
+        <div className={`flex h-10 w-10 items-center justify-center rounded-md ${tones[tone]}`}>{icon}</div>
+      </div>
+    </div>
+  );
+}
+