feat: enhance payment and topup interfaces with status and expiration details ✨

components/payments-table.tsx

@@ -59,7 +59,7 @@ export async function PaymentsTable({
 								<TableRow>
 									<TableHead>Details</TableHead>
 									<TableHead>Duration</TableHead>
-
+									<TableHead>Status</TableHead>
 									<TableHead>Amount</TableHead>
 								</TableRow>
 							</TableHeader>
@@ -84,6 +84,8 @@ export async function PaymentsTable({
 																month: "short",
 																day: "2-digit",
 																year: "numeric",
+																minute: "2-digit",
+																hour: "2-digit",
 															},
 														)}
 													</span>
@@ -98,16 +100,6 @@ export async function PaymentsTable({
 															View Details
 														</Button>
 													</Link>
-													<Badge
-														className={cn(
-															payment?.paid
-																? "text-green-500 bg-green-500/20"
-																: "text-yellow-500 bg-yellow-500/20",
-														)}
-														variant={payment.paid ? "outline" : "secondary"}
-													>
-														{payment.paid ? "Paid" : "Unpaid"}
-													</Badge>
 												</div>
 												<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
 													<h3 className="text-sm font-medium">Devices</h3>
@@ -124,9 +116,30 @@ export async function PaymentsTable({
 												</div>
 											</div>
 										</TableCell>
+
 										<TableCell className="font-medium">
 											{payment.number_of_months} Months
 										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{payment.paid ? (
+													<Badge
+														className={cn(
+															payment.status === "PENDING"
+																? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
+																: "bg-green-100 dark:bg-green-700"
+														)}
+														variant="outline"
+													>
+														{payment.status}
+													</Badge>
+												) : payment.is_expired ? (
+													<Badge>Expired</Badge>
+												) : (
+													<Badge variant="outline">{payment.status}</Badge>
+												)}
+											</span>
+										</TableCell>
 										<TableCell>
 											<span className="font-semibold pr-2">
 												{payment.amount.toFixed(2)}
@@ -185,6 +198,8 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 						month: "short",
 						day: "2-digit",
 						year: "numeric",
+						minute: "2-digit",
+						hour: "2-digit",
 					})}
 				</span>
 			</div>
@@ -198,16 +213,6 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 						View Details
 					</Button>
 				</Link>
-				<Badge
-					className={cn(
-						payment?.paid
-							? "text-green-500 bg-green-500/20"
-							: "text-yellow-500 bg-yellow-500/20",
-					)}
-					variant={payment.paid ? "outline" : "secondary"}
-				>
-					{payment.paid ? "Paid" : "Unpaid"}
-				</Badge>
 			</div>
 			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
 				<h3 className="text-sm font-medium">Devices</h3>
@@ -226,9 +231,29 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 					</span>
 					<Separator className="my-2" />
 					<h3 className="text-sm font-medium">Amount</h3>
-					<span className="text-sm text-muted-foreground">
+					<div className="flex items-center justify-between">
-						{payment.amount.toFixed(2)} MVR
+						<span className="text-sm text-muted-foreground">
-					</span>
+							{payment.amount.toFixed(2)} MVR
+						</span>
+						<span className="font-semibold pr-2">
+							{payment.paid ? (
+								<Badge
+									className={cn(
+										payment.status === "PENDING"
+											? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
+											: "bg-green-100 dark:bg-green-700"
+									)}
+									variant="outline"
+								>
+									{payment.status}
+								</Badge>
+							) : payment.is_expired ? (
+								<Badge>Expired</Badge>
+							) : (
+								<Badge variant="secondary">{payment.status}</Badge>
+							)}
+						</span>
+					</div>
 				</div>
 			</div>
 		</div>

components/topups-table.tsx

@@ -103,19 +103,6 @@ export async function TopupsTable({
 															View Details
 														</Button>
 													</Link>
-													{!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>
@@ -203,18 +190,6 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 						View Details
 					</Button>
 				</Link>
-				{!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 className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">

lib/backend-types.ts

@@ -81,9 +81,12 @@ export interface Payment {
 	paid: boolean;
 	paid_at: string | null;
 	method: string;
-	expires_at: string | null;
+	expires_at: string;
+	is_expired: boolean;
 	created_at: string;
 	updated_at: string;
+	status: "CANCELLED" | "PENDING" | "PAID";
+	mib_reference: string | null;
 	user: number;
 }