<![CDATA[import React, { useState } from 'react';
import { TrendingUp, TrendingDown, Target, AlertCircle, CheckCircle, DollarSign, BarChart3 } from 'lucide-react';
const ProductAnalysisTable = () => {
const [exchangeRate] = useState(5.20); // USD para BRL (taxa atual aproximada)
const products = [
{
id: 1,
name: "Sigma 50-200mm f/4.0-5.6",
description: "Zoom into Perfection",
originalPrice: 229.99,
salePrice: 126.50,
discount: 103.49,
category: "Lentes",
brand: "Sigma",
marketDemand: "Alta",
competitiveness: "Média",
shelfLife: "Longo",
weightKg: 1.1, // Lente zoom padrão
dimensions: "20x15x15 cm"
},
{
id: 2,
name: "Sigma 120-400mm Lens",
description: "Capture the Unseen",
originalPrice: 1049.99,
salePrice: 649.99,
discount: 400.00,
category: "Lentes",
brand: "Sigma",
marketDemand: "Média",
competitiveness: "Baixa",
shelfLife: "Longo",
weightKg: 2.8, // Lente telefoto grande
dimensions: "35x25x25 cm"
},
{
id: 3,
name: "Canon EOS Rebel T5i Premium Kit",
description: "Elevate Your Photography",
originalPrice: 329.99,
salePrice: 250.00,
discount: 79.99,
category: "Câmeras",
brand: "Canon",
marketDemand: "Alta",
competitiveness: "Média",
shelfLife: "Médio",
weightKg: 1.5, // Kit câmera com acessórios
dimensions: "30x25x20 cm"
},
{
id: 4,
name: "Battery Grip BG-E8",
description: "Extend Your Photography Sessions",
originalPrice: 189.77,
salePrice: 79.77,
discount: 110.00,
category: "Fotografia",
brand: "Canon",
marketDemand: "Alta",
competitiveness: "Média",
shelfLife: "Longo",
weightKg: 0.8, // Peso aproximado em kg
dimensions: "14x12x8 cm"
},
{
id: 5,
name: "Citizen Watch Promaster NY0125-83E",
description: "Relógio Mergulho Profissional",
originalPrice: 379.00,
salePrice: 160.00,
discount: 219.00,
category: "Relógios",
brand: "Citizen",
marketDemand: "Média",
competitiveness: "Alta",
shelfLife: "Muito Longo",
weightKg: 0.4, // Relógio de aço
dimensions: "15x15x5 cm"
},
{
id: 6,
name: "Bulova 98B423 Marine Star",
description: "Relógio Esportivo Marinho",
originalPrice: 320.77,
salePrice: 155.00,
discount: 165.77,
category: "Relógios",
brand: "Bulova",
marketDemand: "Média",
competitiveness: "Alta",
shelfLife: "Muito Longo",
weightKg: 0.35, // Relógio com pulseira metálica
dimensions: "15x15x4 cm"
},
{
id: 7,
name: "Citizen Eco-Drive Weekender",
description: "Relógio Solar Casual",
originalPrice: 200.00,
salePrice: 135.00,
discount: 65.00,
category: "Relógios",
brand: "Citizen",
marketDemand: "Alta",
competitiveness: "Média",
shelfLife: "Muito Longo",
weightKg: 0.3, // Relógio com pulseira de couro
dimensions: "12x12x3 cm"
},
{
id: 8,
name: "Sony ZV-1F Vlogging Camera",
description: "Câmera para Vlogging - Bundle Preto",
originalPrice: 599.77,
salePrice: 430.00,
discount: 169.77,
category: "Câmeras",
brand: "Sony",
marketDemand: "Muito Alta",
competitiveness: "Baixa",
shelfLife: "Médio",
weightKg: 1.2, // Câmera + acessórios do bundle
dimensions: "25x20x15 cm"
}
];
const calculateBrazilianPrices = (product) => {
const costBRL = product.salePrice * exchangeRate;
const importTax = costBRL * 0.60; // Taxa de importação aproximada
// Cálculo do frete baseado no peso (USD 75 por kg)
const shippingCostUSD = product.weightKg * 75;
const shippingCostBRL = shippingCostUSD * exchangeRate;
const totalCost = costBRL + importTax + shippingCostBRL;
// Margens sugeridas baseadas na categoria e demanda
const margins = {
"Fotografia": { quick: 1.3, standard: 1.5, premium: 1.8 },
"Relógios": { quick: 1.4, standard: 1.7, premium: 2.1 },
"Câmeras": { quick: 1.2, standard: 1.4, premium: 1.6 },
"Lentes": { quick: 1.35, standard: 1.6, premium: 1.9 }
};
const categoryMargins = margins[product.category];
return {
costBRL: Math.round(costBRL),
importTax: Math.round(importTax),
shippingCostBRL: Math.round(shippingCostBRL),
shippingCostUSD: Math.round(shippingCostUSD),
totalCost: Math.round(totalCost),
quickSale: Math.round(totalCost * categoryMargins.quick),
standardPrice: Math.round(totalCost * categoryMargins.standard),
premiumPrice: Math.round(totalCost * categoryMargins.premium)
};
};
const getPredictiveAnalysis = (product) => {
const analysis = calculateBrazilianPrices(product);
const profitQuick = analysis.quickSale - analysis.totalCost;
const marginQuick = ((profitQuick / analysis.quickSale) * 100).toFixed(1);
let recommendation = "";
let priority = "";
let timeToSell = "";
if (product.marketDemand === "Muito Alta") {
recommendation = "Venda Rápida Recomendada";
priority = "Alta";
timeToSell = "7-15 dias";
} else if (product.marketDemand === "Alta") {
recommendation = "Preço Competitivo";
priority = "Média-Alta";
timeToSell = "15-30 dias";
} else {
recommendation = "Estratégia de Nicho";
priority = "Média";
timeToSell = "30-60 dias";
}
return {
...analysis,
profitQuick,
marginQuick,
recommendation,
priority,
timeToSell
};
};
const getDemandIcon = (demand) => {
switch (demand) {
case "Muito Alta": return <TrendingUp className="h-5 w-5 text-green-600" />;
case "Alta": return <TrendingUp className="h-5 w-5 text-blue-600" />;
case "Média": return <Target className="h-5 w-5 text-yellow-600" />;
default: return <TrendingDown className="h-5 w-5 text-red-600" />;
}
};
const getPriorityBadge = (priority) => {
const colors = {
"Alta": "bg-red-100 text-red-800",
"Média-Alta": "bg-orange-100 text-orange-800",
"Média": "bg-yellow-100 text-yellow-800",
"Baixa": "bg-gray-100 text-gray-800"
};
return (
<span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[priority]}`}>
{priority}
</span>
);
};
const totalShippingCost = products.reduce((sum, product) => {
const analysis = calculateBrazilianPrices(product);
return sum + analysis.shippingCostBRL;
}, 0);
const totalWeight = products.reduce((sum, product) => sum + product.weightKg, 0);
const totalInvestment = products.reduce((sum, product) => {
const analysis = calculateBrazilianPrices(product);
return sum + analysis.totalCost;
}, 0);
const totalQuickRevenue = products.reduce((sum, product) => {
const analysis = calculateBrazilianPrices(product);
return sum + analysis.quickSale;
}, 0);
const totalProfit = totalQuickRevenue - totalInvestment;
const overallMargin = ((totalProfit / totalQuickRevenue) * 100).toFixed(1);
return (
<div className="p-6 bg-gray-50 min-h-screen">
<div className="max-w-7xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">
Análise Preditiva de Produtos - Estratégia Brasil
</h1>
<p className="text-gray-600">
Taxa de câmbio: USD 1,00 = BRL {exchangeRate.toFixed(2)}
</p>
</div>
{/* Resumo Executivo */}
<div className="grid grid-cols-1 md:grid-cols-6 gap-4 mb-8">
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Produtos</p>
<p className="text-2xl font-bold text-gray-900">
{products.length}
</p>
</div>
<BarChart3 className="h-6 w-6 text-gray-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Peso Total</p>
<p className="text-2xl font-bold text-gray-900">
{totalWeight.toFixed(1)} kg
</p>
</div>
<Target className="h-6 w-6 text-gray-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Frete Total</p>
<p className="text-xl font-bold text-orange-600">
R$ {totalShippingCost.toLocaleString('pt-BR')}
</p>
</div>
<TrendingUp className="h-6 w-6 text-orange-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Investimento</p>
<p className="text-xl font-bold text-blue-600">
R$ {totalInvestment.toLocaleString('pt-BR')}
</p>
</div>
<DollarSign className="h-6 w-6 text-blue-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Receita</p>
<p className="text-xl font-bold text-green-600">
R$ {totalQuickRevenue.toLocaleString('pt-BR')}
</p>
</div>
<TrendingUp className="h-6 w-6 text-green-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Lucro</p>
<p className="text-xl font-bold text-purple-600">
R$ {totalProfit.toLocaleString('pt-BR')}
</p>
<p className="text-xs text-gray-500">{overallMargin}%</p>
</div>
<CheckCircle className="h-6 w-6 text-purple-600" />
</div>
</div>
</div>
{/* Tabela Principal */}
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-semibold text-gray-900">
Análise Detalhada por Produto
</h2>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Produto (Peso/Dimensões)
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Custo + Frete (BRL)
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Custo Total Final
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Preço Venda Rápida
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Margem de Lucro
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Demanda
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Prioridade
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tempo Estimado
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{products.map((product) => {
const analysis = getPredictiveAnalysis(product);
return (
<tr key={product.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<div>
<div className="text-sm font-medium text-gray-900">
{product.name}
</div>
<div className="text-sm text-gray-500">
{product.brand} | {product.category}
</div>
<div className="text-xs text-blue-600 font-medium">
{product.weightKg}kg • {product.dimensions}
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
${product.salePrice.toFixed(2)}
</div>
<div className="text-xs text-orange-600 font-medium">
+ ${analysis.shippingCostUSD} frete
</div>
<div className="text-xs text-gray-500">
(Era: ${product.originalPrice.toFixed(2)})
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">
R$ {analysis.totalCost.toLocaleString('pt-BR')}
</div>
<div className="text-xs text-gray-500">
Produto: R$ {analysis.costBRL}
</div>
<div className="text-xs text-gray-500">
Taxas: R$ {analysis.importTax}
</div>
<div className="text-xs text-orange-600">
Frete: R$ {analysis.shippingCostBRL}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-bold text-green-600">
R$ {analysis.quickSale.toLocaleString('pt-BR')}
</div>
<div className="text-xs text-gray-500">
Padrão: R$ {analysis.standardPrice.toLocaleString('pt-BR')}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-gray-900">
R$ {analysis.profitQuick.toLocaleString('pt-BR')}
</div>
<div className="text-xs text-green-600 font-medium">
{analysis.marginQuick}%
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
{getDemandIcon(product.marketDemand)}
<span className="ml-2 text-sm text-gray-900">
{product.marketDemand}
</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
{getPriorityBadge(analysis.priority)}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
{analysis.timeToSell}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
{/* Análise Preditiva por Categoria */}
<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<CheckCircle className="h-5 w-5 text-green-600 mr-2" />
Recomendações Prioritárias
</h3>
<div className="space-y-3">
<div className="border-l-4 border-red-500 pl-4">
<p className="font-medium text-red-700">Sigma 120-400mm</p>
<p className="text-sm text-gray-600">
Produto mais pesado: R$ {calculateBrazilianPrices(products[1]).shippingCostBRL} de frete (2.8kg)
</p>
</div>
<div className="border-l-4 border-green-500 pl-4">
<p className="font-medium text-green-700">Lentes Profissionais</p>
<p className="text-sm text-gray-600">
Alta demanda em São Paulo. Nicho fotográfico consolidado.
</p>
</div>
<div className="border-l-4 border-blue-500 pl-4">
<p className="font-medium text-blue-700">Total: {totalWeight.toFixed(1)}kg</p>
<p className="text-sm text-gray-600">
Frete: R$ {totalShippingCost.toLocaleString('pt-BR')} ({(totalShippingCost/totalInvestment*100).toFixed(1)}% do investimento)
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<AlertCircle className="h-5 w-5 text-yellow-600 mr-2" />
Estratégias de Preço
</h3>
<div className="space-y-3">
<div className="bg-yellow-50 p-3 rounded-lg">
<p className="text-sm font-medium text-yellow-800">Lentes Sigma</p>
<p className="text-xs text-yellow-700">
Nicho técnico. Preço competitivo vs. originais Canon/Nikon.
</p>
</div>
<div className="bg-blue-50 p-3 rounded-lg">
<p className="text-sm font-medium text-blue-800">Canon T5i Kit</p>
<p className="text-xs text-blue-700">
Entrada DSLR. Concorrer com mirrorless entry-level.
</p>
</div>
<div className="bg-green-50 p-3 rounded-lg">
<p className="text-sm font-medium text-green-800">Relógios</p>
<p className="text-xs text-green-700">
Baixo frete, alta margem. Parcelamento atrativo.
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<BarChart3 className="h-5 w-5 text-purple-600 mr-2" />
Projeção de Vendas
</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">30 dias</span>
<span className="font-medium text-green-600">60% vendido</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">60 dias</span>
<span className="font-medium text-blue-600">85% vendido</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">90 dias</span>
<span className="font-medium text-purple-600">100% vendido</span>
</div>
<div className="text-xs text-gray-500 mt-2">
*Lentes podem demorar mais (nicho técnico)
</div>
</div>
</div>
</div>
{/* Insights Finais */}
<div className="mt-8 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4">
💡 Insights e Recomendações Finais
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 className="font-medium text-gray-900 mb-2">Estratégia de Venda Rápida:</h4>
<ul className="text-sm text-gray-700 space-y-1">
<li>• Priorizar Sony ZV-1F e Canon T5i (alta demanda)</li>
<li>• Sigma 50-200mm: boa relação peso/preço</li>
<li>• Relógios: venda rápida com parcelamento</li>
<li>• Lentes profissionais: nicho específico</li>
</ul>
</div>
<div>
<h4 className="font-medium text-gray-900 mb-2">Riscos e Mitigação:</h4>
<ul className="text-sm text-gray-700 space-y-1">
<li>• Frete representa {(totalShippingCost/totalInvestment*100).toFixed(1)}% do investimento</li>
<li>• Sigma 120-400mm: maior custo de frete (R$ {calculateBrazilianPrices(products[1]).shippingCostBRL})</li>
<li>• Produtos pesados: negociar frete consolidado</li>
<li>• Portfolio diversificado reduz riscos</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
};
export default ProductAnalysisTable;]]>