Merge pull request 'Print setup Design changes' (#245) from OptimUpdate into main

Reviewed-on: Pozomind/pozo-retail-app#245

src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx

@@ -184,9 +184,10 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [Notes, setNote] = useState('');
   const [BillName, setBillName] = useState('');
   const [openColorModal, setOpenColorModal] = useState(false);
-  const [bgColor, setBgColor] = useState("#ffffff");
+  const [bgColor, setBgColor] = useState('#ffffff');
-  const [fontColor, setFontColor] = useState("#000000");
+  const [fontColor, setFontColor] = useState('#000000');
-  const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff");
+  const [selectedHeaderFontColor, setSelectedHeaderFontColor] =
+    useState('#ffffff');
   const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer'
   const rowType = useSelector(GlobalRowType);
 
@@ -202,7 +203,6 @@ const SelectionComponent = forwardRef((props, ref) => {
   const netAmountColor = useSelector(GlobalSelectedNetAmountColor);
   const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
 
-
   const items = [
     {
       name: 'Home',
@@ -440,30 +440,40 @@ const SelectionComponent = forwardRef((props, ref) => {
       dispatch(changeSelectedHeaderColour(true));
     } else {
       dispatch(changeSelectedHeaderColour(false));
-      dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
+      dispatch(
+        changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })
+      );
     }
-    const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
+    const tblHdr2 = sizeCheckList.find(
+      (item) => item.ConfigName === 'Table Header Colour'
+    )?.ConfigId;
     if (checkedList?.includes(tblHdr2)) {
       dispatch(changeSelectedTableHeaderColour(true));
     } else {
       dispatch(changeSelectedTableHeaderColour(false));
       dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
     }
-    const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
+    const tblBody2 = sizeCheckList.find(
+      (item) => item.ConfigName === 'Table Body Colour'
+    )?.ConfigId;
     if (checkedList?.includes(tblBody2)) {
       dispatch(changeSelectedTableBodyColour(true));
     } else {
       dispatch(changeSelectedTableBodyColour(false));
       dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
     }
-    const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
+    const ftr2 = sizeCheckList.find(
+      (item) => item.ConfigName === 'Footer Colour'
+    )?.ConfigId;
     if (checkedList?.includes(ftr2)) {
       dispatch(changeSelectedFooterColour(true));
     } else {
       dispatch(changeSelectedFooterColour(false));
       dispatch(changeSelectedFooterColor({ background: '', font: '' }));
     }
-    const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
+    const net2 = sizeCheckList.find(
+      (item) => item.ConfigName === 'Net Amount Colour'
+    )?.ConfigId;
     if (checkedList?.includes(net2)) {
       dispatch(changeSelectedNetAmountColour(true));
     } else {
@@ -536,27 +546,39 @@ const SelectionComponent = forwardRef((props, ref) => {
           PrintHdrName: item.PrintHdrName,
           // legacy fields are filled from the array so older code still works
           PrintHdrColor:
-            item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background,
+            item.PrintHdrColor ||
+            getColor(item.PrintColors, 'headerColor')?.background,
           PrintHdrFontColor:
-            item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font,
+            item.PrintHdrFontColor ||
+            getColor(item.PrintColors, 'headerColor')?.font,
           TableHeaderColor:
-            item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background,
+            item.TableHeaderColor ||
+            getColor(item.PrintColors, 'tableHeaderColor')?.background,
           TableHeaderFontColor:
-            item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font,
+            item.TableHeaderFontColor ||
+            getColor(item.PrintColors, 'tableHeaderColor')?.font,
           TableBodyColor:
-            item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background,
+            item.TableBodyColor ||
+            getColor(item.PrintColors, 'tableBodyColor')?.background,
           TableBodyFontColor:
-            item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font,
+            item.TableBodyFontColor ||
+            getColor(item.PrintColors, 'tableBodyColor')?.font,
           footerColor:
-            item.footerColor || getColor(item.PrintColors, 'footerColor')?.background,
+            item.footerColor ||
+            getColor(item.PrintColors, 'footerColor')?.background,
           footerFontColor:
-            item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font,
+            item.footerFontColor ||
+            getColor(item.PrintColors, 'footerColor')?.font,
           netAmountColor:
-            item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background,
+            item.netAmountColor ||
+            getColor(item.PrintColors, 'netAmtColor')?.background,
           netAmountFontColor:
-            item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font,
+            item.netAmountFontColor ||
+            getColor(item.PrintColors, 'netAmtColor')?.font,
           rowType:
-            item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd',
+            item.rowType ||
+            getColor(item.PrintColors, 'tableBodyColor')?.rowType ||
+            'odd',
           PrintColors: item.PrintColors,
           Notes: item?.Notes,
           PageSize: item?.PageSize?.trim() || '3inch',
@@ -609,7 +631,7 @@ const SelectionComponent = forwardRef((props, ref) => {
       OptionDetails,
       PrintTypeId,
       PrintHdrColor,
-      PrintColors
+      PrintColors,
     } = row;
     if (index >= 4) setShowMore(true);
     if (index <= 4) setShowMore(false);
@@ -625,7 +647,9 @@ const SelectionComponent = forwardRef((props, ref) => {
     setEdit(true);
     // load existing header color, falling back to array
     setSelectedColour(
-      PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000'
+      PrintHdrColor ||
+        getColor(PrintColors, 'headerColor')?.background ||
+        '#000000'
     );
     // setSelectedHeaderFontColor(PrintHdrFontColor);
     setSelectedStyleId(StyleId);
@@ -913,36 +937,48 @@ const SelectionComponent = forwardRef((props, ref) => {
     )
       ? dispatch(changeNotes(true))
       : dispatch(changeNotes(false));
-    const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId;
+    const hdrId = sizeCheckList.find(
+      (item) => item.ConfigName === 'Header Colour'
+    )?.ConfigId;
     if (checkedValues?.includes(hdrId)) {
       dispatch(changeSelectedHeaderColour(true));
     } else {
       dispatch(changeSelectedHeaderColour(false));
       // reset colours when option disabled
-      dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
+      dispatch(
+        changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })
+      );
     }
-    const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
+    const tblHdrId = sizeCheckList.find(
+      (item) => item.ConfigName === 'Table Header Colour'
+    )?.ConfigId;
     if (checkedValues?.includes(tblHdrId)) {
       dispatch(changeSelectedTableHeaderColour(true));
     } else {
       dispatch(changeSelectedTableHeaderColour(false));
       dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
     }
-    const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
+    const tblBodyId = sizeCheckList.find(
+      (item) => item.ConfigName === 'Table Body Colour'
+    )?.ConfigId;
     if (checkedValues?.includes(tblBodyId)) {
       dispatch(changeSelectedTableBodyColour(true));
     } else {
       dispatch(changeSelectedTableBodyColour(false));
       dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
     }
-    const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
+    const ftrId = sizeCheckList.find(
+      (item) => item.ConfigName === 'Footer Colour'
+    )?.ConfigId;
     if (checkedValues?.includes(ftrId)) {
       dispatch(changeSelectedFooterColour(true));
     } else {
       dispatch(changeSelectedFooterColour(false));
       dispatch(changeSelectedFooterColor({ background: '', font: '' }));
     }
-    const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
+    const netId = sizeCheckList.find(
+      (item) => item.ConfigName === 'Net Amount Colour'
+    )?.ConfigId;
     if (checkedValues?.includes(netId)) {
       dispatch(changeSelectedNetAmountColour(true));
     } else {
@@ -1003,12 +1039,12 @@ const SelectionComponent = forwardRef((props, ref) => {
       PrintHdrColor: getConcatenatedArray()?.some(
         (e) => e?.ConfigName?.toLowerCase() == 'header colour'
       )
-        ? (headerColor || selectedColour)
+        ? headerColor || selectedColour
         : null,
       PrintHdrFontColor: getConcatenatedArray()?.some(
         (e) => e?.ConfigName?.toLowerCase() == 'header colour'
       )
-        ? (headerFontColor || selectedHeaderFontColor)
+        ? headerFontColor || selectedHeaderFontColor
         : null,
       // Table header / body / footer / net amount colors
       TableHeaderColor: tableHeaderColor || null,
@@ -1303,27 +1339,57 @@ const SelectionComponent = forwardRef((props, ref) => {
 
   const handleColorSave = (colors) => {
     // common handler called when ColorsSelected modal returns values
-    console.log("Received from modal:", colors);
+    console.log('Received from modal:', colors);
     switch (colorModalTarget) {
       case 'header':
-        dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedHeaderColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         setSelectedColour(colors.background);
         setSelectedHeaderFontColor(colors.font);
         break;
       case 'tableHeader':
-        dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedTableHeaderColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         break;
       case 'tableBody':
-        dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedTableBodyColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         break;
       case 'footer':
-        dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedFooterColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         break;
       case 'netAmount':
-        dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedNetAmountColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         break;
       default:
-        dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
+        dispatch(
+          changeSelectedHeaderColor({
+            background: colors.background,
+            font: colors.font,
+          })
+        );
         break;
     }
     // update local previews as well (not strictly necessary if UI reads from store)
@@ -1588,329 +1654,68 @@ const SelectionComponent = forwardRef((props, ref) => {
           </div>
 
           <div className="selectBillFiledInput">
-            {isFooterChecking && (
+            <div className="PrintCutColor" style={{marginBottom:"10px"}}>
-              <div style={{ marginTop: '1rem' }}>
+              {isFooterChecking && (
-                <Title level={5} style={{ marginBottom: 12 }}>
+                <div style={{ marginTop: '1rem' }}>
-                  Notes
+                  <Title level={5} style={{ marginBottom: 12 }}>
-                </Title>
+                    Notes
-                <InputField
+                  </Title>
-                  isOnChange={Notes}
+                  <InputField
-                  label={<label>notes Description</label>}
+                    isOnChange={Notes}
-                  value={Notes}
+                    label={<label>notes Description</label>}
-                  onChange={(e) => {
+                    value={Notes}
-                    setNote(e.target.value);
+                    onChange={(e) => {
-                  }}
+                      setNote(e.target.value);
-                />
+                    }}
-              </div>
+                  />
-            )}
+                </div>
+              )}
 
-            {
+              {
-              <div style={{ marginTop: '1rem' }}>
+                <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
+                  <Title level={5} style={{ marginBottom: 12 }}>
-                  BillName
+                    BillName
-                </Title>
+                  </Title>
-                <InputField
+                  <InputField
-                  isOnChange={BillName}
+                    isOnChange={BillName}
-                  label={<label>Bill Name</label>}
+                    label={<label>Bill Name</label>}
-                  value={BillName}
+                    value={BillName}
-                  onChange={(e) => {
+                    onChange={(e) => {
-                    setBillName(e.target.value);
+                      setBillName(e.target.value);
-                    dispatch(changeBillName(e.target.value));
+                      dispatch(changeBillName(e.target.value));
-                  }}
+                    }}
-                />
+                  />
-              </div>
+                </div>
-            }
+              }
 
-            {isSignatureChecking && (
+              {isTermscondChecking && (
-              <div
+                <div style={{ marginTop: '1rem' }}>
-                style={{
+                  <Title level={5} style={{ marginBottom: 12 }}>
-                  marginTop: '1rem',
+                    Terms and Conditions
-                  display: 'flex',
+                  </Title>
-                  flexWrap: 'wrap',
+                  {terms.map((term, index) => (
-                  gap: '10px',
+                    <Space
-                }}
+                      key={index}
-              >
+                      style={{ display: 'flex', marginBottom: 4 }}
-                <Title level={5} style={{ marginBottom: 12 }}>
+                      align="center"
-                  Upload Signature:
+                    >
-                </Title>
+                      <Input.TextArea
-                <Upload
+                        placeholder={`eg:- Amount not Refunded #${index + 1}`}
-                  name="file"
+                        value={term}
-                  action="https://api.pozo.app/pozo-common-image-api//upload"
+                        onChange={(e) => handleChange(index, e.target.value)}
-                  listType="picture-card"
+                        autoSize={{ minRows: 1, maxRows: 3 }}
-                  fileList={fileList}
+                        style={{ width: 290 }}
-                  onChange={handleUploadChange}
-                  onPreview={handlePreview}
-                  showUploadList={{ showRemoveIcon: true }}
-                  maxCount={1}
-                  accept="image/*"
-                  beforeUpload={beforeUpload}
-                >
-                  {fileList.length < 1 && (
-                    <div>
-                      <UploadOutlined
-                        style={{
-                          fontSize: 20,
-                          marginBottom: 0,
-                          marginRight: 5,
-                        }}
                       />
-                      Click to Upload
+                      {terms.length > 1 && (
-                    </div>
+                        <MinusCircleOutlined
-                  )}
+                          onClick={() => handleRemove(index)}
-                </Upload>
+                          style={{ color: 'red', cursor: 'pointer' }}
+                        />
+                      )}
+                    </Space>
+                  ))}
 
-                <Modal
+                  {/* <Button
-                  visible={previewOpen}
-                  title={previewTitle}
-                  footer={null}
-                  onCancel={handleCancelimg}
-                >
-                  <img
-                    alt="Preview"
-                    style={{ width: '100%' }}
-                    src={previewImage}
-                  />
-                </Modal>
-              </div>
-            )}
-            {isheadercolour && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Header Color
-                </Title>
-                <button
-                  onClick={() => {
-                    setColorModalTarget('header');
-                    setOpenColorModal(true);
-                  }}
-                  className="handleAddBTN"
-                >
-                  <PlusOutlined /> select color
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      width: 16,
-                      height: 16,
-                      backgroundColor: headerColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                  <span
-                    style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: headerFontColor,
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
-                    }}
-                  />
-                </button>
-              </div>
-            )}
-            {isTableHeaderColour && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Table Header Colour
-                </Title>
-                <button
-                  onClick={() => {
-                    setColorModalTarget('tableHeader');
-
-                    setOpenColorModal(true);
-                  }}
-                  className="handleAddBTN"
-                >
-                  <PlusOutlined /> select color
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      width: 16,
-                      height: 16,
-                      backgroundColor: tableHeaderColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                  <span
-                    style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableHeaderFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
-                    }}
-                  />
-                </button>
-              </div>
-            )}
-            {isTableBodyColour && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Table Body Colour
-                </Title>
-                <button
-                  onClick={() => {
-                    setColorModalTarget('tableBody');
-                    setOpenColorModal(true);
-                  }}
-                  className="handleAddBTN"
-                >
-                  <PlusOutlined /> select color
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      width: 16,
-                      height: 16,
-                      backgroundColor: tableBodyColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                  <span
-                    style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableBodyFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
-                    }}
-                  />
-                </button>
-
-                 <span style={{ margin: '0px 10px' }} className="handleAddBTN">
-                  <Switch
-                    checked={rowType === "odd"}
-                    unCheckedChildren="Odd"
-                    checkedChildren="Even"
-                    onChange={(checked) => dispatch(changeRowType(checked ? "odd" :"even" ))}
-                  />
-                </span>
-              </div>
-            )}
-            {isFooterColour && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Footer Colour
-                </Title>
-                <button
-                  onClick={() => {
-                    setColorModalTarget('footer');
-                    setOpenColorModal(true);
-                  }}
-                  className="handleAddBTN"
-                >
-                  <PlusOutlined /> select color
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      width: 16,
-                      height: 16,
-                      backgroundColor: footerColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                  <span
-                    style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: footerFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
-                    }}
-                  />
-                </button>
-              </div>
-            )}
-
-              {isNetAmountColour && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Net Amount Colour
-                </Title>
-                <button
-                  onClick={() => {
-                    setColorModalTarget('netAmount');
-                    setOpenColorModal(true);
-                  }}
-                  className="handleAddBTN"
-                >
-                  <PlusOutlined /> select color
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      width: 16,
-                      height: 16,
-                      backgroundColor: netAmountColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
-                      verticalAlign: 'middle',
-                    }}
-                  />
-                  <span
-                    style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: netAmountFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
-                    }}
-                  />
-                </button>
-              </div>
-            )}
-            {openColorModal && (
-              <ColorsSelected
-                open={openColorModal}
-                onClose={() => setOpenColorModal(false)}
-                onSave={handleColorSave}
-                initial={{
-                  background:
-                    colorModalTarget === 'header'
-                      ? headerColor
-                      : colorModalTarget === 'tableHeader'
-                        ? tableHeaderColor
-                        : colorModalTarget === 'tableBody'
-                          ? tableBodyColor
-                          : colorModalTarget === 'footer'
-                            ? footerColor
-                            : colorModalTarget === 'netAmount'
-                              ? netAmountColor
-                              : bgColor,
-                  font:
-                    colorModalTarget === 'header'
-                      ? headerFontColor
-                      : colorModalTarget === 'tableHeader'
-                        ? tableHeaderFontColor
-                        : colorModalTarget === 'tableBody'
-                          ? tableBodyFontColor
-                          : colorModalTarget === 'footer'
-                            ? footerFontColor
-                            : colorModalTarget === 'netAmount'
-                              ? netAmountFontColor
-                              : fontColor,
-                }}
-              />
-            )}
-
-            {isTermscondChecking && (
-              <div style={{ marginTop: '1rem' }}>
-                <Title level={5} style={{ marginBottom: 12 }}>
-                  Terms and Conditions
-                </Title>
-                {terms.map((term, index) => (
-                  <Space
-                    key={index}
-                    style={{ display: 'flex', marginBottom: 4 }}
-                    align="center"
-                  >
-                    <Input.TextArea
-                      placeholder={`eg:- Amount not Refunded #${index + 1}`}
-                      value={term}
-                      onChange={(e) => handleChange(index, e.target.value)}
-                      autoSize={{ minRows: 1, maxRows: 3 }}
-                      style={{ width: 290 }}
-                    />
-                    {terms.length > 1 && (
-                      <MinusCircleOutlined
-                        onClick={() => handleRemove(index)}
-                        style={{ color: 'red', cursor: 'pointer' }}
-                      />
-                    )}
-                  </Space>
-                ))}
-
-                {/* <Button
                   type="dashed"
                   onClick={handleAdd}
                   icon={<PlusOutlined />}
@@ -1919,11 +1724,275 @@ const SelectionComponent = forwardRef((props, ref) => {
                 >
                   Add Term
                 </Button> */}
-                <button onClick={handleAdd} className="handleAddBTN">
+                  <button onClick={handleAdd} className="AddTermBTN">
-                  <PlusOutlined /> Add Term
+                    <PlusOutlined /> Add Term
-                </button>
+                  </button>
-              </div>
+                </div>
-            )}
+              )}
+
+              {isSignatureChecking && (
+                <div
+                  style={{
+                    margin: '1rem 0',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '10px',
+                  }}
+                >
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Upload Signature:
+                  </Title>
+                  <Upload
+                    name="file"
+                    action="https://api.pozo.app/pozo-common-image-api//upload"
+                    listType="picture-card"
+                    fileList={fileList}
+                    onChange={handleUploadChange}
+                    onPreview={handlePreview}
+                    showUploadList={{ showRemoveIcon: true }}
+                    maxCount={1}
+                    accept="image/*"
+                    beforeUpload={beforeUpload}
+                  >
+                    {fileList.length < 1 && (
+                      <div>
+                        <UploadOutlined
+                          style={{
+                            fontSize: 20,
+                            marginBottom: 0,
+                            marginRight: 5,
+                          }}
+                        />
+                        Click to Upload
+                      </div>
+                    )}
+                  </Upload>
+
+                  <Modal
+                    visible={previewOpen}
+                    title={previewTitle}
+                    footer={null}
+                    onCancel={handleCancelimg}
+                  >
+                    <img
+                      alt="Preview"
+                      style={{ width: '100%' }}
+                      src={previewImage}
+                    />
+                  </Modal>
+                </div>
+              )}
+            </div>
+
+            <div className="PrintCutColor">
+              {isheadercolour && (
+                <div className="filedCusColor">
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Header Color
+                  </Title>
+                  <button
+                    onClick={() => {
+                      setColorModalTarget('header');
+                      setOpenColorModal(true);
+                    }}
+                    className="handleAddBTN"
+                  >
+                    <PlusOutlined /> select color
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: headerColor || '#ffffff',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: headerFontColor,
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                  </button>
+                </div>
+              )}
+              {isTableHeaderColour && (
+                <div className="filedCusColor">
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Table Header Colour
+                  </Title>
+                  <button
+                    onClick={() => {
+                      setColorModalTarget('tableHeader');
+
+                      setOpenColorModal(true);
+                    }}
+                    className="handleAddBTN"
+                  >
+                    <PlusOutlined /> select color
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: tableHeaderColor || '#ffffff',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: tableHeaderFontColor || '#000000',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                  </button>
+                </div>
+              )}
+              {isTableBodyColour && (
+                <div className="filedCusColor">
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Table Body Colour
+                  </Title>
+                  <button
+                    onClick={() => {
+                      setColorModalTarget('tableBody');
+                      setOpenColorModal(true);
+                    }}
+                    className="handleAddBTN"
+                  >
+                    <PlusOutlined /> select color
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: tableBodyColor || '#ffffff',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: tableBodyFontColor || '#000000',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                  </button>
+
+                  <span className="handleAddBTN1">
+                    <Switch
+                      checked={rowType === 'odd'}
+                      unCheckedChildren="Odd"
+                      checkedChildren="Even"
+                      onChange={(checked) =>
+                        dispatch(changeRowType(checked ? 'odd' : 'even'))
+                      }
+                    />
+                  </span>
+                </div>
+              )}
+              {isFooterColour && (
+                <div className="filedCusColor">
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Footer Colour
+                  </Title>
+                  <button
+                    onClick={() => {
+                      setColorModalTarget('footer');
+                      setOpenColorModal(true);
+                    }}
+                    className="handleAddBTN"
+                  >
+                    <PlusOutlined /> select color
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: footerColor || '#ffffff',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: footerFontColor || '#000000',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                  </button>
+                </div>
+              )}
+
+              {isNetAmountColour && (
+                <div className="filedCusColor">
+                  <Title level={5} style={{ marginBottom: 12 }}>
+                    Net Amount Colour
+                  </Title>
+                  <button
+                    onClick={() => {
+                      setColorModalTarget('netAmount');
+                      setOpenColorModal(true);
+                    }}
+                    className="handleAddBTN"
+                  >
+                    <PlusOutlined /> select color
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: netAmountColor || '#ffffff',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                    <span
+                      className="ColorChoosePrintColor"
+                      style={{
+                        display: 'inline-block',
+                        backgroundColor: netAmountFontColor || '#000000',
+                        verticalAlign: 'middle',
+                      }}
+                    />
+                  </button>
+                </div>
+              )}
+              {openColorModal && (
+                <ColorsSelected
+                  open={openColorModal}
+                  onClose={() => setOpenColorModal(false)}
+                  onSave={handleColorSave}
+                  initial={{
+                    background:
+                      colorModalTarget === 'header'
+                        ? headerColor
+                        : colorModalTarget === 'tableHeader'
+                          ? tableHeaderColor
+                          : colorModalTarget === 'tableBody'
+                            ? tableBodyColor
+                            : colorModalTarget === 'footer'
+                              ? footerColor
+                              : colorModalTarget === 'netAmount'
+                                ? netAmountColor
+                                : bgColor,
+                    font:
+                      colorModalTarget === 'header'
+                        ? headerFontColor
+                        : colorModalTarget === 'tableHeader'
+                          ? tableHeaderFontColor
+                          : colorModalTarget === 'tableBody'
+                            ? tableBodyFontColor
+                            : colorModalTarget === 'footer'
+                              ? footerFontColor
+                              : colorModalTarget === 'netAmount'
+                                ? netAmountFontColor
+                                : fontColor,
+                  }}
+                />
+              )}
+            </div>
+
             <div
               style={{
                 width: '100%',

src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable5/BSBillingTable15.scss

@@ -5,6 +5,7 @@
   background-color: #fff;
   width: inherit;
   overflow: auto;
+  scrollbar-width: thin;
   height: 80vh;
 }
 .BSBillingTable5-table-master-div-6 {
@@ -37,6 +38,7 @@
 .BSC1-Master .BSBillingTable5-billtable {
   height: 100%;
   overflow: auto;
+  scrollbar-width: thin;
   padding-bottom: 3rem;
 }
 
@@ -177,7 +179,6 @@ hr.new1 {
   justify-content: center;
   gap: 0.5rem;
   padding: 10px 0px;
-  // padding: 0rem 1rem;
 }
 
 .payrow1 {
@@ -187,7 +188,6 @@ hr.new1 {
 }
 
 .BSBillingTable-ftr {
-  // position: fixed;
   bottom: 0;
   background-color: #fff;
   width: inherit;
@@ -200,7 +200,6 @@ hr.new1 {
   width: 100%;
   font-family: var(--PARA_FONT_FAMILY);
   line-height: 0;
-  // font-family: 'Manrope';
 }
 
 .BSBillingTable5-billtable-td {
@@ -306,9 +305,6 @@ hr.new1 {
 
 .BSBIllingTable5-cnclbtn {
   margin-left: 2px;
-  //dhana
-  //width: 60px;
-  //
   width: 70px;
   height: 50px;
   border: none;
@@ -323,10 +319,6 @@ hr.new1 {
   align-items: center;
 }
 
-// .BSBillingTable5-addpay {
-//   display: none;
-// }
-
 .BSBIllingTable5-ftrbtns {
   display: none;
 }
@@ -338,13 +330,10 @@ hr.new1 {
   flex-direction: row;
   row-gap: 1rem;
   column-gap: 1rem;
-  // padding: 0rem 1rem;
   justify-content: space-around;
-  // align-items: center;
 }
 
 .BSBillingTable5-payOptsel {
-  // width: 45px;
   height: 30px;
   font-size: 14px;
   font-weight: 550;
@@ -365,27 +354,15 @@ select:focus-visible {
   display: none;
 }
 
-// .BSBIllingTable5-mobscrn{
-//     display: none;
-// }
-
 .smallScreensummary {
   display: none;
 }
 
-//   media quries
-
-/* For screens smaller than 768px (e.g., smartphones) */
-
 @media (width: 280px) {
   .BSBIllingTable5-paybtn-noitems {
     width: 170px !important;
   }
 
-  // .BSBIllingTable5-paybtn{
-
-  //  width: 180px !important;
-  // }
   .BSBIllingTable5-cnclbtn {
     width: 55px;
     height: 45px;
@@ -455,9 +432,6 @@ select:focus-visible {
 
   .BSBillingTable-ftr {
     position: fixed;
-    //nk
-    // bottom: 37px;
-    //
     left: 0;
     background-color: #fff;
     width: 100vw;
@@ -469,10 +443,6 @@ select:focus-visible {
     z-index: 1;
   }
 
-  // .BSBIllingTable5-paybtn{
-  //   width:200px
-  // }
-
   .BSLayout2-bSlayer {
     position: fixed;
     right: 0;
@@ -483,7 +453,6 @@ select:focus-visible {
   }
 
   .BSBillingTable5-table-th {
-    // font-size: 2.1dvh !important;
     padding: 3px;
   }
 
@@ -518,7 +487,6 @@ select:focus-visible {
 
   .BSBIllingTable5-paybtn {
     height: 50px;
-    // width: 160px;
     font-size: 18px;
   }
 
@@ -528,8 +496,6 @@ select:focus-visible {
   }
 
   .BSBillingTable5-table-master-div {
-    // display: none !important;
-    // width: inherit !important;
     width: 0px !important;
   }
 
@@ -580,10 +546,6 @@ select:focus-visible {
 /* For screens smaller than 768px (e.g., smartphones) */
 
 @media all and (max-width: 499px) {
-  // .payrow2{
-  //   display: flex;
-  //   align-items: center;
-  // }
   .smallScreensummary {
     display: flex;
   }
@@ -595,7 +557,6 @@ select:focus-visible {
   }
 
   .BSBIllingTable5-mobscrn {
-    // display: flex;
     width: 100vw !important;
   }
 
@@ -624,14 +585,6 @@ select:focus-visible {
 }
 
 @media (min-width: 500px) and (max-width: 767px) {
-  // .BigScreen{
-  //   display: none;
-  // }
-  // .SmallScreen{
-  //   display: flex;
-  //   font-size: 30px;
-  // }
-
   .Table3-Price-summarypop-tab {
     display: flex;
   }
@@ -640,10 +593,6 @@ select:focus-visible {
     column-gap: 2rem;
   }
 
-  .BSBillingTable-billtable {
-    // display: none;
-  }
-
   .smallScreensummary {
     display: flex;
   }
@@ -654,7 +603,6 @@ select:focus-visible {
   }
 
   .BSBillingTable5-table-master-div {
-    // display: none;
     width: 0vw;
   }
 
@@ -665,7 +613,6 @@ select:focus-visible {
     position: fixed !important;
     align-items: center !important;
     width: 100%;
-    // justify-content: flex-end !important;
     background-color: #fff !important;
   }
 
@@ -677,10 +624,6 @@ select:focus-visible {
     height: 45px;
   }
 
-  // .BSBillingTable5-table-master-div {
-  //     display: none !important;
-  // }
-
   .BSBillingTable-ftr {
     position: fixed;
     bottom: 0;
@@ -700,7 +643,6 @@ select:focus-visible {
   }
 
   .BSBIllingTable5-mobscrn {
-    // display: flex;
     height: 77px;
     width: 98vw !important;
     position: fixed;

src/Styles/BookingScreen/Components/SelectionComponent/MainPage.scss

@@ -3,8 +3,8 @@
   padding: 20px;
   height: 100%;
   width: 90%;
-  overflow: scroll;
+  overflow: auto;
-  // position: fixed;
+  scrollbar-width: thin;
   background-color: #fff;
   padding: 5px;
   border-radius: 6px;
@@ -44,10 +44,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  // gap: 3rem;
   position: absolute;
   right: 0;
-  // position: fixed;
 
   @media (max-width: 500px) {
     position: unset;
@@ -55,10 +53,10 @@
 }
 
 .Sales-dotted-box {
-  // border: 1px dashed #5a5a5a;
   padding: 20px;
   height: 70%;
-  overflow: scroll;
+  overflow: auto;
+  scrollbar-width: thin;
   background-color: #fff;
   padding: 5px;
   border-radius: 6px;
@@ -103,8 +101,8 @@
   border: 2px dashed #5a5a5a;
   padding: 20px;
   height: 70%;
-  overflow: scroll;
+  overflow: auto;
-  // position: fixed;
+  scrollbar-width: thin;
   background-color: #fff;
   padding: 5px;
   border-radius: 6px;
@@ -141,9 +139,9 @@
     padding: 20px;
     width: 45%;
     height: 85vh;
-    overflow: scroll;
+    overflow: auto;
+    scrollbar-width: thin;
     background-color: #fff;
-    // right: 25px;
     padding: 5px;
     border-radius: 6px;
 
@@ -191,6 +189,7 @@
   width: 45%;
   height: 80vh;
   overflow: auto;
+  scrollbar-width: thin;
   background-color: #f0f0f0;
   border-radius: 8px;
   padding: 16px;
@@ -234,11 +233,6 @@
   gap: 4px;
 }
 
-// .defaultandCustomisedThemeSales > div:hover {
-//   background-color: #f2f2f2;
-//   border-radius: 50pc;
-// }
-
 .defaultandCustomisedThemeSales > div.selected {
   background-color: #ffffff;
   border-radius: 5px;
@@ -255,7 +249,6 @@
   flex-wrap: nowrap;
   flex-grow: 1;
   width: 100%;
-  // gap: 20px;
   justify-content: space-between;
   border: 1px solid #dddddd;
   @media (max-width: 768px) {
@@ -301,8 +294,8 @@
   border: none;
   height: 100vh;
   background-color: #eeeeee !important;
-   width: 1.5px;
+  width: 1.5px;
-   @media (max-width:768px){
+  @media (max-width: 768px) {
     display: none;
-   }
+  }
 }

src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss

@@ -94,10 +94,10 @@
   flex-wrap: wrap;
 }
 
-//nk
 .Selection-Component-OverallDiv {
   height: 80vh;
   overflow: auto;
+  scrollbar-width: thin;
   width: 100%;
   padding-bottom: 10rem;
   background-color: #fbf9fa;
@@ -176,7 +176,6 @@
 .Selection-Component-SubDivContainer {
   display: flex;
   flex-direction: column;
-  // row-gap: 1rem;
 }
 
 .SelectComp-SubmitButton {
@@ -203,8 +202,8 @@
   font-size: 14px;
   font-family: "Poppins";
   font-weight: 400;
-  padding: 6px 12px;
+  padding: 6px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
 }
 .Selection-selectheading {
@@ -352,8 +351,9 @@
   padding-right: 4px;
   height: max-content;
   max-height: 160px;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
+  scrollbar-width: thin;
   border-radius: 4px;
   width: 100%;
 
@@ -534,17 +534,20 @@
 }
 
 .handleAddBTN {
-  width: max-content;
+  width: 90%;
   padding: 6px 12px;
-  margin-top: 10px;
+  border-radius: 4px;
-  border-radius: 6px;
   border: none;
-  background-color: #1292ee;
+  background-color: #c9cee5;
-  color: #fff;
+  color: #000000;
   font-family: "Poppins";
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
-  font-weight: 400;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 10px;
 }
 .selectBillFiledInput {
   display: flex;
@@ -554,7 +557,7 @@
   border-radius: 10px;
   width: 100%;
   padding: 0 14px;
-  margin-top: 12px;
+  margin: 12px 0;
   &:hover {
     background-color: #fff;
     box-shadow:
@@ -617,3 +620,56 @@
     margin-top: 16px !important;
   }
 }
+.PrintCutColor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  .example,
+  .ant-space,
+  .ant-space-item {
+    width: 180px;
+
+    @media (max-width: 1024px) {
+      width: unset;
+    }
+  }
+  .float-label {
+    margin-bottom: 0 !important;
+  }
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+.filedCusColor {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  .ant-typography {
+    margin-bottom: 0 !important;
+  }
+}
+
+.ColorChoosePrintColor {
+  width: 20px;
+  height: 20px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.AddTermBTN {
+  width: max-content;
+  height: max-content;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-family: "Poppins";
+  font-weight: 500;
+  font-size: 12px;
+  cursor: pointer;
+  background-color: #1292ee;
+  color: #fff;
+  border: none;
+  outline: none;
+}