8c2590c56a
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m32s
250 lines
11 KiB
TypeScript
250 lines
11 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useOutletContext, useNavigate } from 'react-router-dom';
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
|
import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
|
|
import DateRangePicker from '../components/DateRangePicker';
|
|
import type { OrderData, DateRange } from '../types';
|
|
import { parseOrderDate } from '../dataService';
|
|
|
|
const COLORS = [
|
|
// 10 Strong Base Colors
|
|
'#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316',
|
|
'#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6',
|
|
// 10 Softer Versions
|
|
'#6ee7b7', '#93c5fd', '#c4b5fd', '#fda4af', '#fdba74',
|
|
'#67e8f9', '#f9a8d4', '#fde047', '#a5b4fc', '#5eead4'
|
|
];
|
|
|
|
const globalColorMap: Record<string, string> = {};
|
|
let globalColorIndex = 0;
|
|
|
|
const getProductColor = (name: string) => {
|
|
if (!globalColorMap[name]) {
|
|
globalColorMap[name] = COLORS[globalColorIndex % COLORS.length];
|
|
globalColorIndex++;
|
|
}
|
|
return globalColorMap[name];
|
|
};
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
|
|
};
|
|
|
|
type ChartTooltipPayload = {
|
|
value: number;
|
|
name?: string;
|
|
color?: string;
|
|
payload?: {
|
|
fill?: string;
|
|
};
|
|
};
|
|
|
|
type CustomTooltipProps = {
|
|
active?: boolean;
|
|
payload?: ChartTooltipPayload[];
|
|
label?: string;
|
|
isCurrency?: boolean;
|
|
};
|
|
|
|
const CustomTooltip = ({ active, payload, label, isCurrency }: 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:';
|
|
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>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const Dashboard = () => {
|
|
const navigate = useNavigate();
|
|
const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{
|
|
dateRange: DateRange,
|
|
setDateRange: (range: DateRange) => void,
|
|
ordersData: OrderData[],
|
|
refreshInterval: number,
|
|
setRefreshInterval: (interval: number) => void,
|
|
loadData: (showLoading?: boolean) => void
|
|
}>();
|
|
|
|
const filteredData = useMemo(() => {
|
|
const orders = ordersData;
|
|
return orders.filter(order => {
|
|
const orderDate = parseOrderDate(order.Data_Pedido);
|
|
return orderDate >= dateRange.start && orderDate <= dateRange.end;
|
|
});
|
|
}, [dateRange, ordersData]);
|
|
|
|
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
|
|
let revenue = 0;
|
|
let totalItems = 0;
|
|
const productSalesMap: Record<string, number> = {};
|
|
const productRevenueMap: Record<string, number> = {};
|
|
const productNameIdMap: Record<string, string> = {};
|
|
|
|
filteredData.forEach(order => {
|
|
const itemRevenue = order.Quantidade * order.Valor_Unitario;
|
|
revenue += itemRevenue;
|
|
totalItems += order.Quantidade;
|
|
const productName = order.Descricao_Produto.split(' TAMANHO')[0];
|
|
productNameIdMap[productName] = order.ID_Produto;
|
|
|
|
if (productSalesMap[productName]) {
|
|
productSalesMap[productName] += order.Quantidade;
|
|
productRevenueMap[productName] += itemRevenue;
|
|
} else {
|
|
productSalesMap[productName] = order.Quantidade;
|
|
productRevenueMap[productName] = itemRevenue;
|
|
}
|
|
});
|
|
|
|
// Identify which products will actually be displayed in both charts (Top 10 of each)
|
|
const topSalesNames = Object.keys(productSalesMap).sort((a, b) => productSalesMap[b] - productSalesMap[a]).slice(0, 10);
|
|
const topRevenueNames = Object.keys(productRevenueMap).sort((a, b) => productRevenueMap[b] - productRevenueMap[a]).slice(0, 10);
|
|
|
|
// Combine them into a unique set to assign colors only to the VISIBLE products
|
|
const displayProducts = Array.from(new Set([...topSalesNames, ...topRevenueNames])).sort();
|
|
const productColors: Record<string, string> = {};
|
|
|
|
displayProducts.forEach((name) => {
|
|
productColors[name] = getProductColor(name);
|
|
});
|
|
|
|
const productsData = topSalesNames.map(name => ({
|
|
name,
|
|
id: productNameIdMap[name],
|
|
value: productSalesMap[name],
|
|
fill: productColors[name]
|
|
}));
|
|
|
|
const revenueData = topRevenueNames.map(name => ({
|
|
name,
|
|
id: productNameIdMap[name],
|
|
value: productRevenueMap[name],
|
|
fill: productColors[name]
|
|
}));
|
|
|
|
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
|
|
}, [filteredData]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-2 text-dark-text">Visão Geral</h1>
|
|
<p className="text-dark-muted font-medium">Resumo de vendas e performance dos produtos.</p>
|
|
</div>
|
|
<DateRangePicker
|
|
dateRange={dateRange}
|
|
onChange={setDateRange}
|
|
refreshInterval={refreshInterval}
|
|
setRefreshInterval={setRefreshInterval}
|
|
onManualRefresh={() => loadData(true)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<p className="text-dark-muted text-sm font-medium mb-1">Receita Total</p>
|
|
<h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totalRevenue)}</h3>
|
|
</div>
|
|
<div className="p-3 bg-emerald-500/10 rounded-xl">
|
|
<DollarSign className="w-6 h-6 text-emerald-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<p className="text-dark-muted text-sm font-medium mb-1">Total de Produtos Vendidos</p>
|
|
<h3 className="text-3xl font-bold text-dark-text">{totalOrders}</h3>
|
|
</div>
|
|
<div className="p-3 bg-blue-500/10 rounded-xl">
|
|
<ShoppingCart className="w-6 h-6 text-blue-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<p className="text-dark-muted text-sm font-medium mb-1">Ticket Médio (Por Item)</p>
|
|
<h3 className="text-3xl font-bold text-dark-text">{formatCurrency(averageOrderValue)}</h3>
|
|
</div>
|
|
<div className="p-3 bg-purple-500/10 rounded-xl">
|
|
<TrendingUp className="w-6 h-6 text-purple-500" />
|
|
</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>
|
|
<div className="h-80 w-full flex items-center justify-center">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, 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 />} cursor={{ fill: '#222222' }} />
|
|
<Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
|
|
{salesByProduct.map((entry) => (
|
|
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-2 gap-2">
|
|
{salesByProduct.map((entry) => (
|
|
<div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
|
|
<span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
|
|
<span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</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">Receita por Produto</h3>
|
|
<div className="h-80 w-full flex items-center justify-center">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
|
|
{revenueByProduct.map((entry) => (
|
|
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-2 gap-2">
|
|
{revenueByProduct.map((entry) => (
|
|
<div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
|
|
<span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
|
|
<span className="text-dark-muted truncate font-semibold">{entry.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|