add lock tooltip

AngelProtocolFinance · Sep 24, 2024 · b290873 · b290873
1 parent cda04ff
commit b290873
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 6 deletions.
diff --git a/src/pages/Admin/Charity/Dashboard/Dashboard.tsx b/src/pages/Admin/Charity/Dashboard/Dashboard.tsx
@@ -4,9 +4,11 @@ import { useEndowBalanceQuery } from "services/apes";
 import { useAdminContext } from "../../Context";
 import Seo from "../Seo";
 
+import Icon from "components/Icon";
 import { ErrorStatus } from "components/Status";
 import { useEndowmentQuery } from "services/aws/aws";
 import { Loaded } from "./Loaded";
+import { monthPeriod } from "./monthPeriod";
 
 export default function Dashboard() {
   const { id } = useAdminContext();
@@ -29,11 +31,22 @@ export default function Dashboard() {
     return <ErrorStatus>Failed to get nonprofit organisation info</ErrorStatus>;
   }
 
+  const period = monthPeriod();
+
   return (
     <div className="@container w-full max-w-4xl grid content-start">
       <Seo title="Nonprofit Dashboard" />
       <h3 className="font-bold text-2xl mb-4">Dashboard</h3>
-
+      {period.isPre && (
+        <div className="bg-gray-l4 text-navy-l1 text-sm p-2 rounded">
+          <Icon
+            type="Info"
+            size={16}
+            className="relative inline bottom-px mr-1"
+          />
+          Pending transactions are now locked for processing
+        </div>
+      )}
       <Loaded
         balances={balQuery.data}
         allocation={

diff --git a/src/pages/Admin/Charity/Dashboard/LiqActions.tsx b/src/pages/Admin/Charity/Dashboard/LiqActions.tsx
@@ -7,6 +7,7 @@ interface Props {
   endowId: number;
   balance: number;
   mov: BalanceMovement;
+  disabled?: boolean;
 }
 
 export function LiqActions({ classes = "", ...props }: Props) {
@@ -15,6 +16,7 @@ export function LiqActions({ classes = "", ...props }: Props) {
     <div className={`${classes} flex justify-end gap-x-2`}>
       <button
         type="button"
+        disabled={props.disabled}
         onClick={() =>
           showModal(MoveFundForm, {
             title: "Withdraw from savings",
@@ -25,12 +27,13 @@ export function LiqActions({ classes = "", ...props }: Props) {
             effect: "append",
           })
         }
-        className="text-xs px-4 py-1.5 rounded-md bg-gray-d2 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
+        className="text-xs px-4 py-1.5 rounded-md bg-gray-d2 disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
       >
         Withdraw
       </button>
       <button
         type="button"
+        disabled={props.disabled}
         onClick={() =>
           showModal(MoveFundForm, {
             title: "Invest savings",
@@ -41,7 +44,7 @@ export function LiqActions({ classes = "", ...props }: Props) {
             effect: "append",
           })
         }
-        className="text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-green text-white font-heading outline-blue-d1"
+        className="text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-green disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
       >
         Invest
       </button>

diff --git a/src/pages/Admin/Charity/Dashboard/Loaded.tsx b/src/pages/Admin/Charity/Dashboard/Loaded.tsx
@@ -45,6 +45,7 @@ export function Loaded({ classes = "", ...props }: Props) {
           amount={`$ ${humanize(props.balances.liq ?? 0, 2)}`}
           actions={
             <LiqActions
+              disabled={period.isPre}
               classes="mt-8"
               endowId={id}
               mov={mov}
@@ -72,6 +73,7 @@ export function Loaded({ classes = "", ...props }: Props) {
           amount={`$ ${humanize(props.balances.sustainabilityFundBal, 2)}`}
           actions={
             <LockActions
+              disabled={period.isPre}
               classes="mt-8"
               balance={props.balances.sustainabilityFundBal ?? 0}
               endowId={id}
@@ -106,6 +108,7 @@ export function Loaded({ classes = "", ...props }: Props) {
         </h3>
 
         <Movements
+          disabled={period.isPre}
           endowId={id}
           mov={mov}
           classes="mt-4"
@@ -121,6 +124,7 @@ export function Loaded({ classes = "", ...props }: Props) {
           }}
         />
         <Schedule
+          disabled={period.isPre}
           amount={props.balances.payoutsPending}
           periodNext={period.next}
           periodRemaining={period.distance}

diff --git a/src/pages/Admin/Charity/Dashboard/LockActions.tsx b/src/pages/Admin/Charity/Dashboard/LockActions.tsx
@@ -7,6 +7,7 @@ interface Props {
   balance: number;
   mov: BalanceMovement;
   classes?: string;
+  disabled?: boolean;
 }
 
 export function LockActions({ classes = "", ...props }: Props) {
@@ -15,6 +16,7 @@ export function LockActions({ classes = "", ...props }: Props) {
     <div className={`${classes} flex justify-end gap-x-2`}>
       <button
         type="button"
+        disabled={props.disabled}
         onClick={() =>
           showModal(MoveFundForm, {
             title: "Transfer to savings",
@@ -25,11 +27,12 @@ export function LockActions({ classes = "", ...props }: Props) {
             effect: "append",
           })
         }
-        className="text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-amber text-white font-heading outline-blue-d1"
+        className="text-xs font-bold rounded-md px-4 shadow-inner shadow-white/30 drop-shadow-sm py-1 bg-amber disabled:bg-gray-l3 text-white font-heading outline-blue-d1"
       >
         Save
       </button>
       <button
+        disabled={props.disabled}
         type="button"
         onClick={() =>
           showModal(MoveFundForm, {
@@ -41,7 +44,7 @@ export function LockActions({ classes = "", ...props }: Props) {
             effect: "append",
           })
         }
-        className="text-xs px-4 py-1.5 rounded-md bg-gray-d2 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
+        className="text-xs px-4 py-1.5 rounded-md bg-gray-d2 disabled:bg-gray-l3 outline-blue-d1 text-white font-heading font-bold drop-shadow-sm shadow-inner shadow-white/30"
       >
         Withdraw
       </button>

diff --git a/src/pages/Admin/Charity/Dashboard/Movements.tsx b/src/pages/Admin/Charity/Dashboard/Movements.tsx
@@ -41,6 +41,7 @@ interface Props {
   mov: BalanceMovement;
   balance: (flow: Flow) => number;
   classes?: string;
+  disabled?: boolean;
 }
 
 export function Movements({ classes = "", ...props }: Props) {
@@ -69,6 +70,7 @@ export function Movements({ classes = "", ...props }: Props) {
               <span className="text-xs ml-2">from</span>
               <span className="text-sm">{a.source}</span>
               <button
+                disabled={props.disabled}
                 type="button"
                 onClick={() =>
                   showModal(MoveFundForm, {
@@ -81,7 +83,7 @@ export function Movements({ classes = "", ...props }: Props) {
                     initAmount: roundDownToNum(v, 2),
                   })
                 }
-                className="text-right bg-gray-l4 text-navy-d4 px-3 py-1 font-heading hover:bg-gray-l3 justify-self-end text-xs rounded-full"
+                className="text-right bg-gray-l4 disabled:bg-gray-l5 text-navy-d4 disabled:text-gray px-3 py-1 font-heading hover:bg-gray-l3 justify-self-end text-xs rounded-full"
               >
                 edit
               </button>

diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx
@@ -19,6 +19,7 @@ interface Props {
   periodNext: string;
   periodRemaining: string;
   grantFromBal: number;
+  disabled?: boolean;
 }
 export function Schedule(props: Props) {
   const { id } = useAdminContext();
@@ -44,6 +45,7 @@ export function Schedule(props: Props) {
         ) : null}
 
         <button
+          disabled={props.disabled}
           type="button"
           className="hover:text-blue disabled:text-gray"
           onClick={() => {

diff --git a/src/pages/Admin/Charity/Dashboard/monthPeriod.ts b/src/pages/Admin/Charity/Dashboard/monthPeriod.ts
@@ -4,17 +4,25 @@ import {
   format,
   formatDistance,
   startOfMonth,
+  subDays,
 } from "date-fns";
 export function monthPeriod() {
   const now = new Date();
   const from = startOfMonth(now);
   const to = endOfMonth(now);
   const next = addDays(to, 1);
+  /** pre-processing starts 5 days
+   *  before end of the period
+   *  which actions are disabled
+   * */
+  const pre = subDays(to, 5);
 
   return {
     from: format(from, "PP"),
     to: format(to, "PP"),
     next: format(next, "PP"),
     distance: formatDistance(now, next),
+    /** pre-processing starts */
+    isPre: now >= pre,
   };
 }