i just added Custom Field Feature

src/Pages/BookingScreen/Forms/QuickAdd/QuickAdd.jsx

@@ -6,6 +6,7 @@ import {
   PlusCircleOutlined,
   InfoCircleOutlined,
 } from '@ant-design/icons';
+import { IoSettingsOutline } from "react-icons/io5";
 import Buttons from '../../../../Components/Forms/Buttons.jsx';
 import { InputField } from '../../../../Components/Forms/InputField.jsx';
 import { Messages } from '../../../../Components/Notifications/Messages';
@@ -31,7 +32,9 @@ import {
   supplierSelector,
   postProductData,
   postTax,
-  getHsnData
+  getHsnData,
+  getFieldSetupData,
+  postFieldSetup
 } from '../../../../Features/ProductPage/ProductPage.js';
 import {
   ChangeNewQrProduct,
@@ -78,8 +81,12 @@ const ProductForm = ({
   const productFieldPreferences = appPreferences?.find(
     (preference) => preference?.PreferredCatName?.toLowerCase() === "product form fields"
   )?.PreferenceCatDetails;
-
+  // const CustomQuickAddField = appPreferences?.find(
-
+  //   (preference) => preference?.PreferredCatName?.toLowerCase() === "quick add custom fields"
+  // )?.PreferenceCatDetails;
+  const categoryId = appPreferences?.find(
+    p => p?.PreferredCatName?.toLowerCase() === "quick add custom fields"
+  )?.PreferredCatId;
 
   const UomTypePreference = appPreferences?.find((preference) => preference?.PreferredCatName === 'Product Uom')?.PreferenceCatDetails
   const UomPreference = UomData?.filter((item) => UomTypePreference?.some?.((e) => e?.PreferredSubCatName?.toLowerCase() == item?.ConfigName?.toLowerCase() && e?.PreferredStatus == "Y"))
@@ -87,6 +94,7 @@ const ProductForm = ({
   const filteredFields = productFieldPreferences?.filter(
     (field) => field?.PreferredStatus === 'Y'
   );
+
   const cessField = filteredFields?.find((field) => field?.PreferredSubCatName === 'Cess');
   const hsnField = filteredFields?.find((field) => field?.PreferredSubCatName === 'HSN');
   const taxField = filteredFields?.find((field) => field?.PreferredSubCatName === 'Tax');
@@ -95,15 +103,21 @@ const ProductForm = ({
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [SelectedUom, setSelectedUom] = useState(null);
+
   const [SelectedTaxId, setSelectedTaxId] = useState(null);
   const [SelectedTaxNameId, setSelectedTaxNameId] = useState(null);
   const [OpenTaxModel, setOpenTaxModel] = useState(false);
-  const [OpenAdd, setOpenAdd] = useState(false);
+  // const [OpenAdd, setOpenAdd] = useState(false);
   const [imageBrandUrl, setBrandImageUrl] = useState('');
   const [selectedHsn, setSelectedHsn] = useState("");
   const [HsnDetails, setHsnDetails] = useState([]);
-
+  const [selectedAdditionalColumn, setSelectedAdditionalColumn] = useState([]);
-
+  const [showColumnModal, setShowColumnModal] = useState(false);
+  const [tempSelectedColumns, setTempSelectedColumns] = useState([]);
+  const [tableFieldPreferences, setTableFieldPreferences] = useState([]);
+  const [selectedFields, setSelectedFields] = useState([]);
+  console.log(selectedAdditionalColumn, "selectedAdditionalColumn")
+  console.log(tempSelectedColumns, "tempSelectedColumns")
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
   const AppId = getSession('AppId');
@@ -149,19 +163,39 @@ const ProductForm = ({
       setSelectedTaxId(TaxId);
     }
   }, [TaxData]);
+  useEffect(() => {
+    getFieldSetup();
+  }, [categoryId])
 
+  const getFieldSetup = async () => {
+    try {
+      const response = await dispatch(getFieldSetupData({ AppId, CompId, BranchId, categoryId, Type: "QA" })).unwrap();
+      if (response?.data?.statusCode === 1) {
+        console.log(response?.data?.data?.[0]?.ConfigDtl, "Field Setup Data");
+        setSelectedFields(response?.data?.data?.[0]?.ConfigDtl?.filter(c => c.ConfigId && c.Access === 'Y')?.map(c => c.ConfigId) || []);
+        setSelectedAdditionalColumn(response?.data?.data?.[0]?.ConfigDtl?.filter(c => c.ConfigId && c.Access === 'Y')?.map(c => c.ConfigName) || [])
+        setTableFieldPreferences(response?.data?.data?.[0]?.ConfigDtl?.map(c => ({
+          value: c.ConfigId,
+          label: c.ConfigName,
+          access: c.Access
+        })) || []);
+      }
+    } catch (error) {
+      console.error('Error fetching field setup:', error);
+    }
+  };
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
   }, []);
 
-  const openAdditionalDetails = () => {
+  // const openAdditionalDetails = () => {
-    if (OpenAdd) {
+  //   if (OpenAdd) {
-      setOpenAdd(false);
+  //     setOpenAdd(false);
-    } else {
+  //   } else {
-      setOpenAdd(true);
+  //     setOpenAdd(true);
-    }
+  //   }
-  };
+  // };
 
   const getApplicationPreference = async () => {
 
@@ -367,7 +401,7 @@ const ProductForm = ({
       setSelectedUom(null);
       setSelectedTaxId(null);
       handleCancelData();
-      setOpenAdd(false);
+      // setOpenAdd(false);
       if (ProductSearchType != 'C') {
         let data = {
           CompId: CompId,
@@ -444,6 +478,36 @@ const ProductForm = ({
     }
 
   }
+  const handleFieldSetupSubmit = async () => {
+
+    const postData = {
+      "AppId": AppId,
+      "CompId": CompId,
+      "BranchId": BranchId,
+      "Type": "QA",
+      "FormType": "Quick Add",
+      "TypeId": categoryId,
+      "ConfigDtl": selectedFields?.map((field) => ({
+        "ConfigId": field,
+        "Access": 'Y',
+      })),
+      "CreatedBy": UserId
+    }
+
+    const response = await dispatch(postFieldSetup(postData))?.unwrap();
+
+    if (response?.data?.statusCode === 1) {
+      setSelectedAdditionalColumn([...tempSelectedColumns]);
+      setShowColumnModal(false);
+      setTempSelectedColumns([])
+      setMessageType("success");
+      setMessageData(response?.data?.response);
+      await getFieldSetup();
+    } else {
+      setMessageType("error");
+      setMessageData("Failed to set up fields");
+    }
+  }
   return (
     <div>
       <Messages
@@ -455,6 +519,27 @@ const ProductForm = ({
         <FormHeader title={'Quick Add'} />
       </div>
       <div>
+
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: '10px', justifyContent: "flex-end"
+          , fontFamily: "Poppins", fontWeight: "500", textDecoration: "underline", cursor: "Pointer", width: "100%"
+        }}
+          onClick={() => {
+            setTempSelectedColumns([...selectedAdditionalColumn]);
+            setShowColumnModal(true);
+          }}>
+          <Tooltip title="Add Fields" placement="left">
+            {/* <span>Additional Fields</span> */}
+            <IoSettingsOutline
+              onClick={() => {
+                setTempSelectedColumns([...selectedAdditionalColumn]);
+                setShowColumnModal(true);
+              }}
+              style={{ cursor: 'pointer', fontSize: '20px' }}
+            />
+          </Tooltip>
+        </div>
+
         <Form ref={formRef} className="formDivAnt" onFinish={onFinish}>
           <div>
             <div className="productinputForm">
@@ -667,9 +752,10 @@ const ProductForm = ({
                     </div>
                   )}
 
-                  {OpenAdd && (
+                  {true && (
                     <>
-                      {taxField && <Form.Item name="TaxId">
+                      {(taxField && selectedAdditionalColumn?.includes('Tax')) &&
+                        <Form.Item name="TaxId">
                           <DropDowns
                             options={TaxData?.map((option) => ({
                               value: option.TaxId,
@@ -685,12 +771,16 @@ const ProductForm = ({
                             onChangeFunction={handleTaxDropDownChange}
                             valueData={SelectedTaxId}
                           />
+                        </Form.Item>
+                      }
+                      {(taxField && selectedAdditionalColumn?.includes('Tax')) &&
+                        <Form.Item name="TaxId">
                           <Tooltip title="Add Tax" placement="top">
                             <PlusCircleOutlined onClick={addTax} />
                           </Tooltip>
                         </Form.Item>}
 
-                      {cessField && <Form.Item
+                      {(cessField && selectedAdditionalColumn?.includes('Cess')) && <Form.Item
                         name="Cess"
                         rules={[
                           {
@@ -708,7 +798,7 @@ const ProductForm = ({
                         <InputField autoComplete="off" label="Cess" />
                       </Form.Item>}
 
-                      {hsnField &&
+                      {(hsnField && selectedAdditionalColumn?.includes('Hsn Code')) &&
                         <Form.Item
                           name="HSNCode"
                           rules={[
@@ -779,6 +869,7 @@ const ProductForm = ({
                       }
 
 
+                      {selectedAdditionalColumn?.includes('WholeSale') &&
                         <Form.Item
                           name="WhSalePrice"
                           rules={[
@@ -799,12 +890,13 @@ const ProductForm = ({
                             label={<label>WholeSale</label>}
                           />
                         </Form.Item>
+                      }
                     </>
                   )}
                 </div>
-                <div className="prodAddDetails" onClick={openAdditionalDetails}>
+                {/* <div className="prodAddDetails" onClick={openAdditionalDetails}>
                   Additional Details
-                </div>
+                </div> */}
               </div>
             </div>
             <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -823,6 +915,7 @@ const ProductForm = ({
           open={OpenTaxModel}
           footer={true}
           buttonText="Submit"
+          destroyOnClose={true}
           children={
             <Form ref={formTaxRef} className="formDivAnt">
               <div className="subRowFlex">
@@ -901,6 +994,51 @@ const ProductForm = ({
           handleSubmit={submitTax}
           handleCancel={handleTax}
         ></DefaultModal>
+
+        <DefaultModal
+          title="Select Additional Fields"
+          open={showColumnModal}
+          footer={true}
+          buttonText="Apply"
+          destroyOnClose={true}
+          handleSubmit={handleFieldSetupSubmit}
+          handleCancel={() => {
+            setShowColumnModal(false);
+            setSelectedFields([...selectedAdditionalColumn.map(col =>
+              tableFieldPreferences?.find(pref => pref.label === col)?.value
+            ).filter(Boolean)]);
+            setTempSelectedColumns([...selectedAdditionalColumn]);
+          }}
+        >
+          <div style={{ padding: '20px' }}>
+            {tableFieldPreferences?.map((option) => (
+              <div key={option.value} className='Customized_QuickAdd'>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={selectedFields?.includes(option.value)}
+                    onChange={(e) => {
+                      const isChecked = e.target.checked;
+                      setSelectedFields(prev =>
+                        isChecked
+                          ? [...prev, option.value]
+                          : prev.filter(item => item !== option.value)
+                      );
+                      setTempSelectedColumns(prev =>
+                        isChecked
+                          ? [...prev, option.label]
+                          : prev.filter(item => item !== option.label)
+                      );
+                    }}
+                    style={{ marginRight: '8px' }}
+                  />
+                  {option.label}
+                </label>
+              </div>
+            ))}
+          </div>
+        </DefaultModal>
+
       </div>
     </div>
   );