diff --git a/frontend/app/components/reservation_summary.tsx b/frontend/app/components/reservation_summary.tsx index 0013ccc88..a3357ac79 100644 --- a/frontend/app/components/reservation_summary.tsx +++ b/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 (

@@ -15,17 +25,12 @@ function Reserv() {

-
+

Time Reserved:

-

5:30 PM

-
-
-

1x

-

1 hour

-

(Individual Seat)

+

{ResDetails.time}

-

₱ 80.00

+

₱ {ResDetails.price}

@@ -35,7 +40,7 @@ function Reserv() { Subtotal Fee

- ₱ 80.00 + ₱ {ResDetails.price}

@@ -64,17 +69,6 @@ function Reserv() { title="GCash" marginRight="220px" > - - - } - title="Paymaya" - marginRight="205px" - >
); } diff --git a/frontend/app/payment_details/page.tsx b/frontend/app/payment_details/page.tsx index eb7a2d633..a0689c4e3 100644 --- a/frontend/app/payment_details/page.tsx +++ b/frontend/app/payment_details/page.tsx @@ -26,8 +26,8 @@ function Page() { title="Payment Details" subTitle1="Select your preferred payment method" /> - - + {" "} + {/*insert values for RESERVED TIME and its PRICE inside "Reserv".. props are "time" and "price"*/} ); } diff --git a/frontend/app/reservation/page.tsx b/frontend/app/reservation/page.tsx index f8939913e..3f556834f 100644 --- a/frontend/app/reservation/page.tsx +++ b/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([]); + + /* + 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 = () => { diff --git a/frontend/app/sign_in/page.tsx b/frontend/app/sign_in/page.tsx index ed8ccab1c..b322bf9ce 100644 --- a/frontend/app/sign_in/page.tsx +++ b/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);