798 lines
45 KiB
TypeScript
798 lines
45 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import {
|
||
|
|
LayoutDashboard,
|
||
|
|
Users,
|
||
|
|
CreditCard,
|
||
|
|
LogOut,
|
||
|
|
ArrowLeft,
|
||
|
|
TrendingUp,
|
||
|
|
Ticket,
|
||
|
|
Search,
|
||
|
|
ShieldAlert,
|
||
|
|
Download,
|
||
|
|
Plus,
|
||
|
|
DollarSign,
|
||
|
|
Calendar,
|
||
|
|
CheckCircle2,
|
||
|
|
XCircle,
|
||
|
|
MoreHorizontal,
|
||
|
|
UserPlus,
|
||
|
|
Activity,
|
||
|
|
AlertTriangle,
|
||
|
|
User,
|
||
|
|
Clock,
|
||
|
|
Info,
|
||
|
|
Settings,
|
||
|
|
Save,
|
||
|
|
Smartphone
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { supabase } from '@/lib/supabase';
|
||
|
|
import { User as AppUser } from '@/types';
|
||
|
|
|
||
|
|
interface AdminPanelProps {
|
||
|
|
user: AppUser;
|
||
|
|
onExitAdmin: () => void;
|
||
|
|
onLogout: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tipos baseados nas novas tabelas SQL
|
||
|
|
type TabType = 'overview' | 'users' | 'financial' | 'coupons' | 'settings';
|
||
|
|
|
||
|
|
const AdminPanel: React.FC<AdminPanelProps> = ({ user, onExitAdmin, onLogout }) => {
|
||
|
|
const [activeTab, setActiveTab] = useState<TabType>('overview');
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
// Data States
|
||
|
|
const [stats, setStats] = useState<any>(null);
|
||
|
|
const [usersList, setUsersList] = useState<any[]>([]);
|
||
|
|
const [coupons, setCoupons] = useState<any[]>([]);
|
||
|
|
|
||
|
|
// Settings State
|
||
|
|
const [config, setConfig] = useState({
|
||
|
|
whatsapp_number: '' // Inicializa vazio para não confundir
|
||
|
|
});
|
||
|
|
const [savingConfig, setSavingConfig] = useState(false);
|
||
|
|
|
||
|
|
// UI States
|
||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
||
|
|
const [showCouponModal, setShowCouponModal] = useState(false);
|
||
|
|
const [newCoupon, setNewCoupon] = useState({ code: '', percent: 10, uses: 100 });
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchDashboardData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const fetchDashboardData = async () => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
// 1. Stats
|
||
|
|
const { data: sData } = await supabase.rpc('get_admin_dashboard_stats');
|
||
|
|
if (sData) setStats(sData);
|
||
|
|
|
||
|
|
// 2. Users (Robust Fetch)
|
||
|
|
await fetchUsersSafe();
|
||
|
|
|
||
|
|
// 3. Coupons
|
||
|
|
const { data: cData } = await supabase.from('coupons').select('*').order('created_at', { ascending: false });
|
||
|
|
if (cData) setCoupons(cData);
|
||
|
|
|
||
|
|
// 4. Settings
|
||
|
|
const { data: configData } = await supabase
|
||
|
|
.from('app_settings')
|
||
|
|
.select('value')
|
||
|
|
.eq('key', 'whatsapp_number')
|
||
|
|
.maybeSingle();
|
||
|
|
|
||
|
|
if (configData) {
|
||
|
|
setConfig({ whatsapp_number: configData.value });
|
||
|
|
} else {
|
||
|
|
// Fallback visual apenas se não tiver nada no banco
|
||
|
|
setConfig({ whatsapp_number: '5541999999999' });
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Admin fetch error", error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const fetchUsersSafe = async () => {
|
||
|
|
// Tenta usar a função avançada (RPC) que tem dados do plano
|
||
|
|
const { data: rpcData, error: rpcError } = await supabase.rpc('get_admin_users_list', { limit_count: 50 });
|
||
|
|
|
||
|
|
if (!rpcError && rpcData) {
|
||
|
|
setUsersList(rpcData);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Se falhar (ex: SQL não atualizado), busca o básico da tabela profiles para não deixar a tela vazia
|
||
|
|
console.warn("RPC falhou, usando fallback de perfis:", rpcError);
|
||
|
|
const { data: basicData } = await supabase
|
||
|
|
.from('profiles')
|
||
|
|
.select('*')
|
||
|
|
.order('created_at', { ascending: false })
|
||
|
|
.limit(50);
|
||
|
|
|
||
|
|
if (basicData) {
|
||
|
|
const mapped = basicData.map(p => ({
|
||
|
|
id: p.id,
|
||
|
|
full_name: p.full_name,
|
||
|
|
email: p.email,
|
||
|
|
phone: p.phone_e164,
|
||
|
|
created_at: p.created_at,
|
||
|
|
plan_status: 'free',
|
||
|
|
plan_interval: 'free',
|
||
|
|
lifetime_value: 0,
|
||
|
|
plan_start_date: null,
|
||
|
|
plan_end_date: null
|
||
|
|
}));
|
||
|
|
setUsersList(mapped);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCreateCoupon = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
try {
|
||
|
|
const { error } = await supabase.rpc('admin_create_coupon', {
|
||
|
|
p_code: newCoupon.code,
|
||
|
|
p_percent: newCoupon.percent,
|
||
|
|
p_uses: newCoupon.uses
|
||
|
|
});
|
||
|
|
|
||
|
|
if (error) throw error;
|
||
|
|
|
||
|
|
const { data: cData } = await supabase.from('coupons').select('*').order('created_at', { ascending: false });
|
||
|
|
if (cData) setCoupons(cData);
|
||
|
|
|
||
|
|
setShowCouponModal(false);
|
||
|
|
setNewCoupon({ code: '', percent: 10, uses: 100 });
|
||
|
|
alert("Cupom criado com sucesso!");
|
||
|
|
} catch (err: any) {
|
||
|
|
alert("Erro ao criar cupom: " + err.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleToggleProfessional = async (userId: string, newValue: boolean) => {
|
||
|
|
try {
|
||
|
|
const { error } = await supabase
|
||
|
|
.from('profiles')
|
||
|
|
.update({ is_professional: newValue })
|
||
|
|
.eq('id', userId);
|
||
|
|
|
||
|
|
if (error) throw error;
|
||
|
|
|
||
|
|
// Optimistic update
|
||
|
|
setUsersList(prev => prev.map(u =>
|
||
|
|
u.id === userId ? { ...u, is_professional: newValue } : u
|
||
|
|
));
|
||
|
|
|
||
|
|
// If enhancing to Professional, check/create the professionals record
|
||
|
|
if (newValue) {
|
||
|
|
const { data: existing } = await supabase.from('professionals').select('id').eq('id', userId).maybeSingle();
|
||
|
|
if (!existing) {
|
||
|
|
// Auto-init profile
|
||
|
|
// We don't have the user name here easily unless we look it up,
|
||
|
|
// but we can trust the 'professionals' RLS or just let them create it on first login.
|
||
|
|
// Ideally, we create a stub here.
|
||
|
|
const user = usersList.find(u => u.id === userId);
|
||
|
|
if (user) {
|
||
|
|
await supabase.from('professionals').insert({
|
||
|
|
id: userId,
|
||
|
|
business_name: user.full_name || 'Novo Profissional',
|
||
|
|
primary_color: '#059669' // Default Green
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// toast.success(`Status alterado para ${newValue ? 'Profissional' : 'Aluno'}`);
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error toggling pro status:", error);
|
||
|
|
alert("Erro ao alterar status!");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSaveSettings = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setSavingConfig(true);
|
||
|
|
try {
|
||
|
|
const { error } = await supabase
|
||
|
|
.from('app_settings')
|
||
|
|
.upsert({ key: 'whatsapp_number', value: config.whatsapp_number }, { onConflict: 'key' });
|
||
|
|
|
||
|
|
if (error) throw error;
|
||
|
|
alert("Configurações salvas com sucesso!");
|
||
|
|
} catch (err: any) {
|
||
|
|
console.error(err);
|
||
|
|
alert("Erro ao salvar: " + err.message);
|
||
|
|
} finally {
|
||
|
|
setSavingConfig(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Safe filter logic (handles null names)
|
||
|
|
const filteredUsers = usersList.filter(u =>
|
||
|
|
(u.full_name || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
(u.email || '').toLowerCase().includes(searchTerm.toLowerCase())
|
||
|
|
);
|
||
|
|
|
||
|
|
const formatCurrency = (cents: number) => {
|
||
|
|
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(cents / 100);
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatDate = (dateStr: string | null) => {
|
||
|
|
if (!dateStr) return '-';
|
||
|
|
return new Date(dateStr).toLocaleDateString('pt-BR');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-[#F3F4F6] font-sans text-gray-900 flex">
|
||
|
|
|
||
|
|
{/* Sidebar Premium */}
|
||
|
|
<aside className="w-72 bg-gray-900 text-white fixed h-full z-30 hidden lg:flex flex-col shadow-2xl">
|
||
|
|
<div className="p-8 border-b border-gray-800">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-10 h-10 bg-gradient-to-br from-brand-500 to-brand-700 rounded-xl flex items-center justify-center text-white shadow-lg shadow-brand-500/20">
|
||
|
|
<ShieldAlert size={20} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="font-bold text-xl tracking-tight block">FoodSnap</span>
|
||
|
|
<span className="text-[10px] text-gray-400 font-mono uppercase tracking-widest bg-gray-800 px-2 py-0.5 rounded-full">Master Admin</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="flex-1 p-6 space-y-2">
|
||
|
|
<NavButton
|
||
|
|
active={activeTab === 'overview'}
|
||
|
|
onClick={() => setActiveTab('overview')}
|
||
|
|
icon={<LayoutDashboard size={20} />}
|
||
|
|
label="Dashboard"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTab === 'users'}
|
||
|
|
onClick={() => setActiveTab('users')}
|
||
|
|
icon={<Users size={20} />}
|
||
|
|
label="Usuários & Planos"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTab === 'financial'}
|
||
|
|
onClick={() => setActiveTab('financial')}
|
||
|
|
icon={<DollarSign size={20} />}
|
||
|
|
label="Financeiro"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTab === 'coupons'}
|
||
|
|
onClick={() => setActiveTab('coupons')}
|
||
|
|
icon={<Ticket size={20} />}
|
||
|
|
label="Cupons & Ofertas"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTab === 'settings'}
|
||
|
|
onClick={() => setActiveTab('settings')}
|
||
|
|
icon={<Settings size={20} />}
|
||
|
|
label="Configurações"
|
||
|
|
/>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="p-6 border-t border-gray-800 space-y-2 bg-gray-950/30">
|
||
|
|
<button
|
||
|
|
onClick={onExitAdmin}
|
||
|
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors text-sm font-medium"
|
||
|
|
>
|
||
|
|
<ArrowLeft size={18} />
|
||
|
|
Voltar ao App
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={onLogout}
|
||
|
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-red-400 hover:text-red-300 hover:bg-red-900/20 transition-colors text-sm font-medium"
|
||
|
|
>
|
||
|
|
<LogOut size={18} />
|
||
|
|
Sair
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
{/* Main Content */}
|
||
|
|
<main className="flex-1 lg:ml-72 p-6 md:p-10 overflow-y-auto">
|
||
|
|
{loading ? (
|
||
|
|
<div className="flex items-center justify-center h-full">
|
||
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-600"></div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
||
|
|
|
||
|
|
{/* Top Bar */}
|
||
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold text-gray-900 tracking-tight">
|
||
|
|
{activeTab === 'overview' && 'Visão Geral'}
|
||
|
|
{activeTab === 'users' && 'Gestão de Usuários'}
|
||
|
|
{activeTab === 'financial' && 'Controle Financeiro'}
|
||
|
|
{activeTab === 'coupons' && 'Cupons de Desconto'}
|
||
|
|
{activeTab === 'settings' && 'Configurações do Sistema'}
|
||
|
|
</h1>
|
||
|
|
<p className="text-gray-500 mt-1 flex items-center gap-2 text-sm">
|
||
|
|
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||
|
|
Sistema Operacional • {new Date().toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-3">
|
||
|
|
{activeTab !== 'settings' && (
|
||
|
|
<button className="bg-white border border-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium shadow-sm hover:bg-gray-50 flex items-center gap-2">
|
||
|
|
<Download size={16} /> Exportar Relatório
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{activeTab === 'coupons' && (
|
||
|
|
<button
|
||
|
|
onClick={() => setShowCouponModal(true)}
|
||
|
|
className="bg-brand-600 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-md shadow-brand-500/20 hover:bg-brand-700 flex items-center gap-2"
|
||
|
|
>
|
||
|
|
<Plus size={16} /> Criar Cupom
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* --- OVERVIEW TAB --- */}
|
||
|
|
{activeTab === 'overview' && stats && (
|
||
|
|
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
|
|
{/* Stats Grid */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
<KpiCard
|
||
|
|
title="Receita Total"
|
||
|
|
value={formatCurrency(stats.total_revenue || 0)}
|
||
|
|
icon={<DollarSign className="text-white" size={24} />}
|
||
|
|
color="bg-emerald-500"
|
||
|
|
trend="+8.2%"
|
||
|
|
/>
|
||
|
|
<KpiCard
|
||
|
|
title="Assinantes Ativos"
|
||
|
|
value={stats.active_subs}
|
||
|
|
icon={<CreditCard className="text-white" size={24} />}
|
||
|
|
color="bg-blue-500"
|
||
|
|
trend="+12"
|
||
|
|
/>
|
||
|
|
<KpiCard
|
||
|
|
title="Total Usuários"
|
||
|
|
value={stats.total_users}
|
||
|
|
icon={<Users className="text-white" size={24} />}
|
||
|
|
color="bg-indigo-500"
|
||
|
|
trend="+24"
|
||
|
|
/>
|
||
|
|
<KpiCard
|
||
|
|
title="Novos (24h)"
|
||
|
|
value={stats.new_users_24h}
|
||
|
|
icon={<UserPlus className="text-white" size={24} />}
|
||
|
|
color="bg-purple-500"
|
||
|
|
trend="Hoje"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Recent Activity Section */}
|
||
|
|
<div className="grid lg:grid-cols-3 gap-8">
|
||
|
|
{/* Chart placeholder area */}
|
||
|
|
<div className="lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
|
||
|
|
<h3 className="font-bold text-gray-900 mb-6">Crescimento de Receita (Simulado)</h3>
|
||
|
|
<div className="h-64 flex items-end gap-4">
|
||
|
|
{[40, 65, 50, 80, 75, 90, 85, 100].map((h, i) => (
|
||
|
|
<div key={i} className="flex-1 bg-brand-50 rounded-t-lg relative group">
|
||
|
|
<div
|
||
|
|
className="absolute bottom-0 left-0 right-0 bg-brand-500 rounded-t-lg transition-all duration-1000 group-hover:bg-brand-600"
|
||
|
|
style={{ height: `${h}%` }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between mt-4 text-xs text-gray-400 font-medium uppercase">
|
||
|
|
<span>Jan</span><span>Fev</span><span>Mar</span><span>Abr</span><span>Mai</span><span>Jun</span><span>Jul</span><span>Ago</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Quick Actions / Recent */}
|
||
|
|
<div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
|
||
|
|
<h3 className="font-bold text-gray-900 mb-4">Ações Rápidas</h3>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<button onClick={() => setShowCouponModal(true)} className="w-full text-left p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors flex items-center gap-3">
|
||
|
|
<div className="p-2 bg-purple-100 text-purple-600 rounded-lg"><Ticket size={18} /></div>
|
||
|
|
<div>
|
||
|
|
<p className="font-bold text-sm text-gray-800">Criar Novo Cupom</p>
|
||
|
|
<p className="text-xs text-gray-500">Impulsione vendas hoje</p>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
<button onClick={() => setActiveTab('users')} className="w-full text-left p-3 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors flex items-center gap-3">
|
||
|
|
<div className="p-2 bg-blue-100 text-blue-600 rounded-lg"><Search size={18} /></div>
|
||
|
|
<div>
|
||
|
|
<p className="font-bold text-sm text-gray-800">Buscar Usuário</p>
|
||
|
|
<p className="text-xs text-gray-500">Ver detalhes de conta</p>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* --- USERS TAB --- */}
|
||
|
|
{activeTab === 'users' && (
|
||
|
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
|
|
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 flex gap-4">
|
||
|
|
<div className="relative flex-1">
|
||
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Buscar por nome ou email..."
|
||
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500/50"
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full text-left text-sm">
|
||
|
|
<thead className="bg-gray-50 text-gray-500 uppercase text-xs font-bold">
|
||
|
|
<tr>
|
||
|
|
<th className="px-6 py-4">Usuário</th>
|
||
|
|
<th className="px-6 py-4">Status</th>
|
||
|
|
<th className="px-6 py-4">Plano</th>
|
||
|
|
<th className="px-6 py-4">Início</th>
|
||
|
|
<th className="px-6 py-4">Término</th>
|
||
|
|
<th className="px-6 py-4">Pro?</th>
|
||
|
|
<th className="px-6 py-4">LTV</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-gray-100">
|
||
|
|
{filteredUsers.length === 0 ? (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={7} className="px-6 py-8 text-center text-gray-400">
|
||
|
|
Nenhum usuário encontrado na busca.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
) : filteredUsers.map((u) => (
|
||
|
|
<tr key={u.id} className="hover:bg-gray-50 transition-colors">
|
||
|
|
<td className="px-6 py-4">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-8 h-8 rounded-full bg-brand-100 text-brand-700 flex items-center justify-center font-bold text-xs">
|
||
|
|
{u.full_name ? u.full_name.substring(0, 2).toUpperCase() : 'US'}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="font-bold text-gray-900">{u.full_name || 'Usuário Sem Nome'}</div>
|
||
|
|
<div className="text-xs text-gray-500">{u.email}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4">
|
||
|
|
<StatusBadge status={u.plan_status} />
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4">
|
||
|
|
<IntervalBadge interval={u.plan_interval} />
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 text-gray-600 font-medium text-xs">
|
||
|
|
{u.plan_start_date ? (
|
||
|
|
<span className="text-green-700 font-bold">{formatDate(u.plan_start_date)}</span>
|
||
|
|
) : (
|
||
|
|
<div className="flex items-center gap-1.5 text-gray-400" title="Data de Cadastro">
|
||
|
|
<Clock size={12} />
|
||
|
|
{formatDate(u.created_at)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 text-gray-600 font-medium text-xs">
|
||
|
|
{u.plan_end_date ? formatDate(u.plan_end_date) : <span className="text-gray-300">-</span>}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4">
|
||
|
|
<button
|
||
|
|
onClick={() => handleToggleProfessional(u.id, !u.is_professional)}
|
||
|
|
className={`px-3 py-1 rounded-full text-xs font-bold transition-colors ${u.is_professional
|
||
|
|
? 'bg-purple-100 text-purple-700 hover:bg-purple-200'
|
||
|
|
: 'bg-gray-100 text-gray-400 hover:bg-gray-200'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{u.is_professional ? 'PRO' : 'ALUNO'}
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 font-mono font-medium text-gray-700">
|
||
|
|
{formatCurrency(u.lifetime_value || 0)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* --- COUPONS TAB --- */}
|
||
|
|
{activeTab === 'coupons' && (
|
||
|
|
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
|
|
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 text-white flex flex-col md:flex-row items-center justify-between gap-6 shadow-lg">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-2xl font-bold mb-2">Marketing & Ofertas</h2>
|
||
|
|
<p className="text-purple-100 opacity-90 max-w-lg">
|
||
|
|
Crie códigos promocionais para influenciadores, campanhas de email ou recuperação de carrinho.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={() => setShowCouponModal(true)}
|
||
|
|
className="bg-white text-purple-600 font-bold px-6 py-3 rounded-xl hover:bg-purple-50 transition-colors shadow-xl"
|
||
|
|
>
|
||
|
|
Criar Novo Cupom
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
{coupons.length === 0 ? (
|
||
|
|
<div className="col-span-full text-center py-12 text-gray-400 bg-white rounded-xl border border-dashed border-gray-300">
|
||
|
|
Nenhum cupom ativo no momento.
|
||
|
|
</div>
|
||
|
|
) : coupons.map(c => (
|
||
|
|
<div key={c.id} className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
|
||
|
|
<div className="absolute top-0 right-0 p-2 opacity-50">
|
||
|
|
<Ticket size={80} className="text-gray-100 -rotate-12 transform translate-x-4 -translate-y-4" />
|
||
|
|
</div>
|
||
|
|
<div className="relative z-10">
|
||
|
|
<div className="flex justify-between items-start mb-4">
|
||
|
|
<div className="bg-purple-50 text-purple-700 px-3 py-1 rounded-lg font-mono font-bold text-sm border border-purple-100">
|
||
|
|
{c.code}
|
||
|
|
</div>
|
||
|
|
<div className={`text-xs font-bold px-2 py-1 rounded-full ${c.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||
|
|
{c.is_active ? 'ATIVO' : 'INATIVO'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mb-4">
|
||
|
|
<span className="text-4xl font-black text-gray-900">{c.discount_percent}%</span>
|
||
|
|
<span className="text-sm text-gray-500 font-medium ml-1">OFF</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4 text-sm text-gray-500 border-t border-gray-100 pt-4">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Users size={14} />
|
||
|
|
<span>{c.uses_count} / {c.max_uses} usos</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<span>Criado em {new Date(c.created_at).toLocaleDateString()}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* --- SETTINGS TAB --- */}
|
||
|
|
{activeTab === 'settings' && (
|
||
|
|
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-2xl">
|
||
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||
|
|
<div className="p-6 border-b border-gray-100">
|
||
|
|
<h2 className="text-xl font-bold text-gray-900 flex items-center gap-2">
|
||
|
|
<Smartphone size={20} className="text-brand-600" />
|
||
|
|
Integração WhatsApp
|
||
|
|
</h2>
|
||
|
|
<p className="text-gray-500 text-sm mt-1">
|
||
|
|
Configure o número que receberá as mensagens e imagens dos usuários para análise.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
<form onSubmit={handleSaveSettings}>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
|
|
Número do WhatsApp (Business/Bot)
|
||
|
|
</label>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
required
|
||
|
|
className="flex-1 px-4 py-2 bg-white text-gray-900 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 placeholder-gray-400"
|
||
|
|
placeholder="Ex: 5541999999999"
|
||
|
|
value={config.whatsapp_number}
|
||
|
|
onChange={(e) => setConfig({ ...config, whatsapp_number: e.target.value.replace(/\D/g, '') })}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors"
|
||
|
|
onClick={() => window.open(`https://wa.me/${config.whatsapp_number}`, '_blank')}
|
||
|
|
>
|
||
|
|
Testar Link
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-2">
|
||
|
|
Insira apenas números, incluindo o código do país (Ex: 55 para Brasil). Este número será usado para gerar o QR Code no painel do usuário.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="pt-6 border-t border-gray-100 flex justify-end">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={savingConfig}
|
||
|
|
className="bg-brand-600 text-white px-6 py-2.5 rounded-lg font-bold hover:bg-brand-700 shadow-lg shadow-brand-500/20 flex items-center gap-2 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{savingConfig ? <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-b-transparent"></div> : <Save size={18} />}
|
||
|
|
Salvar Configurações
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* --- FINANCIAL TAB --- */}
|
||
|
|
{activeTab === 'financial' && (
|
||
|
|
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||
|
|
<div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||
|
|
<CreditCard size={32} />
|
||
|
|
</div>
|
||
|
|
<h2 className="text-xl font-bold text-gray-900 mb-2">Integração Stripe Connect</h2>
|
||
|
|
<p className="text-gray-500 max-w-lg mx-auto mb-6">
|
||
|
|
Para visualizar o histórico detalhado de transações em tempo real, configure os Webhooks do Stripe no backend. O sistema atual está pronto para receber os dados na tabela <code>payments</code>.
|
||
|
|
</p>
|
||
|
|
<button className="text-blue-600 font-bold hover:underline flex items-center justify-center gap-2">
|
||
|
|
<ExternalLinkIcon /> Acessar Dashboard do Stripe
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
|
||
|
|
{/* Coupon Modal */}
|
||
|
|
{showCouponModal && (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||
|
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 animate-in zoom-in-95 duration-200 border border-gray-100">
|
||
|
|
<h3 className="text-xl font-bold text-gray-900 mb-4">Criar Novo Cupom</h3>
|
||
|
|
|
||
|
|
<div className="mb-6 bg-blue-50 text-blue-800 p-4 rounded-xl border border-blue-100 text-sm flex gap-3">
|
||
|
|
<Info className="shrink-0 mt-0.5" size={18} />
|
||
|
|
<p>
|
||
|
|
<strong>Atenção:</strong> Ao criar o cupom aqui, você apenas registra para métricas internas. <br />
|
||
|
|
<span className="block mt-2 font-medium underline">Você deve criar o mesmo código de cupom no Dashboard do Stripe</span> para que o desconto funcione no checkout.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form onSubmit={handleCreateCoupon} className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Código do Cupom</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
required
|
||
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 uppercase bg-white text-gray-900"
|
||
|
|
placeholder="EX: VERÃO2025"
|
||
|
|
value={newCoupon.code}
|
||
|
|
onChange={e => setNewCoupon({ ...newCoupon, code: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Desconto (%)</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
required
|
||
|
|
min="1" max="100"
|
||
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 bg-white text-gray-900"
|
||
|
|
value={newCoupon.percent}
|
||
|
|
onChange={e => setNewCoupon({ ...newCoupon, percent: parseInt(e.target.value) })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Limite de Usos</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
required
|
||
|
|
min="1"
|
||
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 bg-white text-gray-900"
|
||
|
|
value={newCoupon.uses}
|
||
|
|
onChange={e => setNewCoupon({ ...newCoupon, uses: parseInt(e.target.value) })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="pt-4 flex gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setShowCouponModal(false)}
|
||
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50"
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="flex-1 px-4 py-2 bg-brand-600 text-white rounded-lg font-bold hover:bg-brand-700 shadow-lg shadow-brand-500/20"
|
||
|
|
>
|
||
|
|
Criar Cupom
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// UI Components
|
||
|
|
const NavButton = ({ active, onClick, icon, label }: any) => (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${active ? 'bg-brand-600 text-white shadow-lg shadow-brand-900/20' : 'text-gray-400 hover:bg-gray-800 hover:text-white'}`}
|
||
|
|
>
|
||
|
|
{icon}
|
||
|
|
<span className="text-sm font-medium">{label}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
|
||
|
|
const KpiCard = ({ title, value, icon, color, trend }: any) => (
|
||
|
|
<div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex items-center gap-4 relative overflow-hidden group">
|
||
|
|
<div className={`w-14 h-14 rounded-2xl ${color} flex items-center justify-center shadow-lg`}>
|
||
|
|
{icon}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">{title}</p>
|
||
|
|
<h4 className="text-2xl font-black text-gray-900">{value}</h4>
|
||
|
|
{trend && (
|
||
|
|
<div className="flex items-center gap-1 mt-1 text-xs font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded-full w-fit">
|
||
|
|
<TrendingUp size={12} /> {trend}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const StatusBadge = ({ status }: { status: string }) => {
|
||
|
|
let styles = 'bg-gray-100 text-gray-600';
|
||
|
|
let icon = <MoreHorizontal size={12} />;
|
||
|
|
let label = status;
|
||
|
|
|
||
|
|
if (status === 'pro') {
|
||
|
|
styles = 'bg-green-100 text-green-700 border border-green-200';
|
||
|
|
icon = <CheckCircle2 size={12} />;
|
||
|
|
}
|
||
|
|
else if (status === 'trial') {
|
||
|
|
styles = 'bg-orange-100 text-orange-700 border border-orange-200';
|
||
|
|
icon = <Activity size={12} />;
|
||
|
|
}
|
||
|
|
else if (status === 'free' || !status) {
|
||
|
|
return (
|
||
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide bg-gray-100 text-gray-600 border border-gray-200">
|
||
|
|
<User size={12} /> Gratuito
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide ${styles}`}>
|
||
|
|
{icon} {label}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const IntervalBadge = ({ interval }: { interval: string }) => {
|
||
|
|
if (interval === 'free' || !interval) {
|
||
|
|
return <span className="px-2.5 py-1 rounded-lg text-xs font-bold bg-gray-50 text-gray-500 border border-gray-200">Básico</span>;
|
||
|
|
}
|
||
|
|
|
||
|
|
let color = 'bg-gray-100 text-gray-600';
|
||
|
|
let label = interval;
|
||
|
|
|
||
|
|
if (interval === 'monthly') { color = 'bg-blue-50 text-blue-700 border border-blue-100'; label = 'Mensal'; }
|
||
|
|
if (interval === 'quarterly') { color = 'bg-indigo-50 text-indigo-700 border border-indigo-100'; label = 'Trimestral'; }
|
||
|
|
if (interval === 'annual') { color = 'bg-purple-50 text-purple-700 border border-purple-100'; label = 'Anual'; }
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={`px-2.5 py-1 rounded-lg text-xs font-bold ${color}`}>
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const ExternalLinkIcon = () => (
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default AdminPanel;
|