Merge branch 'main' of https://github.com/Newspaper-Advertisement-Ana…

…lyzer/client

src/App.js

@@ -38,6 +38,7 @@ import themeDark from "assets/theme-dark";
 
 // Material Dashboard 2 React routes
 import routes from "routes";
+import adminRoutes from "adminroutes";
 
 // Material Dashboard 2 React contexts
 import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context";
@@ -47,6 +48,7 @@ import brandWhite from "assets/images/brand-dark.png";
 import brandDark from "assets/images/brand-light.png";
 import Background from "examples/LayoutContainers/background";
 import bgImage from "layouts/landing/Assets/images/background3.png";
+import { useUser } from "utils/userContext";
 
 export default function App() {
   const [controller, dispatch] = useMaterialUIController();
@@ -63,6 +65,7 @@ export default function App() {
   const [onMouseEnter, setOnMouseEnter] = useState(false);
 
   const { pathname } = useLocation();
+  const { user } = useUser();
 
   // Open sidenav when mouse enter on mini sidenav
   const handleOnMouseEnter = () => {
@@ -137,21 +140,41 @@ export default function App() {
         <CssBaseline />
         {layout === "dashboard" && (
           <>
-            <Sidenav
-              color={sidenavColor}
-              brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-              brandName="Advizor"
-              routes={routes}
-              onMouseEnter={handleOnMouseEnter}
-              onMouseLeave={handleOnMouseLeave}
-            />
-            <Configurator />
-            {configsButton}
+            {user?.role === "user" && (
+              <>
+                <Sidenav
+                  color={sidenavColor}
+                  brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
+                  brandName="Advizor"
+                  routes={routes}
+                  onMouseEnter={handleOnMouseEnter}
+                  onMouseLeave={handleOnMouseLeave}
+                />
+                <Configurator />
+                {configsButton}
+              </>
+            )}
+            {user?.role === "admin" && (
+              <>
+                <Sidenav
+                  color={sidenavColor}
+                  brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
+                  brandName="Advizor"
+                  routes={adminRoutes}
+                  onMouseEnter={handleOnMouseEnter}
+                  onMouseLeave={handleOnMouseLeave}
+                />
+                <Configurator />
+                {configsButton}
+              </>
+            )}
           </>
         )}
         {layout === "vr" && <Configurator />}
+
         <Routes>
           {getRoutes(routes)}
+          {getRoutes(adminRoutes)}
           <Route path="*" element={<Navigate to="/dashboard" />} />
         </Routes>
       </Background>

src/adminroutes.js

@@ -0,0 +1,201 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+/** 
+  All of the routes for the Material Dashboard 2 React are added here,
+  You can add a new route, customize the routes and delete the routes here.
+
+  Once you add a new route on this file it will be visible automatically on
+  the Sidenav.
+
+  For adding a new route you can follow the existing routes in the routes array.
+  1. The `type` key with the `collapse` value is used for a route.
+  2. The `type` key with the `title` value is used for a title inside the Sidenav. 
+  3. The `type` key with the `divider` value is used for a divider between Sidenav items.
+  4. The `name` key is used for the name of the route on the Sidenav.
+  5. The `key` key is used for the key of the route (It will help you with the key prop inside a loop).
+  6. The `icon` key is used for the icon of the route on the Sidenav, you have to add a node.
+  7. The `collapse` key is used for making a collapsible item on the Sidenav that has other routes
+  inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key.
+  8. The `route` key is used to store the route location which is used for the react router.
+  9. The `href` key is used to store the external links location.
+  10. The `title` key is only for the item with the type of `title` and its used for the title text on the Sidenav.
+  10. The `component` key is used to store the component of its route.
+*/
+
+// Material Dashboard 2 React layouts
+import Dashboard from "layouts/dashboard";
+
+import Billing from "layouts/billing";
+import Notifications from "layouts/notifications";
+import Profile from "layouts/profile";
+import SignIn from "layouts/authentication/sign-in";
+import SignUp from "layouts/authentication/sign-up";
+
+import TBH from "layouts/TBI/tbi";
+
+// @mui icons
+import Icon from "@mui/material/Icon";
+
+import AdvertisementDetail from "layouts/advertisement";
+
+import GraphReport from "layouts/reports/graphs";
+import App from "layouts/landing/App";
+// import PrivateRoute from "utils/privateRoutes";
+import { useUser } from "utils/userContext";
+import PropTypes from "prop-types";
+
+// ...
+
+// Create a wrapper component for the Dashboard
+const Wrapper = ({ component: Component }) => {
+  const { isAuthenticated } = useUser();
+
+  if (isAuthenticated) {
+    return <Component />;
+  } else {
+    return <SignIn />;
+  }
+};
+
+const adminRoutes = [
+  {
+    type: "title",
+    title: "Admin Panel",
+  },
+  { type: "divider" },
+  {
+    type: "collapse",
+    name: "Dashboard",
+    key: "dashboard",
+    icon: <Icon fontSize="small">dashboard</Icon>,
+    route: "/dashboard",
+    component: <Wrapper component={Dashboard} />,
+  },
+  {
+    type: "collapse",
+    name: "Manage Advertisements",
+    key: "admanage",
+    icon: <Icon fontSize="small">search</Icon>,
+    route: "/manageadvertisements",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "Manage User Accounts",
+    key: "usermanage",
+    icon: <Icon fontSize="small">newspaper</Icon>,
+    route: "/manageuser",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "User Feedback",
+    key: "feedback",
+    icon: <Icon fontSize="small">equalizer</Icon>,
+    route: "/managefeedback",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "Content Approval",
+    key: "content",
+    icon: <Icon fontSize="small">map</Icon>,
+    route: "/managecontent",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "Configure Graphs",
+    key: "configGraph",
+    icon: <Icon fontSize="small">report</Icon>,
+    route: "/managegraphs",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "Reports",
+    key: "reportsview",
+    icon: <Icon fontSize="small">report</Icon>,
+    route: "/managereports",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "User Support",
+    key: "support",
+    icon: <Icon fontSize="small">table_view</Icon>,
+    route: "/managesupport",
+    component: <Wrapper component={TBH} />,
+  },
+  {
+    type: "collapse",
+    name: "Billing",
+    key: "billing",
+    icon: <Icon fontSize="small">receipt_long</Icon>,
+    route: "/billing",
+    component: <Billing />,
+  },
+  {
+    route: "/advertisement/:id",
+    component: <Wrapper component={AdvertisementDetail} />,
+  },
+  {
+    route: "/landing",
+    component: <App />,
+  },
+  {
+    route: "/reports/:title",
+    component: <Wrapper component={GraphReport} />,
+  },
+  {
+    type: "collapse",
+    name: "Notifications",
+    key: "notifications",
+    icon: <Icon fontSize="small">notifications</Icon>,
+    route: "/notifications",
+    component: <Notifications />,
+  },
+  {
+    type: "collapse",
+    name: "Profile",
+    key: "profile",
+    icon: <Icon fontSize="small">person</Icon>,
+    route: "/profile",
+    component: <Wrapper component={Profile} />,
+  },
+  {
+    type: "collapse",
+    name: "Sign In",
+    key: "sign-in",
+    icon: <Icon fontSize="small">login</Icon>,
+    route: "/authentication/sign-in",
+    component: <SignIn />,
+  },
+  {
+    type: "collapse",
+    name: "Sign Up",
+    key: "sign-up",
+    icon: <Icon fontSize="small">assignment</Icon>,
+    route: "/authentication/sign-up",
+    component: <SignUp />,
+  },
+];
+
+Wrapper.propTypes = {
+  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+};
+
+export default adminRoutes;

src/examples/Navbars/DashboardNavbar/index.js

@@ -51,13 +51,17 @@ import {
   setMiniSidenav,
   setOpenConfigurator,
 } from "context";
+import { useUser } from "utils/userContext";
+import MDTypography from "components/MDTypography";
 
 function DashboardNavbar({ absolute, light, isMini }) {
   const [navbarType, setNavbarType] = useState();
   const [controller, dispatch] = useMaterialUIController();
   const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
   const [openMenu, setOpenMenu] = useState(false);
+  const { user } = useUser();
   const route = useLocation().pathname.split("/").slice(1);
+  const { logout } = useUser();
 
   useEffect(() => {
     // Setting the navbar type
@@ -87,7 +91,7 @@ function DashboardNavbar({ absolute, light, isMini }) {
 
   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
   const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
-  const handleOpenMenu = (event) => setOpenMenu(event.currentTarget);
+  const handleLogOut = () => logout();
   const handleCloseMenu = () => setOpenMenu(false);
 
   // Render the notifications menu
@@ -131,6 +135,9 @@ function DashboardNavbar({ absolute, light, isMini }) {
       <Toolbar sx={(theme) => navbarContainer(theme)}>
         <MDBox color="inherit" mb={{ xs: 1, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
           <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+          <MDTypography variant="h6" fontWeight="medium">
+            Welcome {user?.name}
+          </MDTypography>
         </MDBox>
         {isMini ? null : (
           <MDBox sx={(theme) => navbarRow(theme, { isMini })}>
@@ -165,12 +172,10 @@ function DashboardNavbar({ absolute, light, isMini }) {
                 disableRipple
                 color="inherit"
                 sx={navbarIconButton}
-                aria-controls="notification-menu"
-                aria-haspopup="true"
                 variant="contained"
-                onClick={handleOpenMenu}
+                onClick={handleLogOut}
               >
-                <Icon sx={iconsStyle}>notifications</Icon>
+                <Icon sx={iconsStyle}>logout</Icon>
               </IconButton>
               {renderMenu()}
             </MDBox>

src/index.js

@@ -17,19 +17,19 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "App";
-import { AuthProvider } from "context/auth";
 // Material Dashboard 2 React Context Provider
 import { MaterialUIControllerProvider } from "context";
+import UserProvider from "utils/userContext";
 
 const container = document.getElementById("app");
 const root = createRoot(container);
 
 root.render(
-  <AuthProvider>
-    <BrowserRouter>
-      <MaterialUIControllerProvider>
+  <BrowserRouter>
+    <MaterialUIControllerProvider>
+      <UserProvider>
         <App />
-      </MaterialUIControllerProvider>
-    </BrowserRouter>
-  </AuthProvider>
+      </UserProvider>
+    </MaterialUIControllerProvider>
+  </BrowserRouter>
 );

src/layouts/TBI/tbi.js

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import Loading from "components/Loading";
+import Footer from "examples/Footer";
+import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import React from "react";
+
+export default function TBH() {
+  return (
+    <div>
+      <DashboardLayout>
+        <DashboardNavbar />
+        <Typography mt={10} mb={10} variant="h2" textAlign="center">
+          Still in progress of Implementation
+          <Loading type="cubes" />
+        </Typography>
+        <Footer />
+      </DashboardLayout>
+    </div>
+  );
+}