Merge pull request 'Dashboard and qr generate page design changes' (#3) from vicky into main

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

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+# file 
+src/routesConfig.jsx

src/Components/Forms/main.scss

@@ -565,6 +565,7 @@ Button[disabled] {
   background: #fafafa7a;
   //vicky
   padding: 1px 8px !important;
+  border: 0.5px solid rgb(235, 235, 235);
 }
 
 .ant-input-affix-wrapper > input.ant-input {
@@ -967,7 +968,6 @@ Button[disabled] {
   }
 }
 
-
 //  writed by sree lowStock animated
 
 .stock-alert-animation {
@@ -976,8 +976,13 @@ Button[disabled] {
   cursor: pointer;
 }
 @keyframes blink {
-  0%   { opacity: 1; }
+  0% {
-  50%  { opacity: 0; }
+    opacity: 1;
-  100% { opacity: 1; }
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-

src/Components/Menu/SideMenuPozo.jsx

@@ -2,16 +2,35 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import {
-  FaBars, FaThLarge, FaHome, FaCog, FaChartBar, FaFileAlt,
+  FaBars,
-  FaMobileAlt, FaSignOutAlt, FaSignInAlt, FaArrowRight,
+  FaThLarge,
-  FaCaretRight
+  FaHome,
+  FaCog,
+  FaChartBar,
+  FaFileAlt,
+  FaMobileAlt,
+  FaSignOutAlt,
+  FaSignInAlt,
+  FaArrowRight,
+  FaCaretRight,
 } from 'react-icons/fa';
-import { MdSettings, MdOutlineReport, MdOutlineHome, MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowRight, } from 'react-icons/md';
+import {
+  MdSettings,
+  MdOutlineReport,
+  MdOutlineHome,
+  MdOutlineKeyboardArrowDown,
+  MdOutlineKeyboardArrowRight,
+} from 'react-icons/md';
 import { BiLogOut, BiLogIn } from 'react-icons/bi';
-import { AiOutlineAppstore, AiOutlineSetting, AiOutlineBarChart, AiOutlineFileText } from 'react-icons/ai';
+import {
+  AiOutlineAppstore,
+  AiOutlineSetting,
+  AiOutlineBarChart,
+  AiOutlineFileText,
+} from 'react-icons/ai';
 import { GiHamburgerMenu } from 'react-icons/gi';
 import './SideMenuPozo.scss';
-import { FaCaretDown } from "react-icons/fa";
+import { FaCaretDown } from 'react-icons/fa';
 import { useDispatch } from 'react-redux';
 import { useContext } from 'react';
 import { AuthContext } from '../../AuthContext';
@@ -45,68 +64,97 @@ import {
 import { ChangeTotalAmount } from '../../Features/ExteraCharges/ExtraCharges';
 import * as Offer from '../../Features/Offer/Offer';
 import { FiMenu } from 'react-icons/fi';
-import POZOMIND from "../../Images/PozomindWLogo.png";
+import POZOMIND from '../../Images/PozomindWLogo.png';
-import { ChangeFullFreeProductList, changeFullOfferAppliedProducts, changeLoyaltyConsumedQuantities } from '../../Features/Offer/Offernew/BookingOffernew';
+import {
+  ChangeFullFreeProductList,
+  changeFullOfferAppliedProducts,
+  changeLoyaltyConsumedQuantities,
+} from '../../Features/Offer/Offernew/BookingOffernew';
 
 const subDirectory = import.meta.env.BASE_URL;
 
 // Filter functions (copied from AppPage.jsx)
 function filterMenuItems(menu, configList) {
   if (!Array.isArray(menu)) return [];
-  return menu.filter((item) => {
+  return menu
+    .filter((item) => {
       if (!item) return false;
-    if (item.label === "Sign Out") return true;
+      if (item.label === 'Sign Out') return true;
       // For nested children, filter recursively
-    let filteredChildren = item.children ? filterMenuItems(item.children, configList) : undefined;
+      let filteredChildren = item.children
+        ? filterMenuItems(item.children, configList)
+        : undefined;
       // Employee access: ConfigName
       const config = configList?.find(
-      (config) => config.ConfigName === item.label && config.ReadAccess === 'Y'
+        (config) =>
+          config.ConfigName === item.label && config.ReadAccess === 'Y'
       );
       // If this item or any of its children are accessible, include it
-    return (config || (filteredChildren && filteredChildren.length > 0));
+      return config || (filteredChildren && filteredChildren.length > 0);
-  }).map(item => ({
+    })
+    .map((item) => ({
       ...item,
-    children: item.children ? filterMenuItems(item.children, configList) : undefined
+      children: item.children
+        ? filterMenuItems(item.children, configList)
+        : undefined,
     }));
 }
 
 function filterSadminUserMenuItems(menu, configList) {
   if (!Array.isArray(menu)) return [];
-  return menu.filter((item) => {
+  return menu
+    .filter((item) => {
       if (!item) return false;
-    if (item.label === "Sign Out") return true;
+      if (item.label === 'Sign Out') return true;
 
-    let filteredChildren = item.children ? filterSadminUserMenuItems(item.children, configList) : undefined;
+      let filteredChildren = item.children
+        ? filterSadminUserMenuItems(item.children, configList)
+        : undefined;
       // Super admin user access: MenuName
       const config = configList?.find(
         (config) => config.MenuName === item.label && config.ReadAccess === 'Y'
       );
-    return (config || (filteredChildren && filteredChildren.length > 0));
+      return config || (filteredChildren && filteredChildren.length > 0);
-  }).map(item => ({
+    })
+    .map((item) => ({
       ...item,
-    children: item.children ? filterSadminUserMenuItems(item.children, configList) : undefined
+      children: item.children
+        ? filterSadminUserMenuItems(item.children, configList)
+        : undefined,
     }));
 }
 
 // Capitalize helper
 function capitalizeWords(str) {
   if (typeof str !== 'string') return '';
-  return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+  return str.replace(
+    /\w\S*/g,
+    (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+  );
 }
 
 // Recursively capitalize all menu item labels, filtering out falsy items and items without a label
 function capitalizeMenuLabels(items) {
   return (items || [])
-    .filter(item => item && typeof item.label === 'string' && item.label.trim() !== '')
+    .filter(
-    .map(item => ({
+      (item) =>
+        item && typeof item.label === 'string' && item.label.trim() !== ''
+    )
+    .map((item) => ({
       ...item,
       label: capitalizeWords(item.label),
-      children: item.children ? capitalizeMenuLabels(item.children) : undefined
+      children: item.children ? capitalizeMenuLabels(item.children) : undefined,
     }));
 }
 
 const SideMenuPozo = ({ items = [] }) => {
-  const { freeProductsCount, setFreeProductsCount, UserType, Access, SadminuserAccess } = useContext(AuthContext);
+  const {
+    freeProductsCount,
+    setFreeProductsCount,
+    UserType,
+    Access,
+    SadminuserAccess,
+  } = useContext(AuthContext);
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
@@ -120,7 +168,6 @@ const SideMenuPozo = ({ items = [] }) => {
   const DineinDefault = useSelector(GlobalDineinDefault);
   const [collapse, setCollapse] = useState(false);
 
-
   useEffect(() => {
     const handleResize = () => {
       setCollapse(window.innerWidth < 768);
@@ -147,7 +194,6 @@ const SideMenuPozo = ({ items = [] }) => {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (window.innerWidth < 768) {
@@ -157,8 +203,8 @@ const SideMenuPozo = ({ items = [] }) => {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
   // Debug current pathname
@@ -172,7 +218,7 @@ const SideMenuPozo = ({ items = [] }) => {
   // Check if any child of this item is selected (for parent menu highlighting)
   const hasSelectedChild = (item) => {
     if (!item.children) return false;
-    return item.children.some(child => {
+    return item.children.some((child) => {
       if (child.children) {
         return hasSelectedChild(child);
       }
@@ -216,7 +262,7 @@ const SideMenuPozo = ({ items = [] }) => {
       dispatch(ChangeTotalAmount([]));
       dispatch(ChangeFullFreeProductList([]));
       dispatch(changeFullOfferAppliedProducts([]));
-      dispatch(changeLoyaltyConsumedQuantities({}))
+      dispatch(changeLoyaltyConsumedQuantities({}));
     }
     if (e == `${subDirectory}sales`) {
       dispatch(changeTipAmount(0));
@@ -240,7 +286,7 @@ const SideMenuPozo = ({ items = [] }) => {
       dispatch(ChangeFullFreeProductList([]));
       dispatch(changeFullOfferAppliedProducts([]));
       dispatch(ChangeTotalAmount([]));
-      dispatch(changeLoyaltyConsumedQuantities({}))
+      dispatch(changeLoyaltyConsumedQuantities({}));
     }
     if (e == `${subDirectory}saleslayouts/print-selection`) {
       dispatch(changeSelectedPrintdummyData(true));
@@ -251,7 +297,7 @@ const SideMenuPozo = ({ items = [] }) => {
   const handleMenuClick = (item, parentKeys = [], event, level = 0) => {
     if (item.children) {
       if (openKeys.includes(item.key)) {
-        setOpenKeys(openKeys.filter(k => k !== item.key));
+        setOpenKeys(openKeys.filter((k) => k !== item.key));
         const newPositions = { ...dropdownPosition };
         delete newPositions[item.key];
         setDropdownPosition(newPositions);
@@ -264,7 +310,7 @@ const SideMenuPozo = ({ items = [] }) => {
           newOpenKeys = [];
         } else {
           // Keep only the parent chain, remove siblings
-          newOpenKeys = openKeys.filter(key => {
+          newOpenKeys = openKeys.filter((key) => {
             // Keep if it's in the parent chain
             return parentKeys.includes(key);
           });
@@ -277,50 +323,53 @@ const SideMenuPozo = ({ items = [] }) => {
         if (level === 0) {
           position = {
             top: rect.top,
-            left: collapsed ? rect.right + 1 : 10
+            left: collapsed ? rect.right + 1 : 10,
           };
         } else {
           position = {
             top: rect.top,
-            left: rect.right + 1
+            left: rect.right + 1,
           };
         }
 
-        setDropdownPosition(prev => ({ ...prev, [item.key]: position }));
+        setDropdownPosition((prev) => ({ ...prev, [item.key]: position }));
         setOpenKeys([...newOpenKeys, item.key]);
       }
     } else {
       if (DineinDefault && item.key == `${subDirectory}sales`) {
         navigatefun(`${subDirectory}sales/dine-in`);
         setOpenKeys([]);
-      }
+      } else {
-      else {
         navigatefun(item.key);
         setOpenKeys([]);
-
       }
-
-
-
     }
   };
-  console.log(items, Access, "Employee items")
+  console.log(items, Access, 'Employee items');
   // Filter menu items based on access
   let filteredMenuItems = (items || []).filter(Boolean);
   if (UserType === 'Employee' && Array.isArray(Access) && Access.length > 0) {
     filteredMenuItems = filterMenuItems(filteredMenuItems, Access);
-  } else if (UserType === 'Super Admin User' && Array.isArray(SadminuserAccess) && SadminuserAccess.length > 0) {
+  } else if (
-    filteredMenuItems = filterSadminUserMenuItems(filteredMenuItems, SadminuserAccess);
+    UserType === 'Super Admin User' &&
+    Array.isArray(SadminuserAccess) &&
+    SadminuserAccess.length > 0
+  ) {
+    filteredMenuItems = filterSadminUserMenuItems(
+      filteredMenuItems,
+      SadminuserAccess
+    );
   }
 
   // Capitalize all labels, filter out items without a label
-  const menuItemsWithCapitalizedLabels = capitalizeMenuLabels(filteredMenuItems);
+  const menuItemsWithCapitalizedLabels =
+    capitalizeMenuLabels(filteredMenuItems);
   const bottomKeys = ['Support', 'Settings', 'Download', 'Sign Out'];
-  const bottomMenuItems = menuItemsWithCapitalizedLabels.filter(item =>
+  const bottomMenuItems = menuItemsWithCapitalizedLabels.filter((item) =>
     bottomKeys.includes(item.label)
   );
-  const mainMenuItems = menuItemsWithCapitalizedLabels.filter(item =>
+  const mainMenuItems = menuItemsWithCapitalizedLabels.filter(
-    !bottomKeys.includes(item.label)
+    (item) => !bottomKeys.includes(item.label)
   );
   // Recursive render for menu and submenus
   const renderMenuItems = (items, parentKeys = [], level = 0) => (
@@ -329,26 +378,45 @@ const SideMenuPozo = ({ items = [] }) => {
         <div key={item.key}>
           <div
             className={`${level > 0 ? 'dropdown-submenu-item' : 'menu-item'}${isSelected(item.key) || (level === 0 && hasSelectedChild(item)) ? ' selecteded' : ''}${isOpen(item.key) ? ' open' : ''}${item.children ? ' has-children' : ''}`}
-            onClick={(e) => { e.stopPropagation(); handleMenuClick(item, parentKeys, e, level); }}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleMenuClick(item, parentKeys, e, level);
+            }}
             // style={{ paddingLeft: `${level * 10 + 1}px` }}
           >
-            {item.icon && level === 0 && <span className='menu-icon' style={{
+            {item.icon && level === 0 && (
-              fontSize: collapse ? "1.5rem" : ""
+              <span
-            }}>{item.icon}</span>}
+                className="menu-icon"
-            {!collapse && <span className='menu-label'>{item.label}</span>}
+                style={{
-            {!collapse && <span className='menu-labelDot'>{isDropdownItemSelected(item) ? '●' : ''}</span>}
+                  fontSize: collapse ? '1.5rem' : '',
+                }}
+              >
+                {item.icon}
+              </span>
+            )}
+            {!collapse && <span className="menu-label">{item.label}</span>}
+            {!collapse && (
+              <span className="menu-labelDot">
+                {isDropdownItemSelected(item) ? '●' : ''}
+              </span>
+            )}
             {item.children && !collapse && (
-              <span className='menu-arrow'>
+              <span className="menu-arrow">
-                {level === 0 ? <FaCaretRight size={14} /> : <MdOutlineKeyboardArrowRight />}
+                {level === 0 ? (
+                  <FaCaretRight size={14} />
+                ) : (
+                  <MdOutlineKeyboardArrowRight />
+                )}
               </span>
             )}
           </div>
           {item.children && isOpen(item.key) && !collapse && (
-            <div
+            <div className={`dropdown-submenu${level > 0 ? ' nested' : ''}`}>
-              className={`dropdown-submenu${level > 0 ? ' nested' : ''}`}
+              {renderMenuItems(
-
+                item.children,
-            >
+                [...parentKeys, item.key],
-              {renderMenuItems(item.children, [...parentKeys, item.key], level + 1)}
+                level + 1
+              )}
             </div>
           )}
         </div>
@@ -370,32 +438,45 @@ const SideMenuPozo = ({ items = [] }) => {
   const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
   const isAndroid = /Android/i.test(navigator.userAgent);
 
-
   return (
-    <div className={`SideMenuPozo-Master${collapse ? ' collapsed' : ''}`} ref={menuRef}
+    <div
-      style={{ height: isMobile ? "88%" : "" }}
+      className={`SideMenuPozo-Master${collapse ? ' collapsed' : ''}`}
+      ref={menuRef}
+      style={{ height: isMobile ? '88%' : '' }}
+    >
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '6px',
+          height: '68vh',
+          overflow: 'auto',
+        }}
       >
-      <div style={{
-        width: "100%", display: "flex", flexDirection: "column", gap: "10px",
-        height: "68vh", overflow: "auto"
-      }}>
         <div className="paypreLogoDiv">
-          <div className="shopNameNav" style={{ width: "100%" }}>
+          <div className="shopNameNav" style={{ width: '100%' }}>
-            <div style={{
+            <div
-              display: "flex", flexDirection: "row",
+              style={{
-              alignItems: "center", gap: "4px", padding: "0px 10px", justifyContent: "space-between"
+                display: 'flex',
-            }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '0px 10px',
+                justifyContent: 'space-between',
+              }}
+            >
               <FiMenu
                 size={26}
                 onClick={() => setCollapse((prev) => !prev)}
                 style={{ cursor: 'pointer' }}
               />
-              {collapse ? "" :
+              {collapse ? (
+                ''
+              ) : (
                 // <img src={POZOMIND} alt="PozoMindLogo" width="80px" height={"45px"} className='PozoMindLogo' />
-                <div>
+                <div>PozoApp</div>
-                  PozoApp
+              )}
-                </div>
-              }
             </div>
             {/* <div> */}
             {/* <div>{branchName}</div> */}
@@ -404,7 +485,7 @@ const SideMenuPozo = ({ items = [] }) => {
           </div>
         </div>
         {/* Top Menu using PozoMenu */}
-        <div className='top-menu'>
+        <div className="top-menu">
           <PozoMenu
             items={mainMenuItems}
             mode="vertical"
@@ -413,16 +494,19 @@ const SideMenuPozo = ({ items = [] }) => {
             style={{
               width: collapse ? '60px' : '200px',
               background: 'transparent',
-              boxShadow: 'none'
+              boxShadow: 'none',
             }}
             onClick={handlePozoMenuClick}
           />
         </div>
       </div>
       {/* Bottom Menu using PozoMenu */}
-      <div className='bottom-menu' style={{
+      <div
-        height: isMobile ? "30vh" : ""
+        className="bottom-menu"
-      }}>
+        style={{
+          height: isMobile ? '30vh' : '',
+        }}
+      >
         <PozoMenu
           items={bottomMenuItems}
           mode="vertical"
@@ -432,7 +516,7 @@ const SideMenuPozo = ({ items = [] }) => {
           style={{
             width: collapse ? '60px' : '200px',
             background: 'transparent',
-            boxShadow: 'none'
+            boxShadow: 'none',
           }}
           onClick={handlePozoMenuClick}
         />

src/Pages/DashBoard/RetailDashboard.jsx

@@ -423,8 +423,10 @@ const RetailDashboard = () => {
       EmpId: UserId,
     };
     let response = await dispatch(getEmpAccess(data)).unwrap();
-    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
+    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter((item) =>
-      (item) => ['Add Product', 'Product Receipt', 'Daily Sales', 'Sales'].includes(item.ConfigName)
+      ['Add Product', 'Product Receipt', 'Daily Sales', 'Sales'].includes(
+        item.ConfigName
+      )
     );
     console.log(datas, 'ffsasasf');
     setEmpData(datas);
@@ -1557,12 +1559,19 @@ const RetailDashboard = () => {
             </div>
 
             <div className="dashboardMainCenter">
-              <p style={{ fontSize: '12px', marginBottom: '0.2rem', fontWeight: '500', fontFamily: 'Inter' }}>
+              <div className="todaySnapshotRow">
+                <p
+                  style={{
+                    fontSize: '13px',
+                    marginBottom: '0.2rem',
+                    fontWeight: '500',
+                    fontFamily: 'Inter',
+                  }}
+                >
                   Today's Snapshot
                 </p>
-              <div className="todaySnapshotRow">
                 {selectedBranchForFilter === 'all' ? (
-                  <>
+                  <div className="todaySnapFlex">
                     <Tooltip
                       title={
                         <div
@@ -1662,9 +1671,9 @@ const RetailDashboard = () => {
                         </div>
                       </Tooltip>
                     )}
-                  </>
+                  </div>
                 ) : (
-                  <>
+                  <div>
                     <div className="todaySnapshotBox orders">
                       {ApiData?.[0]?.DineInOrderCount +
                         ApiData?.[0]?.TakeAwayOrderCount +
@@ -1690,27 +1699,29 @@ const RetailDashboard = () => {
                         <div>Pending Bills</div>
                       </div>
                     )}
-                  </>
+                  </div>
                 )}
               </div>
               <div className="quickActionsRow">
                 <div
                   onClick={() => {
                     const hasEmpAccess = EmpData?.find(
-                      item => item.ConfigName === "Add Product" && item.ReadAccess === "Y"
+                      (item) =>
+                        item.ConfigName === 'Add Product' &&
+                        item.ReadAccess === 'Y'
                     );
-                    if (!hasEmpAccess && UserType === "Employee") {
+                    if (!hasEmpAccess && UserType === 'Employee') {
-                      setMessageData("Please contact your admin to get access");
+                      setMessageData('Please contact your admin to get access');
                       setMessageType('error');
                     }
                     if (isCheckSportsApp) {
                       navigate(`${subDirectory}setting/products-master/new`);
                     }
                     if (
-                      (UserType === "Employee" && hasEmpAccess) ||
+                      (UserType === 'Employee' && hasEmpAccess) ||
-                      UserType === "Admin" ||
+                      UserType === 'Admin' ||
-                      UserType === "Super Admin" ||
+                      UserType === 'Super Admin' ||
-                      UserType === "Super Admin User"
+                      UserType === 'Super Admin User'
                     ) {
                       navigate(`${subDirectory}setting/product-master/new`);
                     }
@@ -1730,21 +1741,24 @@ const RetailDashboard = () => {
                   <div
                     onClick={() => {
                       const hasEmpAccess = EmpData?.find(
-                        item => item.ConfigName === "Product Receipt" && item.ReadAccess === "Y"
+                        (item) =>
+                          item.ConfigName === 'Product Receipt' &&
+                          item.ReadAccess === 'Y'
+                      );
+                      if (!hasEmpAccess && UserType === 'Employee') {
+                        setMessageData(
+                          'Please contact your admin to get access'
                         );
-                      if (!hasEmpAccess && UserType === "Employee") {
-                        setMessageData("Please contact your admin to get access");
                         setMessageType('error');
                       }
                       if (
-                        (UserType === "Employee" && hasEmpAccess) ||
+                        (UserType === 'Employee' && hasEmpAccess) ||
-                        UserType === "Admin" ||
+                        UserType === 'Admin' ||
-                        UserType === "Super Admin" ||
+                        UserType === 'Super Admin' ||
-                        UserType === "Super Admin User"
+                        UserType === 'Super Admin User'
                       ) {
                         navigate(`${subDirectory}setting/purchase-entry/new`);
                       }
-
                     }}
                     className="quickActionBox"
                   >
@@ -1755,17 +1769,19 @@ const RetailDashboard = () => {
                 <div
                   onClick={() => {
                     const hasEmpAccess = EmpData?.find(
-                      item => item.ConfigName === "Daily Sales" && item.ReadAccess === "Y"
+                      (item) =>
+                        item.ConfigName === 'Daily Sales' &&
+                        item.ReadAccess === 'Y'
                     );
-                    if (!hasEmpAccess && UserType === "Employee") {
+                    if (!hasEmpAccess && UserType === 'Employee') {
-                      setMessageData("Please contact your admin to get access");
+                      setMessageData('Please contact your admin to get access');
                       setMessageType('error');
                     }
                     if (
-                      (UserType === "Employee" && hasEmpAccess) ||
+                      (UserType === 'Employee' && hasEmpAccess) ||
-                      UserType === "Admin" ||
+                      UserType === 'Admin' ||
-                      UserType === "Super Admin" ||
+                      UserType === 'Super Admin' ||
-                      UserType === "Super Admin User"
+                      UserType === 'Super Admin User'
                     ) {
                       navigate(`${subDirectory}report/datewisereport`);
                     }
@@ -1779,17 +1795,18 @@ const RetailDashboard = () => {
                   className="quickActionBox"
                   onClick={() => {
                     const hasEmpAccess = EmpData?.find(
-                      item => item.ConfigName === "Sales" && item.ReadAccess === "Y"
+                      (item) =>
+                        item.ConfigName === 'Sales' && item.ReadAccess === 'Y'
                     );
-                    if (!hasEmpAccess && UserType === "Employee") {
+                    if (!hasEmpAccess && UserType === 'Employee') {
-                      setMessageData("Please contact your admin to get access");
+                      setMessageData('Please contact your admin to get access');
                       setMessageType('error');
                     }
                     if (
-                      (UserType === "Employee" && hasEmpAccess) ||
+                      (UserType === 'Employee' && hasEmpAccess) ||
-                      UserType === "Admin" ||
+                      UserType === 'Admin' ||
-                      UserType === "Super Admin" ||
+                      UserType === 'Super Admin' ||
-                      UserType === "Super Admin User"
+                      UserType === 'Super Admin User'
                     ) {
                       navigate(`${subDirectory}sales`);
                     }
@@ -2032,8 +2049,10 @@ const RetailDashboard = () => {
                         </Tooltip>
                       ) : (
                         <div>
-                           <p>{AllProdIds?.[0]?.TotalProductCount ||
+                          <p>
-                            AllProdIds?.length}</p>
+                            {AllProdIds?.[0]?.TotalProductCount ||
+                              AllProdIds?.length}
+                          </p>
                           <div>TOTAL PRODUCTS</div>
                         </div>
                       )}
@@ -2184,7 +2203,18 @@ const RetailDashboard = () => {
                       Low Stock count {lowStockList?.length}
                     </div>
                   )}
-                  {/* <div className="notificationViewAll">View All</div> */}
+
+                  {!expiredList?.length && !lowStockList?.length && (
+                    <div
+                      style={{
+                        fontSize: '12px',
+                        width: '100%',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Notification Empty
+                    </div>
+                  )}
                 </div>
               </div>
             )}
@@ -2384,7 +2414,7 @@ const RetailDashboard = () => {
                         </div>
                       ))
                     ) : (
-                      <div style={{ textAlign: 'center' }}>
+                      <div style={{ textAlign: 'center', fontSize: '12px' }}>
                         No Low Stock Product
                       </div>
                     )}

src/Pages/Dining/DiningList.jsx

@@ -183,7 +183,7 @@ const DiningList = () => {
       title: 'Table Name',
       dataIndex: 'TableName',
       key: 'TableName',
-      width: '150px',
+      width: '120px',
       render: (text) => <a style={{ color: 'black' }}>{text}</a>,
       filteredValue: [searchedText],
       onFilter: (value, record) => {
@@ -213,7 +213,7 @@ const DiningList = () => {
       title: 'Chair Count',
       dataIndex: 'ChairCount',
       key: 'ChairCount',
-      width: '100px',
+      width: 120,
       align: 'right',
       render: (text) => <a style={{ color: 'black' }}>{text}</a>,
       filteredValue: filteredInfo.ChairCount || null,
@@ -234,7 +234,8 @@ const DiningList = () => {
       sortOrder:
         sortedInfo.columnKey === 'DineInTypeName' ? sortedInfo.order : null,
       ellipsis: true,
-      align: "center"
+      align: 'center',
+      width: 120,
     },
     {
       title: 'Chair Level Serve',
@@ -247,7 +248,8 @@ const DiningList = () => {
       sortOrder:
         sortedInfo.columnKey === 'ChairLevelSer' ? sortedInfo.order : null,
       ellipsis: true,
-      align: "center", 
+      align: 'center',
+      width: 160,
     },
     {
       title: 'Chair Name',

src/Pages/Reports/MenuQRCode/MenuQRCode.jsx

@@ -380,7 +380,7 @@ const MenuQRCode = () => {
               style={{
                 width: 420,
                 margin: '0 auto',
-                padding: 24,
+                padding: 16,
                 background: '#fff',
                 borderRadius: 12,
                 boxShadow: '0 6px 18px rgba(0,0,0,0.08)',
@@ -392,7 +392,7 @@ const MenuQRCode = () => {
               <h3
                 style={{
                   fontSize: 16,
-                  marginBottom: 12,
+                  marginBottom: 0,
                   fontWeight: 500,
                   fontFamily: 'Poppins',
                 }}

src/Pages/Reports/PublicQrCode.jsx

@@ -10,6 +10,7 @@ import {
 } from '../../Features/ConfigMasterPage/ConfigMasterPage';
 import Buttons from '../../Components/Forms/Buttons';
 import { PlusOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
+import { MdClear } from 'react-icons/md';
 import { getDineinTableData } from '../../Features/Dinein/Dinein';
 import { encryptObject, getSession } from '../../Services/Others';
 import QRCode from 'react-qr-code';
@@ -396,22 +397,73 @@ const PublicQrCode = () => {
 
       // Add content to the temporary div
       tempDiv.innerHTML = `
-                <div style="margin-bottom: 10px; border-bottom: 2px solid #eee; padding-bottom: 10px;">
+<div style=" 
-                    ${companyLogo ? `<div style="margin-bottom: 10px;"><img id="company-logo" src="${companyLogo}" style="max-width: 120px; max-height: 80px; object-fit: contain;" crossorigin="anonymous" /></div>` : ''}
+    margin: auto;
-                    <h1 style="color: #333; margin: 10px 0; font-size: 24px; font-weight: bold;">${branchName ? branchName : ''}</h1>
+    font-family: 'Arial', sans-serif;
-                    <p style="color: #666; margin: 5px 0; font-size: 14px;">${branchAddress ? branchAddress : ''}</p>
+    background: linear-gradient(180deg, #f9fbff, #eef4ff);
-                    <p style="color: #666; margin: 5px 0; font-size: 14px;"><strong>Mobile:</strong> ${branchMobile ? branchMobile : ''}</p>
+    border-radius: 16px;
-                </div>
+    padding: 12px;
-                <div style="margin-bottom: 30px;">
+    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
-                    <h2 style="color: #666; margin-bottom: 20px; font-size: 20px;">Self Booking QR Code</h2>
+    text-align: center;
-                </div>
+">
-                <div style="margin-bottom: 30px;">
+
-                    <div style="display: inline-block; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+    ${
+      companyLogo
+        ? `
+    <div style="margin-bottom: 12px;">
+        <img id="company-logo"
+            src="${companyLogo}"
+            style="max-width: 140px; max-height: 90px; object-fit: contain;"
+            crossorigin="anonymous" />
+    </div>`
+        : ''
+    }
+
+    <h1 style="
+        color: #2b2b2b;
+        font-size: 22px;
+        margin: 6px 0;
+        font-weight: bold;
+    ">
+        ${branchName || ''}
+    </h1>
+
+    <p style="color:#555; font-size:13px; margin:4px 0;">
+        ${branchAddress || ''}
+    </p>
+
+    <p style="color:#333; font-size:14px; margin:6px 0;">
+      <strong>${branchMobile || ''}</strong>
+    </p>
+
+    <hr style="margin:18px 0; border:none; border-top:2px dashed #d6e0ff;" />
+
+    <h2 style="
+        color:#4a6cff;
+        font-size:18px;
+        margin-bottom:14px;
+    ">
+        Scan & Book Easily 
+    </h2>
+
+    <div style="
+        display:inline-block;
+        padding:18px;
+        background:#ffffff;
+        border-radius:14px;
+        box-shadow:0 4px 12px rgba(0,0,0,0.15);
+    ">
         <div id="qr-code-container"></div>
     </div>
-                </div>
+
-                <div style="margin-top: 20px;">
+    <p style="
-                    <p style="font-size: 12px; color: #666; word-break: break-all;">URL: ${encrypted}</p>
+        margin-top:14px;
+        font-size:12px;
+        color:#777;
+        word-break:break-all;
+    ">
+        🔗 ${encrypted}
+    </p>
 </div>
 `;
 
@@ -710,7 +762,7 @@ const PublicQrCode = () => {
               {qrCodeUrl && (
                 <>
                   {!sportsAppPreference && (
-                    <div className="productMaster-input">
+                    <div className="productMaster-input clearGenQRCode">
                       <Buttons
                         buttonText="Clear"
                         className="secondary_Button"
@@ -724,6 +776,7 @@ const PublicQrCode = () => {
                           setPdfPreviewUrl('');
                           setIsPreviewModalOpen(false);
                         }}
+                        icon={<MdClear size={17} />}
                       >
                         CLEAR
                       </Buttons>
@@ -742,7 +795,7 @@ const PublicQrCode = () => {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
-                padding: '20px',
+                padding: '10px',
                 backgroundColor: '#f9f9f9',
                 borderRadius: '8px',
                 margin: '8px 0',
@@ -750,7 +803,7 @@ const PublicQrCode = () => {
             >
               <h3
                 style={{
-                  marginBottom: '20px',
+                  marginBottom: '16px',
                   color: '#333',
                   fontFamily: 'Poppins',
                   fontWeight: '500',

src/Pages/StockinHand/stockinhand.scss

@@ -86,13 +86,6 @@
     font-size: 12px;
     font-weight: 500;
     font-family: 'Poppins';
-
-    // .no-data {
-    //     text-align: center;
-    //     padding: 20px;
-    //     font-weight: 500;
-    //     color: #888;
-    // }
   }
 
   .product-table-stockinHand th {

src/Styles/DashBoard/RetailDashBoard.scss

@@ -1061,7 +1061,7 @@
     flex-direction: column;
     align-items: center;
     background-color: #fff;
-    border-radius: 12px;
+    border-radius: 8px;
     padding: 6px;
     border: 2px solid #eeeeee;
   }
@@ -1124,7 +1124,7 @@
     }
 
     @media (max-width: 768px) {
-      width: 100%;
+      width: 100% !important;
     }
   }
 
@@ -1600,6 +1600,9 @@
 .dashboardMainRight {
   flex: 0.8;
   min-width: 260px;
+  background-color: #fff;
+  padding: 12px;
+  border-radius: 8px;
 }
 
 .chartCard {
@@ -1689,12 +1692,19 @@
   gap: 0;
   margin-bottom: 1rem;
   background-color: #ffffff;
-  border-radius: 10px;
+  border-radius: 8px;
+  flex-direction: column;
+  padding: 12px;
 }
 
+.todaySnapFlex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .todaySnapshotBox {
   flex: 1;
-  padding: 16px 2px;
+  padding: 10px 2px;
   text-align: center;
   font-weight: 600;
   -webkit-text-stroke-width: 0.2px;
@@ -1735,13 +1745,13 @@
   gap: 10px;
   margin-bottom: 1rem;
   background-color: #fff;
-  border-radius: 10px;
+  border-radius: 8px;
   padding: 10px;
 }
 
 .quickActionBox {
   flex: 1;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #e0e6ed;
   padding: 0.5;
   text-align: center;
@@ -1800,9 +1810,9 @@
 .salesBreakdownBox {
   flex: 1;
   background: #fff;
-  border-radius: 12px;
+  border-radius: 8px;
-  box-shadow: 0 2px 8px #e0e6ed;
+  box-shadow: 0 1px 2px #e0e6ed;
-  padding: 0.9rem;
+  padding: 12px;
   text-align: center;
   color: #686868;
   font-size: 0.85rem;
@@ -1823,9 +1833,6 @@
 
 .productSummaryCard {
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px #e0e6ed;
-  padding: 0px;
   margin-bottom: 0.5rem;
 }
 
@@ -1833,7 +1840,7 @@
   color: #000000;
   font-weight: 600;
   margin-bottom: 0.3rem;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -1843,7 +1850,7 @@
   gap: 0.5rem;
   flex-wrap: wrap;
   border-radius: 6px;
-  padding: 7px;
+  padding-top: 7px;
 }
 
 .productSummaryBox {
@@ -1871,22 +1878,6 @@
   }
 }
 
-// .productSummaryBox.live {
-//   background: linear-gradient(90deg, #e3fcec, #e3fcec);
-// }
-
-// .productSummaryBox.low {
-//   background: linear-gradient(90deg, #fffbe3, #fffbe3);
-// }
-
-// .productSummaryBox.nostock {
-//   background: linear-gradient(90deg, #ffe3e3, #ffe3e3);
-
-//   div {
-//     color: #e53935;
-//     font-weight: 600;
-//   }
-// }
  
 .lastbillcount {
   width: 99%;
@@ -1902,19 +1893,20 @@
 .notificationCenterCard {
   background: #fff;
   border-radius: 12px;
-  box-shadow: 0 2px 8px #e0e6ed;
   padding: 1rem;
   position: relative;
-  height: 14vh;
+  height: max-content;
+  max-height: 14vh;
   overflow: scroll;
   border: 1px solid #eeeeee;
 }
 
 .notificationCenterTitle {
-  color: #2a2a2a;
+  color: #333;
-  font-weight: 600;
+  font-weight: 500;
+  font-family: 'Poppins';
   margin-bottom: 0.5rem;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .notificationStock {
@@ -1941,7 +1933,7 @@
 .preOrderSummaryCardMain {
   display: flex;
   align-items: flex-start;
-  gap: 3px;
+  gap: 8px;
   width: 60%;
   flex-wrap: wrap;
 
@@ -1969,7 +1961,7 @@
   // flex: 1;
   width: 38%;
   background: #fff;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: 0 2px 8px #e0e6ed;
   padding: 0 1rem 1rem 1rem;
   position: relative;
@@ -2059,28 +2051,26 @@
 .preOrderSummaryCard {
   flex: 0.7;
   min-width: 220px;
-  border-radius: 12px;
+  border-radius: 8px;
+  background-color: #fff;
+  padding: 12px;
 }
 
 .preOrderSummaryTitle {
   font-weight: 500;
   margin-bottom: 0.2rem;
-  font-size: 12px;
+  font-size: 13px;
   color: #2a2a2a;
 }
 
 .preOrderSummaryRow {
-  padding: 10px;
   height: 16vh;
   display: flex;
   gap: 0.5rem;
-  box-shadow: 0 2px 8px #e0e6ed;
-  background: #fff;
   margin-bottom: 0.5rem;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  border: 1px solid #eeeeee;
 }
 
 .preOrderSummaryBox {
@@ -2115,9 +2105,12 @@
 
 .creditListCardMain {
   min-width: 220px;
-  height: 23vh;
+  height: 25.5vh;
   flex: 0.7;
   overflow: scroll;
+  border-radius: 8px;
+  background-color: #fff;
+  padding: 8px;
 
   @media (max-width: 768px) {
     width: 100%;
@@ -2125,8 +2118,6 @@
 }
 
 .creditListCard {
-  padding: 1rem;
-  box-shadow: 0 2px 8px #e0e6ed;
   position: relative;
   background: #fff;
   min-width: 220px;
@@ -2134,14 +2125,12 @@
   height: 16vh;
   overflow: auto;
   scrollbar-width: thin;
-  padding-top: 0px;
-  border: 1px solid #eeeeee;
 }
 
 .creditListTitle {
   font-weight: 500;
   margin-bottom: 0.2rem;
-  font-size: 12px;
+  font-size: 13px;
   color: #2a2a2a;
 }
 
@@ -2181,9 +2170,9 @@
 
 .stockAlertsCard {
   background: #ffffff;
-  border-radius: 10px;
+  border-radius: 8px;
   box-shadow: none;
-  padding: 1rem 1rem 0.5rem 1rem;
+  padding: 12px;
   min-width: 320px;
   position: relative;
   flex: 1;
@@ -2197,6 +2186,8 @@
   position: sticky;
   top: -15px;
   background-color: #fff;
+  font-size: 13px;
+  font-weight: 500;
 }
 
 .stockAlertsHeaderRow {
@@ -2217,7 +2208,7 @@
   color: #222;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 4px;
-  margin-bottom: 2px;
+  margin-bottom: 6px;
 }
 
 .stockAlertsRow {

src/routesConfig.jsx

@@ -267,7 +267,7 @@ const fetchComponent = async () => {
     sessionStore('userName', 'Karthiga');
     sessionStorage.setItem(
       'auth',
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzY5NTQwNDg2LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.dk6WOA7_jjKUv94Ni9RjMxHGgZRdpGj2QqXyyQMcFpo'
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6NjUzOTU0IiwiYXVkIjpbImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMyIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMiIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxNCIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMyJdLCJleHAiOjE3Njk2MjY3NTcsImlzcyI6Imh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAwMSJ9.Zm9iKUTOTx780VfHtgXwmdz6aYl_0oRjL5DNqo2T9pI'
     );
 
     const AppId = getSession('AppId');
@@ -372,7 +372,7 @@ const fetchHomeComponent = async () => {
     sessionStore('userName', 'Karthiga');
     sessionStorage.setItem(
       'auth',
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzY5NTQwNDg2LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.dk6WOA7_jjKUv94Ni9RjMxHGgZRdpGj2QqXyyQMcFpo'
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiOTM2MDY0MjI0NCIsIlBhc3N3b3JkIjoiWkB6NjUzOTU0IiwiYXVkIjpbImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMyIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMiIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxNCIsImh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAxMyJdLCJleHAiOjE3Njk2MjY3NTcsImlzcyI6Imh0dHA6Ly8xOTIuMTY4LjEuMzc6ODAwMSJ9.Zm9iKUTOTx780VfHtgXwmdz6aYl_0oRjL5DNqo2T9pI'
     );
     const AppId = getSession('AppId');
     if (AppId) {

vite.config.js

@@ -23,7 +23,7 @@ export default defineConfig(({ command, mode }) => {
       envDir: "src",
       envPrefix: "ENV_",
       server: {
-        host: "192.168.1.22",
+        host: "192.168.1.50",
         port: process.env.PORT || 3015,
       },
       optimizeDeps: {