address vercel comments #1

Author: MananTank

apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx

@@ -55,6 +55,10 @@ export function PayAnalytics(props: { apiKey: ApiKey }) {
     getLastNDaysRange("last-120"),
   );
 
+  const numberOfDays = Math.round(
+    (range.to.getTime() - range.from.getTime()) / (1000 * 60 * 60 * 24),
+  );
+
   return (
     <div>
       <div className="flex mb-2">
@@ -69,12 +73,22 @@ export function PayAnalytics(props: { apiKey: ApiKey }) {
               to={range.to}
             />
           </div>
-          <TotalPayVolume clientId={clientId} from={range.from} to={range.to} />
+          <TotalPayVolume
+            clientId={clientId}
+            from={range.from}
+            to={range.to}
+            numberOfDays={numberOfDays}
+          />
         </GridWithSeparator>
 
         <div className="grid gap-4 grid-cols-1 xl:grid-cols-2 ">
           <div className="border border-border rounded-xl p-4 xl:p-6">
-            <Payouts clientId={clientId} from={range.from} to={range.to} />
+            <Payouts
+              clientId={clientId}
+              from={range.from}
+              to={range.to}
+              numberOfDays={numberOfDays}
+            />
           </div>
           <div className="border border-border rounded-xl p-4 xl:p-6 flex ">
             <PaymentsSuccessRate
@@ -91,6 +105,7 @@ export function PayAnalytics(props: { apiKey: ApiKey }) {
               clientId={clientId}
               from={range.from}
               to={range.to}
+              numberOfDays={numberOfDays}
             />
           </div>
           <PayCustomersTable

apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx

@@ -8,7 +8,12 @@ import {
   usePayCustomers,
 } from "../hooks/usePayCustomers";
 import { ExportToCSVButton } from "./ExportToCSVButton";
-import { NoDataAvailable, TableData, TableHeading } from "./common";
+import {
+  NoDataAvailable,
+  TableData,
+  TableHeading,
+  TableHeadingRow,
+} from "./common";
 
 import {
   Select,
@@ -78,7 +83,7 @@ export function PayCustomersTable(props: {
   const customersData = uiData.data?.customers;
 
   return (
-    <div>
+    <div className="flex flex-col">
       {/* header */}
       <div className="flex flex-col lg:flex-row lg:justify-between gap-2 lg:items-center">
         <Select
@@ -109,15 +114,16 @@ export function PayCustomersTable(props: {
         )}
       </div>
 
-      <div className="h-5" />
-
       {!uiData.isError ? (
-        <RenderData
-          data={uiData.data}
-          loadMore={() => {
-            topCustomersQuery.fetchNextPage();
-          }}
-        />
+        <>
+          <div className="h-5" />
+          <RenderData
+            data={uiData.data}
+            loadMore={() => {
+              topCustomersQuery.fetchNextPage();
+            }}
+          />
+        </>
       ) : (
         <NoDataAvailable />
       )}
@@ -130,10 +136,10 @@ function RenderData(props: { data?: UIData; loadMore: () => void }) {
     <ScrollShadow scrollableClassName="h-[250px]" disableTopShadow={true}>
       <table className="w-full">
         <thead>
-          <tr className="border-b border-border sticky top-0 bg-background z-10">
+          <TableHeadingRow>
             <TableHeading> Wallet Address </TableHeading>
             <TableHeading> Total spend </TableHeading>
-          </tr>
+          </TableHeadingRow>
         </thead>
         <tbody>
           {props.data ? (

apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import { useId, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import { SkeletonContainer } from "../../../../@/components/ui/skeleton";
 import { AreaChartLoadingState } from "../../../analytics/area-chart";
@@ -27,8 +27,18 @@ export function PayNewCustomers(props: {
   clientId: string;
   from: Date;
   to: Date;
+  numberOfDays: number;
 }) {
-  const [intervalType, setIntervalType] = useState<"day" | "week">("day");
+  const [intervalType, setIntervalType] = useState<"day" | "week">(
+    props.numberOfDays > 30 ? "week" : "day",
+  );
+
+  // if prop changes, update intervalType
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setIntervalType(props.numberOfDays > 30 ? "week" : "day");
+  }, [props.numberOfDays]);
+
   const newCustomersQuery = usePayNewCustomers({
     clientId: props.clientId,
     from: props.from,
@@ -82,12 +92,12 @@ export function PayNewCustomers(props: {
       <div className="flex justify-between gap-2 items-center mb-1">
         <CardHeading>New Customers </CardHeading>
 
-        {uiData.data && (
+        <div className={!uiData.data ? "invisible" : ""}>
           <IntervalSelector
             intervalType={intervalType}
             setIntervalType={setIntervalType}
           />
-        )}
+        </div>
       </div>
 
       {/* Chart */}

apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx

@@ -16,6 +16,7 @@ import {
   NoDataAvailable,
   TableData,
   TableHeading,
+  TableHeadingRow,
 } from "./common";
 
 type UIData = {
@@ -102,19 +103,19 @@ function RenderData(props: {
 }) {
   return (
     <ScrollShadow
-      scrollableClassName="max-h-[350px] lg:max-h-[700px]"
+      scrollableClassName="max-h-[350px] lg:max-h-[700px] rounded-lg"
       disableTopShadow={true}
     >
       <table className="w-full selection:bg-muted">
         <thead>
-          <tr className="border-b border-border sticky top-0 bg-background z-10">
+          <TableHeadingRow>
             <TableHeading> Bought </TableHeading>
             <TableHeading> Paid </TableHeading>
             <TableHeading>Type</TableHeading>
             <TableHeading>Status</TableHeading>
             <TableHeading>Recipient</TableHeading>
             <TableHeading>Date</TableHeading>
-          </tr>
+          </TableHeadingRow>
         </thead>
         <tbody>
           {props.data ? (

apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import { SkeletonContainer } from "../../../../@/components/ui/skeleton";
 import { AreaChartLoadingState } from "../../../analytics/area-chart";
@@ -24,8 +24,22 @@ type UIQueryData = {
   percentChange: number;
 };
 
-export function Payouts(props: { clientId: string; from: Date; to: Date }) {
-  const [intervalType, setIntervalType] = useState<"day" | "week">("day");
+export function Payouts(props: {
+  clientId: string;
+  from: Date;
+  to: Date;
+  numberOfDays: number;
+}) {
+  const [intervalType, setIntervalType] = useState<"day" | "week">(
+    props.numberOfDays > 30 ? "week" : "day",
+  );
+
+  // if prop changes, update intervalType
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setIntervalType(props.numberOfDays > 30 ? "week" : "day");
+  }, [props.numberOfDays]);
+
   const payoutsQuery = usePayVolume({
     clientId: props.clientId,
     from: props.from,

apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx

@@ -6,7 +6,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { format } from "date-fns";
-import { useId, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import { AreaChartLoadingState } from "../../../analytics/area-chart";
 import { type PayVolumeData, usePayVolume } from "../hooks/usePayVolume";
@@ -26,8 +26,23 @@ export function TotalPayVolume(props: {
   clientId: string;
   from: Date;
   to: Date;
+  numberOfDays: number;
 }) {
-  const [intervalType, setIntervalType] = useState<"day" | "week">("day");
+  const [intervalType, setIntervalType] = useState<"day" | "week">(
+    props.numberOfDays > 30 ? "week" : "day",
+  );
+
+  // if prop changes, update intervalType
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setIntervalType(props.numberOfDays > 30 ? "week" : "day");
+  }, [props.numberOfDays]);
+
+  // if prop changes, update intervalType
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setIntervalType(props.numberOfDays > 30 ? "week" : "day");
+  }, [props.numberOfDays]);
 
   const volumeQuery = usePayVolume({
     clientId: props.clientId,

apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx

@@ -12,7 +12,7 @@ import {
 
 export function NoDataAvailable() {
   return (
-    <div className="h-[250px] flex items-center justify-center">
+    <div className="min-h-[250px] flex items-center justify-center flex-1">
       <div className="flex items-center gap-2">
         <OctagonXIcon className="size-5 text-destructive-foreground" />
         <p className="text-muted-foreground">No data available</p>
@@ -53,12 +53,21 @@ export function ChangeBadge(props: { percent: number }) {
 }
 
 export function TableData({ children }: { children: React.ReactNode }) {
-  return <td className="px-0 py-2 text-sm">{children}</td>;
+  return <td className="px-3 py-2 text-sm">{children}</td>;
+}
+
+export function TableHeadingRow({ children }: { children: React.ReactNode }) {
+  return (
+    <tr className="sticky top-0 bg-background z-10">
+      {children}
+      <div className="border-b border-border absolute inset-0 z-10" />
+    </tr>
+  );
 }
 
 export function TableHeading(props: { children: React.ReactNode }) {
   return (
-    <th className="text-left px-0 py-3 text-sm font-medium text-muted-foreground min-w-[150px]">
+    <th className="bg-secondary border-b border-border text-left px-3 py-3 text-sm font-medium text-muted-foreground min-w-[150px]">
       {props.children}
     </th>
   );