@@ -163,11 +232,11 @@ const ProductDetails = () => {
-
+
Unidades Vendidas
-
{totalSold}
+
{formatNumber(totalSold)}
@@ -182,15 +251,57 @@ const ProductDetails = () => {
+
+
+
Ticket Médio
+
{formatCurrency(averageTicket)}
+
+
+
+
+
+
+
+
Estoque
+
{formatNumber(productInfo.stock)}
+
+
+
+
+
-
- Volume de Vendas por {isSingleDayRange ? 'Horário' : 'Data'}
-
+
+
+
{selectedMetric.title}
+
{selectedMetric.subtitle}
+
+
+ {(Object.keys(metricConfig) as ProductChartMetric[]).map(metric => (
+
+ ))}
+
+
+ {metricChartData.length === 0 ? (
+
+ Nenhuma venda no período selecionado.
+
+ ) : (
-
+
@@ -205,11 +316,11 @@ const ProductDetails = () => {
textAnchor={isSingleDayRange ? 'middle' : 'end'}
height={isSingleDayRange ? 24 : 80}
/>
-
- } cursor={{ fill: CHART_CURSOR_COLOR }} />
+ selectedMetric.tickFormatter(Number(value))} />
+ } cursor={{ fill: CHART_CURSOR_COLOR }} />
{
+ )}
+
+
+
+
+
+
Variações do Produto
+
Tamanhos, cores ou SKUs parecidos no mesmo período.
+
+
+ {formatNumber(totalOrders)} {totalOrders === 1 ? 'pedido' : 'pedidos'}
+
+
+ {variantBreakdown.length === 0 ? (
+
+ Nenhuma variação encontrada para este produto.
+
+ ) : (
+
+ {variantBreakdown.map(variant => {
+ const width = maxVariantQuantity ? Math.max(4, (variant.quantitySold / maxVariantQuantity) * 100) : 0;
+
+ return (
+
+
+
+
{variant.name}
+
#{variant.id}
+
+
+
+
{formatNumber(variant.quantitySold)} un.
+
vendidas
+
+
+
{formatCurrency(variant.revenue)}
+
receita
+
+
+
+
+
+ );
+ })}
+
+ )}
diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index 4d62688..97e9837 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -7,24 +7,68 @@ import type { DateRange, ProductAnalyticsItem } from '../types';
import { exportToCSV, fetchProductAnalytics } from '../dataService';
import type { ProductSummary } from '../analytics/products';
+type ProductHealth = {
+ label: string;
+ className: string;
+};
+
+const getDateOnlyTime = (value?: string | null) => {
+ if (!value) return 0;
+ const date = new Date(`${String(value).slice(0, 10)}T00:00:00`);
+ return Number.isNaN(date.getTime()) ? 0 : date.getTime();
+};
+
+const getProductHealth = (product: ProductSummary, dateRange: DateRange): ProductHealth => {
+ const endTime = new Date(dateRange.end.getFullYear(), dateRange.end.getMonth(), dateRange.end.getDate()).getTime();
+ const startTime = new Date(dateRange.start.getFullYear(), dateRange.start.getMonth(), dateRange.start.getDate()).getTime();
+ const rangeDays = Math.max(1, Math.round((endTime - startTime) / 86400000) + 1);
+ const lastSaleTime = getDateOnlyTime(product.lastSaleDate);
+ const firstSaleTime = getDateOnlyTime(product.firstSaleDate);
+ const daysSinceLastSale = lastSaleTime ? Math.max(0, Math.round((endTime - lastSaleTime) / 86400000)) : Infinity;
+ const daysSinceFirstSale = firstSaleTime ? Math.max(0, Math.round((endTime - firstSaleTime) / 86400000)) : Infinity;
+
+ if (product.totalSold > 0 && product.stock > 0 && product.stock <= Math.max(3, product.totalSold * 0.15)) {
+ return { label: 'Estoque baixo', className: 'border-amber-500/35 bg-amber-500/10 text-amber-700 dark:text-amber-300' };
+ }
+
+ if (!product.totalSold) {
+ return { label: 'Sem venda', className: 'border-zinc-500/25 bg-zinc-500/10 text-zinc-600 dark:text-zinc-400' };
+ }
+
+ if (daysSinceFirstSale <= Math.min(14, rangeDays)) {
+ return { label: 'Novo', className: 'border-cyan-500/35 bg-cyan-500/10 text-cyan-700 dark:text-cyan-300' };
+ }
+
+ if (daysSinceLastSale <= Math.max(1, Math.min(7, Math.ceil(rangeDays * 0.2)))) {
+ return { label: 'Quente', className: 'border-emerald-500/35 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300' };
+ }
+
+ if (daysSinceLastSale > Math.max(14, Math.ceil(rangeDays * 0.55))) {
+ return { label: 'Esfriando', className: 'border-orange-500/35 bg-orange-500/10 text-orange-700 dark:text-orange-300' };
+ }
+
+ return { label: 'Estável', className: 'border-sky-500/35 bg-sky-500/10 text-sky-700 dark:text-sky-300' };
+};
+
const ProductTableSkeleton = () => (
-
- {[0, 1, 2, 3, 4, 5].map(item => (
+
+ {[0, 1, 2, 3, 4, 5, 6].map(item => (
))}
{[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
-
+
+
@@ -79,7 +123,9 @@ const Products = () => {
totalSold: product.quantitySold,
revenue: product.revenue,
lastPrice: product.lastPrice,
- stock: product.stock
+ stock: product.stock,
+ firstSaleDate: product.firstSaleDate,
+ lastSaleDate: product.lastSaleDate
}));
const filteredProducts = normalizedSearch
? products.filter(product =>
@@ -139,6 +185,8 @@ const Products = () => {
'Descrição': product.name,
'Preço Atual (R$)': product.lastPrice.toFixed(2).replace('.', ','),
'Total Vendido (un.)': product.totalSold,
+ 'Status': getProductHealth(product, dateRange).label,
+ 'Estoque': product.stock,
'Receita Gerada (R$)': product.revenue.toFixed(2).replace('.', ',')
}));
exportToCSV(exportData, `produtos_${new Date().toISOString().split('T')[0]}.csv`);
@@ -165,42 +213,52 @@ const Products = () => {
ID Produto |
Descrição |
Total Vendido |
+
Status |
Estoque |
Receita Gerada |
Ações |
- {paginatedData.map((product) => (
-
- | #{product.id} |
-
- {product.name}
- Preço Atual: {formatCurrency(product.lastPrice)}
- |
-
-
-
- {product.totalSold} un.
- |
-
-
- {product.stock} un.
-
- |
- {formatCurrency(product.revenue)} |
-
-
-
- Ver Gráfico
-
- |
-
- ))}
+ {paginatedData.map((product) => {
+ const health = getProductHealth(product, dateRange);
+
+ return (
+
+ | #{product.id} |
+
+ {product.name}
+ Preço Atual: {formatCurrency(product.lastPrice)}
+ |
+
+
+
+ {product.totalSold} un.
+ |
+
+
+ {health.label}
+
+ |
+
+
+ {product.stock} un.
+
+ |
+ {formatCurrency(product.revenue)} |
+
+
+
+ Ver Gráfico
+
+ |
+
+ );
+ })}
diff --git a/src/types.ts b/src/types.ts
index df2a753..12e7745 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -115,13 +115,27 @@ export interface ProductDetailsAnalytics {
id: string;
name: string;
price: number;
+ stock: number;
};
chartData: Array<{
date: string;
value: number;
+ quantitySold?: number;
+ revenue?: number;
+ orderCount?: number;
+ averageTicket?: number;
}>;
totalSold: number;
totalRevenue: number;
+ totalOrders?: number;
+ averageTicket?: number;
+ variantBreakdown?: Array<{
+ id: string;
+ name: string;
+ quantitySold: number;
+ revenue: number;
+ orderCount: number;
+ }>;
}
export interface ClientAnalyticsItem {