Refactor z-index management by introducing Z_INDEX constants and updating components to use them for consistent layering

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'

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

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',
           }}
         >

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,
           },
         }}
       >

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%',