existing donation actions

src/pages/Admin/Charity/Dashboard/Loaded.tsx

@@ -3,7 +3,7 @@ import { Arrow, Content } from "components/Tooltip";
 import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useAdminContext } from "pages/Admin/Context";
-import type { EndowmentBalances } from "types/aws";
+import type { BalanceMovement, EndowmentBalances } from "types/aws";
 import Figure from "./Figure";
 import { MoveFundForm } from "./MoveFundForm";
 import { Movements } from "./Movements";
@@ -30,7 +30,7 @@ export function Loaded({
     0
   );
   const lockDeductions = Object.entries(mov).reduce(
-    (sum, [k, v]) => (k.startsWith("liq-") ? sum + v : sum),
+    (sum, [k, v]) => (k.startsWith("lock-") ? sum + v : sum),
     0
   );
 
@@ -39,6 +39,12 @@ export function Loaded({
     0
   );
 
+  const balances: BalanceMovement = {
+    "liq-cash": props.donationsBal - liqDeductions,
+    "liq-lock": props.donationsBal - liqDeductions,
+    "lock-cash": props.sustainabilityFundBal - lockDeductions,
+  };
+
   return (
     <div className={`${classes} mt-6`}>
       <h3 className="uppercase mb-4 font-black">Account Balances</h3>
@@ -55,13 +61,13 @@ export function Loaded({
           icon={<Icon size={21} type="PiggyBank" strokeWidth={1.5} />}
           amount={`$ ${humanize(props.donationsBal - props.payoutsMade, 2)}`}
           actions={
-            <div className="mt-8 flex justify-end">
+            <div className="mt-8 flex justify-end gap-x-2">
               <button
                 type="button"
                 onClick={() =>
                   showModal(MoveFundForm, {
                     type: "liq-cash",
-                    balance: props.donationsBal - liqDeductions,
+                    balance: balances["liq-cash"],
                     mov,
                     endowId: id,
                     effect: "append",
@@ -71,6 +77,21 @@ export function Loaded({
               >
                 withdraw
               </button>
+              <button
+                type="button"
+                onClick={() =>
+                  showModal(MoveFundForm, {
+                    type: "liq-lock",
+                    balance: balances["liq-lock"],
+                    mov,
+                    endowId: id,
+                    effect: "append",
+                  })
+                }
+                className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
+              >
+                invest
+              </button>
             </div>
           }
         />
@@ -92,6 +113,25 @@ export function Loaded({
           }
           icon={<Icon type="Stocks" size={16} />}
           amount={`$ ${humanize(props.sustainabilityFundBal, 2)}`}
+          actions={
+            <div className="mt-8 flex justify-end">
+              <button
+                type="button"
+                onClick={() =>
+                  showModal(MoveFundForm, {
+                    type: "lock-cash",
+                    balance: balances["lock-cash"],
+                    mov,
+                    endowId: id,
+                    effect: "append",
+                  })
+                }
+                className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
+              >
+                withdraw
+              </button>
+            </div>
+          }
         />
         <Figure
           title="Contributions count"
@@ -115,7 +155,7 @@ export function Loaded({
         </p>
       </h3>
 
-      <Movements {...mov} classes="mt-4" />
+      <Movements endowId={id} mov={mov} classes="mt-4" balances={balances} />
       <Schedule
         amount={props.payoutsPending}
         periodNext={period.next}

src/pages/Admin/Charity/Dashboard/MoveFundForm.tsx

@@ -15,6 +15,7 @@ interface IMoveFundForm {
   endowId: number;
   balance: number;
   mov: BalanceMovement;
+  initAmount?: number;
 }
 
 export function MoveFundForm(props: IMoveFundForm) {
@@ -28,12 +29,15 @@ export function MoveFundForm(props: IMoveFundForm) {
     register,
     formState: { errors, isSubmitting },
   } = useForm<FV>({
-    defaultValues: { amount: "" },
+    defaultValues: { amount: props.initAmount?.toString() || "" },
     resolver: yupResolver(
       schema<FV>({
         amount: stringNumber(
           (s) => s.required("required"),
-          (n) => n.positive().max(props.balance, "can't be more than balance")
+          (n) =>
+            n
+              .min(0, "can't be negative")
+              .max(props.balance, "can't be more than balance")
         ),
       })
     ),
@@ -46,7 +50,10 @@ export function MoveFundForm(props: IMoveFundForm) {
           await moveFund({
             endowId: props.endowId,
             ...props.mov,
-            [props.type]: props.mov[props.type] + +fv.amount,
+            [props.type]:
+              props.effect === "append"
+                ? props.mov[props.type] + +fv.amount
+                : +fv.amount,
           }).unwrap();
           closeModal();
         } catch (err) {

src/pages/Admin/Charity/Dashboard/Movements.tsx

@@ -1,9 +1,14 @@
 import Icon from "components/Icon";
-import { humanize } from "helpers";
+import { useModalContext } from "contexts/ModalContext";
+import { humanize, roundDownToNum } from "helpers";
 import type { ReactNode } from "react";
 import type { BalanceMovement } from "types/aws";
+import { MoveFundForm } from "./MoveFundForm";
 
 type Flow = keyof BalanceMovement;
+
+type Balances = { [K in Flow]: number };
+
 const asset: {
   [K in Flow]: {
     icon: ReactNode;
@@ -28,34 +33,56 @@ const asset: {
   },
 };
 
-export function Movements({
-  classes = "",
-  ...props
-}: BalanceMovement & { classes?: string }) {
-  const movs = Object.entries(props).filter(([_, v]) => v > 0);
+interface Props {
+  endowId: number;
+  mov: BalanceMovement;
+  balances: Balances;
+  classes?: string;
+}
 
+export function Movements({ classes = "", ...props }: Props) {
+  const { showModal } = useModalContext();
+  const movs = Object.entries(props.mov).filter(([_, v]) => v > 0);
   if (movs.length === 0) return null;
 
   return (
     <div className={`p-4 grid rounded border border-gray-l4 ${classes}`}>
       <h4 className="grid border-b border-gray-l4 w-full pb-2">
         Pending transactions
       </h4>
-      <div className="grid grid-cols-[auto_auto_auto_1fr_auto] mt-2">
-        {Object.entries(props)
-          .filter(([_, v]) => v > 0)
-          .map(([k, v]) => (
+      <div className="grid grid-cols-[auto_auto_auto_1fr] mt-2">
+        {movs.map((entry) => {
+          const [k, v] = entry as [Flow, number];
+          const a = asset[k];
+          return (
             <div
               key={k}
               className="grid gap-x-2 grid-cols-subgrid col-span-full items-center"
             >
-              {asset[k as Flow].icon}
-              <span>{asset[k as Flow].title}</span>
-              <span>$ {humanize(v)}</span>
-              <span className="text-right">edit</span>
-              <span>cancel</span>
+              {a.icon}
+              <span>{a.title}</span>
+              <span>
+                $ {humanize(v)} from:{a.source}
+              </span>
+              <button
+                type="button"
+                onClick={() =>
+                  showModal(MoveFundForm, {
+                    type: k,
+                    balance: props.balances[k],
+                    mov: props.mov,
+                    endowId: props.endowId,
+                    effect: "override",
+                    initAmount: roundDownToNum(v, 2),
+                  })
+                }
+                className="text-right"
+              >
+                edit
+              </button>
             </div>
-          ))}
+          );
+        })}
       </div>
     </div>
   );