Nicolas Cantu
0b14fbe6b7
- Add fallback data for all API endpoints when backend is unavailable - Implement demo mode with realistic sample data for all views - Add notification to inform users when running in demo mode - Improve error handling with try-catch blocks in API services - Add backend connectivity check in Layout component - Provide seamless user experience even without backend connection
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { AppBar, Toolbar, Typography, Container, Box, Alert, Snackbar } from '@mui/material'
|
|
import { useNavigate, useLocation } from 'react-router-dom'
|
|
import { NavigationTabs } from './NavigationTabs'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const [showDemoAlert, setShowDemoAlert] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Vérifier si le backend est accessible
|
|
const checkBackend = async () => {
|
|
try {
|
|
const response = await fetch('http://localhost:8000/health', {
|
|
method: 'GET',
|
|
signal: AbortSignal.timeout(2000)
|
|
})
|
|
if (!response.ok) {
|
|
setShowDemoAlert(true)
|
|
}
|
|
} catch (error) {
|
|
setShowDemoAlert(true)
|
|
}
|
|
}
|
|
|
|
checkBackend()
|
|
}, [])
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<Typography
|
|
variant="h6"
|
|
component="div"
|
|
sx={{ flexGrow: 1, cursor: 'pointer' }}
|
|
onClick={() => navigate('/')}
|
|
>
|
|
4NK IA - Front Notarial
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<NavigationTabs currentPath={location.pathname} />
|
|
|
|
<Container maxWidth="xl" sx={{ mt: 3, mb: 3 }}>
|
|
{children}
|
|
</Container>
|
|
|
|
<Snackbar
|
|
open={showDemoAlert}
|
|
autoHideDuration={6000}
|
|
onClose={() => setShowDemoAlert(false)}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
|
>
|
|
<Alert
|
|
onClose={() => setShowDemoAlert(false)}
|
|
severity="info"
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Mode démonstration activé - Backend non accessible
|
|
</Alert>
|
|
</Snackbar>
|
|
</Box>
|
|
)
|
|
}
|