504 lines
23 KiB
TypeScript
504 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, Fragment } from 'react';
|
|
import {
|
|
PlusIcon,
|
|
MagnifyingGlassIcon,
|
|
FunnelIcon,
|
|
Square3Stack3DIcon as PackageIcon,
|
|
CurrencyDollarIcon,
|
|
ExclamationTriangleIcon,
|
|
TrashIcon,
|
|
PencilSquareIcon,
|
|
XMarkIcon,
|
|
CheckIcon,
|
|
TagIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { erpApi, Product } from '@/lib/api-erp';
|
|
import { formatCurrency } from '@/lib/format';
|
|
import { useToast } from '@/components/layout/ToastContext';
|
|
import {
|
|
PageHeader,
|
|
StatsCard,
|
|
DataTable,
|
|
Input,
|
|
Card,
|
|
BulkActionBar,
|
|
ConfirmDialog,
|
|
} from "@/components/ui";
|
|
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
|
|
|
|
export default function ProductsPage() {
|
|
const toast = useToast();
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
|
|
const [productToDelete, setProductToDelete] = useState<string | null>(null);
|
|
const [editingProduct, setEditingProduct] = useState<Product | null>(null);
|
|
const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);
|
|
|
|
const [formData, setFormData] = useState<Partial<Product>>({
|
|
name: '',
|
|
sku: '',
|
|
description: '',
|
|
price: 0,
|
|
cost_price: 0,
|
|
type: 'product',
|
|
stock_quantity: 0,
|
|
is_active: true
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchProducts();
|
|
}, []);
|
|
|
|
const fetchProducts = async (silent = false) => {
|
|
try {
|
|
if (!silent) setLoading(true);
|
|
const data = await erpApi.getProducts();
|
|
setProducts(data || []);
|
|
} catch (error) {
|
|
toast.error('Erro ao carregar', 'Não foi possível carregar os produtos');
|
|
} finally {
|
|
setLoading(false);
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (editingProduct?.id) {
|
|
await erpApi.updateProduct(editingProduct.id, formData);
|
|
toast.success('Produto atualizado com sucesso!');
|
|
} else {
|
|
await erpApi.createProduct(formData);
|
|
toast.success('Produto cadastrado com sucesso!');
|
|
}
|
|
setIsModalOpen(false);
|
|
setEditingProduct(null);
|
|
resetForm();
|
|
await fetchProducts(true);
|
|
} catch (error) {
|
|
toast.error(editingProduct ? 'Erro ao atualizar produto' : 'Erro ao salvar produto');
|
|
}
|
|
};
|
|
|
|
const handleDelete = (id: string) => {
|
|
setProductToDelete(id);
|
|
setConfirmOpen(true);
|
|
};
|
|
|
|
const handleConfirmDelete = async () => {
|
|
if (!productToDelete) return;
|
|
|
|
const originalProducts = [...products];
|
|
const idToDelete = String(productToDelete);
|
|
|
|
// Dynamic: remove instantly
|
|
setProducts(prev => prev.filter(p => String(p.id) !== idToDelete));
|
|
|
|
try {
|
|
await erpApi.deleteProduct(idToDelete);
|
|
toast.success('Exclusão completa', 'O item foi removido com sucesso.');
|
|
setTimeout(() => fetchProducts(true), 500);
|
|
} catch (error) {
|
|
setProducts(originalProducts);
|
|
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir o produto.');
|
|
} finally {
|
|
setConfirmOpen(false);
|
|
setProductToDelete(null);
|
|
}
|
|
};
|
|
|
|
const handleBulkDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
setBulkConfirmOpen(true);
|
|
};
|
|
|
|
const handleConfirmBulkDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
|
|
const originalProducts = [...products];
|
|
const idsToDelete = selectedIds.map(String);
|
|
|
|
// Dynamic: remove instantly
|
|
setProducts(prev => prev.filter(p => !idsToDelete.includes(String(p.id))));
|
|
const deletedCount = selectedIds.length;
|
|
|
|
try {
|
|
await Promise.all(idsToDelete.map(id => erpApi.deleteProduct(id)));
|
|
toast.success('Exclusão completa', `${deletedCount} produtos excluídos com sucesso.`);
|
|
setTimeout(() => fetchProducts(true), 500);
|
|
} catch (error) {
|
|
setProducts(originalProducts);
|
|
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir alguns produtos.');
|
|
} finally {
|
|
setBulkConfirmOpen(false);
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (product: Product) => {
|
|
setEditingProduct(product);
|
|
setFormData({
|
|
name: product.name,
|
|
sku: product.sku,
|
|
description: product.description,
|
|
price: Number(product.price),
|
|
cost_price: Number(product.cost_price),
|
|
type: product.type,
|
|
stock_quantity: Number(product.stock_quantity),
|
|
is_active: product.is_active
|
|
});
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
name: '',
|
|
sku: '',
|
|
description: '',
|
|
price: 0,
|
|
cost_price: 0,
|
|
type: 'product',
|
|
stock_quantity: 0,
|
|
is_active: true
|
|
});
|
|
};
|
|
|
|
const filteredProducts = products.filter(p =>
|
|
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(p.sku || '').toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
const totalStockValue = products.reduce((sum, p) => sum + (Number(p.price) * Number(p.stock_quantity)), 0);
|
|
const lowStockItems = products.filter(p => p.type === 'product' && p.stock_quantity < 5).length;
|
|
const servicesCount = products.filter(p => p.type === 'service').length;
|
|
|
|
const columns = [
|
|
{
|
|
header: 'Produto / SKU',
|
|
accessor: (row: Product) => (
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg ${row.type === 'product' ? 'bg-indigo-50 text-indigo-600' : 'bg-amber-50 text-amber-600'}`}>
|
|
{row.type === 'product' ? <PackageIcon className="w-5 h-5" /> : <TagIcon className="w-5 h-5" />}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-zinc-900 dark:text-white uppercase tracking-tight">{row.name}</span>
|
|
<span className="text-xs text-zinc-400 font-black tracking-widest">{row.sku || 'SEM SKU'}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
header: 'Tipo',
|
|
accessor: (row: Product) => (
|
|
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${row.type === 'product' ? 'bg-indigo-100 text-indigo-700' : 'bg-amber-100 text-amber-700'}`}>
|
|
{row.type === 'product' ? 'Produto' : 'Serviço'}
|
|
</span>
|
|
)
|
|
},
|
|
{
|
|
header: 'Estoque',
|
|
accessor: (row: Product) => (
|
|
row.type === 'product' ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className={`font-black text-sm ${row.stock_quantity < 5 ? 'text-rose-500' : 'text-zinc-900 dark:text-white'}`}>
|
|
{row.stock_quantity}
|
|
</span>
|
|
{row.stock_quantity < 5 && (
|
|
<ExclamationTriangleIcon className="w-4 h-4 text-rose-500" />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<span className="text-zinc-400 text-xs">N/A</span>
|
|
)
|
|
)
|
|
},
|
|
{
|
|
header: 'Preço de Venda',
|
|
className: 'text-right',
|
|
accessor: (row: Product) => (
|
|
<span className="font-black text-zinc-900 dark:text-white">
|
|
{formatCurrency(row.price)}
|
|
</span>
|
|
)
|
|
},
|
|
{
|
|
header: '',
|
|
className: 'text-right',
|
|
accessor: (row: Product) => (
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleEdit(row); }}
|
|
className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400 transition-all"
|
|
>
|
|
<PencilSquareIcon className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleDelete(row.id); }}
|
|
className="p-2 text-zinc-400 hover:text-rose-600 dark:hover:text-rose-400 transition-all"
|
|
>
|
|
<TrashIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Produtos & Estoque"
|
|
description="Controle seu inventário, gerencie preços e acompanhe a disponibilidade de itens."
|
|
primaryAction={{
|
|
label: "Novo Item",
|
|
icon: <PlusIcon className="w-5 h-5" />,
|
|
onClick: () => {
|
|
setEditingProduct(null);
|
|
resetForm();
|
|
setIsModalOpen(true);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<StatsCard
|
|
title="Total em Estoque"
|
|
value={formatCurrency(totalStockValue)}
|
|
icon={<CurrencyDollarIcon className="w-6 h-6 text-emerald-500" />}
|
|
/>
|
|
<StatsCard
|
|
title="Itens com Estoque Baixo"
|
|
value={lowStockItems}
|
|
icon={<ExclamationTriangleIcon className="w-6 h-6 text-rose-500" />}
|
|
/>
|
|
<StatsCard
|
|
title="Total de Produtos"
|
|
value={products.filter(p => p.type === 'product').length}
|
|
icon={<PackageIcon className="w-6 h-6 text-indigo-500" />}
|
|
/>
|
|
<StatsCard
|
|
title="Total de Serviços"
|
|
value={servicesCount}
|
|
icon={<TagIcon className="w-6 h-6 text-amber-500" />}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div className="relative w-full sm:w-96">
|
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
|
|
<Input
|
|
placeholder="Buscar por nome ou SKU..."
|
|
className="pl-10 h-10 border-zinc-200 dark:border-zinc-800"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 w-full sm:w-auto">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl text-sm font-bold text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">
|
|
<FunnelIcon className="w-4 h-4" />
|
|
Filtros
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Card noPadding className="overflow-hidden">
|
|
<DataTable
|
|
selectable
|
|
selectedIds={selectedIds}
|
|
onSelectionChange={setSelectedIds}
|
|
columns={columns}
|
|
data={filteredProducts}
|
|
isLoading={loading}
|
|
/>
|
|
</Card>
|
|
|
|
<Transition show={isModalOpen} as={Fragment}>
|
|
<Dialog as="div" className="relative z-50" onClose={() => setIsModalOpen(false)}>
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
|
|
</TransitionChild>
|
|
|
|
<div className="fixed inset-0 overflow-y-auto">
|
|
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95 translate-y-4"
|
|
enterTo="opacity-100 scale-100 translate-y-0"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100 translate-y-0"
|
|
leaveTo="opacity-0 scale-95 translate-y-4"
|
|
>
|
|
<DialogPanel className="w-full max-w-2xl transform overflow-hidden rounded-[32px] bg-white dark:bg-zinc-900 p-8 text-left align-middle shadow-2xl transition-all border border-gray-100 dark:border-zinc-800">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<DialogTitle as="h3" className="text-xl font-bold text-zinc-900 dark:text-white">
|
|
{editingProduct ? 'Editar Item' : 'Novo Produto/Serviço'}
|
|
</DialogTitle>
|
|
<button
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full transition-all"
|
|
>
|
|
<XMarkIcon className="w-6 h-6 text-zinc-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSave} className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="md:col-span-2">
|
|
<div className="flex gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, type: 'product' })}
|
|
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl border transition-all font-bold text-sm ${formData.type === 'product' ? 'border-indigo-500 bg-indigo-50 text-indigo-600' : 'border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}
|
|
>
|
|
<PackageIcon className="w-5 h-5" />
|
|
Produto
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, type: 'service' })}
|
|
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl border transition-all font-bold text-sm ${formData.type === 'service' ? 'border-amber-500 bg-amber-50 text-amber-600' : 'border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}
|
|
>
|
|
<TagIcon className="w-5 h-5" />
|
|
Serviço
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<Input
|
|
label="Nome do Item"
|
|
required
|
|
placeholder="Ex: Teclado Mecânico RGB"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="SKU / Código"
|
|
placeholder="Ex: PROD-001"
|
|
value={formData.sku}
|
|
onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
|
|
className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
|
|
/>
|
|
|
|
<Input
|
|
label="Estoque Inicial"
|
|
type="number"
|
|
disabled={formData.type === 'service'}
|
|
placeholder="0"
|
|
value={formData.stock_quantity}
|
|
onChange={(e) => setFormData({ ...formData, stock_quantity: Number(e.target.value) })}
|
|
className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
|
|
/>
|
|
|
|
<Input
|
|
label="Preço de Venda"
|
|
type="number"
|
|
step="0.01"
|
|
required
|
|
placeholder="0,00"
|
|
value={formData.price}
|
|
onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
|
|
className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
|
|
/>
|
|
|
|
<Input
|
|
label="Preço de Custo"
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0,00"
|
|
value={formData.cost_price}
|
|
onChange={(e) => setFormData({ ...formData, cost_price: Number(e.target.value) })}
|
|
className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
|
|
/>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-xs font-black text-zinc-400 uppercase tracking-widest mb-2">Descrição</label>
|
|
<textarea
|
|
className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-2xl focus:ring-2 focus:ring-brand-500/20 outline-none transition-all placeholder:text-zinc-400 text-sm h-32 resize-none"
|
|
placeholder="Detalhes sobre o produto ou serviço..."
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2 pt-6 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="px-6 py-3 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 font-bold transition-all"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-8 py-3 text-white rounded-2xl font-bold shadow-lg hover:opacity-90 transition-all flex items-center gap-2"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
<CheckIcon className="w-5 h-5" />
|
|
Salvar Item
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
|
|
<ConfirmDialog
|
|
isOpen={bulkConfirmOpen}
|
|
onClose={() => setBulkConfirmOpen(false)}
|
|
onConfirm={handleConfirmBulkDelete}
|
|
title="Excluir Produtos Selecionados"
|
|
message={`Tem certeza que deseja excluir os ${selectedIds.length} produtos selecionados? Esta ação não pode ser desfeita.`}
|
|
confirmText="Excluir Tudo"
|
|
variant="danger"
|
|
/>
|
|
<ConfirmDialog
|
|
isOpen={confirmOpen}
|
|
onClose={() => {
|
|
setConfirmOpen(false);
|
|
setProductToDelete(null);
|
|
}}
|
|
onConfirm={handleConfirmDelete}
|
|
title="Excluir Item"
|
|
message="Tem certeza que deseja excluir este produto ou serviço? Esta ação não pode ser desfeita."
|
|
confirmText="Excluir"
|
|
cancelText="Cancelar"
|
|
variant="danger"
|
|
/>
|
|
|
|
<BulkActionBar
|
|
selectedCount={selectedIds.length}
|
|
onClearSelection={() => setSelectedIds([])}
|
|
actions={[
|
|
{
|
|
label: "Excluir Selecionados",
|
|
icon: <TrashIcon className="w-5 h-5" />,
|
|
onClick: handleBulkDelete,
|
|
variant: 'danger'
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|