235 lines
16 KiB
TypeScript
235 lines
16 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { Search, Package, Plus, Calculator, Trash2, Minus, ShoppingCart, CheckCircle2, Facebook, Tag, ToggleLeft, ToggleRight } from 'lucide-react';
|
||
|
|
import { useCRM } from '../context/CRMContext';
|
||
|
|
import MarketplaceAnalytic from '../components/MarketplaceAnalytic';
|
||
|
|
|
||
|
|
const Sourcing: React.FC = () => {
|
||
|
|
const {
|
||
|
|
searchTerm, setSearchTerm, handleSearch, handleOpportunitySearch, products,
|
||
|
|
selectedProduct, setSelectedProduct, addToShoppingList,
|
||
|
|
shoppingList, removeFromShoppingList,
|
||
|
|
updateShoppingItemQuantity, saveOrderAsQuotation,
|
||
|
|
calculateShoppingTotals, overheadPercent,
|
||
|
|
useOverhead, setUseOverhead,
|
||
|
|
searchLoading, searchError, searchType, setSearchType
|
||
|
|
} = useCRM();
|
||
|
|
|
||
|
|
const onSearchSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (searchType === 'specific') {
|
||
|
|
handleSearch(e);
|
||
|
|
} else {
|
||
|
|
handleOpportunitySearch(searchTerm);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleUpdateQuantity = (item: any, delta: number) => {
|
||
|
|
updateShoppingItemQuantity(item.id, delta);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleRemoveItem = (id: string) => {
|
||
|
|
removeFromShoppingList(id);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-1 xl:grid-cols-12 gap-8 items-start animate-in fade-in duration-500">
|
||
|
|
{/* COLUNA 1: BUSCA */}
|
||
|
|
<div className="xl:col-span-3 space-y-6">
|
||
|
|
<div className="bg-white/5 rounded-[32px] p-6 border border-white/5 shadow-sm backdrop-blur-sm">
|
||
|
|
{/* TABS */}
|
||
|
|
<div className="flex bg-slate-900/50 rounded-2xl p-1 mb-6 border border-white/5">
|
||
|
|
<button
|
||
|
|
onClick={() => setSearchType('specific')}
|
||
|
|
className={`flex-1 py-2 text-[10px] font-bold uppercase tracking-wider rounded-xl transition-all ${searchType === 'specific' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
|
||
|
|
>
|
||
|
|
Busca Específica
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setSearchType('opportunity')}
|
||
|
|
className={`flex-1 py-2 text-[10px] font-bold uppercase tracking-wider rounded-xl transition-all ${searchType === 'opportunity' ? 'bg-emerald-600 text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
|
||
|
|
>
|
||
|
|
Oportunidades
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2 mb-6">
|
||
|
|
{searchType === 'specific' ? <Search size={16} className="text-indigo-400" /> : <Tag size={16} className="text-emerald-400" />}
|
||
|
|
<h2 className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">
|
||
|
|
{searchType === 'specific' ? 'Sourcing Real-Time' : 'Caçador de Margem (>25%)'}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form onSubmit={onSearchSubmit} className="relative group mb-8">
|
||
|
|
<input
|
||
|
|
type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
placeholder={searchType === 'specific' ? "Ex: iPhone 16 Pro Max" : "Ex: Celulares, Drones, Games"}
|
||
|
|
className={`w-full bg-slate-900/50 border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-sm font-semibold outline-none transition-all text-white placeholder-slate-600 shadow-inner ${searchType === 'specific' ? 'focus:border-indigo-500' : 'focus:border-emerald-500'}`}
|
||
|
|
/>
|
||
|
|
<Search className={`absolute left-4 top-1/2 -translate-y-1/2 transition-colors ${searchType === 'specific' ? 'text-slate-500 group-focus-within:text-indigo-500' : 'text-slate-500 group-focus-within:text-emerald-500'}`} size={20} />
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{searchError && (
|
||
|
|
<div className="mb-6 p-4 bg-rose-500/10 border border-rose-500/20 rounded-2xl flex items-center gap-3 text-rose-400">
|
||
|
|
<div className="w-2 h-2 bg-rose-500 rounded-full animate-pulse"></div>
|
||
|
|
<p className="text-xs font-bold uppercase tracking-wide">{searchError}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
|
||
|
|
{searchLoading ? (
|
||
|
|
<div className="py-20 text-center animate-pulse">
|
||
|
|
<div className="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
||
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase">Consultando Compras Paraguai...</p>
|
||
|
|
</div>
|
||
|
|
) : products.map((p, idx) => (
|
||
|
|
<div
|
||
|
|
key={idx}
|
||
|
|
onClick={() => setSelectedProduct(p)}
|
||
|
|
className={`p-5 rounded-3xl border-2 cursor-pointer transition-all hover:scale-[1.02] active:scale-95 ${selectedProduct?.name === p.name
|
||
|
|
? 'border-indigo-500 bg-indigo-500/10 shadow-md'
|
||
|
|
: 'border-white/5 bg-white/5 hover:border-white/10 hover:bg-white/10'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className="flex justify-between items-start">
|
||
|
|
<span className="text-[8px] font-bold uppercase bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-lg text-slate-400">{p.store}</span>
|
||
|
|
</div>
|
||
|
|
<h4 className="text-sm font-bold text-slate-200 leading-tight mt-3 mb-4 line-clamp-2">{p.name}</h4>
|
||
|
|
<div className="flex items-end justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-xl font-bold text-white tracking-tight">US$ {p.priceUSD.toFixed(2)}</p>
|
||
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase">R$ {p.priceBRL.toLocaleString('pt-BR')}</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-end gap-2">
|
||
|
|
{p.salesVolume && (
|
||
|
|
<span className="text-[9px] font-bold uppercase tracking-widest bg-emerald-500/10 text-emerald-400 px-2 py-1 rounded-lg border border-emerald-500/20 shadow-[0_0_10px_rgba(16,185,129,0.1)]">
|
||
|
|
{p.salesVolume}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<button
|
||
|
|
onClick={(e) => { e.stopPropagation(); addToShoppingList(p); }}
|
||
|
|
className="p-3 bg-indigo-600 text-white rounded-2xl hover:bg-indigo-500 transition-all shadow-lg active:scale-90"
|
||
|
|
>
|
||
|
|
<Plus size={18} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
{!searchLoading && products.length === 0 && (
|
||
|
|
<div className="py-24 text-center opacity-20">
|
||
|
|
<Package size={48} strokeWidth={1.5} className="mx-auto mb-4 text-slate-400" />
|
||
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aguardando seu input</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* COLUNA 2: ANÁLISE DETALHADA */}
|
||
|
|
<div className="xl:col-span-6">
|
||
|
|
{selectedProduct ? (
|
||
|
|
<MarketplaceAnalytic product={selectedProduct} overheadPercent={overheadPercent} useOverhead={useOverhead} />
|
||
|
|
) : (
|
||
|
|
<div className="bg-white/5 rounded-[40px] border border-white/5 shadow-sm min-h-[600px] flex flex-col items-center justify-center p-20 text-center backdrop-blur-sm">
|
||
|
|
<div className="w-24 h-24 bg-slate-800/50 rounded-[32px] flex items-center justify-center mb-8 border border-white/5 shadow-inner">
|
||
|
|
<Calculator size={40} className="text-slate-600" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-bold text-white mb-4 tracking-tight">Analítica de Arbitragem</h3>
|
||
|
|
<p className="text-slate-500 max-w-sm text-sm font-medium leading-relaxed">Selecione um produto para ver a comparação de margem real entre os marketplaces do Brasil e sua venda direta no Facebook.</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* COLUNA 3: COTAÇÃO / CRM CHECKOUT */}
|
||
|
|
<div className="xl:col-span-3">
|
||
|
|
<div className="bg-white/5 rounded-[40px] border border-white/5 shadow-sm flex flex-col min-h-[700px] sticky top-[120px] overflow-hidden backdrop-blur-sm">
|
||
|
|
<div className="p-8 border-b border-white/5 flex justify-between items-center bg-white/5">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-sm font-bold text-white uppercase tracking-widest leading-none">Minha Cotação</h2>
|
||
|
|
<p className="text-[9px] font-bold text-indigo-400 uppercase mt-1">Sourcing Ativo</p>
|
||
|
|
</div>
|
||
|
|
<span className="w-9 h-9 bg-indigo-600 text-white text-xs font-bold rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30">{shoppingList.length}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex-grow p-6 space-y-4 overflow-y-auto max-h-[450px] custom-scrollbar">
|
||
|
|
{shoppingList.length > 0 ? (
|
||
|
|
shoppingList.map(item => (
|
||
|
|
<div key={item.id} className="p-5 bg-slate-900/50 rounded-3xl border border-white/5 group transition-all hover:border-indigo-500/30 hover:shadow-md">
|
||
|
|
<div className="flex justify-between items-start mb-4">
|
||
|
|
<div className="flex-grow pr-4">
|
||
|
|
<span className="text-[9px] font-bold text-slate-500 uppercase tracking-wider">{item.store}</span>
|
||
|
|
<h4 className="text-xs font-bold text-slate-200 leading-tight mt-1">{item.name}</h4>
|
||
|
|
</div>
|
||
|
|
<button onClick={() => handleRemoveItem(item.id)} className="text-slate-600 hover:text-rose-500 transition-colors">
|
||
|
|
<Trash2 size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<p className="text-sm font-bold text-white">US$ {item.priceUSD.toFixed(2)}</p>
|
||
|
|
<div className="flex items-center gap-3 bg-black/20 rounded-xl p-1 border border-white/5">
|
||
|
|
<button onClick={() => handleUpdateQuantity(item, -1)} className="p-1.5 hover:bg-white/10 rounded-lg text-slate-400"><Minus size={12} /></button>
|
||
|
|
<span className="text-xs font-bold text-slate-300 w-5 text-center">{item.quantity}</span>
|
||
|
|
<button onClick={() => handleUpdateQuantity(item, 1)} className="p-1.5 hover:bg-white/10 rounded-lg text-slate-400"><Plus size={12} /></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
) : (
|
||
|
|
<div className="py-24 text-center opacity-10">
|
||
|
|
<ShoppingCart size={64} strokeWidth={1.5} className="mx-auto text-white" />
|
||
|
|
<p className="text-[10px] font-bold text-white uppercase mt-4 tracking-widest">Carrinho Vazio</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-8 bg-slate-900 text-white rounded-t-[40px] space-y-5 border-t border-white/5">
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="flex justify-between items-center opacity-80 hover:opacity-100 transition-opacity">
|
||
|
|
<button
|
||
|
|
onClick={() => setUseOverhead(!useOverhead)}
|
||
|
|
className="flex items-center gap-2 cursor-pointer group"
|
||
|
|
title={useOverhead ? "Desativar Taxas (20%)" : "Ativar Taxas (20%)"}
|
||
|
|
>
|
||
|
|
{useOverhead ? (
|
||
|
|
<ToggleRight size={20} className="text-indigo-400 group-hover:text-indigo-300 transition-colors" />
|
||
|
|
) : (
|
||
|
|
<ToggleLeft size={20} className="text-slate-500 group-hover:text-slate-400 transition-colors" />
|
||
|
|
)}
|
||
|
|
<span className={`text-[10px] font-bold uppercase tracking-widest ${useOverhead ? 'text-indigo-300' : 'text-slate-500'} transition-colors`}>
|
||
|
|
Custo Final Est. ({useOverhead ? 'c/ Taxas' : 's/ Taxas'})
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
<span className={`text-sm font-bold ${useOverhead ? 'text-indigo-100' : 'text-slate-500'} transition-colors`}>
|
||
|
|
R$ {calculateShoppingTotals().totalCostWithOverhead.toLocaleString('pt-BR')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between items-center opacity-60">
|
||
|
|
<span className="text-[10px] font-bold uppercase tracking-widest">Subtotal Paraguai</span>
|
||
|
|
<span className="text-sm font-bold">US$ {calculateShoppingTotals().totalUSD.toLocaleString('en-US')}</span>
|
||
|
|
</div>
|
||
|
|
<div className="pt-4 border-t border-white/10 flex justify-between items-center">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[11px] font-bold text-emerald-400 uppercase tracking-widest">Lucro Est. Final</span>
|
||
|
|
<Facebook size={12} className="text-emerald-400" />
|
||
|
|
</div>
|
||
|
|
<span className="text-2xl font-bold text-emerald-400">R$ {calculateShoppingTotals().totalApproxProfit.toLocaleString('pt-BR')}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={saveOrderAsQuotation}
|
||
|
|
disabled={shoppingList.length === 0}
|
||
|
|
className="w-full bg-indigo-600 text-white font-bold py-5 rounded-[24px] hover:bg-indigo-500 transition-all flex items-center justify-center gap-2 disabled:opacity-20 active:scale-95 shadow-xl shadow-indigo-900/40"
|
||
|
|
>
|
||
|
|
<CheckCircle2 size={20} />
|
||
|
|
SALVAR NO CRM
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Sourcing;
|