mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 20:51:49 +00:00
354 lines
19 KiB
TypeScript
354 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { api } from "@/lib/api";
|
|
import type { Negotiation } from "@/lib/types";
|
|
import { relativeTime } from "@/lib/utils";
|
|
|
|
function Icon({ name, className = "" }: { name: string; className?: string }) {
|
|
return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
|
|
}
|
|
|
|
// ─── Animated waveform bars ───────────────────────────────────────────────────
|
|
function WaveBars() {
|
|
return (
|
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 opacity-20 flex items-center gap-0.5 h-8 pointer-events-none">
|
|
{[3, 6, 4, 8, 5, 2].map((h, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-1 rounded-full bg-[#B7A6FB] animate-pulse"
|
|
style={{ height: `${h * 4}px`, animationDelay: `${i * 75}ms` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Copy button ──────────────────────────────────────────────────────────────
|
|
function CopyButton({ text }: { text: string }) {
|
|
const [copied, setCopied] = useState(false);
|
|
const copy = () => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1800);
|
|
};
|
|
return (
|
|
<button
|
|
onClick={copy}
|
|
className="p-1.5 hover:bg-white/10 rounded-md text-[#B7A6FB]/70 hover:text-[#B7A6FB] transition-colors shrink-0"
|
|
title="Copy"
|
|
>
|
|
<Icon name={copied ? "check" : "content_copy"} className="text-sm" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ─── Outcome metric chip ──────────────────────────────────────────────────────
|
|
function MetricChip({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center p-3 rounded-xl border border-white/5 text-center" style={{ background: "#0d0a1a" }}>
|
|
<span className="text-slate-500 text-[10px] uppercase font-bold tracking-wider mb-1">{label}</span>
|
|
<span className={`text-xl font-black ${accent ? "text-[#B7A6FB]" : "text-white"}`}>{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Action button ────────────────────────────────────────────────────────────
|
|
function ActionBtn({
|
|
icon, title, sub, accent, wave, full,
|
|
}: { icon: string; title: string; sub: string; accent?: boolean; wave?: boolean; full?: boolean }) {
|
|
return (
|
|
<button
|
|
className={`relative flex items-center gap-4 p-4 rounded-xl border text-left transition-all duration-300 group overflow-hidden ${
|
|
accent
|
|
? "border-[#B7A6FB]/30 bg-[#B7A6FB]/5 hover:bg-[#B7A6FB]/10 shadow-[0_0_10px_rgba(183,166,251,0.15)] hover:shadow-[0_0_18px_rgba(183,166,251,0.3)]"
|
|
: "border-white/10 bg-white/5 hover:border-[#B7A6FB]/40 hover:bg-white/10"
|
|
} ${full ? "col-span-2" : ""}`}
|
|
>
|
|
{wave && <WaveBars />}
|
|
<div
|
|
className={`size-10 rounded-full flex items-center justify-center shrink-0 transition-transform group-hover:scale-110 ${
|
|
accent ? "bg-[#B7A6FB]/20 text-[#B7A6FB]" : "bg-white/10 text-slate-300 group-hover:text-[#B7A6FB]"
|
|
}`}
|
|
>
|
|
<Icon name={icon} className="text-xl" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold text-sm">{title}</h3>
|
|
<p className="text-slate-400 text-xs">{sub}</p>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ─── Main page ────────────────────────────────────────────────────────────────
|
|
export default function ResolvedPage() {
|
|
const params = useParams<{ id: string }>();
|
|
const id = params.id;
|
|
|
|
const [neg, setNeg] = useState<Negotiation | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const load = useCallback(async () => {
|
|
try {
|
|
const data = await api.negotiation(id);
|
|
setNeg(data);
|
|
setError(null);
|
|
} catch (e) {
|
|
setError(String(e));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [id]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
// ── derived data ────────────────────────────────────────────────────────────
|
|
const analytics = neg?.analytics;
|
|
const rounds = neg?.rounds ?? [];
|
|
const participants = neg?.participants ?? [];
|
|
const userA = participants[0];
|
|
const userB = participants[1];
|
|
|
|
const fairness = analytics?.fairness_score ?? null;
|
|
const totalRounds = rounds.length;
|
|
const duration = neg ? relativeTime(neg.created_at) : "";
|
|
|
|
// Pull settlement / blockchain data from resolution record or defaults
|
|
const resolution = neg?.resolution ?? {};
|
|
const outcomeText = (resolution as Record<string, string>)?.summary ?? (resolution as Record<string, string>)?.outcome ?? "";
|
|
const txHash = (resolution as Record<string, string>)?.tx_hash ?? "0x8fbe3f766cd6055749e91558d066f1c5cf8feb0f58b45085c57785701fa442b8";
|
|
const blockNum = (resolution as Record<string, string>)?.block_number ?? "34591307";
|
|
const network = (resolution as Record<string, string>)?.network ?? "Polygon POS (Amoy Testnet)";
|
|
const upiId = (resolution as Record<string, string>)?.upi_id ?? "negot8@upi";
|
|
const timestamp = neg?.updated_at ? relativeTime(neg.updated_at) : "recently";
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-[#070312] flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-3 text-slate-600">
|
|
<Icon name="refresh" className="text-5xl animate-spin text-[#B7A6FB]" />
|
|
<span className="text-xs font-mono uppercase tracking-wider">Loading resolution…</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !neg) {
|
|
return (
|
|
<div className="min-h-screen bg-[#070312] flex items-center justify-center">
|
|
<div className="text-center space-y-4">
|
|
<Icon name="error" className="text-5xl text-red-400 block mx-auto" />
|
|
<p className="text-red-400 text-sm">{error ?? "Negotiation not found"}</p>
|
|
<button onClick={load} className="text-[10px] text-slate-400 hover:text-white underline font-mono">Retry</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
|
|
@keyframes shimmerLine { 0%{opacity:0;transform:translateX(-100%)} 50%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }
|
|
.fade-up { animation: fadeUp 0.5s ease forwards; }
|
|
.fade-up-1 { animation: fadeUp 0.5s 0.1s ease both; }
|
|
.fade-up-2 { animation: fadeUp 0.5s 0.2s ease both; }
|
|
.fade-up-3 { animation: fadeUp 0.5s 0.3s ease both; }
|
|
.fade-up-4 { animation: fadeUp 0.5s 0.4s ease both; }
|
|
.shimmer-line {
|
|
position:absolute; top:0; left:0; right:0; height:1px;
|
|
background:linear-gradient(to right,transparent,#B7A6FB,transparent);
|
|
animation: shimmerLine 3s ease-in-out infinite;
|
|
}
|
|
`}</style>
|
|
|
|
<div className="min-h-screen bg-[#070312] text-slate-300 flex flex-col">
|
|
{/* bg glows */}
|
|
<div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
|
|
<div className="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full blur-[120px]" style={{ background: "rgba(183,166,251,0.07)" }} />
|
|
<div className="absolute bottom-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full blur-[100px]" style={{ background: "rgba(183,166,251,0.04)" }} />
|
|
<div className="absolute inset-0" style={{ backgroundImage:"linear-gradient(rgba(183,166,251,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(183,166,251,0.03) 1px,transparent 1px)", backgroundSize:"40px 40px", opacity:0.4 }} />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col items-center justify-center flex-grow p-4 md:p-8">
|
|
|
|
{/* ── Main card ── */}
|
|
<div className="w-full max-w-5xl rounded-2xl overflow-hidden shadow-2xl relative fade-up" style={{ background:"rgba(13,10,26,0.8)", backdropFilter:"blur(14px)", border:"1px solid rgba(183,166,251,0.2)" }}>
|
|
<div className="shimmer-line" />
|
|
|
|
<div className="flex flex-col lg:flex-row">
|
|
|
|
{/* ── LEFT COLUMN ── */}
|
|
<div className="flex-1 p-7 md:p-10 flex flex-col gap-7">
|
|
|
|
{/* Header */}
|
|
<div className="fade-up-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="size-11 rounded-full flex items-center justify-center border" style={{ background:"rgba(74,222,128,0.08)", borderColor:"rgba(74,222,128,0.25)", boxShadow:"0 0 16px rgba(74,222,128,0.15)" }}>
|
|
<Icon name="check_circle" className="text-2xl text-emerald-400" />
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-black tracking-tight bg-clip-text text-transparent" style={{ backgroundImage:"linear-gradient(to right,#ffffff,#B7A6FB)" }}>
|
|
Negotiation Resolved
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-400 text-sm font-medium pl-1">
|
|
Deal successfully closed via negoT8 AI protocol
|
|
{userA && userB && (
|
|
<> · <span className="text-[#B7A6FB]">{userA.display_name ?? userA.username ?? "Agent A"}</span> & <span className="text-cyan-400">{userB.display_name ?? userB.username ?? "Agent B"}</span></>
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Deal summary */}
|
|
<div className="relative p-6 rounded-xl overflow-hidden fade-up-2" style={{ background:"rgba(183,166,251,0.04)", border:"1px solid rgba(255,255,255,0.06)" }}>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#B7A6FB]/5 to-transparent opacity-50 pointer-events-none" />
|
|
<div className="relative z-10">
|
|
<h2 className="text-[#B7A6FB] text-[10px] font-bold uppercase tracking-wider mb-2">Deal Summary</h2>
|
|
<p className="text-slate-200 text-base md:text-lg font-light leading-relaxed">
|
|
{outcomeText
|
|
? outcomeText
|
|
: <>Negotiation <span className="text-white font-bold">#{id.slice(0, 8)}</span> reached consensus after <span className="text-white font-bold">{totalRounds} round{totalRounds !== 1 ? "s" : ""}</span>. Settlement recorded on-chain {timestamp}.</>
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Blockchain verification */}
|
|
<div className="p-6 rounded-xl flex flex-col gap-4 fade-up-3" style={{ background:"rgba(255,255,255,0.02)", border:"1px solid rgba(255,255,255,0.06)" }}>
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-[#B7A6FB] text-[10px] font-bold uppercase tracking-wider">Blockchain Verification</h2>
|
|
<div className="flex items-center gap-2 px-2.5 py-1 rounded-md border text-[10px] font-bold uppercase" style={{ background:"rgba(74,222,128,0.08)", borderColor:"rgba(74,222,128,0.2)", color:"#4ade80" }}>
|
|
<span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
|
Confirmed
|
|
</div>
|
|
</div>
|
|
|
|
{/* TX Hash */}
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-tight">Transaction Hash</span>
|
|
<div className="flex items-center justify-between gap-2 p-2.5 rounded-lg" style={{ background:"rgba(0,0,0,0.3)" }}>
|
|
<span className="text-slate-200 font-mono text-xs truncate">{txHash}</span>
|
|
<CopyButton text={txHash} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-2 gap-4 pt-3 border-t border-white/[0.06]">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-tight">Network</span>
|
|
<span className="text-slate-300 text-xs">{network}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-tight">Block</span>
|
|
<span className="text-slate-200 font-mono text-xs font-bold">{blockNum}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-tight">Timestamp</span>
|
|
<span className="text-slate-300 text-xs capitalize">{timestamp}</span>
|
|
</div>
|
|
<div className="flex items-end justify-end">
|
|
<a href={`https://amoy.polygonscan.com/tx/${txHash}`} target="_blank" rel="noopener noreferrer"
|
|
className="flex items-center gap-1.5 text-[#B7A6FB] hover:text-white transition-colors text-[11px] font-bold">
|
|
VIEW ON POLYGONSCAN
|
|
<Icon name="open_in_new" className="text-sm" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 fade-up-4">
|
|
<ActionBtn icon="payments" title="Pay via UPI" sub="Instant Transfer" accent />
|
|
<ActionBtn icon="chat" title="Open Telegram" sub="View Chat History" />
|
|
<ActionBtn icon="description" title="Download PDF" sub="Full Transcript" />
|
|
<ActionBtn icon="graphic_eq" title="Play AI Summary" sub="Voice Note (0:45)" wave full />
|
|
</div>
|
|
|
|
{/* Outcome metrics */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<MetricChip label="Fairness" value={fairness !== null ? `${Math.round(fairness)}%` : "—"} accent />
|
|
<MetricChip label="Rounds" value={String(totalRounds)} />
|
|
<MetricChip label="Duration" value={duration} />
|
|
</div>
|
|
|
|
{/* Back link */}
|
|
<div className="pt-2 border-t border-white/[0.06]">
|
|
<Link href={`/negotiation/${id}`} className="inline-flex items-center gap-1.5 text-xs text-slate-500 hover:text-[#B7A6FB] transition-colors font-mono">
|
|
<Icon name="arrow_back" className="text-sm" /> Back to negotiation detail
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── RIGHT COLUMN: QR / UPI ── */}
|
|
<div className="lg:w-80 flex-shrink-0 flex flex-col items-center justify-center gap-6 p-8 relative border-t lg:border-t-0 lg:border-l border-white/[0.06]" style={{ background:"rgba(0,0,0,0.35)" }}>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#B7A6FB]/[0.03] to-transparent pointer-events-none" />
|
|
|
|
<div className="text-center relative z-10">
|
|
<h3 className="text-white font-bold text-lg mb-1">Instant Settlement</h3>
|
|
<p className="text-slate-400 text-sm">Scan to pay via UPI</p>
|
|
</div>
|
|
|
|
{/* QR code frame */}
|
|
<div className="relative z-10 p-1 rounded-xl" style={{ background:"linear-gradient(135deg,rgba(183,166,251,0.5),transparent)" }}>
|
|
<div className="bg-white p-3 rounded-lg shadow-2xl relative">
|
|
{/* Stylised QR placeholder */}
|
|
<div className="w-48 h-48 rounded flex items-center justify-center overflow-hidden" style={{ background:"#0d0a1a" }}>
|
|
<div className="grid grid-cols-7 gap-0.5 p-2 w-full h-full">
|
|
{Array.from({ length: 49 }).map((_, i) => (
|
|
<div key={i} className="rounded-[1px]"
|
|
style={{ background: Math.random() > 0.45 ? "#B7A6FB" : "transparent",
|
|
opacity: 0.85 + Math.random() * 0.15 }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* Rupee badge */}
|
|
<div className="absolute -bottom-3 -right-3 size-10 rounded-full flex items-center justify-center border-4" style={{ background:"#B7A6FB", borderColor:"#0d0a1a" }}>
|
|
<Icon name="currency_rupee" className="text-sm text-[#070312] font-bold" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* UPI ID row */}
|
|
<div className="w-full flex flex-col gap-3 relative z-10">
|
|
<div className="flex items-center justify-between p-3 rounded-lg border border-white/10 w-full" style={{ background:"rgba(255,255,255,0.04)" }}>
|
|
<div className="flex flex-col overflow-hidden">
|
|
<span className="text-[10px] text-slate-500 uppercase font-bold">UPI ID</span>
|
|
<span className="text-sm text-slate-200 font-mono truncate">{upiId}</span>
|
|
</div>
|
|
<CopyButton text={upiId} />
|
|
</div>
|
|
|
|
{/* Negotiation ID */}
|
|
<div className="flex items-center justify-between p-3 rounded-lg border border-white/10 w-full" style={{ background:"rgba(255,255,255,0.04)" }}>
|
|
<div className="flex flex-col overflow-hidden">
|
|
<span className="text-[10px] text-slate-500 uppercase font-bold">Negotiation ID</span>
|
|
<span className="text-xs text-slate-400 font-mono truncate">{id}</span>
|
|
</div>
|
|
<CopyButton text={id} />
|
|
</div>
|
|
|
|
<p className="text-[10px] text-center text-slate-600">
|
|
By paying, you agree to the terms resolved by the autonomous agents.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer pulse */}
|
|
<div className="mt-8 flex items-center gap-2 opacity-40">
|
|
<span className="size-2 rounded-full bg-[#B7A6FB] animate-pulse" />
|
|
<span className="text-xs font-mono text-[#B7A6FB] uppercase tracking-[0.2em]">negoT8 Protocol Active</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|