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

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

@@ -7,6 +7,7 @@ import {
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
} from "@nextui-org/react";
import { ArrowUTurnLeftIcon } from "../icons";
@@ -274,6 +275,7 @@ 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 justify-between">
<div className="flex flex-col gap-4 min-w-[220px]">
<div className=" hidden">
<NextUIFormikInput
@@ -324,7 +326,9 @@ export default function HBFormPage() {
</Card>
<Card className="p-4 flex flex-col gap-4">
<div>
<p className="opacity-70">Total amount payable:</p>
<p className="opacity-70">
Total amount payable:
</p>
{aiProcessing && (
<div className="w-full *:mx-auto pt-4">
<CircularProgress label="Analyzing..." />
@@ -345,6 +349,20 @@ export default function HBFormPage() {
</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
label=""
@@ -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>