sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-08-04 03:27:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(wallet): update transaction type from CREDIT to TOPUP and display total debit/credit amounts ✨
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m27s
Details

Browse Source
This commit is contained in:
i701
2025-07-26 00:17:22 +05:00
parent e0b76bb865
commit e9af120c7b
2 changed files with 40 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/wallet-transactions-table.tsx
View File

@ -11,7 +11,7 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import { WalletTransaction } from "@/lib/backend-types"; import type { WalletTransaction } from "@/lib/backend-types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { getWaleltTransactions } from "@/queries/wallet"; import { getWaleltTransactions } from "@/queries/wallet";
import { tryCatch } from "@/utils/tryCatch"; import { tryCatch } from "@/utils/tryCatch";
@ -51,6 +51,16 @@ export async function WalletTransactionsTable({
} }
} }
const { data, meta } = transactions; 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 ( return (
<div> <div>
{data?.length === 0 ? ( {data?.length === 0 ? (
@ -58,8 +68,23 @@ export async function WalletTransactionsTable({
<h3>No transactions yet.</h3> <h3>No transactions yet.</h3>
</div> </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"> <div className="hidden sm:block">
<Table className="overflow-scroll"> <Table className="overflow-scroll">
<TableCaption>Table of all transactions.</TableCaption> <TableCaption>Table of all transactions.</TableCaption>
<TableHeader> <TableHeader>
@ -76,7 +101,7 @@ export async function WalletTransactionsTable({
<TableRow <TableRow
className={cn( className={cn(
"items-start border rounded p-2", "items-start border rounded p-2",
trx?.transaction_type === "CREDIT" trx?.transaction_type === "TOPUP"
? "credit-bg" ? "credit-bg"
: "debit-bg", : "debit-bg",
)} )}
@ -91,7 +116,7 @@ export async function WalletTransactionsTable({
<TableCell> <TableCell>
<span className="font-semibold pr-2"> <span className="font-semibold pr-2">
{trx.transaction_type === "CREDIT" ? ( {trx.transaction_type === "TOPUP" ? (
<Badge className="bg-green-100 dark:bg-green-700"> <Badge className="bg-green-100 dark:bg-green-700">
{trx.transaction_type} {trx.transaction_type}
</Badge> </Badge>
@ -119,8 +144,8 @@ export async function WalletTransactionsTable({
<Link <Link
className="font-medium " className="font-medium "
href={ href={
trx.transaction_type === "CREDIT" trx.transaction_type === "TOPUP"
? `/top-up/${trx.reference_id}` ? `/top-ups/${trx.reference_id}`
: `/payments/${trx.reference_id}` : `/payments/${trx.reference_id}`
} }
> >
@ -157,8 +182,9 @@ export async function WalletTransactionsTable({
totalPages={meta?.last_page} totalPages={meta?.last_page}
currentPage={meta?.current_page} currentPage={meta?.current_page}
/> />
</> </div>
)} )
}
</div > </div >
); );
} }
@ -168,7 +194,7 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
<div <div
className={cn( className={cn(
"flex flex-col items-start border rounded p-2 my-2", "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"> <div className="bg-white shadow dark:bg-black p-2 rounded w-full">
@ -195,7 +221,7 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
</span> </span>
</div> </div>
<span className="font-semibold pr-2"> <span className="font-semibold pr-2">
{trx.transaction_type === "CREDIT" ? ( {trx.transaction_type === "TOPUP" ? (
<Badge className="bg-green-100 dark:bg-green-700"> <Badge className="bg-green-100 dark:bg-green-700">
{trx.transaction_type} {trx.transaction_type}
</Badge> </Badge>
@ -210,8 +236,8 @@ function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
<Link <Link
className="font-medium hover:underline" className="font-medium hover:underline"
href={ href={
trx.transaction_type === "CREDIT" trx.transaction_type === "TOPUP"
? `/top-up/${trx.reference_id}` ? `/top-ups/${trx.reference_id}`
: `/payments/${trx.reference_id}` : `/payments/${trx.reference_id}`
} }
> >

2
lib/backend-types.ts
View File

@ -105,7 +105,7 @@ export interface WalletTransaction {
name: string; name: string;
}; };
amount: number; amount: number;
transaction_type: "DEBIT" | "CREDIT"; transaction_type: "DEBIT" | "TOPUP";
description: string; description: string;
reference_id: string; reference_id: string;
created_at: string; created_at: string;