refactor: improve ChargeEdit component structure

src/main.jsx

@@ -14,7 +14,8 @@ import LockerStatus from "./pages/LockerStatus.jsx";
 import KeySwap from "./pages/KeySwap.jsx";
 import ChargeManagement from "./pages/ChargeManagement.jsx";
 import ChargeEdit from "./pages/ChargeEdit.jsx";
-import CheckInOut from "./pages/CheckInOut.jsx";
+import CheckInOutManagement from "./pages/CheckInOutManagement.jsx";
+import Placeholder from "./pages/Placeholder.jsx";
 
 const router = createBrowserRouter([
   {
@@ -63,7 +64,11 @@ const router = createBrowserRouter([
       },
       {
         path: "operation/check-in-out",
-        element: <CheckInOut />
+        element: <CheckInOutManagement />
+      },
+      {
+        path: "operation/check-in-out/log",
+        element: <Placeholder />
       }
     ],
   },

src/pages/ChargeEdit.jsx

@@ -6,12 +6,11 @@ import FormSelect from "../components/FormSelect";
 import Button from "../components/Button";
 import FormBox from "../components/FormBox";
 import { useTranslation } from "react-i18next";
-import { useToast } from "../hooks/useToast";
 import { useLocation } from "react-router-dom";
 import { lockerService } from "../services/locker.service";
-import clsx from "clsx";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence } from "motion/react";
 import { Pencil } from "lucide-react";
+import Notification from "../components/Notification";
 
 function ChargeEdit() {
   const [chargeDetails, setChargeDetails] = useState({
@@ -29,9 +28,9 @@ function ChargeEdit() {
 
   const { setIsLoading } = useLoading();
   const { t } = useTranslation();
-  const showToast = useToast();
   const location = useLocation();
-  const { productCode, interestCategory } = location.state;
+  const productCode = location.state?.productCode;
+  const interestCategory = location.state?.interestCategory;
 
   useEffect(() => {
     const fetchCharges = async () => {
@@ -67,6 +66,10 @@ function ChargeEdit() {
     fetchCharges();
   }, [productCode, interestCategory, setIsLoading]);
 
+  if (!location.state) {
+    return <></>;
+  }
+
   const formFields = [
     {
       name: "rentAmount",
@@ -75,10 +78,12 @@ function ChargeEdit() {
       subType: "number",
       readOnly: !chargeDetails.rentAmountEdit,
       icon: {
-        icon: <Pencil size={22}/>,
+        icon: <Pencil size={22} />,
         mode: "plain",
-        onClick: () => {setChargeDetails({...chargeDetails, rentAmountEdit: true})},
-      }
+        onClick: () => {
+          setChargeDetails({ ...chargeDetails, rentAmountEdit: true });
+        },
+      },
     },
     {
       name: "penaltyAmount",
@@ -87,20 +92,18 @@ function ChargeEdit() {
       subType: "number",
       readOnly: !chargeDetails.penaltyAmountEdit,
       icon: {
-        icon: <Pencil size={22}/>,
+        icon: <Pencil size={22} />,
         mode: "plain",
-        onClick: () => {setChargeDetails({...chargeDetails, penaltyAmountEdit: true})},
-      }
+        onClick: () => {
+          setChargeDetails({ ...chargeDetails, penaltyAmountEdit: true });
+        },
+      },
     },
   ];
 
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    if(!chargeDetails.rentAmountEdit && !chargeDetails.penaltyAmountEdit) {
-      showToast("No changes made", "warning");
-      return;
-    }
     try {
       setIsLoading(true);
       const response = await lockerService.updateCharges(
@@ -164,21 +167,7 @@ function ChargeEdit() {
   return (
     <div>
       <AnimatePresence>
-        {notification.visible && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className={clsx(
-              "p-4 mb-8 font-body text-center text-lg 2xl:text-xl rounded-2xl flex items-center justify-center gap-2",
-              notification.type === "error"
-                ? "bg-error-surface text-error"
-                : "bg-success-surface text-success"
-            )}
-          >
-            {notification.message}
-          </motion.div>
-        )}
+        {notification.visible && <Notification notification={notification} />}
       </AnimatePresence>
       <div className="relative">
         {notification.type === "success" && (
@@ -188,7 +177,13 @@ function ChargeEdit() {
           <div className="p-2 pt-7 flex flex-col gap-4">
             {formFields.map(renderField)}
           </div>
-          <Button text={t("submit")} onClick={handleSubmit} disabled={!chargeDetails.rentAmountEdit && !chargeDetails.penaltyAmountEdit}/>
+          <Button
+            text={t("submit")}
+            onClick={handleSubmit}
+            disabled={
+              !chargeDetails.rentAmountEdit && !chargeDetails.penaltyAmountEdit
+            }
+          />
         </FormBox>
       </div>
     </div>