diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 89f229d4f7..80f7069530 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -1,12 +1,7 @@ import type { ReactNode } from "react"; -import { - Portal, - Root, - TooltipProvider, - Trigger, -} from "@radix-ui/react-tooltip"; -export { Content, TooltipArrow as Arrow } from "@radix-ui/react-tooltip"; +import { Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip"; +export { Content, Arrow } from "@radix-ui/react-tooltip"; interface Props { /** must be wrapped by Content */ @@ -15,11 +10,11 @@ interface Props { } export function Tooltip(props: Props) { return ( - + {props.trigger} {props.children} - + ); } diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx index 899bc6b914..e73bafd972 100644 --- a/src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx +++ b/src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx @@ -3,6 +3,7 @@ import leaf from "assets/icons/leaf.png"; import sendMoney from "assets/icons/send-money.png"; import Icon from "components/Icon"; import Image from "components/Image"; +import { Arrow, Content, Tooltip } from "components/Tooltip"; import { humanize } from "helpers"; import type { ReactNode } from "react"; import type { Allocation } from "types/aws"; @@ -40,7 +41,7 @@ export function AllocationSlider({ return (
{/** percentages */} -
+
} @@ -90,16 +91,29 @@ interface IRow { pct: number; amount: number; } -function num(amount: number, pct: number) { - return humanize(amount * (pct / 100)); -} + function Row(props: IRow) { + const num = props.amount * (props.pct / 100); + const isLessThanMin = num !== 0 && num < 50; return ( -
+
{props.icon} -

{props.title}

-

{props.pct}%

-

$ {num(props.amount, props.pct)}

+

{props.title}

+

{props.pct}%

+

+ $ {humanize(num)} +

+ + {isLessThanMin ? ( + } + > + + Less than minimum of $50, would be processed next period. + + + + ) : null}
); } diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx index 4eff94e406..dc3c22f629 100644 --- a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx +++ b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx @@ -5,6 +5,7 @@ import { Arrow, Content, Tooltip } from "components/Tooltip"; import { useModalContext } from "contexts/ModalContext"; import { humanize } from "helpers"; import { useAdminContext } from "pages/Admin/Context"; +import type { ReactNode } from "react"; import { useEndowmentQuery } from "services/aws/aws"; import { Edit } from "./Edit"; @@ -22,9 +23,6 @@ export function Schedule(props: Props) { fields: ["allocation"], }); - const val = (pct?: number) => - pct || pct === 0 ? `$ ${humanize((pct / 100) * props.amount)}` : "---"; - return (
@@ -52,53 +50,81 @@ export function Schedule(props: Props) { in {props.periodRemaining}

-
-
- - -
- Grants - - } - > - - Donations received through Better Giving that will distributed - to your bank account. - - - -
+
+ } + title={ +
+ Grants + + } + > + + Donations received through Better Giving that will distributed + to your bank account. + + + +
+ } + pct={endow?.allocation?.cash ?? 0} + amount={props.amount} + /> + } + title={Savings} + pct={endow?.allocation?.liq ?? 50} + amount={props.amount} + /> - - {endow?.allocation?.cash ?? 0} % - - - {val(endow ? endow.allocation?.cash ?? 0 : undefined)} - -
-
- - Savings - - {endow?.allocation?.liq ?? 50} % - - - {val(endow ? endow.allocation?.liq ?? 50 : undefined)} - -
-
- - Investments - - {endow?.allocation?.lock ?? 50} % - - - {val(endow ? endow.allocation?.lock ?? 50 : undefined)} - -
+ } + title={Investments} + pct={endow?.allocation?.lock ?? 50} + amount={props.amount} + />
); } + +interface IRow { + pct: number; + icon: ReactNode; + title: ReactNode; + amount: number; +} +function Row({ pct, icon, title, amount }: IRow) { + const num = (pct / 100) * amount; + const isLessThanMin = num < 50 && num !== 0; + return ( +
+ {icon} + {title} + {pct ?? 50} % + + $ {humanize((pct / 100) * amount)} + + {isLessThanMin && ( + } + > + + Less than min + + + + )} +
+ ); +} diff --git a/src/pages/Admin/Charity/Dashboard/common.ts b/src/pages/Admin/Charity/Dashboard/common.ts new file mode 100644 index 0000000000..e69de29bb2