allocation history wiring

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

@@ -9,8 +9,9 @@ import type { EndowmentBalances } from "types/aws";
 import { useAdminContext } from "../../Context";
 import Seo from "../Seo";
 import Figure from "./Figure";
+import { PayoutHistory } from "./PayoutHistory";
 import { Schedule } from "./Schedule";
-import { monthPeriod } from "./montPeriod";
+import { monthPeriod } from "./monthPeriod";
 
 export default function Dashboard() {
  const { id } = useAdminContext();
@@ -37,6 +38,7 @@ function Loaded({
  classes = "",
  ...props
 }: EndowmentBalances & { classes?: string }) {
+ const { id } = useAdminContext();
  const period = monthPeriod();
  return (
  <div className={`${classes} mt-6`}>
@@ -98,6 +100,9 @@ function Loaded({
  periodNext={period.next}
  periodRemaining={period.distance}
  />
+
+ <div className="w-full mt-16 h-1.5 bg-gray-l5 rounded-full shadow-inner" />
+ <PayoutHistory endowId={id} classes="mt-2" />
  </div>
  );
 }

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

@@ -4,8 +4,9 @@ import usePagination from "./usePagination";
 
 interface Props {
  endowId: number;
+ classes?: string;
 }
-export function PayoutHistory(props: Props) {
+export function PayoutHistory({ classes = "", endowId }: Props) {
  const {
  data,
  hasMore,
@@ -14,15 +15,13 @@ export function PayoutHistory(props: Props) {
  isLoadingNextPage,
  loadNextPage,
  isFetching,
- } = usePagination(props.endowId);
+ } = usePagination(endowId);
 
  const isLoadingOrError = isLoading || isLoadingNextPage || isError;
 
  return (
- <div className="grid content-start gap-y-4 lg:gap-y-8 lg:gap-x-3 relative padded-container py-20 lg:pt-10">
- <h1 className="text-center text-3xl col-span-full max-lg:mb-4">
- Payout history
- </h1>
+ <div className={`${classes} grid content-start`}>
+ <h4 className="text-lg mb-2">Allocation History</h4>
 
  <QueryLoader
  queryState={{
@@ -31,10 +30,11 @@ export function PayoutHistory(props: Props) {
  isFetching,
  isError: isError,
  }}
+ classes={{ container: classes }}
  messages={{
- loading: "Loading applications...",
- error: "Failed to get applications",
- empty: "No applications found.",
+ loading: "Loading records...",
+ error: "Failed to get records",
+ empty: "No record found",
  }}
  >
  {(records) => (

src/pages/Admin/Charity/Dashboard/PayoutHistory/Table.tsx

@@ -13,15 +13,12 @@ export default function Table({
 }: TableProps) {
  return (
  <table
- className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-blue-l2`}
+ className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-gray-l4`}
  >
- <TableSection
- type="thead"
- rowClass="bg-blue-l4 dark:bg-blue-d7 divide-x divide-blue-l2"
- >
+ <TableSection type="thead" rowClass="divide-x divide-gray-l4">
  <Cells
  type="th"
- cellClass="px-3 py-4 text-xs uppercase font-semibold text-left first:rounded-tl last:rounded-tr"
+ cellClass="px-3 py-2 bg-gray-l5 text-xs uppercase font-semibold text-left first:rounded-tl last:rounded-tr"
  >
  <>Date</>
  <>Grant</>
@@ -32,15 +29,15 @@ export default function Table({
  </TableSection>
  <TableSection
  type="tbody"
- rowClass="even:bg-blue-l5 dark:odd:bg-blue-d6 dark:even:bg-blue-d7 divide-x divide-blue-l2"
+ rowClass="even:bg-blue-l5 dark:odd:bg-blue-d6 dark:even:bg-blue-d7 divide-x divide-gray-l4"
  selectedClass="bg-blue-l4 dark:bg-blue-d4"
  >
  {records
  .map((row) => (
  <Cells
  key={row.date}
  type="td"
- cellClass={`p-3 border-t border-blue-l2 max-w-[256px] truncate ${
+ cellClass={`p-3 border-t border-gray-l4 max-w-[256px] truncate ${
  hasMore ? "" : "first:rounded-bl last:rounded-br"
  }`}
  >
@@ -56,7 +53,7 @@ export default function Table({
  <td
  colSpan={9}
  key="load-more-btn"
- className="border-t border-blue-l2 rounded-b"
+ className="border-t border-gray-l4 rounded-b"
  >
  <LoadMoreBtn
  onLoadMore={onLoadMore}

src/services/apes/donations.ts

@@ -30,7 +30,7 @@ export const {
  query: () => `v1/tokens/list${IS_TEST ? "/test" : ""}`,
  }),
  payouts: builder.query<PayoutsPage, PayoutsQueryParams>({
- query: (endowId) => `endowments/${endowId}/payouts`,
+ query: ({ endowId }) => `endowments/${endowId}/payouts`,
  }),
  }),
 });