feat: Interactive dashboard navigation and table layout optimization

frontend/app/page.tsx

@@ -46,6 +46,7 @@ export default function HomePage() {
   const [analysisResult, setAnalysisResult] = useState<AnalysisResult | null>(null);
   const [analysisHistory, setAnalysisHistory] = useState<AnalysisHistoryItem[]>([]);
   const [status, setStatus] = useState("listening");
+  const [searchKeyword, setSearchKeyword] = useState("");
 
   // Scroll to top when tab changes
   useEffect(() => {
@@ -101,6 +102,13 @@ export default function HomePage() {
     window.history.pushState({}, '', `?tab=agent_analysis`);
   };
 
+  const handleFilterClick = (type: "sector" | "region", value: string) => {
+    setSearchKeyword(value);
+    setActiveTab("Tender Search");
+    handleSearch({ keyword: value });
+    window.history.pushState({}, '', `?tab=tender_search&q=${encodeURIComponent(value)}`);
+  };
+
   const handleSearch = async (params: { keyword?: string; buyer?: string; provider_code?: string; date?: string; skip?: number; limit?: number }) => {
     const results = await searchTenders(params);
     setTenders(results);
@@ -202,6 +210,7 @@ export default function HomePage() {
                 highRiskItems={analysisResult?.risks.filter(r => r.severity === "High").length ?? 0}
                 reportsGenerated={analysisResult ? 1 : 0}
                 tenders={tenders}
+                onFilterClick={handleFilterClick}
               />
             )}
             {(activeTab === "Tender Search" || activeTab === "My Portfolio") && (
@@ -210,6 +219,7 @@ export default function HomePage() {
                 onSearch={handleSearch}
                 onAnalyze={handleTenderSelect}
                 forceShowFollowed={activeTab === "My Portfolio"}
+                initialKeyword={searchKeyword}
               />
             )}
             {activeTab === "Company Profile" && (

frontend/components/Dashboard.tsx

@@ -10,6 +10,7 @@ type Props = {
   highRiskItems: number;
   reportsGenerated: number;
   tenders: Tender[];
+  onFilterClick?: (type: "sector" | "region", value: string) => void;
 };
 
 export default function Dashboard({ 
@@ -17,7 +18,8 @@ export default function Dashboard({
   recommendedOpportunities, 
   highRiskItems, 
   reportsGenerated,
-  tenders 
+  tenders,
+  onFilterClick
 }: Props) {
   const [isSyncing, setIsSyncing] = useState(false);
   const [dbStatus, setDbStatus] = useState<any>(null);
@@ -138,18 +140,22 @@ export default function Dashboard({
           <div className="space-y-4">
             {sectorDistribution.length > 0 ? (
               sectorDistribution.map(([sector, count]) => (
-                <div key={sector}>
-                  <div className="flex justify-between text-xs mb-1">
-                    <span className="text-slate-300">{sector}</span>
-                    <span className="text-cyan font-semibold">{count}</span>
+                <button 
+                  key={sector} 
+                  onClick={() => onFilterClick?.("sector", sector)}
+                  className="w-full text-left group/item focus:outline-none"
+                >
+                  <div className="flex justify-between text-xs mb-1.5">
+                    <span className="text-slate-300 group-hover/item:text-cyan transition-colors">{sector}</span>
+                    <span className="text-cyan font-semibold opacity-60 group-hover/item:opacity-100">{count}</span>
                   </div>
-                  <div className="h-1.5 w-full bg-slate-900 rounded-full overflow-hidden">
+                  <div className="h-2 w-full bg-slate-900 rounded-full overflow-hidden border border-white/5">
                     <div 
-                      className="h-full bg-cyan transition-all duration-500" 
+                      className="h-full bg-cyan transition-all duration-700 group-hover/item:brightness-125" 
                       style={{ width: `${(count / tenders.length) * 100}%` }}
                     />
                   </div>
-                </div>
+                </button>
               ))
             ) : (
               <p className="text-slate-500 text-xs italic">Sin datos disponibles.</p>
@@ -163,18 +169,22 @@ export default function Dashboard({
           <div className="space-y-4">
             {regionDistribution.length > 0 ? (
               regionDistribution.map(([region, count]) => (
-                <div key={region}>
-                  <div className="flex justify-between text-xs mb-1">
-                    <span className="text-slate-300">{region}</span>
-                    <span className="text-sky font-semibold">{count}</span>
+                <button 
+                  key={region} 
+                  onClick={() => onFilterClick?.("region", region)}
+                  className="w-full text-left group/item focus:outline-none"
+                >
+                  <div className="flex justify-between text-xs mb-1.5">
+                    <span className="text-slate-300 group-hover/item:text-sky transition-colors">{region}</span>
+                    <span className="text-sky font-semibold opacity-60 group-hover/item:opacity-100">{count}</span>
                   </div>
-                  <div className="h-1.5 w-full bg-slate-900 rounded-full overflow-hidden">
+                  <div className="h-2 w-full bg-slate-900 rounded-full overflow-hidden border border-white/5">
                     <div 
-                      className="h-full bg-sky transition-all duration-500" 
+                      className="h-full bg-sky transition-all duration-700 group-hover/item:brightness-125" 
                       style={{ width: `${(count / tenders.length) * 100}%` }}
                     />
                   </div>
-                </div>
+                </button>
               ))
             ) : (
               <p className="text-slate-500 text-xs italic">Sin datos disponibles.</p>

frontend/components/TenderSearch.tsx

@@ -9,10 +9,11 @@ type Props = {
   onSearch: (params: { keyword?: string; buyer?: string; provider_code?: string; date?: string; skip?: number; limit?: number }) => void;
   onAnalyze: (tender: Tender) => void;
   forceShowFollowed?: boolean;
+  initialKeyword?: string;
 };
 
-export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false }: Props) {
-  const [keyword, setKeyword] = useState("");
+export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false, initialKeyword = "" }: Props) {
+  const [keyword, setKeyword] = useState(initialKeyword);
   const [buyerCode, setBuyerCode] = useState("");
   const [date, setDate] = useState("");
   const [expandedTenderCodes, setExpandedTenderCodes] = useState<string[]>([]);
@@ -35,6 +36,10 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     if (forceShowFollowed) setShowOnlyFollowed(true);
   }, [forceShowFollowed]);
 
+  useEffect(() => {
+    if (initialKeyword) setKeyword(initialKeyword);
+  }, [initialKeyword]);
+
   useEffect(() => {
     localStorage.setItem('andes_followed_codes', JSON.stringify(followedCodes));
   }, [followedCodes]);
@@ -197,12 +202,12 @@ 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-6 py-5 w-[140px]">Selection</th>
-                    <th className="px-6 py-5 w-[300px]">Opportunity</th>
-                    <th className="px-6 py-5 w-[200px]">Buyer</th>
-                    <th className="px-6 py-5 text-center w-[120px]">Status</th>
-                    <th className="px-6 py-5 text-right w-[120px]">Deadline</th>
-                    <th className="px-6 py-5 text-right pr-10 w-[120px]">Actions</th>
+                    <th className="px-4 py-5 w-[100px]">ID / Select</th>
+                    <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">
@@ -212,8 +217,8 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                         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-6 py-5">
-                          <div className="flex items-center gap-3">
+                        <td className="px-4 py-5">
+                          <div className="flex items-center gap-2">
                             <input 
                               type="checkbox"
                               checked={selectedCodes.includes(tender.code)}
@@ -221,45 +226,45 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                                 e.stopPropagation();
                                 toggleSelect(tender.code);
                               }}
-                              className="w-4 h-4 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
+                              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-lg 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'}`}
+                              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-[10px]">{tender.code}</span>
+                            <span className="font-mono text-purple-400 text-[9px] truncate">{tender.code}</span>
                           </div>
                         </td>
-                        <td className="px-6 py-5 max-w-xs">
-                          <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate">{tender.name}</div>
+                        <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-[10px] text-slate-500">{tender.region || "Nacional"}</span>
+                            <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-6 py-5 text-slate-400 text-xs">{tender.buyer}</td>
-                        <td className="px-6 py-5 text-center">
-                          <span className={`inline-block rounded-full px-3 py-1 text-[10px] font-bold ${
+                        <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-6 py-5 text-right font-mono text-xs text-slate-400">
+                        <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-6 py-5 text-right pr-10">
+                        <td className="px-4 py-5 text-right pr-6">
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
                               onAnalyze(tender);
                             }}
-                            className="bg-white/10 hover:bg-white/20 text-white text-[11px] font-bold px-4 py-2 rounded-lg transition-all border border-white/10"
+                            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"
                           >
                             Analyze
                           </button>