Merge branch 'Ben' of https://github.com/Ben-Sicat/Study_hub into Ben

Author: Ben-Sicat

backend/app/app.py

@@ -644,4 +644,4 @@ def index():
 
 if __name__ == '__main__':
     scheduler.start()
-    app.run(host='0.0.0.0', debug=True)
+    app.run(host='0.0.0.0', debug=True)

frontend/app/(site)/page.tsx

@@ -8,7 +8,6 @@ import Butt from "../components/button";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
-
 // export const metadata: Metadata = {
 //   title: "Brew & Brain",
 //   description: "Brew * Brain",
@@ -85,12 +84,9 @@ export default function Home() {
       <section>
         <About />
       </section>
-      <section>
-        <Discounts />
-      </section>
-      <footer>
+      {/* <footer>
         <Footer />
-      </footer>
+      </footer> */}
     </div>
   );
 }

frontend/app/account/page.tsx

@@ -14,8 +14,8 @@ import TemporaryDrawer from "../components/side_bar";
 function page() {
   const [username, setUsername] = useState("");
   useEffect(() => {
-    const accessToken = localStorage.getItem('user');
-    setUsername(accessToken ? JSON.parse(accessToken).Username : "")
+    const accessToken = localStorage.getItem("user");
+    setUsername(accessToken ? JSON.parse(accessToken).Username : "");
     document.title = "Account";
   }, []);
 
@@ -61,16 +61,6 @@ function page() {
           </Link>
           <Line></Line>
         </div>
-
-        <div className="text-sm mt-4">
-          <Link href="#">
-            <Dropdown
-              title="Rewards"
-              LeftArrow={<KeyboardArrowRightIcon style={{ fontSize: 23 }} />}
-            />
-          </Link>
-          <Line></Line>
-        </div>
       </div>
 
       <div className="mt-7">
@@ -97,21 +87,17 @@ function page() {
           </Link>
           <Line></Line>
         </div>
-
-        <div className="text-sm mt-4">
-          <Link href="#">
-            <Dropdown
-              title="Notifications"
-              LeftArrow={<KeyboardArrowRightIcon style={{ fontSize: 23 }} />}
-            />
-          </Link>
-          <Line></Line>
-        </div>
       </div>
 
       <div className="mt-20"></div>
 
-      <Butt title="Log Out" Bgcolor="#FFF1E4" width="325px" height="34px" onClick={handleLogout} />
+      <Butt
+        title="Log Out"
+        Bgcolor="#FFF1E4"
+        width="325px"
+        height="34px"
+        onClick={handleLogout}
+      />
     </div>
   );
 }

frontend/app/admin_accounts/[userId]/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import React, { useState, useEffect } from "react";
 import Teste from "@/app/components/account";
 import CloseIcon from "@mui/icons-material/Close";
@@ -7,18 +7,15 @@ import CircleIcon from "@mui/icons-material/Circle";
 import TextInput from "@/app/components/text_input";
 import Drop from "@/app/components/dropdown_button";
 import Butt from "@/app/components/button";
-
-
+import Link from "next/link";
 
 function Page() {
-  
   const handleBackButtonClick = () => {
-    console.log("back button clicked")
-  }
+    console.log("back button clicked");
+  };
 
-  
-  const userId = localStorage.getItem('user_id')
-  console.log(userId)
+  const userId = localStorage.getItem("user_id");
+  console.log(userId);
 
   const [formData, setFormData] = useState({
     userName: "",
@@ -33,10 +30,12 @@ function Page() {
 
     const fetchUserData = async () => {
       try {
-        const response = await fetch(`http://localhost:5000/api/get-user/${userId}`);
+        const response = await fetch(
+          `http://localhost:5000/api/get-user/${userId}`
+        );
         if (response.ok) {
           const userData = await response.json();
-          const datas = userData.user
+          const datas = userData.user;
           console.log("User Data:", userData); // Log the received user data
           console.log("User Data1:", datas); // Log the received user data
           setFormData({
@@ -83,6 +82,7 @@ function Page() {
       if (response.ok) {
         const updatedUserData = await response.json();
         console.log("Profile updated successfully:", updatedUserData);
+        alert("Customer's profile updated.");
       } else {
         console.error("Error updating profile:", await response.json());
       }
@@ -163,13 +163,15 @@ function Page() {
 
       <div className="mt-16"></div>
 
-      <Butt
-        title="Update Profile"
-        Bgcolor="#FFF1E4"
-        width="325px"
-        height="34px"
-        onClick={handleUpdateProfile}
-      />
+      <Link href="/admin_accounts">
+        <Butt
+          title="Update Profile"
+          Bgcolor="#FFF1E4"
+          width="325px"
+          height="34px"
+          onClick={handleUpdateProfile}
+        />
+      </Link>
     </div>
   );
 }

frontend/app/admin_accounts/page.tsx

@@ -81,9 +81,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-5 text-xs text-black font-bold mt-2">
-        <Link href="/admin_dashboard">
-          <p>Dashboard</p>
-        </Link>
         <Link href="/admin_areamap">
           <p>Area Map</p>
         </Link>
@@ -95,7 +92,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-8 text-xs text-black font-bold mb-2">
-        <p className="text-backcolor">_________</p>
         <p className="text-backcolor">________</p>
         <p className="text-backcolor">____________</p>
         <p className="text-amber-500">____________</p>

frontend/app/admin_areamap/page.tsx

@@ -43,7 +43,6 @@ function Page() {
 
   }, []);
 
-
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [chairId, setChairId] = React.useState<string | null>(null);
   const [ reservationData, setReservationData] = React.useState<any>(null);
@@ -70,16 +69,18 @@ function Page() {
     setModalOpen(!isModalOpen);
     console.log("isChairOpen", isChairOpen);
 
+
     await fetchReservation(chairId);
     console.log("reservationData", reservationData)
      // Toggle the modal state
      if (isChairOpen) {
+
       setModalOpen(true);
     } else {
       setModalOpen(false);
     }
-  }
-  
+  };
+
   const handleModalOpen = () => {
     setModalOpen(true);
   };
@@ -117,9 +118,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-5 text-xs text-black font-bold mt-2">
-        <Link href="/admin_dashboard">
-          <p>Dashboard</p>
-        </Link>
         <Link href="/admin_areamap">
           <p className="text-amber-500">Area Map</p>
         </Link>
@@ -132,7 +130,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-8 text-xs text-black font-bold mb-2">
-        <p className="text-backcolor">_________</p>
         <p className="text-amber-500">________</p>
         <p className="text-backcolor">____________</p>
         <p className="text-backcolor">____________</p>
@@ -151,8 +148,8 @@ function Page() {
             border: "2px solid #DC9D94",
           }}
         >
-
           {/* now we need to refractor this modaladmin t only open if the parameter in the onlcick of the button is set to true */}
+
 
           <ModalAdmin isOpen={isModalOpen} onClose={handleModalClose} reservationData={reservationData}/>
           <ChairRight
@@ -238,6 +235,7 @@ function Page() {
           className="relative left-44 bottom-52"
           onClick={() => handleChairClick("chair12", true)}
         />
+
         </div>
       </div>
 

frontend/app/admin_sales/page.tsx

@@ -39,9 +39,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-5 text-xs text-black font-bold mt-2">
-        <Link href="/admin_dashboard">
-          <p>Dashboard</p>
-        </Link>
         <Link href="/admin_areamap">
           <p>Area Map</p>
         </Link>
@@ -54,7 +51,6 @@ function Page() {
       </div>
 
       <div className="container flex items-center justify-center space-x-8 text-xs text-black font-bold mb-2">
-        <p className="text-backcolor">_________</p>
         <p className="text-backcolor">________</p>
         <p className="text-amber-500">____________</p>
         <p className="text-backcolor">____________</p>
@@ -64,7 +60,7 @@ function Page() {
         <DataGridDemo></DataGridDemo>
       </div>
 
-      <div className="container flex space-x-5 justify-center items-center">
+      {/* <div className="container flex space-x-5 justify-center items-center">
         <Butt
           title="Generate Report"
           Bgcolor="#F8D8D4"
@@ -77,7 +73,7 @@ function Page() {
           width="150px"
           height="33px"
         ></Butt>
-      </div>
+      </div> */}
     </div>
   );
 }

frontend/app/components/data_grid.tsx

@@ -9,7 +9,7 @@ interface Reservation {
   StartTime: string;
   EndTime: string;
   Username: string;
-  Price: number;
+  TableFee: number;
   ResDate: string;
 }
 
@@ -19,7 +19,9 @@ const columns: GridColDef[] = [
   { field: "Username", headerName: "Username", width: 150 },
   { field: "StartTime", headerName: "Start Time", width: 200 },
   { field: "EndTime", headerName: "End Time", width: 200 },
+
   { field: "ResDate", headerName: "Date", width: 150},
+
   { field: "TableFee", headerName: "Price", width: 150 },
 ];
 

frontend/app/components/modal.tsx

@@ -28,15 +28,22 @@ const style = {
   p: 4,
 };
 
-const BasicModal: React.FC<BasicModalProps> = ({ isOpen, onClose, chairId }) => {
+const BasicModal: React.FC<BasicModalProps> = ({
+  isOpen,
+  onClose,
+  chairId,
+}) => {
   const [formData, setFormData] = useState({
     Date: null as Date | null,
     StartTime: null as string | null,
     EndTime: null as string | null,
   });
   const router = useRouter();
 
-  const handleInputChange = (field: keyof typeof formData, value: Date | string | null) => {
+  const handleInputChange = (
+    field: keyof typeof formData,
+    value: Date | string | null
+  ) => {
     setFormData((prevFormData) => ({
       ...prevFormData,
       [field]: value,
@@ -48,7 +55,7 @@ const BasicModal: React.FC<BasicModalProps> = ({ isOpen, onClose, chairId }) =>
 
   const handleCreateReservation = async () => {
     try {
-      const storedUserData = localStorage.getItem('user');
+      const storedUserData = localStorage.getItem("user");
       const parsedUserData = storedUserData ? JSON.parse(storedUserData) : null;
       const initialFormData = parsedUserData?.updated_user || null;
       let userID = initialFormData ? initialFormData.UserID : "";
@@ -58,21 +65,27 @@ const BasicModal: React.FC<BasicModalProps> = ({ isOpen, onClose, chairId }) =>
 
       const startMoment = moment(formData.StartTime, "HH:mm");
       const endMoment = moment(formData.EndTime, "HH:mm");
-      const durationInHours = moment.duration(endMoment.diff(startMoment)).asHours();
+      const durationInHours = moment
+        .duration(endMoment.diff(startMoment))
+        .asHours();
       const tableFee = Math.ceil(durationInHours) * baseTableFee;
 
       const apiData = {
         seat: chairId,
-        resdate: formData.Date ? moment(formData.Date).format("YYYY-MM-DD") : null,
+        resdate: formData.Date
+          ? moment(formData.Date).format("YYYY-MM-DD")
+          : null,
         starttime: formData.StartTime,
         endtime: formData.EndTime,
         user_id: userID,
         tablefee: tableFee,
       };
+
       console.log(apiData)
       console.log(tableFee)
 
 
+
       const response = await fetch(
         "http://localhost:5000/api/create-reservation",
         {