blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add seller performance dashboard charts
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 35s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-24 13:24:28 -03:00
parent ca9615a1fd
commit ef27cff046
5 changed files with 262 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/Dashboard.tsx
View File

@@ -25,18 +25,19 @@ type CustomTooltipProps = {
payload?: ChartTooltipPayload[];
label?: string;
isCurrency?: boolean;
valueLabel?: string;
};
const CustomTooltip = ({ active, payload, label, isCurrency }: CustomTooltipProps) => {
const CustomTooltip = ({ active, payload, label, isCurrency, valueLabel }: CustomTooltipProps) => {
if (active && payload && payload.length) {
const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
const displayLabel = label || payload[0].name;
const value = isCurrency ? formatCurrency(payload[0].value) : payload[0].value;
const valueLabel = isCurrency ? 'Receita:' : 'Vendas:';
const displayValueLabel = valueLabel || (isCurrency ? 'Receita:' : 'Vendas:');
return (
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
<p className="font-bold mb-1" style={{ color }}>{displayLabel}</p>
<p className="text-[#ededed] m-0">{valueLabel} {value}</p>
<p className="text-[#ededed] m-0">{displayValueLabel} {value}</p>
</div>
);
}
@@ -78,7 +79,7 @@ const Dashboard = () => {
return () => clearInterval(intervalId);
}, [dateRange, loadDashboardMetrics, refreshInterval]);
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller } = useMemo(() => {
if (serverMetrics) return applyDashboardColors(serverMetrics);
return buildDashboardMetrics(ordersData, dateRange);
}, [dateRange, ordersData, serverMetrics]);
@@ -148,6 +149,76 @@ const Dashboard = () => {
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
<h3 className="text-lg font-bold mb-6 text-dark-text">Receita por Vendedor</h3>
<div className="h-72 w-full flex items-center justify-center">
{revenueBySeller.length ? (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={revenueBySeller} margin={{ top: 5, right: 24, left: 18, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<XAxis dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tick={false} />
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip isCurrency valueLabel="Receita:" />} cursor={{ fill: '#222222' }} />
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
{revenueBySeller.map((entry) => (
<Cell key={`seller-revenue-${entry.id}`} fill={entry.fill} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
) : (
<p className="text-sm font-semibold text-dark-muted">Nenhuma venda com vendedor no período.</p>
)}
</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{revenueBySeller.map((entry) => (
<div key={`seller-revenue-legend-${entry.id}`} className="flex min-w-0 items-center justify-between gap-3 text-[10px]">
<div className="flex min-w-0 items-center">
<span className="mr-2 h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: entry.fill }} />
<span className="truncate font-semibold text-dark-muted" title={entry.name}>{entry.name}</span>
</div>
<span className="shrink-0 font-bold text-dark-text">{formatCurrency(entry.value)}</span>
</div>
))}
</div>
</div>
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
<h3 className="text-lg font-bold mb-6 text-dark-text">Pedidos por Vendedor</h3>
<div className="h-72 w-full flex items-center justify-center">
{ordersBySeller.length ? (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={ordersBySeller} margin={{ top: 5, right: 24, left: 18, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<XAxis dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tick={false} />
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} allowDecimals={false} />
<Tooltip content={<CustomTooltip valueLabel="Pedidos:" />} cursor={{ fill: '#222222' }} />
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
{ordersBySeller.map((entry) => (
<Cell key={`seller-orders-${entry.id}`} fill={entry.fill} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
) : (
<p className="text-sm font-semibold text-dark-muted">Nenhum pedido com vendedor no período.</p>
)}
</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{ordersBySeller.map((entry) => (
<div key={`seller-orders-legend-${entry.id}`} className="flex min-w-0 items-center justify-between gap-3 text-[10px]">
<div className="flex min-w-0 items-center">
<span className="mr-2 h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: entry.fill }} />
<span className="truncate font-semibold text-dark-muted" title={entry.name}>{entry.name}</span>
</div>
<span className="shrink-0 font-bold text-dark-text">{entry.value}</span>
</div>
))}
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
<h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>