sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-06 04:25:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: add skeletons to paymentId and deviceId pages ♻️
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m58s
Details

Browse Source
This commit is contained in:
i701
2025-09-24 17:46:04 +05:00
parent 5dab74b14b
commit 31a05ae917
8 changed files with 501 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,11 +78,13 @@ export default function DevicesToPay({
{devices?.map((device) => (
<div
key={device.id}
className="bg-muted border rounded p-2 flex gap-2 items-center"
className="bg-muted border rounded p-2 flex gap-2 items-center motion-preset-fade"
>
<div className="flex flex-col">
<div className="text-sm font-medium">{device.name}</div>
<div className="text-xs text-muted-foreground">
<div className="text-sm font-medium motion-preset-slide-up">
{device.name}
</div>
<div className="text-xs text-muted-foreground motion-preset-slide-up motion-delay-100">
{device.mac}
</div>
</div>
@@ -160,8 +162,10 @@ export default function DevicesToPay({
</TableCaption>
<TableBody className="">
<TableRow>
<TableCell>Payment created</TableCell>
<TableCell className="text-right">
<TableCell className="motion-preset-slide-left-sm">
Payment created
</TableCell>
<TableCell className="text-right motion-preset-slide-right-sm">
{new Date(payment?.created_at ?? "").toLocaleDateString(
"en-US",
{
@@ -176,22 +180,31 @@ export default function DevicesToPay({
</TableCell>
</TableRow>
<TableRow>
<TableCell>Total Devices</TableCell>
<TableCell className="text-right text-xl">
<TableCell className="motion-preset-slide-left-sm motion-delay-75">
Total Devices
</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-75">
{devices?.length}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Duration</TableCell>
<TableCell className="text-right text-xl">
<TableCell className="motion-preset-slide-left-sm motion-delay-100">
Duration
</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-100">
{payment?.number_of_months} Months
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow className="">
<TableCell colSpan={1}>Total Due</TableCell>
<TableCell className="text-right text-3xl font-bold">
<TableCell
className="motion-preset-slide-left-sm motion-delay-150"
colSpan={1}
>
Total Due
</TableCell>
<TableCell className="text-right text-3xl font-bold motion-preset-slide-right-sm motion-delay-150">
{payment?.amount?.toFixed(2)}
</TableCell>
</TableRow>