refactor: redesign planos interface with design system patterns

- Create CreatePlanModal component with Headless UI Dialog
- Implement dark mode support throughout plans UI
- Update plans/page.tsx with professional card layout
- Update plans/[id]/page.tsx with consistent styling
- Add proper spacing, typography, and color consistency
- Implement smooth animations and transitions
- Add success/error message feedback
- Improve form UX with better input styling
This commit is contained in:
Erik Silva
2025-12-13 19:26:38 -03:00
parent 2f1cf2bb2a
commit 2a112f169d
26 changed files with 2580 additions and 119 deletions

View File

@@ -127,9 +127,6 @@ export default function ConfiguracoesPage() {
if (response.ok) {
const data = await response.json();
console.log('DEBUG: API response data:', data);
console.log('DEBUG: logo_url:', data.logo_url);
console.log('DEBUG: logo_horizontal_url:', data.logo_horizontal_url);
const parsedAddress = parseAddressParts(data.address || '');
setAgencyData({
@@ -150,21 +147,26 @@ export default function ConfiguracoesPage() {
description: data.description || '',
industry: data.industry || '',
teamSize: data.team_size || '',
logoUrl: data.logo_url || '',
logoHorizontalUrl: data.logo_horizontal_url || '',
logoUrl: data.logo_url || localStorage.getItem('agency-logo-url') || '',
logoHorizontalUrl: data.logo_horizontal_url || localStorage.getItem('agency-logo-horizontal-url') || '',
primaryColor: data.primary_color || '#ff3a05',
secondaryColor: data.secondary_color || '#ff0080',
});
// Set logo previews
console.log('DEBUG: Setting previews...');
if (data.logo_url) {
console.log('DEBUG: Setting logoPreview to:', data.logo_url);
setLogoPreview(data.logo_url);
// Set logo previews - usar localStorage como fallback se API não retornar
const cachedLogo = localStorage.getItem('agency-logo-url');
const cachedHorizontal = localStorage.getItem('agency-logo-horizontal-url');
const finalLogoUrl = data.logo_url || cachedLogo;
const finalHorizontalUrl = data.logo_horizontal_url || cachedHorizontal;
if (finalLogoUrl) {
setLogoPreview(finalLogoUrl);
localStorage.setItem('agency-logo-url', finalLogoUrl);
}
if (data.logo_horizontal_url) {
console.log('DEBUG: Setting logoHorizontalPreview to:', data.logo_horizontal_url);
setLogoHorizontalPreview(data.logo_horizontal_url);
if (finalHorizontalUrl) {
setLogoHorizontalPreview(finalHorizontalUrl);
localStorage.setItem('agency-logo-horizontal-url', finalHorizontalUrl);
}
} else {
console.error('Erro ao buscar dados:', response.status);
@@ -403,8 +405,25 @@ export default function ConfiguracoesPage() {
// Atualiza localStorage imediatamente para persistência instantânea
localStorage.setItem('agency-primary-color', agencyData.primaryColor);
localStorage.setItem('agency-secondary-color', agencyData.secondaryColor);
if (agencyData.logoUrl) localStorage.setItem('agency-logo-url', agencyData.logoUrl);
if (agencyData.logoHorizontalUrl) localStorage.setItem('agency-logo-horizontal-url', agencyData.logoHorizontalUrl);
// Preservar logos no localStorage (não sobrescrever com valores vazios)
// Logos são gerenciados separadamente via upload
const currentLogoCache = localStorage.getItem('agency-logo-url');
const currentHorizontalCache = localStorage.getItem('agency-logo-horizontal-url');
// Só atualizar se temos valores novos no estado
if (agencyData.logoUrl) {
localStorage.setItem('agency-logo-url', agencyData.logoUrl);
} else if (!currentLogoCache && logoPreview) {
// Se não tem cache mas tem preview, usar o preview
localStorage.setItem('agency-logo-url', logoPreview);
}
if (agencyData.logoHorizontalUrl) {
localStorage.setItem('agency-logo-horizontal-url', agencyData.logoHorizontalUrl);
} else if (!currentHorizontalCache && logoHorizontalPreview) {
localStorage.setItem('agency-logo-horizontal-url', logoHorizontalPreview);
}
// Disparar evento para atualizar o tema em tempo real
window.dispatchEvent(new Event('branding-update'));