added check in out route

public/locales/en/translation.json

@@ -78,5 +78,6 @@
     "confirmNewKeyId": "Confirm New Key ID",
     "highlightedFieldsInvalid": "Highlighted fields are invalid",
     "changeStatus": "Change Status",
-    "keySwap": "Key Swap"
+    "keySwap": "Key Swap",
+    "chargeEdit": "Edit Charges"
 }

src/components/BannerInfo.jsx

@@ -6,7 +6,7 @@ function BannerInfo({info}) {
     const {t} = useTranslation();
 
     const infoElements = Object.keys(info).map((key) => (
-        <BannerInfoElement key={key} title={t(key)} description={info[key]} />    
+        <BannerInfoElement key={key} title={t(key)} description={t(info[key])} />    
     ))
     infoElements.push(
         <BannerInfoElement 

src/components/FormField.jsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 function FormField({ label, children, icon }) {
   return (
     <div className="flex">
-      <label className="mr-4 text-lg text-black dark:text-primary-dark w-[17%]">
+      <label className="mr-4 text-lg text-black dark:text-primary-dark md:w-[30%] xl:w-[20%] 2xl:w-[17%]">
         {label}
       </label>
       <div className="flex w-full gap-4 items-center">

src/components/FormInput.jsx

@@ -12,7 +12,7 @@ function FormInput({
     <input
       readOnly={readOnly}
       value={value}
-      className={`w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`}
+      className={`w-1/2 md:w-1/3 lg:w-1/4  h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`}
       onChange={onChange}
       type={type}
       maxLength={maxLength}

src/components/FormSelect.jsx

@@ -5,7 +5,7 @@ function FormSelect({ value, onChange, options, className }) {
     <select
       value={value}
       className={
-        "w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey " +
+        "w-1/2 md:w-1/3 lg:w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey " +
         className
       }
       onChange={onChange}

src/components/MenuBar.jsx

@@ -3,35 +3,45 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
 
 function SubMenu({ items, isVisible, onLinkClick }) {
   const { t } = useTranslation();
   return (
-    <div
-      className={clsx(
-        "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary",
-        isVisible ? "block" : "hidden"
-      )}
-    >
-      {items.map((subItem, index) => (
-        <div
-          key={index}
-          className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
-          onClick={onLinkClick}
-        >
-          <Link to={subItem.path}>{t(subItem.name)}</Link>
+    <AnimatePresence mode="popLayout">
+      {isVisible && (
+        <div>
+          <motion.div
+            className={clsx(
+              "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary"
+            )}
+            initial={{ y: 15, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 15, opacity: 0 }}
+            transition={{ duration: 0.3, type: "spring" }}
+          >
+            {items.map((subItem, index) => (
+              <div
+                key={index}
+                className="px-3 py-2 cursor-pointer text-nowrap dark:hover:bg-secondary-variant-dark first:rounded-t-2xl first:pt-4 last:pb-4 second-last:rounded-b-2xl hover:bg-white"
+                onClick={onLinkClick}
+              >
+                <Link to={subItem.path}>{t(subItem.name)}</Link>
+              </div>
+            ))}
+            <svg
+              className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
+              width="16"
+              height="13"
+              viewBox="0 0 16 13"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
+            </svg>
+          </motion.div>
         </div>
-      ))}
-      <svg
-        className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
-        width="16"
-        height="13"
-        viewBox="0 0 16 13"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
-      </svg>
-    </div>
+      )}
+    </AnimatePresence>
   );
 }
 
@@ -41,14 +51,20 @@ function MenuBar({ menuItems }) {
   return (
     <div className="flex justify-between pt-5 pb-2 text-base font-body">
       {menuItems.map((item, index) => (
-        <div 
-          key={index} 
+        <div
+          key={index}
           className="relative pb-3 cursor-pointer"
           onMouseEnter={() => setActiveMenu(index)}
           onMouseLeave={() => setActiveMenu(null)}
         >
           <Link to={item.path}>{t(item.name)}</Link>
-          {item.submenu.length > 0 && <SubMenu items={item.submenu} isVisible={ activeMenu === index } onLinkClick={() => setActiveMenu(null)}/>}
+          {item.submenu.length > 0 && (
+            <SubMenu
+              items={item.submenu}
+              isVisible={activeMenu === index}
+              onLinkClick={() => setActiveMenu(null)}
+            />
+          )}
         </div>
       ))}
     </div>

src/main.jsx

@@ -14,6 +14,7 @@ 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 Placeholder from "./pages/Placeholder.jsx";
 
 
 const router = createBrowserRouter([
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
       {
         path: "operation/charge-management/change",
         element: <ChargeEdit />,
+      },
+      {
+        path: "operation/check-in-out",
+        element: <Placeholder />
       }
     ],
   },

src/pages/AccountCreation.jsx

@@ -62,16 +62,10 @@ function AccountCreation() {
       subType: "number",
       readOnly: true,
       validate: (value) => value !== "",
-      icon: (
-        <PackageSearch
-          size={18}
-          onClick={() => {
-            console.log("Product search clicked");
-            console.log(showProductModal);
-            setShowProductModal(true);
-          }}
-        />
-      ),
+      icon: {
+        icon: <PackageSearch size={18} />,
+        onClick: () => setShowProductModal(true),
+      },
     },
     {
       label: t("interestCategory"),
@@ -114,7 +108,7 @@ function AccountCreation() {
       subType: "number",
       maxLength: 17,
       validate: (value) => /^[0-9]{17}$/.test(value),
-      icon: <UserSearch size={18} />,
+      icon: { icon: <UserSearch size={18} /> },
     },
     {
       label: t("nomineeCifNumber"),

src/pages/CabinetCreation.jsx

@@ -40,7 +40,7 @@ function CabinetCreation() {
       <FormBox title={t("cabinetCreation")}>
         <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%]">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
               {t("cabinetId")}
             </label>
             <div className="w-full">
@@ -75,7 +75,7 @@ function CabinetCreation() {
             </div>
           </div>
           <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
               {t("cabinetKeyId")}
             </label>
             <div className="w-full">
@@ -102,7 +102,7 @@ function CabinetCreation() {
             </div>
           </div>
           <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
               {t("noOfLockers")}
             </label>
             <div className="w-full">

src/pages/ChargeEdit.jsx

@@ -41,9 +41,9 @@ function ChargeEdit() {
         if (response.status === 200) {
           const { rent, penalty } = response.data;
           setChargeDetails({
-            rentAmount: rent,
+            rentAmount: rent.toString(),
             rentAmountEdit: false,
-            penaltyAmount: penalty,
+            penaltyAmount: penalty.toString(),
             penaltyAmountEdit: false,
           });
         } else {
@@ -170,7 +170,7 @@ function ChargeEdit() {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             className={clsx(
-              "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
+              "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"

src/pages/KeySwap.jsx

@@ -176,7 +176,7 @@ function KeySwap() {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             className={clsx(
-              "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
+              "p-4 mb-8 font-body text-center text-lg rounded-2xl flex items-center justify-center gap-2",
               notification.type === "error"
                 ? "bg-error-surface text-error"
                 : "bg-success-surface text-success"

src/pages/LockersRegistration.jsx

@@ -14,7 +14,6 @@ function LockersRegistration() {
   const location = useLocation();
   const showToast = useToast();
   const { setIsLoading } = useLoading();
-
   const { noOfLockers, cabinetId } = location.state;
   const [submitting, setSubmitting] = useState(false);
   const [notification, setNotification] = useState({
@@ -34,7 +33,9 @@ function LockersRegistration() {
       keyIdValid: true,
     }));
   const [lockerValues, setLockerValues] = useState(initLockers);
-
+  if(!location.state) {
+    return <></>
+  }
   const handleSubmit = async (e) => {
     console.log("submitting");
     e.preventDefault();
@@ -218,7 +219,7 @@ function LockersRegistration() {
                 : "bg-success-surface text-success"
             )}
           >
-            {notification.message.split(":").map((msg, index) => {
+            {notification.type === "error" ? notification.message : notification.message.split(":").map((msg, index) => {
               return index === 1 ? (
                 <span key={index} className="border-b border-dashed">
                   {msg}

src/pages/Placeholder.jsx

@@ -1,7 +1,7 @@
 function Placeholder() {
   return (
-    <div className="flex justify-center items-center h-full">
-      <p className="text-3xl text-primary">Placeholder</p>
+    <div className="text-center h-full">
+      <p className="text-3xl text-primary font-bold">Placeholder</p>
     </div>
   );
 }

src/util/productList.js

@@ -4,9 +4,5 @@ const productInfo = [
     { productCode: '1101', productCodeDescription: 'SAVINGS DEPOSIT', interestCategory: '1007', interestCategoryDescription: 'NON MEMBER', payableGl: '16301', paidGl: '62117' },
     { productCode: '2002', productCodeDescription: 'CASH CERTIFICATE -GENERAL', interestCategory: '1047', interestCategoryDescription: 'COMPOUNDING', payableGl: '16011', paidGl: '62111' },
     { productCode: '2002', productCodeDescription: 'CASH CERTIFICATE', interestCategory: '1005', interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN', payableGl: '16011', paidGl: '62111' },
-    { productCode: '2001', productCodeDescription: 'MIS', interestCategory: '1003', interestCategoryDescription: 'NON MEMBER - SENIOR CITIZEN', payableGl: '16137', paidGl: '62125' },
-    { productCode: '2002', productCodeDescription: 'FIXED DEPOSIT', interestCategory: '1006', interestCategoryDescription: 'NONMEMBER - SENIOR CITIZEN', payableGl: '16009', paidGl: '62109' },
-    { productCode: '2002', productCodeDescription: 'CASH CERTIFICATE', interestCategory: '1001', interestCategoryDescription: 'MEMBER', payableGl: '16011', paidGl: '62111' },
-    { productCode: '1101', productCodeDescription: 'SAVINGS DEPOSIT- MEMBER', interestCategory: '1347', interestCategoryDescription: 'COMPOUNDING', payableGl: '16301', paidGl: '62117' }
 ]
  export default productInfo;