fix: empty states

Author: gregfromstl

apps/dashboard/src/@/api/universal-bridge/developer.ts

@@ -230,6 +230,5 @@ export async function getPayments(props: {
   }
 
   const json = await res.json();
-  console.log("json", json);
   return json as PaymentsResponse;
 }

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

@@ -21,7 +21,7 @@ export function PaymentsSuccessRate(props: {
 }) {
   const [type, setType] = useState<PayVolumeType>("all");
   const isEmpty = useMemo(() => {
-    return props.data.length === 0;
+    return props.data.length === 0 || props.data.every((x) => x.count === 0);
   }, [props.data]);
   const graphData = useMemo(() => {
     let succeeded = 0;
@@ -77,9 +77,9 @@ export function PaymentsSuccessRate(props: {
         </Select>
       </div>
 
-      <div className="flex flex-1 flex-col justify-center">
+      <div className="relative flex flex-1 flex-col justify-center">
         <div className="h-10" />
-        {isEmpty ? (
+        {isEmpty || graphData.total === 0 ? (
           <EmptyBar />
         ) : (
           <SkeletonContainer

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

@@ -73,9 +73,11 @@ export function Payouts(props: {
         <div className="mb-5 flex items-center gap-3">
           <SkeletonContainer
             loadedData={
-              props.data && props.data.length > 0
-                ? toUSD(totalPayoutsUSD)
-                : undefined
+              !props.data
+                ? undefined
+                : props.data.length > 0
+                  ? toUSD(totalPayoutsUSD)
+                  : "NA"
             }
             skeletonData="$20"
             render={(value) => {
@@ -101,7 +103,7 @@ export function Payouts(props: {
 
         <div className="relative flex w-full justify-center">
           <ResponsiveContainer width="100%" height={chartHeight}>
-            <BarChart data={graphData || emptyGraphData}>
+            <BarChart data={isEmpty ? emptyGraphData : graphData}>
               <Tooltip
                 content={(x) => {
                   const payload = x.payload?.[0]?.payload as

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

@@ -9,7 +9,7 @@ import {
 import { useId, useMemo, useState } from "react";
 import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
 import type { UniversalBridgeStats } from "types/analytics";
-import { CardHeading, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
 
 type GraphData = {
   date: string;
@@ -127,7 +127,7 @@ export function TotalPayVolume(props: {
 
       <div className="relative flex w-full flex-1 justify-center">
         <ResponsiveContainer width="100%" height={chartHeight}>
-          <AreaChart data={graphData || emptyGraphData}>
+          <AreaChart data={isEmpty ? emptyGraphData : graphData}>
             <defs>
               <linearGradient id={uniqueId} x1="0" y1="0" x2="0" y2="1">
                 <stop offset="5%" stopColor={chartColor} stopOpacity={0.4} />
@@ -177,6 +177,7 @@ export function TotalPayVolume(props: {
             )}
           </AreaChart>
         </ResponsiveContainer>
+        {isEmpty && <NoDataOverlay />}
       </div>
     </div>
   );

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

@@ -17,7 +17,7 @@ export function TotalVolumePieChart(props: {
 }) {
   const data = props.data;
   const isEmpty =
-    !data || data.length === 0 || data.every((x) => x.amountUsdCents === 0);
+    data.length === 0 || data.every((x) => x.amountUsdCents === 0);
   const skeletonData: VolData[] = [
     {
       name: "Crypto",
@@ -87,9 +87,11 @@ export function TotalVolumePieChart(props: {
 
               <SkeletonContainer
                 loadedData={
-                  data && data.length > 0
-                    ? toUSD(cryptoTotalUSD + fiatTotalUSD)
-                    : undefined
+                  !data
+                    ? undefined
+                    : data.length > 0
+                      ? toUSD(cryptoTotalUSD + fiatTotalUSD)
+                      : "NA"
                 }
                 skeletonData="$100"
                 render={(totalAmount) => {
@@ -117,9 +119,7 @@ export function TotalVolumePieChart(props: {
                 color={v.color}
                 label={v.name}
                 amount={
-                  data && data.length > 0
-                    ? toUSD(isEmpty ? 0 : v.amount)
-                    : undefined
+                  !data ? undefined : data.length > 0 ? toUSD(v.amount) : "NA"
                 }
               />
             ))}

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

@@ -2,8 +2,6 @@ import { Badge } from "@/components/ui/badge";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
 
-import {} from "@/components/ui/select";
-
 export function NoDataOverlay() {
   return (
     <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-card/50 text-muted-foreground text-sm backdrop-blur-sm">