Addes Qty calculation and price weight calculation

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingEditQuantity/WeightCalculatePrice.jsx

@@ -1,87 +1,105 @@
 import { useState, useEffect, useRef } from 'react';
 import { InputField } from '../../../../../Components/Forms/InputField.jsx';
-import { Form } from 'antd';
+import { Form, Radio } from 'antd';
 import Buttons from '../../../../../Components/Forms/Buttons.jsx';
 import { ArrowRightOutlined } from '@ant-design/icons';
+import "./WeightCalculatePrice.scss"
 
 const WeightCalculatePrice = ({ itemData, CartOrderDetails, onSubmit }) => {
   const [enteredPrice, setEnteredPrice] = useState('');
+  const [enteredQty, setEnteredQty] = useState('');
   const [calculatedQty, setCalculatedQty] = useState(0);
+  const [calcMode, setCalcMode] = useState('amt');
+
   const priceInputRef = useRef(null);
   const [form] = Form.useForm();
 
-  const basePrice = parseFloat(itemData?.OrderRate || itemData?.SellingPrice || 0);
+  const basePrice = parseFloat(
+    itemData?.OrderRate || itemData?.SellingPrice || 0
+  );
 
+  // Auto focus input
   useEffect(() => {
     setTimeout(() => {
-      const inputElement = priceInputRef.current?.querySelector('input');
+      const input = priceInputRef.current?.querySelector('input');
-      if (inputElement) {
+      if (input) input.focus();
-        inputElement.focus();
-      }
     }, 100);
-  }, []);
+  }, [calcMode]);
 
-  // Calculate quantity based on entered price
+  // AMT → calculate QTY
   const handlePriceChange = (e) => {
     const value = e.target.value;
     setEnteredPrice(value);
 
     if (value && basePrice > 0) {
-      const price = parseFloat(value);
+      const qty = parseFloat(value) / basePrice;
-      const qty = price / basePrice;
       setCalculatedQty(qty);
     } else {
       setCalculatedQty(0);
     }
   };
 
+  // KGS → calculate AMT
+  const handleQtyChange = (e) => {
+    const value = e.target.value;
+    setEnteredQty(value);
+
+    if (value && basePrice > 0) {
+      const qty = parseFloat(value);
+      const price = qty * basePrice;
+      setEnteredPrice(price.toFixed(2));
+      setCalculatedQty(qty);
+    } else {
+      setEnteredPrice('');
+      setCalculatedQty(0);
+    }
+  };
+
   const handleSubmit = (e) => {
-    if (e && e.preventDefault) {
+    if (e && e.preventDefault) e.preventDefault();
-      e.preventDefault();
-    }
 
-    if (enteredPrice && calculatedQty > 0) {
+    if (calculatedQty > 0 && enteredPrice > 0) {
-      console.log('Submitting weight calculation:', {
+      onSubmit?.({
         price: parseFloat(enteredPrice),
-        quantity: calculatedQty,
+        quantity: parseFloat(calculatedQty),
       });
-
-      // Pass the calculated values back to parent component
-      if (onSubmit) {
-        onSubmit({
-          price: parseFloat(enteredPrice),
-          quantity: calculatedQty,
-        });
-      }
     }
   };
 
   return (
     <div className="weight-calculate-price">
-      <Form 
+      <Form form={form} onFinish={handleSubmit}>
-        form={form} 
+        {/* MODE SELECTION */}
-        onFinish={handleSubmit}
-        onSubmitCapture={(e) => e.preventDefault()}
-      >
         <div className="weight-info">
-          <div className="product-details">
+          <div className="productils">
-            <p><strong>Product:</strong> {itemData?.ProdName}</p>
+            <Radio.Group
-            <p><strong>Variant:</strong> {itemData?.ProdVariantName}</p>
+              value={calcMode}
-            <p><strong>Base Price:</strong> ₹{basePrice.toFixed(2)} per {itemData?.UomName || 'unit'}</p>
+              onChange={(e) => {
+                setCalcMode(e.target.value);
+                setEnteredPrice('');
+                setEnteredQty('');
+                setCalculatedQty(0);
+                form.resetFields();
+              }}
+            >
+              <Radio.Button value="amt">AMT</Radio.Button>
+              <Radio.Button value="kgs">KGS</Radio.Button>
+            </Radio.Group>
+
+            <p>
+              <strong>Base Price:</strong> ₹{basePrice.toFixed(2)} per{' '}
+              {itemData?.UomName || 'unit'}
+            </p>
           </div>
         </div>
 
+        {/* AMOUNT INPUT */}
+        {calcMode === 'amt' && (
           <Form.Item
             name="enteredPrice"
             rules={[
-            {
+              { required: true, message: 'Please enter amount' },
-              required: true,
+              { pattern: /^[1-9]\d*(\.\d+)?$/, message: 'Invalid amount' },
-              message: 'Please enter the price',
-            },
-            {
-              pattern: /^[1-9]\d*(\.\d+)?$/,
-              message: 'Please enter a valid price',
-            },
             ]}
           >
             <InputField
@@ -89,35 +107,52 @@ const WeightCalculatePrice = ({ itemData, CartOrderDetails, onSubmit }) => {
               label="Enter Amount (₹)"
               value={enteredPrice}
               onChange={handlePriceChange}
-            autocomplete="off"
               inputMode="decimal"
-            placeholder="Enter price amount"
               onInput={(e) => {
-              const cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
+                e.target.value = e.target.value.replace(/[^0-9.]/g, '');
-              const parts = cleanedValue.split('.');
-              e.target.value =
-                parts.length > 2
-                  ? `${parts[0]}.${parts.slice(1).join('')}`
-                  : cleanedValue;
               }}
             />
           </Form.Item>
+        )}
 
+        {/* QUANTITY INPUT */}
+        {calcMode === 'kgs' && (
+          <Form.Item
+            name="enteredQty"
+            rules={[
+              { required: true, message: 'Please enter quantity' },
+              { pattern: /^\d*(\.\d+)?$/, message: 'Invalid quantity' },
+            ]}
+          >
+            <InputField
+              ref={priceInputRef}
+              label={`Enter Quantity (${itemData?.UomName || 'KGS'})`}
+              value={enteredQty}
+              onChange={handleQtyChange}
+              inputMode="decimal"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^0-9.]/g, '');
+              }}
+            />
+          </Form.Item>
+        )}
         <div className="calculated-quantity-display">
           <div className="quantity-row">
-            <label className="quantity-label">Calculated Quantity:</label>
+            <label>Calculated Quantity : </label>
-            <span className="quantity-value">
+            <span>
-              {calculatedQty > 0 ? calculatedQty.toFixed(3) : '0.000'} {itemData?.UomName || 'units'}
+              {calculatedQty > 0 ? calculatedQty.toFixed(3) : '0.000'}{' '}
+              {itemData?.UomName || 'units'}
             </span>
           </div>
-          {calculatedQty > 0 && (
+
+          {enteredPrice > 0 && (
             <div className="total-display">
               <label>Total Amount:</label>
-              <span>₹{parseFloat(enteredPrice || 0).toFixed(2)}</span>
+              <span>₹{parseFloat(enteredPrice).toFixed(2)}</span>
             </div>
           )}
         </div>
-        <div className="submit-button-container">
+        <div className="weightCalBTN">
           <Buttons
             buttonText="Apply"
             color="901D77"