From 0b667f21082636c813355e678269464e03a4ded6 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <66894537+Wind-Explorer@users.noreply.github.com>
Date: Tue, 13 Aug 2024 02:12:51 +0800
Subject: [PATCH] polished hbcform submission ui

---
 client/src/pages/HBFormPage.tsx | 186 ++++++++++++++++----------------
 1 file changed, 94 insertions(+), 92 deletions(-)

diff --git a/client/src/pages/HBFormPage.tsx b/client/src/pages/HBFormPage.tsx
index d92192b..46d5634 100644
--- a/client/src/pages/HBFormPage.tsx
+++ b/client/src/pages/HBFormPage.tsx
@@ -7,6 +7,7 @@ import {
   Modal,
   ModalBody,
   ModalContent,
+  ModalFooter,
   ModalHeader,
 } from "@nextui-org/react";
 import { ArrowUTurnLeftIcon } from "../icons";
@@ -274,76 +275,93 @@ export default function HBFormPage() {
                 <Form>
                   <div className="flex flex-col gap-4 p-4">
                     <div className="flex flex-row gap-4">
-                      <div className="flex flex-col gap-4 min-w-[220px]">
-                        <div className=" hidden">
-                          <NextUIFormikInput
-                            label="Number of dependents"
-                            name="avgBill"
-                            type="text"
-                            placeholder=""
-                            labelPlacement="inside"
-                            setFieldValue={setFieldValue}
-                          />
-                          <NextUIFormikInput
-                            label="Number of dependents"
-                            name="totalBill"
-                            type="text"
-                            placeholder=""
-                            labelPlacement="inside"
-                            setFieldValue={setFieldValue}
-                          />
-                          <NextUIFormikInput
-                            label="Number of dependents"
-                            name="waterBill"
-                            type="text"
-                            placeholder=""
-                            labelPlacement="inside"
-                            setFieldValue={setFieldValue}
-                          />
-                          <NextUIFormikInput
-                            label="Number of dependents"
-                            name="electricalBill"
-                            type="text"
-                            placeholder=""
-                            labelPlacement="inside"
-                            setFieldValue={setFieldValue}
-                          />
-                        </div>
-                        <Card className="flex flex-col gap-2 p-4">
-                          <p className="text-md font-semibold">
-                            How many people lives in your unit?
-                          </p>
-                          <NextUIFormikInput
-                            label="Number of dependents"
-                            name="noOfDependents"
-                            type="text"
-                            placeholder=""
-                            labelPlacement="inside"
-                            setFieldValue={setFieldValue}
-                          />
-                        </Card>
-                        <Card className="p-4 flex flex-col gap-4">
-                          <div>
-                            <p className="opacity-70">Total amount payable:</p>
-                            {aiProcessing && (
-                              <div className="w-full *:mx-auto pt-4">
-                                <CircularProgress label="Analyzing..." />
-                              </div>
-                            )}
-                            {!aiProcessing && (
-                              <p className="text-2xl font-semibold">
-                                S${values.totalBill}
-                              </p>
-                            )}
+                      <div className="flex flex-col gap-4 justify-between">
+                        <div className="flex flex-col gap-4 min-w-[220px]">
+                          <div className=" hidden">
+                            <NextUIFormikInput
+                              label="Number of dependents"
+                              name="avgBill"
+                              type="text"
+                              placeholder=""
+                              labelPlacement="inside"
+                              setFieldValue={setFieldValue}
+                            />
+                            <NextUIFormikInput
+                              label="Number of dependents"
+                              name="totalBill"
+                              type="text"
+                              placeholder=""
+                              labelPlacement="inside"
+                              setFieldValue={setFieldValue}
+                            />
+                            <NextUIFormikInput
+                              label="Number of dependents"
+                              name="waterBill"
+                              type="text"
+                              placeholder=""
+                              labelPlacement="inside"
+                              setFieldValue={setFieldValue}
+                            />
+                            <NextUIFormikInput
+                              label="Number of dependents"
+                              name="electricalBill"
+                              type="text"
+                              placeholder=""
+                              labelPlacement="inside"
+                              setFieldValue={setFieldValue}
+                            />
                           </div>
-                          <Divider />
-                          <div>
-                            <p className="opacity-70">Cost per dependent:</p>
-                            <p className="text-3xl font-bold">
-                              S${values.avgBill}
+                          <Card className="flex flex-col gap-2 p-4">
+                            <p className="text-md font-semibold">
+                              How many people lives in your unit?
                             </p>
-                          </div>
-                        </Card>
+                            <NextUIFormikInput
+                              label="Number of dependents"
+                              name="noOfDependents"
+                              type="text"
+                              placeholder=""
+                              labelPlacement="inside"
+                              setFieldValue={setFieldValue}
+                            />
+                          </Card>
+                          <Card className="p-4 flex flex-col gap-4">
+                            <div>
+                              <p className="opacity-70">
+                                Total amount payable:
+                              </p>
+                              {aiProcessing && (
+                                <div className="w-full *:mx-auto pt-4">
+                                  <CircularProgress label="Analyzing..." />
+                                </div>
+                              )}
+                              {!aiProcessing && (
+                                <p className="text-2xl font-semibold">
+                                  S${values.totalBill}
+                                </p>
+                              )}
+                            </div>
+                            <Divider />
+                            <div>
+                              <p className="opacity-70">Cost per dependent:</p>
+                              <p className="text-3xl font-bold">
+                                S${values.avgBill}
+                              </p>
+                            </div>
+                          </Card>
+                        </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 className="flex flex-row">
                         <InsertBillImage
@@ -359,16 +377,6 @@ export default function HBFormPage() {
                         />
                       </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>
                   <Modal
                     isOpen={isModalOpen}
@@ -377,21 +385,19 @@ export default function HBFormPage() {
                     isKeyboardDismissDisabled={true}
                   >
                     <ModalContent className="w-full max-w-[400px]">
-                      <ModalHeader className="flex justify-between items-center font-bold text-2xl text-red-900">
-                        Confirmation
-                      </ModalHeader>
+                      <ModalHeader>Confirmation</ModalHeader>
                       <ModalBody className="pb-8">
-                        <div className="space-y-4 text-gray-700 dark:text-gray-300">
-                          <p className="font-semibold">
+                        <div>
+                          <p>
                             This form has been submitted before. If you submit
                             again, the previous entry will be deleted. Are you
                             sure you want to resubmit?
                           </p>
                         </div>
-                        <div className="flex justify-between">
+                      </ModalBody>
+                      <ModalFooter>
+                        <div className="flex flex-row gap-4">
                           <Button
-                            className="bg-red-400 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-900 text-white"
-                            size="lg"
                             onPress={() =>
                               handleModalSubmit({
                                 values,
@@ -404,15 +410,11 @@ export default function HBFormPage() {
                           >
                             Yes
                           </Button>
-                          <Button
-                            className="bg-gray-400 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-900 text-white"
-                            size="lg"
-                            onPress={handleModalCancel}
-                          >
+                          <Button color="primary" onPress={handleModalCancel}>
                             No
                           </Button>
                         </div>
-                      </ModalBody>
+                      </ModalFooter>
                     </ModalContent>
                   </Modal>
                 </Form>