tx history

src/components/Icon/icons.ts

@@ -1,5 +1,7 @@
 import {
   ArrowDownToLine,
+  ArrowLeft,
+  ArrowLeftRight,
   ArrowRight,
   ArrowUpFromLine,
   BadgeCheck,
@@ -71,6 +73,8 @@ import {
 } from "lucide-react";
 
 export const icons = {
+  ArrowLeft,
+  ArrowLeftRight,
   ArrowRight: ArrowRight,
   Back: ChevronLeft,
   Banknote,

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

@@ -1,8 +1,56 @@
+import Icon from "components/Icon";
 import TableSection, { Cells } from "components/TableSection";
 import { humanize } from "helpers";
+import type { ReactNode } from "react";
+import type { BalanceTx } from "types/aws";
 import LoadMoreBtn from "./LoadMoreBtn";
 import type { TableProps } from "./types";
 
+const transferIcon = (
+  <Icon type="ArrowLeftRight" className="size-4 text-amber" />
+);
+const unprocessedIcon = <Icon type="Info" className="size-4 text-gray" />;
+const receivedIcon = <Icon type="ArrowRight" className="size-4 text-green" />;
+const withdrawIcon = <Icon type="ArrowLeft" className="size-4 text-gray" />;
+
+const txs: {
+  [K in `${BalanceTx["from"]}-${BalanceTx["to"]}`]: {
+    description: string;
+    icon: ReactNode;
+  };
+} = {
+  "donation-cash": { description: "Donation paid out", icon: withdrawIcon },
+  "donation-liq": { description: "Donation saved", icon: receivedIcon },
+  "donation-lock": { description: "Donation invested", icon: receivedIcon },
+  "donation-unprocessed": {
+    description: "Unprocessed donation",
+    icon: unprocessedIcon,
+  },
+  "liq-cash": { description: "Withdrawal from savings", icon: withdrawIcon },
+  "lock-cash": {
+    description: "Withdrawal from investments",
+    icon: withdrawIcon,
+  },
+  "liq-lock": {
+    description: "Transfer from savings to investments",
+    icon: transferIcon,
+  },
+  "lock-liq": {
+    description: "Transfer from investments to savings",
+    icon: transferIcon,
+  },
+  "liq-liq": { description: "--", icon: null },
+  "lock-lock": { description: "--", icon: null },
+  "liq-unprocessed": {
+    description: "Unprocessed withdrawal from savings",
+    icon: unprocessedIcon,
+  },
+  "lock-unprocessed": {
+    description: "Unprocessed withdrawal from investments",
+    icon: unprocessedIcon,
+  },
+};
+
 export default function Table({
   records,
   classes = "",
@@ -20,9 +68,9 @@ export default function Table({
           type="th"
           cellClass="px-3 py-2 bg-gray-l5 text-xs uppercase font-semibold text-left first:rounded-tl last:rounded-tr"
         >
+          <>{/** icon */}</>
           <>Date</>
-          <>Type</>
-          <>From</>
+          <>Transaction</>
           <>Amount</>
         </Cells>
       </TableSection>
@@ -32,20 +80,23 @@ export default function Table({
         selectedClass="bg-blue-l4 dark:bg-blue-d4"
       >
         {records
-          .map((row) => (
-            <Cells
-              key={row.date}
-              type="td"
-              cellClass={`p-3 border-t border-gray-l4 max-w-[256px] truncate ${
-                hasMore ? "" : "first:rounded-bl last:rounded-br"
-              }`}
-            >
-              <>{new Date(row.date).toLocaleDateString()}</>
-              <>{row.to}</>
-              <>{row.from}</>
-              <>$ {humanize(row.amount)}</>
-            </Cells>
-          ))
+          .map((row) => {
+            const tx = txs[`${row.from}-${row.to}`];
+            return (
+              <Cells
+                key={row.date}
+                type="td"
+                cellClass={`p-3 border-t border-gray-l4 max-w-[256px] truncate ${
+                  hasMore ? "" : "first:rounded-bl last:rounded-br"
+                }`}
+              >
+                <td className="w-4">{tx.icon}</td>
+                <>{new Date(row.date).toLocaleDateString()}</>
+                <>{tx.description}</>
+                <>$ {humanize(row.amount)}</>
+              </Cells>
+            );
+          })
           .concat(
             hasMore ? (
               <td

src/services/apes/donations.ts

@@ -33,7 +33,12 @@ export const {
       query: () => `v1/tokens/list${IS_TEST ? "/test" : ""}`,
     }),
     balanceTxs: builder.query<BalanceTxsPage, BalanceTxsQueryParams>({
-      query: ({ endowId }) => `endowments/${endowId}/balance-txs`,
+      query: ({ endowId, ...params }) => {
+        return {
+          url: `endowments/${endowId}/balance-txs`,
+          params,
+        };
+      },
     }),
     moveFunds: builder.mutation<
       EndowmentBalances,

src/types/aws/ap/donations.ts

@@ -87,6 +87,7 @@ export interface BalanceTx {
   from: "donation" | "liq" | "lock";
   amount: number;
 }
+
 export interface BalanceTxsPage {
   items: BalanceTx[];
   nextPageKey?: string;