From 5a8e2326d8f103746fab348eda6f5da160d6e257 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= Date: Tue, 11 Aug 2026 14:16:43 -0300 Subject: [PATCH] Expand production order details inline --- src/pages/ProductionOrders.tsx | 121 ++++++++++++++------------------- 1 file changed, 52 insertions(+), 69 deletions(-) diff --git a/src/pages/ProductionOrders.tsx b/src/pages/ProductionOrders.tsx index 254137d..70e63e2 100644 --- a/src/pages/ProductionOrders.tsx +++ b/src/pages/ProductionOrders.tsx @@ -1,4 +1,4 @@ -import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react'; +import { Fragment, type FormEvent, useCallback, useEffect, useMemo, useState } from 'react'; import { Link, useOutletContext } from 'react-router-dom'; import { ArrowLeft, CheckCircle2, ClipboardList, Clock3, Download, Eye, PackageCheck, PlayCircle, Search, X, XCircle } from 'lucide-react'; import DateRangePicker from '../components/DateRangePicker'; @@ -268,6 +268,48 @@ const ProductionOrders = () => { exportToCSV(exportData, `ordens_producao_${new Date().toISOString().split('T')[0]}.csv`); }; + const renderOrderDetails = (order: ProductionOrderItem) => ( +
+
+
+

Detalhes da OP

+

{order.number || `OP #${order.id}`} · {order.productDescription}

+
+ +
+ +
+

Quantidade

{formatQuantity(order.quantity)} {order.unit}

+

Status

+

Emissão

{formatDate(order.issueDate)}

+

Previsão

{formatDate(order.expectedDate)}

+
+ +
+

Produto e marcadores

+
+

{order.productSku || 'Sem SKU'}

+ {order.markers.length > 0 &&
{order.markers.map(marker => {marker.label})}
} +
Pedido: {order.orderReference || '-'}Integração: {order.integrationStatus || 'Local'}
+
+
+ +
+

Composição

+ {order.components.length ?
{order.components.map(component => )}
MaterialPor unidadeTotal

{component.componentName}

{component.componentSku || 'Sem SKU'}

{formatQuantity(component.quantityPerUnit)} {component.unit}{formatQuantity(component.totalQuantity)} {component.unit}
:

Sem composição sincronizada.

} +
+ +
+

Baixa de material

+ {order.status === 'in_progress' ?

Registre uma saída somente quando o material for realmente consumido pela OP.

{selectedLot &&

Saldo do lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}

}{supplyMessage &&

{supplyMessage}

}
:
Altere a OP para Em andamento antes de registrar a baixa de materiais.
} +
+ + {(order.steps.length > 0 || order.notes || order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg) &&

Informações adicionais

{(order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg) &&
{order.supplier &&
Fornecedor
{order.supplier}
}{order.lotCode &&
Lote
{order.lotCode}
}{order.rollQuantity !== null &&
Rolos
{formatQuantity(order.rollQuantity)}
}{order.fabricKg !== null &&
Malha
{formatQuantity(order.fabricKg)} kg
}{order.ribKg !== null &&
Ribana
{formatQuantity(order.ribKg)} kg
}{order.yieldPiecesPerKg !== null &&
Rendimento
{formatQuantity(order.yieldPiecesPerKg)} un./kg
}
}{order.steps.length > 0 &&

Etapas

{order.steps.map(step =>
{step.name}{formatDate(step.startDate)} - {formatDate(step.endDate)}
)}
}{order.notes &&

{order.notes}

}
} +
+ ); + return (
@@ -456,7 +498,8 @@ const ProductionOrders = () => { {paginatedOrders.map((order: ProductionOrderItem) => { const statusStyle = getStatusStyle(order.status, order.statusLabel); return ( - + + {order.number || '-'}
{order.productDescription}
@@ -485,18 +528,21 @@ const ProductionOrders = () => { + {selectedOrderId === order.id && {renderOrderDetails(order)}} + ); })} @@ -537,69 +583,6 @@ const ProductionOrders = () => {
)} - {selectedOrder && ( -
- -
- -
-
-

Quantidade

{formatQuantity(selectedOrder.quantity)} {selectedOrder.unit}

-

Status

-

Emissão

{formatDate(selectedOrder.issueDate)}

-

Previsão

{formatDate(selectedOrder.expectedDate)}

-
- -
-

Produto e marcadores

-
-

{selectedOrder.productSku || 'Sem SKU'}

- {selectedOrder.markers.length > 0 &&
{selectedOrder.markers.map(marker => {marker.label})}
} -
Pedido: {selectedOrder.orderReference || '-'}Integração: {selectedOrder.integrationStatus || 'Local'}
-
-
- -
-

Composição

- {selectedOrder.components.length ? ( -
- {selectedOrder.components.map(component => )}
MaterialPor unidadeTotal

{component.componentName}

{component.componentSku || 'Sem SKU'}

{formatQuantity(component.quantityPerUnit)} {component.unit}{formatQuantity(component.totalQuantity)} {component.unit}
-
- ) :

Sem composição sincronizada.

} -
- -
-

Baixa de material

- {selectedOrder.status === 'in_progress' ? ( -
-

Registre uma saída somente quando o material for realmente consumido pela OP.

-
- - - -
- {selectedLot &&

Saldo do lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}

} - - {supplyMessage &&

{supplyMessage}

} -
- ) :
Altere a OP para Em andamento antes de registrar a baixa de materiais.
} -
- - {(selectedOrder.steps.length > 0 || selectedOrder.notes || selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) &&

Informações adicionais

{(selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) &&
{selectedOrder.supplier &&
Fornecedor
{selectedOrder.supplier}
}{selectedOrder.lotCode &&
Lote
{selectedOrder.lotCode}
}{selectedOrder.rollQuantity !== null &&
Rolos
{formatQuantity(selectedOrder.rollQuantity)}
}{selectedOrder.fabricKg !== null &&
Malha
{formatQuantity(selectedOrder.fabricKg)} kg
}{selectedOrder.ribKg !== null &&
Ribana
{formatQuantity(selectedOrder.ribKg)} kg
}{selectedOrder.yieldPiecesPerKg !== null &&
Rendimento
{formatQuantity(selectedOrder.yieldPiecesPerKg)} un./kg
}
}{selectedOrder.steps.length > 0 &&

Etapas

{selectedOrder.steps.map(step =>
{step.name}{formatDate(step.startDate)} - {formatDate(step.endDate)}
)}
}{selectedOrder.notes &&

{selectedOrder.notes}

}
} -
- -
- )} {statusEditorOrder && (