edits for other screen sizes

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/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/pages/AccountCreation.jsx

@@ -62,16 +62,10 @@ function AccountCreation() {
       subType: "number",
       readOnly: true,
       validate: (value) => value !== "",
-      icon: (
+      icon: {
-        <PackageSearch
+        icon: <PackageSearch size={18} />,
-          size={18}
+        onClick: () => setShowProductModal(true),
-          onClick={() => {
+      },
-            console.log("Product search clicked");
-            console.log(showProductModal);
-            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/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;