import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import {
Box,
CssBaseline,
Toolbar,
useMediaQuery,
ThemeProvider,
createTheme
} from '@mui/material';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import DashboardPage from './pages/DashboardPage';
import OrdersPage from './pages/OrdersPage';
import ShipmentsPage from './pages/ShipmentsPage';
import InventoryPage from './pages/InventoryPage';
import TrackingPage from './pages/TrackingPage';
import ReturnsPage from './pages/ReturnsPage';
import SettingsPage from './pages/SettingsPage';
import LoginPage from './pages/LoginPage';
import authService from './services/auth';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
});
const App: React.FC = () => {
const [mobileOpen, setMobileOpen] = useState(false);
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isAuthenticated = authService.isAuthenticated();
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
useEffect(() => {
authService.initializeAuth();
}, []);
if (!isAuthenticated && window.location.pathname !== '/login') {
return <Navigate to="/login" />;
}
return (
<ThemeProvider theme={theme}>
<Router>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<Header />
{isAuthenticated && (
<Sidebar
mobileOpen={mobileOpen}
handleDrawerToggle={handleDrawerToggle}
/>
)}
<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${isMobile ? 0 : 240}px)` },
}}
>
<Toolbar />
<Routes>
<Route path="/login" element={<LoginPage />} />
{isAuthenticated ? (
<>
<Route path="/" element={<DashboardPage />} />
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="/orders" element={<OrdersPage />} />
<Route path="/shipments" element={<ShipmentsPage />} />
<Route path="/inventory" element={<InventoryPage />} />
<Route path="/tracking" element={<TrackingPage />} />
<Route path="/returns" element={<ReturnsPage />} />
<Route path="/settings" element={<SettingsPage />} />
</>
) : (
<Route path="*" element={<Navigate to="/login" />} />
)}
</Routes>
</Box>
</Box>
</Router>
</ThemeProvider>
);
};
export default App;
