feat: complete tender detail view with attachments, items, and external link

frontend/components/TenderSearch.tsx

@@ -181,33 +181,119 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   const renderDetailView = (tender: Tender) => (
     <div className="animate-in slide-in-from-right-8 fade-in duration-700 w-full max-w-[1600px] mx-auto pt-4 pb-20">
       <div className="flex justify-between items-end mb-8">
-        <button onClick={() => setSelectedTenderForModal(null)} className="flex items-center gap-2 text-slate-400 hover:text-white transition group">
-          <span className="text-xl group-hover:-translate-x-1 transition-transform">←</span>
-          <span className="text-sm font-bold uppercase tracking-widest">Back to search</span>
+        <button onClick={() => setSelectedTenderForModal(null)} className="flex items-center gap-4 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all group active:scale-95">
+          <span className="text-2xl group-hover:-translate-x-1 transition-transform">←</span>
+          <span className="text-xs font-black uppercase tracking-widest">Back to search</span>
         </button>
         <div className="flex bg-white/5 p-1 rounded-2xl border border-white/10">
-          <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Overview</button>
-          <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Agent Chat</button>
+          <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500"}`}>Overview</button>
+          <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500"}`}>Agent Chat</button>
         </div>
       </div>
 
       {activeDetailTab === "Overview" ? (
-        <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl p-10 md:p-14">
-          <div className="flex items-center gap-3 mb-6">
-            <span className="text-sm font-mono text-purple-400 bg-purple-400/10 px-3 py-1 rounded-lg">{tender.code}</span>
-            <span className="px-3 py-1 rounded-lg text-xs font-black uppercase bg-green-500/10 text-green-400">{tender.status}</span>
-          </div>
-          <h3 className="text-3xl md:text-4xl font-black text-white leading-tight mb-8">{tender.name}</h3>
-          <div className="grid lg:grid-cols-3 gap-12">
-            <div className="lg:col-span-2 space-y-8">
-              <div className="text-slate-300 leading-relaxed text-lg bg-white/[0.02] p-8 rounded-[2rem] border border-white/5 whitespace-pre-wrap">{tender.description || "No description provided."}</div>
+        <div className="space-y-8">
+          <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl p-10 md:p-14 relative">
+            <div className="absolute top-0 right-0 p-8">
+              <a 
+                href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${tender.code}`} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-4 py-2 rounded-xl bg-cyan/10 border border-cyan/30 text-cyan text-[10px] font-black uppercase tracking-widest hover:bg-cyan/20 transition-all"
+              >
+                Visit Official Site 🔗
+              </a>
+            </div>
+
+            <div className="flex items-center gap-3 mb-6">
+              <span className="text-sm font-mono text-purple-400 bg-purple-400/10 px-3 py-1 rounded-lg border border-purple-400/20">{tender.code}</span>
+              <span className="px-3 py-1 rounded-lg text-xs font-black uppercase bg-green-500/10 text-green-400 border border-green-500/20">{tender.status}</span>
+              <span className="px-3 py-1 rounded-lg text-[10px] font-bold uppercase bg-white/5 text-slate-500 border border-white/10">{tender.type || "N/A"}</span>
             </div>
-            <div className="space-y-6">
-              <div className="p-8 rounded-[2rem] bg-purple-600/10 border border-purple-500/20">
-                <div className="text-[10px] text-slate-500 font-bold uppercase mb-1">Closing Deadline</div>
-                <div className="text-2xl font-black text-white font-mono">{tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}</div>
+            
+            <h3 className="text-3xl md:text-5xl font-black text-white leading-tight mb-4 max-w-4xl">{tender.name}</h3>
+            <p className="text-slate-400 text-xl font-medium mb-12">{tender.buyer}</p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+               <div className="bg-white/5 p-6 rounded-3xl border border-white/5">
+                  <p className="text-[10px] uppercase font-bold text-slate-500 tracking-[0.2em] mb-2">Estimated Investment</p>
+                  <p className="text-2xl font-black text-white">
+                    {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: tender.currency || "CLP", maximumFractionDigits: 0 }).format(tender.estimated_amount) : "N/A"}
+                  </p>
+               </div>
+               <div className="bg-white/5 p-6 rounded-3xl border border-white/5">
+                  <p className="text-[10px] uppercase font-bold text-slate-500 tracking-[0.2em] mb-2">Closing Deadline</p>
+                  <p className="text-2xl font-black text-white font-mono">{tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}</p>
+               </div>
+               <div className="bg-white/5 p-6 rounded-3xl border border-white/5">
+                  <p className="text-[10px] uppercase font-bold text-slate-500 tracking-[0.2em] mb-2">Region</p>
+                  <p className="text-2xl font-black text-white truncate" title={tender.region}>{tender.region || "Nacional"}</p>
+               </div>
+               <div className="bg-white/5 p-6 rounded-3xl border border-white/5">
+                  <p className="text-[10px] uppercase font-bold text-slate-500 tracking-[0.2em] mb-2">Sector</p>
+                  <p className="text-2xl font-black text-white truncate">{tender.sector || "General"}</p>
+               </div>
+            </div>
+
+            <div className="grid lg:grid-cols-3 gap-12">
+              <div className="lg:col-span-2 space-y-8">
+                <div>
+                  <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-4">Detailed Description</h4>
+                  <div className="text-slate-300 leading-relaxed text-lg bg-white/[0.02] p-10 rounded-[2.5rem] border border-white/5 whitespace-pre-wrap">{tender.description || "No description provided."}</div>
+                </div>
+                
+                {tender.items && tender.items.length > 0 && (
+                  <div>
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-4">Products / Services Required</h4>
+                    <div className="overflow-hidden rounded-3xl border border-white/5 bg-black/20">
+                      <table className="w-full text-left text-xs">
+                        <thead className="bg-white/5 text-slate-500 font-bold uppercase text-[9px]">
+                          <tr>
+                            <th className="px-6 py-4">Item Name</th>
+                            <th className="px-6 py-4 text-right">Quantity</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-white/5">
+                          {tender.items.map((item, idx) => (
+                            <tr key={idx} className="hover:bg-white/5 transition-colors">
+                              <td className="px-6 py-4 text-slate-300 font-medium">{item.name}</td>
+                              <td className="px-6 py-4 text-right font-mono text-cyan">{item.quantity} {item.unit}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-8">
+                <div className="p-8 rounded-[2.5rem] bg-purple-600/10 border border-purple-500/20 relative overflow-hidden group">
+                  <div className="absolute -right-10 -bottom-10 h-32 w-32 bg-purple-500/10 rounded-full blur-3xl group-hover:bg-purple-500/20 transition-all" />
+                  <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-purple-400 mb-6">Decision Intelligence</h4>
+                  <p className="text-xs text-slate-400 leading-relaxed mb-8">Launch our multi-agent AI pipeline to analyze compliance, risks, and win-probability for this opportunity.</p>
+                  <button onClick={() => { onAnalyze(tender); setSelectedTenderForModal(null); }} className="w-full premium-gradient text-white px-8 py-5 rounded-2xl font-black uppercase shadow-xl shadow-purple-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all">Analyze with AI</button>
+                </div>
+
+                <div className="p-8 rounded-[2.5rem] bg-white/5 border border-white/10">
+                  <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-6">Documents & Attachments</h4>
+                  {tender.attachments && tender.attachments.length > 0 ? (
+                    <div className="space-y-3">
+                      {tender.attachments.map((att, idx) => (
+                        <a key={idx} href={att.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between p-4 rounded-xl bg-black/40 border border-white/5 hover:border-purple-500/40 transition-all group">
+                           <span className="text-[11px] text-slate-400 group-hover:text-white truncate max-w-[180px]">{att.name}</span>
+                           <span className="text-xs">📥</span>
+                        </a>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-center py-10 px-4 rounded-2xl bg-black/20 border border-dashed border-white/10">
+                      <span className="text-2xl mb-2 block">📄</span>
+                      <p className="text-[10px] text-slate-600 font-bold uppercase leading-relaxed">No direct attachments found. Check the official site for the full bidding package.</p>
+                    </div>
+                  )}
+                </div>
               </div>
-              <button onClick={() => { onAnalyze(tender); setSelectedTenderForModal(null); }} className="w-full premium-gradient text-white px-8 py-4 rounded-2xl font-black uppercase shadow-xl">Analyze with AI</button>
             </div>
           </div>
         </div>