first

src/components/orders/OrdersTableBody.tsx

@@ -0,0 +1,93 @@
+import React, { memo, useMemo } from "react";
+import {
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@/src/components/ui/table";
+import { OrderRowExpandable } from "./tabela-pedidos/components/OrderRowExpandable";
+import { Order } from "@/src/components/types";
+
+interface OrdersTableBodyProps {
+  orders: Order[];
+  currentOrders: Order[];
+  selectedOrderId: string | null;
+  visibleColumns: string[];
+  getStoreName: (storeId?: string) => string;
+  handleRowClick: (orderId: string) => void;
+}
+
+// Componente de linha vazia memoizado
+const EmptyRow = memo(({ colSpan }: { colSpan: number }) => (
+  <TableRow>
+    <TableCell colSpan={colSpan} className="h-24 text-center text-xs">
+      Nenhum pedido encontrado com os filtros informados.
+    </TableCell>
+  </TableRow>
+));
+
+// Componente de linha de pedido memoizado
+const OrderRow = memo(({ 
+  order, 
+  isSelected, 
+  visibleColumns, 
+  onSelect, 
+  getStoreName 
+}: { 
+  order: Order; 
+  isSelected: boolean; 
+  visibleColumns: string[];
+  onSelect: (orderId: string) => void;
+  getStoreName: (storeId?: string) => string;
+}) => {
+  // Create a new order object with the store name only (without ID prefix)
+  const orderWithStore = {
+    ...order,
+    store: getStoreName(order.storeId),
+    storeId: order.storeId, // Preserve original storeId
+  };
+  
+  return (
+    <OrderRowExpandable
+      key={order.orderId}
+      order={orderWithStore}
+      isSelected={isSelected}
+      onSelect={onSelect}
+      orderItems={[]}
+      loadingItems={false}
+      itemsError={null}
+      visibleColumns={visibleColumns}
+    />
+  );
+});
+
+// Componente principal memoizado
+function OrdersTableBodyComponent({
+  orders,
+  currentOrders,
+  selectedOrderId,
+  visibleColumns,
+  getStoreName,
+  handleRowClick,
+}: OrdersTableBodyProps) {
+  // Renderização condicional baseada na presença de orders, memoizada
+  const content = useMemo(() => {
+    if (orders.length === 0) {
+      return <EmptyRow colSpan={visibleColumns.length} />;
+    }
+    
+    return currentOrders.map((order) => (
+      <OrderRow
+        key={order.orderId}
+        order={order}
+        isSelected={selectedOrderId === order.orderId}
+        visibleColumns={visibleColumns}
+        onSelect={handleRowClick}
+        getStoreName={getStoreName}
+      />
+    ));
+  }, [orders.length, currentOrders, selectedOrderId, visibleColumns, getStoreName, handleRowClick]);
+
+  return <TableBody>{content}</TableBody>;
+}
+
+export const OrdersTableBody = memo(OrdersTableBodyComponent);