feat: enhance error handling and improve API response management across components

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -1,8 +1,10 @@
 import BlockDeviceDialog from "@/components/block-device-dialog";
+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";
 import React from "react";
 
 export default async function DeviceDetails({
@@ -12,7 +14,15 @@ export default async function DeviceDetails({
 }) {
 	const deviceId = (await params)?.deviceId;
 	const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
-	if (error) return <div>{error.message}</div>;
+	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 (
@@ -38,11 +48,6 @@ export default async function DeviceDetails({
 							ACTIVE
 						</p>
 					)}
-					<BlockDeviceDialog
-						device={device}
-						type={device.blocked ? "unblock" : "block"}
-					/>
-					<pre>{JSON.stringify(device.blocked, null, 2)}</pre>
 				</div>
 			</div>