Revamped routing system

client/src/App.tsx

@@ -8,7 +8,7 @@ import ManageUserAccountPage from "./pages/ManageUserAccountPage";
 import CommunityPage from "./pages/CommunityPage";
 import CreatePostPage from "./pages/CreatePostPage";
 import EditPostPage from "./pages/EditPostPage";
-import PostPage from './pages/PostPage';
+import PostPage from "./pages/PostPage";
 import SchedulePage from "./pages/SchedulePage";
 import EventsPage from "./pages/EventsPage";
 import CreateEventsPage from "./pages/CreateEventsPage";
@@ -17,28 +17,57 @@ import AdministratorSpringboard from "./pages/AdministratorSpringboard";
 import HBContestPage from "./pages/HBContestPage";
 import HBFormPage from "./pages/HBFormPage";
 import EditEventsPage from "./pages/EditEventsPage";
+import DefaultLayout from "./layouts/default";
+import AdministratorLayout from "./layouts/administrator";
 
 function App() {
   return (
     <Routes>
-      <Route element={<HomePage />} path="/" />
+      {/* User Routes */}
-      <Route element={<SignUpPage />} path="/signup" />
+      <Route path="/" element={<DefaultLayout />}>
-      <Route element={<SignInPage />} path="/signin" />
+        {/* General Routes */}
-      <Route element={<SpringboardPage />} path="/springboard" />
+        <Route index element={<HomePage />} />
-      <Route element={<ManageUserAccountPage />} path="/manage-account" />
+        <Route element={<SignUpPage />} path="signup" />
-      <Route element={<AdministratorSpringboard />} path="/admin" />
+        <Route element={<SignInPage />} path="signin" />
+        <Route element={<SpringboardPage />} path="springboard" />
+        <Route element={<ManageUserAccountPage />} path="manage-account" />
 
-      <Route element={<CommunityPage />} path="/community" />
+        {/* Events Route */}
-      <Route element={<CreatePostPage />} path="/createPost" />
+        <Route path="events">
-      <Route element={<EditPostPage />} path="/editPost/:id" />
+          <Route index element={<EventsPage />} />
-      <Route element={<PostPage />} path="/post/:id" />
+        </Route>
-      <Route element={<SchedulePage />} path="/schedule" />
+
-      <Route element={<EventsPage />} path="/events" />
+        {/* Karang Guni Schedules Route */}
-      <Route element={<HBContestPage />} path="/contest" />
+        <Route path="karang-guni-schedules">
-      <Route element={<HBFormPage />} path="/hbcform" />
+          <Route index element={<SchedulePage />} />
-      <Route element={<CreateEventsPage />} path="/createEvent" />
+        </Route>
-      <Route element={<ManageEventsPage />} path="/manageEvent" />
+
-      <Route element={<EditEventsPage />} path="/editEvent/:id" />
+        {/* Home Bill Contest Route */}
+        <Route path="home-bill-contest">
+          <Route index element={<HBContestPage />} />
+          <Route element={<HBFormPage />} path="new-submission" />
+        </Route>
+
+        {/* Community Posts Route */}
+        <Route path="community-posts">
+          <Route index element={<CommunityPage />} />
+          <Route element={<CreatePostPage />} path="create" />
+          <Route element={<PostPage />} path="post/:id" />
+          <Route element={<EditPostPage />} path="edit/:id" />
+        </Route>
+      </Route>
+
+      {/* Admin Routes */}
+      <Route path="/admin" element={<AdministratorLayout />}>
+        <Route index element={<AdministratorSpringboard />} />
+
+        {/* Events */}
+        <Route path="events">
+          <Route index element={<ManageEventsPage />} />
+          <Route element={<CreateEventsPage />} path="create" />
+          <Route element={<EditEventsPage />} path="edit/:id" />
+        </Route>
+      </Route>
     </Routes>
   );
 }

client/src/components/AdministratorNavigationPanel.tsx

@@ -26,18 +26,29 @@ import { useEffect, useState } from "react";
 import config from "../config";
 import AdministratorNavigationPanelNavigationButton from "./AdministratorNavigationPanelNavigationButton";
 import EcoconnectLogo from "./EcoconnectLogo";
+import { useNavigate } from "react-router-dom";
 
 export default function AdministratorNavigationPanel() {
   const [userInformation, setUserInformation] = useState<any>();
   const [userProfileImageURL, setUserProfileImageURL] = useState("");
   const [panelVisible, setPanelVisible] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
+
+  const navigate = useNavigate();
+
   useEffect(() => {
-    retrieveUserInformation().then((value) => {
+    retrieveUserInformation()
+      .then((value) => {
+        if (!value || value.accountType != 2) {
+          navigate("/");
+        }
         setUserInformation(value);
         setUserProfileImageURL(
           `${config.serverAddress}/users/profile-image/${value.id}`
         );
+      })
+      .catch(() => {
+        navigate("/signin");
       });
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 10);

client/src/components/NavigationBar.tsx

@@ -21,23 +21,23 @@ import { useNavigate } from "react-router-dom";
 import EcoconnectFullLogo from "./EcoconnectFullLogo";
 
 export default function NavigationBar() {
-  let [userProfileImageURL, setUserProfileImageURL] = useState("");
+  const [userProfileImageURL, setUserProfileImageURL] = useState("");
-  let [userInformation, setUserInformation] = useState<any>();
+  const [userInformation, setUserInformation] = useState<any>();
-  let [doneLoading, setDoneLoading] = useState(false);
+  const [doneLoading, setDoneLoading] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   useEffect(() => {
     retrieveUserInformation()
       .then((value) => {
+        if (value.accountType == 2) navigate("/admin");
         setUserProfileImageURL(
           `${config.serverAddress}/users/profile-image/${value.id}`
         );
         setUserInformation(value);
       })
-      .catch((err) => {
+      .catch(() => {
-        console.log(err);
+        navigate("/signin");
-        return;
       })
       .finally(() => {
         setDoneLoading(true);
@@ -86,7 +86,7 @@ export default function NavigationBar() {
                 variant="light"
                 size="sm"
                 onPress={() => {
-                  navigate("/schedule");
+                  navigate("/karang-guni-schedules");
                 }}
               >
                 <p className="text-lg">Schedules</p>
@@ -95,7 +95,7 @@ export default function NavigationBar() {
                 variant="light"
                 size="sm"
                 onPress={() => {
-                  navigate("/contest");
+                  navigate("/home-bill-contest");
                 }}
               >
                 <p className="text-lg">HB Contest</p>
@@ -104,7 +104,7 @@ export default function NavigationBar() {
                 variant="light"
                 size="sm"
                 onPress={() => {
-                  navigate("/community");
+                  navigate("/community-posts");
                 }}
               >
                 <p className="text-lg">Community Forums</p>

client/src/components/SignInModule.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { ChevronLeftIcon } from "../icons";
 import { popErrorToast } from "../utilities";
 import { retrieveUserInformation } from "../security/users";
+import instance from "../security/http";
 
 const validationSchema = Yup.object({
   email: Yup.string()
@@ -36,7 +37,7 @@ export default function SignInModule() {
   };
 
   const handleSubmit = (values: any): void => {
-    axios
+    instance
       .post(config.serverAddress + "/users/login", values)
       .then((response) => {
         localStorage.setItem("accessToken", response.data.accessToken);
@@ -44,7 +45,7 @@ export default function SignInModule() {
           if (value.accountType == 2) {
             navigate("/admin");
           } else {
-            navigate("/springboard/");
+            navigate("/springboard");
           }
         });
       })

client/src/components/SignedInStatusVerifier.tsx

@@ -8,8 +8,8 @@ export default function SignedInStatusVerifier({
 }: {
   children: React.JSX.Element;
 }) {
-  let navigate = useNavigate();
+  const navigate = useNavigate();
-  let [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     retrieveUserInformation()
       .then((value) => {

client/src/components/UpdateAccountModule.tsx

@@ -23,7 +23,7 @@ import instance from "../security/http";
 
 export default function UpdateAccountModule() {
   const navigate = useNavigate();
-  let [userInformation, setUserInformation] = useState<any>();
+  const [userInformation, setUserInformation] = useState<any>();
 
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
@@ -33,7 +33,7 @@ export default function UpdateAccountModule() {
         setUserInformation(response);
       })
       .catch(() => {
-        navigate("/springboard/");
+        navigate("/signin");
       });
   }, []);
 
@@ -72,7 +72,7 @@ export default function UpdateAccountModule() {
         values
       );
       console.log("User updated successfully:", response.data);
-      navigate("/springboard/");
+      navigate("/springboard");
     } catch (error) {
       popErrorToast(error);
     }
@@ -127,7 +127,7 @@ export default function UpdateAccountModule() {
                         <Button
                           variant="light"
                           onPress={() => {
-                            navigate("/springboard/");
+                            navigate("/springboard");
                           }}
                         >
                           Cancel

client/src/layouts/administrator.tsx

@@ -1,12 +1,9 @@
 import { Toaster } from "react-hot-toast";
 import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip";
 import AdministratorNavigationPanel from "../components/AdministratorNavigationPanel";
+import { Outlet } from "react-router-dom";
 
-export default function AdministratorLayout({
+export default function AdministratorLayout() {
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return (
     <div className="relative flex flex-col h-full">
       <SingaporeAgencyStrip />
@@ -14,7 +11,9 @@ export default function AdministratorLayout({
         <div className="h-full z-50">
           <AdministratorNavigationPanel />
         </div>
-        <main className="flex-grow">{children}</main>
+        <main className="flex-grow">
+          <Outlet />
+        </main>
       </div>
       <Toaster />
 

client/src/layouts/default.tsx

@@ -1,16 +1,15 @@
 import { Toaster } from "react-hot-toast";
 import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip";
 import NavigationBar from "../components/NavigationBar";
+import { Outlet } from "react-router-dom";
 
-export default function DefaultLayout({
+export default function DefaultLayout() {
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return (
     <div className="relative flex flex-col h-screen">
       <SingaporeAgencyStrip />
-      <main className="pt-16 flex-grow">{children}</main>
+      <main className="pt-16 flex-grow">
+        <Outlet />
+      </main>
       <Toaster />
       <NavigationBar />
 

client/src/pages/AdministratorSpringboard.tsx

@@ -1,5 +1,4 @@
 import { useNavigate } from "react-router-dom";
-import AdministratorLayout from "../layouts/administrator";
 import { useEffect, useState } from "react";
 import { getTimeOfDay } from "../utilities";
 import { retrieveUserInformation } from "../security/users";
@@ -14,7 +13,7 @@ export default function AdministratorSpringboard() {
   if (!accessToken) {
     navigate("/signin");
   }
-  let [userInformation, setUserInformation] = useState<any>();
+  const [userInformation, setUserInformation] = useState<any>();
   let timeOfDay = getTimeOfDay();
 
   let greeting = "";
@@ -42,7 +41,6 @@ export default function AdministratorSpringboard() {
   return (
     <div>
       {userInformation && (
-        <AdministratorLayout>
         <div className="flex flex-col w-full pb-2">
           <div className="flex flex-row justify-between p-8 pt-14 *:my-auto">
             <div className="flex flex-col gap-3">
@@ -65,16 +63,13 @@ export default function AdministratorSpringboard() {
                   </div>
                 }
                 onPress={() => {
-                    navigate("/manage-account/");
+                  navigate("/manage-account");
                 }}
               >
                 Manage your account
               </Button>
             </div>
-              <UserProfilePicture
+            <UserProfilePicture userId={userInformation.id} editable={false} />
-                userId={userInformation.id}
-                editable={false}
-              />
           </div>
           <div className="flex flex-row justify-stretch *:w-full *:h-56 w-full p-4 pt-0 gap-4"></div>
           <Card className="w-full bg-primary-500 p-8 text-white rounded-r-none">
@@ -107,7 +102,6 @@ export default function AdministratorSpringboard() {
             </div>
           </Card>
         </div>
-        </AdministratorLayout>
       )}
     </div>
   );

client/src/pages/CommunityPage.tsx

@@ -1,5 +1,4 @@
 // import { title } from "@/components/primitives";
-import DefaultLayout from "../layouts/default";
 import { SetStateAction, useEffect, useState } from "react";
 import {
   Button,
@@ -117,20 +116,12 @@ export default function CommunityPage() {
     }
   };
 
-  // useEffect(() => {
-  //   retrieveUserInformation()
-  //     .then((response) => {
-  //       setUserInformation(response);
-  //     })
-  //   return;
-  // }, []);
-
   const handlePostClick = (id: number) => {
-    navigate(`/post/${id}`);
+    navigate(`post/${id}`);
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <div className="flex flex-row gap-4 m-10">
         <div className="flex flex-col gap-8 w-full">
           <div className="flex flex-col">
@@ -163,8 +154,10 @@ export default function CommunityPage() {
                         <div className="flex flex-row-reverse justify-center items-center">
                           <Dropdown>
                             <div>
-                              <DropdownTrigger className="justify-center items-center"
+                              <DropdownTrigger
-                                onClick={(e) => e.stopPropagation()}>
+                                className="justify-center items-center"
+                                onClick={(e) => e.stopPropagation()}
+                              >
                                 <Button isIconOnly variant="light">
                                   <EllipsisHorizontalIcon />
                                 </Button>
@@ -174,7 +167,7 @@ export default function CommunityPage() {
                               <DropdownItem
                                 key="edit"
                                 onClick={() => {
-                                  navigate(`/editPost/${post.id}`);
+                                  navigate(`edit/${post.id}`);
                                 }}
                               >
                                 Edit
@@ -196,12 +189,6 @@ export default function CommunityPage() {
                       </div>
                       <div>
                         <p>Image</p>
-                        {/* {userInformation && (
-                          <UserPostImage
-                            userId={userInformation}
-                            editable={true}
-                          />
-                        )} */}
                       </div>
                     </div>
                     <div className="flex flex-col gap-2">
@@ -210,19 +197,30 @@ export default function CommunityPage() {
                         <Chip>Tag 2</Chip>
                       </div>
                       <div className="flex flex-row">
-                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
+                        <Button
+                          variant="light"
+                          isIconOnly
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           <HandThumbsUpIcon />
                         </Button>
-                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
+                        <Button
+                          variant="light"
+                          isIconOnly
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           <ChatBubbleOvalLeftEllipsisIcon />
                         </Button>
-                        <Button variant="light" isIconOnly onClick={(e) => e.stopPropagation()}>
+                        <Button
+                          variant="light"
+                          isIconOnly
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           <EllipsisHorizontalIcon />
                         </Button>
                       </div>
                     </div>
                   </div>
-
                 </section>
               );
             })}
@@ -234,7 +232,7 @@ export default function CommunityPage() {
             className=" bg-primary-500 dark:bg-primary-700 text-white"
             size="lg"
             onPress={() => {
-              navigate("/createPost");
+              navigate("create");
             }}
           >
             <p className="font-bold">Create a post!</p>
@@ -280,6 +278,6 @@ export default function CommunityPage() {
           )}
         </ModalContent>
       </Modal>
-    </DefaultLayout>
+    </div>
   );
 }

client/src/pages/CreateEventsPage.tsx

@@ -1,4 +1,3 @@
-import DefaultLayout from "../layouts/default";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -32,8 +31,12 @@ const validationSchema = Yup.object({
   time: Yup.string().required("Time is required"),
   location: Yup.string().required("Location is required"),
   category: Yup.string().required("Category is required"),
-  slotsAvailable: Yup.number().integer().required("Slots Available is required"),
+  slotsAvailable: Yup.number()
-  imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
+    .integer()
+    .required("Slots Available is required"),
+  imageUrl: Yup.string()
+    .url("Invalid URL format")
+    .required("Image URL is required"),
 });
 
 const CreateEventsPage = () => {
@@ -47,7 +50,7 @@ const CreateEventsPage = () => {
     location: "",
     category: "",
     slotsAvailable: "",
-    imageUrl: ""
+    imageUrl: "",
   };
 
   const handleSubmit = async (
@@ -56,12 +59,15 @@ const CreateEventsPage = () => {
   ) => {
     console.log("Submitting form with values:", values); // Debug log
     try {
-      const response = await axios.post(config.serverAddress + "/events", values);
+      const response = await axios.post(
+        config.serverAddress + "/events",
+        values
+      );
       console.log("Server response:", response); // Debug log
       if (response.status === 200 || response.status === 201) {
         console.log("Event created successfully:", response.data);
         resetForm(); // Clear form after successful submit
-        navigate("/manageEvent");
+        navigate(-1);
       } else {
         console.error("Error creating event:", response.statusText);
       }
@@ -77,7 +83,7 @@ const CreateEventsPage = () => {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <section className="w-8/12 mx-auto">
         <Button
           variant="light"
@@ -163,7 +169,7 @@ const CreateEventsPage = () => {
           )}
         </Formik>
       </section>
-    </DefaultLayout>
+    </div>
   );
 };
 

client/src/pages/CreatePostPage.tsx

@@ -1,4 +1,3 @@
-import DefaultLayout from "../layouts/default";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -48,7 +47,7 @@ function CreatePostPage() {
       if (response.status === 200) {
         console.log("Post created successfully:", response.data);
         resetForm(); // Clear form after successful submit
-        navigate("/community");
+        navigate(-1);
       } else {
         console.error("Error creating post:", response.statusText);
       }
@@ -64,7 +63,7 @@ function CreatePostPage() {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <section className="w-8/12 mx-auto">
         <Button
           variant="light"
@@ -126,7 +125,7 @@ function CreatePostPage() {
           )}
         </Formik>
       </section>
-    </DefaultLayout>
+    </div>
   );
 }
 

client/src/pages/EditEventsPage.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import DefaultLayout from "../layouts/default";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -33,8 +32,12 @@ const validationSchema = Yup.object({
   time: Yup.string().required("Time is required"),
   location: Yup.string().required("Location is required"),
   category: Yup.string().required("Category is required"),
-  slotsAvailable: Yup.number().integer().required("Slots Available is required"),
+  slotsAvailable: Yup.number()
-  imageUrl: Yup.string().url("Invalid URL format").required("Image URL is required")
+    .integer()
+    .required("Slots Available is required"),
+  imageUrl: Yup.string()
+    .url("Invalid URL format")
+    .required("Image URL is required"),
 });
 
 const EditEventsPage = () => {
@@ -48,13 +51,15 @@ const EditEventsPage = () => {
     location: "",
     category: "",
     slotsAvailable: "",
-    imageUrl: ""
+    imageUrl: "",
   });
 
   useEffect(() => {
     const fetchEvent = async () => {
       try {
-        const response = await axios.get(`${config.serverAddress}/events/${id}`);
+        const response = await axios.get(
+          `${config.serverAddress}/events/${id}`
+        );
         console.log("Fetched event data:", response.data); // Debug log
         setInitialValues(response.data);
       } catch (error) {
@@ -71,12 +76,15 @@ const EditEventsPage = () => {
   ) => {
     console.log("Submitting form with values:", values); // Debug log
     try {
-      const response = await axios.put(`${config.serverAddress}/events/${id}`, values);
+      const response = await axios.put(
+        `${config.serverAddress}/events/${id}`,
+        values
+      );
       console.log("Server response:", response); // Debug log
       if (response.status === 200 || response.status === 201) {
         console.log("Event updated successfully:", response.data);
         resetForm(); // Clear form after successful submit
-        navigate("/manageEvent");
+        navigate(-1);
       } else {
         console.error("Error updating event:", response.statusText);
       }
@@ -92,7 +100,7 @@ const EditEventsPage = () => {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <section className="w-8/12 mx-auto">
         <Button
           variant="light"
@@ -179,7 +187,7 @@ const EditEventsPage = () => {
           )}
         </Formik>
       </section>
-    </DefaultLayout>
+    </div>
   );
 };
 

client/src/pages/EditPostPage.tsx

@@ -1,4 +1,3 @@
-import DefaultLayout from "../layouts/default";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -60,7 +59,7 @@ function editPost() {
       if (response.status === 200) {
         console.log("Post updated successfully:", response.data);
         resetForm();
-        navigate("/community");
+        navigate(-1);
       } else {
         console.error("Error updating post:", response.statusText);
       }
@@ -76,7 +75,7 @@ function editPost() {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <section className="w-8/12 mx-auto">
         <Button
           variant="light"
@@ -138,7 +137,7 @@ function editPost() {
           </Formik>
         )}
       </section>
-    </DefaultLayout>
+    </div>
   );
 }
 

client/src/pages/EventsPage.tsx

@@ -1,9 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import DefaultLayout from "../layouts/default";
 import { useNavigate } from "react-router-dom";
 import instance from "../security/http";
 import config from "../config";
-import { Card, CardHeader, CardBody, CardFooter, Image, Button } from "@nextui-org/react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Image,
+  Button,
+} from "@nextui-org/react";
 
 const EventsPage = () => {
   const [events, setEvents] = useState<any[]>([]);
@@ -24,7 +30,7 @@ const EventsPage = () => {
   }, []);
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <div className="p-8">
         <div className="mb-6">
           <h2 className="text-3xl font-semibold text-primary-600">Events</h2>
@@ -65,7 +71,7 @@ const EventsPage = () => {
           )}
         </div>
       </div>
-    </DefaultLayout>
+    </div>
   );
 };
 

client/src/pages/HBContestPage.tsx

@@ -1,14 +1,18 @@
-import { Card, CardHeader, CardBody, CardFooter, Divider, Button } from "@nextui-org/react";
+import {
-import DefaultLayout from '../layouts/default';
+  Card,
-import { useNavigate } from 'react-router-dom';
+  CardHeader,
-
+  CardBody,
+  CardFooter,
+  Divider,
+  Button,
+} from "@nextui-org/react";
+import { useNavigate } from "react-router-dom";
 
 export default function HBContestPage() {
-
+  const navigate = useNavigate();
-    let navigate = useNavigate();
 
   return (
-        <DefaultLayout>
+    <div className="w-full h-full">
       <section>
         <Card className="max-w-[800px] bg-red-50 mx-auto">
           <CardHeader className="flex gap-3">
@@ -18,17 +22,24 @@ export default function HBContestPage() {
           </CardHeader>
           <Divider />
           <CardBody>
-                        <p>This contest is to encourage residents to reduce the use of electricity and water usage.
+            <p>
-                            This contest would be won by the person with the lowest overall bill average.
+              This contest is to encourage residents to reduce the use of
-                            Join us in this important effort to create a more sustainable future for everyone.
+              electricity and water usage. This contest would be won by the
-                            Participants would be required to input and upload their bills into the form to ensure integrity and honesty. </p>
+              person with the lowest overall bill average. Join us in this
+              important effort to create a more sustainable future for everyone.
+              Participants would be required to input and upload their bills
+              into the form to ensure integrity and honesty.{" "}
+            </p>
           </CardBody>
           <Divider />
           <CardFooter>
             <div className="flex-col">
               <div>
                 <h4>Winners</h4>
-                                <p>There will 3 winners for each month. Each winner will receive random food vouchers.</p>
+                <p>
+                  There will 3 winners for each month. Each winner will receive
+                  random food vouchers.
+                </p>
                 <p>1st: 3 vouchers</p>
                 <p>2nd: 2 vouchers</p>
                 <p>3rd: 1 voucher</p>
@@ -38,7 +49,7 @@ export default function HBContestPage() {
                   className=" bg-red-500 dark:bg-red-700 text-white"
                   size="lg"
                   onPress={() => {
-                                        navigate("/hbcform");
+                    navigate("new-submission");
                   }}
                 >
                   <p className="font-bold">Join</p>
@@ -48,7 +59,6 @@ export default function HBContestPage() {
           </CardFooter>
         </Card>
       </section>
-        </DefaultLayout>
+    </div>
-    )
+  );
 }
-

client/src/pages/HBFormPage.tsx

@@ -1,39 +1,38 @@
-import DefaultLayout from '../layouts/default';
+import { Button } from "@nextui-org/react";
-import { Button } from '@nextui-org/react';
+import { ArrowUTurnLeftIcon } from "../icons";
-import { ArrowUTurnLeftIcon } from '../icons';
+import { useNavigate } from "react-router-dom";
-import { useNavigate } from 'react-router-dom';
+import { Formik, Form } from "formik";
-import { Formik, Form } from 'formik';
+import * as Yup from "yup";
-import * as Yup from 'yup';
+import config from "../config";
-import config from '../config';
+import NextUIFormikInput from "../components/NextUIFormikInput";
-import NextUIFormikInput from '../components/NextUIFormikInput';
 import axios from "axios";
-import InsertImage from '../components/InsertImage';
+import InsertImage from "../components/InsertImage";
 
 const validationSchema = Yup.object({
   electricalBill: Yup.number()
-        .typeError('Must be a number')
+    .typeError("Must be a number")
     .positive("Must be a positive value")
     .max(99999.99, "Value is too large")
     .required(),
   waterBill: Yup.number()
-        .typeError('Must be a number')
+    .typeError("Must be a number")
     .positive("Must be a positive value")
     .max(99999.99, "Value is too large")
     .required(),
   totalBill: Yup.number()
-        .typeError('Must be a number')
+    .typeError("Must be a number")
     .positive("Must be a positive value")
     .max(99999.99, "Value is too large")
     .required(),
   noOfDependents: Yup.number()
-        .typeError('Must be a number')
+    .typeError("Must be a number")
     .integer("Must be a whole number")
     .positive("Must be a positive value")
     .required(),
 });
 
 export default function HBFormPage() {
-    let navigate = useNavigate();
+  const navigate = useNavigate();
 
   const initialValues: {
     id: string;
@@ -44,46 +43,49 @@ export default function HBFormPage() {
     ebPicture: File | null;
     wbPicture: File | null;
   } = {
-        id: '',
+    id: "",
-        electricalBill: '',
+    electricalBill: "",
-        waterBill: '',
+    waterBill: "",
-        totalBill: '',
+    totalBill: "",
-        noOfDependents: '',
+    noOfDependents: "",
     ebPicture: null,
     wbPicture: null,
   };
 
-
   const handleSubmit = async (
     values: any,
     { setSubmitting, resetForm, setFieldError, setFieldValue }: any
   ) => {
     const formData = new FormData();
-        formData.append('electricalBill', values.electricalBill);
+    formData.append("electricalBill", values.electricalBill);
-        formData.append('waterBill', values.waterBill);
+    formData.append("waterBill", values.waterBill);
-        formData.append('totalBill', values.totalBill);
+    formData.append("totalBill", values.totalBill);
-        formData.append('noOfDependents', values.noOfDependents);
+    formData.append("noOfDependents", values.noOfDependents);
 
     if (values.ebPicture) {
-            formData.append('ebPicture', values.ebPicture);
+      formData.append("ebPicture", values.ebPicture);
     }
 
     if (values.wbPicture) {
-            formData.append('wbPicture', values.wbPicture);
+      formData.append("wbPicture", values.wbPicture);
     }
 
     try {
-            const response = await axios.post(config.serverAddress + "/hbcform", formData, {
+      const response = await axios.post(
+        config.serverAddress + "/hbcform",
+        formData,
+        {
           headers: {
-                    'Content-Type': 'multipart/form-data'
+            "Content-Type": "multipart/form-data",
+          },
         }
-            });
+      );
       if (response.status === 200) {
         console.log("Form created successfully:", response.data);
         resetForm(); // Clear form after successful submit
-                setFieldValue('ebPicture', null);
+        setFieldValue("ebPicture", null);
-                setFieldValue('wbPicture', null);
+        setFieldValue("wbPicture", null);
-                navigate("/contest");
+        navigate(-1);
       } else {
         console.error("Error creating form:", response.statusText);
       }
@@ -102,12 +104,9 @@ export default function HBFormPage() {
   };
 
   return (
-        <DefaultLayout>
+    <div className="w-full h-full">
       <section className="w-7/12 mx-auto">
-                <Button
+        <Button variant="light" onPress={() => navigate(-1)}>
-                    variant="light"
-                    onPress={() => navigate(-1)}
-                >
           <ArrowUTurnLeftIcon />
         </Button>
       </section>
@@ -154,12 +153,12 @@ export default function HBFormPage() {
                   <div className="flex flex-row gap-8 max-w-xs h-[500px]">
                     <InsertImage
                       onImageSelected={(file) => {
-                                                setFieldValue('ebPicture', file);
+                        setFieldValue("ebPicture", file);
                       }}
                     />
                     <InsertImage
                       onImageSelected={(file) => {
-                                                setFieldValue('wbPicture', file);
+                        setFieldValue("wbPicture", file);
                       }}
                     />
                   </div>
@@ -178,6 +177,6 @@ export default function HBFormPage() {
           )}
         </Formik>
       </section>
-        </DefaultLayout>
+    </div>
   );
 }

client/src/pages/HomePage.tsx

@@ -1,11 +1,9 @@
 import { Button } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
-import DefaultLayout from "../layouts/default";
-
 export default function HomePage() {
   const navigate = useNavigate();
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <p>Home</p>
       <Button
         onPress={() => {
@@ -14,6 +12,6 @@ export default function HomePage() {
       >
         Sign up!
       </Button>
-    </DefaultLayout>
+    </div>
   );
 }

client/src/pages/ManageEventsPage.tsx

@@ -1,6 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import DefaultLayout from "../layouts/default";
+import {
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Avatar, Button } from "@nextui-org/react";
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Avatar,
+  Button,
+} from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
 import { PencilSquareIcon, TrashIcon } from "../icons";
 import axios from "axios";
@@ -38,7 +46,7 @@ const ManageEventsPage = () => {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <div className="mb-6">
         <h2 className="text-3xl font-semibold text-red-600">Manage Events</h2>
       </div>
@@ -57,7 +65,10 @@ const ManageEventsPage = () => {
             <TableRow key={event.id}>
               <TableCell>
                 <div className="flex items-center">
-                  <Avatar src={`${config.serverAddress}${event.imageUrl}`} className="mr-4" />
+                  <Avatar
+                    src={`${config.serverAddress}${event.imageUrl}`}
+                    className="mr-4"
+                  />
                   {event.title}
                 </div>
               </TableCell>
@@ -92,13 +103,12 @@ const ManageEventsPage = () => {
       </Table>
       <Button
         className="mt-6 bg-red-600 text-white"
-        onPress={() => navigate("/CreateEvent")}
+        onPress={() => navigate("createEvent")}
       >
         Add events
       </Button>
-    </DefaultLayout>
+    </div>
   );
 };
 
 export default ManageEventsPage;
-

client/src/pages/ManageUserAccountPage.tsx

@@ -1,4 +1,3 @@
-import DefaultLayout from "../layouts/default";
 import UpdateAccountModule from "../components/UpdateAccountModule";
 import { useNavigate } from "react-router-dom";
 
@@ -10,12 +9,12 @@ export default function ManageUserAccountPage() {
   }
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <div>
         <div className="p-8 flex flex-col gap-8">
           <UpdateAccountModule />
         </div>
       </div>
-    </DefaultLayout>
+    </div>
   );
 }

client/src/pages/PostPage.tsx

@@ -1,6 +1,5 @@
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from "react-router-dom";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import DefaultLayout from "../layouts/default";
 import instance from "../security/http";
 import config from "../config";
 import {
@@ -18,12 +17,12 @@ import {
   ModalFooter,
   useDisclosure,
   Spinner,
-  } from "@nextui-org/react";
+} from "@nextui-org/react";
 import {
-ChatBubbleOvalLeftEllipsisIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
-EllipsisHorizontalIcon,
+  EllipsisHorizontalIcon,
-HandThumbsUpIcon,
+  HandThumbsUpIcon,
-ArrowUTurnLeftIcon,
+  ArrowUTurnLeftIcon,
 } from "../icons";
 
 interface Post {
@@ -50,7 +49,11 @@ const PostPage: React.FC = () => {
   }, [id]);
 
   if (!post) {
-        return <div className="flex justify-center min-h-screen"><Spinner label="Loading..." color="danger" /></div>;
+    return (
+      <div className="flex justify-center min-h-screen">
+        <Spinner label="Loading..." color="danger" />
+      </div>
+    );
   }
 
   const handleDeleteClick = (post: Post) => {
@@ -71,7 +74,7 @@ const PostPage: React.FC = () => {
   };
 
   return (
-        <DefaultLayout>
+    <div className="w-full h-full">
       <section className="flex">
         <div className="w-2/12 flex justify-end">
           <Button
@@ -88,7 +91,8 @@ const PostPage: React.FC = () => {
             <div className="flex flex-col gap-4">
               <section
                 className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
-                            key={post.id}>
+                key={post.id}
+              >
                 <div>
                   <Avatar
                     src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
@@ -113,8 +117,9 @@ const PostPage: React.FC = () => {
                             <DropdownItem
                               key="edit"
                               onClick={() => {
-                                                        navigate(`/editPost/${post.id}`);
+                                navigate(`edit/${post.id}`);
-                                                    }}>
+                              }}
+                            >
                               Edit
                             </DropdownItem>
                             <DropdownItem
@@ -164,8 +169,7 @@ const PostPage: React.FC = () => {
             </div>
           </div>
         </div>
-            <div className="w-2/12">
+        <div className="w-2/12"></div>
-            </div>
       </section>
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
         <ModalContent>
@@ -189,8 +193,8 @@ const PostPage: React.FC = () => {
           )}
         </ModalContent>
       </Modal>
-        </DefaultLayout>
+    </div>
   );
-    }
+};
 
 export default PostPage;

client/src/pages/SchedulePage.tsx

@@ -12,7 +12,6 @@ import {
   TableHeader,
   TableRow,
 } from "@nextui-org/react";
-import DefaultLayout from "../layouts/default";
 import { useEffect, useState } from "react";
 import config from "../config";
 import instance from "../security/http";
@@ -30,7 +29,7 @@ interface Schedule {
 const statusColorMap: Record<string, ChipProps["color"]> = {
   "On going": "success",
   "Up coming": "danger",
-  "Ended": "default",
+  Ended: "default",
 };
 
 const getStatusColor = (status: string): ChipProps["color"] => {
@@ -97,7 +96,7 @@ export default function SchedulePage() {
   };
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
         <h1>Karang Guni Schedule</h1>
         <div className="flex gap-4">
@@ -201,6 +200,6 @@ export default function SchedulePage() {
           </div>
         </div>
       </section>
-    </DefaultLayout>
+    </div>
   );
 }

client/src/pages/SignInPage.tsx

@@ -1,11 +1,10 @@
 import SignInModule from "../components/SignInModule";
-import DefaultLayout from "../layouts/default";
 import SignedInStatusVerifier from "../components/SignedInStatusVerifier";
 
 export default function SignInPage() {
   return (
     <SignedInStatusVerifier>
-      <DefaultLayout>
+      <div className="w-full h-full">
         <div className="flex flex-col h-full">
           <div className="flex flex-row h-full">
             <div className="w-3/5 relative">
@@ -33,7 +32,7 @@ export default function SignInPage() {
             </div>
           </div>
         </div>
-      </DefaultLayout>
+      </div>
     </SignedInStatusVerifier>
   );
 }

client/src/pages/SignUpPage.tsx

@@ -1,11 +1,10 @@
 import SignUpModule from "../components/SignUpModule";
-import DefaultLayout from "../layouts/default";
 import SignedInStatusVerifier from "../components/SignedInStatusVerifier";
 
 export default function SignUpPage() {
   return (
     <SignedInStatusVerifier>
-      <DefaultLayout>
+      <div className="w-full h-full">
         <div className="flex flex-col h-full">
           <div className="flex flex-row h-full">
             <div className="w-3/5 relative">
@@ -33,7 +32,7 @@ export default function SignUpPage() {
             </div>
           </div>
         </div>
-      </DefaultLayout>
+      </div>
     </SignedInStatusVerifier>
   );
 }

client/src/pages/SpringboardPage.tsx

@@ -1,5 +1,4 @@
 import { useNavigate } from "react-router-dom";
-import DefaultLayout from "../layouts/default";
 import { useEffect, useState } from "react";
 import { Button, Card, Link } from "@nextui-org/react";
 import { LockClosedIcon, PencilSquareIcon } from "../icons";
@@ -14,8 +13,8 @@ export default function SpringboardPage() {
   if (!accessToken) {
     navigate("/signin");
   }
-  let [userInformation, setUserInformation] = useState<any>();
+  const [userInformation, setUserInformation] = useState<any>();
-  let [accountUnavailable, setAccountUnavaliable] = useState(false);
+  const [accountUnavailable, setAccountUnavaliable] = useState(false);
   let timeOfDay = getTimeOfDay();
 
   let greeting = "";
@@ -42,7 +41,7 @@ export default function SpringboardPage() {
   }, []);
 
   return (
-    <DefaultLayout>
+    <div className="w-full h-full">
       <div>
         {userInformation && (
           <div className="flex flex-col w-full">
@@ -165,6 +164,6 @@ export default function SpringboardPage() {
           </div>
         )}
       </div>
-    </DefaultLayout>
+    </div>
   );
 }

client/src/security/http.ts

@@ -9,7 +9,7 @@ const instance = axios.create({
 instance.interceptors.request.use(
   function (config) {
     // Do something before request is sent
-    let accessToken = localStorage.getItem("accessToken");
+    const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
       config.headers["Authorization"] = `Bearer ${accessToken}`;
     }