feat: add topup management features including topup creation, cancellation, and countdown timer ✨

app/(dashboard)/top-ups/[topupId]/page.tsx

@@ -0,0 +1,72 @@
+import { redirect } from "next/navigation";
+import { getTopup } from "@/actions/payment";
+import CancelTopupButton from "@/components/billing/cancel-topup-button";
+import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
+import ClientErrorMessage from "@/components/client-error-message";
+import TopupToPay from "@/components/topup-to-pay";
+import { Button } from "@/components/ui/button";
+import { TextShimmer } from "@/components/ui/text-shimmer";
+import { cn } from "@/lib/utils";
+import { tryCatch } from "@/utils/tryCatch";
+export default async function TopupPage({
+  params,
+}: {
+  params: Promise<{ topupId: string }>;
+}) {
+  const topupId = (await params).topupId;
+  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
+  if (error) {
+    if (error.message === "Invalid token.") redirect("/auth/signin");
+    return <ClientErrorMessage message={error.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">Topup</h3>
+        <div className="flex flex-col gap-4 items-end w-full">
+          {!topup.is_expired && (
+
+            <Button
+              disabled
+              className={cn(
+                "rounded-md opacity-100! uppercase font-semibold",
+                // topup?.paid
+                // ? "text-green-900 bg-green-500/20"
+                // : "text-inherit bg-yellow-400",
+              )}
+            >
+              {topup?.paid ? <span>Paid</span> : <TextShimmer>Payment Pending</TextShimmer>}
+            </Button>
+          )}
+
+          {!topup.paid && (
+            topup.is_expired ? (
+              <Button
+                disabled
+                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
+              >
+                Topup Expired
+              </Button>
+            ) : (
+              <CancelTopupButton topupId={topupId} />
+            )
+          )}
+        </div>
+      </div>
+      {!topup.paid && (
+        <ExpiryCountDown expiresAt={topup.expires_at} />
+      )}
+      <div
+        id="user-topup-details"
+        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <TopupToPay
+          disabled={topup.paid || topup.is_expired}
+          topup={topup || undefined}
+        />
+      </div>
+    </div>
+  );
+}