feat: Replace expandable rows with detailed tender modal and simplify table

frontend/components/TenderSearch.tsx

@@ -16,7 +16,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   const [keyword, setKeyword] = useState(initialKeyword);
   const [buyerCode, setBuyerCode] = useState("");
   const [date, setDate] = useState("");
-  const [expandedTenderCodes, setExpandedTenderCodes] = useState<string[]>([]);
+  const [selectedTenderForModal, setSelectedTenderForModal] = useState<Tender | null>(null);
   const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
   const [isSyncingToAgents, setIsSyncingToAgents] = useState(false);
   
@@ -44,12 +44,6 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     localStorage.setItem('andes_followed_codes', JSON.stringify(followedCodes));
   }, [followedCodes]);
 
-  const toggleExpanded = (code: string) => {
-    setExpandedTenderCodes((current) =>
-      current.includes(code) ? current.filter((value) => value !== code) : [...current, code]
-    );
-  };
-
   const toggleFollow = (code: string) => {
     setFollowedCodes(prev => 
       prev.includes(code) ? prev.filter(c => c !== code) : [...prev, code]
@@ -64,7 +58,6 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
 
   const handleSyncToAgents = () => {
     setIsSyncingToAgents(true);
-    // Simulate system ingestion
     setTimeout(() => {
       setIsSyncingToAgents(false);
       const firstSelected = tenders.find(t => t.code === selectedCodes[0]);
@@ -206,129 +199,54 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                     <th className="px-4 py-5 w-[250px]">Opportunity</th>
                     <th className="px-4 py-5 w-[180px]">Buyer</th>
                     <th className="px-4 py-5 text-center w-[100px]">Status</th>
-                    <th className="px-4 py-5 text-right w-[90px]">Deadline</th>
-                    <th className="px-4 py-5 text-right pr-6 w-[100px]">Actions</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-white/5">
                   {filteredTenders.map((tender) => (
-                    <Fragment key={tender.code}>
-                      <tr 
-                        className={`hover:bg-white/[0.04] cursor-pointer transition-colors group ${selectedCodes.includes(tender.code) ? 'bg-purple-500/5' : ''}`}
-                        onClick={() => toggleExpanded(tender.code)}
-                      >
-                        <td className="px-4 py-5">
-                          <div className="flex items-center gap-2">
-                            <input 
-                              type="checkbox"
-                              checked={selectedCodes.includes(tender.code)}
-                              onChange={(e) => {
-                                e.stopPropagation();
-                                toggleSelect(tender.code);
-                              }}
-                              className="w-3.5 h-3.5 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
-                            />
-                            <button 
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                toggleFollow(tender.code);
-                              }}
-                              className={`text-base transition-all hover:scale-125 ${followedCodes.includes(tender.code) ? 'text-purple-400 drop-shadow-[0_0_8px_rgba(168,85,247,0.4)]' : 'text-slate-600 hover:text-slate-400'}`}
-                            >
-                              {followedCodes.includes(tender.code) ? "★" : "☆"}
-                            </button>
-                            <span className="font-mono text-purple-400 text-[9px] truncate">{tender.code}</span>
-                          </div>
-                        </td>
-                        <td className="px-4 py-5">
-                          <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate text-xs">{tender.name}</div>
-                          <div className="flex items-center gap-2 mt-1">
-                            <span className="text-[9px] text-slate-500 truncate">{tender.region || "Nacional"}</span>
-                            <span className="text-[8px] px-1.5 py-0.5 rounded-md bg-white/5 text-slate-600 border border-white/5 uppercase tracking-tighter">{tender.sector}</span>
-                          </div>
-                        </td>
-                        <td className="px-4 py-5 text-slate-400 text-[11px] truncate">{tender.buyer}</td>
-                        <td className="px-4 py-5 text-center">
-                          <span className={`inline-block rounded-full px-2 py-0.5 text-[9px] font-bold ${
-                            tender.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800/50 text-slate-500'
-                          }`}>
-                            {tender.status}
-                          </span>
-                        </td>
-                        <td className="px-4 py-5 text-right font-mono text-[11px] text-slate-400">
-                          {tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}
-                        </td>
-                        <td className="px-4 py-5 text-right pr-6">
-                          <button
+                    <tr 
+                      key={tender.code}
+                      className={`hover:bg-white/[0.04] cursor-pointer transition-colors group ${selectedCodes.includes(tender.code) ? 'bg-purple-500/5' : ''}`}
+                      onClick={() => setSelectedTenderForModal(tender)}
+                    >
+                      <td className="px-4 py-5">
+                        <div className="flex items-center gap-2">
+                          <input 
+                            type="checkbox"
+                            checked={selectedCodes.includes(tender.code)}
+                            onChange={(e) => {
+                              e.stopPropagation();
+                              toggleSelect(tender.code);
+                            }}
+                            className="w-3.5 h-3.5 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
+                          />
+                          <button 
                             onClick={(e) => {
                               e.stopPropagation();
-                              onAnalyze(tender);
+                              toggleFollow(tender.code);
                             }}
-                            className="bg-white/10 hover:bg-white/20 text-white text-[10px] font-bold px-3 py-1.5 rounded-lg transition-all border border-white/10"
+                            className={`text-base transition-all hover:scale-125 ${followedCodes.includes(tender.code) ? 'text-purple-400 drop-shadow-[0_0_8px_rgba(168,85,247,0.4)]' : 'text-slate-600 hover:text-slate-400'}`}
                           >
-                            Analyze
+                            {followedCodes.includes(tender.code) ? "★" : "☆"}
                           </button>
-                        </td>
-                      </tr>
-                      {expandedTenderCodes.includes(tender.code) && (
-                        <tr className="bg-white/[0.01] animate-in fade-in duration-500 border-l-2 border-purple-500">
-                          <td colSpan={6} className="px-8 md:px-12 py-10">
-                            <div className="grid gap-10 lg:grid-cols-5 items-start">
-                              <div className="lg:col-span-3 space-y-8">
-                                <div>
-                                  <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-purple-400 mb-4 flex items-center gap-2">
-                                    <span className="w-4 h-[1px] bg-purple-500/50" />
-                                    Project Description
-                                  </h4>
-                                  <p className="text-slate-300 leading-relaxed text-sm bg-white/[0.02] p-5 rounded-2xl border border-white/5">{tender.description}</p>
-                                </div>
-                                <div className="grid grid-cols-2 gap-6">
-                                  <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5 shadow-inner">
-                                    <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Estimated Amount</div>
-                                    <div className="text-sm text-white font-bold">
-                                      {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(tender.estimated_amount) : "Not Disclosed"}
-                                    </div>
-                                  </div>
-                                  <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5 shadow-inner">
-                                    <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Market Sector</div>
-                                    <div className="text-sm text-white font-bold">{tender.sector || "General"}</div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="lg:col-span-2 space-y-8">
-                                <div>
-                                  <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-purple-400 mb-4 flex items-center gap-2">
-                                    <span className="w-4 h-[1px] bg-purple-500/50" />
-                                    Resources & Direct Links
-                                  </h4>
-                                  <div className="grid gap-3">
-                                    {tender.attachments?.map((att, i) => (
-                                      <a key={i} href={att.url} target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/[0.03] hover:bg-white/[0.08] border border-white/5 transition-all group/file">
-                                        <div className="flex items-center gap-4">
-                                          <span className="text-2xl">{att.name.endsWith('.pdf') ? "📕" : "📘"}</span>
-                                          <div className="flex flex-col">
-                                            <span className="text-xs font-bold text-slate-200 group-hover/file:text-white transition-colors">{att.name}</span>
-                                            <span className="text-[10px] text-slate-500 uppercase tracking-tighter">Official Document</span>
-                                          </div>
-                                        </div>
-                                        <span className="text-[10px] font-black text-purple-400 opacity-0 group-hover/file:opacity-100 transition-all">DOWNLOAD</span>
-                                      </a>
-                                    ))}
-                                    <a 
-                                      href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${tender.code}`}
-                                      target="_blank"
-                                      className="flex items-center justify-center gap-2 p-3 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-300 text-xs font-bold hover:bg-purple-500/20 transition mt-2"
-                                    >
-                                      Open official portal
-                                    </a>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      )}
-                    </Fragment>
+                          <span className="font-mono text-purple-400 text-[9px] truncate">{tender.code}</span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-5">
+                        <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate text-xs">{tender.name}</div>
+                        <div className="flex items-center gap-2 mt-1">
+                          <span className="text-[9px] text-slate-500 truncate">{tender.region || "Nacional"}</span>
+                          <span className="text-[8px] px-1.5 py-0.5 rounded-md bg-white/5 text-slate-600 border border-white/5 uppercase tracking-tighter">{tender.sector}</span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-5 text-slate-400 text-[11px] truncate">{tender.buyer}</td>
+                      <td className="px-4 py-5 text-center">
+                        <span className={`inline-block rounded-full px-2 py-0.5 text-[9px] font-bold ${
+                          tender.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800/50 text-slate-500'
+                        }`}>
+                          {tender.status}
+                        </span>
+                      </td>
+                    </tr>
                   ))}
                 </tbody>
               </table>
@@ -337,6 +255,123 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
         )}
       </div>
 
+      {/* Details Modal */}
+      {selectedTenderForModal && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-10">
+          <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-md" onClick={() => setSelectedTenderForModal(null)} />
+          <div className="relative w-full max-w-4xl max-h-[90vh] bg-slate-900 border border-white/10 rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-300">
+            {/* Modal Header */}
+            <div className="p-6 md:p-8 border-b border-white/10 flex justify-between items-start">
+              <div>
+                <div className="flex items-center gap-3 mb-2">
+                  <span className="text-xs font-mono text-purple-400 bg-purple-400/10 px-2 py-0.5 rounded-md">{selectedTenderForModal.code}</span>
+                  <span className={`px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-tighter ${
+                    selectedTenderForModal.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400' : 'bg-slate-800 text-slate-500'
+                  }`}>
+                    {selectedTenderForModal.status}
+                  </span>
+                </div>
+                <h3 className="text-2xl font-bold text-white">{selectedTenderForModal.name}</h3>
+                <p className="text-slate-400 text-sm mt-1">{selectedTenderForModal.buyer}</p>
+              </div>
+              <button 
+                onClick={() => setSelectedTenderForModal(null)}
+                className="p-2 bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white rounded-xl transition-all"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="flex-1 overflow-y-auto p-6 md:p-8 custom-scrollbar">
+              <div className="grid gap-10 md:grid-cols-3">
+                {/* Left Column: Main Info */}
+                <div className="md:col-span-2 space-y-8">
+                  <div>
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-4 flex items-center gap-2">
+                      <span className="w-4 h-[1px] bg-slate-700" />
+                      Project Description
+                    </h4>
+                    <p className="text-slate-300 leading-relaxed text-sm bg-slate-800/50 p-6 rounded-2xl border border-white/5 whitespace-pre-wrap">
+                      {selectedTenderForModal.description || "No detailed description provided."}
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5">
+                      <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Estimated Amount</div>
+                      <div className="text-sm text-white font-bold">
+                        {selectedTenderForModal.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(selectedTenderForModal.estimated_amount) : "Not Disclosed"}
+                      </div>
+                    </div>
+                    <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5">
+                      <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Market Sector</div>
+                      <div className="text-sm text-white font-bold">{selectedTenderForModal.sector || "General"}</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Column: Meta & Links */}
+                <div className="space-y-8">
+                  <div className="p-6 rounded-2xl bg-purple-500/5 border border-purple-500/10">
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-purple-400 mb-4">Deadline</h4>
+                    <div className="text-xl font-mono text-white mb-1">
+                      {selectedTenderForModal.closing_date ? new Date(selectedTenderForModal.closing_date).toLocaleDateString() : "---"}
+                    </div>
+                    <p className="text-[10px] text-purple-400/60 uppercase">Final day for submission</p>
+                  </div>
+
+                  <div>
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-4">Official Resources</h4>
+                    <div className="space-y-3">
+                      {selectedTenderForModal.attachments?.map((att, i) => (
+                        <a key={i} href={att.url} target="_blank" className="flex items-center justify-between p-4 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/5 transition-all group/file">
+                          <div className="flex items-center gap-3">
+                            <span className="text-xl">{att.name.endsWith('.pdf') ? "📕" : "📘"}</span>
+                            <span className="text-xs font-medium text-slate-300 truncate max-w-[120px]">{att.name}</span>
+                          </div>
+                          <span className="text-[8px] font-black text-purple-400 opacity-0 group-hover/file:opacity-100 uppercase transition-all tracking-tighter">Download</span>
+                        </a>
+                      ))}
+                      {!selectedTenderForModal.attachments?.length && (
+                        <p className="text-[10px] text-slate-600 italic">No attachments found.</p>
+                      )}
+                    </div>
+                  </div>
+
+                  <a 
+                    href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${selectedTenderForModal.code}`}
+                    target="_blank"
+                    className="flex items-center justify-center gap-2 w-full p-4 rounded-xl bg-white/5 border border-white/10 text-slate-300 text-xs font-bold hover:bg-white/10 transition"
+                  >
+                    Open official portal ↗
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="p-6 bg-slate-950/50 border-t border-white/10 flex justify-end gap-4">
+              <button 
+                onClick={() => setSelectedTenderForModal(null)}
+                className="px-6 py-3 text-sm font-bold text-slate-400 hover:text-white transition"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={() => {
+                  onAnalyze(selectedTenderForModal);
+                  setSelectedTenderForModal(null);
+                }}
+                className="premium-gradient text-white px-8 py-3 rounded-xl font-bold text-sm shadow-xl shadow-purple-500/20 active:scale-95 transition-all"
+              >
+                Run Agent Analysis
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {isLoading && <BrandLoader />}
     </div>
   );