refactor: enhance error handling and add pagination to device queries

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>
+	);
+}