erik/aggios.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign planos interface with design system patterns

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

49
front-end-agency/app/(agency)/configuracoes/page.tsx
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'));

2
front-end-agency/app/globals.css
View File

@@ -47,7 +47,7 @@ html.dark {
@layer base {
* {
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif;
}
a,

19
front-end-agency/app/layout.tsx
View File

@@ -1,12 +1,12 @@
import type { Metadata } from "next";
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
import { Arimo, Open_Sans, Fira_Code } from "next/font/google";
import "./globals.css";
import LayoutWrapper from "./LayoutWrapper";
import { ThemeProvider } from "next-themes";
import { getAgencyLogo } from "@/lib/server-api";
const inter = Inter({
variable: "--font-inter",
const arimo = Arimo({
variable: "--font-arimo",
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
});
@@ -26,13 +26,18 @@ const firaCode = Fira_Code({
export async function generateMetadata(): Promise<Metadata> {
const logoUrl = await getAgencyLogo();
// Adicionar timestamp para forçar atualização do favicon
const faviconUrl = logoUrl
? `${logoUrl}?v=${Date.now()}`
: '/favicon.ico';
return {
title: "Aggios - Dashboard",
description: "Plataforma SaaS para agências digitais",
icons: {
icon: logoUrl || '/favicon.ico',
shortcut: logoUrl || '/favicon.ico',
apple: logoUrl || '/favicon.ico',
icon: faviconUrl,
shortcut: faviconUrl,
apple: faviconUrl,
},
};
}
@@ -47,7 +52,7 @@ export default function RootLayout({
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
</head>
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`} suppressHydrationWarning>
<body className={`${arimo.variable} ${openSans.variable} ${firaCode.variable} antialiased`} suppressHydrationWarning>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
<LayoutWrapper>
{children}