Fix: Trend badge formatting (#7007)

Author: gregfromstl

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

@@ -49,10 +49,13 @@ export function PayNewCustomers(props: {
     }
     const lastPeriod = newUsersData[newUsersData.length - 2];
     const currentPeriod = newUsersData[newUsersData.length - 1];
+    // Calculate the percent change from last period to current period
     const trend =
       lastPeriod && currentPeriod && lastPeriod.value > 0
         ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : 0;
+        : lastPeriod?.value === 0
+          ? 100
+          : 0;
     return { graphData: newUsersData, trend };
   }, [props.data, props.dateFormat]);
   const isEmpty = useMemo(

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

@@ -54,7 +54,9 @@ export function Payouts(props: {
     const trend =
       lastPeriod && currentPeriod && lastPeriod.value > 0
         ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
-        : 0;
+        : lastPeriod?.value === 0
+          ? 100
+          : 0;
     return {
       graphData: cleanedData,
       totalPayoutsUSD: totalPayouts / 100,

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

@@ -34,7 +34,13 @@ export function ChangeBadge(props: { percent: number }) {
           ) : (
             <ArrowDownIcon className="size-4" />
           )}
-          {percentValue}
+
+          {new Intl.NumberFormat("en-US", {
+            style: "percent",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+            signDisplay: "never",
+          }).format(props.percent)}
         </Badge>
       </div>
     </ToolTipLabel>