From 3a0622e3ca497894b5a1f22619461ef672d305b8 Mon Sep 17 00:00:00 2001
From: ZacTohZY <zactoh0503@gmail.com>
Date: Tue, 6 Aug 2024 02:46:52 +0800
Subject: [PATCH] Update HBFormPage css

---
 client/src/components/InsertImage.tsx |  10 +-
 client/src/pages/HBFormPage.tsx       | 190 +++++++++++++-------------
 2 files changed, 103 insertions(+), 97 deletions(-)

diff --git a/client/src/components/InsertImage.tsx b/client/src/components/InsertImage.tsx
index 9270eac..0900de8 100644
--- a/client/src/components/InsertImage.tsx
+++ b/client/src/components/InsertImage.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 interface InsertImageProps {
+    label: string;
     onImageSelected: (file: File | null) => void;
 }
 
-const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
+const InsertImage: React.FC<InsertImageProps> = ({ label, onImageSelected }) => {
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [previewImage, setPreviewImage] = useState<string>('');
 
@@ -19,8 +20,9 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
     return (
         <div
             className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md"
-            style={{ width: 400, height: 500 }}
+            style={{ width: 350, height: 530 }}
         >
+            <label className="mb-2 font-bold text-xl">{label}</label>
             <input
                 type="file"
                 onChange={handleImageSelect}
@@ -37,4 +39,4 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
     );
 };
 
-export default InsertImage;
+export default InsertImage;
\ No newline at end of file
diff --git a/client/src/pages/HBFormPage.tsx b/client/src/pages/HBFormPage.tsx
index cd5e1b8..73146ec 100644
--- a/client/src/pages/HBFormPage.tsx
+++ b/client/src/pages/HBFormPage.tsx
@@ -148,111 +148,115 @@ export default function HBFormPage() {
   };
 
   return (
-    <div className="w-full h-full">
-      <section className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
+    <div className="w-full h-full pb-12">
+      <div className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
         <div className="py-2">
           <Button variant="light" onPress={() => navigate(-1)}>
             <ArrowUTurnLeftIcon />
           </Button>
         </div>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={handleSubmit}
-        >
-          {({ isValid, dirty, isSubmitting, setFieldValue, values }) => {
-            // Calculate the total bill
-            useEffect(() => {
-              const totalBill = Number(values.electricalBill) + Number(values.waterBill);
-              setFieldValue("totalBill", totalBill.toFixed(2));
+        <div className="flex-grow overflow-y-auto">
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+          >
+            {({ isValid, dirty, isSubmitting, setFieldValue, values }) => {
+              // Calculate the total bill
+              useEffect(() => {
+                const totalBill = Number(values.electricalBill) + Number(values.waterBill);
+                setFieldValue("totalBill", totalBill.toFixed(2));
 
-              const avgBill = Number(values.noOfDependents) > 0
-                ? totalBill / Number(values.noOfDependents)
-                : 0;
-              setFieldValue("avgBill", avgBill.toFixed(2));
+                const avgBill = Number(values.noOfDependents) > 0
+                  ? totalBill / Number(values.noOfDependents)
+                  : 0;
+                setFieldValue("avgBill", avgBill.toFixed(2));
 
-            }, [values.electricalBill, values.waterBill, values.noOfDependents, setFieldValue]);
+              }, [values.electricalBill, values.waterBill, values.noOfDependents, setFieldValue]);
 
-            // Disabled the submit button because the images field are not selected
-            const isSubmitDisabled = !imagesSelected.ebPicture || !imagesSelected.wbPicture;
+              // Disabled the submit button because the images field are not selected
+              const isSubmitDisabled = !imagesSelected.ebPicture || !imagesSelected.wbPicture;
 
-            return (
-              <Form>
-                <div className="flex flex-col gap-5">
-                  <div className="flex flex-row gap-10">
-                    <div className="flex flex-col gap-5 p-1">
-                      <NextUIFormikInput
-                        label="Electrical Bill"
-                        name="electricalBill"
-                        type="text"
-                        placeholder="0.00"
-                        labelPlacement="inside"
-                        setFieldValue={setFieldValue}
-                      />
-                      <NextUIFormikInput
-                        label="Water Bill"
-                        name="waterBill"
-                        type="text"
-                        placeholder="0.00"
-                        labelPlacement="inside"
-                        setFieldValue={setFieldValue}
-                      />
-                      <NextUIFormikInput
-                        label="Total Bill"
-                        name="totalBill"
-                        type="text"
-                        placeholder="0.00"
-                        labelPlacement="inside"
-                        readOnly={true}
-                      />
-                      <NextUIFormikInput
-                        label="Number of dependents"
-                        name="noOfDependents"
-                        type="text"
-                        placeholder="0"
-                        labelPlacement="inside"
-                        setFieldValue={setFieldValue}
-                      />
-                      <NextUIFormikInput
-                        label="Average Bill"
-                        name="avgBill"
-                        type="text"
-                        placeholder="0"
-                        labelPlacement="inside"
-                        readOnly={true}
-                      />
+              return (
+                <Form>
+                  <div className="flex flex-col gap-5">
+                    <div className="flex flex-row gap-5">
+                      <div className="flex flex-col gap-5 p-2 min-w-[180px] ">
+                        <NextUIFormikInput
+                          label="Electrical Bill"
+                          name="electricalBill"
+                          type="text"
+                          placeholder="0.00"
+                          labelPlacement="inside"
+                          setFieldValue={setFieldValue}
+                        />
+                        <NextUIFormikInput
+                          label="Water Bill"
+                          name="waterBill"
+                          type="text"
+                          placeholder="0.00"
+                          labelPlacement="inside"
+                          setFieldValue={setFieldValue}
+                        />
+                        <NextUIFormikInput
+                          label="Total Bill"
+                          name="totalBill"
+                          type="text"
+                          placeholder="0.00"
+                          labelPlacement="inside"
+                          readOnly={true}
+                        />
+                        <NextUIFormikInput
+                          label="Number of dependents"
+                          name="noOfDependents"
+                          type="text"
+                          placeholder="0"
+                          labelPlacement="inside"
+                          setFieldValue={setFieldValue}
+                        />
+                        <NextUIFormikInput
+                          label="Average Bill"
+                          name="avgBill"
+                          type="text"
+                          placeholder="0"
+                          labelPlacement="inside"
+                          readOnly={true}
+                        />
+                      </div>
+                      <div className="flex flex-row gap-10">
+                        <InsertImage
+                          label="Electrical Bill Image"
+                          onImageSelected={(file) => {
+                            setFieldValue("ebPicture", file);
+                            handleImageSelection("ebPicture", file);
+                          }}
+                        />
+                        <InsertImage
+                          label="Water Bill Image"
+                          onImageSelected={(file) => {
+                            setFieldValue("wbPicture", file);
+                            handleImageSelection("wbPicture", file);
+                          }}
+                        />
+                      </div>
                     </div>
-                    <div className="flex flex-row max-w-xs h-[500px] gap-10">
-                      <InsertImage
-                        onImageSelected={(file) => {
-                          setFieldValue("ebPicture", file);
-                          handleImageSelection("ebPicture", file);
-                        }}
-                      />
-                      <InsertImage
-                        onImageSelected={(file) => {
-                          setFieldValue("wbPicture", file);
-                          handleImageSelection("wbPicture", file);
-                        }}
-                      />
+                    <div>
+                      <Button
+                        type="submit"
+                        className="bg-red-400 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-900 text-white"
+                        size="lg"
+                        isDisabled={!isValid || !dirty || isSubmitting || isSubmitDisabled}
+                      >
+                        <p>Submit</p>
+                      </Button>
                     </div>
                   </div>
-                  <div>
-                    <Button
-                      type="submit"
-                      className="bg-red-400 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-900 text-white"
-                      size="lg"
-                      isDisabled={!isValid || !dirty || isSubmitting || isSubmitDisabled}
-                    >
-                      <p>Submit</p>
-                    </Button>
-                  </div>
-                </div>
-              </Form>
-            );
-          }}
-        </Formik>
-      </section>
+                </Form>
+              );
+            }}
+          </Formik>
+        </div>
+      </div>
     </div>
   );
 }