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): implement wallet transactions table and filtering options ✨
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m19s
Details

Browse Source
This commit is contained in:
i701
2025-07-25 16:01:20 +05:00
parent 9b2f2c1528
commit e0b76bb865
7 changed files with 356 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
components/wallet-transactions-table.tsx Normal file
View File

@ -0,0 +1,225 @@
import { Calendar } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { WalletTransaction } from "@/lib/backend-types";
import { cn } from "@/lib/utils";
import { getWaleltTransactions } from "@/queries/wallet";
import { tryCatch } from "@/utils/tryCatch";
import Pagination from "./pagination";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
export async function WalletTransactionsTable({
searchParams,
}: {
searchParams: Promise<{
[key: string]: unknown;
}>;
}) {
const resolvedParams = await searchParams;
const page = Number.parseInt(resolvedParams.page as string) || 1;
const limit = 10;
const offset = (page - 1) * limit;
// Build params object
const apiParams: Record<string, string | number | undefined> = {};
for (const [key, value] of Object.entries(resolvedParams)) {
if (value !== undefined && value !== "") {
apiParams[key] = typeof value === "number" ? value : String(value);
}
}
apiParams.limit = limit;
apiParams.offset = offset;
const [error, transactions] = await tryCatch(
getWaleltTransactions(apiParams),
);
if (error) {
if (error.message.includes("Unauthorized")) {
redirect("/auth/signin");
} else {
return <pre>{JSON.stringify(error, null, 2)}</pre>;
}
}
const { data, meta } = transactions;
return (
<div>
{data?.length === 0 ? (
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
<h3>No transactions yet.</h3>
</div>
) : (
<>
<div className="hidden sm:block">
<Table className="overflow-scroll">
<TableCaption>Table of all transactions.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Description</TableHead>
<TableHead>Amount</TableHead>
<TableHead>Transaction Type</TableHead>
<TableHead>View Details</TableHead>
<TableHead>Created at</TableHead>
</TableRow>
</TableHeader>
<TableBody className="overflow-scroll">
{transactions?.data?.map((trx) => (
<TableRow
className={cn(
"items-start border rounded p-2",
trx?.transaction_type === "CREDIT"
? "credit-bg"
: "debit-bg",
)}
key={trx.id}
>
<TableCell>
<span className="text-muted-foreground">
{trx.description}
</span>
</TableCell>
<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
<TableCell>
<span className="font-semibold pr-2">
{trx.transaction_type === "CREDIT" ? (
<Badge className="bg-green-100 dark:bg-green-700">
{trx.transaction_type}
</Badge>
) : (
<Badge className="bg-red-500 dark:bg-red-700">
{trx.transaction_type}
</Badge>
)}
</span>
</TableCell>
<TableCell>
<span className="">
{new Date(trx.created_at).toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})}
</span>
</TableCell>
<TableCell>
<Button>
<Link
className="font-medium "
href={
trx.transaction_type === "CREDIT"
? `/top-up/${trx.reference_id}`
: `/payments/${trx.reference_id}`
}
>
View Details
</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={5} className="text-muted-foreground">
{meta?.total === 1 ? (
<p className="text-center">
Total {meta?.total} transaction.
</p>
) : (
<p className="text-center">
Total {meta?.total} transactions.
</p>
)}
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
<div className="sm:hidden block">
{data.map((trx) => (
<MobileTransactionDetails key={trx.id} trx={trx} />
))}
</div>
<Pagination
totalPages={meta?.last_page}
currentPage={meta?.current_page}
/>
</>
)}
</div>
);
}
function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
return (
<div
className={cn(
"flex flex-col items-start border rounded p-2 my-2",
trx?.transaction_type === "CREDIT" ? "credit-bg" : "debit-bg",
)}
>
<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
<div className="flex items-center gap-2">
<Calendar size={16} opacity={0.5} />
<span className="text-muted-foreground text-sm">
{new Date(trx.created_at).toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})}
</span>
</div>
<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
</div>
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
<div className="block sm:hidden">
<h3 className="text-sm font-medium">Amount</h3>
<span className="text-sm text-muted-foreground">
{trx.amount.toFixed(2)} MVR
</span>
</div>
<span className="font-semibold pr-2">
{trx.transaction_type === "CREDIT" ? (
<Badge className="bg-green-100 dark:bg-green-700">
{trx.transaction_type}
</Badge>
) : (
<Badge className="bg-red-500 dark:bg-red-700">
{trx.transaction_type}
</Badge>
)}
</span>
</div>
<div className="flex items-center gap-2 mt-2 w-full">
<Link
className="font-medium hover:underline"
href={
trx.transaction_type === "CREDIT"
? `/top-up/${trx.reference_id}`
: `/payments/${trx.reference_id}`
}
>
<Button size={"sm"} className="w-full">
View Details
</Button>
</Link>
</div>
</div>
);
}