tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Building2, CheckCircle2, CircleDollarSign, Clock, TrendingUp, XCircle } from 'lucide-react';
|
|
|
|
import { getMasterDashboard } from '@/lib/api/dashboard';
|
|
import { formatCurrency } from '@/lib/format';
|
|
import { StatCard } from '@/components/domain/stat-card';
|
|
|
|
/**
|
|
* Sem gráfico de evolução (tarefa 1 da Etapa 15, "se o backend expuser dado
|
|
* suficiente"): `GET /master/dashboard` (`dashboard.service.ts#resumo`) só
|
|
* devolve o snapshot atual — nenhuma série histórica de faturamento/novos
|
|
* tenants. Ficou só com os cards de resumo, como a própria tarefa já
|
|
* previa para esse cenário.
|
|
*/
|
|
export default function MasterDashboardPage() {
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['master', 'dashboard'],
|
|
queryFn: getMasterDashboard,
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-foreground">Dashboard</h1>
|
|
<p className="text-sm text-muted-foreground">Visão geral da plataforma</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Tenants por status</h2>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
|
|
<StatCard label="Trial" value={String(data?.tenants_por_status.trial ?? 0)} icon={Clock} loading={isLoading} />
|
|
<StatCard
|
|
label="Ativos"
|
|
value={String(data?.tenants_por_status.ativo ?? 0)}
|
|
icon={CheckCircle2}
|
|
tone="success"
|
|
loading={isLoading}
|
|
/>
|
|
<StatCard
|
|
label="Inadimplentes"
|
|
value={String(data?.tenants_por_status.inadimplente ?? 0)}
|
|
icon={XCircle}
|
|
tone="danger"
|
|
loading={isLoading}
|
|
/>
|
|
<StatCard
|
|
label="Suspensos"
|
|
value={String(data?.tenants_por_status.suspenso ?? 0)}
|
|
icon={XCircle}
|
|
tone="warning"
|
|
loading={isLoading}
|
|
/>
|
|
<StatCard
|
|
label="Cancelados"
|
|
value={String(data?.tenants_por_status.cancelado ?? 0)}
|
|
icon={Building2}
|
|
loading={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">Financeiro</h2>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<StatCard label="MRR" value={formatCurrency(data?.mrr)} icon={TrendingUp} loading={isLoading} />
|
|
<StatCard
|
|
label="Recebido no mês"
|
|
value={formatCurrency(data?.total_recebido_mes)}
|
|
icon={CircleDollarSign}
|
|
tone="success"
|
|
loading={isLoading}
|
|
/>
|
|
<StatCard
|
|
label="Em aberto"
|
|
value={formatCurrency(data?.total_em_aberto)}
|
|
icon={CircleDollarSign}
|
|
tone="warning"
|
|
loading={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|