Biblioteca de componentes para KPIs do DBCHECKOUT
Componentes
Tipagem Completa
Responsivo
CSS Framework
Esta documentação técnica define os componentes React reutilizáveis para construção dos dashboards e interfaces analíticas do DBCHECKOUT. Cada componente foi projetado seguindo princípios de:
Componentes genéricos e configuráveis
TypeScript com interfaces completas
Mobile-first, adaptativo
Loading, error, empty, success
| Nome | Tipo | Obrigatório | Descrição |
|---|---|---|---|
title | string | Sim | Título da métrica |
value | string | number | Sim | Valor principal da métrica |
change | number | Não | Variação percentual (ex: 12.5) |
changeType | 'positive' | 'negative' | 'neutral' | Não | Tipo de variação para cor |
icon | string | Não | Classe do ícone (Remix Icon) |
gradient | string | Não | Classes Tailwind para gradiente |
loading | boolean | Não | Estado de carregamento |
error | string | Não | Mensagem de erro |
onClick | () => void | Não | Callback ao clicar no card |
Skeleton animado com shimmer effect
Ícone de alerta com mensagem de erro
Exibe "Sem dados" com ícone
Exibe valor e variação normalmente
Grid adaptativo: 1 col (mobile), 2 cols (tablet), 4 cols (desktop)
<MetricCard
title="Faturamento"
value="R$ 487.255"
change={12.5}
changeType="positive"
icon="ri-money-dollar-circle-line"
gradient="from-emerald-500 to-teal-600"
/>interface Column {
key: string;
label: string;
sortable?: boolean;
align?: 'left' | 'center' | 'right';
format?: 'text' | 'number' | 'currency' | 'percent' | 'date';
width?: string;
render?: (value: any, row: any) => ReactNode;
}interface HierarchyData {
[group: string]: {
[type: string]: string[];
};
}
// Exemplo:
const hierarchy: HierarchyData = {
Pizzas: {
Tradicional: ['Pequena', 'Média', 'Grande'],
Premium: ['Média', 'Grande', 'Gigante']
}
};interface TotalizerMetric {
label: string;
value: string | number;
icon?: string;
change?: number;
changeType?: 'positive' | 'negative' | 'neutral';
}interface Filter {
type: 'text' | 'select' | 'multi-select' | 'date' | 'date-range' | 'number-range';
label: string;
key: string;
options?: { label: string; value: any }[];
placeholder?: string;
defaultValue?: any;
}interface ComparisonData {
[key: string]: any;
}
// Exemplo:
const salesData: ComparisonData[] = [
{ date: '2024-01', store: 'Centro', revenue: 45000 },
{ date: '2024-01', store: 'Zona Sul', revenue: 38000 },
{ date: '2024-02', store: 'Centro', revenue: 52000 }
];