refactor: enhance error handling and add pagination to device queries

components/clickable-row.tsx

@@ -21,7 +21,7 @@ export default function ClickableRow({
 			className={cn(
 				(parentalControl === false && device.blocked) || device.is_active
 					? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
-					: "cursor-pointer hover:bg-muted",
+					: "cursor-pointer hover:bg-muted-foreground/10",
 			)}
 			onClick={() => {
 				if (device.blocked) return;
@@ -66,7 +66,7 @@ export default function ClickableRow({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
 								Payment Pending <Hourglass size={14} />
 							</span>
 						</Link>

components/client-error-message.tsx

@@ -0,0 +1,22 @@
+import { Phone, TriangleAlert } from "lucide-react";
+import Link from "next/link";
+import { Button } from "./ui/button";
+
+export default function ClientErrorMessage({ message }: { message: string }) {
+	return (
+		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
+			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
+				<TriangleAlert color="red" />
+				<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
+				<span className="text-muted-foreground">
+					Please contact the administrator to give you permissions.
+				</span>
+				<Link href="tel:9198026">
+					<Button>
+						<Phone /> 919-8026
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
+}

components/device-card.tsx

@@ -3,7 +3,7 @@ import { deviceCartAtom } from "@/lib/atoms";
 import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { useAtom } from "jotai";
-import { Hourglass } from "lucide-react";
+import { HandCoins, Hourglass } from "lucide-react";
 import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
@@ -39,7 +39,7 @@ export default function DeviceCard({
 					isChecked ? "bg-accent" : "bg-",
 					device.is_active
 						? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
-						: "cursor-pointer hover:bg-muted",
+						: "cursor-pointer hover:bg-muted-foreground/10",
 				)}
 			>
 				<div className="">
@@ -50,7 +50,7 @@ export default function DeviceCard({
 						>
 							{device.name}
 						</Link>
-						<Badge variant={"secondary"}>
+						<Badge variant={"outline"}>
 							<span className="font-medium">{device.mac}</span>
 						</Badge>
 					</div>
@@ -74,8 +74,9 @@ export default function DeviceCard({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
-								Payment Pending <Hourglass size={14} />
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+								Payment Pending{" "}
+								<HandCoins className="animate-pulse" size={14} />
 							</span>
 						</Link>
 					)}

components/devices-table.tsx

@@ -12,7 +12,9 @@ import {
 import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 import ClickableRow from "./clickable-row";
+import ClientErrorMessage from "./client-error-message";
 import DeviceCard from "./device-card";
 import Pagination from "./pagination";
 
@@ -30,15 +32,22 @@ export async function DevicesTable({
 	const session = await getServerSession(authOptions);
 	const isAdmin = session?.user?.is_superuser;
 	const query = (await searchParams)?.query || "";
+	const page = (await searchParams)?.page || 1;
 
-	const [error, devices] = await tryCatch(getDevices({ query: query }));
+	const limit = 10; // Items per page
+	const offset = (page - 1) * limit; // Calculate offset based on page
+
+	const [error, devices] = await tryCatch(
+		getDevices({ query: query, limit: limit, offset: offset }),
+	);
 	if (error) {
-		return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		if (error.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={error.message} />;
 	}
-	const { meta, data } = devices;
+	const { meta, data, links } = devices;
 	return (
 		<div>
-			{data.length === 0 ? (
+			{data?.length === 0 ? (
 				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
 					<h3>No devices yet.</h3>
 				</div>
@@ -55,7 +64,7 @@ export async function DevicesTable({
 								</TableRow>
 							</TableHeader>
 							<TableBody className="overflow-scroll">
-								{data.map((device) => (
+								{data?.map((device) => (
 									<ClickableRow
 										admin={isAdmin}
 										key={device.id}
@@ -67,27 +76,26 @@ export async function DevicesTable({
 							<TableFooter>
 								<TableRow>
 									<TableCell colSpan={2}>
-										{query.length > 0 && (
+										{query?.length > 0 && (
 											<p className="text-sm text-muted-foreground">
-												Showing {meta.total} locations for &quot;{query}
+												Showing {meta?.total} locations for &quot;{query}
 												&quot;
 											</p>
 										)}
 									</TableCell>
 									<TableCell className="text-muted-foreground">
-										{meta.total} devices
+										{meta?.total} devices
 									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>
 						<Pagination
-							totalPages={meta.total / meta.per_page}
-							currentPage={meta.current_page}
+							totalPages={meta?.last_page}
+							currentPage={meta?.current_page}
 						/>
-						<pre>{JSON.stringify(meta, null, 2)}</pre>
 					</div>
 					<div className="sm:hidden my-4">
-						{data.map((device) => (
+						{data?.map((device) => (
 							<DeviceCard
 								parentalControl={parentalControl}
 								key={device.id}