add values next to percent in editor

src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx

@@ -3,14 +3,17 @@ 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 { humanize } from "helpers";
+import type { ReactNode } from "react";
 import type { Allocation } from "types/aws";
 
-type Props = {
+interface Props {
+  amount: number;
   disabled?: boolean;
   /** cash, liq, lock */
   value: Allocation;
   onChange: (value: Allocation) => void;
-};
+}
 
 export type Boundary = [number, number];
 
@@ -26,36 +29,44 @@ const toAlloc = ([b1, b2]: Boundary): Allocation => {
   };
 };
 
-export function AllocationSlider({ disabled = false, value, onChange }: Props) {
+export function AllocationSlider({
+  disabled = false,
+  value,
+  onChange,
+  amount,
+}: Props) {
   const boundary = toBoundary(value);
 
   return (
-    <div className="grid gap-5">
+    <div className="grid">
       {/** percentages */}
-      <div className="grid grid-cols-[auto_auto_1fr] gap-x-4 gap-y-2">
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <Icon type="ArrowRight" className="text-gray" size={20} />
-          <p className="text-sm">Grant</p>
-          <p className="text-right">{value.cash}%</p>
-        </div>
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <Image src={sendMoney} width={20} />
-          <p className="text-sm">Savings</p>
-          <p className="text-right">{value.liq}%</p>
-        </div>
-        <div className="grid grid-cols-subgrid col-span-full items-center">
-          <Image src={leaf} className="" />
-          <p className="text-sm">Investment</p>
-          <p className="text-right">{value.lock}%</p>
-        </div>
+      <div className="grid grid-cols-[auto_auto_1fr_auto] gap-x-4 gap-y-2">
+        <Row
+          title="Grant"
+          icon={<Icon type="ArrowRight" className="text-gray" size={20} />}
+          pct={value.cash}
+          amount={amount}
+        />
+        <Row
+          title="Savings"
+          icon={<Image src={sendMoney} width={20} />}
+          pct={value.liq}
+          amount={amount}
+        />
+        <Row
+          title="Investment"
+          icon={<Image src={leaf} className="" />}
+          pct={value.lock}
+          amount={amount}
+        />
       </div>
 
       {/** slider */}
       <Slider.Root
         value={boundary}
         minStepsBetweenThumbs={0}
         onValueChange={(b: Boundary) => onChange(toAlloc(b))}
-        className="group/slider relative flex items-center select-none touch-none"
+        className="group/slider relative flex items-center select-none touch-none mt-5"
         disabled={disabled}
       >
         <Slider.Track
@@ -72,3 +83,23 @@ export function AllocationSlider({ disabled = false, value, onChange }: Props) {
     </div>
   );
 }
+
+interface IRow {
+  title: string;
+  icon: ReactNode;
+  pct: number;
+  amount: number;
+}
+function num(amount: number, pct: number) {
+  return humanize(amount * (pct / 100));
+}
+function Row(props: IRow) {
+  return (
+    <div className="grid grid-cols-subgrid col-span-full items-center">
+      {props.icon}
+      <p className="text-sm">{props.title}</p>
+      <p className="text-gray text-xs text-right">{props.pct}%</p>
+      <p className="text-sm text-right">$ {num(props.amount, props.pct)}</p>
+    </div>
+  );
+}

src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx

@@ -1,21 +1,26 @@
 import Modal from "components/Modal";
 import { useErrorContext } from "contexts/ErrorContext";
 import { useModalContext } from "contexts/ModalContext";
+import { humanize } from "helpers";
 import { useState } from "react";
 import { useEditEndowmentMutation } from "services/aws/aws";
 import type { Allocation } from "types/aws";
 import { AllocationSlider } from "./AllocationSlider";
 
-export function Edit(props: Allocation & { id: number }) {
+export function Edit(props: Allocation & { id: number; amount: number }) {
   const { closeModal } = useModalContext();
   const [editEndow, { isLoading }] = useEditEndowmentMutation();
   const { handleError } = useErrorContext();
   const [alloc, setAlloc] = useState<Allocation>(props);
 
   return (
     <Modal className="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-lg p-6">
-      <h4 className="mb-6">Edit allocation</h4>
+      <div className="mb-6 flex justify-between border-b border-gray-l4 pb-2">
+        <h4>Edit allocation</h4>
+        <p>$ {humanize(props.amount)}</p>
+      </div>
       <AllocationSlider
+        amount={props.amount}
         disabled={isLoading}
         value={alloc}
         onChange={(v) => setAlloc(v)}

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

@@ -40,6 +40,7 @@ export function Schedule(props: Props) {
             if (!endow) throw "@dev: no endow";
             showModal(Edit, {
               ...(endow.allocation ?? { cash: 0, liq: 50, lock: 50 }),
+              amount: props.amount,
               id,
             });
           }}