From e9af120c7b00e29b6930d9b17e22e2b4949f85be Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 26 Jul 2025 00:17:22 +0500
Subject: [PATCH] =?UTF-8?q?feat(wallet):=20update=20transaction=20type=20f?=
 =?UTF-8?q?rom=20CREDIT=20to=20TOPUP=20and=20display=20total=20debit/credi?=
 =?UTF-8?q?t=20amounts=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/wallet-transactions-table.tsx | 52 ++++++++++++++++++------
 lib/backend-types.ts                     |  2 +-
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/components/wallet-transactions-table.tsx b/components/wallet-transactions-table.tsx
index 4cf6314..d419fb9 100644
--- a/components/wallet-transactions-table.tsx
+++ b/components/wallet-transactions-table.tsx
@@ -11,7 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { WalletTransaction } from "@/lib/backend-types";
+import type { WalletTransaction } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { getWaleltTransactions } from "@/queries/wallet";
 import { tryCatch } from "@/utils/tryCatch";
@@ -51,6 +51,16 @@ export async function WalletTransactionsTable({
     }
   }
   const { data, meta } = transactions;
+  const totalDebit = data.reduce(
+    (acc, trx) =>
+      acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
+    0,
+  );
+  const totalCredit = data.reduce(
+    (acc, trx) =>
+      acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
+    0,
+  );
   return (
     <div>
       {data?.length === 0 ? (
@@ -58,8 +68,23 @@ export async function WalletTransactionsTable({
           <h3>No transactions yet.</h3>
         </div>
       ) : (
-        <>
+        <div>
+          <div className="flex gap-4 mb-4 w-full">
+            <div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-gray-500 p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold">
+                Total Debit
+              </h5>
+              <p>{totalDebit.toFixed(2)} MVR</p>
+            </div>
+            <div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-white p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold">
+                Total Credit
+              </h5>
+              <p>{totalCredit.toFixed(2)} MVR</p>
+            </div>
+          </div>
           <div className="hidden sm:block">
+
             <Table className="overflow-scroll">
               <TableCaption>Table of all transactions.</TableCaption>
               <TableHeader>
@@ -76,7 +101,7 @@ export async function WalletTransactionsTable({
                   <TableRow
                     className={cn(
                       "items-start border rounded p-2",
-                      trx?.transaction_type === "CREDIT"
+                      trx?.transaction_type === "TOPUP"
                         ? "credit-bg"
                         : "debit-bg",
                     )}
@@ -91,7 +116,7 @@ export async function WalletTransactionsTable({
 
                     <TableCell>
                       <span className="font-semibold pr-2">
-                        {trx.transaction_type === "CREDIT" ? (
+                        {trx.transaction_type === "TOPUP" ? (
                           <Badge className="bg-green-100 dark:bg-green-700">
                             {trx.transaction_type}
                           </Badge>
@@ -119,8 +144,8 @@ export async function WalletTransactionsTable({
                         <Link
                           className="font-medium "
                           href={
-                            trx.transaction_type === "CREDIT"
-                              ? `/top-up/${trx.reference_id}`
+                            trx.transaction_type === "TOPUP"
+                              ? `/top-ups/${trx.reference_id}`
                               : `/payments/${trx.reference_id}`
                           }
                         >
@@ -157,9 +182,10 @@ export async function WalletTransactionsTable({
             totalPages={meta?.last_page}
             currentPage={meta?.current_page}
           />
-        </>
-      )}
-    </div>
+        </div>
+      )
+      }
+    </div >
   );
 }
 
@@ -168,7 +194,7 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
     <div
       className={cn(
         "flex flex-col items-start border rounded p-2 my-2",
-        trx?.transaction_type === "CREDIT" ? "credit-bg" : "debit-bg",
+        trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
       )}
     >
       <div className="bg-white shadow dark:bg-black p-2 rounded w-full">
@@ -195,7 +221,7 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
           </span>
         </div>
         <span className="font-semibold pr-2">
-          {trx.transaction_type === "CREDIT" ? (
+          {trx.transaction_type === "TOPUP" ? (
             <Badge className="bg-green-100 dark:bg-green-700">
               {trx.transaction_type}
             </Badge>
@@ -210,8 +236,8 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
         <Link
           className="font-medium hover:underline"
           href={
-            trx.transaction_type === "CREDIT"
-              ? `/top-up/${trx.reference_id}`
+            trx.transaction_type === "TOPUP"
+              ? `/top-ups/${trx.reference_id}`
               : `/payments/${trx.reference_id}`
           }
         >
diff --git a/lib/backend-types.ts b/lib/backend-types.ts
index 3f74075..943ddf3 100644
--- a/lib/backend-types.ts
+++ b/lib/backend-types.ts
@@ -105,7 +105,7 @@ export interface WalletTransaction {
 		name: string;
 	};
 	amount: number;
-	transaction_type: "DEBIT" | "CREDIT";
+	transaction_type: "DEBIT" | "TOPUP";
 	description: string;
 	reference_id: string;
 	created_at: string;