refactor: implement session checking utility, enhance device queries with session validation, and improve UI interactions for device management

actions/omada-actions.ts

@@ -123,11 +123,7 @@ export async function blockDevice({
 	if (!macAddress) {
 		throw new Error("macAddress is a required parameter");
 	}
-	// const device = await prisma.device.findFirst({
-	// 	where: {
-	// 		mac: macAddress,
-	// 	},
-	// });
+
 	try {
 		const baseUrl: string = process.env.OMADA_BASE_URL || "";
 		const url: string = `${baseUrl}/api/v2/sites/${process.env.OMADA_SITE_ID}/cmd/clients/${formatMacAddress(macAddress)}/${type}`;

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

@@ -1,3 +1,8 @@
+import BlockDeviceDialog from "@/components/block-device-dialog";
+import Search from "@/components/search";
+import { Badge } from "@/components/ui/badge";
+import { getDevice } from "@/queries/devices";
+import { tryCatch } from "@/utils/tryCatch";
 import React from "react";
 
 export default async function DeviceDetails({
@@ -6,20 +11,46 @@ export default async function DeviceDetails({
 	params: Promise<{ deviceId: string }>;
 }) {
 	const deviceId = (await params)?.deviceId;
+	const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
+	if (error) return <div>{error.message}</div>;
+	if (!device) return null;
 
-	return null;
 	return (
 		<div>
-			<div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4">
-				<h3 className="text-2xl font-bold">{device?.name}</h3>
-				<span>{device?.mac}</span>
+			<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>
+					)}
+					<BlockDeviceDialog
+						device={device}
+						type={device.blocked ? "unblock" : "block"}
+					/>
+					<pre>{JSON.stringify(device.blocked, null, 2)}</pre>
+				</div>
 			</div>
 
 			<div
 				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+				className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
-				{/* <Search /> */}
+				<Search />
 				{/* <Filter
         options={sortfilterOptions}
         defaultOption="asc"

components/add-devices-to-cart-button.tsx

@@ -1,25 +1,28 @@
-'use client'
-import { deviceCartAtom } from '@/lib/atoms'
-import type { Device } from '@prisma/client'
-import { useAtomValue, useSetAtom } from 'jotai'
-import React from 'react'
+"use client";
+import { deviceCartAtom } from "@/lib/atoms";
+import type { Device } from "@/lib/backend-types";
+import { useAtomValue, useSetAtom } from "jotai";
+import React from "react";
 
 export default function AddDevicesToCartButton({ device }: { device: Device }) {
-  const setDeviceCart = useSetAtom(deviceCartAtom)
-  const devices = useAtomValue(deviceCartAtom)
+	const setDeviceCart = useSetAtom(deviceCartAtom);
+	const devices = useAtomValue(deviceCartAtom);
 
 	const isChecked = devices.some((d) => d.id === device.id);
 
 	return (
 		<input
 			type="checkbox"
-      className='peer accent-[#f49d1b] size-4'
+			disabled={device.blocked || device.is_active}
+			className="peer accent-[#f49d1b] size-4"
 			checked={isChecked}
-      onChange={() => setDeviceCart((prev) =>
+			onChange={() =>
+				setDeviceCart((prev) =>
 					isChecked
 						? prev.filter((d) => d.id !== device.id)
-          : [...prev, device]
-      )}
-    />
+						: [...prev, device],
 				)
 			}
+		/>
+	);
+}

components/block-device-dialog.tsx

@@ -11,9 +11,9 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { Device } from "@prisma/client";
 import { OctagonX } from "lucide-react";
 import { useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
@@ -94,7 +94,6 @@ export default function BlockDeviceDialog({
 						);
 					}}
 				>
-
 					{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
 				</Button>
 			) : (

components/clickable-row.tsx

@@ -19,9 +19,13 @@ export default function ClickableRow({
 		<TableRow
 			key={device.id}
 			className={cn(
-				parentalControl === false && "cursor-pointer hover:bg-muted",
+				(parentalControl === false && device.blocked) || device.is_active
+					? "cursor-not-allowed title-bg"
+					: "cursor-pointer hover:bg-muted",
 			)}
 			onClick={() => {
+				if (device.blocked) return;
+				if (device.is_active === true) return;
 				if (parentalControl === true) return;
 				setDeviceCart((prev) =>
 					devices.some((d) => d.id === device.id)
@@ -33,7 +37,10 @@ export default function ClickableRow({
 			<TableCell>
 				<div className="flex flex-col items-start">
 					<Link
-						className="font-medium hover:underline"
+						className={cn(
+							"hover:underline font-semibold",
+							device.is_active ? "text-green-600" : "",
+						)}
 						href={`/devices/${device.id}`}
 						onClick={(e) => e.stopPropagation()}
 					>
@@ -49,7 +56,7 @@ export default function ClickableRow({
 							})}
 						</span>
 					) : (
-						<p>Inactive</p>
+						<p className="text-muted-foreground">Device Inactive</p>
 					)}
 
 					{device.blocked_by === "ADMIN" && device.blocked && (

queries/devices.ts

@@ -2,6 +2,7 @@
 
 import { authOptions } from "@/app/auth";
 import type { Api400Error, ApiResponse, Device } from "@/lib/backend-types";
+import { checkSession } from "@/utils/session";
 import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";
 
@@ -12,7 +13,7 @@ type GetDevicesProps = {
 	status?: string;
 };
 export async function getDevices({ query }: GetDevicesProps) {
-	const session = await getServerSession(authOptions);
+	const session = await checkSession();
 	const respose = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}`,
 		{
@@ -27,6 +28,22 @@ export async function getDevices({ query }: GetDevicesProps) {
 	return data;
 }
 
+export async function getDevice({ deviceId }: { deviceId: string }) {
+	const session = await checkSession();
+	const respose = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${session?.apiToken}`,
+			},
+		},
+	);
+	const device = (await respose.json()) as Device;
+	return device;
+}
+
 export async function addDevice({
 	name,
 	mac,

utils/session.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import { authOptions } from "@/app/auth";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+
+export async function checkSession() {
+	const session = await getServerSession(authOptions);
+	if (!session) return redirect("/auth/signin");
+	return session;
+}