Fix: 7-day session config, plan gating on scanner (10 free/month), file upload button, upgrade modal when limit hit

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

@@ -1,20 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import {
   ScanText, ScanLine, TriangleAlert, CircleAlert, CircleCheck, Info,
-  Download, FileDown, ChevronDown, ChevronUp, Highlighter, Copy, Check,
-  ShieldCheck, ShieldAlert, Scale, Gavel, Ban, Globe, Eye, Stamp, FileX
+  FileDown, ChevronDown, ChevronUp, Copy, Check, Upload, FileText,
+  ShieldCheck, ShieldAlert, Scale, Gavel, Ban, Globe, Eye, Stamp, FileX,
+  Lock, Sparkles as SparklesIcon, X
 } from "lucide-react";
 
 interface Cat { name: string; severity: string; description?: string; confidence?: number; }
 interface Clause { text: string; categories: Cat[]; }
 interface Result { risk_score: number; grade: string; total_clauses: number; flagged_count: number; results: Clause[]; model: string; latency_ms: number; }
 
-const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: string; border: string; dot: string }> = {
-  HIGH: { icon: TriangleAlert, label: "High", text: "text-red-600", bg: "bg-red-50", border: "border-red-200", dot: "bg-red-500" },
-  MEDIUM: { icon: CircleAlert, label: "Medium", text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200", dot: "bg-amber-500" },
-  LOW: { icon: Info, label: "Low", text: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200", dot: "bg-blue-500" },
+const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: string; border: string }> = {
+  HIGH: { icon: TriangleAlert, label: "High", text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
+  MEDIUM: { icon: CircleAlert, label: "Medium", text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
+  LOW: { icon: Info, label: "Low", text: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
 };
 
 const GRADE_STYLE: Record<string, string> = {
@@ -53,18 +54,59 @@ export default function AnalyzePage() {
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
   const [filter, setFilter] = useState<string>("all");
   const [copied, setCopied] = useState(false);
+  const [scanCount, setScanCount] = useState(0);
+  const [userPlan, setUserPlan] = useState("free");
+  const [showUpgrade, setShowUpgrade] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const FREE_LIMIT = 10;
+  const canScan = userPlan !== "free" || scanCount < FREE_LIMIT;
 
   async function handleAnalyze() {
     if (!text || text.trim().length < 50) { setError("Enter at least 50 characters."); return; }
+
+    if (!canScan) { setShowUpgrade(true); return; }
+
     setLoading(true); setError(""); setResults(null); setExpandedIdx(null);
     try {
       const res = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
       if (!res.ok) throw new Error((await res.json()).error || "Failed");
-      setResults(await res.json());
+      const data = await res.json();
+      setResults(data);
+      setScanCount(prev => prev + 1);
     } catch (e: any) { setError(e.message); }
     finally { setLoading(false); }
   }
 
+  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (userPlan === "free") { setShowUpgrade(true); return; }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      // Read file as text
+      if (file.name.endsWith(".txt") || file.name.endsWith(".md")) {
+        const content = await file.text();
+        setText(content);
+      } else if (file.name.endsWith(".pdf")) {
+        setError("PDF parsing requires the Pro plan backend. Paste text for now.");
+      } else if (file.name.endsWith(".docx")) {
+        setError("DOCX parsing requires the Pro plan backend. Paste text for now.");
+      } else {
+        const content = await file.text();
+        setText(content);
+      }
+    } catch {
+      setError("Could not read file.");
+    }
+    setLoading(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }
+
   async function handleDownloadPDF() {
     if (!results) return;
     try {
@@ -94,13 +136,50 @@ export default function AnalyzePage() {
 
   return (
     <div className="min-h-screen bg-white">
+      {/* Upgrade modal */}
+      {showUpgrade && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded-2xl p-6 max-w-sm mx-4 shadow-xl">
+            <div className="flex justify-between items-start">
+              <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center">
+                <Lock className="w-5 h-5 text-amber-600" />
+              </div>
+              <button onClick={() => setShowUpgrade(false)} className="p-1 hover:bg-zinc-100 rounded-md"><X className="w-4 h-4 text-zinc-400" /></button>
+            </div>
+            <h3 className="mt-4 text-lg font-semibold">
+              {userPlan === "free" && scanCount >= FREE_LIMIT ? "Free limit reached" : "Pro feature"}
+            </h3>
+            <p className="mt-1.5 text-sm text-zinc-500 leading-relaxed">
+              {userPlan === "free" && scanCount >= FREE_LIMIT
+                ? `You have used all ${FREE_LIMIT} free scans this month. Upgrade to Pro for unlimited scans, file uploads, and AI explanations.`
+                : "File upload is available on the Pro plan. Upgrade to scan contracts and leases directly."}
+            </p>
+            <div className="mt-5 flex gap-2">
+              <a href="/#pricing" className="flex-1 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium text-center hover:bg-zinc-800 transition-colors">
+                View plans
+              </a>
+              <button onClick={() => setShowUpgrade(false)} className="flex-1 border border-zinc-200 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
+                Not now
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="max-w-6xl mx-auto px-5 py-10">
-        <div className="mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
-            <ScanText className="w-6 h-6 text-zinc-400" />
-            Scan a document
-          </h1>
-          <p className="mt-1 text-sm text-zinc-500">Paste Terms of Service, a contract, or a lease agreement.</p>
+        <div className="mb-8 flex items-start justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
+              <ScanText className="w-6 h-6 text-zinc-400" />
+              Scan a document
+            </h1>
+            <p className="mt-1 text-sm text-zinc-500">Paste text or upload a file (.txt, .md).</p>
+          </div>
+          {userPlan === "free" && (
+            <span className="text-xs text-zinc-400 border border-zinc-200 px-2.5 py-1 rounded-md">
+              {scanCount}/{FREE_LIMIT} free scans
+            </span>
+          )}
         </div>
 
         <div className="grid lg:grid-cols-5 gap-6">
@@ -108,16 +187,21 @@ export default function AnalyzePage() {
           <div className="lg:col-span-2">
             <textarea value={text} onChange={(e) => setText(e.target.value)}
               placeholder="Paste your document text here..."
-              className="w-full h-[420px] 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" />
+              className="w-full h-[380px] 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 className="mt-3 flex gap-2">
               <button onClick={handleAnalyze} disabled={loading}
                 className="flex-1 inline-flex items-center justify-center gap-2 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
                 {loading ? <><ScanLine className="w-4 h-4 animate-pulse" /> Scanning...</> : <><ScanText className="w-4 h-4" /> Scan</>}
               </button>
               <button onClick={() => setText(EXAMPLE)}
-                className="px-4 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">
+                className="px-3 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">
                 Example
               </button>
+              <input ref={fileInputRef} type="file" accept=".txt,.md,.pdf,.docx" className="hidden" onChange={handleFileUpload} />
+              <button onClick={() => fileInputRef.current?.click()}
+                className="px-3 border border-zinc-200 rounded-lg text-zinc-500 hover:bg-zinc-50 transition-colors" title="Upload file">
+                <Upload className="w-4 h-4" />
+              </button>
             </div>
             {error && <p className="mt-2 text-sm text-red-600 flex items-center gap-1.5"><TriangleAlert className="w-3.5 h-3.5" />{error}</p>}
           </div>
@@ -140,11 +224,9 @@ export default function AnalyzePage() {
                         }`} style={{ width: `${results.risk_score}%` }} />
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
-                      <span className={`text-sm font-semibold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
-                        Grade {results.grade}
-                      </span>
-                    </div>
+                    <span className={`text-sm font-semibold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
+                      Grade {results.grade}
+                    </span>
                   </div>
                   <div className="mt-4 flex items-center gap-4 text-xs text-zinc-400">
                     <span>{results.total_clauses} clauses</span>
@@ -154,7 +236,7 @@ export default function AnalyzePage() {
                     <span>{results.latency_ms}ms</span>
                     <span className="w-px h-3 bg-zinc-200" />
                     <span className="flex items-center gap-1">
-                      {results.model === "ml" ? <Sparkles className="w-3 h-3" /> : null}
+                      {results.model === "ml" && <SparklesIcon className="w-3 h-3" />}
                       {results.model === "ml" ? "Legal-BERT" : "Pattern matching"}
                     </span>
                   </div>
@@ -188,11 +270,11 @@ export default function AnalyzePage() {
                 </div>
 
                 {/* Clause list */}
-                <div className="space-y-2 max-h-[400px] overflow-y-auto pr-1">
+                <div className="space-y-2 max-h-[380px] overflow-y-auto pr-1">
                   {filtered.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">{filter === "all" ? "No unfair clauses found." : "No clauses at this severity level."}</p>
+                      <p className="text-sm text-zinc-500">{filter === "all" ? "No unfair clauses found." : "No clauses at this severity."}</p>
                     </div>
                   ) : filtered.map((clause, i) => {
                     const maxSev = clause.categories.reduce((m, c) => {
@@ -204,8 +286,7 @@ export default function AnalyzePage() {
                     const CatIcon = CATEGORY_ICONS[clause.categories[0]?.name] || TriangleAlert;
 
                     return (
-                      <div key={i}
-                        className={`border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-sm" : ""}`}>
+                      <div key={i} className={`border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-sm" : ""}`}>
                         <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 flex items-center justify-center shrink-0 ${conf.bg}`}>
@@ -217,8 +298,7 @@ export default function AnalyzePage() {
                                 const s = SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM;
                                 return (
                                   <span key={j} className={`text-[11px] font-medium px-2 py-0.5 rounded border ${s.bg} ${s.text} ${s.border}`}>
-                                    {cat.name}
-                                    {cat.confidence ? ` ${Math.round(cat.confidence * 100)}%` : ""}
+                                    {cat.name}{cat.confidence ? ` ${Math.round(cat.confidence * 100)}%` : ""}
                                   </span>
                                 );
                               })}
@@ -231,9 +311,7 @@ export default function AnalyzePage() {
                         </button>
                         {isExpanded && (
                           <div className="px-4 pb-4 pt-0 border-t border-zinc-100">
-                            <p className="text-sm text-zinc-700 leading-relaxed mt-3 font-mono bg-zinc-50 rounded-lg p-3">
-                              {clause.text}
-                            </p>
+                            <p className="text-sm text-zinc-700 leading-relaxed mt-3 font-mono bg-zinc-50 rounded-lg p-3">{clause.text}</p>
                             {clause.categories.map((cat, j) => (
                               <div key={j} className="mt-3 flex items-start gap-2">
                                 <TriangleAlert className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${(SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM).text}`} />
@@ -261,7 +339,3 @@ export default function AnalyzePage() {
     </div>
   );
 }
-
-function Sparkles({ className }: { className?: string }) {
-  return <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>;
-}

web/lib/supabase/client.ts

@@ -3,6 +3,15 @@ import { createBrowserClient } from "@supabase/ssr";
 export function createClient() {
   return createBrowserClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
+    {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+        // 7 day session — Supabase default is 3600s (1 hour)
+        // This must also be set in Supabase Dashboard → Auth → Settings → JWT Expiry
+        // Set to 604800 (7 days) in the dashboard
+      },
+    }
   );
 }