Layout, Pages, Dashboard, MUI

frontend_reactjs/src/App.tsx

@@ -1,22 +1,31 @@
-import { BrowserRouter as Router, Routes,Route} from "react-router-dom"
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
+import Main from "./pages/Main"
 import Users from "./pages/Users"
 import Roles from "./pages/Roles"
-import Main from "./pages/Main"
 import NotFound from "./pages/NotFound"
-import Navigate from "./components/Navigate"
+import DashboardLayout from "./layouts/DashboardLayout"
+import MainLayout from "./layouts/MainLayout"
+import SignIn from "./pages/auth/SignIn"
+import ApiTest from "./pages/ApiTest"
 
 function App() {
   return (
     <>
-    <Navigate />
-    <Router>
-      <Routes>
-        <Route index  path="/" element={ <Main />} />
-        <Route path="/user" element={ <Users />} />
-        <Route path="/role" element={ <Roles />} />
-        <Route path="*" element={<NotFound />}/>
-      </Routes>
-    </Router>
+      <Router>
+        <Routes>
+          <Route element={<MainLayout/>}>
+            <Route path="/auth/signin" element={<SignIn/>}/>
+          </Route>
+
+          <Route element={<DashboardLayout />}>
+            <Route path="/" element={<Main />} />
+            <Route path="/user" element={<Users />} />
+            <Route path="/role" element={<Roles />} />
+            <Route path="/api-test" element={<ApiTest />} />
+            <Route path="*" element={<NotFound />} />
+          </Route>
+        </Routes>
+      </Router>
     </>
   )
 }