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 && (