From 34b710073ac7d989ae028a9b9487babeff4961ff Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 3 Mar 2026 18:27:39 +0530
Subject: [PATCH] FullScreen mode added in Navbar 1 and 2

---
 .../Components/BSNavbar/BSNavbar1.jsx         | 41 +++++++++++++++-
 .../Components/BSNavbar/BSNavbar2.jsx         | 48 +++++++++++++++----
 src/Pages/Preference/PreferenceList.scss      |  1 -
 .../Components/BSNavbar/BSNavbar1.scss        | 25 ++++++++++
 .../Components/BSNavbar/BSNavbar2.scss        | 26 ++++++++++
 5 files changed, 131 insertions(+), 10 deletions(-)

diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
index c35dc25..237b9da 100644
--- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
+++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
@@ -157,6 +157,7 @@ import { FaParking } from 'react-icons/fa';
 import { isMobile } from 'react-device-detect';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
+import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -263,6 +264,30 @@ const BSNavbar1 = (props) => {
       setAccIsOpen(false);
     }
   };
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+
+  
+  const handleFullscreen = useCallback(async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  }, [isFullscreen]);
+
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 
@@ -967,6 +992,20 @@ const BSNavbar1 = (props) => {
                 {formattedDate}
               </div>
             </div>
+
+            <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
+              <div
+                className={
+                  isFullscreen
+                    ? 'BsNavbar1FullScreenExit'
+                    : 'BsNavbar1FullScreen'
+                }
+                onClick={handleFullscreen}
+              >
+                {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
+              </div>
+            </Tooltip>
+
             <TooltipWrapper title="User Profile" isMobile={isMobile}>
               <div className="UserProfile">
                 <PozoUserIcon onClick={UserAcc} />
@@ -1168,7 +1207,7 @@ const BSNavbar1 = (props) => {
                               </div>
                             }
                             trigger="click"
-                            placement="left"  
+                            placement="left"
                             open={open}
                             onOpenChange={handleOpenChange}
                           >
diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
index d13e7a4..9e5c595 100644
--- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
+++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
@@ -98,7 +98,7 @@ import {
   getUserProfile,
   userDataByUserId,
 } from '../../../../Features/UserAccount/userData.js';
- import { TbSettingsSearch } from 'react-icons/tb';
+import { TbSettingsSearch } from 'react-icons/tb';
 import { FaParking } from 'react-icons/fa';
 import BSNavBarUserInfo from './BSNavBarUserInfo';
 import { OtherServicesCardlistdata } from '../../../../Features/OtherServices/OtherServices.js';
@@ -128,8 +128,8 @@ const FeaturesFunctionalities = lazy(
 const BSCustomerSelect = lazy(
   () => import('../UtillComponents/BSSelectCustomer.jsx')
 );
-// Scss
-import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
+ import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
+import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -239,6 +239,27 @@ const BSNavbar2 = () => {
       item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
   );
 
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleFullscreen = useCallback(async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  }, [isFullscreen]);
+
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 
@@ -871,11 +892,10 @@ const BSNavbar2 = () => {
               )}
           </>
         )}
-        <div className='Nav2BSNavBarWholeSale'>
-
-        {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
-          <BSNavBarWholeSale />
-        )}
+        <div className="Nav2BSNavBarWholeSale">
+          {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
+            <BSNavBarWholeSale />
+          )}
         </div>
         {!OtherServicesglobal && ScanLayoutScreen?.SettingValue === 'Y' && (
           <BSScanTemplate />
@@ -1280,6 +1300,18 @@ const BSNavbar2 = () => {
             </div>
           </>
         )}
+
+        <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
+          <div
+            className={
+              isFullscreen ? 'BsNavbar1FullScreenExit' : 'BsNavbar1FullScreen'
+            }
+            onClick={handleFullscreen}
+          >
+            {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
+          </div>
+        </Tooltip>
+
         {isMobile && (
           <div
             style={{
diff --git a/src/Pages/Preference/PreferenceList.scss b/src/Pages/Preference/PreferenceList.scss
index f8f0ccf..5078ee6 100644
--- a/src/Pages/Preference/PreferenceList.scss
+++ b/src/Pages/Preference/PreferenceList.scss
@@ -166,7 +166,6 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  width: 100%;
   margin-top: 1rem;
   position: fixed;
   bottom: 1.3rem;
diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
index 3816df2..e33efd8 100644
--- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
+++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
@@ -522,3 +522,28 @@
     top: 53%;
   }
 }
+.BsNavbar1FullScreen {
+  background-color: #1292ee;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+}
+
+.BsNavbar1FullScreenExit {
+  background-color: #ef4444;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+}
diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss
index fc0ce5f..2b902ef 100644
--- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss
+++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss
@@ -423,3 +423,29 @@
   left: 11px;
   top: 10px;
 }
+
+.BsNavbar1FullScreen {
+  background-color: #1292ee;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+}
+
+.BsNavbar1FullScreenExit {
+  background-color: #ef4444;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+}