kanban-app/frontend/src/App.tsx

import { Routes, Route } from 'react-router-dom'
import { ModalProvider } from './context/modals/useModal'
import { ModalRoot } from './context/modals/ModalRoot'
import { ToastProvider } from './context/toasts/useToast'
import { ToastRoot } from './context/toasts/ToastRoot'
import { LoaderProvider } from './context/loaders/useLoader'
import { LoaderRoot } from './context/loaders/LoaderRoot'
import Cart from './pages/Cart'
import { Navbar } from './components/Navbar'
import { Home } from './pages/Home'
import { Products } from './pages/Products'
import Login from './pages/Login'
import { Register } from './pages/Register'
import { Orders } from './pages/Orders'

const App = () => {
  return (
    <LoaderProvider>
      <ToastProvider>
        <ModalProvider>
          <div className="min-h-screen bg-gray-900 text-gray-100">
            <Navbar />
            <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/products" element={<Products />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="/cart" element={<Cart />} />
                <Route path="/orders" element={<Orders />} />
              </Routes>
            </main>
            {/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */}
            <LoaderRoot />
            <ToastRoot />
            <ModalRoot />
          </div>
        </ModalProvider>
      </ToastProvider>
    </LoaderProvider>
  )
}

export default App