fix(erp): enable erp pages and menu items
This commit is contained in:
Erik Silva
503
front-end-agency/app/(agency)/erp/ProductsPage.tsx
Normal file
503
front-end-agency/app/(agency)/erp/ProductsPage.tsx
Normal file
@@ -0,0 +1,503 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user