init

negot8/dashboard/components/FairnessScore.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+interface Props {
+  score: number;
+  satA?: number;
+  satB?: number;
+}
+
+export default function FairnessScore({ score, satA, satB }: Props) {
+  const pct = Math.min(100, Math.max(0, score));
+  const color =
+    pct >= 80 ? "text-[#B7A6FB]" : pct >= 60 ? "text-amber-400" : "text-red-400";
+  const barColor =
+    pct >= 80
+      ? "bg-[#B7A6FB] shadow-[0_0_8px_#B7A6FB]"
+      : pct >= 60
+      ? "bg-amber-400"
+      : "bg-red-400";
+
+  return (
+    <div className="space-y-4">
+      {/* Big score */}
+      <div className="flex items-end justify-between">
+        <div>
+          <p className="text-[10px] text-slate-500 font-mono uppercase tracking-wider mb-1">Fairness Score</p>
+          <span className={`text-4xl font-light tabular-nums ${color} text-glow`}>
+            {pct.toFixed(0)}
+          </span>
+          <span className="text-base font-light text-slate-600 ml-1">/100</span>
+        </div>
+        <div className={`text-[10px] font-bold font-mono px-2 py-1 rounded border ${
+          pct >= 80
+            ? "text-[#B7A6FB] bg-[#B7A6FB]/10 border-[#B7A6FB]/20"
+            : pct >= 60
+            ? "text-amber-400 bg-amber-500/10 border-amber-500/20"
+            : "text-red-400 bg-red-500/10 border-red-500/20"
+        }`}>
+          {pct >= 80 ? "FAIR" : pct >= 60 ? "MODERATE" : "SKEWED"}
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="w-full h-1.5 bg-white/5 rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full transition-all duration-700 ${barColor}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* Per-agent */}
+      {satA !== undefined && satB !== undefined && (
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-[#B7A6FB]/5 border border-[#B7A6FB]/20 rounded-lg p-3 text-center hover:border-[#B7A6FB]/40 transition-colors">
+            <div className="text-[10px] text-slate-500 font-mono mb-1">Agent A</div>
+            <div className="text-xl font-light text-[#B7A6FB] tabular-nums">{satA.toFixed(0)}%</div>
+          </div>
+          <div className="bg-cyan-900/10 border border-cyan-500/20 rounded-lg p-3 text-center hover:border-cyan-500/40 transition-colors">
+            <div className="text-[10px] text-slate-500 font-mono mb-1">Agent B</div>
+            <div className="text-xl font-light text-cyan-400 tabular-nums">{satB.toFixed(0)}%</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}