Addes Qty calculation and price weight calculation

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

@@ -1,123 +1,158 @@
 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);
     }
   };
 
-  const handleSubmit = (e) => {
+  // KGS → calculate AMT
-    if (e && e.preventDefault) {
+  const handleQtyChange = (e) => {
-      e.preventDefault();
+    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);
     }
+  };
 
-    if (enteredPrice && calculatedQty > 0) {
+  const handleSubmit = (e) => {
-      console.log('Submitting weight calculation:', {
+    if (e && e.preventDefault) e.preventDefault();
+
+    if (calculatedQty > 0 && enteredPrice > 0) {
+      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>
 
-        <Form.Item
+        {/* AMOUNT INPUT */}
-          name="enteredPrice"
+        {calcMode === 'amt' && (
-          rules={[
+          <Form.Item
-            {
+            name="enteredPrice"
-              required: true,
+            rules={[
-              message: 'Please enter the price',
+              { required: true, message: 'Please enter amount' },
-            },
+              { pattern: /^[1-9]\d*(\.\d+)?$/, message: 'Invalid amount' },
-            {
+            ]}
-              pattern: /^[1-9]\d*(\.\d+)?$/,
+          >
-              message: 'Please enter a valid price',
+            <InputField
-            },
+              ref={priceInputRef}
-          ]}
+              label="Enter Amount (₹)"
-        >
+              value={enteredPrice}
-          <InputField
+              onChange={handlePriceChange}
-            ref={priceInputRef}
+              inputMode="decimal"
-            label="Enter Amount (₹)"
+              onInput={(e) => {
-            value={enteredPrice}
+                e.target.value = e.target.value.replace(/[^0-9.]/g, '');
-            onChange={handlePriceChange}
+              }}
-            autocomplete="off"
+            />
-            inputMode="decimal"
+          </Form.Item>
-            placeholder="Enter price amount"
+        )}
-            onInput={(e) => {
-              const cleanedValue = 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"
@@ -131,4 +166,4 @@ const WeightCalculatePrice = ({ itemData, CartOrderDetails, onSubmit }) => {
   );
 };
 
-export default WeightCalculatePrice; 
+export default WeightCalculatePrice;