🚀 Production UI Polish: Fixed Portfolio persistence, Checkboxes, Star buttons, and Reports data mapping

frontend/components/ProposalDraft.tsx

@@ -4,13 +4,38 @@ type Props = {
 
 export default function ProposalDraft({ proposal }: Props) {
   return (
-    <div className="space-y-6">
-      <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6">
-        <h2 className="text-2xl font-semibold text-white">Proposal Draft</h2>
-        <p className="mt-3 text-slate-400">Este borrador se genera automáticamente una vez que se completa el análisis del tender.</p>
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="glass-card rounded-[2rem] p-8 border border-white/10 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 blur-[60px]" />
+        <h2 className="text-2xl font-bold text-white mb-2">Technical Proposal Draft</h2>
+        <p className="text-slate-500 text-sm">Automatically generated framework based on expert agent consensus.</p>
       </div>
-      <div className="rounded-3xl border border-slate-800 bg-slate-900/80 p-6 text-slate-200">
-        <pre className="whitespace-pre-wrap break-words text-slate-100">{proposal || "Run agent analysis to generate a proposal draft."}</pre>
+
+      <div className="glass-card rounded-[2.5rem] border border-white/5 bg-slate-950/40 p-10 text-slate-300 min-h-[500px] shadow-2xl">
+        {proposal ? (
+          <div className="prose prose-invert max-w-none">
+            <div className="flex items-center justify-between mb-8 pb-4 border-b border-white/5">
+              <span className="text-[10px] font-black uppercase tracking-widest text-purple-400">Generated Strategy Document</span>
+              <button 
+                onClick={() => {
+                  navigator.clipboard.writeText(proposal);
+                  alert("Copied!");
+                }}
+                className="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition"
+              >
+                Copy Text 📋
+              </button>
+            </div>
+            <pre className="whitespace-pre-wrap break-words text-slate-100 font-serif leading-relaxed text-lg italic">
+              {proposal}
+            </pre>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-slate-500 py-20">
+            <div className="text-4xl mb-4 opacity-20">📝</div>
+            <p className="text-sm font-medium">Run a specialized analysis to generate a custom proposal.</p>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/components/Reports.tsx

@@ -20,30 +20,34 @@ export default function Reports({ reportMarkdown }: Props) {
   };
 
   return (
-    <div className="space-y-6">
-      <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="glass-card rounded-[2rem] p-8 border border-white/10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-32 h-32 bg-cyan/10 blur-[60px]" />
         <div>
-          <h2 className="text-2xl font-semibold text-white">Export & Reports</h2>
-          <p className="mt-2 text-slate-400">Exporta el análisis completo en formato Markdown para tu equipo legal y comercial.</p>
+          <h2 className="text-2xl font-bold text-white mb-2">Executive Intelligence Report</h2>
+          <p className="text-slate-500 text-sm">Exportable Markdown summary for decision makers and legal review.</p>
         </div>
         <button
           type="button"
           onClick={handleCopy}
-          className="rounded-3xl bg-cyan px-8 py-4 font-semibold text-slate-950 transition hover:bg-sky shadow-lg shadow-cyan/10"
+          disabled={!reportMarkdown}
+          className="rounded-2xl premium-gradient px-8 py-4 font-black text-xs uppercase tracking-widest text-white shadow-xl shadow-purple-500/20 transition hover:scale-105 active:scale-95 disabled:opacity-30"
         >
-          Copy Markdown Report
+          Copy Report 📋
         </button>
       </div>
 
-      <div className="rounded-3xl border border-slate-800 bg-slate-900/40 p-8 text-slate-200 min-h-[400px] shadow-inner">
+      <div className="glass-card rounded-[2.5rem] border border-white/5 bg-slate-950/40 p-10 text-slate-300 min-h-[500px] shadow-2xl">
         {reportMarkdown ? (
           <div className="prose prose-invert max-w-none">
-            <pre className="whitespace-pre-wrap break-words text-slate-100 font-mono text-sm leading-relaxed">{reportMarkdown}</pre>
+            <pre className="whitespace-pre-wrap break-words text-slate-100 font-mono text-[13px] leading-relaxed p-6 rounded-2xl bg-black/20 border border-white/5">
+              {reportMarkdown}
+            </pre>
           </div>
         ) : (
           <div className="flex flex-col items-center justify-center h-full text-slate-500 py-20">
-            <div className="text-4xl mb-4">📋</div>
-            <p>Generate an analysis in 'Agent Analysis' to preview the report here.</p>
+            <div className="text-4xl mb-4 opacity-20">📋</div>
+            <p className="text-sm font-medium tracking-tight">Complete an agentic analysis to compile the final report.</p>
           </div>
         )}
       </div>

frontend/components/TenderSearch.tsx

@@ -23,14 +23,16 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
   const [isSyncingToAgents, setIsSyncingToAgents] = useState(false);
   
-  const [followedCodes, setFollowedCodes] = useState<string[]>(() => {
+  const [followedTenders, setFollowedTenders] = useState<Tender[]>(() => {
     if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('andes_followed_codes');
+      const saved = localStorage.getItem('andes_followed_tenders_full');
       return saved ? JSON.parse(saved) : [];
     }
     return [];
   });
   
+  const followedCodes = useMemo(() => followedTenders.map(t => t.code), [followedTenders]);
+  
   const [showOnlyFollowed, setShowOnlyFollowed] = useState(forceShowFollowed);
   const [isLoading, setIsLoading] = useState(false);
   const [isAgileMode, setIsAgileMode] = useState(false);
@@ -45,13 +47,18 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   }, [initialKeyword]);
 
   useEffect(() => {
-    localStorage.setItem('andes_followed_codes', JSON.stringify(followedCodes));
-  }, [followedCodes]);
+    localStorage.setItem('andes_followed_tenders_full', JSON.stringify(followedTenders));
+  }, [followedTenders]);
 
-  const toggleFollow = (code: string) => {
-    setFollowedCodes(prev => 
-      prev.includes(code) ? prev.filter(c => c !== code) : [...prev, code]
-    );
+  const toggleFollow = (tender: Tender) => {
+    setFollowedTenders(prev => {
+      const isFollowing = prev.some(t => t.code === tender.code);
+      if (isFollowing) {
+        return prev.filter(t => t.code !== tender.code);
+      } else {
+        return [...prev, tender];
+      }
+    });
   };
 
   const toggleSelect = (code: string) => {
@@ -60,6 +67,14 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     );
   };
 
+  const toggleSelectAll = () => {
+    if (selectedCodes.length === filteredTenders.length) {
+      setSelectedCodes([]);
+    } else {
+      setSelectedCodes(filteredTenders.map(t => t.code));
+    }
+  };
+
   const handleSyncToAgents = () => {
     setIsSyncingToAgents(true);
     setTimeout(() => {
@@ -94,10 +109,11 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   };
 
   const filteredTenders = useMemo(() => {
-    let list = tenders;
     if (showOnlyFollowed) {
-      list = list.filter(t => followedCodes.includes(t.code));
+      return followedTenders;
     }
+    
+    let list = tenders;
     if (isAgileMode) {
       list = list.filter(t => 
         t.code.includes('COT26') || 
@@ -108,7 +124,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
       );
     }
     return list;
-  }, [tenders, showOnlyFollowed, followedCodes, isAgileMode]);
+  }, [tenders, showOnlyFollowed, followedTenders, isAgileMode]);
 
   return (
     <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
@@ -242,7 +258,17 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                   <table className="w-full text-left text-sm table-fixed border-collapse">
                     <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold border-b border-white/5">
                       <tr>
-                        <th className="px-4 py-5 w-[100px]">{t.idSelect}</th>
+                        <th className="px-4 py-5 w-[100px]">
+                          <div className="flex items-center gap-2">
+                            <input 
+                              type="checkbox"
+                              checked={filteredTenders.length > 0 && selectedCodes.length === filteredTenders.length}
+                              onChange={toggleSelectAll}
+                              className="w-3.5 h-3.5 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
+                            />
+                            {t.idSelect}
+                          </div>
+                        </th>
                         <th className="px-4 py-5 w-[250px]">{t.opportunity}</th>
                         <th className="px-4 py-5 w-[180px]">{t.buyer}</th>
                         <th className="px-4 py-5 text-center w-[100px]">{t.status}</th>
@@ -260,8 +286,8 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                               <input 
                                 type="checkbox"
                                 checked={selectedCodes.includes(tender.code)}
+                                onClick={(e) => e.stopPropagation()}
                                 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"
@@ -269,7 +295,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                               <button 
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  toggleFollow(tender.code);
+                                  toggleFollow(tender);
                                 }}
                                 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'}`}
                               >
@@ -317,7 +343,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
             </button>
             <div className="flex gap-4">
               <button 
-                onClick={() => toggleFollow(selectedTenderForModal.code)}
+                onClick={() => toggleFollow(selectedTenderForModal)}
                 className={`px-4 py-2 rounded-xl border font-bold text-xs transition-all ${
                   followedCodes.includes(selectedTenderForModal.code) 
                     ? "bg-purple-500/20 border-purple-500/40 text-purple-300"