VPS 4 Builder
78 lines
3.9 KiB
TypeScript
78 lines
3.9 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import DashboardLayout from '@/components/layout/DashboardLayout';
|
||
import { api } from '@/lib/api';
|
||
import { useAuth } from '@/lib/auth';
|
||
|
||
export default function PartnerDashboard() {
|
||
const { user } = useAuth();
|
||
const [stats, setStats] = useState<any>(null);
|
||
const [tab, setTab] = useState('dashboard');
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const t = params.get('tab');
|
||
if (t) setTab(t);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
api.getPartnerStats(1).then(d => { setStats(d); setLoading(false); }).catch(() => setLoading(false));
|
||
}, []);
|
||
|
||
const statCards = stats ? [
|
||
{ icon: '🎁', label: 'Benefícios Ativos', value: stats.activeBenefits || 0, color: 'from-blue-500 to-cyan-400' },
|
||
{ icon: '👥', label: 'Membros', value: stats.totalMembers || 0, color: 'from-green-500 to-emerald-400' },
|
||
{ icon: '✅', label: 'Resgates este Mês', value: stats.monthlyRedemptions || 0, color: 'from-purple-500 to-pink-400' },
|
||
{ icon: '📈', label: 'Meta Mensal', value: `${stats.goalProgress || 0}%`, color: 'from-orange-500 to-red-400' },
|
||
] : [];
|
||
|
||
return (
|
||
<DashboardLayout>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">Painel do <span className="gradient-text">Parceiro</span></h1>
|
||
<p className="text-dark-400 mt-1">Gerencie seus benefícios e acompanhe o desempenho.</p>
|
||
</div>
|
||
|
||
{/* Stat Cards */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{loading ? [1, 2, 3, 4].map(i => <div key={i} className="skeleton h-28 rounded-2xl" />) :
|
||
statCards.map((card, i) => (
|
||
<motion.div key={i} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: i * 0.1 }}
|
||
className="glass rounded-2xl p-5">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${card.color} flex items-center justify-center text-lg`}>{card.icon}</div>
|
||
<span className="text-dark-400 text-sm">{card.label}</span>
|
||
</div>
|
||
<div className="text-2xl font-bold">{card.value}</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Quick Actions */}
|
||
<div className="glass rounded-2xl p-6">
|
||
<h2 className="text-lg font-bold mb-4">Ações Rápidas</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
{[
|
||
{ icon: '➕', label: 'Novo Benefício', action: () => { } },
|
||
{ icon: '📊', label: 'Relatórios', action: () => { } },
|
||
{ icon: '👥', label: 'Ver Membros', action: () => { } },
|
||
{ icon: '⚙️', label: 'Configurações', action: () => { } },
|
||
].map((a, i) => (
|
||
<button key={i} onClick={a.action}
|
||
className="p-4 rounded-xl bg-dark-900/50 hover:bg-dark-800 transition-all text-center group">
|
||
<span className="text-2xl block mb-2">{a.icon}</span>
|
||
<span className="text-sm text-dark-400 group-hover:text-white transition-colors">{a.label}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DashboardLayout>
|
||
);
|
||
}
|