bug: fix payment status display and force timezones in creation date in PaymentsTable and DevicesToPay components 🐛

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

@@ -5,6 +5,7 @@ import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
 import ClientErrorMessage from "@/components/client-error-message";
 import DevicesToPay from "@/components/devices-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 PaymentPage({
@@ -29,29 +30,39 @@ export default async function PaymentPage({
 			<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">
-					<Button
-						disabled
-						className={cn(
-							"rounded-md opacity-100! uppercase font-semibold",
-							payment?.paid
-								? "text-green-500 bg-green-500/20"
-								: "text-yellow-500 bg-yellow-900",
-						)}
-					>
-						{payment?.paid ? "Paid" : "Pending"}
-					</Button>
-					{!payment.paid && (
-						payment.is_expired ? (
+					{!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 && (

components/clickable-row.tsx

@@ -64,7 +64,7 @@ export default function ClickableRow({
 					) : (
 						<p className="text-muted-foreground">Device Inactive</p>
 					)}
-					{device.has_a_pending_payment && (
+					{device.has_a_pending_payment && device.pending_payment_id !== null && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
 							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
 								Payment Pending{" "}

components/devices-to-pay.tsx

@@ -136,6 +136,19 @@ export default function DevicesToPay({
 						</div>
 					</TableCaption>
 					<TableBody className="">
+						<TableRow>
+							<TableCell>Payment created</TableCell>
+							<TableCell className="text-right">
+								{new Date(payment?.created_at ?? "").toLocaleDateString("en-US", {
+									month: "short",
+									day: "2-digit",
+									year: "numeric",
+									minute: "2-digit",
+									hour: "2-digit",
+									second: "2-digit",
+								})}
+							</TableCell>
+						</TableRow>
 						<TableRow>
 							<TableCell>Total Devices</TableCell>
 							<TableCell className="text-right text-xl">
@@ -147,6 +160,7 @@ export default function DevicesToPay({
 							<TableCell className="text-right text-xl">
 								{payment?.number_of_months} Months
 							</TableCell>
+
 						</TableRow>
 					</TableBody>
 					<TableFooter>

components/payments-table.tsx

@@ -76,12 +76,15 @@ export async function PaymentsTable({
 												className={cn(
 													"flex flex-col items-start border rounded p-2",
 													payment?.paid
-														? "bg-green-500/10 border-dashed border-green=500"
-														: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
+														? "bg-green-500/10 border-dashed border-green-500"
+														: payment?.is_expired
+															? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
+															: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
 												)}
 											>
 												<div className="flex items-center gap-2">
 													<Calendar size={16} opacity={0.5} />
+													<pre>{JSON.stringify(payment.created_at, null, 2)}</pre>
 													<span className="text-muted-foreground">
 														{new Date(payment.created_at).toLocaleDateString(
 															"en-US",
@@ -91,6 +94,7 @@ export async function PaymentsTable({
 																year: "numeric",
 																minute: "2-digit",
 																hour: "2-digit",
+																timeZone: "Indian/Maldives", // Force consistent timezone
 															},
 														)}
 													</span>
@@ -132,7 +136,7 @@ export async function PaymentsTable({
 														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"
+																: "bg-green-100 dark:bg-green-700",
 														)}
 														variant="outline"
 													>
@@ -156,8 +160,7 @@ export async function PaymentsTable({
 							</TableBody>
 							<TableFooter>
 								<TableRow>
-
-									<TableCell colSpan={3} className="text-muted-foreground">
+									<TableCell colSpan={4} className="text-muted-foreground">
 										{meta?.total === 1 ? (
 											<p className="text-center">
 												Total {meta?.total} payment.
@@ -166,7 +169,8 @@ export async function PaymentsTable({
 											<p className="text-center">
 												Total {meta?.total} payments.
 											</p>
-										)}									</TableCell>
+										)}{" "}
+									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>
@@ -205,6 +209,7 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 						year: "numeric",
 						minute: "2-digit",
 						hour: "2-digit",
+						timeZone: "Indian/Maldives", // Force consistent timezone
 					})}
 				</span>
 			</div>
@@ -246,7 +251,7 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 									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"
+											: "bg-green-100 dark:bg-green-700",
 									)}
 									variant="outline"
 								>