costco-grocery-list/frontend/src/App.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ROLES } from "./constants/roles";
import { AuthProvider } from "./context/AuthContext.jsx";

import AdminPanel from "./pages/AdminPanel.jsx";
import GroceryList from "./pages/GroceryList.jsx";
import Login from "./pages/Login.jsx";
import Register from "./pages/Register.jsx";

import AppLayout from "./components/AppLayout.jsx";
import PrivateRoute from "./utils/PrivateRoute.jsx";

import RoleGuard from "./utils/RoleGuard.jsx";


function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>

          {/* Public route */}
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />

          {/* Private routes with layout */}
          <Route
            element={
              <PrivateRoute>
                <AppLayout />
              </PrivateRoute>
            }
          >
            <Route path="/" element={<GroceryList />} />

            <Route
              path="/admin"
              element={
                <RoleGuard allowed={[ROLES.ADMIN]}>
                  <AdminPanel />
                </RoleGuard>
              }
            />
          </Route>

        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;