mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-11 15:56:03 +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 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 && (
|
||||||
|
@ -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{" "}
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
Reference in New Issue
Block a user