fix: make the dashboard show total by currency (#115)

bassgeta · MantisClone · web-flow · commit 3b41f409af77 · 2025-08-11T20:08:31.000-04:00
Co-authored-by: MantisClone &lt;david.huntmateo@request.network&gt;
diff --git a/src/app/api/webhook/route.ts b/src/app/api/webhook/route.ts
@@ -1,7 +1,7 @@
 import crypto from "node:crypto";
 import { ResourceNotFoundError } from "@/lib/errors";
-import { getInvoiceCount } from "@/lib/invoice";
-import { generateInvoiceNumber } from "@/lib/invoice/client";
+import { generateInvoiceNumber } from "@/lib/helpers/client";
+import { getInvoiceCount } from "@/lib/helpers/invoice";
 import { db } from "@/server/db";
 import {
   paymentDetailsPayersTable,
diff --git a/src/app/i/[id]/page.tsx b/src/app/i/[id]/page.tsx
@@ -2,7 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { InvoiceCreator } from "@/components/invoice-creator";
-import { getInvoiceCount } from "@/lib/invoice";
+import { getInvoiceCount } from "@/lib/helpers/invoice";
 import { api } from "@/trpc/server";
 import { ArrowLeft } from "lucide-react";
 import type { Metadata } from "next";
diff --git a/src/app/invoices/create/page.tsx b/src/app/invoices/create/page.tsx
@@ -2,7 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { InvoiceCreator } from "@/components/invoice-creator";
-import { getInvoiceCount } from "@/lib/invoice";
+import { getInvoiceCount } from "@/lib/helpers/invoice";
 import { getCurrentSession } from "@/server/auth";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
@@ -55,7 +55,7 @@ import {
   formatCurrencyLabel,
   getPaymentCurrenciesForPayout,
 } from "@/lib/constants/currencies";
-import { handleBatchPayment } from "@/lib/invoice/batch-payment";
+import { handleBatchPayment } from "@/lib/helpers/batch-payment";
 import { payoutSchema } from "@/lib/schemas/payment";
 import { api } from "@/trpc/react";
 import { z } from "zod";
diff --git a/src/components/dashboard/invoices-received.tsx b/src/components/dashboard/invoices-received.tsx
@@ -11,7 +11,11 @@ import {
   TableRow,
 } from "@/components/ui/table/table";
 import { ID_TO_APPKIT_NETWORK, NETWORK_TO_ID } from "@/lib/constants/chains";
-import { handleBatchPayment } from "@/lib/invoice/batch-payment";
+import { handleBatchPayment } from "@/lib/helpers/batch-payment";
+import {
+  calculateTotalsByCurrency,
+  formatCurrencyTotals,
+} from "@/lib/helpers/currency";
 import type { Request } from "@/server/db/schema";
 import { api } from "@/trpc/react";
 import {
@@ -24,6 +28,7 @@ import { ethers } from "ethers";
 import { AlertCircle, DollarSign, FileText } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
+import { MultiCurrencyStatCard } from "../multi-currency-stat-card";
 import { StatCard } from "../stat-card";
 import { EmptyState } from "../ui/table/empty-state";
 import { Pagination } from "../ui/table/pagination";
@@ -77,8 +82,14 @@ export const InvoicesReceived = ({
     refetchInterval: RETRIEVE_ALL_INVOICES_POLLING_INTERVAL,
   });
 
-  const total =
-    invoices?.reduce((acc, inv) => acc + Number(inv.amount), 0) || 0;
+  const invoiceItems =
+    invoices?.map((invoice) => ({
+      amount: invoice.amount,
+      currency: invoice.paymentCurrency,
+    })) || [];
+
+  const totalsByCurrency = calculateTotalsByCurrency(invoiceItems);
+  const totalValues = formatCurrencyTotals(totalsByCurrency);
   const outstanding =
     invoices?.filter((inv) => inv.status !== "paid").length || 0;
 
@@ -223,10 +234,10 @@ export const InvoicesReceived = ({
           value={outstanding}
           icon={<AlertCircle className="h-4 w-4 text-zinc-600" />}
         />
-        <StatCard
+        <MultiCurrencyStatCard
           title="Total Due"
-          value={`$${total.toLocaleString()}`}
           icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          values={totalValues}
         />
       </div>
 
diff --git a/src/components/dashboard/invoices-sent.tsx b/src/components/dashboard/invoices-sent.tsx
@@ -9,11 +9,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table/table";
+import {
+  calculateTotalsByCurrency,
+  formatCurrencyTotals,
+} from "@/lib/helpers/currency";
 import type { Request } from "@/server/db/schema";
 import { api } from "@/trpc/react";
 import { AlertCircle, DollarSign, FileText, Plus } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { MultiCurrencyStatCard } from "../multi-currency-stat-card";
 import { StatCard } from "../stat-card";
 import { EmptyState } from "../ui/table/empty-state";
 import { Pagination } from "../ui/table/pagination";
@@ -49,8 +54,15 @@ export const InvoicesSent = ({ initialSentInvoices }: InvoicesSentProps) => {
     refetchInterval: RETRIEVE_ALL_INVOICES_POLLING_INTERVAL,
   });
 
-  const total =
-    invoices?.reduce((acc, inv) => acc + Number(inv.amount), 0) || 0;
+  const invoiceItems =
+    invoices?.map((invoice) => ({
+      amount: invoice.amount,
+      currency: invoice.paymentCurrency,
+    })) || [];
+
+  const totalsByCurrency = calculateTotalsByCurrency(invoiceItems);
+  const totalValues = formatCurrencyTotals(totalsByCurrency);
+
   const outstanding =
     invoices?.filter((inv) => inv.status !== "paid").length || 0;
 
@@ -67,10 +79,10 @@ export const InvoicesSent = ({ initialSentInvoices }: InvoicesSentProps) => {
           value={outstanding}
           icon={<AlertCircle className="h-4 w-4 text-zinc-600" />}
         />
-        <StatCard
+        <MultiCurrencyStatCard
           title="Total Payments"
-          value={`$${total.toLocaleString()}`}
           icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          values={totalValues}
         />
       </div>
 
diff --git a/src/components/dashboard/subscriptions.tsx b/src/components/dashboard/subscriptions.tsx
@@ -22,12 +22,15 @@ import {
 import { CompletedPayments } from "@/components/view-recurring-payments/blocks/completed-payments";
 import { FrequencyBadge } from "@/components/view-recurring-payments/blocks/frequency-badge";
 import { formatCurrencyLabel } from "@/lib/constants/currencies";
+import {
+  calculateTotalsByCurrency,
+  formatCurrencyTotals,
+} from "@/lib/helpers/currency";
 import { useCancelRecurringPayment } from "@/lib/hooks/use-cancel-recurring-payment";
 import type { SubscriptionWithDetails } from "@/lib/types";
 import { getCanCancelPayment } from "@/lib/utils";
 import { api } from "@/trpc/react";
 import { addDays, format } from "date-fns";
-import { BigNumber, utils } from "ethers";
 import { Ban, CreditCard, DollarSign, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { MultiCurrencyStatCard } from "../multi-currency-stat-card";
@@ -206,64 +209,27 @@ export const Subscriptions = ({ initialSubscriptions }: SubscriptionProps) => {
       initialData: initialSubscriptions,
     });
 
-  const commitmentsByCurrency =
-    subscriptions?.reduce(
-      (acc, sub) => {
-        if (ACTIVE_STATUSES.includes(sub.status) && sub.paymentCurrency) {
-          const currency = sub.paymentCurrency;
-          try {
-            const nextPaymentAmount = utils.parseUnits(sub.totalAmount, 18);
-            if (!acc[currency]) {
-              acc[currency] = BigNumber.from("0");
-            }
-            acc[currency] = acc[currency].add(nextPaymentAmount);
-          } catch (error) {
-            console.error("Error calculating commitment amount:", error);
-          }
-        }
-        return acc;
-      },
-      {} as Record<string, BigNumber>,
-    ) || {};
-
-  const totalSpentByCurrency =
-    subscriptions?.reduce(
-      (acc, sub) => {
-        if (sub.payments && sub.payments.length > 0 && sub.paymentCurrency) {
-          const currency = sub.paymentCurrency;
-          try {
-            const paymentAmount = utils.parseUnits(sub.totalAmount, 18);
-            const completedPayments = BigNumber.from(
-              sub.payments.length.toString(),
-            );
-            const totalSpent = paymentAmount.mul(completedPayments);
+  const commitmentItems =
+    subscriptions
+      ?.filter((sub) => ACTIVE_STATUSES.includes(sub.status))
+      .map((sub) => ({
+        amount: sub.totalAmount,
+        currency: sub.paymentCurrency,
+      })) || [];
 
-            if (!acc[currency]) {
-              acc[currency] = BigNumber.from("0");
-            }
-            acc[currency] = acc[currency].add(totalSpent);
-          } catch (error) {
-            console.error("Error calculating total spent:", error);
-          }
-        }
-        return acc;
-      },
-      {} as Record<string, BigNumber>,
-    ) || {};
+  const spentItems =
+    subscriptions
+      ?.filter((sub) => (sub?.payments ? sub.payments.length > 0 : false))
+      .flatMap((sub) => ({
+        amount: sub.totalAmount,
+        currency: sub.paymentCurrency,
+      })) || [];
 
-  const commitmentValues = Object.entries(commitmentsByCurrency).map(
-    ([currency, amount]) => ({
-      amount: utils.formatUnits(amount, 18),
-      currency,
-    }),
-  );
+  const commitmentTotals = calculateTotalsByCurrency(commitmentItems);
+  const spentTotals = calculateTotalsByCurrency(spentItems);
 
-  const spentValues = Object.entries(totalSpentByCurrency).map(
-    ([currency, amount]) => ({
-      amount: utils.formatUnits(amount, 18),
-      currency,
-    }),
-  );
+  const commitmentValues = formatCurrencyTotals(commitmentTotals);
+  const spentValues = formatCurrencyTotals(spentTotals);
 
   return (
     <div className="space-y-6">
diff --git a/src/components/invoice-creator.tsx b/src/components/invoice-creator.tsx
@@ -3,7 +3,7 @@
 import { InvoiceForm } from "@/components/invoice-form";
 import { InvoicePreview } from "@/components/invoice-preview";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { generateInvoiceNumber } from "@/lib/invoice/client";
+import { generateInvoiceNumber } from "@/lib/helpers/client";
 import {
   type InvoiceFormValues,
   invoiceFormSchema,
diff --git a/src/components/subscription-plans/blocks/payments-table.tsx b/src/components/subscription-plans/blocks/payments-table.tsx
@@ -19,11 +19,15 @@ import {
   TableRow,
 } from "@/components/ui/table/table";
 import { formatCurrencyLabel } from "@/lib/constants/currencies";
+import {
+  calculateTotalsByCurrency,
+  formatCurrencyTotals,
+} from "@/lib/helpers/currency";
 import type { SubscriptionPayment } from "@/lib/types";
 import type { SubscriptionPlan } from "@/server/db/schema";
 import { api } from "@/trpc/react";
 import { format } from "date-fns";
-import { BigNumber, utils } from "ethers";
+import { utils } from "ethers";
 import {
   CreditCard,
   DollarSign,
@@ -148,29 +152,13 @@ export function PaymentsTable({
     ? payments.filter((payment) => payment.planId === activePlan)
     : payments;
 
-  const revenuesByCurrency = filteredPayments.reduce(
-    (acc, payment) => {
-      const currency = payment.currency;
-      try {
-        const amount = utils.parseUnits(payment.amount || "0", 18);
-        if (!acc[currency]) {
-          acc[currency] = BigNumber.from("0");
-        }
-        acc[currency] = acc[currency].add(amount);
-      } catch (error) {
-        console.error("Error calculating payment revenue:", error);
-      }
-      return acc;
-    },
-    {} as Record<string, BigNumber>,
-  );
+  const paymentItems = filteredPayments.map((payment) => ({
+    amount: payment.amount,
+    currency: payment.currency,
+  }));
 
-  const revenueValues = Object.entries(revenuesByCurrency).map(
-    ([currency, amount]) => ({
-      amount: utils.formatUnits(amount, 18),
-      currency,
-    }),
-  );
+  const revenueTotal = calculateTotalsByCurrency(paymentItems);
+  const revenueValues = formatCurrencyTotals(revenueTotal);
 
   const paginatedPayments = filteredPayments.slice(
     (page - 1) * ITEMS_PER_PAGE,
diff --git a/src/components/subscription-plans/blocks/subscribers-table.tsx b/src/components/subscription-plans/blocks/subscribers-table.tsx
@@ -21,11 +21,15 @@ import {
 import { CompletedPayments } from "@/components/view-recurring-payments/blocks/completed-payments";
 import { FrequencyBadge } from "@/components/view-recurring-payments/blocks/frequency-badge";
 import { formatCurrencyLabel } from "@/lib/constants/currencies";
+import {
+  calculateTotalsByCurrency,
+  formatCurrencyTotals,
+} from "@/lib/helpers/currency";
 import type { SubscriptionWithDetails } from "@/lib/types";
 import type { SubscriptionPlan } from "@/server/db/schema";
 import { api } from "@/trpc/react";
 import { addDays, format } from "date-fns";
-import { BigNumber, utils } from "ethers";
+import { utils } from "ethers";
 import { CreditCard, DollarSign, Filter } from "lucide-react";
 import { useState } from "react";
 import { StatCard } from "../../stat-card";
@@ -178,38 +182,17 @@ export function SubscribersTable({
     ACTIVE_STATUSES.includes(sub.status),
   ).length;
 
-  const revenuesByCurrency = filteredSubscribers.reduce(
-    (acc, sub) => {
-      if (
-        ACTIVE_STATUSES.includes(sub.status) &&
-        sub.payments &&
-        sub.paymentCurrency
-      ) {
-        const currency = sub.paymentCurrency;
-        try {
-          const totalAmount = utils.parseUnits(sub.totalAmount || "0", 18);
-          const paymentsCount = BigNumber.from(sub.payments.length.toString());
-          const revenue = totalAmount.mul(paymentsCount);
-
-          if (!acc[currency]) {
-            acc[currency] = BigNumber.from("0");
-          }
-          acc[currency] = acc[currency].add(revenue);
-        } catch (error) {
-          console.error("Error calculating revenue:", error);
-        }
-      }
-      return acc;
-    },
-    {} as Record<string, BigNumber>,
-  );
+  const revenueItems = filteredSubscribers
+    .filter(
+      (sub) => ACTIVE_STATUSES.includes(sub.status) && sub.payments?.length,
+    )
+    .flatMap((sub) => ({
+      amount: sub.totalAmount,
+      currency: sub.paymentCurrency,
+    }));
 
-  const revenueValues = Object.entries(revenuesByCurrency)
-    .map(([currency, amount]) => ({
-      amount: utils.formatUnits(amount, 18),
-      currency,
-    }))
-    .filter((value) => utils.parseUnits(value.amount, 18).gt(0));
+  const revenueTotal = calculateTotalsByCurrency(revenueItems);
+  const revenueValues = formatCurrencyTotals(revenueTotal);
 
   return (
     <div className="space-y-6">
diff --git a/src/lib/helpers/batch-payment.ts b/src/lib/helpers/batch-payment.ts
diff --git a/src/lib/helpers/client.ts b/src/lib/helpers/client.ts
diff --git a/src/lib/helpers/currency.ts b/src/lib/helpers/currency.ts
diff --git a/src/lib/helpers/invoice.ts b/src/lib/helpers/invoice.ts
