sarlink-portal/components/wallet-transactions-table.tsx

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>
  );
}