sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-11 15:56:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source
This commit is contained in:
i701
2025-07-09 21:14:49 +05:00
parent 783d4b360d
commit 27a0b5d4b3
4 changed files with 54 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
components/clickable-row.tsx
View File

@ -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{" "}

14
components/devices-to-pay.tsx
View File

@ -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>

19
components/payments-table.tsx
View File

@ -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"
>