sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-08-03 21:17: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

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

@ -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}`
}
>