v3.0: Upload web/app/dashboard-pages/compare/page.tsx — zero emojis, Lucide icons, responsive

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

@@ -1 +1,256 @@
-/app/web_final/compare_page.tsx
+"use client";
+
+import { useState } from "react";
+import {
+  GitCompare, ArrowRightLeft, ChevronDown, ChevronUp,
+  TriangleAlert, CircleCheck, AlertTriangle,
+  Loader2, Cpu, FileSearch, Layers, Scale
+} 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;
+  comparison_method?: 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");
+      setResult(await res.json());
+    } catch (e: any) { setError(e.message); }
+    finally { setLoading(false); }
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-50/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
+        <div className="mb-6 sm:mb-8">
+          <h1 className="text-xl sm:text-2xl font-semibold tracking-tight flex items-center gap-2">
+            <GitCompare className="w-5 h-5 sm:w-6 sm:h-6 text-zinc-400" />
+            Compare Contracts
+          </h1>
+          <p className="mt-1 text-xs sm:text-sm text-zinc-500">Side-by-side semantic diff with clause-level alignment and risk delta.</p>
+        </div>
+
+        {/* Input */}
+        <div className="grid md:grid-cols-2 gap-4 mb-6">
+          {[
+            { label: "A", value: textA, setValue: setTextA },
+            { label: "B", value: textB, setValue: setTextB },
+          ].map(({ label, value, setValue }) => (
+            <div key={label}>
+              <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">{label}</span>
+                Contract {label}
+              </label>
+              <textarea value={value} onChange={(e) => setValue(e.target.value)}
+                placeholder={`Paste contract ${label} here...`}
+                className="w-full h-[200px] sm:h-[280px] p-3 sm:p-4 bg-white 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</>}
+          </button>
+          <button onClick={() => { setTextA(EXAMPLE_A); setTextB(EXAMPLE_B); }} 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>}
+
+        {result && (
+          <div className="space-y-4 sm:space-y-6">
+            {/* Method indicator */}
+            {result.comparison_method && (
+              <div className="flex items-center justify-center gap-2 text-xs text-zinc-400">
+                {result.comparison_method.includes("semantic") ? <Cpu className="w-3.5 h-3.5" /> : <FileSearch className="w-3.5 h-3.5" />}
+                <span>Method: {result.comparison_method}</span>
+              </div>
+            )}
+
+            {/* Summary grid */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              <div className="bg-white border border-zinc-200 rounded-xl p-4 text-center">
+                <Layers className="w-5 h-5 text-blue-500 mx-auto mb-1" />
+                <p className="text-2xl font-bold text-zinc-900">{(result.alignment_score * 100).toFixed(1)}%</p>
+                <p className="text-[11px] text-zinc-400">Alignment</p>
+              </div>
+              <div className="bg-white border border-zinc-200 rounded-xl p-4 text-center">
+                <p className="text-[11px] text-zinc-400 mb-1">Contract A</p>
+                <p className="text-2xl font-bold text-zinc-900">{result.contract_a_clauses}</p>
+                <p className="text-[11px] text-zinc-400">clauses</p>
+              </div>
+              <div className="bg-white border border-zinc-200 rounded-xl p-4 text-center">
+                <p className="text-[11px] text-zinc-400 mb-1">Contract B</p>
+                <p className="text-2xl font-bold text-zinc-900">{result.contract_b_clauses}</p>
+                <p className="text-[11px] text-zinc-400">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"}`}>
+                <Scale className={`w-5 h-5 mx-auto mb-1 ${result.risk_winner === "tie" ? "text-emerald-500" : "text-red-500"}`} />
+                <p className={`text-sm font-bold leading-tight ${result.risk_winner === "tie" ? "text-emerald-700" : "text-red-700"}`}>{result.risk_delta}</p>
+              </div>
+            </div>
+
+            {/* Tabs */}
+            <div className="border-b border-zinc-200 overflow-x-auto">
+              <div className="flex gap-0.5 min-w-max">
+                {[
+                  { key: "summary", label: "Summary" },
+                  { 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-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${activeSection === s.key ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-400 hover:text-zinc-600"}`}>
+                    {s.label} {s.count != null && s.count > 0 && <span className="ml-1 text-zinc-400 bg-zinc-100 px-1.5 py-0.5 rounded-full text-[10px]">{s.count}</span>}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="max-h-[400px] sm:max-h-[500px] overflow-y-auto">
+              {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 bg-white"><CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" /><p className="text-sm text-zinc-500">No modified clauses.</p></div>
+                  ) : result.modified_clauses.map((m, i) => {
+                    const isExpanded = expandedIdx === i;
+                    const simColor = m.similarity >= 0.8 ? "text-emerald-600 bg-emerald-50" : m.similarity >= 0.6 ? "text-amber-600 bg-amber-50" : "text-red-600 bg-red-50";
+                    return (
+                      <div key={i} className="bg-white border border-zinc-200 rounded-xl overflow-hidden">
+                        <button onClick={() => setExpandedIdx(isExpanded ? null : i)} className="w-full text-left p-3 sm: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 flex-wrap">
+                              <span className="text-xs font-medium text-zinc-500 uppercase">{m.clause_type}</span>
+                              <span className={`text-xs font-bold px-2 py-0.5 rounded ${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-3 sm:px-4 pb-4 pt-0 border-t border-zinc-100">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
+                              <div className="bg-red-50 rounded-lg p-3 border border-red-100">
+                                <p className="text-[10px] font-semibold text-red-600 uppercase mb-1.5">Contract A</p>
+                                <p className="text-sm text-zinc-700 leading-relaxed">{m.clause_a}</p>
+                              </div>
+                              <div className="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
+                                <p className="text-[10px] font-semibold text-emerald-600 uppercase mb-1.5">Contract B</p>
+                                <p className="text-sm text-zinc-700 leading-relaxed">{m.clause_b}</p>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              {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 bg-white"><CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" /><p className="text-sm text-zinc-500">No new clauses in B.</p></div>
+                  ) : result.added_clauses.map((c, i) => (
+                    <div key={i} className="bg-white border-l-4 border-emerald-400 border border-zinc-200 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 leading-relaxed">{c.text}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {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 bg-white"><CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" /><p className="text-sm text-zinc-500">No clauses removed.</p></div>
+                  ) : result.removed_clauses.map((c, i) => (
+                    <div key={i} className="bg-white border-l-4 border-red-400 border border-zinc-200 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 leading-relaxed">{c.text}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {activeSection === "summary" && (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {[
+                      { label: "Contract A Clause Types", data: result.type_map_a },
+                      { label: "Contract B Clause Types", data: result.type_map_b },
+                    ].map(({ label, data }) => (
+                      <div key={label} className="bg-white border border-zinc-200 rounded-xl p-4">
+                        <p className="text-xs font-medium text-zinc-500 mb-2">{label}</p>
+                        {Object.entries(data).map(([type, count]) => (
+                          <div key={type} className="flex justify-between text-sm py-1 border-b border-zinc-50 last:border-0">
+                            <span className="text-zinc-600 capitalize">{type}</span>
+                            <span className="font-medium text-zinc-900">{count}</span>
+                          </div>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}