sales page Setting modal Design

src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx

@@ -66,7 +66,9 @@ const AllSalesPageSettings = () => {
               </div>
             )}
 
-            {selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />}
+            {selectedComponent === 'Table' && (
+              <TableHeadersetting setModalOpen={setsettingModal} />
+            )}
           </div>
         </div>
       </DefaultModal>

src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss

@@ -92,11 +92,14 @@
   scrollbar-width: thin;
   padding-right: 10px;
   overflow: auto;
- .option-maindiv{
+  .option-maindiv {
-  display: flex;
+    display: flex;
-  align-items: flex-start;
+    align-items: flex-start;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
- }
+  }
+  .ant-checkbox-wrapper {
+    padding: 8px !important;
+  }
 }
 
 .SettingsListSwitchBTN {
@@ -157,3 +160,25 @@
     font-size: 16px;
   }
 }
+
+// Table Header Setting CSS start here|||
+
+.SelectionComponentSubHeading {
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Poppins", sans-serif;
+}
+
+.selctfontBackInputMain {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.selctfontBackInput {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}

src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx

@@ -20,8 +20,9 @@ import {
 import { useDispatch } from 'react-redux';
 import Buttons from '../../../../Components/Forms/Buttons';
 import { Messages } from '../../../../Components/Notifications/Messages';
+import './AllSalesPageSettings.scss';
 
-const TableHeadersetting = ({setModalOpen}) => {
+const TableHeadersetting = ({ setModalOpen }) => {
   const dispatch = useDispatch();
   const SessionData = useSelector(StoredSessionData);
   const AppId = SessionData?.AppId;
@@ -45,7 +46,7 @@ const TableHeadersetting = ({setModalOpen}) => {
   const [SelectedTableColor, setSelectedTableColor] = useState(null);
   const [Tableform] = Form.useForm();
   const [billingSettings, setBillingSettings] = useState();
-  console.log(billingSettings,"billingSettingsbillingSettings")
+  console.log(billingSettings, 'billingSettingsbillingSettings');
   const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
     useState([]);
   const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
@@ -63,9 +64,9 @@ const TableHeadersetting = ({setModalOpen}) => {
     OverallbackgroundOptionId
   );
   // Hold and addcustomer OptionsDetails
-    const [HoldButton, setHoldButton] = useState(false);
+  const [HoldButton, setHoldButton] = useState(false);
-    const [AddCustomerButton, setAddCustomerButton] = useState(false);
+  const [AddCustomerButton, setAddCustomerButton] = useState(false);
-    const [DineInChecked,setDineInChecked] = useState(false)
+  const [DineInChecked, setDineInChecked] = useState(false);
   console.log(billingSettings, 'billingSettingsbillingSettings');
   const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
     {
@@ -152,7 +153,7 @@ const TableHeadersetting = ({setModalOpen}) => {
     let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
       (item) => item?.SessionName === 'BookingBilling'
     );
-    let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find(
+    let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
       (item) => item?.SessionName === 'BookingNavbar'
     );
     let AllBillingdetails = AllDetails?.Components?.find(
@@ -165,39 +166,51 @@ const TableHeadersetting = ({setModalOpen}) => {
     );
     setSelectedBillTableCheckValues(optionIds);
 
-    let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId)
+    let Allfontdata = AllDetails?.Fonts?.filter(
-    setTableFontData(Allfontdata)
+      (item) => item.SessionId === selectedBilling?.SessionId
-    let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(item=>item?.SessionId === selectedBilling?.SessionId)
+    );
+    setTableFontData(Allfontdata);
+    let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(
+      (item) => item?.SessionId === selectedBilling?.SessionId
+    );
 
-    setSelectedTableFont(selectedFont?.FontId)
+    setSelectedTableFont(selectedFont?.FontId);
     const hasHold = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "Hold"
+      (item) => item.OptionName === 'Hold'
     );
-     const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
+    const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "AddCustomer"
+      (item) => item.OptionName === 'AddCustomer'
     );
-     const hasDinein = selectedNavbar?.FieldDetails?.some(
+    const hasDinein = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "DineIn"
+      (item) => item.OptionName === 'DineIn'
+    );
+    setHoldButton(hasHold);
+    setAddCustomerButton(hasAddcustomer);
+    setDineInChecked(hasDinein);
+    let allcolordata = AllDetails?.Colors?.filter(
+      (item) =>
+        item.SessionId === selectedBilling?.SessionId &&
+        item.OptionName === 'OverallBackground'
+    );
+    setBillingOverallColorsList(allcolordata);
+    let allBackcolordata = AllDetails?.Colors?.filter(
+      (item) =>
+        item.SessionId === selectedBilling?.SessionId &&
+        item.OptionName === 'Background'
     );
-    setHoldButton(hasHold)
-    setAddCustomerButton(hasAddcustomer)
-    setDineInChecked(hasDinein)
-  let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "OverallBackground")    
-  setBillingOverallColorsList(allcolordata)
-  let allBackcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "Background") 
 
-  setTableBackgroundColorData(allBackcolordata)
+    setTableBackgroundColorData(allBackcolordata);
-  let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(item=>item?.SessionName === 'BookingBilling')
+    let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(
-  console.log(selectedcolors, 'selectedOverallBackgroudcolor')
+      (item) => item?.SessionName === 'BookingBilling'
-   selectedcolors?.forEach((item) => {
+    );
-          if (item?.['BackgroundColor']) {
+    console.log(selectedcolors, 'selectedOverallBackgroudcolor');
-            setSelectedTableColor(item?.['ColorId']);
+    selectedcolors?.forEach((item) => {
-          } else if (item?.['OverallBackgroundColor']) {
+      if (item?.['BackgroundColor']) {
-            
+        setSelectedTableColor(item?.['ColorId']);
-            setdropdownBillingOverallColor(item?.['ColorId']);
+      } else if (item?.['OverallBackgroundColor']) {
-           
+        setdropdownBillingOverallColor(item?.['ColorId']);
-          }
+      }
-        });
+    });
     // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
     // formRef.current?.setFieldsValue({ BillingOverallColor: value });
 
@@ -242,48 +255,48 @@ const TableHeadersetting = ({setModalOpen}) => {
     }
   };
 
-  const handleBackgroundColorSubmit= async () => {
+  const handleBackgroundColorSubmit = async () => {
-      if (TablebackgroundColor !== TablefontColor) {
+    if (TablebackgroundColor !== TablefontColor) {
-        let response;
+      let response;
-        try {
+      try {
-          let postData = {
+        let postData = {
-            BackgroundColor: TablebackgroundColor,
+          BackgroundColor: TablebackgroundColor,
-            FontColor: TablefontColor,
+          FontColor: TablefontColor,
-            CreatedBy: UserId,
+          CreatedBy: UserId,
-            SessionId: billingSettings?.SessionId,
+          SessionId: billingSettings?.SessionId,
-            OptionId: backgroundOptionId,
+          OptionId: backgroundOptionId,
+        };
+        response = await dispatch(postColorData(postData)).unwrap();
+      } catch (err) {
+        if (err['message'] == 'Request failed with status code 422') {
+          response = {
+            data: {
+              statusCode: 0,
+              response: 'Color Not Added',
+              data: [],
+            },
           };
-          response = await dispatch(postColorData(postData)).unwrap();
-        } catch (err) {
-          if (err['message'] == 'Request failed with status code 422') {
-            response = {
-              data: {
-                statusCode: 0,
-                response: 'Color Not Added',
-                data: [],
-              },
-            };
-          }
         }
-        if (response?.data?.statusCode == 1) {
-          if (response?.data?.response == 'Color Already Exists') {
-            setMessageType('warning');
-            setMessageData(response?.data?.response);
-          } else {
-            setMessageType('success');
-            setMessageData(response?.data?.response);
-            // BillsetUploadColor(false);
-          }
-         GetTemplatedetails()
-         setBillUploadColor(false)
-        } else {
-          setMessageData(response?.data?.response);
-          setMessageType('error');
-        }
-      } else {
-        setMessageData('Please select different color for background and font');
-        setMessageType('warning');
       }
+      if (response?.data?.statusCode == 1) {
+        if (response?.data?.response == 'Color Already Exists') {
+          setMessageType('warning');
+          setMessageData(response?.data?.response);
+        } else {
+          setMessageType('success');
+          setMessageData(response?.data?.response);
+          // BillsetUploadColor(false);
+        }
+        GetTemplatedetails();
+        setBillUploadColor(false);
+      } else {
+        setMessageData(response?.data?.response);
+        setMessageType('error');
+      }
+    } else {
+      setMessageData('Please select different color for background and font');
+      setMessageType('warning');
+    }
   };
   const TableonCancel4 = () => {
     setBillUploadColor(false);
@@ -318,46 +331,45 @@ const TableHeadersetting = ({setModalOpen}) => {
   const handleBillingOverallColorSubmit = async () => {
     let response;
 
-      try {
+    try {
-        let postData = {
+      let postData = {
-          BackgroundColor: BillingOverallColor,
+        BackgroundColor: BillingOverallColor,
-          FontColor: '#000000',
+        FontColor: '#000000',
-          CreatedBy:UserId,
+        CreatedBy: UserId,
-          SessionId: billingSettings?.SessionId,
+        SessionId: billingSettings?.SessionId,
-          OptionId: OverallbackgroundOptionId,
+        OptionId: OverallbackgroundOptionId,
+      };
+      response = await dispatch(postColorData(postData)).unwrap();
+    } catch (err) {
+      if (err['message'] == 'Request failed with status code 422') {
+        response = {
+          data: {
+            statusCode: 0,
+            response: 'Color Not Added',
+            data: [],
+          },
         };
-        response = await dispatch(postColorData(postData)).unwrap();
-      } catch (err) {
-        if (err['message'] == 'Request failed with status code 422') {
-          response = {
-            data: {
-              statusCode: 0,
-              response: 'Color Not Added',
-              data: [],
-            },
-          };
-        }
       }
-      if (response?.data?.statusCode == 1) {
+    }
-        if (response?.data?.response == 'Color Already Exists') {
+    if (response?.data?.statusCode == 1) {
-          setMessageType('warning');
+      if (response?.data?.response == 'Color Already Exists') {
-          setMessageData(response?.data?.response);
+        setMessageType('warning');
-        } else {
-          setMessageType('success');
-          setMessageData(response?.data?.response);
-          setBillingUploadOverallColor(false);
-        }
-        GetTemplatedetails()
-        BillingUploadOverallColor(false)
-      } else {
         setMessageData(response?.data?.response);
-        setMessageType('error');
+      } else {
+        setMessageType('success');
+        setMessageData(response?.data?.response);
+        setBillingUploadOverallColor(false);
       }
+      GetTemplatedetails();
+      BillingUploadOverallColor(false);
+    } else {
+      setMessageData(response?.data?.response);
+      setMessageType('error');
+    }
   };
   const selectBillingOverallColor = async (value) => {
     await setdropdownBillingOverallColor(value);
     // formRef.current?.setFieldsValue({ BillingOverallColor: value });
-  
   };
   const openColour4 = (value) => {
     setTableColorType(value);
@@ -371,7 +383,7 @@ const TableHeadersetting = ({setModalOpen}) => {
     validateFontsTable(values);
   };
   const validateFontsTable = async (values) => {
-    console.log(values,"valuesvalues")
+    console.log(values, 'valuesvalues');
     const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
     fetch(apiUrl)
       .then((response) => response.json())
@@ -381,7 +393,6 @@ const TableHeadersetting = ({setModalOpen}) => {
         if (fontNames.includes(formatFontName(values['TableFont']))) {
           let response;
           try {
-            
             let postData = {
               SessionFont: formatFontName(values['TableFont']),
               CreatedBy: UserId,
@@ -409,16 +420,15 @@ const TableHeadersetting = ({setModalOpen}) => {
             }
 
             dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
-            GetTemplatedetails()
+            GetTemplatedetails();
             Tableform.resetFields();
           } else {
             setMessageData(response?.data?.response);
             setMessageType('error');
           }
         } else {
-           setMessageType('warning');
+          setMessageType('warning');
           setMessageData('Please give the Correct google fonts Name!');
-         
         }
       })
       .catch((error) => {
@@ -439,17 +449,17 @@ const TableHeadersetting = ({setModalOpen}) => {
       CompId: CompId,
       UserId: UserId,
       BranchId: BranchId,
-      ColorId:  [
+      ColorId: [
-  ...(TemplateDetails?.[0]?.ColorDetail
+        ...(TemplateDetails?.[0]?.ColorDetail?.filter(
-    ?.filter(c => c.SessionName !== "BookingBilling")
+          (c) => c.SessionName !== 'BookingBilling'
-    ?.map(c => c.ColorId) || []),
+        )?.map((c) => c.ColorId) || []),
 
-  SelectedTableColor,
+        SelectedTableColor,
-  dropdownBillingOverallColor,
+        dropdownBillingOverallColor,
-],
+      ],
-      FontId: TemplateDetails?.[0]?.FontDetail?.map(f =>
+      FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
-            f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId
+        f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
-          ),
+      ),
       CreatedBy: UserId,
       TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
         ComponentId: comp.ComponentId, // ✅ dynamic
@@ -457,42 +467,40 @@ const TableHeadersetting = ({setModalOpen}) => {
           comp.SessionName === 'BookingBilling'
             ? SelectedBillTableCheckValues?.map((id) => ({ OptionId: id })) // ✅ NEW checked list
             : comp.FieldDetails.map((field) => ({ OptionId: field.OptionId })), // existing
-        })),
+      })),
     };
     console.log(result, 'final result to submit');
     var response = await dispatch(putSelectionComponentData(result)).unwrap();
-     if (response?.data?.statusCode == 1) {
+    if (response?.data?.statusCode == 1) {
-            if (
+      if (response?.data?.response === 'Application Template Already Exists') {
-              response?.data?.response === 'Application Template Already Exists'
+        setMessageType('warning');
-            ) {
+        setMessageData('Application Template Already Exists');
-              setMessageType('warning');
+        setFirstOnClick(false);
-              setMessageData('Application Template Already Exists');
+      } else {
-              setFirstOnClick(false);
+        setMessageType('success');
-            } else {
+        setMessageData('Template Details Added Successfully');
-              setMessageType('success');
+        setFirstOnClick(false);
-              setMessageData('Template Details Added Successfully');
+      }
-              setFirstOnClick(false);
+      await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
-            }
+      setModalOpen(false);
-            await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
+    } else {
-            setModalOpen(false)
+      setMessageType('error');
-          } else {
+      setMessageData(response?.data?.response);
-            setMessageType('error');
+      setFirstOnClick(false);
-            setMessageData(response?.data?.response);
+    }
-            setFirstOnClick(false);
-          }
   };
-   const onComplete = useCallback(() => {
+  const onComplete = useCallback(() => {
-      setMessageData(null);
+    setMessageData(null);
-      setMessageType(null);
+    setMessageType(null);
-    }, []);
+  }, []);
 
   return (
     <>
-        <Messages
+      <Messages
-            messageType={messageType}
+        messageType={messageType}
-            messageData={messageData}
+        messageData={messageData}
-            onComplete={onComplete}
+        onComplete={onComplete}
-          />
+      />
       <div
         style={{
           display: 'flex',
@@ -516,18 +524,16 @@ const TableHeadersetting = ({setModalOpen}) => {
                 // onClick={() => Navholdoption(value.OptionName)}
                 key={value?.OptionId}
                 disabled={
-                                value.OptionName === 'Hold' && HoldButton
+                  value.OptionName === 'Hold' && HoldButton
-                                  ? true
+                    ? true
-                                  : value.OptionName === 'AddCustomer' &&
+                    : value.OptionName === 'AddCustomer' && AddCustomerButton
-                                    AddCustomerButton
+                      ? true
-                                    ? true
+                      : value.OptionName === 'Item'
-                                    : value.OptionName === 'Item'
+                        ? true
-                                      ? true
+                        : value.OptionName === 'UnpaidBill' && !DineInChecked
-                                      : value.OptionName === 'UnpaidBill' &&
+                          ? true
-                                        !DineInChecked
+                          : false
-                                        ? true
+                }
-                                        : false
-                              }
               >
                 {value.OptionName}
               </Checkbox>
@@ -545,28 +551,259 @@ const TableHeadersetting = ({setModalOpen}) => {
           </div>
         ))} */}
       </div>
-      <div style={{ flex: '0 0 48%' }}>
+      <div className="selctfontBackInputMain">
-        <p style={{ marginBottom: '8px', fontWeight: '500' }}>BillTable Font</p>
+        <div className="selctfontBackInput">
-        <DropDowns
+          <p className="SelectionComponentSubHeading">BillTable Font</p>
-          options={TableFontData?.map((option) => ({
+          <div
-            value: option.FontId,
+            style={{
-            label: option.SessionFont,
+              display: 'flex',
-          }))}
+              flexDirection: 'row',
-          label="Font"
+              gap: '10px',
-          onChangeFunction={selectFont3}
+              alignItems: 'center',
-          className="settingsales-DropDown-Selection"
+            }}
-          isOnchanges={!!selectedTableFont}
+          >
-          valueData={selectedTableFont}
+            <DropDowns
-        />
+              options={TableFontData?.map((option) => ({
-        <div
+                value: option.FontId,
-          className="settingaddNewSalesFiledBTN"
+                label: option.SessionFont,
-          onClick={TablehandleUploadFonts}
+              }))}
-        >
+              label="Font"
-          Add
+              onChangeFunction={selectFont3}
-          <IoMdAdd
+              className="settingsales-DropDown-Selection"
-          // className="plusOutlinedIcon"
+              isOnchanges={!!selectedTableFont}
-          />
+              valueData={selectedTableFont}
+            />
+            <div
+              className="settingaddNewSalesFiledBTN"
+              onClick={TablehandleUploadFonts}
+            >
+              Add
+              <IoMdAdd
+              // className="plusOutlinedIcon"
+              />
+            </div>
+          </div>
         </div>
+
+        {hasBackground ? (
+          <div>
+            <div
+              style={{
+                display: 'flex',
+                gap: '10px',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+              }}
+            >
+              <div className="colorDropdown">
+                <Form.Item
+                  name="TableColor"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'Please Select Color',
+                    },
+                  ]}
+                >
+                  <p className="SelectionComponentSubHeading">
+                    BillTable Background Color
+                  </p>
+                  <DropDowns
+                    options={TableBackgroundColorData?.map((option) => ({
+                      value: option.ColorId,
+                      label: (
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '27px',
+                              height: '27px',
+                              borderRadius: '25.774192810058594px',
+                              backgroundColor: option.BackgroundColor,
+                            }}
+                          >
+                            <span
+                              style={{
+                                width: '27px',
+                                height: '27px',
+                                borderRadius: '50px',
+                                marginLeft: '15px',
+                                backgroundColor: option.FontColor,
+                              }}
+                            >
+                              &nbsp;&nbsp;&nbsp;
+                            </span>
+                          </div>
+                          <div>{option.ThemeName}</div>
+                        </div>
+                      ),
+                    }))}
+                    labelChange={true}
+                    label="Color"
+                    className="field-DropDown-Selection"
+                    onChangeFunction={selectTableColor}
+                    isOnchanges={SelectedTableColor ? true : false}
+                    valueData={SelectedTableColor}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                className="addNewSalesFiledBTN"
+                onClick={BillhandleUploadColor}
+              >
+                Add
+                <IoMdAdd className="plusOutlinedIcon" />
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        {hasOverallBackground ? (
+          <div>
+            <Modal
+              open={BillingUploadOverallColor}
+              title="BillTable Overall Background Color"
+              closeIcon={
+                <CloseOutlined
+                  onClick={() => {
+                    setBillingUploadOverallColor(false);
+                  }}
+                />
+              }
+              width={400}
+              footer={null}
+            >
+              <div>
+                <div
+                  style={{
+                    display: 'flex',
+                    align: 'center',
+                    width: '60%',
+                    gap: '0.5rem',
+                    border: '1px solid black',
+                    borderRadius: '10px',
+                    padding: '10px',
+                  }}
+                >
+                  <p style={{ fontSize: '14px', fontWeight: 700 }}>
+                    Selected Color:{' '}
+                  </p>
+                  <div
+                    style={{
+                      width: '35px',
+                      height: '23px',
+                      borderRadius: '5px',
+                      backgroundColor: BillingOverallColor
+                        ? BillingOverallColor
+                        : null,
+                    }}
+                  ></div>
+                </div>
+                <div className="hex-input">
+                  <InputField
+                    prefix="#"
+                    value={billingOverallHex}
+                    inputMode="numeric"
+                    maxLength={8}
+                    onChange={handleBillingOverallHexCode}
+                  />
+                </div>
+              </div>
+
+              <SwatchesPicker onChange={handleBillingOverallColorChange} />
+
+              <div>
+                <button
+                  className="colorBtn"
+                  onClick={handleBillingOverallColorSubmit}
+                >
+                  SAVE
+                </button>
+              </div>
+            </Modal>
+            <div
+              style={{
+                display: 'flex',
+                gap: '1rem',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+              }}
+            >
+              <div className="colorDropdown">
+                <Form.Item
+                  name="BillingOverallColor"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'Please Select Color',
+                    },
+                  ]}
+                >
+                  <p className="SelectionComponentSubHeading">
+                    BillTable Overall-Background
+                  </p>
+                  <DropDowns
+                    options={BillingOverallColorsList?.map((option) => ({
+                      value: option.ColorId,
+                      label: (
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '0.5rem',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '27px',
+                              height: '27px',
+                              borderRadius: '25.774192810058594px',
+                              backgroundColor: option.BackgroundColor,
+                            }}
+                          >
+                            <span
+                              style={{
+                                width: '27px',
+                                height: '27px',
+                                borderRadius: '50px',
+                                marginLeft: '15px',
+                                backgroundColor: option.FontColor,
+                              }}
+                            >
+                              &nbsp;&nbsp;&nbsp;
+                            </span>
+                          </div>
+                          <div>{option.ThemeName}</div>
+                        </div>
+                      ),
+                    }))}
+                    labelChange={true}
+                    label={
+                      <p style={{ fontSize: '11px' }}>Overall Background</p>
+                    }
+                    className="field-DropDown-Selection"
+                    onChangeFunction={selectBillingOverallColor}
+                    isOnchanges={dropdownBillingOverallColor ? true : false}
+                    valueData={dropdownBillingOverallColor}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                className="addNewSalesFiledBTN"
+                onClick={handleBillingUploadOverallColor}
+              >
+                Add
+                <IoMdAdd
+                  className="plusOutlinedIcon"
+                  onClick={handleBillingUploadOverallColor}
+                />
+              </div>
+            </div>
+          </div>
+        ) : null}
       </div>
       <DefaultModal
         open={TableFontModelopen}
@@ -610,222 +847,7 @@ const TableHeadersetting = ({setModalOpen}) => {
         handleSubmit={TablehandleSubmit}
         buttonText="SAVE"
       />
-      {hasBackground ? (
-        <div>
-          <div
-            style={{
-              display: 'flex',
-              gap: '1rem',
-              flexWrap: 'nowrap',
-              alignItems: 'center',
-            }}
-          >
-            <div className="colorDropdown">
-              <Form.Item
-                name="TableColor"
-                rules={[
-                  {
-                    required: true,
-                    message: 'Please Select Color',
-                  },
-                ]}
-              >
-                <p className="Selection-Component-SubHeading">
-                  BillTable Background Color
-                </p>
-                <DropDowns
-                  options={TableBackgroundColorData?.map((option) => ({
-                    value: option.ColorId,
-                    label: (
-                      <div
-                        style={{
-                          display: 'flex',
-                          gap: '0.5rem',
-                        }}
-                      >
-                        <div
-                          style={{
-                            width: '27px',
-                            height: '27px',
-                            borderRadius: '25.774192810058594px',
-                            backgroundColor: option.BackgroundColor,
-                          }}
-                        >
-                          <span
-                            style={{
-                              width: '27px',
-                              height: '27px',
-                              borderRadius: '50px',
-                              marginLeft: '15px',
-                              backgroundColor: option.FontColor,
-                            }}
-                          >
-                            &nbsp;&nbsp;&nbsp;
-                          </span>
-                        </div>
-                        <div>{option.ThemeName}</div>
-                      </div>
-                    ),
-                  }))}
-                  labelChange={true}
-                  label="Color"
-                  className="field-DropDown-Selection"
-                  onChangeFunction={selectTableColor}
-                    isOnchanges={SelectedTableColor ? true : false}
-                    valueData={SelectedTableColor}
-                />
-              </Form.Item>
-            </div>
-            <div
-              className="addNewSalesFiledBTN"
-              onClick={BillhandleUploadColor}
-            >
-              Add
-              <IoMdAdd className="plusOutlinedIcon" />
-            </div>
-          </div>
-        </div>
-      ) : null}
-      {hasOverallBackground ? (
-        <div>
-          <Modal
-            open={BillingUploadOverallColor}
-            title="BillTable Overall Background Color"
-            closeIcon={
-              <CloseOutlined
-                onClick={() => {
-                  setBillingUploadOverallColor(false);
-                }}
-              />
-            }
-            width={400}
-            footer={null}
-          >
-            <div>
-              <div
-                style={{
-                  display: 'flex',
-                  align: 'center',
-                  width: '60%',
-                  gap: '0.5rem',
-                  border: '1px solid black',
-                  borderRadius: '10px',
-                  padding: '10px',
-                }}
-              >
-                <p style={{ fontSize: '14px', fontWeight: 700 }}>
-                  Selected Color:{' '}
-                </p>
-                <div
-                  style={{
-                    width: '35px',
-                    height: '23px',
-                    borderRadius: '5px',
-                    backgroundColor: BillingOverallColor
-                      ? BillingOverallColor
-                      : null,
-                  }}
-                ></div>
-              </div>
-              <div className="hex-input">
-                <InputField
-                  prefix="#"
-                  value={billingOverallHex}
-                  inputMode="numeric"
-                  maxLength={8}
-                  onChange={handleBillingOverallHexCode}
-                />
-              </div>
-            </div>
 
-            <SwatchesPicker onChange={handleBillingOverallColorChange} />
-
-            <div>
-              <button
-                className="colorBtn"
-                onClick={handleBillingOverallColorSubmit}
-              >
-                SAVE
-              </button>
-            </div>
-          </Modal>
-          <div
-            style={{
-              display: 'flex',
-              gap: '1rem',
-              flexWrap: 'nowrap',
-              alignItems: 'center',
-            }}
-          >
-            <div className="colorDropdown">
-              <Form.Item
-                name="BillingOverallColor"
-                rules={[
-                  {
-                    required: true,
-                    message: 'Please Select Color',
-                  },
-                ]}
-              >
-                <p className="Selection-Component-SubHeading">
-                  BillTable Overall-Background
-                </p>
-                <DropDowns
-                  options={BillingOverallColorsList?.map((option) => ({
-                    value: option.ColorId,
-                    label: (
-                      <div
-                        style={{
-                          display: 'flex',
-                          gap: '0.5rem',
-                        }}
-                      >
-                        <div
-                          style={{
-                            width: '27px',
-                            height: '27px',
-                            borderRadius: '25.774192810058594px',
-                            backgroundColor: option.BackgroundColor,
-                          }}
-                        >
-                          <span
-                            style={{
-                              width: '27px',
-                              height: '27px',
-                              borderRadius: '50px',
-                              marginLeft: '15px',
-                              backgroundColor: option.FontColor,
-                            }}
-                          >
-                            &nbsp;&nbsp;&nbsp;
-                          </span>
-                        </div>
-                        <div>{option.ThemeName}</div>
-                      </div>
-                    ),
-                  }))}
-                  labelChange={true}
-                  label={<p style={{ fontSize: '11px' }}>Overall Background</p>}
-                  className="field-DropDown-Selection"
-                  onChangeFunction={selectBillingOverallColor}
-                  isOnchanges={dropdownBillingOverallColor ? true : false}
-                  valueData={dropdownBillingOverallColor}
-                />
-              </Form.Item>
-            </div>
-            <div
-              className="addNewSalesFiledBTN"
-              onClick={handleBillingUploadOverallColor}
-            >
-              Add
-              <IoMdAdd
-                className="plusOutlinedIcon"
-                onClick={handleBillingUploadOverallColor}
-              />
-            </div>
-          </div>
-        </div>
-      ) : null}
       <Modal
         open={BillUploadColor}
         title="Colors"
@@ -935,7 +957,6 @@ const TableHeadersetting = ({setModalOpen}) => {
           icon={<ArrowRightOutlined />}
           htmlType={true}
           handleSubmit={HandleSubmit}
-          
         />
       </div>
     </>