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

refactor: enhance topup status display and improve conditional rendering in TopupsTable component 🔨

Browse Source
This commit is contained in:
i701
2025-07-06 20:12:25 +05:00
parent b3805feefe
commit 8c94c92281
1 changed files with 35 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/topups-table.tsx
View File

@ -103,8 +103,8 @@ export async function TopupsTable({
View Details View Details
</Button> </Button>
</Link> </Link>
{!topup.is_expired && ( {!topup.is_expired &&
topup.status !== "CANCELLED" && (
<Badge <Badge
className={cn( className={cn(
topup?.paid topup?.paid
@ -123,7 +123,12 @@ export async function TopupsTable({
<TableCell> <TableCell>
<span className="font-semibold pr-2"> <span className="font-semibold pr-2">
{topup.paid ? ( {topup.paid ? (
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">{topup.status}</Badge> <Badge
className="bg-green-100 dark:bg-green-700"
variant="outline"
>
{topup.status}
</Badge>
) : topup.is_expired ? ( ) : topup.is_expired ? (
<Badge>Expired</Badge> <Badge>Expired</Badge>
) : ( ) : (
@ -144,19 +149,14 @@ export async function TopupsTable({
<TableRow> <TableRow>
<TableCell colSpan={4} className="text-muted-foreground"> <TableCell colSpan={4} className="text-muted-foreground">
{meta?.total === 1 ? ( {meta?.total === 1 ? (
<p className="text-center"> <p className="text-center">Total {meta?.total} topup.</p>
Total {meta?.total} topup.
</p>
) : ( ) : (
<p className="text-center"> <p className="text-center">Total {meta?.total} topups.</p>
Total {meta?.total} topups.
</p>
)} )}
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableFooter> </TableFooter>
</Table> </Table>
</div> </div>
<div className="sm:hidden block"> <div className="sm:hidden block">
{data.map((topup) => ( {data.map((topup) => (
@ -203,7 +203,7 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
View Details View Details
</Button> </Button>
</Link> </Link>
{topup.status !== "CANCELLED" && ( {!topup.is_expired && topup.status !== "CANCELLED" && (
<Badge <Badge
className={cn( className={cn(
topup?.paid topup?.paid
@ -216,13 +216,25 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
</Badge> </Badge>
)} )}
</div> </div>
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
<div className="block sm:hidden"> <div className="block sm:hidden">
<h3 className="text-sm font-medium">Amount</h3> <h3 className="text-sm font-medium">Amount</h3>
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{topup.amount.toFixed(2)} MVR {topup.amount.toFixed(2)} MVR
</span> </span>
</div> </div>
<span className="font-semibold pr-2">
{topup.paid ? (
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
{topup.status}
</Badge>
) : topup.is_expired ? (
<Badge>Expired</Badge>
) : (
<Badge variant="secondary">{topup.status}</Badge>
)}
</span>
</div> </div>
</div> </div>
); );