feat: Multi-language support (EN/ES) and ESG Compliance Monitor

frontend/app/page.tsx

@@ -13,6 +13,7 @@ import GlobalSync from "../components/GlobalSync";
 import SystemInfo from "../components/SystemInfo";
 import { analyzeTender, fetchAnalysisHistory, fetchCompanyProfile, healthCheck, saveCompanyProfile, searchTenders } from "../lib/api";
 import type { AnalysisHistoryItem, AnalysisResult, CompanyProfile as CompanyProfileType, Tender } from "../lib/types";
+import { translations, Language } from "../lib/translations";
 
 const tabs = [
   "Dashboard",
@@ -47,6 +48,10 @@ export default function HomePage() {
   const [analysisHistory, setAnalysisHistory] = useState<AnalysisHistoryItem[]>([]);
   const [status, setStatus] = useState("listening");
   const [searchKeyword, setSearchKeyword] = useState("");
+  const [lang, setLang] = useState<Language>("en");
+  
+  const t = translations[lang];
+
 
   // Scroll to top when tab changes
   useEffect(() => {
@@ -169,6 +174,7 @@ export default function HomePage() {
                 setIsMobileMenuOpen(false);
               }}
               status={status}
+              lang={lang}
             />
           </div>
         </div>
@@ -186,17 +192,32 @@ export default function HomePage() {
                 {activeTab === "My Portfolio" && "Manage your followed opportunities."}
               </p>
             </div>
-            <div className="hidden md:flex items-center gap-4">
-              <div className="flex -space-x-3">
-                {[1, 2, 3].map(i => (
-                  <div key={i} className="w-8 h-8 rounded-full border-2 border-[#030303] bg-slate-800 flex items-center justify-center text-[10px] font-bold text-slate-400">
-                    A{i}
+            <div className="hidden md:flex items-center gap-6">
+              {/* ESG Monitor */}
+              <div className="flex flex-col items-end">
+                <span className="text-[9px] font-black uppercase tracking-widest text-slate-500 mb-1">{t.esgScore}</span>
+                <div className="flex gap-2">
+                  <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-green-500/10 border border-green-500/20">
+                    <span className="text-[10px] font-bold text-green-400">E</span>
+                    <span className="text-[10px] font-mono text-white">92</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-blue-500/10 border border-blue-500/20">
+                    <span className="text-[10px] font-bold text-blue-400">S</span>
+                    <span className="text-[10px] font-mono text-white">85</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-purple-500/10 border border-purple-500/20">
+                    <span className="text-[10px] font-bold text-purple-400">G</span>
+                    <span className="text-[10px] font-mono text-white">96</span>
                   </div>
-                ))}
+                </div>
               </div>
-              <div className="h-8 w-px bg-white/10" />
-              <button className="bg-white/5 hover:bg-white/10 text-white px-4 py-2 rounded-xl text-xs font-bold border border-white/10 transition-all">
-                Help Center
+              <div className="h-10 w-px bg-white/10" />
+              <button 
+                onClick={() => setLang(lang === "en" ? "es" : "en")}
+                className="bg-white/5 hover:bg-white/10 text-white px-4 py-2 rounded-xl text-xs font-bold border border-white/10 transition-all flex items-center gap-2"
+              >
+                <span>{lang === "en" ? "🇺🇸" : "🇪🇸"}</span>
+                <span>{lang === "en" ? "English" : "Español"}</span>
               </button>
             </div>
           </header>
@@ -211,6 +232,7 @@ export default function HomePage() {
                 reportsGenerated={analysisResult ? 1 : 0}
                 tenders={tenders}
                 onFilterClick={handleFilterClick}
+                lang={lang}
               />
             )}
             {(activeTab === "Tender Search" || activeTab === "My Portfolio") && (
@@ -220,6 +242,7 @@ export default function HomePage() {
                 onAnalyze={handleTenderSelect}
                 forceShowFollowed={activeTab === "My Portfolio"}
                 initialKeyword={searchKeyword}
+                lang={lang}
               />
             )}
             {activeTab === "Company Profile" && (

frontend/components/Dashboard.tsx

@@ -4,6 +4,8 @@ import { useEffect, useMemo, useState } from "react";
 import BrandLoader from "./BrandLoader";
 import { searchTenders, fetchDbStatus } from "../lib/api";
 
+import { translations, Language } from "../lib/translations";
+
 type Props = {
   tendersFound: number;
   recommendedOpportunities: number;
@@ -11,6 +13,7 @@ type Props = {
   reportsGenerated: number;
   tenders: Tender[];
   onFilterClick?: (type: "sector" | "region", value: string) => void;
+  lang: Language;
 };
 
 export default function Dashboard({ 
@@ -19,8 +22,10 @@ export default function Dashboard({
   highRiskItems, 
   reportsGenerated,
   tenders,
-  onFilterClick
+  onFilterClick,
+  lang
 }: Props) {
+  const t = translations[lang];
   const [isSyncing, setIsSyncing] = useState(false);
   const [dbStatus, setDbStatus] = useState<any>(null);
 
@@ -35,11 +40,9 @@ export default function Dashboard({
   const handleGlobalSync = async () => {
     setIsSyncing(true);
     try {
-      // We trigger a search for "software" or empty to populate initial DB
       await searchTenders({ keyword: "" }); 
-      // Small delay for the "wow" effect duration
       await new Promise(r => setTimeout(r, 2500));
-      window.location.reload(); // Refresh to show new counts
+      window.location.reload();
     } catch (e) {
       console.error(e);
     } finally {
@@ -110,33 +113,33 @@ export default function Dashboard({
       {isSyncing && <BrandLoader />}
       <div className="flex items-center justify-between gap-4">
         <div>
-          <p className="text-sm uppercase tracking-[0.35em] text-cyan/80">Resumen ejecutivo</p>
+          <p className="text-sm uppercase tracking-[0.35em] text-cyan/80">{t.resumenEjecutivo}</p>
           <h2 className="mt-3 text-4xl font-semibold text-white">AndesOps AI</h2>
           <p className="mt-4 max-w-2xl text-slate-300">
-            Inteligencia de mercado y análisis agéntico para licitaciones públicas en Chile.
+            {t.andesOpsDesc}
           </p>
         </div>
         <button
           onClick={handleGlobalSync}
           className="group relative flex items-center gap-3 overflow-hidden rounded-2xl bg-cyan px-6 py-4 font-bold text-slate-950 transition hover:bg-sky hover:scale-[1.02] active:scale-[0.98]"
         >
-          <span className="relative z-10">Sync Global Pipeline</span>
+          <span className="relative z-10">{t.syncPipeline}</span>
           <span className="text-xl group-hover:rotate-180 transition-transform duration-700">🔄</span>
           <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
         </button>
       </div>
 
       <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
-        <StatCard title="Tenders Found" value={tendersFound} subtitle="Oportunidades activas" />
-        <StatCard title="Recommended" value={recommendedOpportunities} subtitle="Fit score > 80%" />
-        <StatCard title="High Risk" value={highRiskItems} subtitle="Riesgos críticos" />
-        <StatCard title="Total Pipeline" value={formatAmount(totalAmount)} subtitle="Monto total proyectado" />
+        <StatCard title={t.tendersFound} value={tendersFound} subtitle={t.activeOpps} />
+        <StatCard title={t.recommended} value={recommendedOpportunities} subtitle="Fit score > 80%" />
+        <StatCard title={t.highRisk} value={highRiskItems} subtitle="Riesgos críticos" />
+        <StatCard title={t.totalPipeline} value={formatAmount(totalAmount)} subtitle="Monto total proyectado" />
       </div>
 
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Sector Distribution */}
         <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6">
-          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">Sectores (Rubros)</h3>
+          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">{t.sectors}</h3>
           <div className="space-y-4">
             {sectorDistribution.length > 0 ? (
               sectorDistribution.map(([sector, count]) => (
@@ -165,7 +168,7 @@ export default function Dashboard({
 
         {/* Region Distribution */}
         <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6">
-          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">Distribución Regional</h3>
+          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">{t.regionalDist}</h3>
           <div className="space-y-4">
             {regionDistribution.length > 0 ? (
               regionDistribution.map(([region, count]) => (
@@ -194,7 +197,7 @@ export default function Dashboard({
 
         {/* Deadline Status */}
         <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6">
-          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">Estado de Plazos</h3>
+          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">{t.deadlines}</h3>
           <div className="space-y-6 pt-2">
             <div className="flex items-center gap-4">
               <div className="h-12 w-1.5 bg-red-500 rounded-full" />
@@ -223,7 +226,7 @@ export default function Dashboard({
         {/* Database Status Table (New) */}
         <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6 flex flex-col justify-between">
           <div>
-            <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">Data Integrity Monitor</h3>
+            <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">{t.integrityMonitor}</h3>
             <div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/30">
               <table className="w-full text-left text-[10px]">
                 <thead className="bg-slate-800/50 text-slate-500 uppercase font-bold">

frontend/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { translations, Language } from "../lib/translations";
 
 import type { Dispatch, SetStateAction } from "react";
 
@@ -18,9 +19,26 @@ type Props = {
   activeTab: SidebarTab;
   onTabSelect: Dispatch<SetStateAction<SidebarTab>>;
   status: string;
+  lang: Language;
 };
 
-export default function Sidebar({ tabs, activeTab, onTabSelect, status }: Props) {
+export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang }: Props) {
+  const t = translations[lang];
+  
+  const getTabLabel = (tab: SidebarTab) => {
+    switch(tab) {
+      case "Dashboard": return t.dashboard;
+      case "Tender Search": return t.tenderSearch;
+      case "My Portfolio": return t.myPortfolio;
+      case "Company Profile": return t.companyProfile;
+      case "Agent Analysis": return t.agentAnalysis;
+      case "Proposal Draft": return t.proposalDraft;
+      case "Reports": return t.reports;
+      case "History": return t.history;
+      case "About": return t.about;
+      default: return tab;
+    }
+  };
   return (
     <aside className="w-72 glass-card rounded-3xl h-[calc(100vh-3rem)] sticky top-6 p-6 flex flex-col gap-8">
       <div className="flex items-center gap-3 px-2">
@@ -51,7 +69,7 @@ export default function Sidebar({ tabs, activeTab, onTabSelect, status }: Props)
               <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${
                 isActive ? "bg-purple-500 scale-125 shadow-[0_0_8px_rgba(168,85,247,0.8)]" : "bg-transparent group-hover:bg-slate-600"
               }`} />
-              <span className="font-medium text-sm">{tab}</span>
+              <span className="font-medium text-sm">{getTabLabel(tab)}</span>
             </button>
           );
         })}

frontend/components/TenderSearch.tsx

@@ -10,9 +10,11 @@ type Props = {
   onAnalyze: (tender: Tender) => void;
   forceShowFollowed?: boolean;
   initialKeyword?: string;
+  lang: Language;
 };
 
-export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false, initialKeyword = "" }: Props) {
+export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false, initialKeyword = "", lang }: Props) {
+  const t = translations[lang];
   const [keyword, setKeyword] = useState(initialKeyword);
   const [buyerCode, setBuyerCode] = useState("");
   const [date, setDate] = useState("");
@@ -195,10 +197,10 @@ 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]">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 w-[100px]">{t.idSelect}</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>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-white/5">
@@ -365,7 +367,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                 }}
                 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
+                {t.analyze}
               </button>
             </div>
           </div>

frontend/lib/translations.ts

@@ -0,0 +1,76 @@
+export const translations = {
+  en: {
+    dashboard: "Dashboard",
+    tenderSearch: "Tender Search",
+    myPortfolio: "My Portfolio",
+    companyProfile: "Company Profile",
+    agentAnalysis: "Agent Analysis",
+    proposalDraft: "Proposal Draft",
+    reports: "Reports",
+    history: "History",
+    about: "About",
+    resumenEjecutivo: "Executive Summary",
+    andesOpsDesc: "Market intelligence and agentic analysis for public tenders.",
+    syncPipeline: "Sync Global Pipeline",
+    tendersFound: "Tenders Found",
+    activeOpps: "Active opportunities",
+    recommended: "Recommended",
+    highRisk: "High Risk",
+    totalPipeline: "Total Pipeline",
+    sectors: "Market Sectors",
+    regionalDist: "Regional Distribution",
+    deadlines: "Deadline Status",
+    integrityMonitor: "Data Integrity Monitor",
+    recentActivity: "Recent Pipeline Activity",
+    idSelect: "ID / Select",
+    opportunity: "Opportunity",
+    buyer: "Buyer",
+    status: "Status",
+    analyze: "Analyze",
+    esgScore: "ESG Compliance Rating",
+    environmental: "Environmental",
+    social: "Social",
+    governance: "Governance",
+    language: "Language",
+    ingesting: "INGESTING DOCUMENTS...",
+    analyzeSelected: "ANALYZE SELECTED",
+  },
+  es: {
+    dashboard: "Panel de Control",
+    tenderSearch: "Buscador de Licitaciones",
+    myPortfolio: "Mi Portafolio",
+    companyProfile: "Perfil de Empresa",
+    agentAnalysis: "Análisis Agéntico",
+    proposalDraft: "Borrador de Propuesta",
+    reports: "Reportes",
+    history: "Historial",
+    about: "Sistema",
+    resumenEjecutivo: "Resumen Ejecutivo",
+    andesOpsDesc: "Inteligencia de mercado y análisis de agentes para licitaciones públicas.",
+    syncPipeline: "Sincronizar Pipeline Global",
+    tendersFound: "Licitaciones Halladas",
+    activeOpps: "Oportunidades activas",
+    recommended: "Recomendadas",
+    highRisk: "Riesgo Alto",
+    totalPipeline: "Pipeline Total",
+    sectors: "Sectores de Mercado",
+    regionalDist: "Distribución Regional",
+    deadlines: "Estado de Plazos",
+    integrityMonitor: "Monitor de Integridad de Datos",
+    recentActivity: "Actividad Reciente",
+    idSelect: "ID / Selección",
+    opportunity: "Oportunidad",
+    buyer: "Comprador",
+    status: "Estado",
+    analyze: "Analizar",
+    esgScore: "Calificación de Cumplimiento ESG",
+    environmental: "Ambiental",
+    social: "Social",
+    governance: "Gobernanza",
+    language: "Idioma",
+    ingesting: "INGIRIENDO DOCUMENTOS...",
+    analyzeSelected: "ANALIZAR SELECCIONADOS",
+  }
+};
+
+export type Language = "en" | "es";