feat: add CheckInOutLog page and integrate with locker service for check-in/out functionality

2024-12-24 00:50:06 +05:30
parent 8b34a69dca
commit a56f643301
3 changed files with 112 additions and 10 deletions
--- a/src/pages/CheckInOutLog.jsx
+++ b/src/pages/CheckInOutLog.jsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import FormBox from "../components/FormBox";
+import Button from "../components/Button";
+import Notification from "../components/Notification";
+import { lockerService } from "../services/locker.service";
+import { useToast } from "../hooks/useToast";
+import { useLoading } from "../hooks/useLoading";
+
+function CheckInOutLog() {
+  const [time, setTime] = useState(null);
+  const [checkType, setCheckType] = useState("");
+  const [notification, setNotification] = useState({
+    message: "",
+    type: "",
+  });
+
+  const location = useLocation();
+  const showToast = useToast();
+  const { setIsLoading } = useLoading();
+  const accountNumber = location.state?.accountNumber;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (time === null || checkType === "") {
+      showToast("Please fill in all fields", "error");
+      return;
+    }
+    // Add your logic here
+    try {
+      setIsLoading(true);
+      const response = await lockerService.checkInOut(accountNumber, time, checkType);
+      if (response.status === 200) {
+        setNotification({ message: response.data.message, type: "success" });
+      } else {
+        console.log(response);
+        setNotification({ message: response.data.message, type: "error" });
+      }
+    } catch (error) {
+      console.log(error);
+      setNotification({ message: error.message, type: "error" });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div>
+      {notification.message !== "" && <Notification {...notification} />}
+      <FormBox title="Check In/Out Log">
+        <div className="px-4 pt-7 text-2xl font-display font-bold text-primary dark:text-primary-dark">
+          {accountNumber}
+        </div>
+        <div className="p-2 pt-7 flex flex-col gap-4">
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              Time
+            </label>
+            <input
+              type="time"
+              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey text-black"
+              onChange={(e) => setTime(e.target.value)}
+              value={time}
+            />
+          </div>
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              Check Type
+            </label>
+            <select
+              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey"
+              onChange={(e) => setCheckType(e.target.value)}
+              value={checkType}
+            >
+              <option value="" disabled>
+                Select
+              </option>
+              <option value="check-in">Check In</option>
+              <option value="check-out">Check Out</option>
+            </select>
+          </div>
+        </div>
+        <Button text="Submit" onClick={handleSubmit}/>
+      </FormBox>
+    </div>
+  );
+}
+
+export default CheckInOutLog;