176 lines
9.4 KiB
TypeScript
176 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
|
|
|
export default function PainelPage() {
|
|
const router = useRouter();
|
|
const [userData, setUserData] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Verificar se usuário está logado
|
|
if (!isAuthenticated()) {
|
|
router.push('/login');
|
|
return;
|
|
}
|
|
|
|
const user = getUser();
|
|
if (user) {
|
|
setUserData(user);
|
|
setLoading(false);
|
|
} else {
|
|
router.push('/login');
|
|
}
|
|
}, [router]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF3A05] mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Carregando...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<header className="bg-white border-b border-gray-200 shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#FF3A05] to-[#FF0080] rounded-lg">
|
|
<span className="text-white font-bold text-lg">A</span>
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-900">Aggios</h1>
|
|
<p className="text-sm text-gray-500">{userData?.company}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-gray-900">{userData?.name}</p>
|
|
<p className="text-xs text-gray-500">{userData?.email}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
clearAuth();
|
|
router.push('/login');
|
|
}}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
|
|
>
|
|
Sair
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Welcome Card */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-[#FF3A05] to-[#FF0080] rounded-full flex items-center justify-center">
|
|
<span className="text-2xl">🎉</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
Bem-vindo ao Aggios, {userData?.name}!
|
|
</h2>
|
|
<p className="text-gray-600 mt-1">
|
|
Sua conta foi criada com sucesso. Este é o seu painel administrativo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Projetos</p>
|
|
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
|
</div>
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Clientes</p>
|
|
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
|
</div>
|
|
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Receita</p>
|
|
<p className="text-3xl font-bold text-gray-900 mt-2">R$ 0</p>
|
|
</div>
|
|
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Next Steps */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Próximos Passos</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
|
1
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Complete seu perfil</h4>
|
|
<p className="text-sm text-gray-600 mt-1">Adicione mais informações sobre sua empresa</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
|
2
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Adicione seu primeiro cliente</h4>
|
|
<p className="text-sm text-gray-600 mt-1">Comece a gerenciar seus clientes</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
|
3
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Crie seu primeiro projeto</h4>
|
|
<p className="text-sm text-gray-600 mt-1">Organize seu trabalho em projetos</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|