Upload web/app/dashboard-pages/compare/page.tsx

web/app/dashboard-pages/compare/page.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useRef } from "react";
+import {
+  FileCompare, Upload, ArrowRightLeft, ChevronDown, ChevronUp,
+  TriangleAlert, CircleCheck, AlertTriangle, Copy, Check, X,
+  Loader2, BarChart3
+} from "lucide-react";
+
+interface CompareResult {
+  alignment_score: number;
+  contract_a_clauses: number;
+  contract_b_clauses: number;
+  added_clauses: Array<{ text: string; type: string }>;
+  removed_clauses: Array<{ text: string; type: string }>;
+  modified_clauses: Array<{ type: string; similarity: number; clause_a: string; clause_b: string; clause_type: string }>;
+  risk_delta: string;
+  risk_winner: string;
+  type_map_a: Record<string, number>;
+  type_map_b: Record<string, number>;
+}
+
+const EXAMPLE_A = `This Master Service Agreement ("MSA") is entered into as of March 1, 2024 by and between CloudTech Solutions, Inc. ("Provider") and Global Retail Partners LLC ("Customer").
+
+1. SERVICES. Provider shall provide cloud hosting services as described in Exhibit A.
+
+2. TERM. The initial term is twelve (12) months, automatically renewing for successive one year periods.
+
+3. FEES. Customer shall pay a monthly fee of $25,000 within 30 days of invoice.
+
+4. LIABILITY. Provider's aggregate liability shall not exceed $1,000,000. IN NO EVENT SHALL PROVIDER BE LIABLE FOR LOST PROFITS.
+
+5. TERMINATION. Either party may terminate for convenience with 90 days notice. Provider may terminate immediately for non-payment.
+
+6. GOVERNING LAW. This Agreement is governed by the laws of the State of Delaware.`;
+
+const EXAMPLE_B = `This Master Service Agreement ("MSA") is entered into as of April 15, 2024 by and between CloudTech Solutions, Inc. ("Provider") and Global Retail Partners LLC ("Customer").
+
+1. SERVICES. Provider shall provide cloud hosting and data processing services as described in Exhibit A and B.
+
+2. TERM. The initial term is twenty-four (24) months, automatically renewing for successive one year periods unless terminated in accordance with Section 5.
+
+3. FEES. Customer shall pay a monthly fee of $30,000 within 15 days of invoice. Late payments incur a penalty of 2% per month.
+
+4. LIABILITY. Provider's aggregate liability shall not exceed $500,000. IN NO EVENT SHALL PROVIDER BE LIABLE FOR LOST PROFITS OR CONSEQUENTIAL DAMAGES.
+
+5. TERMINATION. Either party may terminate for convenience with 180 days notice. Provider may terminate immediately for non-payment or material breach.
+
+6. GOVERNING LAW. This Agreement is governed by the laws of the State of New York.`;
+
+export default function ComparePage() {
+  const [textA, setTextA] = useState("");
+  const [textB, setTextB] = useState("");
+  const [result, setResult] = useState<CompareResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
+  const [activeSection, setActiveSection] = useState<string>("summary");
+
+  async function handleCompare() {
+    if (!textA.trim() || textA.trim().length < 50) { setError("Contract A must have at least 50 characters."); return; }
+    if (!textB.trim() || textB.trim().length < 50) { setError("Contract B must have at least 50 characters."); return; }
+
+    setLoading(true); setError(""); setResult(null); setExpandedIdx(null);
+    try {
+      const res = await fetch("/api/compare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text_a: textA, text_b: textB }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error || "Failed");
+      const data = await res.json();
+      setResult(data);
+    } catch (e: any) { setError(e.message); }
+    finally { setLoading(false); }
+  }
+
+  function loadExamples() {
+    setTextA(EXAMPLE_A);
+    setTextB(EXAMPLE_B);
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="max-w-7xl mx-auto px-5 py-10">
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
+            <FileCompare className="w-6 h-6 text-zinc-400" />
+            Compare Contracts
+          </h1>
+          <p className="mt-1 text-sm text-zinc-500">Upload or paste two contracts side-by-side. Get clause-level diffs, alignment score, and risk delta.</p>
+        </div>
+
+        {/* Input area */}
+        <div className="grid lg:grid-cols-2 gap-4 mb-6">
+          <div>
+            <label className="text-sm font-medium text-zinc-700 mb-1.5 flex items-center gap-2">
+              <span className="w-6 h-6 rounded bg-zinc-100 flex items-center justify-center text-xs font-bold text-zinc-600">A</span>
+              Contract A
+            </label>
+            <textarea value={textA} onChange={(e) => setTextA(e.target.value)}
+              placeholder="Paste contract A here..."
+              className="w-full h-[280px] p-4 border border-zinc-200 rounded-xl text-sm leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-300 placeholder:text-zinc-300 font-mono" />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-zinc-700 mb-1.5 flex items-center gap-2">
+              <span className="w-6 h-6 rounded bg-zinc-100 flex items-center justify-center text-xs font-bold text-zinc-600">B</span>
+              Contract B
+            </label>
+            <textarea value={textB} onChange={(e) => setTextB(e.target.value)}
+              placeholder="Paste contract B here..."
+              className="w-full h-[280px] p-4 border border-zinc-200 rounded-xl text-sm leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-300 placeholder:text-zinc-300 font-mono" />
+          </div>
+        </div>
+
+        <div className="flex gap-2 mb-8">
+          <button onClick={handleCompare} disabled={loading}
+            className="inline-flex items-center gap-2 bg-zinc-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
+            {loading ? <><Loader2 className="w-4 h-4 animate-spin" /> Comparing...</> : <><ArrowRightLeft className="w-4 h-4" /> Compare Contracts</>}
+          </button>
+          <button onClick={loadExamples} className="px-4 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">Load Example</button>
+        </div>
+
+        {error && <p className="mb-6 text-sm text-red-600 flex items-center gap-1.5"><TriangleAlert className="w-3.5 h-3.5" />{error}</p>}
+
+        {/* Results */}
+        {result && (
+          <div className="space-y-6">
+            {/* Summary */}
+            <div className="grid md:grid-cols-4 gap-4">
+              <div className="border border-zinc-200 rounded-xl p-4 text-center">
+                <p className="text-xs text-zinc-400">Alignment</p>
+                <p className="text-2xl font-bold text-zinc-900">{(result.alignment_score * 100).toFixed(1)}%</p>
+              </div>
+              <div className="border border-zinc-200 rounded-xl p-4 text-center">
+                <p className="text-xs text-zinc-400">Clauses in A</p>
+                <p className="text-2xl font-bold text-zinc-900">{result.contract_a_clauses}</p>
+              </div>
+              <div className="border border-zinc-200 rounded-xl p-4 text-center">
+                <p className="text-xs text-zinc-400">Clauses in B</p>
+                <p className="text-2xl font-bold text-zinc-900">{result.contract_b_clauses}</p>
+              </div>
+              <div className={`border rounded-xl p-4 text-center ${result.risk_winner === "tie" ? "border-emerald-200 bg-emerald-50" : "border-red-200 bg-red-50"}`}>
+                <p className="text-xs text-zinc-400">Risk Winner</p>
+                <p className={`text-sm font-bold ${result.risk_winner === "tie" ? "text-emerald-700" : "text-red-700"}`}>{result.risk_delta}</p>
+              </div>
+            </div>
+
+            {/* Section tabs */}
+            <div className="border-b border-zinc-200">
+              <div className="flex gap-1">
+                {[
+                  { key: "summary", label: "Summary", count: 0 },
+                  { key: "modified", label: "Modified", count: result.modified_clauses.length },
+                  { key: "added", label: "Added in B", count: result.added_clauses.length },
+                  { key: "removed", label: "Removed from A", count: result.removed_clauses.length },
+                ].map((s) => (
+                  <button key={s.key} onClick={() => setActiveSection(s.key)}
+                    className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeSection === s.key ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-400 hover:text-zinc-600"}`}>
+                    {s.label} {s.count > 0 && <span className="ml-1 text-zinc-400">({s.count})</span>}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Section content */}
+            <div className="max-h-[500px] overflow-y-auto">
+              {/* Modified clauses */}
+              {activeSection === "modified" && (
+                <div className="space-y-3">
+                  {result.modified_clauses.length === 0 ? (
+                    <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                      <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                      <p className="text-sm text-zinc-500">No modified clauses detected.</p>
+                    </div>
+                  ) : result.modified_clauses.map((m, i) => {
+                    const isExpanded = expandedIdx === i;
+                    const simColor = m.similarity >= 0.8 ? "text-emerald-600" : m.similarity >= 0.6 ? "text-amber-600" : "text-red-600";
+                    return (
+                      <div key={i} className="border border-zinc-200 rounded-xl overflow-hidden">
+                        <button onClick={() => setExpandedIdx(isExpanded ? null : i)} className="w-full text-left p-4 flex items-start gap-3 hover:bg-zinc-50/50 transition-colors">
+                          <div className="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
+                            <AlertTriangle className="w-4 h-4 text-amber-600" />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs font-medium text-zinc-500 uppercase">{m.clause_type}</span>
+                              <span className={`text-xs font-bold ${simColor}`}>{(m.similarity * 100).toFixed(0)}% similar</span>
+                            </div>
+                            <p className="mt-1 text-sm text-zinc-600 line-clamp-2">{m.clause_a}...</p>
+                          </div>
+                          <div className="shrink-0 mt-1">{isExpanded ? <ChevronUp className="w-4 h-4 text-zinc-400" /> : <ChevronDown className="w-4 h-4 text-zinc-400" />}</div>
+                        </button>
+                        {isExpanded && (
+                          <div className="px-4 pb-4 pt-0 border-t border-zinc-100">
+                            <div className="grid grid-cols-2 gap-3 mt-3">
+                              <div className="bg-red-50 rounded-lg p-3">
+                                <p className="text-[10px] font-semibold text-red-600 uppercase mb-1">Contract A</p>
+                                <p className="text-sm text-zinc-700">{m.clause_a}</p>
+                              </div>
+                              <div className="bg-emerald-50 rounded-lg p-3">
+                                <p className="text-[10px] font-semibold text-emerald-600 uppercase mb-1">Contract B</p>
+                                <p className="text-sm text-zinc-700">{m.clause_b}</p>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* Added clauses */}
+              {activeSection === "added" && (
+                <div className="space-y-2">
+                  {result.added_clauses.length === 0 ? (
+                    <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                      <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                      <p className="text-sm text-zinc-500">No new clauses added in Contract B.</p>
+                    </div>
+                  ) : result.added_clauses.map((c, i) => (
+                    <div key={i} className="border-l-4 border-emerald-400 bg-emerald-50/30 rounded-r-xl p-3">
+                      <span className="text-[10px] font-semibold text-emerald-600 uppercase">{c.type}</span>
+                      <p className="text-sm text-zinc-700 mt-1">{c.text}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Removed clauses */}
+              {activeSection === "removed" && (
+                <div className="space-y-2">
+                  {result.removed_clauses.length === 0 ? (
+                    <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                      <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                      <p className="text-sm text-zinc-500">No clauses removed from Contract A.</p>
+                    </div>
+                  ) : result.removed_clauses.map((c, i) => (
+                    <div key={i} className="border-l-4 border-red-400 bg-red-50/30 rounded-r-xl p-3">
+                      <span className="text-[10px] font-semibold text-red-600 uppercase">{c.type}</span>
+                      <p className="text-sm text-zinc-700 mt-1">{c.text}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Summary */}
+              {activeSection === "summary" && (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="border border-zinc-200 rounded-xl p-4">
+                      <p className="text-xs font-medium text-zinc-500 mb-2">Contract A Clause Types</p>
+                      {Object.entries(result.type_map_a).map(([type, count]) => (
+                        <div key={type} className="flex justify-between text-sm py-1">
+                          <span className="text-zinc-600 capitalize">{type}</span>
+                          <span className="font-medium text-zinc-900">{count}</span>
+                        </div>
+                      ))}
+                    </div>
+                    <div className="border border-zinc-200 rounded-xl p-4">
+                      <p className="text-xs font-medium text-zinc-500 mb-2">Contract B Clause Types</p>
+                      {Object.entries(result.type_map_b).map(([type, count]) => (
+                        <div key={type} className="flex justify-between text-sm py-1">
+                          <span className="text-zinc-600 capitalize">{type}</span>
+                          <span className="font-medium text-zinc-900">{count}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="border border-zinc-200 rounded-xl p-4">
+                    <p className="text-xs font-medium text-zinc-500 mb-2">Raw JSON</p>
+                    <pre className="text-xs text-zinc-600 overflow-x-auto bg-zinc-50 rounded-lg p-3">{JSON.stringify(result, null, 2)}</pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}