erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: organizar configuracoes em tabs (Personalizacao e Backup)

Browse Source
This commit is contained in:
Erik
2025-11-29 12:30:17 -03:00
parent 99530200b4
commit bf95f067bc
1 changed files with 194 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/app/admin/configuracoes/page.tsx
View File

@@ -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 */}
<div className="border-t-2 border-gray-200 dark:border-white/10 pt-12">
<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>
{/* Tab Content - Backup */}
{activeTab === 'backup' && (
<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>
);
}