fix(erp): enable erp pages and menu items
This commit is contained in:
Erik Silva
309
front-end-agency/app/(agency)/erp/OrdersPage.tsx
Normal file
309
front-end-agency/app/(agency)/erp/OrdersPage.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, Fragment } from 'react';
|
||||
import {
|
||||
PlusIcon,
|
||||
MagnifyingGlassIcon,
|
||||
FunnelIcon,
|
||||
ShoppingBagIcon,
|
||||
CalendarIcon,
|
||||
CurrencyDollarIcon,
|
||||
UserIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
XMarkIcon,
|
||||
EyeIcon,
|
||||
TrashIcon,
|
||||
ExclamationTriangleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { ConfirmDialog } from "@/components/ui";
|
||||
import { erpApi, Order, Entity } from '@/lib/api-erp';
|
||||
import { formatCurrency } from '@/lib/format';
|
||||
import { useToast } from '@/components/layout/ToastContext';
|
||||
import {
|
||||
PageHeader,
|
||||
StatsCard,
|
||||
DataTable,
|
||||
Input,
|
||||
Card,
|
||||
BulkActionBar,
|
||||
} from "@/components/ui";
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export default function OrdersPage() {
|
||||
const toast = useToast();
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [entities, setEntities] = useState<Entity[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
|
||||
const [orderToDelete, setOrderToDelete] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async (silent = false) => {
|
||||
try {
|
||||
if (!silent) setLoading(true);
|
||||
const [ordersData, entitiesData] = await Promise.all([
|
||||
erpApi.getOrders(),
|
||||
erpApi.getEntities()
|
||||
]);
|
||||
setOrders(ordersData || []);
|
||||
setEntities(entitiesData || []);
|
||||
} catch (error) {
|
||||
toast.error('Erro ao carregar', 'Não foi possível carregar os pedidos');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setSelectedIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedIds.length === 0) return;
|
||||
setBulkConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmBulkDelete = async () => {
|
||||
if (selectedIds.length === 0) return;
|
||||
|
||||
const originalOrders = [...orders];
|
||||
const idsToDelete = selectedIds.map(String);
|
||||
|
||||
// Dynamic: remove instantly
|
||||
setOrders(prev => prev.filter(o => !idsToDelete.includes(String(o.id))));
|
||||
const deletedCount = selectedIds.length;
|
||||
|
||||
try {
|
||||
await Promise.all(idsToDelete.map(id => erpApi.deleteOrder(id)));
|
||||
toast.success('Exclusão completa', `${deletedCount} pedidos excluídos com sucesso.`);
|
||||
setTimeout(() => fetchData(true), 500);
|
||||
} catch (error) {
|
||||
setOrders(originalOrders);
|
||||
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir alguns pedidos.');
|
||||
} finally {
|
||||
setBulkConfirmOpen(false);
|
||||
setSelectedIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setOrderToDelete(id);
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!orderToDelete) return;
|
||||
|
||||
const originalOrders = [...orders];
|
||||
const idToDelete = String(orderToDelete);
|
||||
|
||||
// Dynamic: remove instantly
|
||||
setOrders(prev => prev.filter(o => String(o.id) !== idToDelete));
|
||||
|
||||
try {
|
||||
await erpApi.deleteOrder(idToDelete);
|
||||
toast.success('Exclusão completa', 'O pedido foi removido com sucesso.');
|
||||
setTimeout(() => fetchData(true), 500);
|
||||
} catch (error) {
|
||||
setOrders(originalOrders);
|
||||
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir o pedido.');
|
||||
} finally {
|
||||
setConfirmOpen(false);
|
||||
setOrderToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredOrders = orders.filter(o => {
|
||||
const entityName = entities.find(e => e.id === o.entity_id)?.name || '';
|
||||
const searchStr = searchTerm.toLowerCase();
|
||||
return String(o.id).toLowerCase().includes(searchStr) ||
|
||||
entityName.toLowerCase().includes(searchStr);
|
||||
});
|
||||
|
||||
const totalRevenue = orders.filter(o => o.status !== 'cancelled').reduce((sum, o) => sum + Number(o.total_amount), 0);
|
||||
const pendingOrders = orders.filter(o => o.status === 'confirmed').length;
|
||||
const completedOrders = orders.filter(o => o.status === 'completed').length;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: 'Pedido / Data',
|
||||
accessor: (row: Order) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-zinc-900 dark:text-white uppercase text-xs">#{row.id.slice(0, 8)}</span>
|
||||
<div className="flex items-center gap-1 text-[10px] text-zinc-400 font-bold">
|
||||
<CalendarIcon className="w-3 h-3" />
|
||||
{row.created_at ? format(new Date(row.created_at), 'dd/MM/yyyy HH:mm') : '-'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Cliente',
|
||||
accessor: (row: Order) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-500">
|
||||
<UserIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{entities.find(e => e.id === row.entity_id)?.name || 'Consumidor Final'}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessor: (row: Order) => {
|
||||
const colors = {
|
||||
draft: 'bg-zinc-100 text-zinc-700',
|
||||
confirmed: 'bg-blue-100 text-blue-700',
|
||||
completed: 'bg-emerald-100 text-emerald-700',
|
||||
cancelled: 'bg-rose-100 text-rose-700'
|
||||
};
|
||||
const labels = {
|
||||
draft: 'Rascunho',
|
||||
confirmed: 'Confirmado',
|
||||
completed: 'Concluído',
|
||||
cancelled: 'Cancelado'
|
||||
};
|
||||
return (
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider ${colors[row.status as keyof typeof colors]}`}>
|
||||
{labels[row.status as keyof typeof labels]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
header: 'Total',
|
||||
className: 'text-right',
|
||||
accessor: (row: Order) => (
|
||||
<span className="font-black text-zinc-900 dark:text-white">
|
||||
{formatCurrency(row.total_amount)}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: '',
|
||||
className: 'text-right',
|
||||
accessor: (row: Order) => (
|
||||
<div className="flex justify-end gap-2">
|
||||
<button className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400">
|
||||
<EyeIcon 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="Pedidos & Vendas"
|
||||
description="Acompanhe suas vendas, gerencie orçamentos e controle o fluxo de pedidos."
|
||||
primaryAction={{
|
||||
label: "Novo Pedido",
|
||||
icon: <PlusIcon className="w-5 h-5" />,
|
||||
onClick: () => toast.error('Funcionalidade em desenvolvimento')
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatsCard
|
||||
title="Receita de Vendas"
|
||||
value={formatCurrency(totalRevenue)}
|
||||
icon={<CurrencyDollarIcon className="w-6 h-6 text-emerald-500" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Pedidos Pendentes"
|
||||
value={pendingOrders}
|
||||
icon={<ClockIcon className="w-6 h-6 text-blue-500" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Pedidos Concluídos"
|
||||
value={completedOrders}
|
||||
icon={<CheckCircleIcon className="w-6 h-6 text-emerald-500" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Total de Pedidos"
|
||||
value={orders.length}
|
||||
icon={<ShoppingBagIcon className="w-6 h-6 text-indigo-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 cliente ou ID do pedido..."
|
||||
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
|
||||
isLoading={loading}
|
||||
selectedIds={selectedIds}
|
||||
onSelectionChange={setSelectedIds}
|
||||
columns={columns}
|
||||
data={filteredOrders}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={bulkConfirmOpen}
|
||||
onClose={() => setBulkConfirmOpen(false)}
|
||||
onConfirm={handleConfirmBulkDelete}
|
||||
title="Excluir Pedidos Selecionados"
|
||||
message={`Tem certeza que deseja excluir os ${selectedIds.length} pedidos selecionados? Esta ação não pode ser desfeita.`}
|
||||
confirmText="Excluir Tudo"
|
||||
variant="danger"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
isOpen={confirmOpen}
|
||||
onClose={() => {
|
||||
setConfirmOpen(false);
|
||||
setOrderToDelete(null);
|
||||
}}
|
||||
onConfirm={handleConfirmDelete}
|
||||
title="Excluir Pedido"
|
||||
message="Tem certeza que deseja excluir este pedido? 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