UI changes

dashboard/src/components/StatCard.jsx

@@ -1,9 +1,36 @@
-export default function StatCard({ label, value, sub, accent }) {
+export default function StatCard({ label, value, sub, accent, details, detailsPosition = 'below' }) {
+  const showDetails = details?.length > 0
+  const detailsOnRight = showDetails && detailsPosition === 'right'
+
   return (
-    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-1 min-w-0">
-      <p className="text-slate-400 text-xs uppercase tracking-widest truncate">{label}</p>
-      <p className={`text-3xl font-bold ${accent ?? 'text-slate-100'}`}>{value}</p>
-      {sub && <p className="text-slate-400 text-sm">{sub}</p>}
+    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 min-w-0">
+      <div className={`flex ${detailsOnRight ? 'items-start justify-between gap-4' : 'flex-col gap-1'}`}>
+        <div className="min-w-0">
+          <p className="text-slate-400 text-xs uppercase tracking-widest truncate">{label}</p>
+          <p className={`text-3xl font-bold ${accent ?? 'text-slate-100'}`}>{value}</p>
+          {sub && <p className="text-slate-400 text-sm">{sub}</p>}
+        </div>
+
+        {detailsOnRight && (
+          <div className="space-y-0.5 text-right shrink-0">
+            {details.map((line) => (
+              <p key={line} className="text-slate-500 text-xs font-medium">
+                {line}
+              </p>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showDetails && !detailsOnRight && (
+        <div className="mt-1 space-y-0.5">
+          {details.map((line) => (
+            <p key={line} className="text-slate-500 text-xs">
+              {line}
+            </p>
+          ))}
+        </div>
+      )}
     </div>
   )
 }