59 lines
3.5 KiB
TypeScript
59 lines
3.5 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { Boxes } from 'lucide-react';
|
||
|
|
import { useCRM } from '../context/CRMContext';
|
||
|
|
|
||
|
|
const Inventory: React.FC = () => {
|
||
|
|
const { inventory } = useCRM();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="glass-card rounded-2xl border border-white/5 shadow-sm overflow-hidden animate-in fade-in duration-500">
|
||
|
|
<div className="p-6 bg-white/[0.02] border-b border-white/5 flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-xl font-bold text-white tracking-tight">Estoque & Armazenamento</h2>
|
||
|
|
<p className="text-xs text-slate-500 tracking-wide mt-1">Visão geral dos ativos em custódia.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-6">
|
||
|
|
{inventory.length > 0 ? inventory.map((item, idx) => (
|
||
|
|
<div key={idx} className="p-5 rounded-xl border border-white/5 bg-black/20 group hover:bg-[#0F1115] hover:border-indigo-500/30 transition-all relative overflow-hidden">
|
||
|
|
<div className="absolute top-0 right-0 p-2 opacity-50">
|
||
|
|
<Boxes size={48} className="text-white/5" strokeWidth={1} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex justify-between items-start mb-3 relative z-10">
|
||
|
|
<span className="text-[10px] font-mono text-slate-500 border border-white/10 px-1.5 py-0.5 rounded">{item.sku}</span>
|
||
|
|
<span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-[10px] font-bold tracking-tight">QTD: {item.quantity}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 className="text-sm font-bold text-white mb-4 leading-tight h-10 overflow-hidden line-clamp-2 relative z-10" title={item.name}>{item.name}</h4>
|
||
|
|
|
||
|
|
<div className="space-y-2 mb-4 relative z-10 bg-black/20 p-3 rounded-lg border border-white/5">
|
||
|
|
<div className="flex justify-between text-[10px] font-bold uppercase text-slate-500">
|
||
|
|
<span>Custo Base</span>
|
||
|
|
<span className="text-slate-300 font-mono">R$ {item.avgCostBRL.toFixed(2)}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between text-[10px] font-bold uppercase text-slate-500">
|
||
|
|
<span>Preço Alvo</span>
|
||
|
|
<span className="text-emerald-400 font-mono">R$ {item.marketPriceBRL.toFixed(2)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button className="w-full py-2 bg-white/5 border border-white/10 rounded-lg text-[10px] font-bold text-slate-400 group-hover:bg-indigo-600 group-hover:text-white group-hover:border-indigo-500 transition-all uppercase tracking-wider relative z-10">
|
||
|
|
Lançar Venda
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)) : (
|
||
|
|
<div className="col-span-full py-40 text-center opacity-30">
|
||
|
|
<Boxes size={64} className="mx-auto mb-4 text-white" strokeWidth={1} />
|
||
|
|
<p className="text-xs font-mono uppercase tracking-widest text-slate-500">Nenhum item em estoque</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Inventory;
|