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

feat: enhance payment and topup interfaces with status and expiration details ✨

Browse Source
This commit is contained in:
i701
2025-07-06 22:38:01 +05:00
parent 9e25da717b
commit df2b3da22e
3 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/payments-table.tsx
View File

@ -59,7 +59,7 @@ export async function PaymentsTable({
<TableRow>
<TableHead>Details</TableHead>
<TableHead>Duration</TableHead>
<TableHead>Status</TableHead>
<TableHead>Amount</TableHead>
</TableRow>
</TableHeader>
@ -84,6 +84,8 @@ export async function PaymentsTable({
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
},
)}
</span>
@ -98,16 +100,6 @@ export async function PaymentsTable({
View Details
</Button>
</Link>
<Badge
className={cn(
payment?.paid
? "text-green-500 bg-green-500/20"
: "text-yellow-500 bg-yellow-500/20",
)}
variant={payment.paid ? "outline" : "secondary"}
>
{payment.paid ? "Paid" : "Unpaid"}
</Badge>
</div>
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
<h3 className="text-sm font-medium">Devices</h3>
@ -124,9 +116,30 @@ export async function PaymentsTable({
</div>
</div>
</TableCell>
<TableCell className="font-medium">
{payment.number_of_months} Months
</TableCell>
<TableCell>
<span className="font-semibold pr-2">
{payment.paid ? (
<Badge
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"
)}
variant="outline"
>
{payment.status}
</Badge>
) : payment.is_expired ? (
<Badge>Expired</Badge>
) : (
<Badge variant="outline">{payment.status}</Badge>
)}
</span>
</TableCell>
<TableCell>
<span className="font-semibold pr-2">
{payment.amount.toFixed(2)}
@ -185,6 +198,8 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})}
</span>
</div>
@ -198,16 +213,6 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
View Details
</Button>
</Link>
<Badge
className={cn(
payment?.paid
? "text-green-500 bg-green-500/20"
: "text-yellow-500 bg-yellow-500/20",
)}
variant={payment.paid ? "outline" : "secondary"}
>
{payment.paid ? "Paid" : "Unpaid"}
</Badge>
</div>
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
<h3 className="text-sm font-medium">Devices</h3>
@ -226,9 +231,29 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
</span>
<Separator className="my-2" />
<h3 className="text-sm font-medium">Amount</h3>
<span className="text-sm text-muted-foreground">
{payment.amount.toFixed(2)} MVR
</span>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">
{payment.amount.toFixed(2)} MVR
</span>
<span className="font-semibold pr-2">
{payment.paid ? (
<Badge
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"
)}
variant="outline"
>
{payment.status}
</Badge>
) : payment.is_expired ? (
<Badge>Expired</Badge>
) : (
<Badge variant="secondary">{payment.status}</Badge>
)}
</span>
</div>
</div>
</div>
</div>

25
components/topups-table.tsx
View File

@ -103,19 +103,6 @@ export async function TopupsTable({
View Details
</Button>
</Link>
{!topup.is_expired &&
topup.status !== "CANCELLED" && (
<Badge
className={cn(
topup?.paid
? "text-green-500 bg-green-500/20"
: "text-yellow-500 bg-yellow-500/20",
)}
variant={topup.paid ? "outline" : "secondary"}
>
{topup.paid ? "Paid" : "Unpaid"}
</Badge>
)}
</div>
</div>
</TableCell>
@ -203,18 +190,6 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
View Details
</Button>
</Link>
{!topup.is_expired && topup.status !== "CANCELLED" && (
<Badge
className={cn(
topup?.paid
? "text-green-500 bg-green-500/20"
: "text-yellow-500 bg-yellow-500/20",
)}
variant={topup.paid ? "outline" : "secondary"}
>
{topup.paid ? "Paid" : "Unpaid"}
</Badge>
)}
</div>
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">

5
lib/backend-types.ts
View File

@ -81,9 +81,12 @@ export interface Payment {
paid: boolean;
paid_at: string | null;
method: string;
expires_at: string | null;
expires_at: string;
is_expired: boolean;
created_at: string;
updated_at: string;
status: "CANCELLED" | "PENDING" | "PAID";
mib_reference: string | null;
user: number;
}