From 03517b950b741941401b5587fed66341d7c0daae Mon Sep 17 00:00:00 2001 From: vignesh Date: Thu, 26 Mar 2026 15:04:15 +0530 Subject: [PATCH] Oreintation fixing --- src/Components/Menu/SideMenuPozo.jsx | 17 +- .../BSBillingTable3overall.jsx | 14 +- .../Components/BSNavbar/BSNavbar1.jsx | 2 +- .../Components/MainPage/MainPage.jsx | 202 ++++++++++-------- .../PreviewLayouts/PreviewLayout1.jsx | 2 +- .../UtillComponents/BSNavBarFavItems.jsx | 9 +- .../UtillComponents/BSNavBarFavItems.scss | 6 +- src/Pages/DashBoard/RetailDashboard.jsx | 5 - .../BSBillingTable1/BSBPayment.scss | 1 + .../Components/BSNavbar/BSNavbar1.scss | 7 +- .../UtillComponents/BSNavBarDragItems.scss | 2 +- 11 files changed, 163 insertions(+), 104 deletions(-) diff --git a/src/Components/Menu/SideMenuPozo.jsx b/src/Components/Menu/SideMenuPozo.jsx index c12b0c7..477e828 100644 --- a/src/Components/Menu/SideMenuPozo.jsx +++ b/src/Components/Menu/SideMenuPozo.jsx @@ -139,6 +139,18 @@ const SideMenuPozo = ({ items = [] }) => { const DineinDefault = useSelector(GlobalDineinDefault); const [collapse, setCollapse] = useState(false); + const [isLandscape, setIsLandscape] = useState( + window.matchMedia('(orientation: landscape)').matches + ); + useEffect(() => { + const handleResize = () => { + setIsLandscape(window.matchMedia('(orientation: landscape)').matches); + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + useEffect(() => { const handleResize = () => { setCollapse(window.innerWidth < 768); @@ -368,7 +380,10 @@ const SideMenuPozo = ({ items = [] }) => {
{ const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768); const [isCartOpen, setIsCartOpen] = useState(window.innerWidth > 768); + const [isLandscape, setIsLandscape] = useState( + window.matchMedia('(orientation: landscape)').matches + ); + useEffect(() => { + const handleResize = () => { + setIsLandscape(window.matchMedia('(orientation: landscape)').matches); + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + // ✅ Handle resize properly useEffect(() => { const handleResize = () => { @@ -106,7 +118,7 @@ const BSBillingTable3overall = () => { } // style={{ height: containerHeight }} style={{ - height: isMobile ? '75vh' : '85vh', + height: isMobile ? (isLandscape ? '75vh' : '83vh') : '85vh', }} > {/* ✅ Cart/Table */} diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx index 17446bb..6122b21 100644 --- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx +++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx @@ -1223,7 +1223,7 @@ const BSNavbar1 = (props, BookingNavbar) => { pointerEvents: OrderType === 'Failed' ? 'none' : 'auto', }} > - +
)} {/* DragItem */} diff --git a/src/Pages/BookingScreen/Components/MainPage/MainPage.jsx b/src/Pages/BookingScreen/Components/MainPage/MainPage.jsx index 92a4d81..6bc3574 100644 --- a/src/Pages/BookingScreen/Components/MainPage/MainPage.jsx +++ b/src/Pages/BookingScreen/Components/MainPage/MainPage.jsx @@ -1,7 +1,11 @@ import { useEffect, useRef, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Button, Carousel, Skeleton } from 'antd'; -import { ArrowRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'; +import { + ArrowRightOutlined, + LeftOutlined, + RightOutlined, +} from '@ant-design/icons'; import SelectionComponent from './SelectionComponent'; import PreviewLayout1 from '../PreviewLayouts/PreviewLayout1'; import PreviewLayout2 from '../PreviewLayouts/PreviewLayout2'; @@ -10,19 +14,30 @@ import PreViewLayout4 from '../PreviewLayouts/PreViewLayout4'; import PreviewLayout5 from '../PreviewLayouts/PreviewLayout5'; import PreViewLayout6 from '../PreviewLayouts/PreViewLayout6'; import ComboLayout1 from '../PreviewLayouts/ComboLayout1'; -import { changeActiveTheme, changeOthersTheme, changeSelectedTheme, changeThemeCreation, getOthersTemplate, getPreviewData, getTemplate, GlobalActiveTheme, GlobalDefaultTheme, GlobalOthersTheme, GlobalSelectedTheme } from '../../../../Features/ThemeChange/ThemeChange'; +import { + changeActiveTheme, + changeOthersTheme, + changeSelectedTheme, + changeThemeCreation, + getOthersTemplate, + getPreviewData, + getTemplate, + GlobalActiveTheme, + GlobalDefaultTheme, + GlobalOthersTheme, + GlobalSelectedTheme, +} from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/Components/SelectionComponent/MainPage.scss'; import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2'; import { getSession } from '../../../../Services/Others'; import Buttons from '../../../../Components/Forms/Buttons'; import { BiSkipNext, BiSkipPrevious } from 'react-icons/bi'; -import { MdOutlineDisplaySettings } from "react-icons/md"; +import { MdOutlineDisplaySettings } from 'react-icons/md'; import { useAuth } from '../../../../AuthContext'; import { getEmpAccess } from '../../../../Features/AppPage/CenterPage'; - const BookingSelectionPage = (props) => { - const { SadminuserAccess } = useAuth(); + const { SadminuserAccess } = useAuth(); let SAAccessCommonMaster = SadminuserAccess?.find( (e) => e?.MenuName === 'Sales Screen' ); @@ -39,16 +54,16 @@ const BookingSelectionPage = (props) => { // const [activeTheme, setActiveTheme] = useState( // 'default' // ); - const activeTheme = useSelector(GlobalActiveTheme) - const SelectedTheme = useSelector(GlobalSelectedTheme) + const activeTheme = useSelector(GlobalActiveTheme); + const SelectedTheme = useSelector(GlobalSelectedTheme); - const mergedThemes = DefaultThemes.concat(OthersTheme) + const mergedThemes = DefaultThemes.concat(OthersTheme); const [currentSlide, setCurrentSlide] = useState(0); - console.log(SelectedTheme, "currentSlide") + console.log(SelectedTheme, 'currentSlide'); const [OthersCount, setOthersCount] = useState(1); const [isNext, isSetNext] = useState(true); - const [empData, setEmpData] = useState(); - const [addnewAccess, setaddnewAccess] = useState(true); + const [empData, setEmpData] = useState(); + const [addnewAccess, setaddnewAccess] = useState(true); const rightIsLastSlide = currentSlide === mergedThemes.length - 1; const leftIsFirstSlide = currentSlide === 0 && OthersCount > 1; const [pendingSlide, setPendingSlide] = useState(null); @@ -68,50 +83,50 @@ const BookingSelectionPage = (props) => { : useSelector(getPreviewData); console.log(previewData, 'previewDatapreviewData'); useEffect(() => { - GetOthersTemplate() + GetOthersTemplate(); // gettemplatedetail() - }, []) - useEffect(() => { - if (UserType === 'Employee') { - fetchApi(); - } - }, [UserType]); - - useEffect(() => { - let hasAccess = false; - - if (UserType === 'Admin' || UserType === 'Super Admin') { - hasAccess = true; - } else if (UserType === 'Employee') { - hasAccess = empData?.AddAccess === 'Y'; - } else if (UserType === 'Super Admin User') { - hasAccess = SAAccessCommonMaster?.AddAccess === 'Y'; - } - - setaddnewAccess(!hasAccess); - }, [empData, SAAccessCommonMaster, UserType]); - - const fetchApi = async () => { - let data = { - CompId: CompId, - BranchId: BranchId, - AppId: AppId, - EmpId: UserId, - }; - let response = await dispatch(getEmpAccess(data)).unwrap(); - let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter( - (item) => item.ConfigName === 'Sales Screen' - ); - setEmpData(datas?.[0]); + }, []); + useEffect(() => { + if (UserType === 'Employee') { + fetchApi(); + } + }, [UserType]); + + useEffect(() => { + let hasAccess = false; + + if (UserType === 'Admin' || UserType === 'Super Admin') { + hasAccess = true; + } else if (UserType === 'Employee') { + hasAccess = empData?.AddAccess === 'Y'; + } else if (UserType === 'Super Admin User') { + hasAccess = SAAccessCommonMaster?.AddAccess === 'Y'; + } + + setaddnewAccess(!hasAccess); + }, [empData, SAAccessCommonMaster, UserType]); + + const fetchApi = async () => { + let data = { + CompId: CompId, + BranchId: BranchId, + AppId: AppId, + EmpId: UserId, }; - + let response = await dispatch(getEmpAccess(data)).unwrap(); + let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter( + (item) => item.ConfigName === 'Sales Screen' + ); + setEmpData(datas?.[0]); + }; + const gettemplatedetail = async () => { let tempdetail = await dispatch( getTemplate({ CompId: CompId, BranchId: BranchId, AppId: AppId }) ).unwrap(); if (tempdetail?.data?.statusCode == 1) { - dispatch(changeActiveTheme("customised")); + dispatch(changeActiveTheme('customised')); } }; @@ -149,7 +164,12 @@ const BookingSelectionPage = (props) => { setCurrentSlide(pendingSlide); let seltheme = updatedThemes[pendingSlide]; dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme })); - dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName })); + dispatch( + changeSelectedTheme({ + ThemeId: seltheme?.TemplatePreferenceId, + ThemeName: seltheme?.ThemeName, + }) + ); } setPendingSlide(null); // Reset } @@ -180,7 +200,7 @@ const BookingSelectionPage = (props) => { // // } // }; // const RightOnclick = async () => { - // // let Allthemes = + // // let Allthemes = // // alert('Right Clicked'); // const newIndex = (currentSlide + 1) % mergedThemes.length; // carouselRef.current.goTo(newIndex); @@ -205,7 +225,12 @@ const BookingSelectionPage = (props) => { setCurrentSlide(newIndex); let seltheme = mergedThemes[newIndex]; dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme })); - dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName })); + dispatch( + changeSelectedTheme({ + ThemeId: seltheme?.TemplatePreferenceId, + ThemeName: seltheme?.ThemeName, + }) + ); } }; @@ -214,12 +239,18 @@ const BookingSelectionPage = (props) => { await GetLessTemplate(); setPendingSlide(DefaultThemes.concat(OthersTheme).length - 1); // Ask to jump to last slide after fetch } else { - const newIndex = (currentSlide - 1 + mergedThemes.length) % mergedThemes.length; + const newIndex = + (currentSlide - 1 + mergedThemes.length) % mergedThemes.length; carouselRef.current.goTo(newIndex); setCurrentSlide(newIndex); let seltheme = mergedThemes[newIndex]; dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme })); - dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName })); + dispatch( + changeSelectedTheme({ + ThemeId: seltheme?.TemplatePreferenceId, + ThemeName: seltheme?.ThemeName, + }) + ); } }; const CustomisedthemeSelection = async (seltheme) => { @@ -236,16 +267,25 @@ const BookingSelectionPage = (props) => { } } else { if (Object.keys(DefaultThemes)?.length > 0) { - dispatch(changeSelectedTheme({ ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, ThemeName: DefaultThemes?.[0]?.ThemeName })); + dispatch( + changeSelectedTheme({ + ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, + ThemeName: DefaultThemes?.[0]?.ThemeName, + }) + ); // settemplateData(DefaultThemes?.[0]); - dispatch(changeThemeCreation({ formtype: 'edit', editdata: DefaultThemes?.[0] })); + dispatch( + changeThemeCreation({ + formtype: 'edit', + editdata: DefaultThemes?.[0], + }) + ); } else { dispatch(changeSelectedTheme({})); dispatch(changeThemeCreation({ formtype: 'new' })); - } } - } + }; const handlesubmit = () => { const PostData = {}; @@ -256,7 +296,7 @@ const BookingSelectionPage = (props) => { PostData['ColorId'] = colorFilteredArray; PostData['FontId'] = fontFilteredArray; PostData['CreatedBy'] = UserId; - } + }; const GetOthersTemplate = async () => { let OtherTemp = await dispatch( getOthersTemplate({ pagenumber: OthersCount }) @@ -266,7 +306,7 @@ const BookingSelectionPage = (props) => { ...temp, ThemeName: `Theme ${index + 1 + OthersCount * 10 - 10}`, })); - dispatch(changeOthersTheme(withname)) + dispatch(changeOthersTheme(withname)); } else { } }; @@ -288,8 +328,7 @@ const BookingSelectionPage = (props) => { ...temp, ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`, })); - dispatch(changeOthersTheme(withname)) - + dispatch(changeOthersTheme(withname)); } else { setMessageType('warning'); setMessageData('No more templates'); @@ -306,22 +345,24 @@ const BookingSelectionPage = (props) => { ...temp, ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`, })); - dispatch(changeOthersTheme(withname)) + dispatch(changeOthersTheme(withname)); isSetNext(true); } else { } }; const clearOtherTemplate = async () => { - dispatch(changeOthersTheme([])) + dispatch(changeOthersTheme([])); setOthersCount(1); }; return ( -
- +

-

Sales Setup

+

+ {' '} + Sales Setup +

Customize your sales screen here

@@ -338,29 +379,24 @@ const BookingSelectionPage = (props) => { > Customized Theme
-
- {activeTheme === 'default' && + {activeTheme === 'default' && (
} />
- } + )}
-
- {activeTheme === 'default' ? +
+ {activeTheme === 'default' ? ( <> -
- +
)} -
- : + ) : ( <>
- {Object.keys(previewData)?.length > 0 ? ( renderPreviewLayout() @@ -436,16 +470,14 @@ const BookingSelectionPage = (props) => { )}
-
+
- } + )}
-
); }; - export default BookingSelectionPage; diff --git a/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout1.jsx b/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout1.jsx index c4b0844..f29e98b 100644 --- a/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout1.jsx +++ b/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout1.jsx @@ -118,7 +118,7 @@ const PreviewLayout1 = (props) => { )} />{' '}
-
+
{Preview1Data?.BookingLayout?.[1] && Preview1Data?.BookingBilling?.[0] != 'Billing1' && Preview1Data?.BookingBilling?.[0] != 'Billing2' && diff --git a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.jsx b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.jsx index 66277f6..d8ecb74 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.jsx @@ -26,9 +26,14 @@ import { SlArrowDown } from 'react-icons/sl'; import { IoCloseSharp } from 'react-icons/io5'; import TooltipWrapper from '../../../../Components/Tooltip/Tooltip'; import { isMobile } from 'react-device-detect'; -import "./BSNavBarFavItems.scss" +import './BSNavBarFavItems.scss'; -const BSNavBarFavItems = ({ type, fill, drawerOpen = false }) => { +const BSNavBarFavItems = ({ + type, + fill, + drawerOpen = false, + setNavmenu = () => {}, +}) => { const [open, setOpen] = useState(false); const [favopen, setFavopen] = useState(false); const globalAllItemdata = useSelector(GlobalAllItemData); diff --git a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.scss b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.scss index 1e99ba9..3e6de51 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.scss +++ b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarFavItems.scss @@ -85,13 +85,13 @@ .AddFavList { position: fixed; left: 0; - top: 17rem; + top: 15rem; width: 100vw !important; padding: 1rem 1rem !important; } .AddFavItemListCont { - height: 34vh; + height: 30vh; overflow: auto; } @@ -104,7 +104,7 @@ .AddFavList { position: fixed; left: 0; - top: 17rem; + top: 15rem; width: 100vw !important; padding: 1rem 1rem !important; } diff --git a/src/Pages/DashBoard/RetailDashboard.jsx b/src/Pages/DashBoard/RetailDashboard.jsx index 8b52761..f42080e 100644 --- a/src/Pages/DashBoard/RetailDashboard.jsx +++ b/src/Pages/DashBoard/RetailDashboard.jsx @@ -1775,11 +1775,6 @@ const RetailDashboard = () => { UserType === 'Super Admin' || UserType === 'Super Admin User' ) { - if (!document.fullscreenElement) { - document.documentElement.requestFullscreen().catch((err) => { - console.error('Error attempting to enable fullscreen:', err); - }); - } navigate(`${subDirectory}sales`); } }} diff --git a/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss b/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss index 9c2d2c5..c973f1b 100644 --- a/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss +++ b/src/Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss @@ -4,6 +4,7 @@ flex-wrap: wrap; justify-content: center; gap: 10px; + margin-top: 4px; } .BST1-Payment-onlypay { diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss index 4972fdf..553088f 100644 --- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss +++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss @@ -635,11 +635,10 @@ // .resNavbarMain { - width: 100vw; + width: max-content; + max-width: 250px; height: 100vh; - background-color: #00000056; position: fixed; - left: 0; top: 0; bottom: 0; right: 0; @@ -648,7 +647,7 @@ align-items: flex-start; justify-content: flex-end; overflow: visible; - backdrop-filter: blur(6px); + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; animation: fadeInRes 0.3s ease; &.closing { diff --git a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss index f661693..6652c99 100644 --- a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss +++ b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarDragItems.scss @@ -85,7 +85,7 @@ } .AddFavItemListCont { - height: 34vh; + height: 30vh; padding-bottom: 4rem; } }