updated the ui

src/components/nearle_components/PageHeader.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import { Box, Stack, Typography } from '@mui/material';
+
+// ==============================|| PAGE HEADER (Doormile-style clean title) ||============================== //
+// A plain, un-boxed page title + optional live subtitle + an action slot
+// (zone selector, primary button, etc.). Replaces the heavy boxed/gradient
+// header so every operator page opens with a calm, corporate heading.
+
+export default function PageHeader({ title, subtitle, live = false, action }) {
+  return (
+    <Stack
+      direction={{ xs: 'column', sm: 'row' }}
+      justifyContent="space-between"
+      alignItems={{ xs: 'flex-start', sm: 'center' }}
+      spacing={1.5}
+      sx={{ mb: { xs: 2, md: 2.5 } }}
+    >
+      <Box sx={{ minWidth: 0 }}>
+        <Typography variant="h3" sx={{ fontWeight: 700, letterSpacing: '-0.02em', color: 'grey.800' }}>
+          {title}
+        </Typography>
+        {subtitle && (
+          <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
+            {live && (
+              <Box
+                sx={{
+                  width: 7,
+                  height: 7,
+                  borderRadius: '50%',
+                  bgcolor: 'success.main',
+                  boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
+                }}
+              />
+            )}
+            <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
+              {subtitle}
+            </Typography>
+          </Stack>
+        )}
+      </Box>
+      {action && <Box sx={{ flexShrink: 0, width: { xs: '100%', sm: 'auto' } }}>{action}</Box>}
+    </Stack>
+  );
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.node,
+  subtitle: PropTypes.node,
+  live: PropTypes.bool,
+  action: PropTypes.node
+};