271 lines
15 KiB
TypeScript
271 lines
15 KiB
TypeScript
import React from 'react';
|
||
import { format } from 'date-fns';
|
||
import type { StockItem, StockMovement } from '../../services/stockService';
|
||
import '../../styles/reports.css';
|
||
|
||
interface StockInventoryReportProps {
|
||
items: StockItem[];
|
||
movements: Map<string, StockMovement[]>; // Key: stockItemId
|
||
logoUrl?: string;
|
||
reportType?: 'PAINT' | 'THINNER';
|
||
}
|
||
|
||
export const StockInventoryReport: React.FC<StockInventoryReportProps> = ({ items, movements, logoUrl, reportType = 'PAINT' }) => {
|
||
|
||
// Agrupamento por Produto + Cor
|
||
const groups = React.useMemo(() => {
|
||
const map = new Map<string, {
|
||
key: string;
|
||
productName: string;
|
||
manufacturer: string;
|
||
color: string;
|
||
minStock: number;
|
||
totalQty: number;
|
||
unit: string;
|
||
items: StockItem[];
|
||
isLowStock: boolean;
|
||
}>();
|
||
|
||
items.forEach(item => {
|
||
const productName = typeof item.dataSheetId === 'object' ? item.dataSheetId.name : 'Desconhecido';
|
||
const manufacturer = typeof item.dataSheetId === 'object' ? item.dataSheetId.manufacturer : '';
|
||
|
||
// Se for diluente, agrupar apenas pelo ID do produto, ignorando cor.
|
||
// Se for tinta, agrupar por produto + cor.
|
||
const key = reportType === 'THINNER'
|
||
? `${item.dataSheetId._id || item.dataSheetId}`
|
||
: `${item.dataSheetId._id || item.dataSheetId}-${item.color}`;
|
||
|
||
if (!map.has(key)) {
|
||
map.set(key, {
|
||
key,
|
||
productName,
|
||
manufacturer,
|
||
color: reportType === 'THINNER' ? '-' : (item.color || '-'),
|
||
minStock: item.minStock || 0,
|
||
totalQty: 0,
|
||
unit: item.unit,
|
||
items: [],
|
||
isLowStock: false
|
||
});
|
||
}
|
||
|
||
const group = map.get(key)!;
|
||
group.items.push(item);
|
||
group.totalQty += item.quantity;
|
||
if (item.minStock && item.minStock > group.minStock) {
|
||
group.minStock = item.minStock;
|
||
}
|
||
});
|
||
|
||
// Avaliar status de estoque baixo por grupo
|
||
for (const group of map.values()) {
|
||
if (group.minStock > 0 && group.totalQty < group.minStock) {
|
||
group.isLowStock = true;
|
||
}
|
||
}
|
||
|
||
return Array.from(map.values());
|
||
}, [items, reportType]);
|
||
|
||
// Cálculos globais
|
||
const totalItems = items.length;
|
||
const totalQuantity = items.reduce((acc, item) => acc + item.quantity, 0);
|
||
const expiredItems = items.filter(item =>
|
||
item.expirationDate && new Date(item.expirationDate) < new Date()
|
||
).length;
|
||
const lowStockGroupsCount = groups.filter(g => g.isLowStock).length;
|
||
|
||
const formatMovementType = (type: string) => {
|
||
switch (type) {
|
||
case 'ENTRY': return 'Entrada';
|
||
case 'ADJUSTMENT': return 'Ajuste';
|
||
case 'CONSUMPTION': return 'Consumo';
|
||
default: return type;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="report-container print:block hidden" id="stock-inventory-report">
|
||
<header className="report-header">
|
||
<div className="brand">
|
||
{logoUrl ? (
|
||
<img src={logoUrl} alt="Logo" className="brand-logo" />
|
||
) : (
|
||
<div className="logo-placeholder"></div>
|
||
)}
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="brand-title">INVENTÁRIO DE ESTOQUE - {reportType === 'THINNER' ? 'DILUENTES' : 'TINTAS'}</div>
|
||
<div className="brand-subtitle">
|
||
Controle de {reportType === 'THINNER' ? 'Diluentes' : 'Tintas'} – Agrupado por Produto
|
||
</div>
|
||
</div>
|
||
<div className="meta">
|
||
<div><strong>Data:</strong> {format(new Date(), 'dd/MM/yyyy')}</div>
|
||
<div><strong>Grupos Críticos:</strong> <span style={{ color: lowStockGroupsCount > 0 ? 'red' : 'inherit' }}>{lowStockGroupsCount}</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<section className="summary">
|
||
<div className="summary-item">
|
||
<div className="summary-label">Total de Lotes</div>
|
||
<div className="summary-value">{totalItems}</div>
|
||
<div className="summary-sub">Entradas ativas</div>
|
||
</div>
|
||
<div className="summary-item">
|
||
<div className="summary-label">Volume Total</div>
|
||
<div className="summary-value">{totalQuantity.toFixed(1)}</div>
|
||
<div className="summary-sub">Litros em estoque</div>
|
||
</div>
|
||
<div className="summary-item">
|
||
<div className="summary-label">Alertas de Estoque</div>
|
||
<div className="summary-value" style={{ color: lowStockGroupsCount > 0 ? '#ef4444' : '#10b981' }}>{lowStockGroupsCount}</div>
|
||
<div className="summary-sub">Produtos abaixo do mínimo</div>
|
||
</div>
|
||
<div className="summary-item">
|
||
<div className="summary-label">Vencidos</div>
|
||
<div className="summary-value" style={{ color: expiredItems > 0 ? '#ef4444' : 'inherit' }}>{expiredItems}</div>
|
||
<div className="summary-sub">Lotes expirados</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="section-title">
|
||
<h2>DETALHAMENTO DO ESTOQUE</h2>
|
||
</div>
|
||
|
||
<table className="table">
|
||
<thead>
|
||
<tr>
|
||
<th className="col-obra" style={{ width: '35%' }}>Produto / RR</th>
|
||
<th className="col-cron" style={{ width: '20%' }}>Lote / Validade</th>
|
||
<th className="col-peso text-center" style={{ width: '15%' }}>Quantidade</th>
|
||
{reportType === 'PAINT' && <th className="col-tinta" style={{ width: '15%' }}>Cor</th>}
|
||
<th className="col-cor" style={{ width: '15%' }}>Nota Fiscal</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{groups.map((group) => (
|
||
<React.Fragment key={group.key}>
|
||
{/* Group Header Row */}
|
||
<tr style={{ backgroundColor: '#f3f4f6', borderTop: '2px solid #e5e7eb', borderBottom: '1px solid #e5e7eb' }}>
|
||
<td colSpan={2} style={{ padding: '8px 12px' }}>
|
||
<div style={{ fontWeight: 'bold', fontSize: '10pt', color: '#111827' }}>
|
||
{group.productName.toUpperCase()}
|
||
</div>
|
||
<div style={{ fontSize: '7pt', color: '#6b7280' }}>
|
||
{group.manufacturer}
|
||
</div>
|
||
</td>
|
||
<td className="text-center" style={{ padding: '8px 12px' }}>
|
||
<div style={{ fontWeight: 'bold', fontSize: '10pt', color: group.isLowStock ? '#ef4444' : '#111827' }}>
|
||
{group.isLowStock && <span style={{ marginRight: '4px' }}>⚠</span>}
|
||
{group.totalQty.toFixed(1)} {group.unit}
|
||
</div>
|
||
{group.minStock > 0 && (
|
||
<div style={{ fontSize: '7pt', color: '#6b7280' }}>
|
||
Mín: {group.minStock}
|
||
</div>
|
||
)}
|
||
</td>
|
||
{reportType === 'PAINT' && (
|
||
<td style={{ padding: '8px 12px', verticalAlign: 'middle', fontWeight: 'bold', fontSize: '9pt', color: '#374151' }}>
|
||
{group.color}
|
||
</td>
|
||
)}
|
||
<td style={{ padding: '8px 12px', textAlign: 'right', fontSize: '8pt', color: '#6b7280' }}>
|
||
{group.items.length} lote(s)
|
||
</td>
|
||
</tr>
|
||
|
||
{/* Individual Items */}
|
||
{group.items.map((item) => {
|
||
const isExpired = item.expirationDate && new Date(item.expirationDate) < new Date();
|
||
const itemMovements = movements.get(item._id!) || [];
|
||
|
||
return (
|
||
<React.Fragment key={item._id}>
|
||
<tr>
|
||
<td className="col-obra" style={{ paddingLeft: '24px' }}>
|
||
<div className="obra-nome" style={{ fontSize: '9pt' }}>RR: <strong>{item.rrNumber}</strong></div>
|
||
</td>
|
||
<td className="col-cron">
|
||
<div className="cron">
|
||
<strong>Lote:</strong> {item.batchNumber}<br />
|
||
{reportType === 'PAINT' && (
|
||
<>
|
||
<strong>Val:</strong>{' '}
|
||
<span style={{ color: isExpired ? '#ef4444' : 'inherit', fontWeight: isExpired ? 'bold' : 'normal' }}>
|
||
{item.expirationDate ? format(new Date(item.expirationDate), 'dd/MM/yyyy') : '-'}
|
||
</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td className="col-peso text-center">
|
||
<div style={{ fontSize: '9pt' }}>
|
||
{item.quantity.toFixed(1)} {item.unit}
|
||
</div>
|
||
</td>
|
||
{reportType === 'PAINT' && (
|
||
<td className="col-tinta">
|
||
{/* Cor is already in group header, repeated here only if needed or keep empty/dash */}
|
||
<div style={{ opacity: 0.5 }}>-</div>
|
||
</td>
|
||
)}
|
||
<td className="col-cor">
|
||
<div style={{ fontSize: '8pt' }}>
|
||
{item.invoiceNumber || '-'}
|
||
</div>
|
||
{item.receivedBy && (
|
||
<div style={{ fontSize: '7pt', color: '#9ca3af' }}> Rec: {item.receivedBy}</div>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
{/* Movimentações inline */}
|
||
{itemMovements.length > 0 && (
|
||
<tr>
|
||
<td colSpan={reportType === 'PAINT' ? 5 : 4} style={{ padding: '2px 24px 8px 24px', border: 'none' }}>
|
||
<div style={{ fontSize: '6.5pt', color: '#9ca3af', borderLeft: '2px solid #e5e7eb', paddingLeft: '8px' }}>
|
||
{itemMovements.slice(0, 5).map((mov, idx) => (
|
||
<span key={mov._id} style={{ marginRight: '8px', whiteSpace: 'nowrap' }}>
|
||
{format(new Date(mov.date), 'dd/MM/yy')} -{' '}
|
||
<strong>{formatMovementType(mov.type)}</strong>:{' '}
|
||
{mov.type === 'CONSUMPTION' ? '-' : '+'}{Math.abs(mov.quantity)}L
|
||
{mov.responsible && ` (${mov.responsible})`}
|
||
{idx < Math.min(itemMovements.length, 5) - 1 && ' | '}
|
||
</span>
|
||
))}
|
||
{itemMovements.length > 5 && (
|
||
<span style={{ fontStyle: 'italic', color: '#9ca3af' }}>
|
||
... +{itemMovements.length - 5} movimentações
|
||
</span>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
|
||
<footer className="report-footer">
|
||
<div className="system-title">
|
||
SteelPaint - Gestão de Pintura Industrial
|
||
</div>
|
||
<div>
|
||
Gerado em {format(new Date(), 'dd/MM/yyyy')} às {format(new Date(), 'HH:mm')}h
|
||
</div>
|
||
<div className="sig-group">
|
||
<div className="sig-line">Responsável Estoque<span></span></div>
|
||
<div className="sig-line">Responsável Qualidade<span></span></div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
};
|