mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-11 09:50:19 +00:00
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
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m27s
This commit is contained in:
@ -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 && (
|
||||
|
@ -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{" "}
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
>
|
||||
|
Reference in New Issue
Block a user