[TOOL-3056]: Add Engine transactions bar chart, Make shadcn table header sticky

Author: MananTank

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -23,6 +23,7 @@ import {
   EmptyChartState,
   LoadingChartState,
 } from "../../../../components/analytics/empty-chart-state";
+import { cn } from "../../../lib/utils";
 
 type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   // metadata
@@ -36,6 +37,9 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   // chart className
   chartClassName?: string;
   isPending: boolean;
+  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  hideLabel?: boolean;
+  titleClassName?: string;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -45,10 +49,13 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
   // if there are more than 4 keys then we should stack them by default
   const variant =
     props.variant || configKeys.length > 4 ? "stacked" : "grouped";
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="mb-2">{props.title}</CardTitle>
+        <CardTitle className={cn("mb-2", props.titleClassName)}>
+          {props.title}
+        </CardTitle>
         {props.description && (
           <CardDescription>{props.description}</CardDescription>
         )}
@@ -69,7 +76,16 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                 tickMargin={10}
                 tickFormatter={(value) => formatDate(new Date(value), "MMM d")}
               />
-              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    hideLabel={
+                      props.hideLabel !== undefined ? props.hideLabel : true
+                    }
+                    labelFormatter={props.toolTipLabelFormatter}
+                  />
+                }
+              />
               {props.showLegend && (
                 <ChartLegend content={<ChartLegendContent />} />
               )}

apps/dashboard/src/@/components/ui/table.tsx

@@ -25,7 +25,8 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "border-border border-b bg-background [&_tr]:border-b",
+      "border-border border-b bg-background",
+      "sticky top-0 z-20 border-none before:absolute before:inset-0 before:border-border before:border-b",
       className,
     )}
     {...props}
@@ -125,10 +126,20 @@ const TableCaption = React.forwardRef<
 ));
 TableCaption.displayName = "TableCaption";
 
-function TableContainer(props: { children: React.ReactNode }) {
+function TableContainer(props: {
+  children: React.ReactNode;
+  className?: string;
+  scrollableContainerClassName?: string;
+}) {
   return (
     <ScrollShadow
-      className="relative whitespace-nowrap rounded-lg border border-border bg-card"
+      shadowClassName="z-30"
+      disableTopShadow
+      className={cn(
+        "relative whitespace-nowrap rounded-lg border border-border bg-card",
+        props.className,
+      )}
+      scrollableClassName={props.scrollableContainerClassName}
       shadowColor="hsl(var(--muted))"
     >
       {props.children}

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx

@@ -181,6 +181,7 @@ export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
         columns={columns as ColumnDef<BackendWallet, string>[]}
         isPending={isPending}
         isFetched={isFetched}
+        tableScrollableClassName="max-h-[1000px]"
         onMenuClick={[
           {
             icon: <PencilIcon className="size-4" />,

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx

@@ -149,8 +149,7 @@ function TransactionsSection(props: {
             Transactions
           </h2>
           <p className="text-muted-foreground">
-            View transactions sent from your backend wallets in the past 24
-            hours.
+            View transactions sent from your backend wallets
           </p>
         </div>
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx

@@ -1,3 +1,4 @@
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
@@ -20,10 +21,10 @@ import {
 import { createColumnHelper } from "@tanstack/react-table";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { formatDistanceToNowStrict } from "date-fns";
-import { format } from "date-fns/format";
+import { format, formatDate } from "date-fns/format";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { InfoIcon, MoveLeftIcon, MoveRightIcon } from "lucide-react";
-import { type Dispatch, type SetStateAction, useState } from "react";
+import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { toTokens } from "thirdweb";
 import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
 import { TWTable } from "../../../../../../../../../../components/shared/TWTable";
@@ -256,14 +257,63 @@ export const TransactionsTable: React.FC<TransactionsTableProps> = ({
     ? transactions.indexOf(selectedTransaction)
     : 0;
 
+  const transactionAnalytics = useMemo(() => {
+    const dayToTxCountMap: Map<number, number> = new Map();
+
+    for (const tx of transactions) {
+      if (!tx.queuedAt) {
+        continue;
+      }
+      const normalizedDate = new Date(tx.queuedAt);
+      normalizedDate.setHours(0, 0, 0, 0); // normalize time
+      const time = normalizedDate.getTime();
+      const count = dayToTxCountMap.get(time) ?? 0;
+      dayToTxCountMap.set(time, count + 1);
+    }
+
+    return Array.from(dayToTxCountMap.entries())
+      .map(([day, count]) => ({
+        time: new Date(day).getTime(),
+        count,
+      }))
+      .sort((a, b) => a.time - b.time);
+  }, [transactions]);
+
   return (
     <>
+      <ThirdwebBarChart
+        title="Daily Transactions"
+        description="The number of transactions that have been sent from your backend wallets in the past 24 hours."
+        config={{
+          count: {
+            label: "Transactions",
+            color: "hsl(var(--chart-1))",
+          },
+        }}
+        data={transactionAnalytics}
+        isPending={isPending}
+        chartClassName="aspect[2] lg:aspect-[4.5]"
+        titleClassName="text-xl mb-0"
+        hideLabel={false}
+        toolTipLabelFormatter={(_v, item) => {
+          if (Array.isArray(item)) {
+            const time = item[0].payload.time as number;
+            return formatDate(new Date(time), "MMM d, yyyy");
+          }
+          return undefined;
+        }}
+      />
+
+      <div className="h-8" />
+
       <TWTable
         title="transactions"
         data={transactions}
         columns={columns}
         isPending={isPending}
         isFetched={isFetched}
+        bodyRowClassName="hover:bg-accent/50"
+        tableScrollableClassName="max-h-[1000px]"
         onRowClick={(row) => {
           setSelectedTransaction(row);
           transactionDisclosure.onOpen();

apps/dashboard/src/components/shared/TWTable.tsx

@@ -56,6 +56,8 @@ type TWTableProps<TRowData> = {
   title: string;
   bodyRowClassName?: string;
   bodyRowLinkBox?: boolean;
+  tableContainerClassName?: string;
+  tableScrollableClassName?: string;
 };
 
 export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
@@ -124,7 +126,10 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
   });
 
   return (
-    <TableContainer>
+    <TableContainer
+      className={tableProps.tableContainerClassName}
+      scrollableContainerClassName={tableProps.tableScrollableClassName}
+    >
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (