diff --git a/backend/src/controller/AuthController.ts b/backend/src/controller/AuthController.ts
index 417454789f724e3ec0182044483c7eb81fbb2bb4..d2ca83278c74c761f0dae19ce5555fdcf3ac7a4b 100644
--- a/backend/src/controller/AuthController.ts
+++ b/backend/src/controller/AuthController.ts
@@ -39,21 +39,38 @@ class AuthController {
async login(req: Request, res: Response) {
try {
- const { email, password } = req.body;
- const user = await new UsersRepo().getUserByEmail(email);
- console.log(`User ${user.email} nih! ${user.password}`);
-
- if (
- user &&
- password ==
- user.password /* && (await bcrypt.compare(password, user.password)) */
- ) {
- console.log(`User ${user.email} logged in!`);
- res.send(this.generateTokenResponse(user));
- return;
- }
+ const { email, password, role } = req.body;
+ console.log(`role: ${role} email: ${email} password: ${password}`);
+
+ if (role === "tenant-cashier") {
+ console.log("masuk tenant-cashier");
+ const user = await new UsersRepo().getUserByEmail(email);
+ console.log(`User ${user.email} nih! ${user.password}`);
+
+ if (
+ user &&
+ password ==
+ user.password /* && (await bcrypt.compare(password, user.password)) */
+ ) {
+ console.log(`User ${user.email} logged in!`);
+ res.send(this.generateTokenResponse(user));
+ return;
+ }
- res.status(BAD_REQUEST).send("Username or password is invalid");
+ res.status(BAD_REQUEST).send("Username or password is invalid");
+ } else if (role === "customer") {
+ // email is num_seat, password is id_table
+ console.log("dah bener woi");
+ const user = await new UsersRepo().getUserById(email);
+
+ if (user) {
+ console.log(`User ${user.email} logged in!`);
+ res.send(this.generateTokenResponse(user));
+ return;
+ }
+
+ res.status(BAD_REQUEST).send("Username or password is invalid");
+ }
} catch (err) {
console.error(err);
res.status(500).json({
diff --git a/backend/src/router/AuthRouter.ts b/backend/src/router/AuthRouter.ts
index 46b499c0a2fa5f1b8dd1063fab18ddd357b1a465..e270b0c8af8fd6b2f41c2a725a29e97eedf8f296 100644
--- a/backend/src/router/AuthRouter.ts
+++ b/backend/src/router/AuthRouter.ts
@@ -2,13 +2,13 @@
import BaseRoutes from "./base/BaseRouter";
import AuthController from "../controller/AuthController";
import validate from "../helper/validate";
-import { createUserSchema, loginUserSchema } from "../schema/UsersSchema";
+import { createUserSchema /* loginUserSchema */ } from "../schema/UsersSchema";
class AuthRouter extends BaseRoutes {
public routes(): void {
this.router.post(
"/login",
- validate(loginUserSchema),
+ // validate(loginUserSchema),
AuthController.login,
);
this.router.post(
diff --git a/frontend/public/images/RegisterTableImage.png b/frontend/public/images/RegisterTableImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..0812c43d90a8542646c5d567a263eecba2777e96
Binary files /dev/null and b/frontend/public/images/RegisterTableImage.png differ
diff --git a/frontend/public/images/SignUpImg.png b/frontend/public/images/SignUpImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b34319a71e425491787224358c4e748b245eac1
Binary files /dev/null and b/frontend/public/images/SignUpImg.png differ
diff --git a/frontend/public/images/WelcomingPage(Role).png b/frontend/public/images/WelcomingPage(Role).png
new file mode 100644
index 0000000000000000000000000000000000000000..e0547d27ca8c06a8bdd6cee0465c38fe85899907
Binary files /dev/null and b/frontend/public/images/WelcomingPage(Role).png differ
diff --git a/frontend/src/AppRoutes.tsx b/frontend/src/AppRoutes.tsx
index be9a82b801e79cb5bb3efe95043ffefe746257ad..8c16a86eea5b52f9bb392b48d3de0de04e94e91a 100644
--- a/frontend/src/AppRoutes.tsx
+++ b/frontend/src/AppRoutes.tsx
@@ -31,12 +31,9 @@ export default function AppRoutes() {
<Route path="/cart" element={<ShoppingCart />} />
<Route path="/order/list/:tableid" element={<OrderList />} />
<Route path="/order/summary/:orderid" element={<OrderSummary />} />
- <Route path="/tenantpage/orders" element={<PageManageOrder />} />
- <Route path="/tenantpage/menus" element={<PageManageMenu />} />
- <Route
- path="/tenantpage/orders/:orderid"
- element={<OrderDetails />}
- />
+ <Route path="/tenant/orders" element={<PageManageOrder />} />
+ <Route path="/tenant/menus" element={<PageManageMenu />} />
+ <Route path="/tenant/orders/:orderid" element={<OrderDetails />} />
<Route
path="/cashier/payments/:orderid"
element={<ManagePayment />}
diff --git a/frontend/src/components/ProfileDropDown.tsx b/frontend/src/components/ProfileDropDown.tsx
index 30bed54f2626460d3c2ea21eea736e6c944d1fe6..68d909f9aa5f8b0c141e22ac0c0348fae8410df1 100644
--- a/frontend/src/components/ProfileDropDown.tsx
+++ b/frontend/src/components/ProfileDropDown.tsx
@@ -12,7 +12,7 @@ export default function ProfileDropDown(props: any) {
</div>
<div className="py-1">
<a
- href="/login"
+ href="/role"
onClick={props.onClick}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
diff --git a/frontend/src/components/RegisterTableCard.tsx b/frontend/src/components/RegisterTableCard.tsx
index 97043fb58565fd435772c72affc61609d3466b24..c2271c407188f76dfb78296cb191a77fbff7a46b 100644
--- a/frontend/src/components/RegisterTableCard.tsx
+++ b/frontend/src/components/RegisterTableCard.tsx
@@ -1,44 +1,131 @@
+import { useState, useEffect } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+interface LoginFormInput {
+ num_seat: string;
+ id_table: string;
+}
+
export default function RegisterTableCard() {
+ const {
+ handleSubmit,
+ register,
+ formState: { errors },
+ } = useForm<LoginFormInput>();
+
+ const navigate = useNavigate();
+ const { user, login } = useAuth();
+ const [params] = useSearchParams();
+ const returnUrl = params.get("returnUrl");
+
+ useEffect(() => {
+ if (!user) return;
+ returnUrl ? navigate(returnUrl) : navigate("/");
+ }, [user]);
+
+ const submit: SubmitHandler<LoginFormInput> = async () => {
+ const email = `table${idTable}@gmail.com`;
+ await login(email, "table", "customer");
+ };
+
+ const [numSeat, setNumSeat] = useState<string>("");
+ const [idTable, setIdTable] = useState<string>("");
+
+ function handleSelectNumSeat(event: React.ChangeEvent<HTMLSelectElement>) {
+ console.log(event.target.value);
+ setNumSeat(event.target.value);
+ }
+
+ function handleSelectIdTable(event: React.ChangeEvent<HTMLSelectElement>) {
+ console.log(event.target.value);
+ setIdTable(event.target.value);
+ }
+
return (
<div className="h-3/4 w-3/4 bg-white rounded-3xl shadow-xl py-10 px-16">
- <h1 className="text-mealshub-orange text-3xl font-bold text-center mb-16">Register Table</h1>
- <h2 className="text-mealshub-orange text-xl font-bold mb-4">Number of People</h2>
- <div className="flex flex-row mb-8">
- <div className="flex flex-row h-16 w-1/6 bg-mealshub-orange rounded-2xl justify-center items-center">
- <svg xmlns="http://www.w3.org/2000/svg" width="45" height="25" viewBox="0 0 56 36" fill="none">
- <path d="M38 15.5C42.15 15.5 45.475 12.15 45.475 8C45.475 3.85 42.15 0.5 38 0.5C33.85 0.5 30.5 3.85 30.5 8C30.5 12.15 33.85 15.5 38 15.5ZM18 15.5C22.15 15.5 25.475 12.15 25.475 8C25.475 3.85 22.15 0.5 18 0.5C13.85 0.5 10.5 3.85 10.5 8C10.5 12.15 13.85 15.5 18 15.5ZM18 20.5C12.175 20.5 0.5 23.425 0.5 29.25V35.5H35.5V29.25C35.5 23.425 23.825 20.5 18 20.5ZM38 20.5C37.275 20.5 36.45 20.55 35.575 20.625C38.475 22.725 40.5 25.55 40.5 29.25V35.5H55.5V29.25C55.5 23.425 43.825 20.5 38 20.5Z" fill="white"/>
- </svg>
+ <h1 className="text-mealshub-orange text-3xl font-bold text-center mb-16">
+ Register Table
+ </h1>
+ <form onSubmit={handleSubmit(submit)}>
+ <h2 className="text-mealshub-orange text-xl font-bold mb-4">
+ Number of People
+ </h2>
+ <div className="flex flex-row mb-8">
+ <div className="flex flex-row h-16 w-1/6 bg-mealshub-orange rounded-2xl justify-center items-center">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="45"
+ height="25"
+ viewBox="0 0 56 36"
+ fill="none"
+ >
+ <path
+ d="M38 15.5C42.15 15.5 45.475 12.15 45.475 8C45.475 3.85 42.15 0.5 38 0.5C33.85 0.5 30.5 3.85 30.5 8C30.5 12.15 33.85 15.5 38 15.5ZM18 15.5C22.15 15.5 25.475 12.15 25.475 8C25.475 3.85 22.15 0.5 18 0.5C13.85 0.5 10.5 3.85 10.5 8C10.5 12.15 13.85 15.5 18 15.5ZM18 20.5C12.175 20.5 0.5 23.425 0.5 29.25V35.5H35.5V29.25C35.5 23.425 23.825 20.5 18 20.5ZM38 20.5C37.275 20.5 36.45 20.55 35.575 20.625C38.475 22.725 40.5 25.55 40.5 29.25V35.5H55.5V29.25C55.5 23.425 43.825 20.5 38 20.5Z"
+ fill="white"
+ />
+ </svg>
+ </div>
+
+ <select
+ id="category"
+ className="border-2 border-mealshub-orange focus:ring-mealshub-orange focus:border-mealshub-orange text-gray-500 text-normal rounded-xl block w-full p-4"
+ onChange={handleSelectNumSeat}
+ defaultValue={numSeat}
+ >
+ <option selected={true}>Number of People</option>
+ <option value="1">4</option>
+ <option value="2">2</option>
+ <option value="3">5</option>
+ <option value="4">8</option>
+ <option value="5">5</option>
+ </select>
</div>
- <select id="category" className="border-2 border-mealshub-orange focus:ring-mealshub-orange focus:border-mealshub-orange text-gray-500 text-normal rounded-xl block w-full p-4">
- <option selected={true}>Number of People</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- </select>
- </div>
- <h2 className="text-mealshub-orange text-xl font-bold mb-4">Number of Table</h2>
- <div className="flex flex-row mb-8">
- <div className="flex flex-row h-16 w-1/6 bg-mealshub-orange rounded-2xl justify-center items-center">
- <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 50 50" fill="none">
- <path d="M32.5 5.55556V25H17.5V5.55556H32.5ZM32.5 0H17.5C16.1739 0 14.9021 0.585316 13.9645 1.62718C13.0268 2.66905 12.5 4.08213 12.5 5.55556V30.5556H37.5V5.55556C37.5 4.08213 36.9732 2.66905 36.0355 1.62718C35.0979 0.585316 33.8261 0 32.5 0ZM50 19.4444H42.5V27.7778H50V19.4444ZM7.5 19.4444H0V27.7778H7.5V19.4444ZM45 33.3333H5V50H10V38.8889H40V50H45V33.3333Z" fill="white"/>
- </svg>
+ <h2 className="text-mealshub-orange text-xl font-bold mb-4">
+ Number of Table
+ </h2>
+ <div className="flex flex-row mb-8">
+ <div className="flex flex-row h-16 w-1/6 bg-mealshub-orange rounded-2xl justify-center items-center">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="35"
+ height="35"
+ viewBox="0 0 50 50"
+ fill="none"
+ >
+ <path
+ d="M32.5 5.55556V25H17.5V5.55556H32.5ZM32.5 0H17.5C16.1739 0 14.9021 0.585316 13.9645 1.62718C13.0268 2.66905 12.5 4.08213 12.5 5.55556V30.5556H37.5V5.55556C37.5 4.08213 36.9732 2.66905 36.0355 1.62718C35.0979 0.585316 33.8261 0 32.5 0ZM50 19.4444H42.5V27.7778H50V19.4444ZM7.5 19.4444H0V27.7778H7.5V19.4444ZM45 33.3333H5V50H10V38.8889H40V50H45V33.3333Z"
+ fill="white"
+ />
+ </svg>
+ </div>
+ <select
+ id="category"
+ className="border-2 border-mealshub-orange focus:ring-mealshub-orange focus:border-mealshub-orange text-gray-500 text-normal rounded-xl block w-full p-4"
+ onChange={handleSelectIdTable}
+ value={idTable}
+ >
+ <option
+ selected={true}
+ className="hover:bg-mealshub-orange"
+ >
+ Number of Table
+ </option>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ </select>
</div>
- <select id="category" className="border-2 border-mealshub-orange focus:ring-mealshub-orange focus:border-mealshub-orange text-gray-500 text-normal rounded-xl block w-full p-4">
- <option selected={true} className="hover:bg-mealshub-orange">Number of Table</option>
- <option value="1" className="hover:bg-mealshub-orange">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- </select>
- </div>
- <button className="w-full text-white bg-mealshub-orange font-bold text-xl rounded-full px-5 py-4 text-center shadow-xl mt-8">
- Get Table
- </button>
+ <button
+ type="submit"
+ className="w-full text-white bg-mealshub-orange font-bold text-xl rounded-full px-5 py-4 text-center shadow-xl mt-8"
+ >
+ Get Table
+ </button>
+ </form>
</div>
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/components/RoleCard.tsx b/frontend/src/components/RoleCard.tsx
index 9afaf105c2a671de56b70d5bbcb02c36b5c3362b..7870b51389463a6dd41fa09733fc290beb65f483 100644
--- a/frontend/src/components/RoleCard.tsx
+++ b/frontend/src/components/RoleCard.tsx
@@ -1,110 +1,130 @@
+import { Link } from "react-router-dom";
+
export default function RoleCard() {
return (
<div className="w-3/4 bg-white rounded-3xl shadow-xl py-8 px-10">
<h1 className="text-mealshub-orange text-3xl font-bold mb-12">
Who Are You?
</h1>
- <button
- type="button"
- className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-7"
- >
- <div className="flex flex-col w-52">
- <a href="#" className="flex items-center rounded-lg group">
- <div className="absolute group text-mealshub-orange ms-2">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="35"
- height="35"
- viewBox="0 0 45 45"
- fill="none"
- >
- <mask
- id="mask0_60_761"
- maskUnits="userSpaceOnUse"
- x="5"
- y="1"
+ <Link to="/login/customer">
+ <button
+ type="button"
+ className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-7"
+ >
+ <div className="flex flex-col w-52">
+ <a
+ href="/login/customer"
+ className="flex items-center rounded-lg group"
+ >
+ <div className="absolute group text-mealshub-orange ms-2">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
width="35"
- height="43"
+ height="35"
+ viewBox="0 0 45 45"
+ fill="none"
+ >
+ <mask
+ id="mask0_60_761"
+ maskUnits="userSpaceOnUse"
+ x="5"
+ y="1"
+ width="35"
+ height="43"
+ >
+ <path
+ d="M13.125 3.75V41.25M7.5 4.6875V14.0625C7.5 18.75 13.125 18.75 13.125 18.75C13.125 18.75 18.75 18.75 18.75 14.0625V4.6875M31.875 18.75V41.25"
+ stroke="white"
+ stroke-width="4"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M37.5 11.25C37.5 15.3919 34.9819 18.75 31.875 18.75C28.7681 18.75 26.25 15.3919 26.25 11.25C26.25 7.10812 28.7681 3.75 31.875 3.75C34.9819 3.75 37.5 7.10812 37.5 11.25Z"
+ fill="white"
+ stroke="white"
+ stroke-width="4"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </mask>
+ <g mask="url(#mask0_60_761)">
+ <path
+ d="M0 0H45V45H0V0Z"
+ fill="white"
+ />
+ </g>
+ </svg>
+ </div>
+ <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
+ Customer
+ </span>
+ </a>
+ </div>
+ </button>
+ </Link>
+ <Link to="/login">
+ <button
+ type="button"
+ className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-7"
+ >
+ <div className="flex flex-col w-52">
+ <a
+ href="/login"
+ className="flex items-center rounded-lg group"
+ >
+ <div className="absolute group text-mealshub-orange ms-2">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="35"
+ height="35"
+ viewBox="0 0 45 45"
+ fill="none"
>
<path
- d="M13.125 3.75V41.25M7.5 4.6875V14.0625C7.5 18.75 13.125 18.75 13.125 18.75C13.125 18.75 18.75 18.75 18.75 14.0625V4.6875M31.875 18.75V41.25"
- stroke="white"
- stroke-width="4"
- stroke-linecap="round"
- stroke-linejoin="round"
+ d="M39.375 28.125C39.375 19.4531 32.7994 12.2981 24.375 11.3606V7.5H20.625V11.3606C12.2006 12.2981 5.625 19.4531 5.625 28.125V31.875H39.375V28.125ZM3.75 33.75H41.25V37.5H3.75V33.75Z"
+ fill="white"
/>
+ </svg>
+ </div>
+ <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
+ Tenant
+ </span>
+ </a>
+ </div>
+ </button>
+ </Link>
+ <Link to="/login">
+ <button
+ type="button"
+ className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-5"
+ >
+ <div className="flex flex-col w-52">
+ <a
+ href="/login"
+ className="flex items-center rounded-lg group"
+ >
+ <div className="absolute group text-mealshub-orange ms-2">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="35"
+ height="35"
+ viewBox="0 0 45 45"
+ fill="none"
+ >
<path
- d="M37.5 11.25C37.5 15.3919 34.9819 18.75 31.875 18.75C28.7681 18.75 26.25 15.3919 26.25 11.25C26.25 7.10812 28.7681 3.75 31.875 3.75C34.9819 3.75 37.5 7.10812 37.5 11.25Z"
+ d="M22.5 15.4688C21.1094 15.4688 19.7499 15.8811 18.5936 16.6537C17.4374 17.4263 16.5361 18.5245 16.004 19.8093C15.4718 21.0941 15.3326 22.5078 15.6039 23.8717C15.8752 25.2357 16.5448 26.4885 17.5282 27.4718C18.5115 28.4552 19.7643 29.1248 21.1283 29.3961C22.4922 29.6674 23.906 29.5282 25.1907 28.996C26.4755 28.4639 27.5737 27.5626 28.3463 26.4064C29.1189 25.2501 29.5312 23.8906 29.5312 22.5C29.5312 20.6352 28.7905 18.8468 27.4718 17.5282C26.1532 16.2095 24.3648 15.4688 22.5 15.4688ZM22.5 26.7188C21.6656 26.7188 20.85 26.4713 20.1562 26.0078C19.4624 25.5442 18.9217 24.8853 18.6024 24.1144C18.2831 23.3436 18.1995 22.4953 18.3623 21.677C18.5251 20.8586 18.9269 20.1069 19.5169 19.5169C20.1069 18.9269 20.8586 18.5251 21.677 18.3623C22.4953 18.1995 23.3436 18.2831 24.1144 18.6024C24.8853 18.9217 25.5442 19.4624 26.0078 20.1562C26.4713 20.85 26.7188 21.6656 26.7188 22.5C26.7188 23.6189 26.2743 24.6919 25.4831 25.4831C24.6919 26.2743 23.6189 26.7188 22.5 26.7188ZM42.1875 9.84375H2.8125C2.43954 9.84375 2.08185 9.99191 1.81813 10.2556C1.55441 10.5194 1.40625 10.877 1.40625 11.25V33.75C1.40625 34.123 1.55441 34.4806 1.81813 34.7444C2.08185 35.0081 2.43954 35.1562 2.8125 35.1562H42.1875C42.5605 35.1562 42.9181 35.0081 43.1819 34.7444C43.4456 34.4806 43.5938 34.123 43.5938 33.75V11.25C43.5938 10.877 43.4456 10.5194 43.1819 10.2556C42.9181 9.99191 42.5605 9.84375 42.1875 9.84375ZM34.04 32.3438H10.96C10.4878 30.747 9.62368 29.2937 8.44626 28.1162C7.26884 26.9388 5.81554 26.0747 4.21875 25.6025V19.3975C5.81554 18.9253 7.26884 18.0612 8.44626 16.8838C9.62368 15.7063 10.4878 14.253 10.96 12.6562H34.04C34.5122 14.253 35.3763 15.7063 36.5537 16.8838C37.7312 18.0612 39.1845 18.9253 40.7812 19.3975V25.6025C39.1845 26.0747 37.7312 26.9388 36.5537 28.1162C35.3763 29.2937 34.5122 30.747 34.04 32.3438ZM40.7812 16.4127C39.0945 15.6874 37.7501 14.343 37.0248 12.6562H40.7812V16.4127ZM7.97519 12.6562C7.24991 14.343 5.90548 15.6874 4.21875 16.4127V12.6562H7.97519ZM4.21875 28.5873C5.90548 29.3126 7.24991 30.657 7.97519 32.3438H4.21875V28.5873ZM37.0248 32.3438C37.7501 30.657 39.0945 29.3126 40.7812 28.5873V32.3438H37.0248Z"
fill="white"
- stroke="white"
- stroke-width="4"
- stroke-linecap="round"
- stroke-linejoin="round"
/>
- </mask>
- <g mask="url(#mask0_60_761)">
- <path d="M0 0H45V45H0V0Z" fill="white" />
- </g>
- </svg>
- </div>
- <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
- Customer
- </span>
- </a>
- </div>
- </button>
- <button
- type="button"
- className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-7"
- >
- <div className="flex flex-col w-52">
- <a href="#" className="flex items-center rounded-lg group">
- <div className="absolute group text-mealshub-orange ms-2">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="35"
- height="35"
- viewBox="0 0 45 45"
- fill="none"
- >
- <path
- d="M39.375 28.125C39.375 19.4531 32.7994 12.2981 24.375 11.3606V7.5H20.625V11.3606C12.2006 12.2981 5.625 19.4531 5.625 28.125V31.875H39.375V28.125ZM3.75 33.75H41.25V37.5H3.75V33.75Z"
- fill="white"
- />
- </svg>
- </div>
- <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
- Tenant
- </span>
- </a>
- </div>
- </button>
- <button
- type="button"
- className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-5"
- >
- <div className="flex flex-col w-52">
- <a href="#" className="flex items-center rounded-lg group">
- <div className="absolute group text-mealshub-orange ms-2">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="35"
- height="35"
- viewBox="0 0 45 45"
- fill="none"
- >
- <path
- d="M22.5 15.4688C21.1094 15.4688 19.7499 15.8811 18.5936 16.6537C17.4374 17.4263 16.5361 18.5245 16.004 19.8093C15.4718 21.0941 15.3326 22.5078 15.6039 23.8717C15.8752 25.2357 16.5448 26.4885 17.5282 27.4718C18.5115 28.4552 19.7643 29.1248 21.1283 29.3961C22.4922 29.6674 23.906 29.5282 25.1907 28.996C26.4755 28.4639 27.5737 27.5626 28.3463 26.4064C29.1189 25.2501 29.5312 23.8906 29.5312 22.5C29.5312 20.6352 28.7905 18.8468 27.4718 17.5282C26.1532 16.2095 24.3648 15.4688 22.5 15.4688ZM22.5 26.7188C21.6656 26.7188 20.85 26.4713 20.1562 26.0078C19.4624 25.5442 18.9217 24.8853 18.6024 24.1144C18.2831 23.3436 18.1995 22.4953 18.3623 21.677C18.5251 20.8586 18.9269 20.1069 19.5169 19.5169C20.1069 18.9269 20.8586 18.5251 21.677 18.3623C22.4953 18.1995 23.3436 18.2831 24.1144 18.6024C24.8853 18.9217 25.5442 19.4624 26.0078 20.1562C26.4713 20.85 26.7188 21.6656 26.7188 22.5C26.7188 23.6189 26.2743 24.6919 25.4831 25.4831C24.6919 26.2743 23.6189 26.7188 22.5 26.7188ZM42.1875 9.84375H2.8125C2.43954 9.84375 2.08185 9.99191 1.81813 10.2556C1.55441 10.5194 1.40625 10.877 1.40625 11.25V33.75C1.40625 34.123 1.55441 34.4806 1.81813 34.7444C2.08185 35.0081 2.43954 35.1562 2.8125 35.1562H42.1875C42.5605 35.1562 42.9181 35.0081 43.1819 34.7444C43.4456 34.4806 43.5938 34.123 43.5938 33.75V11.25C43.5938 10.877 43.4456 10.5194 43.1819 10.2556C42.9181 9.99191 42.5605 9.84375 42.1875 9.84375ZM34.04 32.3438H10.96C10.4878 30.747 9.62368 29.2937 8.44626 28.1162C7.26884 26.9388 5.81554 26.0747 4.21875 25.6025V19.3975C5.81554 18.9253 7.26884 18.0612 8.44626 16.8838C9.62368 15.7063 10.4878 14.253 10.96 12.6562H34.04C34.5122 14.253 35.3763 15.7063 36.5537 16.8838C37.7312 18.0612 39.1845 18.9253 40.7812 19.3975V25.6025C39.1845 26.0747 37.7312 26.9388 36.5537 28.1162C35.3763 29.2937 34.5122 30.747 34.04 32.3438ZM40.7812 16.4127C39.0945 15.6874 37.7501 14.343 37.0248 12.6562H40.7812V16.4127ZM7.97519 12.6562C7.24991 14.343 5.90548 15.6874 4.21875 16.4127V12.6562H7.97519ZM4.21875 28.5873C5.90548 29.3126 7.24991 30.657 7.97519 32.3438H4.21875V28.5873ZM37.0248 32.3438C37.7501 30.657 39.0945 29.3126 40.7812 28.5873V32.3438H37.0248Z"
- fill="white"
- />
- </svg>
- </div>
- <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
- Central Cashier
- </span>
- </a>
- </div>
- </button>
+ </svg>
+ </div>
+ <span className="flex ms-14 whitespace-nowrap text-2xl text-left">
+ Central Cashier
+ </span>
+ </a>
+ </div>
+ </button>
+ </Link>
</div>
);
}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index fba50570256719fa00ddf11fa7f8ea5caa14af03..7efbeaec54fc69ea12075c913e8dadc2be96a61b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -10,7 +10,7 @@ export default function Sidebar(props: any) {
const returnUrl = params.get("returnUrl");
useEffect(() => {
- if (!user) navigate("/login");
+ if (!user) navigate("/role");
// returnUrl ? navigate(returnUrl) : navigate("/");
}, [user]);
diff --git a/frontend/src/components/TableOrder.tsx b/frontend/src/components/TableOrder.tsx
index 154c218be14b7b32d46ccddca6e38809a7111ec1..6ca8cf57eac61bad7968b6ad4245c5361d67a869 100644
--- a/frontend/src/components/TableOrder.tsx
+++ b/frontend/src/components/TableOrder.tsx
@@ -53,10 +53,11 @@ function TableOrder({ data }: { data: Props[] }) {
return (
<button
onClick={onClick}
- className={`${sortKey === columnKey && sortOrder === "desc"
- ? "sort-button sort-reverse"
- : "sort-button"
- }`}
+ className={`${
+ sortKey === columnKey && sortOrder === "desc"
+ ? "sort-button sort-reverse"
+ : "sort-button"
+ }`}
>
<svg
className="w-3 h-3 ms-1.5"
@@ -185,7 +186,7 @@ function TableOrder({ data }: { data: Props[] }) {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyPress={(e) => {
- if (e.key === 'Enter') {
+ if (e.key === "Enter") {
e.preventDefault();
}
}}
@@ -276,14 +277,19 @@ function TableOrder({ data }: { data: Props[] }) {
{filteredRecords
.slice(firstIndex, lastIndex)
.map((record, index) => {
- const date = moment(record.time).format("DD/MM/YYYY hh:mm:ss");
+ const date = moment(record.time).format(
+ "DD/MM/YYYY hh:mm:ss",
+ );
return (
- <tr className="odd:bg-white even:bg-gray-50 border-b" key={record.orderId}>
+ <tr
+ className="odd:bg-white even:bg-gray-50 border-b"
+ key={record.orderId}
+ >
<td className="px-6 py-4">
{index +
1 +
(currentPage - 1) *
- recordsPerPage}
+ recordsPerPage}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{record.orderId}
@@ -305,7 +311,7 @@ function TableOrder({ data }: { data: Props[] }) {
</td>
<td className="px-6 py-4">
<a
- href={`/tenantpage/orders/${record.orderId}`}
+ href={`/tenant/orders/${record.orderId}`}
className="text-mealshub-blue hover:underline"
>
Click for Details
@@ -355,10 +361,11 @@ function TableOrder({ data }: { data: Props[] }) {
<li>
<a
href="#"
- className={`page-item ${currentPage === n
- ? "z-10 flex items-center justify-center px-3 h-8 leading-tight text-mealshub-blue rounded-lg bg-mealshub-greenpalet hover:bg-blue-100 hover:text-blue-700 mx-1"
- : "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 mx-1"
- }`}
+ className={`page-item ${
+ currentPage === n
+ ? "z-10 flex items-center justify-center px-3 h-8 leading-tight text-mealshub-blue rounded-lg bg-mealshub-greenpalet hover:bg-blue-100 hover:text-blue-700 mx-1"
+ : "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 mx-1"
+ }`}
key={i}
onClick={() => setCurrentPage(n)}
>
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx
index c1baf050d73a6af8ffefe5a6bc21b1a22fa66b6c..80f5f37171ef3e2794f3d52f7900e02663d6effc 100644
--- a/frontend/src/hooks/useAuth.tsx
+++ b/frontend/src/hooks/useAuth.tsx
@@ -11,9 +11,17 @@ interface AuthUser {
token: string;
}
+interface AuthTable {
+ num_seat: number;
+ id_table: number;
+ fullname: string;
+ email: string;
+ id: number;
+}
+
interface AuthContextProps {
- user: AuthUser | null;
- login: (email: string, password: string) => Promise<void>;
+ user: AuthUser | AuthTable | null;
+ login: (email: string, password: string, role: string) => Promise<void>;
logout: () => void;
showUser: () => void;
}
@@ -26,17 +34,39 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({
const [user, setUser] = useState(userService.getUser());
console.log(user);
- const login = async (email: string, password: string) => {
- try {
- console.log(`email: ${email}, password: ${password}. MASUK`);
- const loggedInUser = await userService.login(email, password);
- setUser(loggedInUser);
- toast.success("Logged in successfully.");
- } catch (error: any) {
- toast.error(
- error.response?.data?.message ||
- "An error occurred during login.",
- );
+ const login = async (email: string, password: string, role: string) => {
+ if (role === "tenant-cashier") {
+ try {
+ console.log(`email: ${email}, password: ${password}. MASUK`);
+ const loggedInUser = await userService.login(
+ email,
+ password,
+ "tenant-cashier",
+ );
+ setUser(loggedInUser);
+ toast.success("Logged in successfully.");
+ } catch (error: any) {
+ toast.error(
+ error.response?.data?.message ||
+ "An error occurred during login.",
+ );
+ }
+ } else if (role === "customer") {
+ try {
+ console.log(`num_seat: ${email}, id_table: ${password}. MASUK`);
+ const loggedInUser = await userService.login(
+ email,
+ password,
+ "customer",
+ );
+ setUser(loggedInUser);
+ toast.success("Logged in successfully.");
+ } catch (error: any) {
+ toast.error(
+ error.response?.data?.message ||
+ "An error occurred during login.",
+ );
+ }
}
};
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 4c191f11a01af4c1f46c3e9ea4381d2f18fbbb72..57713d4f5a4f6e88257eb143793ca08c05f9960c 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -4,6 +4,7 @@ import Sidebar from "../components/Sidebar";
import TenantCard from "../components/TenantCard";
import Search from "../components/Search";
import WelcomingText from "../components/WelcomingText";
+import { useAuth } from "../hooks/useAuth";
interface Tenant {
id: number;
@@ -20,6 +21,7 @@ interface Product {
}
export default function Homepage() {
+ const { user } = useAuth();
const [dataTenant, setDataTenant] = useState<Tenant[]>([]);
const [dataProduct, setDataProduct] = useState<Product[]>([]);
const [searchTerm, setSearchTerm] = useState<string>("");
@@ -102,7 +104,7 @@ export default function Homepage() {
<div className="col-span-4">
<div className="ms-20">
<div className="row-span-1 mt-9 py-3 w-11/12">
- <WelcomingText name="Table 1" />
+ <WelcomingText name={user ? user!.fullname : ""} />
</div>
<div className="row-span-1 mt-6 py-3 w-11/12">
<Search
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index e4de711ad6a56441c38e0254d699378bbb66128a..8c76b711f68e52009b78848bb1eba8dd4b965bb6 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";
@@ -11,9 +11,6 @@ interface LoginFormInput {
}
export default function LoginPage() {
- const [email, setEmail] = useState<string>("");
- const [password, setPassword] = useState<string>("");
-
const {
handleSubmit,
register,
@@ -27,7 +24,7 @@ export default function LoginPage() {
useEffect(() => {
if (!user) return;
- returnUrl ? navigate(returnUrl) : navigate("/");
+ returnUrl ? navigate(returnUrl) : navigate("/tenant/menus");
}, [user]);
const submit: SubmitHandler<LoginFormInput> = async ({
@@ -35,7 +32,7 @@ export default function LoginPage() {
password,
}) => {
console.log(`email: ${email}, password: ${password}. MASUK`);
- await login(email, password);
+ await login(email, password, "tenant-cashier");
};
return (
diff --git a/frontend/src/pages/ManageOrderTenant.tsx b/frontend/src/pages/ManageOrderTenant.tsx
index f8b1e4a8f6f8dda0b1ba351e865d8ee3a8a8c258..6495a4e53f9dc9e149fd4b5df97a1746487404dc 100644
--- a/frontend/src/pages/ManageOrderTenant.tsx
+++ b/frontend/src/pages/ManageOrderTenant.tsx
@@ -10,48 +10,48 @@ import Axios from "axios";
import { useParams } from "react-router-dom";
interface Order {
- id: number,
- status: string,
- time: Date,
- id_table: number,
- id_tenant: number
+ id: number;
+ status: string;
+ time: Date;
+ id_table: number;
+ id_tenant: number;
}
interface OrderProduct {
- num_product: number,
- id_product: number,
- id_order: number
+ num_product: number;
+ id_product: number;
+ id_order: number;
}
interface Product {
- id: number,
- name: string,
- price: number
+ id: number;
+ name: string;
+ price: number;
}
interface Tenant {
- id: number,
- name: string
+ id: number;
+ name: string;
}
interface Payment {
- id: number,
- status: string,
- id_order: number
+ id: number;
+ status: string;
+ id_order: number;
}
interface OrderSummary {
- name: string,
- orderlist: (string | number)[][]
+ name: string;
+ orderlist: (string | number)[][];
}
interface OrderDetails {
- orderid: number,
- code: number,
- tableid: number,
- time: Date,
- orderstatus: string,
- paymentstatus: string
+ orderid: number;
+ code: number;
+ tableid: number;
+ time: Date;
+ orderstatus: string;
+ paymentstatus: string;
}
export default function OrderDetails() {
@@ -61,12 +61,20 @@ export default function OrderDetails() {
const handleProfileClick = () => {
setShowProfileDropDown(!showProfileDropDown);
};
- const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<OrderSummary[]>([]);
+ const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<
+ OrderSummary[]
+ >([]);
const getOrderSummaryData = async () => {
- const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
- const productResponse = await Axios.get("http://localhost:8000/products");
- const orderProductResponse = await Axios.get("http://localhost:8000/orderproduct");
+ const orderResponse = await Axios.get(
+ `http://localhost:8000/orders/${orderid}`,
+ );
+ const productResponse = await Axios.get(
+ "http://localhost:8000/products",
+ );
+ const orderProductResponse = await Axios.get(
+ "http://localhost:8000/orderproduct",
+ );
const tenantResponse = await Axios.get("http://localhost:8000/tenants");
const orderData = orderResponse.data.data;
@@ -78,21 +86,34 @@ export default function OrderDetails() {
// OrderData is not an array, so we need to convert it into an array
const orderDataArray = [orderData];
const result = orderDataArray.map((order: Order) => {
- const tenant = tenantData.find((tenant: Tenant) => tenant.id === order.id_tenant);
- const orderproduct = orderProductData.filter((orderProduct: OrderProduct) => orderProduct.id_order === order.id);
- const listproduct = orderproduct.map((orderProduct: OrderProduct) => {
- const product = productData.find((product: Product) => product.id === orderProduct.id_product);
- return [product?.name || 'Product Not Found', orderProduct.num_product, product?.price || 0];
- });
+ const tenant = tenantData.find(
+ (tenant: Tenant) => tenant.id === order.id_tenant,
+ );
+ const orderproduct = orderProductData.filter(
+ (orderProduct: OrderProduct) =>
+ orderProduct.id_order === order.id,
+ );
+ const listproduct = orderproduct.map(
+ (orderProduct: OrderProduct) => {
+ const product = productData.find(
+ (product: Product) =>
+ product.id === orderProduct.id_product,
+ );
+ return [
+ product?.name || "Product Not Found",
+ orderProduct.num_product,
+ product?.price || 0,
+ ];
+ },
+ );
return {
- name: tenant?.name || 'Tenant Not Found',
- orderlist: listproduct
+ name: tenant?.name || "Tenant Not Found",
+ orderlist: listproduct,
};
});
setJoinedOrderSummaryData(result);
-
};
useEffect(() => {
@@ -101,11 +122,17 @@ export default function OrderDetails() {
console.log(joinedOrderSummaryData);
- const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<OrderDetails[]>([]);
+ const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<
+ OrderDetails[]
+ >([]);
const getOrderDetailsData = async () => {
- const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
- const paymentResponse = await Axios.get("http://localhost:8000/payments");
+ const orderResponse = await Axios.get(
+ `http://localhost:8000/orders/${orderid}`,
+ );
+ const paymentResponse = await Axios.get(
+ "http://localhost:8000/payments",
+ );
const orderData = orderResponse.data.data;
const paymentData = paymentResponse.data.data;
@@ -113,7 +140,9 @@ export default function OrderDetails() {
// Perform the join based on the specified conditions
const OrderDataArray = [orderData];
const result = OrderDataArray.map((order: Order) => {
- const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+ const matchingPayment = paymentData.find(
+ (payment: Payment) => payment.id_order === order.id,
+ );
return {
orderid: order.id,
@@ -121,12 +150,11 @@ export default function OrderDetails() {
tableid: order.id_table,
time: order.time,
orderstatus: order.status,
- paymentstatus: matchingPayment.status
+ paymentstatus: matchingPayment.status,
};
});
setJoinedOrderDetailsData(result);
-
};
useEffect(() => {
@@ -140,7 +168,7 @@ export default function OrderDetails() {
label: "Waiting for Payment",
disabled: true,
color: "mealshub-greenpalet",
- onClick: () => { },
+ onClick: () => {},
});
useEffect(() => {
@@ -158,24 +186,32 @@ export default function OrderDetails() {
label: "Waiting for Payment",
disabled: true,
color: "mealshub-greenpalet",
- onClick: () => { },
+ onClick: () => {},
});
- } else if (paymentStatus === "Confirmed" && orderStatus === "Waiting for Payment") {
+ } else if (
+ paymentStatus === "Confirmed" &&
+ orderStatus === "Waiting for Payment"
+ ) {
setButtonState({
label: "Prepare Order",
disabled: false,
color: "mealshub-red",
onClick: handlePrepareOrder,
});
- } else if (paymentStatus === "Confirmed" && orderStatus === "Prepared") {
+ } else if (
+ paymentStatus === "Confirmed" &&
+ orderStatus === "Prepared"
+ ) {
setButtonState({
label: "Complete Order",
disabled: false,
color: "mealshub-red",
onClick: handleCompleteOrder,
});
- }
- else if (paymentStatus === "Confirmed" && orderStatus === "Completed") {
+ } else if (
+ paymentStatus === "Confirmed" &&
+ orderStatus === "Completed"
+ ) {
setButtonState({
label: "Completed",
disabled: true,
@@ -189,7 +225,7 @@ export default function OrderDetails() {
const handlePrepareOrder = async () => {
// Call API or perform actions to update order status to "Prepared"
await Axios.patch(`http://localhost:8000/orders/${orderid}`, {
- status: "Prepared"
+ status: "Prepared",
});
getOrderDetailsData();
// Set button state accordingly
@@ -204,7 +240,7 @@ export default function OrderDetails() {
const handleCompleteOrder = async () => {
// Call API or perform actions to update order status to "Completed"
await Axios.patch(`http://localhost:8000/orders/${orderid}`, {
- status: "Completed"
+ status: "Completed",
});
getOrderDetailsData();
// Set button state accordingly
@@ -212,7 +248,7 @@ export default function OrderDetails() {
label: "Completed",
disabled: true,
color: "mealshub-greenpalet",
- onClick: () => { },
+ onClick: () => {},
});
};
return (
@@ -221,15 +257,15 @@ export default function OrderDetails() {
{/* Sidebar */}
<div className="col-span-1 row-span-8">
<Sidebar
- default="/tenantpage/menus"
+ default="/tenant/menus"
number={2}
current={2}
menu1="Menu"
path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
- page1="/tenantpage/menus"
+ page1="/tenant/menus"
menu2="Orders"
path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
- page2="/tenantpage/orders"
+ page2="/tenant/orders"
/>
</div>
{/* Header */}
@@ -238,17 +274,27 @@ export default function OrderDetails() {
<Welcome user="Aldaebaran" />
</div>
<div className="absolute top-0 right-0 mt-9 mx-12">
- <Profile image="/public/images/ProfileDefault.png" onProfileClick={handleProfileClick} />
+ <Profile
+ image="/public/images/ProfileDefault.png"
+ onProfileClick={handleProfileClick}
+ />
</div>
<div className="absolute top-12 right-0 mt-9 mx-12">
- {showProfileDropDown && <ProfileDropDown name="Aldaebaran" email="Aldaebaran@example.com" />}
+ {showProfileDropDown && (
+ <ProfileDropDown
+ name="Aldaebaran"
+ email="Aldaebaran@example.com"
+ />
+ )}
</div>
<div className="row-span-7 mt-6 mb-9 w-11/12">
<div className="ms-4">
- <BackButton page="/tenantpage/orders" />
+ <BackButton page="/tenant/orders" />
</div>
<div className="ms-20 py-12 bg-white rounded-3xl">
- <h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Details</h2>
+ <h2 className="text-mealshub-red text-3xl font-bold ms-16">
+ Order Details
+ </h2>
<OrderDetailsCard data={joinedOrderDetailsData} />
<OrderSummaryCard data={joinedOrderSummaryData} />
<div className="flex flex-col items-center">
@@ -264,5 +310,5 @@ export default function OrderDetails() {
</div>
</div>
</div>
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/pages/PageManageMenu.tsx b/frontend/src/pages/PageManageMenu.tsx
index 6f6a895ebe5c3457e8757b1c4abaa16ce8b2a6ec..e10936e93f8771cc9f577ae3fd1b2058ddd142d8 100644
--- a/frontend/src/pages/PageManageMenu.tsx
+++ b/frontend/src/pages/PageManageMenu.tsx
@@ -9,42 +9,50 @@ import DeletePopUp from "../components/DeletePopUp";
import { useState, useEffect } from "react";
import AddForm from "../components/AddForm";
import ProfileDropDown from "../components/ProfileDropDown";
+import { useAuth } from "../hooks/useAuth";
import Axios from "axios";
interface Product {
- id: number,
- image: string,
- name: string,
- description: string,
- price: number,
- stock: number,
- id_tenant: number
+ id: number;
+ image: string;
+ name: string;
+ description: string;
+ price: number;
+ stock: number;
+ id_tenant: number;
}
interface MenuCard {
- id: number,
- image: string,
- name: string,
- description: string,
- price: number,
- stock: number
+ id: number;
+ image: string;
+ name: string;
+ description: string;
+ price: number;
+ stock: number;
}
export default function PageManageMenu() {
- const idTenant = 1;
+ const { user, logout } = useAuth();
+ const idTenant = user!.id;
const [MenuData, setMenuData] = useState<MenuCard[]>([]);
const getMenuData = async () => {
- const tenantResponse = await Axios.get(`http://localhost:8000/tenants/${idTenant}`);
- const productResponse = await Axios.get("http://localhost:8000/products");
+ const tenantResponse = await Axios.get(
+ `http://localhost:8000/tenants/${idTenant}`,
+ );
+ const productResponse = await Axios.get(
+ "http://localhost:8000/products",
+ );
const tenantData = tenantResponse.data.data;
const productData = productResponse.data.data;
// Perform the join based on the specified conditions
// OrderData is not an array, so we need to convert it into an array
- const producttenant = productData.filter((product: Product) => product.id_tenant === tenantData.id);
+ const producttenant = productData.filter(
+ (product: Product) => product.id_tenant === tenantData.id,
+ );
const result = producttenant.map((product: Product) => {
return {
id: product.id,
@@ -52,12 +60,11 @@ export default function PageManageMenu() {
name: product.name,
description: product.description,
price: product.price,
- stock: product.stock
- }
+ stock: product.stock,
+ };
});
setMenuData(result);
-
};
useEffect(() => {
@@ -78,7 +85,6 @@ export default function PageManageMenu() {
getData();
}, []);
-
const [menuToDelete, setMenuToDelete] = useState(null);
const [menuToEdit, setMenuToEdit] = useState(null);
const [isEditFormVisible, setEditFormVisible] = useState(false);
@@ -122,7 +128,7 @@ export default function PageManageMenu() {
// Perbarui data setelah penghapusan
getMenuData();
} catch (error) {
- console.error('Error deleting menu:', error);
+ console.error("Error deleting menu:", error);
}
};
@@ -133,21 +139,21 @@ export default function PageManageMenu() {
{/* Sidebar */}
<div className="col-span-1 row-span-8">
<Sidebar
- default="/tenantpage/menus"
+ default="/tenant/menus"
number={2}
current={1}
menu1="Menu"
path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
- page1="/tenantpage/menus"
+ page1="/tenant/menus"
menu2="Orders"
path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
- page2="/tenantpage/orders"
+ page2="/tenant/orders"
/>
</div>
{/* Header */}
<div className="col-span-4">
<div className="ms-20 row-span-1 mt-9 py-3 w-11/12">
- <Welcome user="Aldaebaran" />
+ <Welcome user={user ? user!.fullname : ""} />
</div>
<div className="absolute top-0 right-0 mt-9 mx-12">
<Profile
@@ -158,8 +164,9 @@ export default function PageManageMenu() {
<div className="absolute top-12 right-0 mt-9 mx-12">
{showProfileDropDown && (
<ProfileDropDown
- name="Aldaebaran"
- email="Aldaebaran@example.com"
+ name={user!.fullname}
+ email={user!.email}
+ onClick={logout}
/>
)}
</div>
@@ -174,16 +181,25 @@ export default function PageManageMenu() {
image={menus.image}
stock={menus.stock}
name={menus.name}
- onEditClick={() => handleEditClick(menus.id)}
- onDeleteClick={() => handleDeleteClick(menus.id)}
+ onEditClick={() =>
+ handleEditClick(menus.id)
+ }
+ onDeleteClick={() =>
+ handleDeleteClick(menus.id)
+ }
/>
{isEditFormVisible && (
- <EditForm onClose={handleCloseEditForm} idMenu={menuToEdit} />
+ <EditForm
+ onClose={handleCloseEditForm}
+ idMenu={menuToEdit}
+ />
)}
{isDeletePopUpVisible && (
<DeletePopUp
onClose={handleCloseDeletePopUp}
- onConfirm={() => handleConfirmDelete(menuToDelete)}
+ onConfirm={() =>
+ handleConfirmDelete(menuToDelete)
+ }
/>
)}
</div>
@@ -192,7 +208,11 @@ export default function PageManageMenu() {
<div className="flex flex-col items-center justify-center">
<AddButton onClick={handleAddMenuClick} />
{showAddMenu && (
- <AddForm onClose={handleCloseAddMenu} idTenant={idTenant} idProduct={maxId + 1} />
+ <AddForm
+ onClose={handleCloseAddMenu}
+ idTenant={idTenant}
+ idProduct={maxId + 1}
+ />
)}
</div>
</div>
diff --git a/frontend/src/pages/PageManageOrder.tsx b/frontend/src/pages/PageManageOrder.tsx
index ecd2dcdd417205f01030f7d35fefed615942c549..ea6840536235be550d6e1bbdadd18d093d578aed 100644
--- a/frontend/src/pages/PageManageOrder.tsx
+++ b/frontend/src/pages/PageManageOrder.tsx
@@ -10,11 +10,11 @@ import ProfileDropDown from "../components/ProfileDropDown";
import joinedOrderPayment from "../../../backend/src/services/api/joinedOrderPayment";
export default function PageManageOrder() {
- const tenantid = 1;
+ const { user, logout } = useAuth();
+ const tenantid = user!.id;
const [showProfileDropDown, setShowProfileDropDown] = useState(false);
// const navigate = useNavigate();
- const { user, logout } = useAuth();
// const [params] = useSearchParams();
// const returnUrl = params.get("returnUrl");
@@ -35,21 +35,21 @@ export default function PageManageOrder() {
{/* Sidebar */}
<div className="col-span-1 row-span-8">
<Sidebar
- default="/tenantpage/menus"
+ default="/tenant/menus"
number={2}
current={2}
menu1="Menu"
path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
- page1="/tenantpage/menus"
+ page1="/tenant/menus"
menu2="Orders"
path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
- page2="/tenantpage/orders"
+ page2="/tenant/orders"
/>
</div>
{/* Header */}
<div className="col-span-4">
<div className="ms-20 row-span-1 mt-9 py-3 w-11/12">
- <Welcome user="Aldaebaran" />
+ <Welcome user={user ? user!.fullname : ""} />
</div>
<div className="absolute top-0 right-0 mt-9 mx-12">
<Profile
diff --git a/frontend/src/pages/RegisterTable.tsx b/frontend/src/pages/RegisterTable.tsx
index faa600488e6254afb0eb8c3ebd8fc8045a11c2d9..b1bfb0dfe3258a8f4d8c33d5878bbecb5f1945ae 100644
--- a/frontend/src/pages/RegisterTable.tsx
+++ b/frontend/src/pages/RegisterTable.tsx
@@ -1,29 +1,29 @@
import RegisterTableCard from "../components/RegisterTableCard";
export default function RegisterTable() {
- return (
- <div className="relative">
- <img
- src="../../public/images/RegisterTableImage.png"
- alt=""
- className="absolute top-0 left-0 w-full h-full opacity-50"
- style={{ zIndex: -1 }}
- />
- <div className="grid grid-cols-2 min-h-screen relative">
- <div className="relative z-10">
- <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center flex-col">
- <h1 className="text-9xl font-bold text-white text-center">
- GET YOUR SEAT
- </h1>
- <span className="bg-mealshub-blue text-white font-lato font-bold text-lg my-16 px-24 py-2">
- Secure Your Comfort, Reserve Your Space
- </span>
- </div>
+ return (
+ <div className="relative">
+ <img
+ src="../../public/images/RegisterTableImage.png"
+ alt=""
+ className="absolute top-0 left-0 w-full h-full opacity-50"
+ style={{ zIndex: -1 }}
+ />
+ <div className="grid grid-cols-2 min-h-screen relative">
+ <div className="relative z-10">
+ <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center flex-col">
+ <h1 className="text-7xl font-bold text-white text-center drop-shadow-2xl">
+ GET YOUR SEAT
+ </h1>
+ <span className="bg-mealshub-blue text-white font-lato font-bold text-lg my-16 px-24 py-2">
+ Secure Your Comfort, Reserve Your Space
+ </span>
+ </div>
+ </div>
+ <div className="flex items-center justify-center z-10">
+ <RegisterTableCard />
+ </div>
+ </div>
</div>
- <div className="flex items-center justify-center z-10">
- <RegisterTableCard />
- </div>
- </div>
- </div>
- );
+ );
}
diff --git a/frontend/src/pages/RolePage.tsx b/frontend/src/pages/RolePage.tsx
index 14a8134a42c1980789edb8ae911bccdc7cc40c86..2578bd06cf21cdebedb24a8b111c4b74bff3310f 100644
--- a/frontend/src/pages/RolePage.tsx
+++ b/frontend/src/pages/RolePage.tsx
@@ -1,4 +1,4 @@
-import RoleCard from "../components/RoleCard"
+import RoleCard from "../components/RoleCard";
export default function ChooseRolePage() {
return (
@@ -7,16 +7,26 @@ export default function ChooseRolePage() {
<RoleCard />
</div>
<div className="col-span-2 relative">
- <img src="../../public/images/WelcomingPage(Role).png" alt="" className="absolute opacity-50 h-screen min-w-full" />
+ <img
+ src="../../public/images/WelcomingPage(Role).png"
+ alt=""
+ className="absolute opacity-50 h-screen min-w-full"
+ />
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center flex-col">
- <h1 className="text-9xl font-bold text-white">WELCOME</h1>
+ <h1 className="text-9xl font-bold text-white drop-shadow-2xl">
+ WELCOME
+ </h1>
<span className="bg-mealshub-blue text-white font-nunito font-bold text-lg mt-12 px-24 py-2 flex items-center justify-center">
- MealsHub, your gateway to a centralized dining experience
+ MealsHub, your gateway to a centralized dining
+ experience
</span>
- <img src="../../public/images/MealsHub.png" alt="" className="object-cover h-80 w-80" />
+ <img
+ src="../../public/images/MealsHub.png"
+ alt=""
+ className="object-cover h-80 w-80"
+ />
</div>
</div>
</div>
- )
+ );
}
-
diff --git a/frontend/src/services/userService.ts b/frontend/src/services/userService.ts
index ffc07a9667a00ca539e8ffe72c6304d7d5e1eb68..a3b189d9cd5558b083163042657026db1623a59a 100644
--- a/frontend/src/services/userService.ts
+++ b/frontend/src/services/userService.ts
@@ -5,11 +5,12 @@ export const getUser = () =>
? JSON.parse(localStorage.getItem("user")!)
: null;
-export const login = async (email: string, password: string) => {
+export const login = async (email: string, password: string, role: string) => {
console.log("masuk sini login di user service");
const { data } = await axios.post("http://localhost:8000/auth/login", {
email,
password,
+ role,
});
console.log("axios berhasil");
localStorage.setItem("user", JSON.stringify(data));