From 8c94c92281babd29f9f849ee38833d94a7ac679e Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sun, 6 Jul 2025 20:12:25 +0500
Subject: [PATCH] =?UTF-8?q?refactor:=20enhance=20topup=20status=20display?=
 =?UTF-8?q?=20and=20improve=20conditional=20rendering=20in=20TopupsTable?=
 =?UTF-8?q?=20component=20=F0=9F=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/topups-table.tsx | 58 ++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index dd5879c..f7fb0ab 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -103,19 +103,19 @@ export async function TopupsTable({
 															View Details
 														</Button>
 													</Link>
-													{!topup.is_expired && (
-
-														<Badge
-															className={cn(
-																topup?.paid
-																	? "text-green-500 bg-green-500/20"
-																	: "text-yellow-500 bg-yellow-500/20",
-															)}
-															variant={topup.paid ? "outline" : "secondary"}
-														>
-															{topup.paid ? "Paid" : "Unpaid"}
-														</Badge>
-													)}
+													{!topup.is_expired &&
+														topup.status !== "CANCELLED" && (
+															<Badge
+																className={cn(
+																	topup?.paid
+																		? "text-green-500 bg-green-500/20"
+																		: "text-yellow-500 bg-yellow-500/20",
+																)}
+																variant={topup.paid ? "outline" : "secondary"}
+															>
+																{topup.paid ? "Paid" : "Unpaid"}
+															</Badge>
+														)}
 												</div>
 											</div>
 										</TableCell>
@@ -123,7 +123,12 @@ export async function TopupsTable({
 										<TableCell>
 											<span className="font-semibold pr-2">
 												{topup.paid ? (
-													<Badge className="bg-green-100 dark:bg-green-700" variant="outline">{topup.status}</Badge>
+													<Badge
+														className="bg-green-100 dark:bg-green-700"
+														variant="outline"
+													>
+														{topup.status}
+													</Badge>
 												) : topup.is_expired ? (
 													<Badge>Expired</Badge>
 												) : (
@@ -144,19 +149,14 @@ export async function TopupsTable({
 								<TableRow>
 									<TableCell colSpan={4} className="text-muted-foreground">
 										{meta?.total === 1 ? (
-											<p className="text-center">
-												Total {meta?.total} topup.
-											</p>
+											<p className="text-center">Total {meta?.total} topup.</p>
 										) : (
-											<p className="text-center">
-												Total {meta?.total} topups.
-											</p>
+											<p className="text-center">Total {meta?.total} topups.</p>
 										)}
 									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>
-
 					</div>
 					<div className="sm:hidden block">
 						{data.map((topup) => (
@@ -203,7 +203,7 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 						View Details
 					</Button>
 				</Link>
-				{topup.status !== "CANCELLED" && (
+				{!topup.is_expired && topup.status !== "CANCELLED" && (
 					<Badge
 						className={cn(
 							topup?.paid
@@ -216,13 +216,25 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 					</Badge>
 				)}
 			</div>
-			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
+
+			<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">
 						{topup.amount.toFixed(2)} MVR
 					</span>
 				</div>
+				<span className="font-semibold pr-2">
+					{topup.paid ? (
+						<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
+							{topup.status}
+						</Badge>
+					) : topup.is_expired ? (
+						<Badge>Expired</Badge>
+					) : (
+						<Badge variant="secondary">{topup.status}</Badge>
+					)}
+				</span>
 			</div>
 		</div>
 	);