From c1df68b27acbbb5cc04a4a97e282888a2edf5c07 Mon Sep 17 00:00:00 2001
From: asif <md.asif5@tcs.com>
Date: Mon, 23 Dec 2024 15:22:20 +0530
Subject: [PATCH] edits for other screen sizes

---
 public/locales/en/translation.json |  3 ++-
 src/components/FormField.jsx       |  2 +-
 src/components/FormInput.jsx       |  2 +-
 src/components/FormSelect.jsx      |  2 +-
 src/pages/AccountCreation.jsx      | 16 +++++-----------
 src/pages/CabinetCreation.jsx      |  6 +++---
 src/pages/ChargeEdit.jsx           |  6 +++---
 src/pages/KeySwap.jsx              |  2 +-
 src/pages/LockersRegistration.jsx  |  7 ++++---
 src/util/productList.js            |  4 ----
 10 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 8c9d43e..a5bae49 100644
--- a/public/locales/en/translation.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/src/components/FormField.jsx b/src/components/FormField.jsx
index 6c1ec04..1b228ee 100644
--- a/src/components/FormField.jsx
+++ b/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">
diff --git a/src/components/FormInput.jsx b/src/components/FormInput.jsx
index 73cee2a..50309f9 100644
--- a/src/components/FormInput.jsx
+++ b/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}
diff --git a/src/components/FormSelect.jsx b/src/components/FormSelect.jsx
index 319e252..abf140b 100644
--- a/src/components/FormSelect.jsx
+++ b/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}
diff --git a/src/pages/AccountCreation.jsx b/src/pages/AccountCreation.jsx
index 46112d7..fb305bc 100644
--- a/src/pages/AccountCreation.jsx
+++ b/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"),
diff --git a/src/pages/CabinetCreation.jsx b/src/pages/CabinetCreation.jsx
index 9ada1f4..853a780 100644
--- a/src/pages/CabinetCreation.jsx
+++ b/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">
diff --git a/src/pages/ChargeEdit.jsx b/src/pages/ChargeEdit.jsx
index 0e1c611..9c49fe0 100644
--- a/src/pages/ChargeEdit.jsx
+++ b/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"
diff --git a/src/pages/KeySwap.jsx b/src/pages/KeySwap.jsx
index 076c641..2add86b 100644
--- a/src/pages/KeySwap.jsx
+++ b/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"
diff --git a/src/pages/LockersRegistration.jsx b/src/pages/LockersRegistration.jsx
index 70a64c3..f3e8479 100644
--- a/src/pages/LockersRegistration.jsx
+++ b/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}
diff --git a/src/util/productList.js b/src/util/productList.js
index 0c1122a..b754701 100644
--- a/src/util/productList.js
+++ b/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;
\ No newline at end of file