Initial Release

package.json

@@ -27,9 +27,13 @@
     "@nivo/line": "^0.84.0",
     "@nivo/pie": "^0.84.0",
     "@nivo/stream": "^0.84.0",
+    "apexcharts": "^4.7.0",
     "formik": "^2.4.5",
+    "plotly.js": "^3.0.1",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.7.0",
     "react-dom": "^18.2.0",
+    "react-plotly.js": "^2.6.0",
     "react-pro-sidebar": "^1.1.0",
     "react-router-dom": "^6.22.1",
     "yup": "^1.3.3"

src/App.jsx

@@ -1,7 +1,7 @@
 import React, { createContext, useState } from "react";
-import { Box, CssBaseline, ThemeProvider } from "@mui/material";
+import { Box, CssBaseline, ThemeProvider, Container } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
-import { Navbar, SideBar } from "./scenes";
+import { Navbar } from "./scenes";
 import { Outlet } from "react-router-dom";
 
 export const ToggledContext = createContext(null);
@@ -10,14 +10,13 @@ function App() {
   const [theme, colorMode] = useMode();
   const [toggled, setToggled] = useState(false);
   const values = { toggled, setToggled };
-  
+
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <ToggledContext.Provider value={values}>
-          <Box sx={{ display: "flex", height: "100vh", maxWidth: "100%" }}>
-            <SideBar />
+          {/* <Box sx={{ display: "flex", height: "100vh", maxWidth: "100%" }}>
             <Box
               sx={{
                 flexGrow: 1,
@@ -32,6 +31,28 @@ function App() {
                 <Outlet />
               </Box>
             </Box>
+          </Box> */}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              minHeight: "100vh",
+            }}
+          >
+            <Navbar />
+            <Container
+              maxWidth="xl"
+              sx={{
+                flex: 1,
+                py: 2, 
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Box sx={{ flex: 1 }}>
+                <Outlet />
+              </Box>
+            </Container>
           </Box>
         </ToggledContext.Provider>
       </ThemeProvider>

src/Router.jsx

@@ -3,17 +3,6 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import App from "./App";
 import {
   Dashboard,
-  Team,
-  Invoices,
-  Contacts,
-  Form,
-  Bar,
-  Line,
-  Pie,
-  FAQ,
-  Geography,
-  Calendar,
-  Stream,
 } from "./scenes";
 
 const AppRouter = () => {
@@ -22,17 +11,6 @@ const AppRouter = () => {
       <Routes>
         <Route path="/" element={<App />}>
           <Route path="/" element={<Dashboard />} />
-          <Route path="/team" element={<Team />} />
-          <Route path="/contacts" element={<Contacts />} />
-          <Route path="/invoices" element={<Invoices />} />
-          <Route path="/form" element={<Form />} />
-          <Route path="/calendar" element={<Calendar />} />
-          <Route path="/bar" element={<Bar />} />
-          <Route path="/pie" element={<Pie />} />
-          <Route path="/stream" element={<Stream />} />
-          <Route path="/line" element={<Line />} />
-          <Route path="/faq" element={<FAQ />} />
-          <Route path="/geography" element={<Geography />} />
         </Route>
       </Routes>
     </Router>