bug: fix payment status display and force timezones in creation date in PaymentsTable and DevicesToPay components 🐛
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m27s

This commit is contained in:
2025-07-09 21:14:49 +05:00
parent 783d4b360d
commit 27a0b5d4b3
4 changed files with 54 additions and 24 deletions

View File

@ -5,6 +5,7 @@ import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
import ClientErrorMessage from "@/components/client-error-message"; import ClientErrorMessage from "@/components/client-error-message";
import DevicesToPay from "@/components/devices-to-pay"; import DevicesToPay from "@/components/devices-to-pay";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { TextShimmer } from "@/components/ui/text-shimmer";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch"; import { tryCatch } from "@/utils/tryCatch";
export default async function PaymentPage({ 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"> <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> <h3 className="text-sarLinkOrange text-2xl">Payment</h3>
<div className="flex flex-col gap-4 items-end w-full"> <div className="flex flex-col gap-4 items-end w-full">
<Button {!payment.is_expired && payment.paid && payment.status !== "PENDING" && (
disabled <Button
className={cn( disabled
"rounded-md opacity-100! uppercase font-semibold", className={cn(
payment?.paid "rounded-md opacity-100! uppercase font-semibold",
? "text-green-500 bg-green-500/20" payment?.paid
: "text-yellow-500 bg-yellow-900", ? "text-green-900 bg-green-500/20"
)} : "text-inherit bg-yellow-400",
> )}
{payment?.paid ? "Paid" : "Pending"} >
</Button> {payment.status}
{!payment.paid && ( </Button>
payment.is_expired ? ( )}
{payment.status === "PENDING" && !payment.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
{!payment.paid &&
(payment.is_expired ? (
<Button <Button
disabled disabled
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20" className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
> >
Payment Expired Payment Expired
</Button> </Button>
) : ( ) : payment.status === "PENDING" ? (
<CancelPaymentButton paymentId={paymentId} /> <CancelPaymentButton paymentId={paymentId} />
) ) : payment.status === "CANCELLED" ? (
)} <Button disabled>Payment Cancelled</Button>
) : (
""
))}
</div> </div>
</div> </div>
{!payment.paid && ( {!payment.paid && (

View File

@ -64,7 +64,7 @@ export default function ClickableRow({
) : ( ) : (
<p className="text-muted-foreground">Device Inactive</p> <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}`}> <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"> <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{" "} Payment Pending{" "}

View File

@ -136,6 +136,19 @@ export default function DevicesToPay({
</div> </div>
</TableCaption> </TableCaption>
<TableBody className=""> <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> <TableRow>
<TableCell>Total Devices</TableCell> <TableCell>Total Devices</TableCell>
<TableCell className="text-right text-xl"> <TableCell className="text-right text-xl">
@ -147,6 +160,7 @@ export default function DevicesToPay({
<TableCell className="text-right text-xl"> <TableCell className="text-right text-xl">
{payment?.number_of_months} Months {payment?.number_of_months} Months
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
<TableFooter> <TableFooter>

View File

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