diff --git a/frontend/app/components/modal_admin.tsx b/frontend/app/components/modal_admin.tsx
index 1a20707b..686e47f2 100644
--- a/frontend/app/components/modal_admin.tsx
+++ b/frontend/app/components/modal_admin.tsx
@@ -57,12 +57,11 @@ function ModalAdmin({ isOpen, onClose }: BasicModalProps) {
<div className="flex justify-center space-x-5 text-xs">
<Butt
- title="Cancel"
+ title="Terminate"
Bgcolor="#A081AB"
width="152px"
height="30px"
borderRadius="10px"
- onClick={onClose} // Close the main modal on Cancel button click
/>
<Butt
title="Extend"
@@ -73,6 +72,17 @@ function ModalAdmin({ isOpen, onClose }: BasicModalProps) {
onClick={handleOpen} // Show the extend modal on Extend button click
/>
</div>
+
+ <div className="flex justify-center items-center">
+ <Butt
+ title="Cancel"
+ Bgcolor="#EBE0D0"
+ width="320px"
+ height="30px"
+ borderRadius="10px"
+ onClick={onClose} // Close the main modal on Cancel button click
+ />
+ </div>
</div>
</Box>
</Modal>
diff --git a/frontend/app/components/modal_createacc.tsx b/frontend/app/components/modal_createacc.tsx
new file mode 100644
index 00000000..cf609f2e
--- /dev/null
+++ b/frontend/app/components/modal_createacc.tsx
@@ -0,0 +1,84 @@
+"use client";
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Butt from "./button";
+import Link from "next/link";
+import ModalExtend from "./modal_extend"; // Import your ModalExtend component
+
+const style = {
+ position: "absolute" as "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: 400,
+ bgcolor: "background.paper",
+ borderRadius: "20px",
+ border: "2px solid #DC9D94",
+ boxShadow: 24,
+ p: 4,
+};
+
+interface BasicModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+function ModalCreate({ isOpen, onClose }: BasicModalProps) {
+ const [showExtendModal, setShowExtendModal] = useState(false);
+
+ const handleOpen = () => {
+ setShowExtendModal(true);
+ };
+
+ const handleClose = () => {
+ setShowExtendModal(false);
+ onClose();
+ };
+
+ return (
+ <div>
+ <Modal
+ open={isOpen}
+ onClose={onClose}
+ aria-labelledby="modal-modal-title"
+ aria-describedby="modal-modal-description"
+ >
+ <Box sx={style}>
+ <div className="text-textcolor text-xl font-bold">
+ <h2>Create Account</h2>
+ </div>
+
+ <div className="container">
+ <div className="flex justify-center items-center mt-5">
+ <div className="text-textcolor text-base font-bold">
+ <h2>Account Created Successfully!</h2>
+ </div>
+ </div>
+
+ <div className="flex justify-center space-x-5 text-xs">
+ <Link href="/sign_in">
+ <Butt
+ title="Back to Sign In"
+ Bgcolor="#EBE0D0"
+ width="160px"
+ height="30px"
+ borderRadius="10px"
+ />
+ </Link>
+ </div>
+ </div>
+ </Box>
+ </Modal>
+
+ {showExtendModal && (
+ <ModalExtend
+ isOpen={true /* or use a state variable for this */}
+ onClose={handleClose}
+ />
+ )}
+ </div>
+ );
+}
+
+export default ModalCreate;
diff --git a/frontend/app/components/modal_extend.tsx b/frontend/app/components/modal_extend.tsx
index d4399420..28624c1a 100644
--- a/frontend/app/components/modal_extend.tsx
+++ b/frontend/app/components/modal_extend.tsx
@@ -95,13 +95,24 @@ function ModalExtend({ isOpen, onClose }: BasicModalProps) {
</div>
</div>
- <Butt
- onClick={handleCreateAccount}
- title="Continue"
- Bgcolor="#EBE0D0"
- width="325px"
- height="34px"
- />
+ <div className="flex justify-center space-x-5 text-xs">
+ <Butt
+ title="Cancel"
+ Bgcolor="#EBE0D0"
+ width="152px"
+ height="30px"
+ borderRadius="10px"
+ onClick={onClose}
+ />
+ <Butt
+ title="Continue"
+ Bgcolor="#F8D8D4"
+ width="152px"
+ height="30px"
+ borderRadius="10px"
+ onClick={handleCreateAccount}
+ />
+ </div>
</Box>
</Modal>
</div>
diff --git a/frontend/app/components/modal_wait.tsx b/frontend/app/components/modal_wait.tsx
new file mode 100644
index 00000000..2360b252
--- /dev/null
+++ b/frontend/app/components/modal_wait.tsx
@@ -0,0 +1,139 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Butt from "./button";
+import DatePick from "./date_picker";
+import TimePick from "./time_picker";
+import { useRouter } from "next/navigation";
+
+const style = {
+ position: "absolute" as "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: 400,
+ bgcolor: "background.paper",
+ borderRadius: "20px",
+ border: "2px solid #DC9D94",
+ boxShadow: 24,
+ p: 4,
+};
+
+interface BasicModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+function BasicModal({ isOpen, onClose }: BasicModalProps) {
+ const [open, setOpen] = React.useState(false);
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+ const router = useRouter();
+
+ const [formData, setFormData] = useState<{
+ Date: string | any;
+ StartTime: string | any;
+ EndTime: string | any;
+ }>({
+ Date: "",
+ StartTime: "",
+ EndTime: "",
+ });
+
+ const handleInputChange = (field: string, value: string) => {
+ setFormData({
+ ...formData,
+ [field]: value,
+ });
+ };
+ const redirectUrl = "http://localhost:3000/qr_success_reservation"; //change this to a page after ng payment so magamit yung handleCreateAccount function. Dun pa dapat ma-ce-create yung reservation
+ const getName = "Gian"; //change get the name of user from session or local storage kung san man naka store
+ const tableFee = 140; //change den sa calculation
+
+ const handleCreateAccount = async () => {
+ try {
+ const apiData = {
+ chair_id: "", // Set a default value if not applicable
+ date: formData.Date,
+ starttime: formData.StartTime,
+ endtime: formData.EndTime,
+ };
+ router.push(
+ `https://payment-gateway-weld.vercel.app/gcash/login?amountDue=${tableFee}&merchant=Brew and Brains&redirectUrl=${redirectUrl}`
+ );
+
+ const response = await fetch(
+ "http://localhost:5000/api/create-reservation",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(apiData),
+ }
+ );
+
+ if (response.ok) {
+ // Successfully created account
+ console.log("Reserved successfully!");
+ // Optionally, you can redirect the user to a login page or another page
+ } else {
+ // Handle error cases
+ console.error("Error Reservation", await response.json());
+ }
+ } catch (error) {
+ console.error("Error Reservation", error);
+ }
+ };
+
+ return (
+ <div>
+ <Modal
+ open={isOpen}
+ onClose={onClose}
+ aria-labelledby="modal-modal-title"
+ aria-describedby="modal-modal-description"
+ >
+ <Box sx={style}>
+ <div className="text-textcolor text-xl font-bold">
+ <h2>Ben Eric Trial</h2>
+ </div>
+
+ <div className="container">
+ <div className="flex justify-center items-center mt-3">
+ <DatePick
+ text="Date:"
+ onInputChange={(value) => handleInputChange("date", value)}
+ ></DatePick>
+ </div>
+
+ <div className="flex justify-center items-center mt-3">
+ <TimePick
+ text="Start Time:"
+ onInputChange={(value) => handleInputChange("starttime", value)}
+ ></TimePick>
+ </div>
+
+ <div className="flex justify-center items-center mt-3">
+ <TimePick
+ text="End Time:"
+ onInputChange={(value) => handleInputChange("endtime", value)}
+ ></TimePick>
+ </div>
+ </div>
+
+ <Butt
+ onClick={handleCreateAccount}
+ title="Reserve"
+ Bgcolor="#EBE0D0"
+ width="325px"
+ height="34px"
+ />
+ </Box>
+ </Modal>
+ </div>
+ );
+}
+
+export default BasicModal;
diff --git a/frontend/app/create_account/page.tsx b/frontend/app/create_account/page.tsx
index 3bfa4e72..df925ae9 100644
--- a/frontend/app/create_account/page.tsx
+++ b/frontend/app/create_account/page.tsx
@@ -8,12 +8,13 @@ import Drop from "../components/dropdown_button";
import Radio from "../components/radio_button";
import CheckBox from "../components/checkbox";
import Link from "next/link";
+import ModalCreate from "../components/modal_createacc";
import { useRouter } from "next/navigation";
function Page() {
const [isChecked, setChecked] = useState(false); // State for checkbox
- const [isSelected, setSelected] = useState(false)
+ const [isSelected, setSelected] = useState(false);
const handleCheckboxChange = () => {
setChecked(!isChecked);
@@ -168,7 +169,7 @@ function Page() {
gender: formData.gender,
occupation: formData.occupation,
};
-
+
const response = await fetch("http://localhost:5000/api/create-account", {
method: "POST",
headers: {
@@ -178,7 +179,7 @@ function Page() {
});
console.log(apiData);
-
+
if (response.ok) {
// Successfully created account
console.log("Account created successfully!");
@@ -190,9 +191,17 @@ function Page() {
} catch (error) {
console.error("Error creating account:", error);
}
-
+
+ {
+ /*for modal*/
+ }
+ setModalOpen(true);
};
- const handleBirthdateChange = (field: keyof typeof formData["birthdate"], value: string) => {
+
+ const handleBirthdateChange = (
+ field: keyof (typeof formData)["birthdate"],
+ value: string
+ ) => {
setFormData({
...formData,
birthdate: {
@@ -202,6 +211,12 @@ function Page() {
});
};
+ //for modals
+ const [isModalOpen, setModalOpen] = React.useState(false);
+
+ const handleModalClose = () => {
+ setModalOpen(false);
+ };
return (
<div className="flex min-h-full flex-col bg-backcolor">
@@ -259,9 +274,18 @@ function Page() {
</p>
<div className="flex justify-center space-x-3">
- <Drop options={options} onSelect={(value) => handleBirthdateChange("month", value)} />
- <Drop options={options1} onSelect={(value) => handleBirthdateChange("day", value)} />
- <Drop options={options2} onSelect={(value) => handleBirthdateChange("year", value)} />
+ <Drop
+ options={options}
+ onSelect={(value) => handleBirthdateChange("month", value)}
+ />
+ <Drop
+ options={options1}
+ onSelect={(value) => handleBirthdateChange("day", value)}
+ />
+ <Drop
+ options={options2}
+ onSelect={(value) => handleBirthdateChange("year", value)}
+ />
</div>
<p className="text-redwood font-normal text-sm text-justify ml-8 mt-4 py-2 px-2">
@@ -269,9 +293,18 @@ function Page() {
</p>
<div className="flex justify-center space-x-3">
- <Radio input="Female" onRadioChange={(value) => handleInputChange("gender", value)} />
- <Radio input="Male" onRadioChange={(value) => handleInputChange("gender", value)} />
- <Radio input="Others" onRadioChange={(value) => handleInputChange("gender", value)} />
+ <Radio
+ input="Female"
+ onRadioChange={(value) => handleInputChange("gender", value)}
+ />
+ <Radio
+ input="Male"
+ onRadioChange={(value) => handleInputChange("gender", value)}
+ />
+ <Radio
+ input="Others"
+ onRadioChange={(value) => handleInputChange("gender", value)}
+ />
</div>
<div className="flex justify-center space-x-5 text-xs">
@@ -312,12 +345,17 @@ function Page() {
disabled={!isChecked} // Disable the button if isChecked is false
/> */}
-
+ <ModalCreate isOpen={isModalOpen} onClose={handleModalClose} />
- <Butt onClick={handleCreateAccount} title="Create account" Bgcolor="#EBE0D0" width="325px" height="34px" />
+ <Butt
+ onClick={handleCreateAccount}
+ title="Create account"
+ Bgcolor="#EBE0D0"
+ width="325px"
+ height="34px"
+ />
</div>
);
}
-
export default Page;