chore: snapshot before agency split
This commit is contained in:
@@ -22,19 +22,31 @@ const tabs = [
|
||||
];
|
||||
|
||||
const themePresets = [
|
||||
{ name: 'Laranja/Rosa', gradient: 'linear-gradient(90deg, #FF3A05, #FF0080)', colors: ['#FF3A05', '#FF0080'] },
|
||||
{ name: 'Azul/Roxo', gradient: 'linear-gradient(90deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
|
||||
{ name: 'Verde/Esmeralda', gradient: 'linear-gradient(90deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
|
||||
{ name: 'Ciano/Azul', gradient: 'linear-gradient(90deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
|
||||
{ name: 'Rosa/Roxo', gradient: 'linear-gradient(90deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
|
||||
{ name: 'Vermelho/Laranja', gradient: 'linear-gradient(90deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
|
||||
{ name: 'Marca', gradient: 'linear-gradient(135deg, #ff3a05, #ff0080)', colors: ['#ff3a05', '#ff0080'] },
|
||||
{ name: 'Azul/Roxo', gradient: 'linear-gradient(135deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
|
||||
{ name: 'Verde/Esmeralda', gradient: 'linear-gradient(135deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
|
||||
{ name: 'Ciano/Azul', gradient: 'linear-gradient(135deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
|
||||
{ name: 'Rosa/Roxo', gradient: 'linear-gradient(135deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
|
||||
{ name: 'Vermelho/Laranja', gradient: 'linear-gradient(135deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
|
||||
];
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
const THEME_STORAGE_PREFIX = 'agency-theme:';
|
||||
|
||||
const setThemeVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
export default function ConfiguracoesPage() {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const [selectedTheme, setSelectedTheme] = useState(0);
|
||||
const [customColor1, setCustomColor1] = useState('#FF3A05');
|
||||
const [customColor2, setCustomColor2] = useState('#FF0080');
|
||||
const [activeGradient, setActiveGradient] = useState(DEFAULT_GRADIENT);
|
||||
const [themeKey, setThemeKey] = useState('default');
|
||||
const [customColor1, setCustomColor1] = useState('#ff3a05');
|
||||
const [customColor2, setCustomColor2] = useState('#ff0080');
|
||||
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState('');
|
||||
const [showSupportDialog, setShowSupportDialog] = useState(false);
|
||||
@@ -64,7 +76,7 @@ export default function ConfiguracoesPage() {
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
// Buscar dados da agência da API
|
||||
// Buscar dados da agência da API e inicializar tema salvo
|
||||
useEffect(() => {
|
||||
const fetchAgencyData = async () => {
|
||||
try {
|
||||
@@ -78,6 +90,24 @@ export default function ConfiguracoesPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
const parsedUser = JSON.parse(userData);
|
||||
const hostname = window.location.hostname;
|
||||
const hostSubdomain = hostname.split('.')[0] || 'default';
|
||||
const key = parsedUser?.subdomain || parsedUser?.tenantId || hostSubdomain;
|
||||
|
||||
setThemeKey(key);
|
||||
|
||||
const savedGradient = localStorage.getItem(`${THEME_STORAGE_PREFIX}${key}`) || DEFAULT_GRADIENT;
|
||||
setActiveGradient(savedGradient);
|
||||
setThemeVariables(savedGradient);
|
||||
|
||||
const presetIndex = themePresets.findIndex((theme) => theme.gradient === savedGradient);
|
||||
if (presetIndex >= 0) {
|
||||
setSelectedTheme(presetIndex);
|
||||
setCustomColor1(themePresets[presetIndex].colors[0]);
|
||||
setCustomColor2(themePresets[presetIndex].colors[1]);
|
||||
}
|
||||
|
||||
// Buscar dados da API
|
||||
const response = await fetch('/api/agency/profile', {
|
||||
headers: {
|
||||
@@ -138,14 +168,13 @@ export default function ConfiguracoesPage() {
|
||||
}, []);
|
||||
|
||||
const applyTheme = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
setActiveGradient(gradient);
|
||||
setThemeVariables(gradient);
|
||||
};
|
||||
|
||||
const applyCustomTheme = () => {
|
||||
const gradient = `linear-gradient(90deg, ${customColor1}, ${customColor2})`;
|
||||
setSelectedTheme(-1);
|
||||
applyTheme(gradient);
|
||||
};
|
||||
|
||||
@@ -193,9 +222,15 @@ export default function ConfiguracoesPage() {
|
||||
};
|
||||
|
||||
const handleSaveTheme = () => {
|
||||
// TODO: Integrar com API para salvar no banco
|
||||
const selectedGradient = themePresets[selectedTheme].gradient;
|
||||
console.log('Salvando tema:', selectedGradient);
|
||||
const gradientToSave = selectedTheme >= 0
|
||||
? themePresets[selectedTheme].gradient
|
||||
: activeGradient;
|
||||
|
||||
applyTheme(gradientToSave);
|
||||
if (themeKey) {
|
||||
localStorage.setItem(`${THEME_STORAGE_PREFIX}${themeKey}`, gradientToSave);
|
||||
}
|
||||
|
||||
setSuccessMessage('Tema salvo com sucesso!');
|
||||
setShowSuccessDialog(true);
|
||||
};
|
||||
@@ -283,7 +318,7 @@ export default function ConfiguracoesPage() {
|
||||
`w-full flex items-center justify-center space-x-2 rounded-lg py-2.5 text-sm font-medium leading-5 transition-all
|
||||
${selected
|
||||
? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-white/[0.5] dark:hover:bg-gray-700/[0.5] hover:text-gray-900 dark:hover:text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50 hover:text-gray-900 dark:hover:text-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
@@ -315,7 +350,7 @@ export default function ConfiguracoesPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<span>CNPJ</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
@@ -332,7 +367,7 @@ export default function ConfiguracoesPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<span>E-mail (acesso)</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
|
||||
@@ -48,6 +48,15 @@ import {
|
||||
const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
|
||||
const ThemeTester = dynamic(() => import('@/components/ThemeTester'), { ssr: false });
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
|
||||
const setGradientVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
export default function AgencyLayout({
|
||||
children,
|
||||
}: {
|
||||
@@ -88,8 +97,13 @@ export default function AgencyLayout({
|
||||
}
|
||||
|
||||
const hostname = window.location.hostname;
|
||||
const subdomain = hostname.split('.')[0];
|
||||
setAgencyName(subdomain);
|
||||
const hostSubdomain = hostname.split('.')[0] || 'default';
|
||||
const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || hostSubdomain;
|
||||
|
||||
setAgencyName(parsedUser?.subdomain || hostSubdomain);
|
||||
|
||||
const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`);
|
||||
setGradientVariables(storedGradient || DEFAULT_GRADIENT);
|
||||
|
||||
// Inicializar com "Todos os Clientes"
|
||||
setSelectedClient(clients[0]);
|
||||
@@ -106,7 +120,10 @@ export default function AgencyLayout({
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
if (!user) {
|
||||
|
||||
Reference in New Issue
Block a user