React Enterprise Architecture & Custom Engineering

// ChittorTech Optimized POS Line Item Component
import React, { memo, useCallback } from 'react';

export const POSCartRow = memo(function POSCartRow({ item, onUpdateQty, onRemove }) {
  const handleInc = useCallback(() => onUpdateQty(item.id, item.qty + 1), [item.id, item.qty, onUpdateQty]);
  const handleDec = useCallback(() => onUpdateQty(item.id, Math.max(1, item.qty - 1)), [item.id, item.qty, onUpdateQty]);

  return (
    <tr className="pos-row">
      <td className="fw-semibold">{item.name}</td>
      <td>₹{item.price.toFixed(2)}</td>
      <td>
        <button onClick={handleDec} className="btn-qty">-</button>
        <span className="mx-2">{item.qty}</span>
        <button onClick={handleInc} className="btn-qty">+</button>
      </td>
      <td className="fw-bold">₹{(item.price * item.qty).toFixed(2)}</td>
      <td><button onClick={() => onRemove(item.id)} className="btn-del">×</button></td>
    </tr>
  );
});