init

negot8/dashboard/components/ConcessionTimeline.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ConcessionEntry } from "@/lib/types";
+
+interface Props {
+  concessions: ConcessionEntry[];
+}
+
+export default function ConcessionTimeline({ concessions }: Props) {
+  if (!concessions || concessions.length === 0) {
+    return (
+      <div className="text-xs text-slate-600 py-4 text-center font-mono">
+        No concessions recorded yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex flex-col gap-3">
+      {/* Data stream line */}
+      <div className="absolute left-[14px] top-4 bottom-4 data-stream-line" />
+
+      {concessions.map((c, i) => {
+        const isA = c.by === "A";
+        return (
+          <div key={i} className="flex items-center gap-3">
+            {/* Node */}
+            <div
+              className={`relative z-10 size-7 rounded-full shrink-0 flex items-center justify-center text-[9px] font-mono font-bold border ${
+                isA
+                  ? "bg-[#B7A6FB]/10 border-[#B7A6FB]/30 text-[#B7A6FB]"
+                  : "bg-cyan-900/20 border-cyan-500/30 text-cyan-400"
+              }`}
+            >
+              {c.by}
+            </div>
+
+            {/* Card */}
+            <div
+              className={`flex-1 flex items-center justify-between gap-3 px-3 py-2 rounded-lg border backdrop-blur-sm text-xs ${
+                isA
+                  ? "bg-[#B7A6FB]/5 border-[#B7A6FB]/15"
+                  : "bg-cyan-900/5 border-cyan-500/15"
+              }`}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <span
+                  className={`text-[9px] font-mono px-1.5 py-0.5 rounded border shrink-0 ${
+                    isA
+                      ? "text-[#B7A6FB] bg-[#B7A6FB]/10 border-[#B7A6FB]/20"
+                      : "text-cyan-400 bg-cyan-500/10 border-cyan-500/20"
+                  }`}
+                >
+                  Agent {c.by}
+                </span>
+                <span className="material-symbols-outlined text-slate-600 text-sm">arrow_forward</span>
+                <span className="text-slate-300 truncate">{c.gave_up}</span>
+              </div>
+              <span className="text-[9px] text-slate-600 font-mono shrink-0">Rd {c.round}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+
+interface Props {
+  concessions: ConcessionEntry[];
+}