From 080444e29dae72d6abdba2b84e494ffb7b0f6b14 Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Sat, 29 Nov 2025 16:01:46 -0300
Subject: [PATCH] feat: Reorganize admin config tabs and sync contact info
 across pages

---
 frontend/src/app/(public)/contato/page.tsx    | 122 +++++++++++++-----
 frontend/src/app/[locale]/contato/page.tsx    | 121 ++++++++++++-----
 frontend/src/app/admin/configuracoes/page.tsx | 105 ++++++++++++---
 3 files changed, 262 insertions(+), 86 deletions(-)

diff --git a/frontend/src/app/(public)/contato/page.tsx b/frontend/src/app/(public)/contato/page.tsx
index f2f52ba..8ef2538 100644
--- a/frontend/src/app/(public)/contato/page.tsx
+++ b/frontend/src/app/(public)/contato/page.tsx
@@ -26,9 +26,17 @@ interface ContactContent {
   };
 }
 
+interface SettingsData {
+  address?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  whatsapp?: string | null;
+}
+
 export default function ContatoPage() {
   const { success, error: showError } = useToast();
   const [content, setContent] = useState<ContactContent | null>(null);
+  const [settings, setSettings] = useState<SettingsData>({});
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [formData, setFormData] = useState({
@@ -44,6 +52,7 @@ export default function ContatoPage() {
 
   useEffect(() => {
     fetchContent();
+    fetchSettings();
   }, []);
 
   const fetchContent = async () => {
@@ -62,6 +71,23 @@ export default function ContatoPage() {
     }
   };
 
+  const fetchSettings = async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (response.ok) {
+        const data = await response.json();
+        setSettings({
+          address: data.address,
+          phone: data.phone,
+          email: data.email,
+          whatsapp: data.whatsapp
+        });
+      }
+    } catch (error) {
+      console.error('Erro ao carregar configurações:', error);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitting(true);
@@ -103,31 +129,46 @@ export default function ContatoPage() {
     title: 'Informações',
     subtitle: 'Como nos encontrar',
     description: 'Estamos à disposição para atender sua empresa com a excelência técnica que seu projeto exige.',
-    items: [
-      {
-        icon: 'ri-whatsapp-line',
-        title: 'Telefone',
-        description: 'Atendimento de segunda a sexta, das 8h às 18h',
-        link: 'https://wa.me/5527999999999',
-        linkText: '(27) 99999-9999'
-      },
-      {
-        icon: 'ri-mail-send-line',
-        title: 'E-mail',
-        description: 'Responderemos em até 24 horas úteis',
-        link: 'mailto:contato@octto.com.br',
-        linkText: 'contato@octto.com.br'
-      },
-      {
-        icon: 'ri-map-pin-line',
-        title: 'Endereço',
-        description: 'Av. Nossa Senhora da Penha, 1234\nSanta Lúcia, Vitória - ES\nCEP: 29056-000',
-        link: 'https://maps.google.com',
-        linkText: 'Ver no mapa'
-      }
-    ]
+    items: [] as ContactInfo[]
   };
 
+  // Montar items dinamicamente baseado nas configurações
+  const contactItems: ContactInfo[] = [];
+  
+  if (settings.whatsapp || settings.phone) {
+    const phoneNumber = settings.whatsapp || settings.phone;
+    contactItems.push({
+      icon: 'ri-whatsapp-line',
+      title: 'Telefone',
+      description: 'Atendimento de segunda a sexta, das 8h às 18h',
+      link: settings.whatsapp ? `https://wa.me/55${settings.whatsapp.replace(/\D/g, '')}` : `tel:${phoneNumber?.replace(/\D/g, '')}`,
+      linkText: phoneNumber || ''
+    });
+  }
+  
+  if (settings.email) {
+    contactItems.push({
+      icon: 'ri-mail-send-line',
+      title: 'E-mail',
+      description: 'Responderemos em até 24 horas úteis',
+      link: `mailto:${settings.email}`,
+      linkText: settings.email
+    });
+  }
+  
+  if (settings.address) {
+    contactItems.push({
+      icon: 'ri-map-pin-line',
+      title: 'Endereço',
+      description: settings.address,
+      link: `https://maps.google.com/maps?q=${encodeURIComponent(settings.address)}`,
+      linkText: 'Ver no mapa'
+    });
+  }
+
+  // Usar items do CMS se existir, senão usar os dinâmicos
+  const displayItems = info.items?.length > 0 ? info.items : contactItems;
+
   return (
     <main className="bg-white dark:bg-secondary transition-colors duration-300">
       {/* Hero Section */}
@@ -165,20 +206,31 @@ export default function ContatoPage() {
               </div>
               
               <div className="space-y-6">
-                {info.items.map((item, index) => (
-                  <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
-                    <div className="flex items-start gap-5">
-                      <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
-                        <i className={`${item.icon} text-3xl`}></i>
-                      </div>
-                      <div>
-                        <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
-                        <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
-                        <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">
-                          {item.linkText} <i className="ri-arrow-right-line"></i>
-                        </a>
+                {displayItems.length > 0 ? (
+                  displayItems.map((item, index) => (
+                    <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
+                      <div className="flex items-start gap-5">
+                        <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
+                          <i className={`${item.icon} text-3xl`}></i>
+                        </div>
+                        <div>
+                          <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
+                          <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
+                          <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all cursor-pointer">
+                            {item.linkText} <i className="ri-arrow-right-line"></i>
+                          </a>
+                        </div>
                       </div>
                     </div>
+                  ))
+                ) : (
+                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                    <i className="ri-information-line text-4xl mb-2 block"></i>
+                    <p>Informações de contato não configuradas</p>
+                  </div>
+                )}
+              </div>
+                    </div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/app/[locale]/contato/page.tsx b/frontend/src/app/[locale]/contato/page.tsx
index 40d2a5e..0a74777 100644
--- a/frontend/src/app/[locale]/contato/page.tsx
+++ b/frontend/src/app/[locale]/contato/page.tsx
@@ -26,10 +26,18 @@ interface ContactContent {
   };
 }
 
+interface SettingsData {
+  address?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  whatsapp?: string | null;
+}
+
 export default function ContatoPage() {
   const { success, error: showError } = useToast();
   const { locale, t } = useLocale();
   const [content, setContent] = useState<ContactContent | null>(null);
+  const [settings, setSettings] = useState<SettingsData>({});
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [formData, setFormData] = useState({
@@ -42,6 +50,7 @@ export default function ContatoPage() {
 
   useEffect(() => {
     fetchContent();
+    fetchSettings();
   }, [locale]);
 
   const fetchContent = async () => {
@@ -61,6 +70,23 @@ export default function ContatoPage() {
     }
   };
 
+  const fetchSettings = async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (response.ok) {
+        const data = await response.json();
+        setSettings({
+          address: data.address,
+          phone: data.phone,
+          email: data.email,
+          whatsapp: data.whatsapp
+        });
+      }
+    } catch (error) {
+      console.error('Erro ao carregar configurações:', error);
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitting(true);
@@ -102,31 +128,46 @@ export default function ContatoPage() {
     title: t('contact.infoTitle'),
     subtitle: t('contact.infoSubtitle'),
     description: t('contact.infoDescription'),
-    items: [
-      {
-        icon: 'ri-whatsapp-line',
-        title: t('contact.phone'),
-        description: t('contact.phoneDescription'),
-        link: 'https://wa.me/5527999999999',
-        linkText: '(27) 99999-9999'
-      },
-      {
-        icon: 'ri-mail-send-line',
-        title: t('contact.email'),
-        description: t('contact.emailDescription'),
-        link: 'mailto:contato@octto.com.br',
-        linkText: 'contato@octto.com.br'
-      },
-      {
-        icon: 'ri-map-pin-line',
-        title: t('contact.address'),
-        description: t('contact.addressDescription'),
-        link: 'https://maps.google.com',
-        linkText: t('contact.viewOnMap')
-      }
-    ]
+    items: [] as ContactInfo[]
   };
 
+  // Montar items dinamicamente baseado nas configurações
+  const contactItems: ContactInfo[] = [];
+  
+  if (settings.whatsapp || settings.phone) {
+    const phoneNumber = settings.whatsapp || settings.phone;
+    contactItems.push({
+      icon: 'ri-whatsapp-line',
+      title: t('contact.phone'),
+      description: t('contact.phoneDescription'),
+      link: settings.whatsapp ? `https://wa.me/55${settings.whatsapp.replace(/\D/g, '')}` : `tel:${phoneNumber?.replace(/\D/g, '')}`,
+      linkText: phoneNumber || ''
+    });
+  }
+  
+  if (settings.email) {
+    contactItems.push({
+      icon: 'ri-mail-send-line',
+      title: t('contact.email'),
+      description: t('contact.emailDescription'),
+      link: `mailto:${settings.email}`,
+      linkText: settings.email
+    });
+  }
+  
+  if (settings.address) {
+    contactItems.push({
+      icon: 'ri-map-pin-line',
+      title: t('contact.address'),
+      description: settings.address,
+      link: `https://maps.google.com/maps?q=${encodeURIComponent(settings.address)}`,
+      linkText: t('contact.viewOnMap')
+    });
+  }
+
+  // Usar items do CMS se existir, senão usar os dinâmicos
+  const displayItems = info.items?.length > 0 ? info.items : contactItems;
+
   return (
     <main className="bg-white dark:bg-secondary transition-colors duration-300">
       {/* Hero Section */}
@@ -164,20 +205,30 @@ export default function ContatoPage() {
               </div>
               
               <div className="space-y-6">
-                {info.items.map((item, index) => (
-                  <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
-                    <div className="flex items-start gap-5">
-                      <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
-                        <i className={`${item.icon} text-3xl`}></i>
-                      </div>
-                      <div>
-                        <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
-                        <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
-                        <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all">
-                          {item.linkText} <i className="ri-arrow-right-line"></i>
-                        </a>
+                {displayItems.length > 0 ? (
+                  displayItems.map((item, index) => (
+                    <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
+                      <div className="flex items-start gap-5">
+                        <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
+                          <i className={`${item.icon} text-3xl`}></i>
+                        </div>
+                        <div>
+                          <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
+                          <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
+                          <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all cursor-pointer">
+                            {item.linkText} <i className="ri-arrow-right-line"></i>
+                          </a>
+                        </div>
                       </div>
                     </div>
+                  ))
+                ) : (
+                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                    <i className="ri-information-line text-4xl mb-2 block"></i>
+                    <p>{t('contact.noInfoConfigured')}</p>
+                  </div>
+                )}
+              </div>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/app/admin/configuracoes/page.tsx b/frontend/src/app/admin/configuracoes/page.tsx
index 175b8c9..1e8f72d 100644
--- a/frontend/src/app/admin/configuracoes/page.tsx
+++ b/frontend/src/app/admin/configuracoes/page.tsx
@@ -17,7 +17,7 @@ const PRESET_COLORS = [
 
 export default function ConfiguracoesPage() {
   const { success, error: showError } = useToast();
-  const [activeTab, setActiveTab] = useState<'personalizacao' | 'backup'>('personalizacao');
+  const [activeTab, setActiveTab] = useState<'personalizacao' | 'logotipo' | 'contato' | 'backup'>('personalizacao');
   const [primaryColor, setPrimaryColor] = useState('#FF6B35');
   const [customColor, setCustomColor] = useState('#FF6B35');
   const [showPartnerBadge, setShowPartnerBadge] = useState(false);
@@ -157,7 +157,7 @@ export default function ConfiguracoesPage() {
         <div className="flex gap-0">
           <button
             onClick={() => setActiveTab('personalizacao')}
-            className={`flex-1 px-6 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all ${
+            className={`flex-1 px-4 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all cursor-pointer ${
               activeTab === 'personalizacao'
                 ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
                 : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
@@ -165,17 +165,41 @@ export default function ConfiguracoesPage() {
           >
             <i className="ri-palette-line text-xl"></i>
             <span className="hidden sm:inline">Personalização</span>
-            <span className="sm:hidden">Design</span>
+            <span className="sm:hidden">Cores</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('logotipo')}
+            className={`flex-1 px-4 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all cursor-pointer ${
+              activeTab === 'logotipo'
+                ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
+                : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
+            }`}
+          >
+            <i className="ri-image-line text-xl"></i>
+            <span className="hidden sm:inline">Logotipo</span>
+            <span className="sm:hidden">Logo</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('contato')}
+            className={`flex-1 px-4 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all cursor-pointer ${
+              activeTab === 'contato'
+                ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
+                : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
+            }`}
+          >
+            <i className="ri-contacts-book-2-line text-xl"></i>
+            <span className="hidden sm:inline">Contato</span>
+            <span className="sm:hidden">Info</span>
           </button>
           <button
             onClick={() => setActiveTab('backup')}
-            className={`flex-1 px-6 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all ${
+            className={`flex-1 px-4 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all cursor-pointer ${
               activeTab === 'backup'
                 ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
                 : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
             }`}
           >
-            <i className="ri-database-backup-line text-xl"></i>
+            <i className="ri-database-2-line text-xl"></i>
             <span className="hidden sm:inline">Backup</span>
             <span className="sm:hidden">Bkp</span>
           </button>
@@ -413,13 +437,49 @@ export default function ConfiguracoesPage() {
             {/* Save Button */}
             <button
               onClick={handleSaveSettings}
-              className="w-full px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors shadow-lg shadow-primary/20 flex items-center justify-center gap-2"
+              className="w-full px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors shadow-lg shadow-primary/20 flex items-center justify-center gap-2 cursor-pointer"
             >
               <i className="ri-save-line"></i>
               Salvar Configurações do Badge
             </button>
           </div>
+        </div>
+      )}
 
+      {/* Tab Content - Logotipo */}
+      {activeTab === 'logotipo' && (
+        <div className="space-y-6">
+          <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="w-12 h-12 bg-linear-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30">
+                <i className="ri-image-2-fill text-2xl text-white"></i>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-secondary dark:text-white mb-1">Logotipo</h2>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                  Configure o logotipo que aparece no cabeçalho e rodapé do site.
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4 flex items-start gap-3">
+              <i className="ri-tools-fill text-amber-600 dark:text-amber-400 text-xl mt-0.5"></i>
+              <div className="flex-1">
+                <p className="text-sm text-amber-900 dark:text-amber-200 font-medium mb-1">
+                  Em Desenvolvimento
+                </p>
+                <p className="text-sm text-amber-700 dark:text-amber-300">
+                  A funcionalidade de upload de logotipo estará disponível em breve.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tab Content - Contato */}
+      {activeTab === 'contato' && (
+        <div className="space-y-6">
           {/* Contact Information Settings */}
           <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
             <div className="flex items-start gap-4 mb-6">
@@ -429,7 +489,7 @@ export default function ConfiguracoesPage() {
               <div className="flex-1">
                 <h2 className="text-xl font-bold text-secondary dark:text-white mb-1">Informações de Contato</h2>
                 <p className="text-gray-500 dark:text-gray-400 text-sm">
-                  Configure as informações de contato que aparecem no rodapé do site.
+                  Configure as informações de contato que aparecem na página de contato e no rodapé do site.
                 </p>
               </div>
             </div>
@@ -557,16 +617,29 @@ export default function ConfiguracoesPage() {
                 />
               </div>
             </div>
-
-            {/* Save All Settings Button */}
-            <button
-              onClick={handleSaveSettings}
-              className="w-full mt-6 px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors shadow-lg shadow-primary/20 flex items-center justify-center gap-2"
-            >
-              <i className="ri-save-line"></i>
-              Salvar Informações de Contato
-            </button>
           </div>
+
+          {/* Info Alert */}
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 flex items-start gap-3">
+            <i className="ri-information-line text-blue-600 dark:text-blue-400 text-xl mt-0.5"></i>
+            <div className="flex-1">
+              <p className="text-sm text-blue-900 dark:text-blue-200 font-medium mb-1">
+                Sincronização Automática
+              </p>
+              <p className="text-sm text-blue-700 dark:text-blue-300">
+                Estas informações serão exibidas automaticamente na página de contato e no rodapé do site.
+              </p>
+            </div>
+          </div>
+
+          {/* Save All Settings Button */}
+          <button
+            onClick={handleSaveSettings}
+            className="w-full px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors shadow-lg shadow-primary/20 flex items-center justify-center gap-2 cursor-pointer"
+          >
+            <i className="ri-save-line"></i>
+            Salvar Informações de Contato
+          </button>
         </div>
       )}