Print setup Design changes

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 [fontColor, setFontColor] = useState("#000000");
-  const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff");
+  const [bgColor, setBgColor] = useState('#ffffff');
+  const [fontColor, setFontColor] = useState('#000000');
+  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,6 +1654,7 @@ const SelectionComponent = forwardRef((props, ref) => {
           </div>
 
           <div className="selectBillFiledInput">
+            <div className="PrintCutColor" style={{marginBottom:"10px"}}>
               {isFooterChecking && (
                 <div style={{ marginTop: '1rem' }}>
                   <Title level={5} style={{ marginBottom: 12 }}>
@@ -1621,10 +1688,52 @@ const SelectionComponent = forwardRef((props, ref) => {
                 </div>
               }
 
+              {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 />}
+                  size="small"
+                  style={{ marginTop: 8 }}
+                >
+                  Add Term
+                </Button> */}
+                  <button onClick={handleAdd} className="AddTermBTN">
+                    <PlusOutlined /> Add Term
+                  </button>
+                </div>
+              )}
+
               {isSignatureChecking && (
                 <div
                   style={{
-                  marginTop: '1rem',
+                    margin: '1rem 0',
                     display: 'flex',
                     flexWrap: 'wrap',
                     gap: '10px',
@@ -1673,8 +1782,11 @@ const SelectionComponent = forwardRef((props, ref) => {
                   </Modal>
                 </div>
               )}
+            </div>
+
+            <div className="PrintCutColor">
               {isheadercolour && (
-              <div style={{ marginTop: '1rem' }}>
+                <div className="filedCusColor">
                   <Title level={5} style={{ marginBottom: 12 }}>
                     Header Color
                   </Title>
@@ -1687,27 +1799,26 @@ const SelectionComponent = forwardRef((props, ref) => {
                   >
                     <PlusOutlined /> select color
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
                         display: 'inline-block',
-                      width: 16,
-                      height: 16,
                         backgroundColor: headerColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
                         verticalAlign: 'middle',
                       }}
                     />
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: headerFontColor,
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                        display: 'inline-block',
+                        backgroundColor: headerFontColor,
+                        verticalAlign: 'middle',
                       }}
                     />
                   </button>
                 </div>
               )}
               {isTableHeaderColour && (
-              <div style={{ marginTop: '1rem' }}>
+                <div className="filedCusColor">
                   <Title level={5} style={{ marginBottom: 12 }}>
                     Table Header Colour
                   </Title>
@@ -1721,27 +1832,26 @@ const SelectionComponent = forwardRef((props, ref) => {
                   >
                     <PlusOutlined /> select color
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
                         display: 'inline-block',
-                      width: 16,
-                      height: 16,
                         backgroundColor: tableHeaderColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
                         verticalAlign: 'middle',
                       }}
                     />
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableHeaderFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                        display: 'inline-block',
+                        backgroundColor: tableHeaderFontColor || '#000000',
+                        verticalAlign: 'middle',
                       }}
                     />
                   </button>
                 </div>
               )}
               {isTableBodyColour && (
-              <div style={{ marginTop: '1rem' }}>
+                <div className="filedCusColor">
                   <Title level={5} style={{ marginBottom: 12 }}>
                     Table Body Colour
                   </Title>
@@ -1754,36 +1864,37 @@ const SelectionComponent = forwardRef((props, ref) => {
                   >
                     <PlusOutlined /> select color
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
                         display: 'inline-block',
-                      width: 16,
-                      height: 16,
                         backgroundColor: tableBodyColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
                         verticalAlign: 'middle',
                       }}
                     />
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableBodyFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                        display: 'inline-block',
+                        backgroundColor: tableBodyFontColor || '#000000',
+                        verticalAlign: 'middle',
                       }}
                     />
                   </button>
 
-                 <span style={{ margin: '0px 10px' }} className="handleAddBTN">
+                  <span className="handleAddBTN1">
                     <Switch
-                    checked={rowType === "odd"}
+                      checked={rowType === 'odd'}
                       unCheckedChildren="Odd"
                       checkedChildren="Even"
-                    onChange={(checked) => dispatch(changeRowType(checked ? "odd" :"even" ))}
+                      onChange={(checked) =>
+                        dispatch(changeRowType(checked ? 'odd' : 'even'))
+                      }
                     />
                   </span>
                 </div>
               )}
               {isFooterColour && (
-              <div style={{ marginTop: '1rem' }}>
+                <div className="filedCusColor">
                   <Title level={5} style={{ marginBottom: 12 }}>
                     Footer Colour
                   </Title>
@@ -1796,20 +1907,19 @@ const SelectionComponent = forwardRef((props, ref) => {
                   >
                     <PlusOutlined /> select color
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
                         display: 'inline-block',
-                      width: 16,
-                      height: 16,
                         backgroundColor: footerColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
                         verticalAlign: 'middle',
                       }}
                     />
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: footerFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                        display: 'inline-block',
+                        backgroundColor: footerFontColor || '#000000',
+                        verticalAlign: 'middle',
                       }}
                     />
                   </button>
@@ -1817,7 +1927,7 @@ const SelectionComponent = forwardRef((props, ref) => {
               )}
 
               {isNetAmountColour && (
-              <div style={{ marginTop: '1rem' }}>
+                <div className="filedCusColor">
                   <Title level={5} style={{ marginBottom: 12 }}>
                     Net Amount Colour
                   </Title>
@@ -1830,20 +1940,19 @@ const SelectionComponent = forwardRef((props, ref) => {
                   >
                     <PlusOutlined /> select color
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
                         display: 'inline-block',
-                      width: 16,
-                      height: 16,
                         backgroundColor: netAmountColor || '#ffffff',
-                      border: '1px solid #000',
-                      marginLeft: 6,
                         verticalAlign: 'middle',
                       }}
                     />
                     <span
+                      className="ColorChoosePrintColor"
                       style={{
-                      display: 'inline-block', width: 16, height: 16, backgroundColor: netAmountFontColor || '#000000',
-                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                        display: 'inline-block',
+                        backgroundColor: netAmountFontColor || '#000000',
+                        verticalAlign: 'middle',
                       }}
                     />
                   </button>
@@ -1882,48 +1991,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                   }}
                 />
               )}
-
-            {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 />}
-                  size="small"
-                  style={{ marginTop: 8 }}
-                >
-                  Add Term
-                </Button> */}
-                <button onClick={handleAdd} className="handleAddBTN">
-                  <PlusOutlined /> Add Term
-                </button>
             </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;
-  // position: fixed;
+  overflow: auto;
+  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;
-  // position: fixed;
+  overflow: auto;
+  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) {

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;
-  border-radius: 8px;
+  padding: 6px 16px;
+  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: 6px;
+  border-radius: 4px;
   border: none;
-  background-color: #1292ee;
-  color: #fff;
+  background-color: #c9cee5;
+  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;
+}