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

feat: versão 1.5 - CRM Beta com leads, funis, campanhas e portal do cliente

Browse Source
This commit is contained in:
Erik Silva
2025-12-24 17:36:52 -03:00
parent 99d828869a
commit dfb91c8ba5
98 changed files with 18255 additions and 1465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
front-end-agency/app/cliente/cadastro/sucesso/sucesso-client.tsx Normal file
View File

@@ -0,0 +1,218 @@
'use client';
import { useEffect, useState } from 'react';
import { CheckCircleIcon, ClockIcon, UserCircleIcon } from '@heroicons/react/24/solid';
import { SparklesIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
interface SucessoClientProps {
branding: {
name: string;
logo_url?: string;
primary_color: string;
};
accentColor: string;
submittedAt: string;
}
const timeline = [
{
title: 'Cadastro recebido',
description: 'Confirmamos seus dados e senha automaticamente.',
status: 'done' as const,
},
{
title: 'Análise da equipe',
description: 'Nossa equipe valida seus dados e configura seu acesso.',
status: 'current' as const,
},
{
title: 'Acesso liberado',
description: 'Você receberá aviso e poderá fazer login com sua senha.',
status: 'upcoming' as const,
},
];
export default function SucessoClient({ branding, accentColor, submittedAt }: SucessoClientProps) {
const [customerName, setCustomerName] = useState<string | null>(null);
const [customerEmail, setCustomerEmail] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const name = sessionStorage.getItem('customer_name');
const email = sessionStorage.getItem('customer_email');
setCustomerName(name);
setCustomerEmail(email);
setIsLoading(false);
// Limpar sessionStorage após carregar
if (name || email) {
sessionStorage.removeItem('customer_name');
sessionStorage.removeItem('customer_email');
}
}, []);
const primaryColor = branding.primary_color || '#3b82f6';
const firstName = customerName?.split(' ')[0] || 'Cliente';
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto space-y-8">
<div className="text-center space-y-4">
{branding.logo_url ? (
<img src={branding.logo_url} alt={branding.name} className="mx-auto h-16 w-auto object-contain" />
) : (
<div className="mx-auto h-16 w-16 rounded-2xl flex items-center justify-center text-white text-2xl font-semibold" style={{ backgroundColor: primaryColor }}>
{branding.name?.substring(0, 2).toUpperCase() || 'AG'}
</div>
)}
<p className="text-sm uppercase tracking-[0.25em] text-gray-500 font-medium">Portal do Cliente</p>
</div>
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200">
<div className="h-3" style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }} />
<div className="p-8 sm:p-12 space-y-8">
{/* Header Premium com Nome */}
<div className="flex flex-col items-center text-center space-y-6">
<div className="relative">
<div className="h-24 w-24 rounded-full flex items-center justify-center bg-gradient-to-br from-green-100 to-emerald-50 shadow-lg">
<CheckCircleIcon className="h-14 w-14 text-green-600" />
</div>
<div className="absolute -bottom-1 -right-1 h-8 w-8 rounded-full bg-white flex items-center justify-center shadow-md">
<SparklesIcon className="h-5 w-5 text-amber-500" />
</div>
</div>
{!isLoading && customerName ? (
<div className="space-y-2">
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
Tudo certo, {firstName}! 🎉
</h1>
<p className="text-lg text-gray-600">
Seu cadastro foi enviado com sucesso
</p>
</div>
) : (
<div className="space-y-2">
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
Cadastro enviado com sucesso! 🎉
</h1>
<p className="text-lg text-gray-600">
Recebemos todas as suas informações
</p>
</div>
)}
<div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 max-w-lg">
<div className="flex items-start gap-3">
<UserCircleIcon className="h-6 w-6 text-blue-600 flex-shrink-0 mt-0.5" />
<div className="text-left">
<p className="text-sm font-semibold text-blue-900">Sua senha está segura</p>
<p className="text-sm text-blue-700 mt-1">
Você já definiu sua senha de acesso. Assim que a agência liberar seu cadastro,
você poderá fazer login imediatamente no portal.
</p>
</div>
</div>
</div>
{!isLoading && customerEmail && (
<p className="text-sm text-gray-500">
Login: <span className="font-mono font-semibold text-gray-700">{customerEmail}</span>
</p>
)}
<p className="text-xs text-gray-400">Enviado em {submittedAt}</p>
</div>
{/* Timeline */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{timeline.map((item, idx) => (
<div
key={item.title}
className={`rounded-2xl border-2 p-5 flex flex-col gap-3 transition-all ${item.status === 'done'
? 'border-green-200 bg-green-50/50'
: item.status === 'current'
? 'border-indigo-300 bg-indigo-50/50 shadow-lg'
: 'border-gray-200 bg-gray-50'
}`}
>
<div className="flex items-center justify-between">
<div className={`h-10 w-10 rounded-full flex items-center justify-center font-bold ${item.status === 'done'
? 'bg-green-500 text-white'
: item.status === 'current'
? 'bg-indigo-500 text-white'
: 'bg-gray-200 text-gray-400'
}`}>
{idx + 1}
</div>
{item.status === 'current' && (
<div className="flex space-x-1">
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.2s' }} />
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" style={{ animationDelay: '0.4s' }} />
</div>
)}
</div>
<div>
<p className="text-sm font-semibold text-gray-900">{item.title}</p>
<p className="text-sm text-gray-600 mt-1">{item.description}</p>
</div>
</div>
))}
</div>
{/* Informações */}
<div className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-6 border border-gray-200">
<p className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
<ClockIcon className="h-5 w-5 text-amber-500" />
O que acontece agora?
</p>
<ul className="space-y-2 text-sm text-gray-700">
<li className="flex items-start gap-2">
<span className="text-green-500 font-bold mt-0.5">✓</span>
<span>Nossa equipe valida seus dados e configura seu ambiente no portal</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-500 font-bold mt-0.5">✓</span>
<span>Assim que aprovado, você receberá aviso pelos contatos informados</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-500 font-bold mt-0.5">✓</span>
<span>Use o login <strong>{customerEmail || 'seu e-mail'}</strong> e a senha que você criou para acessar</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-500 font-bold mt-0.5">!</span>
<span>Em caso de urgência, fale com a equipe {branding.name} pelo telefone ou WhatsApp</span>
</li>
</ul>
</div>
{/* CTAs */}
<div className="space-y-3 pt-4">
<Link
href="/login"
className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-4 text-white font-semibold shadow-lg transition-all hover:shadow-xl hover:-translate-y-0.5"
style={{ backgroundImage: `linear-gradient(120deg, ${primaryColor}, ${accentColor})` }}
>
Ir para o login do cliente
</Link>
<Link
href="/"
className="w-full inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 font-semibold border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
>
Voltar para o site da agência
</Link>
</div>
</div>
</div>
<div className="text-center text-sm text-gray-500 bg-white/70 backdrop-blur-sm rounded-xl p-4 border border-gray-200">
Precisa ajustar alguma informação? Entre em contato com a equipe <strong>{branding.name}</strong> pelos
canais que você informou no cadastro.
</div>
</div>
</div>
);
}