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

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

@@ -1 +1,176 @@
-/app/web_final/dashboard.tsx
+import { createClient } from "@/lib/supabase/server";
+import Link from "next/link";
+import {
+  ScanText, ShieldCheck, Tag, AlertTriangle, ClipboardList,
+  GitCompare, Cpu, Layers, Clock
+} from "lucide-react";
+
+export default async function DashboardPage() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  const { data: profile } = await supabase
+    .from("profiles").select("*").eq("id", user?.id).single();
+
+  const { data: analyses, count } = await supabase
+    .from("analyses").select("*", { count: "exact" }).eq("user_id", user?.id)
+    .order("created_at", { ascending: false }).limit(10);
+
+  const plan = profile?.plan || "free";
+  const usedThisMonth = profile?.analyses_this_month || 0;
+  const limit = plan === "free" ? 10 : "Unlimited";
+
+  const avgRisk = analyses && analyses.length > 0
+    ? Math.round(analyses.reduce((s: number, a: any) => s + a.risk_score, 0) / analyses.length)
+    : null;
+  const totalEntities = analyses?.reduce((s: number, a: any) => s + (a.entities?.length || 0), 0) || 0;
+  const totalContradictions = analyses?.reduce((s: number, a: any) => s + (a.contradictions?.length || 0), 0) || 0;
+  const totalObligations = analyses?.reduce((s: number, a: any) => s + (a.obligations?.length || 0), 0) || 0;
+
+  return (
+    <div className="min-h-screen bg-zinc-50/30">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8 sm:mb-10">
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-2">
+              <ShieldCheck className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-500" />
+              Dashboard
+            </h1>
+            <p className="text-gray-500 text-sm mt-1">Welcome back, {profile?.full_name || user?.email}</p>
+          </div>
+          <Link href="/dashboard-pages/analyze"
+            className="bg-indigo-600 text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold hover:bg-indigo-700 transition text-sm whitespace-nowrap">
+            + New Scan
+          </Link>
+        </div>
+
+        {/* Primary Stats */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 mb-8 sm:mb-10">
+          {[
+            { label: "Plan", value: plan, capitalize: true },
+            { label: "Scans This Month", value: `${usedThisMonth} / ${limit}` },
+            { label: "Total Scans", value: String(count || 0) },
+            { label: "Avg Risk Score", value: avgRisk !== null ? String(avgRisk) : "\u2014" },
+          ].map((s) => (
+            <div key={s.label} className="bg-white rounded-xl p-4 sm:p-6 border border-gray-200">
+              <p className="text-xs sm:text-sm text-gray-500">{s.label}</p>
+              <p className={`text-xl sm:text-2xl font-bold text-gray-900 mt-1 ${s.capitalize ? "capitalize" : ""}`}>{s.value}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Analysis Stats */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-6 mb-8 sm:mb-10">
+          {[
+            { icon: Tag, label: "Entities Extracted", value: totalEntities, sublabel: "via Legal-BERT NER", color: "bg-blue-50 text-blue-600" },
+            { icon: AlertTriangle, label: "Contradictions Found", value: totalContradictions, sublabel: "via DeBERTa NLI model", color: "bg-amber-50 text-amber-600" },
+            { icon: ClipboardList, label: "Obligations Tracked", value: totalObligations, sublabel: "with priority scoring", color: "bg-emerald-50 text-emerald-600" },
+          ].map((s) => (
+            <div key={s.label} className="bg-white rounded-xl p-4 sm:p-6 border border-gray-200 flex items-center gap-4">
+              <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${s.color.split(" ")[0]}`}>
+                <s.icon className={`w-5 h-5 ${s.color.split(" ")[1]}`} />
+              </div>
+              <div>
+                <p className="text-xs sm:text-sm text-gray-500">{s.label}</p>
+                <p className="text-lg sm:text-xl font-bold text-gray-900">{s.value}</p>
+                <p className="text-[10px] text-gray-400">{s.sublabel}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid sm:grid-cols-2 gap-3 sm:gap-6 mb-8 sm:mb-10">
+          <Link href="/dashboard-pages/analyze" className="bg-white rounded-xl p-5 sm:p-6 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
+                <ScanText className="w-5 h-5 text-indigo-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900">Analyze Contract</h3>
+            </div>
+            <p className="text-sm text-gray-500">Scan with 3 ML models: clause classifier, Legal NER, and NLI contradiction detection.</p>
+          </Link>
+          <Link href="/dashboard-pages/compare" className="bg-white rounded-xl p-5 sm:p-6 border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all group">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
+                <GitCompare className="w-5 h-5 text-indigo-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900">Compare Contracts</h3>
+            </div>
+            <p className="text-sm text-gray-500">Side-by-side diff with semantic similarity scoring and risk delta.</p>
+          </Link>
+        </div>
+
+        {/* Recent Scans */}
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-100">
+            <h2 className="font-semibold text-gray-900">Recent Scans</h2>
+          </div>
+          {analyses && analyses.length > 0 ? (
+            <div className="divide-y divide-gray-100">
+              {analyses.map((a: any) => (
+                <div key={a.id} className="px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:items-center justify-between hover:bg-gray-50 gap-2 sm:gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-900 truncate">{a.source_url || "Manual scan"}</p>
+                    <div className="flex items-center gap-2 mt-1 flex-wrap">
+                      <p className="text-xs text-gray-500">
+                        {new Date(a.created_at).toLocaleDateString()} · {a.total_clauses} clauses · {a.flagged_count} flagged
+                      </p>
+                      {a.entities && a.entities.length > 0 && (
+                        <span className="inline-flex items-center gap-1 text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded border border-blue-100">
+                          <Tag className="w-2.5 h-2.5" />{a.entities.length}
+                        </span>
+                      )}
+                      {a.contradictions && a.contradictions.length > 0 && (
+                        <span className="inline-flex items-center gap-1 text-[10px] bg-amber-50 text-amber-600 px-1.5 py-0.5 rounded border border-amber-100">
+                          <AlertTriangle className="w-2.5 h-2.5" />{a.contradictions.length}
+                        </span>
+                      )}
+                      {a.obligations && a.obligations.length > 0 && (
+                        <span className="inline-flex items-center gap-1 text-[10px] bg-emerald-50 text-emerald-600 px-1.5 py-0.5 rounded border border-emerald-100">
+                          <ClipboardList className="w-2.5 h-2.5" />{a.obligations.length}
+                        </span>
+                      )}
+                      {a.model && a.model !== "regex" && (
+                        <span className="inline-flex items-center gap-1 text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded border border-indigo-100">
+                          <Cpu className="w-2.5 h-2.5" />ML
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <span className={`self-start sm:self-auto text-sm font-bold px-3 py-1 rounded-full whitespace-nowrap ${
+                    a.grade === "F" ? "bg-red-100 text-red-700" :
+                    a.grade === "D" ? "bg-orange-100 text-orange-700" :
+                    a.grade === "C" ? "bg-yellow-100 text-yellow-700" :
+                    "bg-green-100 text-green-700"
+                  }`}>
+                    {a.grade} · {a.risk_score}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="px-6 py-12 text-center">
+              <Layers className="w-10 h-10 text-zinc-200 mx-auto mb-3" />
+              <p className="text-sm text-gray-400">No scans yet. <Link href="/dashboard-pages/analyze" className="text-indigo-600 hover:underline">Start your first scan</Link></p>
+            </div>
+          )}
+        </div>
+
+        {/* Upgrade CTA */}
+        {plan === "free" && (
+          <div className="mt-8 bg-indigo-50 border border-indigo-200 rounded-xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <p className="font-semibold text-indigo-900">Upgrade to Pro</p>
+              <p className="text-sm text-indigo-700 mt-1">Unlimited scans, contract comparison, PDF exports, obligation tracking, and team features.</p>
+            </div>
+            <Link href="/#pricing" className="bg-indigo-600 text-white px-6 py-2.5 rounded-lg font-semibold text-sm hover:bg-indigo-700 transition whitespace-nowrap">
+              View Plans
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}