withdraw context

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 (
  <Modal
  onSubmit={handleSubmit(async (fv) => {
@@ -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"
  >
- <h4 className="text-left">{props.title}</h4>
- <p className="mt-2 text-sm">Balance</p>
- <p className="font-heading font-bold">$ {humanize(props.balance)}</p>
- {deductions}
+ <h4 className="mb-2">{props.title}</h4>
+ <div className="grid grid-cols-[auto_auto_1fr] items-center mt-2 gap-x-2 gap-y-2">
+ <div className="grid grid-cols-subgrid col-span-full items-center mb-4 border-b border-gray-l4 pb-2">
+ <p className="text-sm mr-2 text-navy-l1">Balance</p>
+ <p className="font-heading font-bold text-left">
+ $ {humanize(props.balance)}
+ </p>
+ </div>
+
+ {available < props.balance && (
+ <>
+ {deductions.map(([flow, amount]) => (
+ <Deduction to={flow as Flow} amount={amount} />
+ ))}
+ <div className="grid grid-cols-subgrid col-span-full items-center border-t pt-2 mt-4 border-gray-l4">
+ <p className="text-sm">Available</p>
+ <p className="font-heading font-bold">
+ $ {humanize(available ?? 0)}
+ </p>
+ </div>
+ </>
+ )}
+ </div>
 
- <p className="mt-4 text-sm">Available</p>
- <p className="font-heading font-bold">$ {humanize(available ?? 0)}</p>
  <Field className="grid my-4">
  <Label className="font-semibold mb-1">
  {props.effect === "override" ? "Edit amount" : "Amount"}
@@ -108,3 +126,26 @@ export function MoveFundForm(props: IMoveFundForm) {
  </Modal>
  );
 }
+
+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 (
+ <div className="col-span-full grid grid-cols-subgrid text-sm">
+ <div className="flex items-center gap-x-2">
+ <Icon type="ArrowLeft" size={15} className="text-navy-l1" />
+ <span className="text-left">$ {humanize(props.amount)}</span>
+ </div>
+
+ <span>to {tos[props.to]}</span>
+ </div>
+ );
+}