refactor: organizar configuracoes em tabs (Personalizacao e Backup)

frontend/src/app/admin/configuracoes/page.tsx

@@ -17,6 +17,7 @@ const PRESET_COLORS = [
 
 export default function ConfiguracoesPage() {
   const { success, error: showError } = useToast();
+  const [activeTab, setActiveTab] = useState<'personalizacao' | 'backup'>('personalizacao');
   const [primaryColor, setPrimaryColor] = useState('#FF6B35');
   const [customColor, setCustomColor] = useState('#FF6B35');
   const [loading, setLoading] = useState(true);
@@ -88,10 +89,43 @@ export default function ConfiguracoesPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold font-headline text-secondary dark:text-white">Configurações</h1>
-          <p className="text-gray-500 dark:text-gray-400 mt-1">Personalize a aparência do seu site</p>
+          <p className="text-gray-500 dark:text-gray-400 mt-1">Gerencie as configurações do seu site</p>
         </div>
       </div>
 
+      {/* Tabs Navigation */}
+      <div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl overflow-hidden">
+        <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 ${
+              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'
+            }`}
+          >
+            <i className="ri-palette-line text-xl"></i>
+            <span className="hidden sm:inline">Personalização</span>
+            <span className="sm:hidden">Design</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 ${
+              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>
+            <span className="hidden sm:inline">Backup</span>
+            <span className="sm:hidden">Bkp</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Tab Content - Personalização */}
+      {activeTab === 'personalizacao' && (
+        <div className="space-y-6">
           {/* Color 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">
@@ -253,20 +287,15 @@ export default function ConfiguracoesPage() {
               </p>
             </div>
           </div>
+        </div>
+      )}
 
-      {/* Backup Manager Section */}
+      {/* Tab Content - Backup */}
-      <div className="border-t-2 border-gray-200 dark:border-white/10 pt-12">
+      {activeTab === 'backup' && (
-        <div className="flex items-center gap-4 mb-8">
-          <div className="w-12 h-12 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30">
-            <i className="ri-database-backup-line text-2xl text-white"></i>
-          </div>
         <div>
-            <h2 className="text-2xl font-bold font-headline text-secondary dark:text-white">Backup & Restauração</h2>
-            <p className="text-gray-500 dark:text-gray-400 mt-1">Gerencie backups completos do seu banco de dados e arquivos</p>
-          </div>
-        </div>
           <BackupManager />
         </div>
+      )}
     </div>
   );
 }