feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
153
front-end-agency/components/cadastro/DashboardPreview.tsx
Normal file
153
front-end-agency/components/cadastro/DashboardPreview.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
interface DashboardPreviewProps {
|
||||
companyName: string;
|
||||
subdomain: string;
|
||||
primaryColor: string;
|
||||
secondaryColor: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export default function DashboardPreview({
|
||||
companyName,
|
||||
subdomain,
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
logoUrl
|
||||
}: DashboardPreviewProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border-2 border-[#E5E5E5] overflow-hidden shadow-lg">
|
||||
{/* Header do Preview */}
|
||||
<div className="bg-[#F5F5F5] px-3 py-2 border-b border-[#E5E5E5] flex items-center gap-2">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#28CA42]" />
|
||||
</div>
|
||||
<div className="flex-1 text-center">
|
||||
<span className="text-xs text-[#7D7D7D]">
|
||||
{subdomain || 'seu-dominio'}.aggios.app
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo do Preview - Dashboard */}
|
||||
<div className="aspect-video bg-[#F8F9FA] relative overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-16 flex flex-col items-center py-4 gap-3"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
{/* Logo/Initial */}
|
||||
<div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white font-bold text-sm overflow-hidden">
|
||||
{logoUrl ? (
|
||||
<img src={logoUrl} alt="Logo" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span>{(companyName || 'E')[0].toUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Menu Icons */}
|
||||
<div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
|
||||
<i className="ri-dashboard-line text-white text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-folder-line text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-team-line text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-settings-3-line text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="ml-16 p-4">
|
||||
{/* Top Bar */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-[#000000]">
|
||||
{companyName || 'Sua Empresa'}
|
||||
</h2>
|
||||
<p className="text-xs text-[#7D7D7D]">Dashboard</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
|
||||
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-3">
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: `${primaryColor}20` }}
|
||||
>
|
||||
<i className="ri-folder-line text-xs" style={{ color: primaryColor }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Projetos</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold" style={{ color: primaryColor }}>24</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: secondaryColor ? `${secondaryColor}20` : '#10B98120' }}
|
||||
>
|
||||
<i className="ri-team-line text-xs" style={{ color: secondaryColor || '#10B981' }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Clientes</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold" style={{ color: secondaryColor || '#10B981' }}>15</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-6 h-6 rounded flex items-center justify-center bg-[#7D7D7D]/10">
|
||||
<i className="ri-money-dollar-circle-line text-xs text-[#7D7D7D]" />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Receita</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-[#7D7D7D]">R$ 45k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart Area */}
|
||||
<div className="bg-white rounded-lg p-3 border border-[#E5E5E5]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-semibold text-[#000000]">Desempenho</span>
|
||||
<button
|
||||
className="px-2 py-0.5 rounded text-[10px] text-white"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
Este mês
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-end gap-1 h-16">
|
||||
{[40, 70, 45, 80, 60, 90, 75].map((height, i) => (
|
||||
<div key={i} className="flex-1 flex flex-col justify-end">
|
||||
<div
|
||||
className="w-full rounded-t transition-all"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
backgroundColor: i === 6 ? primaryColor : `${primaryColor}40`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Preview */}
|
||||
<div className="bg-[#F5F5F5] px-3 py-2 text-center border-t border-[#E5E5E5]">
|
||||
<p className="text-[10px] text-[#7D7D7D]">
|
||||
Preview do seu painel • As cores e layout podem ser ajustados
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
234
front-end-agency/components/cadastro/DynamicBranding.tsx
Normal file
234
front-end-agency/components/cadastro/DynamicBranding.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import DashboardPreview from "./DashboardPreview";
|
||||
|
||||
interface DynamicBrandingProps {
|
||||
currentStep: number;
|
||||
companyName?: string;
|
||||
subdomain?: string;
|
||||
primaryColor?: string;
|
||||
secondaryColor?: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export default function DynamicBranding({
|
||||
currentStep,
|
||||
companyName = '',
|
||||
subdomain = '',
|
||||
primaryColor = '#0ea5e9',
|
||||
secondaryColor = '#0284c7',
|
||||
logoUrl = ''
|
||||
}: DynamicBrandingProps) {
|
||||
const [activeTestimonial, setActiveTestimonial] = useState(0);
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
text: "Com o Aggios, nossa produtividade aumentou 40%. Gestão de projetos nunca foi tão simples!",
|
||||
author: "Maria Silva",
|
||||
company: "DigitalWorks",
|
||||
avatar: "MS"
|
||||
},
|
||||
{
|
||||
text: "Reduzi 60% do tempo gasto com controle financeiro. Tudo centralizado em um só lugar.",
|
||||
author: "João Santos",
|
||||
company: "TechHub",
|
||||
avatar: "JS"
|
||||
},
|
||||
{
|
||||
text: "A melhor decisão para nossa agência. Dashboard intuitivo e relatórios incríveis!",
|
||||
author: "Ana Costa",
|
||||
company: "CreativeFlow",
|
||||
avatar: "AC"
|
||||
}
|
||||
];
|
||||
|
||||
const stepContent = [
|
||||
{
|
||||
icon: "ri-user-heart-line",
|
||||
title: "Bem-vindo ao Aggios!",
|
||||
description: "Vamos criar sua conta em poucos passos",
|
||||
benefits: [
|
||||
"✓ Acesso completo ao painel",
|
||||
"✓ Gestão ilimitada de projetos",
|
||||
"✓ Suporte prioritário"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-building-line",
|
||||
title: "Configure sua Empresa",
|
||||
description: "Personalize de acordo com seu negócio",
|
||||
benefits: [
|
||||
"✓ Dashboard personalizado",
|
||||
"✓ Gestão de equipe e clientes",
|
||||
"✓ Controle financeiro integrado"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-map-pin-line",
|
||||
title: "Quase lá!",
|
||||
description: "Informações de localização e contato",
|
||||
benefits: [
|
||||
"✓ Multi-contatos configuráveis",
|
||||
"✓ Integração com WhatsApp",
|
||||
"✓ Notificações em tempo real"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-global-line",
|
||||
title: "Seu Domínio Exclusivo",
|
||||
description: "Escolha como acessar seu painel",
|
||||
benefits: [
|
||||
"✓ Subdomínio personalizado",
|
||||
"✓ SSL incluído gratuitamente",
|
||||
"✓ Domínio próprio (opcional)"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-palette-line",
|
||||
title: "Personalize as Cores",
|
||||
description: "Deixe com a cara da sua empresa",
|
||||
benefits: [
|
||||
"✓ Preview em tempo real",
|
||||
"✓ Paleta de cores customizada",
|
||||
"✓ Identidade visual única"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const content = stepContent[currentStep - 1] || stepContent[0];
|
||||
|
||||
// Auto-rotate testimonials
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
// Se for etapa 5, mostrar preview do dashboard
|
||||
if (currentStep === 5) {
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
|
||||
<p className="text-white/80 text-lg">Veja como ficará seu dashboard personalizado</p>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="w-full max-w-3xl">
|
||||
<DashboardPreview
|
||||
companyName={companyName}
|
||||
subdomain={subdomain}
|
||||
primaryColor={primaryColor}
|
||||
secondaryColor={secondaryColor}
|
||||
logoUrl={logoUrl}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-white/70 text-sm">
|
||||
As cores e configurações são atualizadas em tempo real
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
|
||||
<div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-between w-full p-12 text-white">
|
||||
{/* Logo e Conteúdo da Etapa */}
|
||||
<div className="flex flex-col justify-center flex-1">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ícone e Título da Etapa */}
|
||||
<div className="mb-6">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<i className={`${content.icon} text-3xl`} />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-2">{content.title}</h2>
|
||||
<p className="text-white/80 text-lg">{content.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Benefícios */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{content.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 text-white/90 animate-fade-in"
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<span className="text-lg">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Carrossel de Depoimentos */}
|
||||
<div className="relative">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
||||
<div className="mb-4">
|
||||
<i className="ri-double-quotes-l text-3xl text-white/40" />
|
||||
</div>
|
||||
<p className="text-white/95 mb-4 min-h-[60px]">
|
||||
{testimonials[activeTestimonial].text}
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center font-semibold">
|
||||
{testimonials[activeTestimonial].avatar}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white">
|
||||
{testimonials[activeTestimonial].author}
|
||||
</p>
|
||||
<p className="text-sm text-white/70">
|
||||
{testimonials[activeTestimonial].company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Indicadores */}
|
||||
<div className="flex gap-2 justify-center mt-4">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveTestimonial(index)}
|
||||
className={`h-1.5 rounded-full transition-all ${index === activeTestimonial
|
||||
? "w-8 bg-white"
|
||||
: "w-1.5 bg-white/40 hover:bg-white/60"
|
||||
}`}
|
||||
aria-label={`Ir para depoimento ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
|
||||
<div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user