Add src/app/dashboard/page.tsx
This commit is contained in:
298
src/app/dashboard/page.tsx
Normal file
298
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { CheckCircle, Clock, Settings, MessageSquare, Mic, Volume2, Edit2, Save, X } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [daysRemaining, setDaysRemaining] = useState(7);
|
||||
const [isEditingCompany, setIsEditingCompany] = useState(false);
|
||||
const [companyName, setCompanyName] = useState("Minha Empresa");
|
||||
const [industry, setIndustry] = useState("Varejo");
|
||||
const [website, setWebsite] = useState("");
|
||||
const [instagram, setInstagram] = useState("");
|
||||
const [whatsapp, setWhatsapp] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Recursos", id: "features" },
|
||||
{ name: "Preços", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setDaysRemaining(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 86400000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="plain"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="WhatsAppAI"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Sair", href: "/"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background py-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">Dashboard</h1>
|
||||
<p className="text-foreground/60">Gerenciar seu agente IA e configurações</p>
|
||||
</div>
|
||||
|
||||
{/* Trial Status */}
|
||||
<div className="bg-card rounded-2xl p-6 mb-8 shadow-lg border border-accent">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Status do Teste Grátis</h2>
|
||||
<p className="text-foreground/60 mb-4">Você tem acesso completo a todos os recursos</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={20} className="text-primary-cta" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{daysRemaining} dia{daysRemaining !== 1 ? 's' : ''} restante{daysRemaining !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="w-32 h-32 rounded-full bg-gradient-to-br from-primary-cta to-primary-cta/50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-white">{daysRemaining}</div>
|
||||
<div className="text-sm text-white/80">dias</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent Status */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<CheckCircle size={24} className="text-green-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Status do Agente</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-green-500">Online</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Pronto para atender</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<MessageSquare size={24} className="text-blue-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Conversas Hoje</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-blue-500">24</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">De 500/mês</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Volume2 size={24} className="text-purple-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Voz Clonada</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-purple-500">Ativa</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Pronta para usar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Configuration */}
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings size={24} className="text-primary-cta" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Configuração da Empresa</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsEditingCompany(!isEditingCompany)}
|
||||
className="flex items-center gap-2 bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
{isEditingCompany ? (
|
||||
<>
|
||||
<X size={18} />
|
||||
Cancelar
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Edit2 size={18} />
|
||||
Editar
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!isEditingCompany ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Nome da Empresa</p>
|
||||
<p className="text-lg font-semibold text-foreground">{companyName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Ramo de Negócio</p>
|
||||
<p className="text-lg font-semibold text-foreground">{industry}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Website</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{website || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Instagram</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{instagram || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">WhatsApp</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{whatsapp || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<p className="text-sm text-foreground/60 mb-1">Descrição</p>
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{description || "Nenhuma descrição adicionada"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Nome da Empresa
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={companyName}
|
||||
onChange={(e) => setCompanyName(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Ramo de Negócio
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={industry}
|
||||
onChange={(e) => setIndustry(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={website}
|
||||
onChange={(e) => setWebsite(e.target.value)}
|
||||
placeholder="https://seusite.com"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Instagram
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={instagram}
|
||||
onChange={(e) => setInstagram(e.target.value)}
|
||||
placeholder="@seuinstagram"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
WhatsApp
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={whatsapp}
|
||||
onChange={(e) => setWhatsapp(e.target.value)}
|
||||
placeholder="+55 11 99999-9999"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Descrição da Empresa
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Descreva sua empresa..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditingCompany(false)}
|
||||
className="flex items-center gap-2 bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
<Save size={18} />
|
||||
Salvar Mudanças
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<Mic size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Clonar Voz</h3>
|
||||
<p className="text-sm text-foreground/60">Grave sua voz para respostas personalizadas</p>
|
||||
</button>
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<MessageSquare size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Teste a IA</h3>
|
||||
<p className="text-sm text-foreground/60">Converse com seu agente em tempo real</p>
|
||||
</button>
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<Settings size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Comportamento</h3>
|
||||
<p className="text-sm text-foreground/60">Configure como a IA responde</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="WhatsAppAI"
|
||||
leftLink={{ text: "Política de Privacidade", href: "/privacy" }}
|
||||
rightLink={{ text: "Termos de Serviço", href: "/terms" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user