fendi-react-app/src/App.jsx

72 lines
2.3 KiB
JavaScript

import { useState } from 'react'
import './App.css'
import AppHeader from './components/AppHeader';
import Footer from './components/Footer';
import Box from '@mui/material/Box';
import Products from './private/products/Products';
import Clients from './private/clients/Clients';
import Providers from './private/providers/Providers';
import Categories from './private/categories/Categories';
import Admin from './private/mongo/Admin';
import Dashboard from './private/dashboard/Dashboard';
import LoginPage from './private/LoginPage';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
function PrivateRoute({ children }) {
const { user } = useAuth();
return user ? children : <Navigate to="/login" replace />;
}
function App() {
const [zone, setZone] = useState('public'); // public | restricted | private
const [currentView, setCurrentView] = useState('Dashboard');
return (
<>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
minHeight: '100vh', // full height of the viewport
}}
>
<AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
<Box sx={{ height: 64 }} />
<Box component="main" sx={{ flex: 1, p: 2 }}>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route
path="/"
element={
<PrivateRoute>
{zone === 'private' && <Clients />}
{zone === 'restricted' && <Clients />}
{zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
{zone === 'public' && currentView === 'Products' && <Products />}
{zone === 'public' && currentView === 'Clients' && <Clients />}
{zone === 'public' && currentView === 'Providers' && <Providers />}
{zone === 'public' && currentView === 'Categories' && <Categories />}
{zone === 'public' && currentView === 'Admin' && <Admin />}
</PrivateRoute>
}
/>
</Routes>
</Box>
<Box sx={{ height: 64 }} />
<Footer zone={zone} />
</Box>
</>
)
}
export default App