From 9a988e82c42dec240593cc3f62c7d2b5a378bc35 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Mon, 14 Jul 2025 00:53:56 -0400
Subject: [PATCH] Refactor z-index management by introducing Z_INDEX constants
 and updating components to use them for consistent layering

---
 src/components/common/FadeModal.jsx    |  4 +++
 src/constants/zIndex.js                | 35 ++++++++++++++++++++++++++
 src/service/AlertsProvider.jsx         |  3 ++-
 src/views/components/NavBar.jsx        |  7 ++++--
 src/views/components/NetworkBanner.jsx |  3 ++-
 5 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/constants/zIndex.js

diff --git a/src/components/common/FadeModal.jsx b/src/components/common/FadeModal.jsx
index 745cada..88e11de 100644
--- a/src/components/common/FadeModal.jsx
+++ b/src/components/common/FadeModal.jsx
@@ -1,4 +1,5 @@
 import { Modal, ModalDialog, ModalOverflow } from '@mui/joy'
+import Z_INDEX from '../../constants/zIndex'
 
 /**
  * FadeModal component with consistent fade-in/out animations
@@ -18,8 +19,10 @@ const FadeModal = ({
       open={open}
       onClose={onClose}
       sx={{
+        zIndex: Z_INDEX.MODAL_BACKDROP,
         '& .MuiModal-backdrop': {
           backdropFilter: backdropBlur ? 'blur(3px)' : 'none',
+          zIndex: Z_INDEX.MODAL_BACKDROP,
         },
       }}
       keepMounted
@@ -39,6 +42,7 @@ const FadeModal = ({
         <ModalDialog
           size={size}
           sx={{
+            zIndex: Z_INDEX.MODAL_CONTENT,
             minWidth: fullWidth ? '100%' : 'auto',
             animation: open
               ? 'modalFadeIn 0.35s forwards'
diff --git a/src/constants/zIndex.js b/src/constants/zIndex.js
new file mode 100644
index 0000000..220c575
--- /dev/null
+++ b/src/constants/zIndex.js
@@ -0,0 +1,35 @@
+// Z-index constants for consistent layering
+// Lower values appear behind higher values
+
+export const Z_INDEX = {
+  // Base layer (0-99)
+  BASE: 0,
+  CARD_OVERLAY: 1,
+  DROPDOWN_ITEM: 2,
+  TOOLTIP: 3,
+
+  // UI Components (100-999)
+  SAFE_AREA: 100,
+  CALENDAR: 110,
+  SMART_INPUT: 110,
+  AUTOCOMPLETE: 200,
+
+  // Navigation (1000-1999)
+  NAVBAR: 1000,
+  DRAWER: 999,
+
+  // Modals and Overlays (2000-8999)
+  MODAL_BACKDROP: 2000,
+  MODAL_CONTENT: 2001,
+  TOAST: 3000,
+
+  // Critical System UI (9000-9999)
+  LOADING_SCREEN: 9000,
+  ALERTS: 9500,
+  NETWORK_BANNER: 9600,
+
+  // Maximum (10000+) - Reserved for absolute emergencies
+  EMERGENCY: 10000,
+}
+
+export default Z_INDEX
diff --git a/src/service/AlertsProvider.jsx b/src/service/AlertsProvider.jsx
index 0815f3d..2be8912 100644
--- a/src/service/AlertsProvider.jsx
+++ b/src/service/AlertsProvider.jsx
@@ -1,6 +1,7 @@
 import { Alert, Box } from '@mui/joy'
 import PropTypes from 'prop-types'
 import { createContext, useCallback, useContext, useState } from 'react'
+import Z_INDEX from '../constants/zIndex'
 
 const FADE_DURATION = 400 // ms
 const ALERT_DURATION = 5000 // ms
@@ -48,7 +49,7 @@ export const AlertsProvider = ({ children }) => {
             top: 0,
             left: 0,
             width: '100%',
-            zIndex: 10000,
+            zIndex: Z_INDEX.ALERTS,
             overflow: 'hidden',
           }}
         >
diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx
index a1fd787..bd8bb2e 100644
--- a/src/views/components/NavBar.jsx
+++ b/src/views/components/NavBar.jsx
@@ -22,6 +22,7 @@ import {
   ListItemDecorator,
   Typography,
 } from '@mui/joy'
+
 import { useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { version } from '../../../package.json'
@@ -81,6 +82,8 @@ const links = [
   },
 ]
 
+import Z_INDEX from '../../constants/zIndex'
+
 const NavBar = () => {
   const navigate = useNavigate()
   const [drawerOpen, setDrawerOpen] = useState(false)
@@ -110,7 +113,7 @@ const NavBar = () => {
       style={{
         paddingTop: `calc( env(safe-area-inset-top, 0px))`,
         position: 'sticky',
-        zIndex: 10000,
+        zIndex: Z_INDEX.NAVBAR,
         top: 0,
         minHeight: '45px',
         backgroundColor: 'var(--joy-palette-background-body)',
@@ -164,7 +167,7 @@ const NavBar = () => {
             height:
               'calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))',
             overflow: 'auto',
-            zIndex: 999,
+            zIndex: Z_INDEX.DRAWER,
           },
         }}
       >
diff --git a/src/views/components/NetworkBanner.jsx b/src/views/components/NetworkBanner.jsx
index 50c9806..ca22991 100644
--- a/src/views/components/NetworkBanner.jsx
+++ b/src/views/components/NetworkBanner.jsx
@@ -1,6 +1,7 @@
 import { WifiOff } from '@mui/icons-material'
 import { Alert, Box } from '@mui/joy'
 import { useEffect, useState } from 'react'
+import Z_INDEX from '../../constants/zIndex'
 import { networkManager } from '../../hooks/NetworkManager'
 
 const NetworkBanner = () => {
@@ -23,7 +24,7 @@ const NetworkBanner = () => {
             position: 'fixed',
             top: 0,
             left: 0,
-            zIndex: 10001,
+            zIndex: Z_INDEX.NETWORK_BANNER,
             padding: '4px',
             pt: `calc( env(safe-area-inset-top, 0px))`,
             width: '100%',