style: add skeletons to paymentId and deviceId pages ♻️

app/(dashboard)/devices/[deviceId]/loading.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DeviceLoading() {
+  return (
+    <div>
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
+        <div className="flex flex-col space-y-2 justify-between items-start">
+          <Skeleton className="h-8 w-44" />
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <div className="flex items-center gap-2 flex-col">
+          <Skeleton className="h-10 w-32" />
+        </div>
+      </div>
+
+      <div
+        id="user-filters"
+        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <Skeleton className="h-10 sm:w-64" />
+        {/* <Filter
+        options={sortfilterOptions}
+        defaultOption="asc"
+        queryParamKey="sortBy"
+      /> */}
+      </div>
+      {/* <Suspense key={query} fallback={"loading...."}>
+      <DevicesTable searchParams={searchParams} />
+    </Suspense> */}
+    </div>
+  );
+}

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -1,68 +1,68 @@
+import { redirect } from "next/navigation";
 import ClientErrorMessage from "@/components/client-error-message";
 import Search from "@/components/search";
 import { Badge } from "@/components/ui/badge";
 import { getDevice } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
-import { redirect } from "next/navigation";
 
 export default async function DeviceDetails({
-	params,
+  params,
 }: {
-	params: Promise<{ deviceId: string }>;
+  params: Promise<{ deviceId: string }>;
 }) {
-	const deviceId = (await params)?.deviceId;
-	const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
-	if (error) {
-		// Handle specific actions for certain errors, but reuse the error message
-		if (error.message === "UNAUTHORIZED") {
-			redirect("/auth/signin");
-		} else {
-			// For all other errors, display the error message directly
-			return <ClientErrorMessage message={error.message} />;
-		}
-	}
-	if (!device) return null;
+  const deviceId = (await params)?.deviceId;
+  const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
+  if (error) {
+    // Handle specific actions for certain errors, but reuse the error message
+    if (error.message === "UNAUTHORIZED") {
+      redirect("/auth/signin");
+    } else {
+      // For all other errors, display the error message directly
+      return <ClientErrorMessage message={error.message} />;
+    }
+  }
+  if (!device) return null;
 
-	return (
-		<div>
-			<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
-				<div className="flex flex-col justify-between items-start">
-					<h3 className="text-2xl text-sarLinkOrange font-bold">
-						{device?.name}
-					</h3>
-					<Badge variant={"secondary"}>{device?.mac}</Badge>
-					<p className="text-muted-foreground text-sm mt-2">
-						Device active until{" "}
-						{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
-							month: "short",
-							day: "2-digit",
-							year: "numeric",
-						})}
-					</p>
-				</div>
-				<div className="flex items-center gap-2 flex-col">
-					{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
-						<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
-							ACTIVE
-						</p>
-					)}
-				</div>
-			</div>
+  return (
+    <div>
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
+        <div className="flex flex-col justify-between items-start">
+          <h3 className="text-2xl text-sarLinkOrange font-bold">
+            {device?.name}
+          </h3>
+          <Badge variant={"secondary"}>{device?.mac}</Badge>
+          <p className="text-muted-foreground text-sm mt-2">
+            Device active until{" "}
+            {new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              year: "numeric",
+            })}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 flex-col">
+          {device?.expiry_date && new Date() < new Date(device.expiry_date) && (
+            <p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
+              ACTIVE
+            </p>
+          )}
+        </div>
+      </div>
 
-			<div
-				id="user-filters"
-				className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-			>
-				<Search />
-				{/* <Filter
+      <div
+        id="user-filters"
+        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <Search />
+        {/* <Filter
         options={sortfilterOptions}
         defaultOption="asc"
         queryParamKey="sortBy"
       /> */}
-			</div>
-			{/* <Suspense key={query} fallback={"loading...."}>
+      </div>
+      {/* <Suspense key={query} fallback={"loading...."}>
       <DevicesTable searchParams={searchParams} />
     </Suspense> */}
-		</div>
-	);
+    </div>
+  );
 }

app/(dashboard)/devices/loading.tsx

@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function LoadingComponent() {
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<Skeleton className="w-48 h-8" />
-				<Skeleton className="w-20 h-8" />
-			</div>
-			<div
-				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
-			>
-				<DevicesTableSkeleton
-					headers={["Device Name", "Mac Address", "Vendor", "#"]}
-					length={10}
-				/>
-			</div>
-		</div>
-	);
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-36 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Device Name", "Mac Address", "Vendor", "#"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
 }

app/(dashboard)/payments/[paymentId]/loading.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableRow,
+} from "@/components/ui/table";
+
+export default function PaymentLoading() {
+  return (
+    <div className="mx-2">
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
+        <Skeleton className="h-8 w-48" />
+      </div>
+      <div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
+        <Skeleton className="h-5 w-36" />
+      </div>
+      <div className="flex flex-col gap-3 w-full">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <Skeleton
+            key={`${i + 1}`}
+            className="w-full border border-gray-300 h-13 rounded-sm"
+          />
+        ))}
+        <div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
+          <div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
+            <Table>
+              <TableBody className="">
+                <TableRow>
+                  <TableCell>Payment created</TableCell>
+                  <TableCell className="text-right">
+                    <Skeleton className="h-5 inline-block w-24" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Total Devices</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Duration</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              <TableFooter>
+                <TableRow className="">
+                  <TableCell colSpan={1}>Total Due</TableCell>
+                  <TableCell className="text-right text-3xl font-bold">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -10,77 +10,77 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 export default async function PaymentPage({
-	params,
+  params,
 }: {
-	params: Promise<{ paymentId: string }>;
+  params: Promise<{ paymentId: string }>;
 }) {
-	const paymentId = (await params).paymentId;
-	const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
-	if (error) {
-		if (error.message === "Invalid token.") redirect("/auth/signin");
-		return <ClientErrorMessage message={error.message} />;
-	}
-	const [userError, userProfile] = await tryCatch(getProfile());
-	if (userError) {
-		if (userError.message === "Invalid token.") redirect("/auth/signin");
-		return <ClientErrorMessage message={userError.message} />;
-	}
+  const paymentId = (await params).paymentId;
+  const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
+  if (error) {
+    if (error.message === "Invalid token.") redirect("/auth/signin");
+    return <ClientErrorMessage message={error.message} />;
+  }
+  const [userError, userProfile] = await tryCatch(getProfile());
+  if (userError) {
+    if (userError.message === "Invalid token.") redirect("/auth/signin");
+    return <ClientErrorMessage message={userError.message} />;
+  }
 
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
-				<h3 className="text-sarLinkOrange text-2xl">Payment</h3>
-				<div className="flex flex-col gap-4 items-end w-full">
-					{!payment.is_expired &&
-						payment.paid &&
-						payment.status !== "PENDING" && (
-							<Button
-								disabled
-								className={cn(
-									"rounded-md opacity-100! uppercase font-semibold",
-									payment?.paid
-										? "text-green-900 bg-green-500/20"
-										: "text-inherit bg-yellow-400",
-								)}
-							>
-								{payment.status}
-							</Button>
-						)}
-					{payment.status === "PENDING" && !payment.is_expired && (
-						<Button>
-							<TextShimmer>Payment Pending</TextShimmer>{" "}
-						</Button>
-					)}
-					{!payment.paid &&
-						(payment.is_expired ? (
-							<Button
-								disabled
-								className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
-							>
-								Payment Expired
-							</Button>
-						) : payment.status === "PENDING" ? (
-							<CancelPaymentButton paymentId={paymentId} />
-						) : payment.status === "CANCELLED" ? (
-							<Button disabled>Payment Cancelled</Button>
-						) : (
-							""
-						))}
-				</div>
-			</div>
-			{!payment.paid && (
-				<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
-			)}
-			<div
-				id="user-device-payments"
-				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-			>
-				<DevicesToPay
-					disabled={payment.paid || payment.is_expired}
-					user={userProfile || undefined}
-					payment={payment || undefined}
-				/>
-			</div>
-		</div>
-	);
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
+        <h3 className="text-sarLinkOrange text-2xl">Payment</h3>
+        <div className="flex flex-col gap-4 items-end w-full">
+          {!payment.is_expired &&
+            payment.paid &&
+            payment.status !== "PENDING" && (
+              <Button
+                disabled
+                className={cn(
+                  "rounded-md opacity-100! uppercase font-semibold",
+                  payment?.paid
+                    ? "text-green-900 bg-green-500/20"
+                    : "text-inherit bg-yellow-400",
+                )}
+              >
+                {payment.status}
+              </Button>
+            )}
+          {payment.status === "PENDING" && !payment.is_expired && (
+            <Button>
+              <TextShimmer>Payment Pending</TextShimmer>{" "}
+            </Button>
+          )}
+          {!payment.paid &&
+            (payment.is_expired ? (
+              <Button
+                disabled
+                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
+              >
+                Payment Expired
+              </Button>
+            ) : payment.status === "PENDING" ? (
+              <CancelPaymentButton paymentId={paymentId} />
+            ) : payment.status === "CANCELLED" ? (
+              <Button disabled>Payment Cancelled</Button>
+            ) : (
+              ""
+            ))}
+        </div>
+      </div>
+      {!payment.paid && (
+        <ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
+      )}
+      <div
+        id="user-device-payments"
+        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <DevicesToPay
+          disabled={payment.paid || payment.is_expired}
+          user={userProfile || undefined}
+          payment={payment || undefined}
+        />
+      </div>
+    </div>
+  );
 }

app/(dashboard)/payments/loading.tsx

@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function LoadingComponent() {
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<Skeleton className="w-48 h-8" />
-				<Skeleton className="w-20 h-8" />
-			</div>
-			<div
-				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
-			>
-				<DevicesTableSkeleton
-					headers={["Details", "Duration", "Status", "Amount"]}
-					length={10}
-				/>
-			</div>
-		</div>
-	);
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Details", "Duration", "Status", "Amount"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
 }

components/devices-to-pay.tsx

@@ -78,11 +78,13 @@ export default function DevicesToPay({
           {devices?.map((device) => (
             <div
               key={device.id}
-              className="bg-muted border rounded p-2 flex gap-2 items-center"
+              className="bg-muted border rounded p-2 flex gap-2 items-center motion-preset-fade"
             >
               <div className="flex flex-col">
-                <div className="text-sm font-medium">{device.name}</div>
-                <div className="text-xs text-muted-foreground">
+                <div className="text-sm font-medium motion-preset-slide-up">
+                  {device.name}
+                </div>
+                <div className="text-xs text-muted-foreground motion-preset-slide-up motion-delay-100">
                   {device.mac}
                 </div>
               </div>
@@ -160,8 +162,10 @@ export default function DevicesToPay({
           </TableCaption>
           <TableBody className="">
             <TableRow>
-              <TableCell>Payment created</TableCell>
-              <TableCell className="text-right">
+              <TableCell className="motion-preset-slide-left-sm">
+                Payment created
+              </TableCell>
+              <TableCell className="text-right motion-preset-slide-right-sm">
                 {new Date(payment?.created_at ?? "").toLocaleDateString(
                   "en-US",
                   {
@@ -176,22 +180,31 @@ export default function DevicesToPay({
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Total Devices</TableCell>
-              <TableCell className="text-right text-xl">
+              <TableCell className="motion-preset-slide-left-sm motion-delay-75">
+                Total Devices
+              </TableCell>
+              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-75">
                 {devices?.length}
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Duration</TableCell>
-              <TableCell className="text-right text-xl">
+              <TableCell className="motion-preset-slide-left-sm motion-delay-100">
+                Duration
+              </TableCell>
+              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-100">
                 {payment?.number_of_months} Months
               </TableCell>
             </TableRow>
           </TableBody>
           <TableFooter>
             <TableRow className="">
-              <TableCell colSpan={1}>Total Due</TableCell>
-              <TableCell className="text-right text-3xl font-bold">
+              <TableCell
+                className="motion-preset-slide-left-sm motion-delay-150"
+                colSpan={1}
+              >
+                Total Due
+              </TableCell>
+              <TableCell className="text-right text-3xl font-bold motion-preset-slide-right-sm motion-delay-150">
                 {payment?.amount?.toFixed(2)}
               </TableCell>
             </TableRow>

components/wallet-transactions-table.tsx

@@ -2,13 +2,13 @@ import { Calendar } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from "@/components/ui/table";
 import type { WalletTransaction } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
@@ -19,223 +19,227 @@ import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 
 export async function WalletTransactionsTable({
-	searchParams,
+  searchParams,
 }: {
-	searchParams: Promise<{
-		[key: string]: unknown;
-	}>;
+  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),
-	);
+  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;
-	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 ? (
-				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-					<h3>No transactions yet.</h3>
-				</div>
-			) : (
-				<div>
-					<div className="flex gap-4 mb-4 w-full">
-						<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 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-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 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">
-							<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 === "TOPUP"
-												? "credit-bg"
-												: "debit-bg",
-										)}
-										key={trx.id}
-									>
-										<TableCell>
-											<span className="text-muted-foreground">
-												{trx.description}
-											</span>
-										</TableCell>
-										<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
+  if (error) {
+    if (error.message.includes("Unauthorized")) {
+      redirect("/auth/signin");
+    } else {
+      return <pre>{JSON.stringify(error, null, 2)}</pre>;
+    }
+  }
+  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 ? (
+        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+          <h3>No transactions yet.</h3>
+        </div>
+      ) : (
+        <div>
+          <div className="flex gap-4 mb-4 w-full">
+            <div className="bg-red-300 ring-4 ring-red-500/20 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold uppercase font-barlow">
+                Total Debit
+              </h5>
+              <p>{totalDebit.toFixed(2)} MVR</p>
+            </div>
+            <div className="bg-green-300 ring-4 ring-green-500/20 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold uppercase font-barlow">
+                Total Credit
+              </h5>
+              <p>{totalCredit.toFixed(2)} MVR</p>
+            </div>
+          </div>
+          <div className="hidden sm:block">
+            <Table className="overflow-scroll">
+              <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 === "TOPUP"
+                        ? "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 === "TOPUP" ? (
-													<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
-														{trx.transaction_type}
-													</Badge>
-												) : (
-													<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
-														{trx.transaction_type}
-													</Badge>
-												)}
-											</span>
-										</TableCell>
+                    <TableCell>
+                      <span className="font-semibold pr-2">
+                        {trx.transaction_type === "TOPUP" ? (
+                          <Badge className="bg-green-100 text-green-950 dark:bg-green-700">
+                            {trx.transaction_type}
+                          </Badge>
+                        ) : (
+                          <Badge className="bg-red-500 text-red-950 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 === "TOPUP"
-															? `/top-ups/${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>
-			)}
-		</div>
-	);
+                    <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 === "TOPUP"
+                              ? `/top-ups/${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>
+      )}
+    </div>
+  );
 }
 
 function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
-				trx?.transaction_type === "TOPUP" ? "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>
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-start border rounded p-2 my-2",
+        trx?.transaction_type === "TOPUP" ? "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 === "TOPUP" ? (
-						<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
-							{trx.transaction_type}
-						</Badge>
-					) : (
-						<Badge className="bg-red-500 text-red-950 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 === "TOPUP"
-							? `/top-ups/${trx.reference_id}`
-							: `/payments/${trx.reference_id}`
-					}
-				>
-					<Button size={"sm"} className="w-full">
-						View Details
-					</Button>
-				</Link>
-			</div>
-		</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 === "TOPUP" ? (
+            <Badge className="bg-green-100 text-green-950 dark:bg-green-700">
+              {trx.transaction_type}
+            </Badge>
+          ) : (
+            <Badge className="bg-red-500 text-red-950 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 === "TOPUP"
+              ? `/top-ups/${trx.reference_id}`
+              : `/payments/${trx.reference_id}`
+          }
+        >
+          <Button size={"sm"} className="w-full">
+            View Details
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
 }