mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-11 20:01:36 +00:00
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
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m58s
This commit is contained in:
33
app/(dashboard)/devices/[deviceId]/loading.tsx
Normal file
33
app/(dashboard)/devices/[deviceId]/loading.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function DeviceLoading() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
|
||||
<div className="flex flex-col space-y-2 justify-between items-start">
|
||||
<Skeleton className="h-8 w-44" />
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-col">
|
||||
<Skeleton className="h-10 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<Skeleton className="h-10 sm:w-64" />
|
||||
{/* <Filter
|
||||
options={sortfilterOptions}
|
||||
defaultOption="asc"
|
||||
queryParamKey="sortBy"
|
||||
/> */}
|
||||
</div>
|
||||
{/* <Suspense key={query} fallback={"loading...."}>
|
||||
<DevicesTable searchParams={searchParams} />
|
||||
</Suspense> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +1,68 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import ClientErrorMessage from "@/components/client-error-message";
|
||||
import Search from "@/components/search";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { getDevice } from "@/queries/devices";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function DeviceDetails({
|
||||
params,
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ deviceId: string }>;
|
||||
params: Promise<{ deviceId: string }>;
|
||||
}) {
|
||||
const deviceId = (await params)?.deviceId;
|
||||
const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
|
||||
if (error) {
|
||||
// Handle specific actions for certain errors, but reuse the error message
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
// For all other errors, display the error message directly
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
if (!device) return null;
|
||||
const deviceId = (await params)?.deviceId;
|
||||
const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
|
||||
if (error) {
|
||||
// Handle specific actions for certain errors, but reuse the error message
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
// For all other errors, display the error message directly
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
if (!device) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
|
||||
<div className="flex flex-col justify-between items-start">
|
||||
<h3 className="text-2xl text-sarLinkOrange font-bold">
|
||||
{device?.name}
|
||||
</h3>
|
||||
<Badge variant={"secondary"}>{device?.mac}</Badge>
|
||||
<p className="text-muted-foreground text-sm mt-2">
|
||||
Device active until{" "}
|
||||
{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-col">
|
||||
{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
|
||||
<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
|
||||
ACTIVE
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
|
||||
<div className="flex flex-col justify-between items-start">
|
||||
<h3 className="text-2xl text-sarLinkOrange font-bold">
|
||||
{device?.name}
|
||||
</h3>
|
||||
<Badge variant={"secondary"}>{device?.mac}</Badge>
|
||||
<p className="text-muted-foreground text-sm mt-2">
|
||||
Device active until{" "}
|
||||
{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-col">
|
||||
{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
|
||||
<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
|
||||
ACTIVE
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<Search />
|
||||
{/* <Filter
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<Search />
|
||||
{/* <Filter
|
||||
options={sortfilterOptions}
|
||||
defaultOption="asc"
|
||||
queryParamKey="sortBy"
|
||||
/> */}
|
||||
</div>
|
||||
{/* <Suspense key={query} fallback={"loading...."}>
|
||||
</div>
|
||||
{/* <Suspense key={query} fallback={"loading...."}>
|
||||
<DevicesTable searchParams={searchParams} />
|
||||
</Suspense> */}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function LoadingComponent() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||
<Skeleton className="w-48 h-8" />
|
||||
<Skeleton className="w-20 h-8" />
|
||||
</div>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
|
||||
>
|
||||
<DevicesTableSkeleton
|
||||
headers={["Device Name", "Mac Address", "Vendor", "#"]}
|
||||
length={10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||
<Skeleton className="w-48 h-8" />
|
||||
<Skeleton className="w-36 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
|
||||
</div>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
|
||||
>
|
||||
<DevicesTableSkeleton
|
||||
headers={["Device Name", "Mac Address", "Vendor", "#"]}
|
||||
length={10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
63
app/(dashboard)/payments/[paymentId]/loading.tsx
Normal file
63
app/(dashboard)/payments/[paymentId]/loading.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
export default function PaymentLoading() {
|
||||
return (
|
||||
<div className="mx-2">
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
|
||||
<Skeleton className="h-5 w-36" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
{Array.from({ length: 1 }).map((_, i) => (
|
||||
<Skeleton
|
||||
key={`${i + 1}`}
|
||||
className="w-full border border-gray-300 h-13 rounded-sm"
|
||||
/>
|
||||
))}
|
||||
<div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
|
||||
<div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Payment created</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Skeleton className="h-5 inline-block w-24" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Total Devices</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
<Skeleton className="h-5 w-24 inline-block" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
<Skeleton className="h-5 w-24 inline-block" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
<Skeleton className="h-5 w-24 inline-block" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,77 +10,77 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
export default async function PaymentPage({
|
||||
params,
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ paymentId: string }>;
|
||||
params: Promise<{ paymentId: string }>;
|
||||
}) {
|
||||
const paymentId = (await params).paymentId;
|
||||
const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const [userError, userProfile] = await tryCatch(getProfile());
|
||||
if (userError) {
|
||||
if (userError.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={userError.message} />;
|
||||
}
|
||||
const paymentId = (await params).paymentId;
|
||||
const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const [userError, userProfile] = await tryCatch(getProfile());
|
||||
if (userError) {
|
||||
if (userError.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={userError.message} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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">
|
||||
{!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 && (
|
||||
<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-device-payments"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<DevicesToPay
|
||||
disabled={payment.paid || payment.is_expired}
|
||||
user={userProfile || undefined}
|
||||
payment={payment || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<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">
|
||||
{!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 && (
|
||||
<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-device-payments"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<DevicesToPay
|
||||
disabled={payment.paid || payment.is_expired}
|
||||
user={userProfile || undefined}
|
||||
payment={payment || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function LoadingComponent() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||
<Skeleton className="w-48 h-8" />
|
||||
<Skeleton className="w-20 h-8" />
|
||||
</div>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
|
||||
>
|
||||
<DevicesTableSkeleton
|
||||
headers={["Details", "Duration", "Status", "Amount"]}
|
||||
length={10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||
<Skeleton className="w-48 h-8" />
|
||||
<Skeleton className="w-20 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
|
||||
</div>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
|
||||
>
|
||||
<DevicesTableSkeleton
|
||||
headers={["Details", "Duration", "Status", "Amount"]}
|
||||
length={10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user