diff --git a/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx b/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx index ee7c72cbec..44b32e0244 100644 --- a/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx +++ b/src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx @@ -1,5 +1,6 @@ import { Field, Input, Label } from "@headlessui/react"; import { yupResolver } from "@hookform/resolvers/yup"; +import Icon from "components/Icon"; import Modal from "components/Modal"; import { useErrorContext } from "contexts/ErrorContext"; import { useModalContext } from "contexts/ModalContext"; @@ -27,6 +28,13 @@ export function MoveFundForm(props: IMoveFundForm) { const { handleError } = useErrorContext(); type FV = { amount: string }; + const from = props.type.split("-")[0]; + const deductions: [string, number][] = Object.entries(props.mov).filter( + ([k, v]) => k.startsWith(from) && +v > 0 + ); + const available = + props.balance - deductions.reduce((sum, [, v]) => v + sum, 0); + const { handleSubmit, register, @@ -42,22 +50,15 @@ export function MoveFundForm(props: IMoveFundForm) { .min(0, "can't be negative") .max( props.effect === "append" - ? props.balance - : props.balance + (props.initAmount ?? 0), - "can't be more than balance" + ? available + : available + (props.initAmount ?? 0), + "can't be more than available" ) ), }) ), }); - const from = props.type.split("-")[0]; - const deductions: [string, number][] = Object.entries(props.mov).filter( - ([k, v]) => k.startsWith(from) && +v > 0 - ); - const available = - props.balance - deductions.reduce((sum, [, v]) => v + sum, 0); - return ( { @@ -78,13 +79,30 @@ export function MoveFundForm(props: IMoveFundForm) { as="form" className="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded-lg p-6" > -

{props.title}

-

Balance

-

$ {humanize(props.balance)}

- {deductions} +

{props.title}

+
+
+

Balance

+

+ $ {humanize(props.balance)} +

+
+ + {available < props.balance && ( + <> + {deductions.map(([flow, amount]) => ( + + ))} +
+

Available

+

+ $ {humanize(available ?? 0)} +

+
+ + )} +
-

Available

-

$ {humanize(available ?? 0)}

); } + +interface IDeduction { + amount: number; + to: Flow; +} +const tos: { [K in Flow]: string } = { + "liq-cash": "Grant", + "liq-lock": "Investment", + "lock-cash": "Grant", + "lock-liq": "Savings", +}; +function Deduction(props: IDeduction) { + return ( +
+
+ + $ {humanize(props.amount)} +
+ + to {tos[props.to]} +
+ ); +}