Fixed Payment Details and Error Alert on Sign In

frontend/app/components/reservation_summary.tsx

@@ -6,7 +6,17 @@ import AccountBalanceOutlinedIcon from "@mui/icons-material/AccountBalanceOutlin
 import AddToHomeScreenIcon from "@mui/icons-material/AddToHomeScreen";
 import Line from "./line";
 
-function Reserv() {
+type ResProps = {
+  time?: string;
+  price?: string;
+};
+
+function Reserv({ time, price }: ResProps) {
+  const ResDetails = {
+    time: time || "0",
+    price: price || "0",
+  };
+
   return (
     <div>
       <p className=" text-textcolor text-sm font-semibold py-2 px-2 ml-7 mt-3">
@@ -15,17 +25,12 @@ function Reserv() {
 
       <div className="flex text-xs ml-14 mt-2 justify-between">
         <div>
-          <div className="flex font-bold">
+          <div className="flex font-bold space-x-2">
             <p>Time Reserved:</p>
-            <p>5:30 PM</p>
-          </div>
-          <div className="flex space-x-1">
-            <p className="font-bold">1x</p>
-            <p>1 hour</p>
-            <p>(Individual Seat)</p>
+            <p>{ResDetails.time}</p>
           </div>
         </div>
-        <h4 className="mr-16">&#8369; 80.00</h4>
+        <h4 className="mr-16 font-bold">&#8369; {ResDetails.price}</h4>
       </div>
 
       <Line></Line>
@@ -35,7 +40,7 @@ function Reserv() {
           Subtotal Fee
         </p>
         <p className=" text-textcolor text-sm font-semibold py-2 px-2 mt-3 mr-10">
-          &#8369; 80.00
+          &#8369; {ResDetails.price}
         </p>
       </div>
 
@@ -64,17 +69,6 @@ function Reserv() {
         title="GCash"
         marginRight="220px"
       ></IcoButt>
-
-      <IcoButt
-        Icon={
-          <AddToHomeScreenIcon
-            className="mr-3"
-            style={{ fontSize: 28, color: "#EDC2B5" }}
-          />
-        }
-        title="Paymaya"
-        marginRight="205px"
-      ></IcoButt>
     </div>
   );
 }

frontend/app/payment_details/page.tsx

@@ -26,8 +26,8 @@ function Page() {
         title="Payment Details"
         subTitle1="Select your preferred payment method"
       />
-
-      <Reserv></Reserv>
+      <Reserv />{" "}
+      {/*insert values for RESERVED TIME and its PRICE inside "Reserv".. props are "time" and "price"*/}
     </div>
   );
 }

frontend/app/reservation/page.tsx

@@ -5,12 +5,36 @@ import TemporaryDrawer from "../components/side_bar";
 import { ChairRight, ChairLeft, ChairDown, ChairUp } from "../components/svgs";
 import BasicModal from "../components/modal";
 
+interface Accounts {
+  UserID: number;
+  Username: string;
+}
+
 function Page() {
   useEffect(() => {
     // Set the title directly for the browser tab
     document.title = "Reservation";
   }, []);
 
+  const [accounts, setAccounts] = useState<Accounts[]>([]);
+
+  /*
+  useEffect(() => {
+    fetch("http://localhost:5000/api/get-reservations")
+      .then((response) => response.json())
+      .then((data: { accounts: Accounts[] }) => {
+        const simplifiedData = data.accounts.map(({ UserID, Username }) => ({
+          UserID,
+          Username,
+        }));
+        setAccounts(simplifiedData);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+      });
+  }, []);
+  */
+
   const [isModalOpen, setModalOpen] = React.useState(false);
 
   const handleModalOpen = () => {

frontend/app/sign_in/page.tsx

@@ -40,10 +40,19 @@ function Page() {
           console.log("data", data.user_data);
           localStorage.setItem("user", JSON.stringify(data.user_data));
           router.push("/reservation");
-        } else router.push("/admin_dashboard");
+        } else {
+          router.push("/admin_dashboard");
+        }
       } else {
         const errorData = await response.json();
-        console.error("Login failed:", errorData.message);
+        if (response.status === 401) {
+          console.error("Authentication failed:", errorData.message);
+          // Display an alert for incorrect username or password
+          alert("The User Name or Password is incorrect.");
+        } else {
+          console.error("Login failed:", errorData.message);
+          // Handle other types of errors here
+        }
       }
     } catch (error) {
       console.error(error);