preset shows in dashboard

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

@@ -1,6 +1,6 @@
 import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
 import type { Allocation } from "types/aws";
-import { allocationOptions, toAlloc, toKey } from "./common";
+import { allocationOptions, toAlloc, toAllocOptValue } from "./common";
 
 interface Props {
  value: Allocation;
@@ -9,12 +9,15 @@ interface Props {
 export function AllocationOptions(props: Props) {
  return (
  <RadioGroup
- value={toKey(props.value)}
+ value={toAllocOptValue(props.value)}
  onChange={(v) => props.onChange(toAlloc(v))}
- className="grid gap-y-2"
+ className="grid grid-cols-[auto_1fr] gap-y-2"
  >
  {allocationOptions.map((option) => (
- <Field key={option.value} className="flex items-center group ">
+ <Field
+ key={option.value}
+ className="grid grid-cols-subgrid col-span-full items-center group"
+ >
  <Radio value={option.value} />
  <Label className="flex flex-1 gap-x-3 items-center group-has-[[data-checked]]:bg-blue-l4 border border-gray-l4 group-has-[[data-checked]]:border-blue-l4 group-hover:ring-1 group-hover:border-blue-l3 px-2 py-4 rounded-lg">
  {option.icon}

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

@@ -7,7 +7,7 @@ import { useEditEndowmentMutation } from "services/aws/aws";
 import type { Allocation } from "types/aws";
 import { AllocationOptions } from "./AllocationOptions";
 import { AllocationSlider } from "./AllocationSlider";
-import { allocationOptions, toKey } from "./common";
+import { allocationOptions, toAllocOptValue } from "./common";
 
 export function Edit({
  id,
@@ -19,7 +19,7 @@ export function Edit({
  const { handleError } = useErrorContext();
  const [alloc, setAlloc] = useState<Allocation>(props);
  const [isCustom, setIsCustom] = useState(
- allocationOptions.every((opt) => opt.value !== toKey(props))
+ allocationOptions.every((opt) => opt.value !== toAllocOptValue(props))
  );
 
  return (

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

@@ -8,7 +8,11 @@ import type { ReactNode } from "react";
 import { useEndowmentQuery } from "services/aws/aws";
 import type { Allocation } from "types/aws";
 import { Edit } from "./Edit";
-import { MIN_PROCESSING_AMOUNT } from "./common";
+import {
+ MIN_PROCESSING_AMOUNT,
+ allocationOptions,
+ toAllocOptValue,
+} from "./common";
 
 interface Props {
  amount: number;
@@ -29,14 +33,25 @@ export function Schedule(props: Props) {
  ? { cash: 0, liq: 100, lock: 0 }
  : endow.allocation;
 
+ const presetOpt = allocationOptions.find(
+ (opt) => opt.value === toAllocOptValue(allocation)
+ );
+
  return (
  <div className="p-4 grid rounded border border-gray-l4 mt-4">
- <div className="flex flex-row items-center justify-between space-y-0">
+ <div className="flex items-center gap-x-4 pb-2 border-b border-gray-l4 w-full">
  <h4 className="mb-1">Allocation Settings</h4>
+ {presetOpt ? (
+ <div className="text-sm flex items-center gap-x-1 bg-blue-l4 rounded-full px-3 py-1">
+ <span className="scale-75">{presetOpt.icon}</span>
+ <span className="text-xs text-navy-l1">{presetOpt.label}</span>
+ </div>
+ ) : null}
+
  <button
  disabled={!endow}
  type="button"
- className="hover:text-blue disabled:text-gray"
+ className="hover:text-blue disabled:text-gray ml-auto"
  onClick={() => {
  if (!endow) throw "@dev: no endow";
  showModal(Edit, { ...allocation, amount: props.amount, id });
@@ -46,27 +61,8 @@ export function Schedule(props: Props) {
  <span className="sr-only">Edit allocation settings</span>
  </button>
  </div>
- <p className="text-sm mb-4 text-gray">
- will take effect on: {props.periodNext}{" "}
- <span className="text-xs bg-gray text-white px-2 py-1 rounded">
- in {props.periodRemaining}
- </span>
- <Tooltip
- trigger={
- <Icon type="Info" size={16} className="text-navy-l1 ml-2 inline" />
- }
- >
- <Content className="max-w-xs text-sm bg-navy-d4 text-gray-l4 p-3 rounded-lg">
- We process donations monthly, with a minimum balance requirement of
- ${MIN_PROCESSING_AMOUNT} per bucket. If your balance in any bucket
- is below ${MIN_PROCESSING_AMOUNT}, it will be carried over to the
- next month until it exceeds $50
- <Arrow />
- </Content>
- </Tooltip>
- </p>
 
- <div className="grid grid-cols-[auto_auto_1fr] gap-y-3 gap-x-2">
+ <div className="grid grid-cols-[auto_auto_1fr] gap-y-3 gap-x-2 mt-4">
  <Row
  icon={<Icon type="ArrowRight" className="h-4 w-4 mr-2" />}
  title={
@@ -103,6 +99,25 @@ export function Schedule(props: Props) {
  pct={endow?.allocation?.lock ?? 50}
  />
  </div>
+ <p className="text-sm text-gray mt-6 text-right">
+ Will take effect on: {props.periodNext}{" "}
+ <span className="text-xs bg-gray text-white px-2 py-1 rounded">
+ in {props.periodRemaining}
+ </span>
+ <Tooltip
+ trigger={
+ <Icon type="Info" size={16} className="text-navy-l1 ml-2 inline" />
+ }
+ >
+ <Content className="max-w-xs text-sm bg-navy-d4 text-gray-l4 p-3 rounded-lg">
+ We process donations monthly, with a minimum balance requirement of
+ ${MIN_PROCESSING_AMOUNT} per bucket. If your balance in any bucket
+ is below ${MIN_PROCESSING_AMOUNT}, it will be carried over to the
+ next month until it exceeds $50
+ <Arrow />
+ </Content>
+ </Tooltip>
+ </p>
  </div>
  );
 }

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

@@ -8,7 +8,7 @@ export function toAlloc(input: string): Allocation {
  return { cash: a, liq: b, lock: c };
 }
 
-export function toKey(input: Allocation): string {
+export function toAllocOptValue(input: Allocation): string {
  const padNumber = (num: number): string => num.toString().padStart(3, "0");
  return `${padNumber(input.cash)}-${padNumber(input.liq)}-${padNumber(
  input.lock
@@ -26,24 +26,24 @@ export const allocationOptions = [
  value: "000-025-075",
  label: "Long-Term Sustainability",
  description: "25% Savings, 75% Investment",
- icon: <Icon type="Sprout" className="h-6 w-6 shrink-0 text-green" />,
+ icon: <Icon type="Sprout" className="size-6 shrink-0 text-green" />,
  },
  {
  value: "000-050-050",
  label: "Balanced Growth",
  description: "50% Savings, 50% Investment",
- icon: <Icon type="TrendingUp" className="h-6 w-6 shrink-0 text-blue-d1" />,
+ icon: <Icon type="TrendingUp" className="size-5 shrink-0 text-blue-d1" />,
  },
  {
  value: "025-050-025",
  label: "Short-Term Stability",
  description: "25% Grant, 50% Savings, 25% Investment",
- icon: <Icon type="Banknote" className="h-6 w-6 shrink-0 text-blue-d1" />,
+ icon: <Icon type="Banknote" className="size-6 shrink-0 text-blue-d1" />,
  },
  {
  value: "075-025-000",
  label: "Immediate Impact",
  description: "75% Grant, 25% Savings",
- icon: <Icon type="Zap" className="h-6 w-6 shrink-0 text-amber" />,
+ icon: <Icon type="Zap" className="size-6 shrink-0 text-amber" />,
  },
 ];