combo sales screen price qty edit

src/Pages/BookingScreen/Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx

@@ -73,9 +73,9 @@ import {
 } from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
 import { useRemoveProducts } from '../BSBillingTable3/RemoveCartWithOffer.jsx';
 import { useUtilsComponent } from '../../../../../Services/utils.js';
-import ComboEditQty from '../ComboBillTableEdit/ComboEditQty.jsx';
 import ComboEditRate from '../ComboBillTableEdit/ComboEditRate.jsx';
 import CustomerPriceHistory from '../../UtillComponents/CustomerPriceHistory.jsx';
+import ComboEditQtyAndRate from '../ComboBillTableEdit/ComboEditQtyAndRate.jsx';
 
 const ComboSalesBillTable = () => {
   const { removeExtraCharge } = useUtilsComponent();
@@ -177,6 +177,10 @@ const ComboSalesBillTable = () => {
   const [qtyEdit, setQtyEdit] = useState(false);
   const qtyTdRef = useRef(null);
   const qtyInputRef = useRef(null);
+  const [shortKeyMethod, setshortKeyMethod] = useState(null);
+  const [activeRowIndex, setActiveRowIndex] = useState(null);
+  const [activeColIndex, setActiveColIndex] = useState(null);
+  const tableRef = useRef(null);
 
   const handleEditQTYcombo = () => {
     if (!qtyEdit) {
@@ -268,7 +272,7 @@ const ComboSalesBillTable = () => {
       const item = getSelectedItem();
       if (!item) return;
 
-      handleEditQuantity(item);
+      handleEditQuantityCombo(item);
       setshortKeyMethod(method);
     };
 
@@ -2079,6 +2083,95 @@ const ComboSalesBillTable = () => {
     ...(tableDataDinein || []),
   ];
 
+  // Set last row as active when data changes
+  useEffect(() => {
+    if (combinedTableData?.length > 0 && activeRowIndex === null) {
+      setActiveRowIndex(combinedTableData.length - 1);
+    }
+  }, [combinedTableData?.length]);
+
+  // Table navigation
+  useEffect(() => {
+    const handleTableNav = (e) => {
+      if (EditQtyCombo || EditRateCombo) return;
+      if (!combinedTableData?.length || activeRowIndex === null) return;
+
+      const visibleCols =
+        tableOptions?.filter((opt) =>
+          ['Item', 'Quantity', 'Rate', 'Total'].includes(opt.OptionName)
+        ) || [];
+
+      // Arrow Up/Down - Row navigation
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveRowIndex((prev) => Math.max(0, prev - 1));
+        setActiveColIndex(null);
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveRowIndex((prev) =>
+          Math.min(combinedTableData.length - 1, prev + 1)
+        );
+        setActiveColIndex(null);
+      }
+      // Arrow Left/Right - Column navigation
+      else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (activeColIndex === null) {
+          setActiveColIndex(visibleCols.length - 1);
+        } else {
+          setActiveColIndex((prev) => Math.max(0, prev - 1));
+        }
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (activeColIndex === null) {
+          setActiveColIndex(0);
+        } else {
+          setActiveColIndex((prev) =>
+            Math.min(visibleCols.length - 1, prev + 1)
+          );
+        }
+      }
+      // Tab - Move to next column
+      else if (e.key === 'Tab') {
+        e.preventDefault();
+        if (activeColIndex === null) {
+          setActiveColIndex(0);
+        } else {
+          const nextCol = activeColIndex + 1;
+          if (nextCol >= visibleCols.length) {
+            setActiveColIndex(0);
+            if (activeRowIndex < combinedTableData.length - 1) {
+              setActiveRowIndex((prev) => prev + 1);
+            }
+          } else {
+            setActiveColIndex(nextCol);
+          }
+        }
+      }
+      // Enter - Trigger cell action
+      else if (e.key === 'Enter' && activeColIndex !== null) {
+        e.preventDefault();
+        const row = combinedTableData[activeRowIndex];
+        const col = visibleCols[activeColIndex];
+        if (row && col && editField) {
+          if (col.OptionName === 'Quantity') handleEditQuantityCombo(row);
+          else if (col.OptionName === 'Rate') handleEditRateCombo(row);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleTableNav);
+    return () => window.removeEventListener('keydown', handleTableNav);
+  }, [
+    activeRowIndex,
+    activeColIndex,
+    combinedTableData,
+    EditQtyCombo,
+    EditRateCombo,
+    editField,
+    tableOptions,
+  ]);
+
   console.log(combinedTableData, 'combinedTableData', tableData);
   const displayTableData =
     BillOrderPre === 'N' ? [...combinedTableData].reverse() : combinedTableData;
@@ -2266,7 +2359,7 @@ const ComboSalesBillTable = () => {
             return (
               <tr
                 key={`${row?.InwardDtlId || index}-${row?.BookingTypeName || ''}-${row?.SalesId || ''}-${index}`}
-                className={row.highlighted ? 'highlighted-row' : ''}
+                className={`${row.highlighted ? 'highlighted-row' : ''} ${activeRowIndex === index ? 'active-row' : ''}`}
                 style={{
                   fontFamily: SelectedFont,
                   backgroundColor:
@@ -2310,7 +2403,15 @@ const ComboSalesBillTable = () => {
                       : 'none',
                 }}
               >
-                {tableOptions?.map((item) => (
+                {tableOptions?.map((item, colIdx) => {
+                  const isActiveCell =
+                    activeRowIndex === index &&
+                    activeColIndex !== null &&
+                    ['Item', 'Quantity', 'Rate', 'Total'].indexOf(
+                      item.OptionName
+                    ) === activeColIndex;
+
+                  return (
                     <>
                       {/* HSN Code */}
                       {item.OptionName === 'HSNCode' && (
@@ -2328,7 +2429,7 @@ const ComboSalesBillTable = () => {
                         item.OptionName === 'Product Name') && (
                           <td
                             key={`prod-${index}`}
-                          className="productNameTd"
+                            className={`productNameTd ${isActiveCell ? 'active-cell' : ''}`}
                             onClick={() =>
                               row.FullProductIdentifierDtls?.length > 0 ||
                                 row.ProductIdentifierDtls?.length > 0
@@ -2372,24 +2473,30 @@ const ComboSalesBillTable = () => {
                       {/* Quantity */}
                       {item.OptionName === 'Quantity' && (
                         <td
-                        ref={qtyTdRef}
+                          ref={(el) => {
+                            if (
+                              shortKeyMethod === 'qty' &&
+                              row?.localId === Index
+                            ) {
+                              el?.focus();
+                              el?.click();
+                            }
+                          }}
                           key={`qty-${index}`}
-                        // className="qtyTd"
-                        className={
-                          EditQtyCombo && row?.localId === Index
+                          tabIndex={0}
+                          className={`${EditQtyCombo && row?.localId === Index
                             ? 'EditQTYcomboTD'
                             : 'qtyTd'
-                        }
+                            } ${isActiveCell ? 'active-cell' : ''}`}
                         onClick={() =>
                           editField && handleEditQuantityCombo(row)
                         }
-                      // onClick={() => handleEditQTYcombo()}
                         >
                           {(!EditQtyCombo || row?.localId !== Index) && (
                             <>{row.OrderQty}</>
                           )}
                           {EditQtyCombo && row?.localId === Index && (
-                          <ComboEditQty
+                          <ComboEditQtyAndRate
                             key={`edit-qty-${Index}`}
                             handleEditQuantityCancel={
                               handleEditQuantityComboCancel
@@ -2399,7 +2506,6 @@ const ComboSalesBillTable = () => {
                             Index={Index}
                             setIndex={setIndex}
                             setEditQtyCombo={setEditQtyCombo}
-                          //  id={`qty-${index}`}
                             />
                           )}
                         </td>
@@ -2409,9 +2515,7 @@ const ComboSalesBillTable = () => {
                       {item.OptionName === 'Rate' && (
                         <td
                           key={`rate-${index}`}
-                        // className="rateTd"
-                        className={EditRateCombo ? 'rateTdEditRate' : 'rateTd'}
-                        // onClick={() => editField && handleEditQuantity(row)}
+                          className={`${EditRateCombo ? 'rateTdEditRate' : 'rateTd'} ${isActiveCell ? 'active-cell' : ''}`}
                           onClick={() => editField && handleEditRateCombo(row)}
                         >
                         {!EditRateCombo || row?.localId !== Index ? (
@@ -2422,7 +2526,7 @@ const ComboSalesBillTable = () => {
                             </>
                         ) : null}
                           {EditRateCombo && row?.localId === Index && (
-                          <ComboEditRate
+                          <ComboEditQtyAndRate
                             key={`edit-rate-${Index}`}
                             handleEditRateComboCancel={
                               handleEditRateComboCancel
@@ -2468,7 +2572,7 @@ const ComboSalesBillTable = () => {
                       {item.OptionName === 'Total' && (
                         <td
                           key={`total-${index}`}
-                        className="totalTd"
+                          className={`totalTd ${isActiveCell ? 'active-cell' : ''}`}
                           onClick={() => {
                             // if (editField) {
                             //   handleEditQuantity(row)
@@ -2479,7 +2583,9 @@ const ComboSalesBillTable = () => {
                           }}
                         >
                           {allowDecimal
-                          ? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(2)
+                            ? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(
+                              2
+                            )
                             : Number(row.TotalAmt - (row?.Offer || 0))}
                         </td>
                       )}
@@ -2491,12 +2597,18 @@ const ComboSalesBillTable = () => {
                         </td>
                       )}
                       {item.OptionName === '%' && (
-                      <td key={`percentage-${index}`} className="percentageTd">
+                        <td
+                          key={`percentage-${index}`}
+                          className="percentageTd"
+                        >
                           {row.percentage || '-'}
                         </td>
                       )}
                       {item.OptionName === 'Commission' && (
-                      <td key={`commission-${index}`} className="commissionTd">
+                        <td
+                          key={`commission-${index}`}
+                          className="commissionTd"
+                        >
                           {row.commission || '-'}
                         </td>
                       )}
@@ -2526,7 +2638,8 @@ const ComboSalesBillTable = () => {
                         </td>
                       )}
                     </>
-                ))}
+                  );
+                })}
               </tr>
             );
           })}

src/Pages/BookingScreen/Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.scss

@@ -28,7 +28,7 @@
     }
 
     tbody {
-      > tr:last-child {
+      >tr:last-child {
         background-color: #e5d434 !important;
         position: sticky;
         bottom: 0;
@@ -40,6 +40,16 @@
           background-color: #e5d434;
         }
 
+        &.active-row {
+          outline: 2px solid #1292ee;
+          outline-offset: -2px;
+        }
+
+        td.active-cell {
+          background-color: #1292ee !important;
+          color: #ffffff;
+        }
+
         td {
           padding: 4px 8px;
           border: 1px solid #9c9c9c;
@@ -189,3 +199,14 @@
   padding: 1px !important;
   text-align: center;
 }
+
+.focused-cell {
+  background-color: #fff3cd !important;
+  border: 2px solid #ffc107 !important;
+  box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
+}
+
+
+:where(.css-dev-only-do-not-override-mncuj7).ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: rgba(116, 107, 107, 0.356);
+}