wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polished hbcform submission ui

Browse Source
This commit is contained in:
Wind-Explorer
2024-08-13 02:12:51 +08:00
parent 0db0dc5b27
commit 0b667f2108
1 changed files with 94 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
client/src/pages/HBFormPage.tsx
View File

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