live updates and file organization

frontend/src/components/common/MaintenancePage.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Typography, Button, CircularProgress } from '@mui/material';
+
+const MaintenancePage = ({ onRetry, checking }) => {
+  return (
+    <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default', p: 3 }}>
+      <Box sx={{ maxWidth: 640, textAlign: 'center' }}>
+        <Typography variant="h4" sx={{ mb: 2, fontWeight: 'bold' }}>EhChadServices is currently under maintenance</Typography>
+        <Typography sx={{ mb: 2 }}>We're checking the service status and will reload automatically when the backend is available. Please check back in a few moments.</Typography>
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, mt: 2 }}>
+          <CircularProgress size={40} />
+          <Typography>{checking ? 'Checking...' : 'Idle'}</Typography>
+        </Box>
+        <Box sx={{ mt: 3 }}>
+          <Button variant="contained" onClick={onRetry}>Retry now</Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default MaintenancePage;