arkorty/B.Tech-Project-III
1
0
Fork 0
mirror of https://github.com/arkorty/B.Tech-Project-III.git synced 2026-04-19 20:51:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Arkaprabha Chakraborty
2026-04-05 00:43:23 +05:30
commit 8be37d3e92
425 changed files with 101853 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
negot8/dashboard/app/negotiation/[id]/resolved/page.tsx Normal file
View File

@@ -0,0 +1,353 @@
"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> &amp; <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>
</>
);
}