From ef7121f2471c6ad62f5d309e004b4bf01991a08f Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 5 Jul 2025 17:53:32 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20update=20Topup=20interface=20with=20sta?=
 =?UTF-8?q?tus=20and=20paid=5Fat=20fields;=20modify=20table=20display=20fo?=
 =?UTF-8?q?r=20topup=20details=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/topup-to-pay.tsx | 24 +++++++++++++-----------
 components/topups-table.tsx | 17 +++--------------
 lib/backend-types.ts        |  2 ++
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/components/topup-to-pay.tsx b/components/topup-to-pay.tsx
index 65b51f9..8c81780 100644
--- a/components/topup-to-pay.tsx
+++ b/components/topup-to-pay.tsx
@@ -93,7 +93,7 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
 					</TableCaption>
 					<TableBody className="">
 						<TableRow>
-							<TableCell>Topup created at</TableCell>
+							<TableCell>Topup created</TableCell>
 							<TableCell className="text-right text-muted-foreground">
 								{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
 									month: "short",
@@ -106,22 +106,24 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
 							</TableCell>
 						</TableRow>
 						<TableRow>
-							<TableCell>Topup expires at</TableCell>
+							<TableCell>Payment received</TableCell>
 							<TableCell className="text-right text-sarLinkOrange">
-								{new Date(topup?.expires_at ?? "").toLocaleDateString("en-US", {
-									month: "short",
-									day: "2-digit",
-									year: "numeric",
-									minute: "2-digit",
-									hour: "2-digit",
-									second: "2-digit",
-								})}
+								{topup?.paid_at
+									? new Date(topup.paid_at).toLocaleDateString("en-US", {
+										month: "short",
+										day: "2-digit",
+										year: "numeric",
+										minute: "2-digit",
+										hour: "2-digit",
+										second: "2-digit",
+									})
+									: "-"}
 							</TableCell>
 						</TableRow>
 						<TableRow>
 							<TableCell>MIB Reference</TableCell>
 							<TableCell className="text-right">
-								{topup?.mib_reference ? topup.mib_reference : "N/A"}
+								{topup?.mib_reference ? topup.mib_reference : "-"}
 							</TableCell>
 						</TableRow>
 					</TableBody>
diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index 9b01783..479c7a6 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -60,8 +60,7 @@ export async function TopupsTable({
 							<TableHeader>
 								<TableRow>
 									<TableHead>Details</TableHead>
-									<TableHead>Expires at</TableHead>
-									<TableHead>Expired</TableHead>
+									<TableHead>Status</TableHead>
 									<TableHead>Amount</TableHead>
 								</TableRow>
 							</TableHeader>
@@ -120,20 +119,10 @@ export async function TopupsTable({
 												</div>
 											</div>
 										</TableCell>
-										<TableCell>
-											<span>
-												{new Date(topup.expires_at).toLocaleDateString("en-US", {
-													month: "short",
-													day: "2-digit",
-													year: "numeric",
-													minute: "2-digit",
-													hour: "2-digit",
-												})}
-											</span>
-										</TableCell>
+
 										<TableCell>
 											<span className="font-semibold pr-2">
-												{topup.is_expired ? <Badge>Yes</Badge> : <Badge variant="secondary">No</Badge>}
+												{topup.is_expired ? <Badge>Expired</Badge> : <Badge variant="outline">{topup.status}</Badge>}
 											</span>
 										</TableCell>
 										<TableCell>
diff --git a/lib/backend-types.ts b/lib/backend-types.ts
index 1053660..a42e8f8 100644
--- a/lib/backend-types.ts
+++ b/lib/backend-types.ts
@@ -64,6 +64,8 @@ export interface Topup {
 		name: string;
 	};
 	paid: boolean;
+	status: "CANCELLED" | "PENDING" | "VERIFIED";
+	paid_at: string | null;
 	mib_reference: string | null;
 	expires_at: string;
 	is_expired: boolean;