category and subcategory

src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx

@@ -55,7 +55,6 @@ import { useDateStore } from '../../../../Features/BookingScreen/BookingData/Dat
 import OtherItemsModal from './OtherItemsModal.jsx';
 
 function BSCategoryHorizontal(props) {
-
   const { categoryType = 'horizontal' } = props;
 
   const dispatch = useDispatch();
@@ -130,7 +129,7 @@ function BSCategoryHorizontal(props) {
     if (!container) return;
 
     const handleScroll = () => {
-      if (categoryType === "horizontal") {
+      if (categoryType === 'horizontal') {
         setShowLeftButton(container.scrollLeft > 0);
         setShowRightButton(
           container.scrollLeft + container.clientWidth < container.scrollWidth
@@ -143,10 +142,10 @@ function BSCategoryHorizontal(props) {
       }
     };
 
-    container.addEventListener("scroll", handleScroll);
+    container.addEventListener('scroll', handleScroll);
     handleScroll(); // initial check
 
-    return () => container.removeEventListener("scroll", handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
   }, [categoryType]);
 
   const handleScrollClickLeft = (
@@ -429,7 +428,7 @@ function BSCategoryHorizontal(props) {
     e.preventDefault();
     setIsDragging(true);
 
-    if (categoryType === "horizontal") {
+    if (categoryType === 'horizontal') {
       setStartX(e.clientX);
     } else {
       setStartY(e.clientY);
@@ -442,7 +441,7 @@ function BSCategoryHorizontal(props) {
     const container = scrollContainerRef.current;
     if (!container) return;
 
-    if (categoryType === "horizontal") {
+    if (categoryType === 'horizontal') {
       const deltaX = e.clientX - startX;
       container.scrollLeft -= deltaX;
       setStartX(e.clientX);
@@ -456,7 +455,7 @@ function BSCategoryHorizontal(props) {
   const handleTouchStart = (e) => {
     setIsDragging(true);
 
-    if (categoryType === "horizontal") {
+    if (categoryType === 'horizontal') {
       setStartX(e.touches[0].clientX);
     } else {
       setStartY(e.touches[0].clientY);
@@ -469,7 +468,7 @@ function BSCategoryHorizontal(props) {
     const container = scrollContainerRef.current;
     if (!container) return;
 
-    if (categoryType === "horizontal") {
+    if (categoryType === 'horizontal') {
       const deltaX = e.touches[0].clientX - startX;
       container.scrollLeft -= deltaX;
       setStartX(e.touches[0].clientX);
@@ -678,7 +677,7 @@ function BSCategoryHorizontal(props) {
     if (!container) return;
 
     const handleWheel = (e) => {
-      if (categoryType === "horizontal") {
+      if (categoryType === 'horizontal') {
         container.scrollLeft += e.deltaY || e.deltaX;
       } else {
         container.scrollTop += e.deltaY;
@@ -687,10 +686,10 @@ function BSCategoryHorizontal(props) {
       e.preventDefault();
     };
 
-    container.addEventListener("wheel", handleWheel, { passive: false });
+    container.addEventListener('wheel', handleWheel, { passive: false });
 
     return () => {
-      container.removeEventListener("wheel", handleWheel);
+      container.removeEventListener('wheel', handleWheel);
     };
   }, [scrollContainerRef, categoryType]);
 
@@ -713,9 +712,16 @@ function BSCategoryHorizontal(props) {
     const container = scrollContainerRef?.current;
     if (!container) return;
 
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = container;
+    const {
+      scrollLeft,
+      scrollTop,
+      scrollWidth,
+      scrollHeight,
+      clientWidth,
+      clientHeight,
+    } = container;
 
-    if (categoryType === "horizontal") {
+    if (categoryType === 'horizontal') {
       setShowLeftButton(scrollLeft > 0);
       setShowRightButton(scrollLeft + clientWidth < scrollWidth);
     } else {
@@ -781,7 +787,11 @@ function BSCategoryHorizontal(props) {
     <>
       {templateData?.BookingCategory?.[0] != 'Category5' ? (
         <div
-          className={categoryType === 'vertical' ? "CategoryVertical" : "CategoryHorizontal bs1"}
+          className={
+            categoryType === 'vertical'
+              ? 'CategoryVertical'
+              : 'CategoryHorizontal bs1'
+          }
           ref={containerRef}
           style={{ maxWidth: '100%' }}
         >
@@ -799,14 +809,23 @@ function BSCategoryHorizontal(props) {
               display: 'flex',
               alignItems: 'center',
               padding: '0 0.5rem',
+              gap: '4px',
             }}
           >
-            {(showLeftButton || showUpButton) && (
+            {showLeftButton && categoryType !== 'vertical' && (
               <div
                 className="CategoryHorizontal-icon"
-                onClick={categoryType === 'vertical' ? () => handleScrollClickUp(-50, 0) : () => handleScrollClickLeft(-50, 0)}
+                onClick={() => handleScrollClickLeft(-50, 0)}
               >
-                {categoryType === 'vertical' ? '▲' : '◄'}
+                ◄
+              </div>
+            )}
+            {showUpButton && categoryType === 'vertical' && (
+              <div
+                className="CategoryHorizontal-icon"
+                onClick={() => handleScrollClickUp(-50, 0)}
+              >
+                ▲
               </div>
             )}
 
@@ -827,11 +846,24 @@ function BSCategoryHorizontal(props) {
                 )}
               </div>
             </div>
+
+            {showDownButton && categoryType === 'vertical' && (
+              <div
+                className="CategoryHorizontal-icon"
+                onClick={() => handleScrollClickDown(50, 0)}
+              >
+                ▼
+              </div>
+            )}
           </div>
 
           <div
             id="mainDiv"
-            className={categoryType === 'vertical' ? "CategoryVertical-scroll-container" : "CategoryHorizontal-scroll-container"}
+            className={
+              categoryType === 'vertical'
+                ? 'CategoryVertical-scroll-container'
+                : 'CategoryHorizontal-scroll-container'
+            }
             ref={scrollContainerRef}
             onMouseDown={handleMouseDown}
             onTouchStart={handleTouchStart}
@@ -841,7 +873,7 @@ function BSCategoryHorizontal(props) {
             onTouchEnd={handleTouchEnd}
             onMouseLeave={handleMouseUp}
             style={{
-              marginTop: '1rem',
+              marginTop: '2px',
               display: 'flex',
               pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
             }}
@@ -977,7 +1009,11 @@ function BSCategoryHorizontal(props) {
                 >
                   <div
                     style={{ flexDirection: Reverse1 }}
-                    className={categoryType === 'vertical' ? "CategoryVertical-sub-samplecard" : "CategoryHorizontal-sub-samplecard"}
+                    className={
+                      categoryType === 'vertical'
+                        ? 'CategoryVertical-sub-samplecard'
+                        : 'CategoryHorizontal-sub-samplecard'
+                    }
                   >
                     {item.SmallIcon && categoryFunction?.Image && (
                       <img
@@ -1013,8 +1049,14 @@ function BSCategoryHorizontal(props) {
             {Isdragging && draggingComponent == 'category' && (
               <DragDropContext onDragEnd={handleDragEnd}>
                 <Droppable
-                  droppableId={categoryType === 'vertical' ? "categories" : "droppable-category"}
+                  droppableId={
-                  direction={categoryType === 'vertical' ? "vertical" : "horizontal"}
+                    categoryType === 'vertical'
+                      ? 'categories'
+                      : 'droppable-category'
+                  }
+                  direction={
+                    categoryType === 'vertical' ? 'vertical' : 'horizontal'
+                  }
                 >
                   {(provided) => (
                     <div
@@ -1022,9 +1064,9 @@ function BSCategoryHorizontal(props) {
                       {...provided.droppableProps}
                       style={{
                         display: 'flex',
-                        flexDirection: categoryType === 'vertical' ? 'column' : 'row',
+                        flexDirection:
-                        // overflowX: "auto",
+                          categoryType === 'vertical' ? 'column' : 'row',
-                        gap: '8px', // optional spacing between cards
+                        gap: '8px',
                       }}
                     >
                       {categoryData?.map((item, index) => (
@@ -1080,7 +1122,11 @@ function BSCategoryHorizontal(props) {
                             >
                               <div
                                 style={{ flexDirection: Reverse1 }}
-                                className={categoryType === 'vertical' ? "CategoryVertical-sub-samplecard" : "CategoryHorizontal-sub-samplecard"}
+                                className={
+                                  categoryType === 'vertical'
+                                    ? 'CategoryVertical-sub-samplecard'
+                                    : 'CategoryHorizontal-sub-samplecard'
+                                }
                               >
                                 {item.SmallIcon && categoryFunction?.Image && (
                                   <img
@@ -1207,12 +1253,12 @@ function BSCategoryHorizontal(props) {
           <div
             style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
           >
-            {(showRightButton || showDownButton) && (
+            {showRightButton && categoryType !== 'vertical' && (
               <div
                 className="CategoryHorizontal-icon"
-                onClick={categoryType === 'vertical' ? () => handleScrollClickDown(50, 0) : () => handleScrollClickRight(5, 5)}
+                onClick={() => handleScrollClickRight(5, 5)}
               >
-                {categoryType === 'vertical' ? '▼' : '►'}
+                ►
               </div>
             )}
           </div>
@@ -1220,15 +1266,6 @@ function BSCategoryHorizontal(props) {
       ) : (
         <>
           <div className="CategoryHorizontalNew">
-            {/* Back Navigation Icon - Only show if there's more data */}
-            {/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
-              <div
-                className="CategoryHorizontal-nav-icon CategoryHorizontal-nav-left"
-                onClick={() => handleScrollClickLeft(-300, 0)}
-              >
-                ◄
-              </div>
-            )} */}
             {!subCat && (
               <div
                 className="CategoryHorizontalNew-scroll-container"
@@ -1263,7 +1300,6 @@ function BSCategoryHorizontal(props) {
                       style={{ flexDirection: Reverse1 }}
                       className="CategoryHorizontal-sub-samplecard"
                     >
-                      {/* {categoryFunction?.Image && <img src={catLogo} alt="" />} */}
                       <p
                         style={{
                           textTransform: Uppercase,
@@ -1303,16 +1339,7 @@ function BSCategoryHorizontal(props) {
                 {/* )} */}
               </div>
             )}
-            {/* Forward Navigation Icon - Only show if there's more data */}
+
-            {/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
-              <div
-                className="CategoryHorizontal-nav-icon CategoryHorizontal-nav-right"
-                onClick={() => handleScrollClickRight(300, 0)}
-              >
-                ►
-              </div>
-            )} */}
-            {/* </div> */}
             {subCat && (
               <>
                 <StandardSubcategory
@@ -1324,7 +1351,11 @@ function BSCategoryHorizontal(props) {
           </div>
         </>
       )}
-      <OtherItemsModal open={isModalOpen} setOpen={setIsModalOpen} getselectCards={getselectCards}  />
+      <OtherItemsModal
+        open={isModalOpen}
+        setOpen={setIsModalOpen}
+        getselectCards={getselectCards}
+      />
     </>
   );
 }

src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import '../../../../Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss';
 import {
@@ -6,6 +6,7 @@ import {
   SelectedGlobalSubCatgFont,
   StoredSessionData,
 } from '../../../../Features/ThemeChange/ThemeChange';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import {
   GlobalProductCategorie,
   getLayoutSubCategories,
@@ -20,8 +21,12 @@ import {
 } from '../../../../Features/BookingScreen/BookingData/BookingData';
 import WebFont from 'webfontloader';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { isMobile } from 'react-device-detect';
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
 
 function BSSubCategoryHorizontal(props) {
+  const { subCategoryType = null } = props;
+  const isVertical = subCategoryType === 'vertical';
   const dispatch = useDispatch();
   const prevRef = useRef();
   const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
@@ -40,6 +45,7 @@ function BSSubCategoryHorizontal(props) {
   const scrollContainerRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(null);
+  const [startY, setStartY] = useState(null);
 
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -52,14 +58,18 @@ function BSSubCategoryHorizontal(props) {
   const Reverse1 = categoryFunction?.ImageRight && 'row-reverse';
   const padding = categoryFunction?.BigCard && '12px';
   const Uppercase = categoryFunction?.TextCapitalize && 'uppercase';
-  const [width, setWidth] = useState(window.innerWidth);
 
-  console.log(AppId, CompId, 'CompIdCompIdCompId');
+  const [width, setWidth] = useState(window.innerWidth);
+  const [height, setHeight] = useState(window.innerHeight);
+
+  console.log(categoryData, 'categoryData');
 
   const containerRef = useRef(null);
 
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
+  const [showUpButton, setShowUpButton] = useState(false);
+  const [showDownButton, setShowDownButton] = useState(false);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -73,46 +83,40 @@ function BSSubCategoryHorizontal(props) {
   }, []);
 
   useEffect(() => {
-    function handleResize() {
+    const handleResize = () => {
       setWidth(window.innerWidth);
-    }
+      setHeight(window.innerHeight);
-    window.addEventListener('resize', handleResize);
+    };
-    return () => window.removeEventListener('resize', handleResize);
-  }, [width]);
 
-  useEffect(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    handleResize(); // initial value
-  }, [categoryData]);
 
-  useEffect(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
-    window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [width, categoryData]);
+  }, []);
 
   useEffect(() => {
     const container = scrollContainerRef?.current;
+    if (!container) return;
 
-    if (scrollContainerRef?.current?.scrollLeft == 0) {
+    const updateButtons = () => {
-      setShowLeftButton(false);
+      if (isVertical) {
+        setShowUpButton(container.scrollTop > 0);
+        setShowDownButton(
+          container.scrollTop + container.clientHeight < container.scrollHeight
+        );
       } else {
-      setShowLeftButton(true);
+        setShowLeftButton(container.scrollLeft > 0);
+        setShowRightButton(
+          container.scrollLeft + container.clientWidth < container.scrollWidth
+        );
       }
-    if (
+    };
-      container?.scrollLeft + container?.clientWidth ===
+
-      container?.scrollWidth
+    container.addEventListener('scroll', updateButtons);
-    ) {
+    updateButtons(); // initial check
-      setShowRightButton(false);
+
-    } else {
+    return () => container.removeEventListener('scroll', updateButtons);
-      setShowRightButton(true);
+  }, [subCategoryType]);
-    }
-  }, [scrollContainerRef?.current?.scrollLeft, width]);
 
   useEffect(() => {
     // Accessing the DOM elements
@@ -180,6 +184,20 @@ function BSSubCategoryHorizontal(props) {
     }
   };
 
+  const scrollUp = () => {
+    const container = scrollContainerRef.current;
+    if (container.scrollTop > 0) {
+      container.scrollTop -= 100;
+    }
+  };
+
+  const scrollDown = () => {
+    const container = scrollContainerRef.current;
+    if (container.scrollTop + container.clientHeight < container.scrollHeight) {
+      container.scrollTop += 100;
+    }
+  };
+
   const easeLinear = (t) => {
     return t;
   };
@@ -258,27 +276,6 @@ function BSSubCategoryHorizontal(props) {
       ).unwrap();
   }, [ProdCat]);
 
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    setStartX(e.clientX);
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDragging) return;
-
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) return;
-
-    const deltaX = e.clientX - startX;
-    scrollContainer.scrollLeft -= deltaX;
-    setStartX(e.clientX);
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
   const handleClick = async (e, ProdSubCat, index) => {
     let data = {
       compId: CompId,
@@ -310,22 +307,73 @@ function BSSubCategoryHorizontal(props) {
   // useEffect(() => {
   //   setIndexVal(1);
   // }, [ProdCat]);
+
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+
+    if (isVertical) {
+      setStartY(e.clientY);
+    } else {
+      setStartX(e.clientX);
+    }
+  };
+
   const handleTouchStart = (e) => {
     setIsDragging(true);
+
+    if (isVertical) {
+      setStartY(e.touches[0].clientY);
+    } else {
       setStartX(e.touches[0].clientX);
+    }
   };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    if (isVertical) {
+      const deltaY = startY - e.clientY;
+      container.scrollTop += deltaY;
+      setStartY(e.clientY);
+    } else {
+      const deltaX = e.clientX - startX;
+      container.scrollLeft -= deltaX;
+      setStartX(e.clientX);
+    }
+  };
+
   const handleTouchMove = (e) => {
     if (!isDragging) return;
 
-    const scrollContainer = scrollContainerRef.current;
+    const container = scrollContainerRef.current;
-    if (!scrollContainer) return;
+    if (!container) return;
 
+    if (isVertical) {
+      const deltaY = startY - e.touches[0].clientY;
+      container.scrollTop += deltaY;
+      setStartY(e.touches[0].clientY);
+    } else {
       const deltaX = e.touches[0].clientX - startX;
-    scrollContainer.scrollLeft -= deltaX;
+      container.scrollLeft -= deltaX;
       setStartX(e.touches[0].clientX);
+    }
+
+    e.preventDefault();
   };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
   const handleTouchEnd = () => {
     setIsDragging(false);
+    if (isVertical) {
+      document.body.style.overscrollBehaviorY = 'auto';
+    }
   };
 
   useEffect(() => {
@@ -375,24 +423,6 @@ function BSSubCategoryHorizontal(props) {
   const maindiv = document.getElementById('mainDiv');
   const count = maindiv?.querySelectorAll('div');
 
-  useEffect(() => {
-    const container = scrollContainerRef?.current;
-
-    if (scrollContainerRef?.current?.scrollLeft == 0) {
-      setShowLeftButton(false);
-    } else {
-      setShowLeftButton(true);
-    }
-    if (
-      container?.scrollLeft + container?.clientWidth ===
-      container?.scrollWidth
-    ) {
-      setShowRightButton(false);
-    } else {
-      setShowRightButton(true);
-    }
-  }, [count]);
-
   const lightenColor = (color, percent) => {
     let r = parseInt(color.substring(1, 3), 16);
     let g = parseInt(color.substring(3, 5), 16);
@@ -426,31 +456,45 @@ function BSSubCategoryHorizontal(props) {
     return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
   }
 
-  const handleSubCatDragEnd = async (result) => {
+  const handleSubCategoryDragEnd = async (result) => {
     if (!result.destination) return;
-    let index = result?.destination?.index + 1;
+
+    const index = result.destination.index + 1;
     setIndexVal(index);
+
     const items = Array.from(categoryData);
-    const items2 = Array.from(categoryData);
+    const itemsCopy = Array.from(categoryData);
-    let selectData = items2?.splice(result.source.index, 1)?.[0];
+
+    const selectedData = itemsCopy.splice(result.source.index, 1)[0];
+
     const [movedItem] = items.splice(result.source.index, 1);
     items.splice(result.destination.index, 0, movedItem);
+
     await dispatch(ChangeSubcategoryData(items));
-    handleClick('e', selectData.ProdSubCat, index);
+
+    handleClick('e', selectedData.ProdSubCat, index);
   };
 
   return (
-    <>
-      {!globalAccessForOthers && !CardAccess && (
     <div
-          className="SubCategoryHorizontal bs1"
+      className={
-          ref={containerRef}
+        isVertical ? 'SubCategoryVertical' : 'SubCategoryHorizontal bs1'
-          style={{ overflowX: 'auto', width: '100%', whiteSpace: 'nowrap' }}
+      }
+      ref={!isVertical ? containerRef : null}
+      style={
+        !isVertical
+          ? {
+              overflowX: 'auto',
+              width: '100%',
+              whiteSpace: 'nowrap',
+              margin: '0',
+            }
+          : {}
+      }
     >
-          {/* {isRightDisabled &&  <button className="SubCategoryHorizontal-icon" onClick={scrollLeft}>
+      {!globalAccessForOthers && !CardAccess && (
-          <LeftOutlined />
+        <>
-        </button>} */}
+          {!isVertical ? (
-
             <div style={{ width: '50px' }}>
               {showLeftButton && (
                 <div
@@ -461,10 +505,31 @@ function BSSubCategoryHorizontal(props) {
                 </div>
               )}
             </div>
+          ) : (
+            <div className="SubCategoryVertical-buttons">
+              {showUpButton && (
+                <button className="SubCategoryVertical-icon" onClick={scrollUp}>
+                  <UpOutlined />
+                </button>
+              )}
+              {showDownButton && (
+                <button
+                  className="SubCategoryVertical-icon"
+                  onClick={scrollDown}
+                >
+                  <DownOutlined />
+                </button>
+              )}
+            </div>
+          )}
 
           <div
             id="mainDiv"
-            className="SubCategoryHorizontal-scroll-container"
+            className={
+              isVertical
+                ? 'SubCategoryVertical-scroll-container'
+                : 'SubCategoryHorizontal-scroll-container'
+            }
             ref={scrollContainerRef}
             onMouseDown={handleMouseDown}
             onTouchStart={handleTouchStart}
@@ -476,12 +541,13 @@ function BSSubCategoryHorizontal(props) {
             style={{
               cursor: isDragging ? 'grabbing' : 'grab',
               touchAction: isDragging ? 'none' : 'auto',
-              whiteSpace: 'nowrap',
+              whiteSpace: isVertical ? 'normal' : 'nowrap',
             }}
           >
             {draggingComponent !== 'sub-category' &&
               categoryData?.map((eachData, index) => (
                 <div
+                  key={index}
                   style={{
                     borderRadius: Radius,
                     backgroundColor:
@@ -491,8 +557,6 @@ function BSSubCategoryHorizontal(props) {
                             SelectedSubCatgColor['BackgroundColor'],
                             0.4
                           ),
-                    // backgroundColor:
-                    //   index + 1 != indexval ? SelectedSubCatgColor["BackgroundColor"] : "white",
                     padding: padding,
                     border: '1px solid',
                     borderColor:
@@ -509,15 +573,28 @@ function BSSubCategoryHorizontal(props) {
                                 70
                               ),
                   }}
-                  key={index}
+                  className={
-                  className="sampleCardhorizontalsubcat"
+                    isVertical
+                      ? 'SubCategoryVertical-sampleCard'
+                      : 'sampleCardhorizontalsubcat'
+                  }
                   onClick={(e) =>
                     handleClick(e, eachData.ProdSubCat, index + 1)
                   }
+                >
+                  {
+                    <TooltipWrapper
+                      title={eachData.ProdSubCatName}
+                      placement="rightTop"
+                      isMobile={isMobile}
                     >
                       <div
                         style={{ flexDirection: Reverse1 }}
-                    className="SubCategoryHorizontal-sub-samplecard"
+                        className={
+                          isVertical
+                            ? 'SubCategoryVertical-sub-samplecard'
+                            : 'SubCategoryHorizontal-sub-samplecard'
+                        }
                       >
                         <p
                           style={{
@@ -529,23 +606,32 @@ function BSSubCategoryHorizontal(props) {
                               ? SelectedSubCatgColor['FontColor']
                               : '',
                           }}
-                      className="SubCategoryHorizontal-text"
+                          className={
+                            isVertical
+                              ? 'SubCategoryVertical-text'
+                              : 'SubCategoryHorizontal-text'
+                          }
                         >
-                      {eachData.ProdSubCatName
+                          {eachData.ProdSubCatName || 'General'}
-                        ? eachData.ProdSubCatName
-                        : 'General'}
                         </p>
                       </div>
+                    </TooltipWrapper>
+                  }
                 </div>
               ))}
             {draggingComponent == 'sub-category' && (
-              <DragDropContext onDragEnd={handleSubCatDragEnd}>
+              <DragDropContext onDragEnd={handleSubCategoryDragEnd}>
-                <Droppable droppableId="subCategories" direction="horizontal">
+                <Droppable
+                  droppableId={
+                    isVertical ? 'sub-category-droppable' : 'subCategories'
+                  }
+                  direction={isVertical ? 'vertical' : 'horizontal'}
+                >
                   {(provided) => (
                     <div
                       ref={provided.innerRef}
                       {...provided.droppableProps}
-                      style={{ display: 'flex', gap: '8px' }} // or your preferred spacing
+                      style={isVertical ? {} : { display: 'flex', gap: '8px' }}
                     >
                       {categoryData?.map((eachData, index) => (
                         <Draggable
@@ -561,6 +647,7 @@ function BSSubCategoryHorizontal(props) {
                               style={{
                                 ...provided.draggableProps.style,
                                 borderRadius: Radius,
+                                marginBottom: isVertical ? 8 : 0,
                                 backgroundColor:
                                   index + 1 !== indexval
                                     ? SelectedSubCatgColor['BackgroundColor']
@@ -588,14 +675,27 @@ function BSSubCategoryHorizontal(props) {
                                             70
                                           ),
                               }}
-                              className="sampleCardhorizontalsubcat"
+                              className={
+                                isVertical
+                                  ? 'SubCategoryVertical-sampleCard'
+                                  : 'sampleCardhorizontalsubcat'
+                              }
                               onClick={(e) =>
                                 handleClick(e, eachData.ProdSubCat, index + 1)
                               }
+                            >
+                              <TooltipWrapper
+                                title={eachData.ProdSubCatName}
+                                placement="rightTop"
+                                isMobile={isMobile}
                               >
                                 <div
                                   style={{ flexDirection: Reverse1 }}
-                                className="SubCategoryHorizontal-sub-samplecard"
+                                  className={
+                                    isVertical
+                                      ? 'SubCategoryVertical-sub-samplecard'
+                                      : 'SubCategoryHorizontal-sub-samplecard'
+                                  }
                                 >
                                   <p
                                     style={{
@@ -607,13 +707,16 @@ function BSSubCategoryHorizontal(props) {
                                         ? SelectedSubCatgColor['FontColor']
                                         : '',
                                     }}
-                                  className="SubCategoryHorizontal-text"
+                                    className={
+                                      isVertical
+                                        ? 'SubCategoryVertical-text'
+                                        : 'SubCategoryHorizontal-text'
+                                    }
                                   >
-                                  {eachData.ProdSubCatName
+                                    {eachData.ProdSubCatName || 'General'}
-                                    ? eachData.ProdSubCatName
-                                    : 'General'}
                                   </p>
                                 </div>
+                              </TooltipWrapper>
                             </div>
                           )}
                         </Draggable>
@@ -625,6 +728,8 @@ function BSSubCategoryHorizontal(props) {
               </DragDropContext>
             )}
           </div>
+
+          {!isVertical && (
             <div
               style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
             >
@@ -637,9 +742,10 @@ function BSSubCategoryHorizontal(props) {
                 </div>
               )}
             </div>
-        </div>
           )}
         </>
+      )}
+    </div>
   );
 }
 

src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx

@@ -102,26 +102,6 @@ function BSSubCategoryVertical(props) {
     };
   }, []);
 
-  useEffect(
-    () => {
-      function handleResize() {
-        setHeight(window.innerHeight);
-      }
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    },
-    [height],
-    categoryData
-  );
-
-  useEffect(() => {
-    function handleResize() {
-      setHeight(window.innerHeight);
-    }
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [categoryData]);
-
   useEffect(() => {
     if (SelectedFontFamily) {
       WebFont.load({
@@ -279,7 +259,7 @@ function BSSubCategoryVertical(props) {
 
   useEffect(() => {
     function handleResize() {
-      setHeight(window.innerheight);
+      setHeight(window.innerHeight);
     }
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);

src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx

@@ -1,11 +1,18 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
-import { changeProductSubCategorie, getCardDataWithoutSub, getLayoutproductCard, getLayoutSubCategories, GlobalProductCategorie, GlobalSubcategorieData } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { FaAngleUp } from "react-icons/fa";
+  changeProductSubCategorie,
-import { useDispatch } from "react-redux";
+  getCardDataWithoutSub,
-import { StoredSessionData } from "../../../../Features/ThemeChange/ThemeChange";
+  getLayoutproductCard,
-import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";
+  getLayoutSubCategories,
-import { useDateStore } from "../../../../Features/BookingScreen/BookingData/DateStore";
+  GlobalProductCategorie,
+  GlobalSubcategorieData,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
+import { FaAngleUp } from 'react-icons/fa';
+import { useDispatch } from 'react-redux';
+import { StoredSessionData } from '../../../../Features/ThemeChange/ThemeChange';
+import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin';
+import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore';
 
 const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
   const dispatch = useDispatch();
@@ -20,11 +27,14 @@ const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
   const UserId = SessionData?.UserId;
   const ApplicationPreferenceData = useSelector(ApplicationPreferences);
   const { selectedDate } = useDateStore();
-      const salespagefields = ApplicationPreferenceData
+  const salespagefields = ApplicationPreferenceData?.find(
-        ?.find(pref => pref?.PreferredCatName === "Sales Page Fields")
+    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
-        ?.PreferenceCatDetails
+  )?.PreferenceCatDetails;
-      const AvailableDate = salespagefields
+  const AvailableDate = salespagefields?.find(
-        ?.find(type => type?.PreferredSubCatName?.toLowerCase() === "available date" && type?.PreferredStatus === "Y");
+    (type) =>
+      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
+      type?.PreferredStatus === 'Y'
+  );
   useEffect(() => {
     // ProdCat &&
     //   dispatch(
@@ -41,8 +51,7 @@ const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
     //   : {}),
     //     })
     //   ).unwrap();
-        setSelectedSubCat(0)
+    setSelectedSubCat(0);
-
   }, [ProdCat]);
 
   const handleSubCatClick = async (e, ProdSubCat, index) => {
@@ -55,7 +64,7 @@ const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
       ...(AvailableDate && selectedDate
         ? {
             fromDate: selectedDate?.[0],
-              toDate:selectedDate?.[1],
+            toDate: selectedDate?.[1],
           }
         : {}),
     };
@@ -68,23 +77,20 @@ const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
       ...(AvailableDate && selectedDate
         ? {
             fromDate: selectedDate?.[0],
-              toDate:selectedDate?.[1],
+            toDate: selectedDate?.[1],
           }
         : {}),
     };
 
     setSelectedSubCat(index);
     if (ProdSubCat == null) {
-        
+      console.log(selectedDate, 'selectedDate');
-          console.log(selectedDate,"selectedDate")
       await dispatch(getCardDataWithoutSub(data)).unwrap();
     } else {
-         
       //  console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
       // Call API with subcategory - fetch items for this subcategory
       await dispatch(getLayoutproductCard(data1));
       // await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
-    
     }
 
     // Remove previous border styling
@@ -97,39 +103,34 @@ const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
     formRef.current = e.currentTarget;
   };
 
-    
-
   return (
-
     <div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
-                                <button className='closeSubCatBTN' onClick={handleSubCatClose}>
+      <button className="closeSubCatBTN" onClick={handleSubCatClose}>
         <FaAngleUp />
       </button>
       <div className="subCategoryNewDiv">
-                                    {
+        {SubcategorieData?.map((item, index) => {
-                                    SubcategorieData?.map((item, index) => {
           const key = item?.ProdSubCat ?? `general-${index}`;
           const isActive = selectedSubCat === index;
 
           // Check if the name is null, undefined, or empty string
           const displayName =
-                                        item?.ProdSubCatName && item.ProdSubCatName.trim() !== ""
+            item?.ProdSubCatName && item.ProdSubCatName.trim() !== ''
               ? item.ProdSubCatName
-                                            : "General";
+              : 'General';
 
           return (
             <div
               key={key}
-                                            className={`subcatNewLayout ${isActive ? "active" : ""}`}
+              className={`subcatNewLayout ${isActive ? 'active' : ''}`}
               onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
             >
               {displayName}
             </div>
           );
         })}
-                
       </div>
     </div>
-        )
+  );
-        }
+};
-        export default StandardSubcategory;
+export default StandardSubcategory;

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

@@ -237,10 +237,12 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [BillingTableData, setBillingTableData] = useState([]);
 
   //  selected Dropdown ids
+  const [manualChange, setManualChange] = useState(null);
   const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null);
   const [SelectedLayoutId, setSelectedLayoutId] = useState(null);
   const [SelectedNavbarId, setSelectedNavbarId] = useState(null);
   const [SelectedCategoryId, setSelectedCategoryId] = useState(null);
+  const [selectedCategoryName, setSelectedCategoryName] = useState(null);
   const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null);
   const [SelectedCardId, setSelectedCardId] = useState(null);
   const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
@@ -439,6 +441,12 @@ const SelectionComponent = forwardRef((props, ref) => {
     }
   }, [UserType]);
 
+  useEffect(() => {
+    if (selectedCategoryName === 'Category5') {
+      setSelectedSubCategoryId(null);
+    }
+  }, [selectedCategoryName]);
+
   useEffect(() => {
     let hasAccess = false;
 
@@ -707,7 +715,11 @@ const SelectionComponent = forwardRef((props, ref) => {
       }
 
       dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap;
-      selectCategory(editCategoryrVal?.[0]?.['ComponentId']);
+      selectCategory(
+        manualChange
+          ? CategoryData?.[0]?.['ComponentId']
+          : editCategoryrVal?.[0]?.['ComponentId']
+      );
       let optionIds = templateData?.['BookingCategory']?.[1]?.map(
         (item) => item?.OptionId
       );
@@ -1104,12 +1116,13 @@ const SelectionComponent = forwardRef((props, ref) => {
       );
     }
   };
-  const GetCategoryFun = async () => {
+  const GetCategoryFun = async (manualChange) => {
     const gettingCategoryData = await dispatch(getCategory()).unwrap();
     if (gettingCategoryData?.data?.statusCode === 1) {
       dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId))
         .unwrap;
       setCategoryData(gettingCategoryData?.data?.data);
+      setManualChange(manualChange);
     }
   };
   const GetSubCategoryFun = async () => {
@@ -1193,7 +1206,7 @@ const SelectionComponent = forwardRef((props, ref) => {
   };
 
   // Selected value functions
-  const selectLayout = (e) => {
+  const selectLayout = async (e, manualChange = false) => {
     formRef.current?.setFieldsValue({ LayoutId: e });
     setSelectedLayoutId(e);
     dispatch(
@@ -1214,7 +1227,7 @@ const SelectionComponent = forwardRef((props, ref) => {
 
     GetNavbarFun();
     GetLayoutBackgroundFun();
-    GetCategoryFun();
+    await GetCategoryFun(manualChange);
     GetCardFun();
     GetSubCategoryFun();
     GetBillingTableFun();
@@ -1294,6 +1307,7 @@ const SelectionComponent = forwardRef((props, ref) => {
     setSelectedCategoryId(e);
     dispatch(changeSelectedCategory({ CategoryId: e }));
     let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e);
+    setSelectedCategoryName(CategoryItems[0]?.ComponentName);
     dispatch(
       changePreviewComponents({
         BookingCategory: [
@@ -2779,6 +2793,7 @@ const SelectionComponent = forwardRef((props, ref) => {
         SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [],
     });
 
+    selectedCategoryName !== 'Category5' &&
     ShowDropDownData?.find((a) => a.OptionName === 'SubCategory')
       ? tempData.push({
           ComponentId: SelectedSubCategoryId,
@@ -3140,7 +3155,7 @@ const SelectionComponent = forwardRef((props, ref) => {
                         label: option.ComponentName,
                       }))}
                       label="Layout"
-                      onChangeFunction={selectLayout}
+                      onChangeFunction={(e) => selectLayout(e, true)}
                       className="field-DropDown-Selection"
                       isOnchanges={SelectedLayoutId ? true : false}
                       valueData={SelectedLayoutId}
@@ -3306,11 +3321,14 @@ const SelectionComponent = forwardRef((props, ref) => {
                   </Form.Item>
                 </div>
               )}
-              {ShowDropDownData?.find(
+              {selectedCategoryName !== 'Category5' &&
+                ShowDropDownData?.find(
                   (a) => a.OptionName === 'SubCategory'
                 ) && (
                   <div>
-                  <p className="Selection-Component-SubHeading">Sub Category</p>
+                    <p className="Selection-Component-SubHeading">
+                      Sub Category
+                    </p>
 
                     <Form.Item
                       name="SubCategoryId"
@@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
                     </div>
                   </div>
                 )}
-              {ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
+              {selectedCategoryName !== 'Category5' &&
+                ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
                 SubCategoryCheckList?.length > 0 && (
                   <div className="Selection-Component-selectContainer">
                     <div className="Selection-Component-selectheadingMainDiv">

src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx

@@ -83,9 +83,11 @@ const PreviewLayout3 = (props) => {
               )}
             />
           </div>
+          {Preview3Data?.BookingSubCategory?.[0] !== undefined && (
             <div
               style={{
-              backgroundColor: SelectedSubCatgColor?.['OverallBackgroundColor'],
+                backgroundColor:
+                  SelectedSubCatgColor?.['OverallBackgroundColor'],
               }}
             >
               <PCSubCategoryHor
@@ -99,6 +101,7 @@ const PreviewLayout3 = (props) => {
                 )}
               />
             </div>
+          )}
         </div>
       </div>
       <div className="PCLayout3-content">

src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx

@@ -16,7 +16,7 @@ import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BS
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
-import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
+import SubCategory from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   SelectedGlobalLayoutColorDetail,
@@ -549,14 +549,17 @@ const BSLayout1 = () => {
                 </div>
 
                 <div className="BSCategory1-Cardcont">
+                  {
                     <div
                       style={{
                         backgroundColor:
                           SelectedSubCatgColor?.['OverallBackgroundColor'],
+                        display: BookingSubCategory ? 'block' : 'none',
                       }}
                     >
                       {Comboglobal === false && !OtherServicesglobal && (
-                      <SubCategoryVertical
+                        <SubCategory
+                          subCategoryType={'vertical'}
                           categoryFunction={dynamicComponentProps(
                             'SubCategory',
                             BSLayout1Data?.BookingSubCategory?.[1],
@@ -565,6 +568,7 @@ const BSLayout1 = () => {
                         />
                       )}
                     </div>
+                  }
 
                   <div
                     className="layout1-card-content"

src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx

@@ -179,7 +179,7 @@ const BSLayout4 = () => {
   const BookingCategory = BSLayout4Data?.BookingCategory;
   const BookingCard = BSLayout4Data?.BookingCard;
   const BookingBilling = BSLayout4Data?.BookingBilling?.[0];
-  console.log('BSLayout4Data', BookingBilling);
+  console.log('BSLayout4Data', BookingCategory);
   const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
@@ -431,8 +431,6 @@ const BSLayout4 = () => {
                             cursor: 'pointer',
                           }}
                         />
-                        {/* <button className="BookingCloseButton"
-                                        >Booking Close</button> */}
                       </TooltipWrapper>
                     </div>
                   )
@@ -488,7 +486,14 @@ const BSLayout4 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            <div className="BSlayout_subdiv">
+            {/* <div className="BSlayout_subdiv"> */}
+            <div
+              className={
+                BookingCategory?.[0] === 'Category5'
+                  ? 'bslayout4Cat5Flex'
+                  : 'BSlayout_subdiv'
+              }
+            >
               <div
                 className="Bslayout4_ctg"
                 style={{

src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx

@@ -432,8 +432,6 @@ const BSLayout5 = () => {
                                 cursor: 'pointer',
                               }}
                             />
-                            {/* <button className="BookingCloseButton"
-                                                      >Booking Close</button> */}
                           </TooltipWrapper>
                         </div>
                       ) : (
@@ -509,20 +507,15 @@ const BSLayout5 = () => {
                     )}
                   </>
                 )}
-                {/* <div
-                className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}
-              >
-                <BranchName />
-              </div> */}
               </div>
 
+              {/* <div className="BSCategory5-Contentcont"> */}
               <div
-                className="BSCategory5-Contentcont"
+                className={
-                style={{ width: '100vw' }}
+                  BookingCategory?.[0] === 'Category5'
+                    ? 'BSlayout5Cat5Flex'
+                    : 'BSCategory5-Contentcont'
+                }
               >
                 <div
                   style={{

src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss

@@ -1,8 +1,9 @@
 .CategoryHorizontal {
   display: flex;
   align-items: center;
-  margin: 4px 10px 10px 10px;
+  margin: 4px 8px 10px 8px;
   justify-content: space-between;
+  gap: 4px;
 }
 
 .bs1 {
@@ -12,7 +13,6 @@
 .CategoryHorizontal-master-container {
   display: flex;
   flex-direction: row;
-  // flex-wrap: wrap;
   column-gap: 0.7rem;
   row-gap: 0.7rem;
   width: max-content;
@@ -21,11 +21,15 @@
 .CategoryHorizontal-icon {
   border: none;
   font-size: 15px;
-  padding: 3px;
+  padding: 8px;
-  border-radius: 30px;
+  border-radius: 6px;
-  background-color: #e2e2e2;
+  background-color: #d8d8d8;
-  margin: 10px;
+  margin: 3px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
 }
 
 .CategoryHorizontal-image {
@@ -39,18 +43,8 @@
   position: absolute;
 }
 
-.CategoryHorizontal-icon {
-  border: none;
-  font-size: 15px;
-  padding: 3px;
-  border-radius: 30px;
-  background-color: #e2e2e2;
-  margin: 10px;
-  cursor: pointer;
-}
-
 .CategoryHorizontal-scroll-container {
-  overflow-y: scroll;
+  overflow-y: auto;
   max-height: 300px;
   scrollbar-width: none;
   display: flex;
@@ -63,28 +57,12 @@
   font-size: 14px;
 }
 
-// ::-webkit-scrollbar-button:start {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// /* Style the scroll-down button */
-// ::-webkit-scrollbar-button:end {
-//   background-color: #333;
-//   border: 1px solid #666;
-// }
-
-// ::-webkit-scrollbar {
-//   display: none;
-// }
-
 .CategoryHorizontal-btn-option2 {
   display: flex;
   align-items: center;
   padding: 8px 10px;
   width: max-content !important;
   cursor: pointer;
-  // border-radius: 20px;
 }
 
 .CategoryHorizontal-input-style:checked + span {
@@ -97,19 +75,12 @@
   }
 }
 
-// .CategoryHorizontal-btn-option2 {
-//   display: flex;
-//   align-items: center;
-//   padding: 10px  10px;
-//   width: max-content !important;
-// }
 .CategoryHorizontal-btn-option2-reverse {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   padding: 10px 10px;
   width: max-content !important;
-  // border-radius: 20px;
 }
 
 .CategoryHorizontal-curved {
@@ -121,7 +92,6 @@
 }
 
 .CategoryHorizontal-scroll-container {
-  // overflow: hidden !important;
   width: 100%;
   white-space: nowrap;
 }
@@ -130,7 +100,6 @@
   min-width: max-content;
   display: flex;
   align-items: center;
-  // flex-grow: 1;
 }
 
 .sampleCard:active,
@@ -140,7 +109,7 @@
 
 .CategoryHorizontal-sub-samplecard {
   width: max-content;
-  padding: 3px 5px;
+  padding: 2px 8px;
   display: flex;
   align-items: center;
   p {
@@ -157,13 +126,8 @@
 }
 
 .sampleCard {
-  /* Your existing styles for sampleCard */
-  /* ... */
-
-  /* Add this to specify the border style */
   border: 1px solid transparent;
   cursor: pointer;
-  /* Optional: add a pointer cursor to indicate clickability */
 }
 
 .sampleCard1 {
@@ -172,7 +136,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 16px;
+  margin-top: 2px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
 
@@ -192,14 +156,6 @@
 
 .sampleCard-border {
   border-color: black;
-  /* Specify the border color you want */
-}
-
-.CategoryHorizontal-icon {
-  background-color: transparent;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
 }
 
 .uom-container .ant-select {
@@ -236,9 +192,6 @@
     width: 110px !important;
   }
 
-  //  .ant-input-group-wrapper {
-  //   width: 70% !important;
-  // }
   .quantity-amt .example {
     width: auto !important;
   }
@@ -279,12 +232,8 @@
 
   .CategoryHorizontal-scroll-container {
     overflow-y: auto !important;
-    /* Add a vertical scrollbar when content overflows */
     max-height: 300px;
-    /* Set a maximum height for the container */
-
     display: flex;
-    // flex-direction: row;
     column-gap: 0.5rem;
   }
 
@@ -304,18 +253,12 @@
   }
 
   .bill-inother {
-    // flex-direction: column;
     column-gap: 1rem !important;
     flex-wrap: wrap;
     font-size: 12px !important;
   }
 }
 
-//////////////////
-///
-/// new
-///
-
 .CategoryHorizontalNew {
   padding: 1.5rem;
   font-family: "Inter", sans-serif;
@@ -418,13 +361,8 @@
   font-size: 15px;
   line-height: 1.25rem;
   color: #4b5563;
-  // font-family: "Inter", sans-serif !important;
   font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
-
-  // -webkit-text-stroke-width: 0.2px;
   width: max-content;
-  // min-width: 150px;
-  // max-width: 250px;
   text-align: center;
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -461,7 +399,6 @@
   align-items: center;
   background-color: #fff;
   width: 100%;
-  // padding: 2px 16px;
   gap: 10px;
   animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transform-origin: top;
@@ -522,7 +459,6 @@
 .subcatNewLayout {
   padding: 1rem 1.5rem;
   height: 100%;
-  // background-color: #f9fafb;
   cursor: pointer;
   font-weight: 500;
   font-size: 15px;
@@ -530,7 +466,6 @@
   color: #4b5563;
   font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
   width: max-content;
-  // min-width: 150px;
   border-radius: 4px;
   text-align: center;
   transition: all 0.2s ease;

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss

@@ -520,7 +520,7 @@
     padding: 10px 30px 10px 30px;
   }
   .search-icon {
-    top: 53%;
+    top: 43%;
   }
 }
 .BsNavbar1FullScreen {

src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss

@@ -106,7 +106,7 @@
 
 .SubCategoryVertical-sampleCard {
   min-width: max-content;
-  flex-grow: 1;
+  // flex-grow: 1;
 }
 
 .SubCategoryVertical-sub-samplecard p {

src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss

@@ -90,6 +90,7 @@ body {
   overflow: hidden;
   justify-content: space-between;
   background-color: #f1f5f9;
+  width: 100%;
 
   @media (max-width: 768px) {
     height: 85vh;

src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss

@@ -25,12 +25,14 @@
   display: flex;
   overflow: scroll;
   height: 100%;
+  margin-top: 10px;
 }
 
 .BSlayout_subdiv {
   height: 100vh;
   overflow: hidden;
   display: flex;
+  width: 100%;
   flex-direction: row;
 }
 
@@ -43,7 +45,7 @@
 }
 
 .Bslayout4_table {
-  width: 426px !important;
+  width: 425px !important;
   height: clamp(68vh, 71rem, 50vh);
   background-color: #fff;
 }
@@ -264,3 +266,19 @@
     font-size: 10px !important;
   }
 }
+
+.bslayout4Cat5Flex {
+  display: flex;
+  flex-direction: column;
+  width: 68%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+
+  .CategoryHorizontalNew {
+    width: 100%;
+  }
+  .Bslayout4_card {
+    width: 100% !important;
+  }
+}

src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss

@@ -18,11 +18,27 @@
 .BSCategory5-Contentcont {
   display: flex;
   height: 100%;
+  width: 70%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+.BSlayout5Cat5Flex {
+  display: flex;
+  height: 100%;
+  width: 70%;
+  flex-direction: column;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+  .CategoryHorizontalNew-scroll-container {
+    width: 97%;
+  }
 }
 
 .BSCategory5-tablecont {
   width: 430px;
-  height: clamp(73vh, 71rem, 50vh);
+  height: clamp(85vh, 71rem, 50vh);
   background-color: #fff;
 }
 @media (min-width: 500px) and (max-width: 768px) {
@@ -34,7 +50,6 @@
     width: 0px !important;
     z-index: 3;
   }
-  //nk
   .BSLayout5-Master .BsTable2-Master {
     height: 0 !important;
   }