feat: CMS com limites de caracteres, traduções auto e painel de notificações

frontend/src/components/Footer.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import Link from 'next/link';
-import { useLanguage } from '@/contexts/LanguageContext';
-import { T } from '@/components/TranslatedText';
+import { useLocale } from '@/contexts/LocaleContext';
 
 export default function Footer() {
-  const { t } = useLanguage();
+  const { locale, t } = useLocale();
+  
+  // Prefixo para links
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
 
   return (
     <footer className="bg-secondary text-white pt-16 pb-8">
@@ -21,12 +23,12 @@ export default function Footer() {
               </div>
             </div>
             <p className="text-gray-400 mb-6">
-              <T>Soluções em engenharia mecânica e segurança para movimentação de carga.</T>
+              {t('footer.description')}
             </p>
             
             <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-3 py-2 mb-6">
               <i className="ri-verified-badge-fill text-primary"></i>
-              <span className="text-xs font-bold text-gray-300 uppercase tracking-wide"><T>Prestador Oficial</T> <span className="text-primary">Coca-Cola</span></span>
+              <span className="text-xs font-bold text-gray-300 uppercase tracking-wide">{t('home.officialProvider')} <span className="text-primary">Coca-Cola</span></span>
             </div>
 
             <div className="flex gap-4">
@@ -44,30 +46,30 @@ export default function Footer() {
 
           {/* Links */}
           <div>
-            <h3 className="text-lg font-bold font-headline mb-6"><T>Links Rápidos</T></h3>
+            <h3 className="text-lg font-bold font-headline mb-6">{t('footer.quickLinks')}</h3>
             <ul className="space-y-4">
-              <li><Link href="/" className="text-gray-400 hover:text-primary transition-colors"><T>{t('nav.home')}</T></Link></li>
-              <li><Link href="/sobre" className="text-gray-400 hover:text-primary transition-colors"><T>{t('nav.about')}</T></Link></li>
-              <li><Link href="/servicos" className="text-gray-400 hover:text-primary transition-colors"><T>{t('nav.services')}</T></Link></li>
-              <li><Link href="/projetos" className="text-gray-400 hover:text-primary transition-colors"><T>{t('nav.projects')}</T></Link></li>
-              <li><Link href="/contato" className="text-gray-400 hover:text-primary transition-colors"><T>{t('nav.contact')}</T></Link></li>
+              <li><Link href={`${prefix}/`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.home')}</Link></li>
+              <li><Link href={`${prefix}/sobre`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.about')}</Link></li>
+              <li><Link href={`${prefix}/servicos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.services')}</Link></li>
+              <li><Link href={`${prefix}/projetos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.projects')}</Link></li>
+              <li><Link href={`${prefix}/contato`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.contact')}</Link></li>
             </ul>
           </div>
 
           {/* Services */}
           <div>
-            <h3 className="text-lg font-bold font-headline mb-6"><T>{t('services.title')}</T></h3>
+            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.services')}</h3>
             <ul className="space-y-4">
-              <li className="text-gray-400"><T>Projetos de Dispositivos</T></li>
-              <li className="text-gray-400"><T>Engenharia de Implementos</T></li>
-              <li className="text-gray-400"><T>Inspeção de Equipamentos</T></li>
-              <li className="text-gray-400"><T>Laudos Técnicos (NR-11/12)</T></li>
+              <li className="text-gray-400">{t('services.deviceProjects')}</li>
+              <li className="text-gray-400">{t('services.implementEngineering')}</li>
+              <li className="text-gray-400">{t('services.equipmentInspection')}</li>
+              <li className="text-gray-400">{t('services.technicalReports')}</li>
             </ul>
           </div>
 
           {/* Contact */}
           <div>
-            <h3 className="text-lg font-bold font-headline mb-6"><T>{t('nav.contact')}</T></h3>
+            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.contact')}</h3>
             <ul className="space-y-4">
               <li className="flex items-start gap-3 text-gray-400">
                 <i className="ri-map-pin-line mt-1 text-primary"></i>
@@ -87,11 +89,11 @@ export default function Footer() {
 
         <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
           <p className="text-gray-500 text-sm">
-            © {new Date().getFullYear()} OCCTO Engenharia. <T>{t('footer.rights')}</T>
+            © {new Date().getFullYear()} OCCTO Engenharia. {t('footer.rights')}
           </p>
           <div className="flex gap-6 text-sm text-gray-500">
-            <Link href="/privacidade" className="hover:text-white"><T>Política de Privacidade</T></Link>
-            <Link href="/termos" className="hover:text-white"><T>Termos de Uso</T></Link>
+            <Link href={`${prefix}/privacidade`} className="hover:text-white">{t('footer.privacyPolicy')}</Link>
+            <Link href={`${prefix}/termos`} className="hover:text-white">{t('footer.termsOfUse')}</Link>
           </div>
         </div>
       </div>

frontend/src/components/Header.tsx

@@ -3,16 +3,19 @@
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { useTheme } from "next-themes";
-import { useLanguage } from '@/contexts/LanguageContext';
-import { T } from '@/components/TranslatedText';
+import { useLocale } from '@/contexts/LocaleContext';
+import { localeFlags, localeNames, type Locale } from '@/lib/i18n';
 
 export default function Header() {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const { theme, setTheme } = useTheme();
-  const { language, setLanguage, t } = useLanguage();
+  const { locale, setLocale, t } = useLocale();
   const [mounted, setMounted] = useState(false);
 
+  // Prefixo para links baseado no locale
+  const prefix = locale === 'pt' ? '' : `/${locale}`;
+
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -33,17 +36,10 @@ export default function Header() {
     setTheme(theme === 'dark' ? 'light' : 'dark');
   };
 
-  const cycleLanguage = () => {
-    const langs: ('PT' | 'EN' | 'ES')[] = ['PT', 'EN', 'ES'];
-    const currentIndex = langs.indexOf(language);
-    const nextIndex = (currentIndex + 1) % langs.length;
-    setLanguage(langs[nextIndex]);
-  };
-
   return (
     <header className="w-full bg-white dark:bg-secondary shadow-sm sticky top-0 z-50 transition-colors duration-300">
       <div className="container mx-auto px-4 h-20 flex items-center justify-between gap-4">
-        <Link href="/" className="flex items-center gap-3 shrink-0 group mr-auto z-50 relative">
+        <Link href={`${prefix}/`} className="flex items-center gap-3 shrink-0 group mr-auto z-50 relative">
           <i className="ri-building-2-fill text-4xl text-primary group-hover:scale-105 transition-transform"></i>
           <div className="flex items-center gap-2">
             <span className="text-3xl font-bold text-secondary dark:text-white font-headline leading-none">OCCTO</span>
@@ -67,35 +63,35 @@ export default function Header() {
           </div>
 
           <nav className="flex items-center gap-6 mr-4">
-            <Link href="/" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-home-4-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.home')}</T></span>
+              <span className="hidden lg:inline">{t('nav.home')}</span>
             </Link>
-            <Link href="/servicos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/servicos`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-tools-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.services')}</T></span>
+              <span className="hidden lg:inline">{t('nav.services')}</span>
             </Link>
-            <Link href="/projetos" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/projetos`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-briefcase-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.projects')}</T></span>
+              <span className="hidden lg:inline">{t('nav.projects')}</span>
             </Link>
-            <Link href="/contato" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/contato`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-mail-send-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.contact')}</T></span>
+              <span className="hidden lg:inline">{t('nav.contact')}</span>
             </Link>
-            <Link href="/sobre" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
+            <Link href={`${prefix}/sobre`} className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors group">
               <i className="ri-user-line text-lg group-hover:scale-110 transition-transform"></i>
-              <span className="hidden lg:inline"><T>{t('nav.about')}</T></span>
+              <span className="hidden lg:inline">{t('nav.about')}</span>
             </Link>
           </nav>
 
           <div className="shrink-0 ml-2">
             <Link 
-              href="/contato" 
+              href={`${prefix}/contato`} 
               className="px-6 py-2.5 bg-primary text-white rounded-lg font-bold hover-primary transition-colors flex items-center gap-2"
             >
               <i className="ri-whatsapp-line"></i>
-              <span className="hidden xl:inline"><T>{t('nav.contact_us')}</T></span>
+              <span className="hidden xl:inline">{t('nav.contactUs')}</span>
             </Link>
           </div>
 
@@ -119,24 +115,24 @@ export default function Header() {
                 className="h-10 px-3 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center gap-2 text-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-white/20 transition-colors font-bold text-sm cursor-pointer"
                 aria-label="Alterar idioma"
               >
-                <span>{language === 'PT' ? '🇧🇷' : language === 'EN' ? '🇺🇸' : '🇪🇸'}</span>
-                <span>{language}</span>
+                <span>{localeFlags[locale]}</span>
+                <span>{locale.toUpperCase()}</span>
                 <i className="ri-arrow-down-s-line text-xs opacity-50"></i>
               </button>
               
               <div className="absolute top-full right-0 pt-2 w-32 hidden group-hover:block animate-in fade-in slide-in-from-top-2 duration-200">
                 <div className="bg-white dark:bg-secondary rounded-xl shadow-xl border border-gray-100 dark:border-white/10 overflow-hidden">
-                  <button onClick={() => setLanguage('PT')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇧🇷</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Português</span>
+                  <button onClick={() => setLocale('pt')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.pt}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.pt}</span>
                   </button>
-                  <button onClick={() => setLanguage('EN')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇺🇸</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">English</span>
+                  <button onClick={() => setLocale('en')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.en}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.en}</span>
                   </button>
-                  <button onClick={() => setLanguage('ES')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
-                    <span className="text-lg">🇪🇸</span>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Español</span>
+                  <button onClick={() => setLocale('es')} className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-3 transition-colors cursor-pointer">
+                    <span className="text-lg">{localeFlags.es}</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">{localeNames.es}</span>
                   </button>
                 </div>
               </div>
@@ -167,43 +163,43 @@ export default function Header() {
           </div>
 
           <nav className="flex flex-col gap-4 text-base font-medium">
-            <Link href="/" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-home-4-line text-primary text-lg"></i>
-              <T>{t('nav.home')}</T>
+              {t('nav.home')}
             </Link>
-            <Link href="/servicos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/servicos`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-tools-line text-primary text-lg"></i>
-              <T>{t('nav.services')}</T>
+              {t('nav.services')}
             </Link>
-            <Link href="/projetos" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/projetos`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-briefcase-line text-primary text-lg"></i>
-              <T>{t('nav.projects')}</T>
+              {t('nav.projects')}
             </Link>
-            <Link href="/contato" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/contato`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-mail-send-line text-primary text-lg"></i>
-              <T>{t('nav.contact')}</T>
+              {t('nav.contact')}
             </Link>
-            <Link href="/sobre" onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
+            <Link href={`${prefix}/sobre`} onClick={() => setIsMobileMenuOpen(false)} className="flex items-center gap-3 py-2 border-b border-gray-100 dark:border-white/10 text-secondary dark:text-white">
               <i className="ri-user-line text-primary text-lg"></i>
-              <T>{t('nav.about')}</T>
+              {t('nav.about')}
             </Link>
           </nav>
 
           <div className="mt-6 flex flex-col gap-4 pb-8 shrink-0">
             <Link 
-              href="/contato" 
+              href={`${prefix}/contato`} 
               onClick={() => setIsMobileMenuOpen(false)}
               className="w-full py-4 bg-primary text-white rounded-xl font-bold text-center flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
             >
               <i className="ri-whatsapp-line text-xl"></i>
-              <T>{t('nav.contact_us')}</T>
+              {t('nav.contactUs')}
             </Link>
 
             <div 
               className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
               onClick={toggleTheme}
             >
-              <span className="text-sm font-bold text-gray-500 dark:text-gray-400"><T>{t('nav.theme')}</T></span>
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.theme')}</span>
               <button 
                 className="w-10 h-10 rounded-full bg-white dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-yellow-400 shadow-sm transition-colors"
               >
@@ -216,11 +212,11 @@ export default function Header() {
             </div>
 
             <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl">
-              <span className="text-sm font-bold text-gray-500 dark:text-gray-400"><T>{t('nav.language')}</T></span>
+              <span className="text-sm font-bold text-gray-500 dark:text-gray-400">{t('nav.language')}</span>
               <div className="flex gap-2">
-                <button onClick={() => setLanguage('PT')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'PT' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇧🇷</button>
-                <button onClick={() => setLanguage('EN')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'EN' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇺🇸</button>
-                <button onClick={() => setLanguage('ES')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${language === 'ES' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>🇪🇸</button>
+                <button onClick={() => setLocale('pt')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'pt' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.pt}</button>
+                <button onClick={() => setLocale('en')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'en' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.en}</button>
+                <button onClick={() => setLocale('es')} className={`w-10 h-10 rounded-lg flex items-center justify-center text-xl cursor-pointer transition-all ${locale === 'es' ? 'bg-white dark:bg-white/10 shadow-sm scale-110' : 'opacity-50 hover:opacity-100'}`}>{localeFlags.es}</button>
               </div>
             </div>
           </div>

frontend/src/components/TranslatedText.tsx

@@ -1,17 +1,18 @@
 'use client';
 
-import { useEffect, useState, ReactNode } from 'react';
-import { useLanguage, Language } from '@/contexts/LanguageContext';
+import { useEffect, useState, ReactNode, useRef, useMemo } from 'react';
+import { useLocale } from '@/contexts/LocaleContext';
 
 // Cache global de traduções
 const translationCache = new Map<string, string>();
 
-// Função para traduzir texto via API
+// Função para traduzir texto via API (requisição individual)
 async function translateText(text: string, targetLang: string): Promise<string> {
   if (!text || text.trim() === '') return text;
   
   const cacheKey = `pt:${targetLang}:${text}`;
   
+  // Cache hit: retorna imediatamente
   if (translationCache.has(cacheKey)) {
     return translationCache.get(cacheKey)!;
   }
@@ -30,14 +31,78 @@ async function translateText(text: string, targetLang: string): Promise<string>
       return translated;
     }
   } catch (error) {
-    console.error('Translation error:', error);
+    console.error('[T] Translation error:', error);
   }
 
   return text;
 }
 
+// Função para traduzir múltiplos textos de uma vez (BATCH - muito mais rápido)
+async function translateBatchTexts(texts: string[], targetLang: string): Promise<string[]> {
+  if (!texts.length) return texts;
+  
+  // Verificar quais já estão em cache
+  const results: string[] = new Array(texts.length);
+  const toTranslate: { index: number; text: string }[] = [];
+  
+  texts.forEach((text, i) => {
+    if (!text || text.trim() === '') {
+      results[i] = text || '';
+      return;
+    }
+    
+    const cacheKey = `pt:${targetLang}:${text}`;
+    if (translationCache.has(cacheKey)) {
+      results[i] = translationCache.get(cacheKey)!;
+    } else {
+      toTranslate.push({ index: i, text });
+    }
+  });
+  
+  // Se todos estão em cache, retorna direto
+  if (toTranslate.length === 0) {
+    return results;
+  }
+  
+  // Traduzir os que faltam via batch API
+  try {
+    const response = await fetch('/api/translate', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 
+        texts: toTranslate.map(t => t.text), 
+        source: 'pt', 
+        target: targetLang 
+      }),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      const translations = data.translations || [];
+      
+      toTranslate.forEach((item, idx) => {
+        const translated = translations[idx] || item.text;
+        results[item.index] = translated;
+        translationCache.set(`pt:${targetLang}:${item.text}`, translated);
+      });
+    } else {
+      // Fallback: usar textos originais
+      toTranslate.forEach(item => {
+        results[item.index] = item.text;
+      });
+    }
+  } catch (error) {
+    console.error('[T] Batch translation error:', error);
+    toTranslate.forEach(item => {
+      results[item.index] = item.text;
+    });
+  }
+  
+  return results;
+}
+
 interface AutoTranslateProps {
-  children: string;
+  children: ReactNode;
   as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'li' | 'label';
   className?: string;
 }
@@ -47,28 +112,59 @@ interface AutoTranslateProps {
  * Uso: <T>Texto em português</T>
  */
 export function T({ children, as = 'span', className }: AutoTranslateProps) {
-  const { language } = useLanguage();
-  const [translatedText, setTranslatedText] = useState(children);
+  const { locale } = useLocale();
+  
+  // Converter children para string de forma estável
+  const originalText = useMemo(() => {
+    return typeof children === 'string' ? children : String(children || '');
+  }, [children]);
+  
+  const [translatedText, setTranslatedText] = useState(originalText);
+  const lastTranslatedRef = useRef<{ text: string; lang: string } | null>(null);
 
   useEffect(() => {
-    if (language === 'PT') {
-      setTranslatedText(children);
+    console.log('[T] useEffect - locale:', locale, 'text:', originalText.substring(0, 20));
+    
+    // Se idioma é PT, mostrar texto original
+    if (locale === 'pt') {
+      setTranslatedText(originalText);
+      lastTranslatedRef.current = null;
       return;
     }
 
-    let cancelled = false;
-    const targetLang = language.toLowerCase();
+    // Evitar tradução duplicada
+    if (
+      lastTranslatedRef.current?.text === originalText &&
+      lastTranslatedRef.current?.lang === locale
+    ) {
+      console.log('[T] Pulando - já traduzido');
+      return;
+    }
 
-    translateText(children, targetLang).then((result) => {
+    // Verificar cache primeiro (síncrono)
+    const cacheKey = `pt:${locale}:${originalText}`;
+    if (translationCache.has(cacheKey)) {
+      console.log('[T] Cache hit:', originalText.substring(0, 20));
+      setTranslatedText(translationCache.get(cacheKey)!);
+      lastTranslatedRef.current = { text: originalText, lang: locale };
+      return;
+    }
+
+    console.log('[T] Chamando API para:', originalText.substring(0, 20));
+    let cancelled = false;
+
+    translateText(originalText, locale).then((result) => {
+      console.log('[T] Resultado:', result.substring(0, 20));
       if (!cancelled) {
         setTranslatedText(result);
+        lastTranslatedRef.current = { text: originalText, lang: locale };
       }
     });
 
     return () => {
       cancelled = true;
     };
-  }, [children, language]);
+  }, [originalText, locale]);
 
   const Tag = as;
   return <Tag className={className}>{translatedText}</Tag>;
@@ -81,15 +177,15 @@ export const AutoTranslate = T;
  * Hook para traduzir texto programaticamente
  */
 export function useTranslate() {
-  const { language } = useLanguage();
+  const { locale } = useLocale();
   const [isTranslating, setIsTranslating] = useState(false);
 
   const translate = async (text: string): Promise<string> => {
-    if (!text || language === 'PT') return text;
+    if (!text || locale === 'pt') return text;
 
     setIsTranslating(true);
     try {
-      const result = await translateText(text, language.toLowerCase());
+      const result = await translateText(text, locale);
       return result;
     } finally {
       setIsTranslating(false);
@@ -97,12 +193,12 @@ export function useTranslate() {
   };
 
   const translateBatch = async (texts: string[]): Promise<string[]> => {
-    if (language === 'PT') return texts;
+    if (locale === 'pt') return texts;
 
     setIsTranslating(true);
     try {
       const results = await Promise.all(
-        texts.map(text => translateText(text, language.toLowerCase()))
+        texts.map(text => translateText(text, locale))
       );
       return results;
     } finally {
@@ -110,7 +206,7 @@ export function useTranslate() {
     }
   };
 
-  return { translate, translateBatch, isTranslating, language };
+  return { translate, translateBatch, isTranslating, locale };
 }
 
 /**
@@ -120,18 +216,18 @@ export function useTranslatedContent<T extends Record<string, unknown>>(content:
   translatedContent: T | null;
   isTranslating: boolean;
 } {
-  const { language } = useLanguage();
+  const { locale } = useLocale();
   const [translatedContent, setTranslatedContent] = useState<T | null>(content);
   const [isTranslating, setIsTranslating] = useState(false);
 
   useEffect(() => {
-    if (!content || language === 'PT') {
+    if (!content || locale === 'pt') {
       setTranslatedContent(content);
       return;
     }
 
     let cancelled = false;
-    const targetLang = language.toLowerCase();
+    const targetLang = locale;
 
     const translateContent = async () => {
       setIsTranslating(true);
@@ -199,7 +295,7 @@ export function useTranslatedContent<T extends Record<string, unknown>>(content:
     return () => {
       cancelled = true;
     };
-  }, [content, language]);
+  }, [content, locale]);
 
   return { translatedContent, isTranslating };
 }

frontend/src/components/admin/CharLimitBadge.tsx

@@ -0,0 +1,24 @@
+type CharLimitBadgeProps = {
+  value?: string | null;
+  limit: number;
+};
+
+export function CharLimitBadge({ value = '', limit }: CharLimitBadgeProps) {
+  const current = value?.length ?? 0;
+  const percentage = Math.min((current / limit) * 100, 100);
+  const isNearLimit = current > limit * 0.85;
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className={`text-[11px] font-semibold tracking-wide ${isNearLimit ? 'text-red-500' : 'text-gray-400 dark:text-gray-500'}`}>
+        {current}/{limit}
+      </span>
+      <div className="w-16 h-1.5 rounded-full bg-gray-200 dark:bg-white/10 overflow-hidden">
+        <div
+          className={`h-full rounded-full ${isNearLimit ? 'bg-red-500' : 'bg-primary'}`}
+          style={{ width: `${percentage}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+}