✅ Restauração do código oficial do GPI-JWT-V3
This commit is contained in:
377
src/client/components/modals/StockHistoryModal.tsx
Normal file
377
src/client/components/modals/StockHistoryModal.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal } from '../Modal';
|
||||
import { stockService, type StockMovement, type StockItem } from '../../services/stockService';
|
||||
import { format } from 'date-fns';
|
||||
import { ArrowUp, ArrowDown, RefreshCw, Trash2, Edit2, Save, X, FileText, Activity } from 'lucide-react';
|
||||
|
||||
import { useAuth } from '../../context/useAuth';
|
||||
|
||||
interface StockHistoryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
item: StockItem;
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
interface AuditLog {
|
||||
_id: string;
|
||||
action: 'CREATE' | 'UPDATE' | 'DELETE';
|
||||
userName: string;
|
||||
details: string;
|
||||
timestamp: string;
|
||||
movementNumber?: number;
|
||||
}
|
||||
|
||||
export const StockHistoryModal: React.FC<StockHistoryModalProps> = ({ isOpen, onClose, item, onUpdate }) => {
|
||||
const { isAdmin } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState<'movements' | 'logs'>('movements');
|
||||
const [movements, setMovements] = useState<StockMovement[]>([]);
|
||||
const [logs, setLogs] = useState<AuditLog[]>([]);
|
||||
const [currentItem, setCurrentItem] = useState<StockItem>(item);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [editValues, setEditValues] = useState<{ date: string; quantity: string; notes: string }>({
|
||||
date: '',
|
||||
quantity: '',
|
||||
notes: ''
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
if (item._id) {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Always fetch item to keep balance fresh
|
||||
const itemData = await stockService.getById(item._id);
|
||||
setCurrentItem(itemData);
|
||||
|
||||
if (activeTab === 'movements') {
|
||||
const data = await stockService.getMovements(item._id);
|
||||
setMovements(data);
|
||||
} else {
|
||||
const data = await stockService.getAuditLogs(item._id);
|
||||
setLogs(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchData();
|
||||
}
|
||||
}, [isOpen, item, activeTab]);
|
||||
|
||||
const formatMovementId = (num?: number) => {
|
||||
if (!num) return '-';
|
||||
return `${item.rrNumber}/${String(num).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const filteredLogs = logs.filter(log => {
|
||||
const term = searchTerm.toLowerCase();
|
||||
const formattedId = formatMovementId(log.movementNumber);
|
||||
return (
|
||||
log.details.toLowerCase().includes(term) ||
|
||||
log.userName.toLowerCase().includes(term) ||
|
||||
formattedId.toLowerCase().includes(term)
|
||||
);
|
||||
});
|
||||
|
||||
const handleEditClick = (move: StockMovement) => {
|
||||
setEditingId(move._id!);
|
||||
const dateStr = new Date(move.date).toISOString().slice(0, 16);
|
||||
setEditValues({
|
||||
date: dateStr,
|
||||
quantity: String(move.quantity),
|
||||
notes: move.notes || ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingId(null);
|
||||
setEditValues({ date: '', quantity: '', notes: '' });
|
||||
};
|
||||
|
||||
const handleSave = async (id: string) => {
|
||||
try {
|
||||
await stockService.updateMovement(id, {
|
||||
date: new Date(editValues.date).toISOString(),
|
||||
quantity: Number(editValues.quantity),
|
||||
notes: editValues.notes
|
||||
});
|
||||
setEditingId(null);
|
||||
fetchData();
|
||||
if (onUpdate) onUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error updating movement:', error);
|
||||
alert('Erro ao atualizar movimentação.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string, qty: number) => {
|
||||
if (confirm(`Tem certeza que deseja excluir esta movimentação de ${qty}? O saldo do lote será revertido.`)) {
|
||||
try {
|
||||
await stockService.deleteMovement(id);
|
||||
fetchData();
|
||||
if (onUpdate) onUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error deleting movement:', error);
|
||||
alert('Erro ao excluir movimentação.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getMovementIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'ENTRY': return <ArrowUp size={16} className="text-green-500" />;
|
||||
case 'CONSUMPTION': return <ArrowDown size={16} className="text-blue-500" />;
|
||||
case 'ADJUSTMENT': return <RefreshCw size={16} className="text-amber-500" />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getMovementLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'ENTRY': return 'Entrada';
|
||||
case 'CONSUMPTION': return 'Consumo';
|
||||
case 'ADJUSTMENT': return 'Ajuste';
|
||||
default: return type;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={`Histórico - ${item.rrNumber}`}
|
||||
maxWidth="max-w-4xl"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-surface-soft p-4 rounded-xl border border-border/40 mb-4 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-text-secondary">Produto: <span className="text-text-main font-semibold">{typeof currentItem.dataSheetId === 'object' ? currentItem.dataSheetId.name : '...'}</span></p>
|
||||
<p className="text-sm text-text-secondary">Lote: <span className="text-text-main font-semibold">{currentItem.batchNumber}</span></p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-text-secondary">Saldo Atual</p>
|
||||
<span className="text-text-main font-bold text-2xl">{currentItem.quantity} <span className="text-lg font-normal text-text-muted">{currentItem.unit}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-border/40 mb-4 justify-between items-center">
|
||||
<div className="flex">
|
||||
<button
|
||||
onClick={() => setActiveTab('movements')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'movements' ? 'border-primary text-primary' : 'border-transparent text-text-muted hover:text-text-main'}`}
|
||||
>
|
||||
<Activity size={16} />
|
||||
Movimentações
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('logs')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'logs' ? 'border-primary text-primary' : 'border-transparent text-text-muted hover:text-text-main'}`}
|
||||
>
|
||||
<FileText size={16} />
|
||||
Logs de Auditoria
|
||||
</button>
|
||||
</div>
|
||||
{activeTab === 'logs' && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nº Mov ou Detalhes..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="text-xs bg-surface border border-border/40 rounded-lg px-3 py-1.5 focus:outline-none focus:border-primary w-64 text-text-main placeholder-text-muted"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8 text-text-muted">Carregando...</div>
|
||||
) : activeTab === 'movements' ? (
|
||||
// MOVEMENTS TABLE
|
||||
movements.length === 0 ? (
|
||||
<div className="text-center py-8 text-text-muted">Nenhuma movimentação registrada.</div>
|
||||
) : (
|
||||
<div className="relative overflow-hidden rounded-xl border border-border/40 bg-surface">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="bg-surface-soft text-text-muted font-medium uppercase text-xs">
|
||||
<tr>
|
||||
<th className="px-4 py-3 w-32 text-center">ID</th>
|
||||
<th className="px-4 py-3 w-40">Data</th>
|
||||
<th className="px-4 py-3 w-32">Tipo</th>
|
||||
<th className="px-4 py-3 w-28">Qtd</th>
|
||||
<th className="px-4 py-3 w-40">Responsável</th>
|
||||
<th className="px-4 py-3">Detalhes</th>
|
||||
{isAdmin() && <th className="px-4 py-3 w-24 text-right">Ações</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/40">
|
||||
{movements.map((move: any) => {
|
||||
const isEditing = editingId === move._id;
|
||||
return (
|
||||
<tr key={move._id} className="hover:bg-surface-hover/50">
|
||||
<td className="px-4 py-3 text-center font-mono text-text-muted text-xs">
|
||||
{formatMovementId(move.movementNumber)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-main align-top">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={editValues.date}
|
||||
onChange={(e) => setEditValues({ ...editValues, date: e.target.value })}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1 text-xs"
|
||||
/>
|
||||
) : (
|
||||
<span className="whitespace-nowrap">
|
||||
{format(new Date(move.date), 'dd/MM/yyyy HH:mm')}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top">
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
{getMovementIcon(move.type)}
|
||||
<span>{getMovementLabel(move.type)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-bold align-top">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="number"
|
||||
value={editValues.quantity}
|
||||
onChange={(e) => setEditValues({ ...editValues, quantity: e.target.value })}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1 text-xs"
|
||||
placeholder="(ex: -10)"
|
||||
/>
|
||||
) : (
|
||||
<span className={move.quantity > 0 ? 'text-green-500' : 'text-red-500'}>
|
||||
{move.quantity > 0 ? '+' : ''}{move.quantity}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-secondary align-top text-xs">
|
||||
<div className="line-clamp-2" title={move.responsible}>
|
||||
{move.responsible}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-muted text-xs align-top">
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
value={editValues.notes}
|
||||
onChange={(e) => setEditValues({ ...editValues, notes: e.target.value })}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1 text-xs resize-y min-h-[2.5rem]"
|
||||
placeholder="Notas..."
|
||||
/>
|
||||
) : (
|
||||
<div className="line-clamp-2">
|
||||
{move.type === 'ADJUSTMENT' && move.reason}
|
||||
{move.type === 'CONSUMPTION' && `Solicitante: ${move.requester}`}
|
||||
{move.notes && ` - ${move.notes}`}
|
||||
{!move.notes && !move.reason && !move.requester && '-'}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
{isAdmin() && (
|
||||
<td className="px-4 py-3 text-right align-top">
|
||||
{isEditing ? (
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => handleSave(move._id!)}
|
||||
className="p-1.5 bg-green-500/10 text-green-500 hover:bg-green-500/20 rounded-lg transition-colors"
|
||||
title="Salvar"
|
||||
>
|
||||
<Save size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelEdit}
|
||||
className="p-1.5 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
|
||||
title="Cancelar"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => handleEditClick(move)}
|
||||
className="p-1.5 text-blue-500 hover:bg-blue-500/10 rounded-lg transition-colors"
|
||||
title="Editar"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(move._id!, move.quantity)}
|
||||
className="p-1.5 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors"
|
||||
title="Excluir"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
// LOGS TABLE
|
||||
filteredLogs.length === 0 ? (
|
||||
<div className="text-center py-8 text-text-muted">Nenhum log de auditoria encontrado.</div>
|
||||
) : (
|
||||
<div className="relative overflow-hidden rounded-xl border border-border/40 bg-surface">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="bg-surface-soft text-text-muted font-medium uppercase text-xs">
|
||||
<tr>
|
||||
<th className="px-4 py-3 w-40">Data</th>
|
||||
<th className="px-4 py-3 w-32">Ação</th>
|
||||
<th className="px-4 py-3 w-32 text-center">ID Mov.</th>
|
||||
<th className="px-4 py-3 w-40">Usuário</th>
|
||||
<th className="px-4 py-3">Detalhes da Alteração</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/40">
|
||||
{filteredLogs.map((log) => (
|
||||
<tr key={log._id} className="hover:bg-surface-hover/50">
|
||||
<td className="px-4 py-3 text-text-main align-top whitespace-nowrap">
|
||||
{format(new Date(log.timestamp), 'dd/MM/yyyy HH:mm')}
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top font-bold">
|
||||
<span className={
|
||||
log.action === 'CREATE' ? 'text-green-500' :
|
||||
log.action === 'UPDATE' ? 'text-blue-500' :
|
||||
'text-red-500'
|
||||
}>
|
||||
{log.action === 'CREATE' ? 'CRIAÇÃO' :
|
||||
log.action === 'UPDATE' ? 'EDIÇÃO' : 'EXCLUSÃO'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center align-top font-mono text-text-main">
|
||||
{formatMovementId(log.movementNumber)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-secondary align-top">
|
||||
{log.userName}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-muted text-xs align-top font-mono">
|
||||
{log.details}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user