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