combo sales screen price qty edit

This commit is contained in:
Srinath 2026-02-10 19:55:47 +05:30
parent 29eaa25a32
commit d184811635
3 changed files with 3570 additions and 186 deletions

View File

@ -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);
};
@ -285,7 +289,7 @@ const ComboSalesBillTable = () => {
// 👉 CTRL shortcuts
if (!event.ctrlKey) return;
if (key === 'q') {
if (key === 'q') {
event.preventDefault();
handleShortcut('qty');
} else if (key === 'e') {
@ -298,7 +302,7 @@ const ComboSalesBillTable = () => {
event.preventDefault();
handleShortcut('weightAmount');
}
};
window.addEventListener('keydown', handleKeyDown);
@ -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,86 +2403,100 @@ const ComboSalesBillTable = () => {
: 'none',
}}
>
{tableOptions?.map((item) => (
<>
{/* HSN Code */}
{item.OptionName === 'HSNCode' && (
<td
key={`hsn-${index}`}
className="hsnCodeTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row.HSNCode || '-'}
</td>
)}
{tableOptions?.map((item, colIdx) => {
const isActiveCell =
activeRowIndex === index &&
activeColIndex !== null &&
['Item', 'Quantity', 'Rate', 'Total'].indexOf(
item.OptionName
) === activeColIndex;
{/* Product Name / Item */}
{(item.OptionName === 'Item' ||
item.OptionName === 'Product Name') && (
return (
<>
{/* HSN Code */}
{item.OptionName === 'HSNCode' && (
<td
key={`prod-${index}`}
className="productNameTd"
onClick={() =>
row.FullProductIdentifierDtls?.length > 0 ||
row.ProductIdentifierDtls?.length > 0
? handleImeiDetails(row)
: editField && handleEditQuantity(row)
}
key={`hsn-${index}`}
className="hsnCodeTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row?.Type !== 'OS' ? row.ProdName : row.ServiceName}
{row?.BrandName ? ` ${row.BrandName}` : ''}
{row?.Type !== 'C' && (
<p className="Tbl3-Variant">
{/* {row?.ProdVariantName} {row?.Size} {row?.UomName} */}
(
{!row?.ProdVariantName?.toLowerCase()?.includes(
'variant'
) && <span>{row?.ProdVariantName} </span>}
{row?.Size}
{row?.SinglePc == 'Y' ? 'PCS' : row?.UomName})
</p>
)}
{row?.Type === 'C' &&
row.ProdDetail?.map((prod, idx) => (
<p key={idx}>
{prod.ProdName} - {prod.Size} {prod.UomName}
</p>
))}
{row.HSNCode || '-'}
</td>
)}
{/* Barcode */}
{item.OptionName === 'Barcode' && (
<td
key={`barcode-${index}`}
className="barcodeTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row.QRCode || '-'}
</td>
)}
{/* Product Name / Item */}
{(item.OptionName === 'Item' ||
item.OptionName === 'Product Name') && (
<td
key={`prod-${index}`}
className={`productNameTd ${isActiveCell ? 'active-cell' : ''}`}
onClick={() =>
row.FullProductIdentifierDtls?.length > 0 ||
row.ProductIdentifierDtls?.length > 0
? handleImeiDetails(row)
: editField && handleEditQuantity(row)
}
>
{row?.Type !== 'OS' ? row.ProdName : row.ServiceName}
{row?.BrandName ? ` ${row.BrandName}` : ''}
{row?.Type !== 'C' && (
<p className="Tbl3-Variant">
{/* {row?.ProdVariantName} {row?.Size} {row?.UomName} */}
(
{!row?.ProdVariantName?.toLowerCase()?.includes(
'variant'
) && <span>{row?.ProdVariantName} </span>}
{row?.Size}
{row?.SinglePc == 'Y' ? 'PCS' : row?.UomName})
</p>
)}
{row?.Type === 'C' &&
row.ProdDetail?.map((prod, idx) => (
<p key={idx}>
{prod.ProdName} - {prod.Size} {prod.UomName}
</p>
))}
</td>
)}
{/* Quantity */}
{item.OptionName === 'Quantity' && (
<td
ref={qtyTdRef}
key={`qty-${index}`}
// className="qtyTd"
className={
EditQtyCombo && row?.localId === Index
{/* Barcode */}
{item.OptionName === 'Barcode' && (
<td
key={`barcode-${index}`}
className="barcodeTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row.QRCode || '-'}
</td>
)}
{/* Quantity */}
{item.OptionName === 'Quantity' && (
<td
ref={(el) => {
if (
shortKeyMethod === 'qty' &&
row?.localId === Index
) {
el?.focus();
el?.click();
}
}}
key={`qty-${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
>
{(!EditQtyCombo || row?.localId !== Index) && (
<>{row.OrderQty}</>
)}
{EditQtyCombo && row?.localId === Index && (
<ComboEditQtyAndRate
key={`edit-qty-${Index}`}
handleEditQuantityCancel={
handleEditQuantityComboCancel
@ -2399,30 +2506,27 @@ const ComboSalesBillTable = () => {
Index={Index}
setIndex={setIndex}
setEditQtyCombo={setEditQtyCombo}
// id={`qty-${index}`}
/>
)}
</td>
)}
/>
)}
</td>
)}
{/* Rate */}
{item.OptionName === 'Rate' && (
<td
key={`rate-${index}`}
// className="rateTd"
className={EditRateCombo ? 'rateTdEditRate' : 'rateTd'}
// onClick={() => editField && handleEditQuantity(row)}
onClick={() => editField && handleEditRateCombo(row)}
>
{/* Rate */}
{item.OptionName === 'Rate' && (
<td
key={`rate-${index}`}
className={`${EditRateCombo ? 'rateTdEditRate' : 'rateTd'} ${isActiveCell ? 'active-cell' : ''}`}
onClick={() => editField && handleEditRateCombo(row)}
>
{!EditRateCombo || row?.localId !== Index ? (
<>
{allowDecimal
? Number(row?.OrderRate).toFixed(2)
: Number(row?.OrderRate)}
</>
<>
{allowDecimal
? Number(row?.OrderRate).toFixed(2)
: Number(row?.OrderRate)}
</>
) : null}
{EditRateCombo && row?.localId === Index && (
<ComboEditRate
{EditRateCombo && row?.localId === Index && (
<ComboEditQtyAndRate
key={`edit-rate-${Index}`}
handleEditRateComboCancel={
handleEditRateComboCancel
@ -2432,101 +2536,110 @@ const ComboSalesBillTable = () => {
Index={Index}
setIndex={setIndex}
setEditRateCombo={setEditRateCombo}
/>
)}
</td>
)}
/>
)}
</td>
)}
{/* Disc % */}
{item.OptionName === 'Discount' && (
<td
key={`discPer-${index}`}
className="discPerTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row?.Offer > 0
? `${(
(row.Offer / (row?.OrderQty * row?.OrderRate)) *
100
).toFixed(2)}%`
: '-'}
</td>
)}
{/* Disc % */}
{item.OptionName === 'Discount' && (
<td
key={`discPer-${index}`}
className="discPerTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row?.Offer > 0
? `${(
(row.Offer / (row?.OrderQty * row?.OrderRate)) *
100
).toFixed(2)}%`
: '-'}
</td>
)}
{/* Disc Amt */}
{item.OptionName === 'Amount' && (
<td
key={`discAmt-${index}`}
className="discAmtTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row.Offer || '-'}
</td>
)}
{/* Disc Amt */}
{item.OptionName === 'Amount' && (
<td
key={`discAmt-${index}`}
className="discAmtTd"
onClick={() => editField && handleEditQuantity(row)}
>
{row.Offer || '-'}
</td>
)}
{/* Total */}
{item.OptionName === 'Total' && (
<td
key={`total-${index}`}
className="totalTd"
onClick={() => {
// if (editField) {
// handleEditQuantity(row)
// }
if (GetCustId) {
handleCustomerProductPriceHistory(row);
}
}}
>
{allowDecimal
? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(2)
: Number(row.TotalAmt - (row?.Offer || 0))}
</td>
)}
{/* Optional columns */}
{item.OptionName === 'SalesMan' && (
<td key={`salesMan-${index}`} className="salesManTd">
{row.salesMan || '-'}
</td>
)}
{item.OptionName === '%' && (
<td key={`percentage-${index}`} className="percentageTd">
{row.percentage || '-'}
</td>
)}
{item.OptionName === 'Commission' && (
<td key={`commission-${index}`} className="commissionTd">
{row.commission || '-'}
</td>
)}
{item.OptionName === 'StockId' && (
<td key={`stockId-${index}`} className="stockIdTd">
{row.stockId || '-'}
</td>
)}
{item.OptionName === 'Points' && (
<td key={`points-${index}`} className="pointsTd">
{row.points || '-'}
</td>
)}
{/* Delete */}
{item.OptionName === 'Delete' && (
<td key={`delete-${index}`} className="deleteTd">
<AiOutlineClose
onClick={() => removeFromCart(row)}
style={{
color: '#FF4D4F',
cursor: 'pointer',
textAlign: 'center',
width: '100%',
{/* Total */}
{item.OptionName === 'Total' && (
<td
key={`total-${index}`}
className={`totalTd ${isActiveCell ? 'active-cell' : ''}`}
onClick={() => {
// if (editField) {
// handleEditQuantity(row)
// }
if (GetCustId) {
handleCustomerProductPriceHistory(row);
}
}}
/>
</td>
)}
</>
))}
>
{allowDecimal
? Number(row.TotalAmt - (row?.Offer || 0)).toFixed(
2
)
: Number(row.TotalAmt - (row?.Offer || 0))}
</td>
)}
{/* Optional columns */}
{item.OptionName === 'SalesMan' && (
<td key={`salesMan-${index}`} className="salesManTd">
{row.salesMan || '-'}
</td>
)}
{item.OptionName === '%' && (
<td
key={`percentage-${index}`}
className="percentageTd"
>
{row.percentage || '-'}
</td>
)}
{item.OptionName === 'Commission' && (
<td
key={`commission-${index}`}
className="commissionTd"
>
{row.commission || '-'}
</td>
)}
{item.OptionName === 'StockId' && (
<td key={`stockId-${index}`} className="stockIdTd">
{row.stockId || '-'}
</td>
)}
{item.OptionName === 'Points' && (
<td key={`points-${index}`} className="pointsTd">
{row.points || '-'}
</td>
)}
{/* Delete */}
{item.OptionName === 'Delete' && (
<td key={`delete-${index}`} className="deleteTd">
<AiOutlineClose
onClick={() => removeFromCart(row)}
style={{
color: '#FF4D4F',
cursor: 'pointer',
textAlign: 'center',
width: '100%',
}}
/>
</td>
)}
</>
);
})}
</tr>
);
})}

View File

@ -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);
}