refactor: enhance parental control features and improve device blocking logic 🔨

refactor: remove unused import and improve conditional rendering in b…

README.md

@@ -9,9 +9,11 @@ This is a web portal for SAR Link customers.
  - [x] Add all the filters for devices table (mobile responsive)
  - [x] Add cancel feature to selected devices floating button
 
- ### Payments
+
+ ### Payments1
  - [x] Show payments table
  - [x] Add all the filters for payment table (mobile responsive)
+    - [x] add slider range filter
  - [ ] Fix bill formula linking for generated payments
 
 ### Parental Control
@@ -33,8 +35,9 @@ This is a web portal for SAR Link customers.
 
 ### User Devices
 - [ ] Block or unblock from admin with custom message
- - [ ] Show the devices table
- - [ ] Add all relevant filters for user devices table
+- [ ] Blocking devices for client and admin using useActionState instead of client side button onClick handlers
+- [ ] Show the devices table
+- [ ] Add all relevant filters for user devices table
 
 ### User Payments
 - [ ] Show user payments table

actions/omada-actions.ts

@@ -1,8 +1,8 @@
 "use server";
 
+import { revalidatePath } from "next/cache";
 import type { GroupProfile, MacAddress, OmadaResponse } from "@/lib/types";
 import { formatMacAddress } from "@/lib/utils";
-import { revalidatePath } from "next/cache";
 
 async function fetchOmadaGroupProfiles(siteId: string): Promise<OmadaResponse> {
 	if (!siteId) {

app/(dashboard)/devices/page.tsx

@@ -1,10 +1,9 @@
+import { getServerSession } from "next-auth";
+import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 import AddDeviceDialogForm from "@/components/user/add-device-dialog";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { Suspense } from "react";
 import DevicesTableSkeleton from "./device-table-skeleton";
 
 export default async function Devices({
@@ -18,7 +17,6 @@ export default async function Devices({
 	const query = (await searchParams)?.query || "";
 	const page = (await searchParams)?.page || 1;
 	const session = await getServerSession(authOptions);
-	if (session?.user?.is_admin) return redirect("/user-devices");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

app/(dashboard)/parental-control/page.tsx

@@ -1,18 +1,22 @@
+import { Suspense } from "react";
 import { DevicesTable } from "@/components/devices-table";
 import Search from "@/components/search";
-import { Suspense } from "react";
 
 export default async function ParentalControl({
   searchParams,
 }: {
   searchParams: Promise<{
-    query: string;
     page: number;
     sortBy: string;
     status: string;
   }>;
 }) {
-  const query = (await searchParams)?.query || "";
+
+  const parentalControlFilters = {
+    is_active: "true",
+    has_a_pending_payment: "false",
+  };
+
   return (
     <div>
       <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -25,10 +29,11 @@ export default async function ParentalControl({
       >
         <Search />
       </div>
-      <Suspense key={query} fallback={"loading...."}>
+      <Suspense key={(await searchParams).page} fallback={"loading...."}>
         <DevicesTable
           parentalControl={true}
           searchParams={searchParams}
+          additionalFilters={parentalControlFilters}
         />
       </Suspense>
     </div>

app/(dashboard)/payments/page.tsx

@@ -1,9 +1,6 @@
-import { authOptions } from "@/app/auth";
+import { Suspense } from "react";
 import { PaymentsTable } from "@/components/payments-table";
 import Search from "@/components/search";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { Suspense } from "react";
 
 export default async function Payments({
 	searchParams,
@@ -16,10 +13,7 @@ export default async function Payments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	const session = await getServerSession(authOptions);
-	if (session?.user?.is_admin) {
-		return redirect("/user-payments");
-	}
+
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

app/(dashboard)/user-devices/page.tsx

@@ -1,9 +1,9 @@
-import { AdminDevicesTable } from "@/components/admin/admin-devices-table";
-import Search from "@/components/search";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
-
-
-
+import { authOptions } from "@/app/auth";
+import { AdminDevicesTable } from "@/components/admin/admin-devices-table";
+import DynamicFilter from "@/components/generic-filter";
 
 export default async function UserDevices({
 	searchParams,
@@ -16,20 +16,48 @@ export default async function UserDevices({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
+	const session = await getServerSession(authOptions);
+	if (session?.user?.is_admin !== true) redirect("/devices?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<h3 className="text-sarLinkOrange text-2xl">
-					User Devices
-				</h3>
+				<h3 className="text-sarLinkOrange text-2xl">User Devices</h3>
 			</div>
 
 			<div
 				id="user-filters"
 				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
-				<Search />
-
+				<DynamicFilter
+					description="Filter devices by name, MAC address, or vendor."
+					title="Device Filter"
+					inputs={[
+						{
+							name: "name",
+							label: "Device Name",
+							type: "string",
+							placeholder: "Enter device name",
+						},
+						{
+							name: "mac",
+							label: "MAC Address",
+							type: "string",
+							placeholder: "Enter device MAC address",
+						},
+						{
+							name: "vendor",
+							label: "Vendor",
+							type: "string",
+							placeholder: "Enter device vendor name",
+						},
+						{
+							name: "user",
+							label: "Device User",
+							type: "string",
+							placeholder: "User name or id card",
+						}
+					]}
+				/>
 			</div>
 			<Suspense key={query} fallback={"loading...."}>
 				<AdminDevicesTable parentalControl={true} searchParams={searchParams} />

app/(dashboard)/user-payments/page.tsx

@@ -1,7 +1,5 @@
-import { authOptions } from "@/app/auth";
+import { Suspense } from "react";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
-import { getServerSession } from "next-auth";
-import React, { Suspense } from "react";
 
 export default async function UserPayments({
 	searchParams,
@@ -14,13 +12,12 @@ export default async function UserPayments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	const session = await getServerSession(authOptions);
+	// const session = await getServerSession(authOptions);
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
 				<h3 className="text-sarLinkOrange text-2xl">User Payments</h3>
 			</div>
-			<pre>{JSON.stringify(session, null, 2)}</pre>
 			<Suspense key={query} fallback={"loading...."}>
 				<UsersPaymentsTable searchParams={searchParams} />
 			</Suspense>

components/admin/admin-devices-table.tsx

@@ -1,204 +1,188 @@
-// import {
-// 	Table,
-// 	TableBody,
-// 	TableCaption,
-// 	TableCell,
-// 	TableFooter,
-// 	TableHead,
-// 	TableHeader,
-// 	TableRow,
-// } from "@/components/ui/table";
-// import { headers } from "next/headers";
-// import Link from "next/link";
-// import BlockDeviceDialog from "../block-device-dialog";
-// import DeviceCard from "../device-card";
-// import Pagination from "../pagination";
+import { HandCoins } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/auth";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { getDevices } from "@/queries/devices";
+import { tryCatch } from "@/utils/tryCatch";
+import BlockDeviceDialog from "../block-device-dialog";
+import ClientErrorMessage from "../client-error-message";
+import DeviceCard from "../device-card";
+import Pagination from "../pagination";
 
 export async function AdminDevicesTable({
 	searchParams,
 	parentalControl,
 }: {
 	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
+		[key: string]: unknown;
 	}>;
 	parentalControl?: boolean;
 }) {
-	console.log(parentalControl);
-	// const session = await auth.api.getSession({
-	// 	headers: await headers(),
-	// });
-	// const isAdmin = session?.user.role === "ADMIN";
-	const query = (await searchParams)?.query || "";
-	const page = (await searchParams)?.page;
-	console.log(query, page);
-	// const sortBy = (await searchParams)?.sortBy || "asc";
-	// const totalDevices = await prisma.device.count({
-	// 	where: {
-	// 		OR: [
-	// 			{
-	// 				name: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				mac: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// });
+	const resolvedParams = await searchParams;
+	const session = await getServerSession(authOptions);
+	const isAdmin = session?.user?.is_superuser;
 
-	// const totalPages = Math.ceil(totalDevices / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 
-	// const devices = await prisma.device.findMany({
-	// 	where: {
-	// 		OR: [
-	// 			{
-	// 				name: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				mac: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// 	include: {
-	// 		User: true,
-	// 		payments: true,
-	// 	},
-	// 	skip: offset,
-	// 	take: limit,
-	// 	orderBy: {
-	// 		name: `${sortBy}` as "asc" | "desc",
-	// 	},
-	// });
-	return null;
-	// return (
-	// 	<div>
-	// 		{devices.length === 0 ? (
-	// 			<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-	// 				<h3>No devices yet.</h3>
-	// 			</div>
-	// 		) : (
-	// 			<>
-	// 				<div className="hidden sm:block">
-	// 					<Table className="overflow-scroll">
-	// 						<TableCaption>Table of all devices.</TableCaption>
-	// 						<TableHeader>
-	// 							<TableRow>
-	// 								<TableHead>Device Name</TableHead>
-	// 								<TableHead>User</TableHead>
-	// 								<TableHead>MAC Address</TableHead>
-	// 								<TableHead>isActive</TableHead>
-	// 								<TableHead>blocked</TableHead>
-	// 								<TableHead>blockedBy</TableHead>
-	// 								<TableHead>expiryDate</TableHead>
-	// 							</TableRow>
-	// 						</TableHeader>
-	// 						<TableBody className="overflow-scroll">
-	// 							{devices.map((device) => (
-	// 								<TableRow key={device.id}>
-	// 									<TableCell>
-	// 										<div className="flex flex-col items-start">
-	// 											<Link
-	// 												className="font-medium hover:underline"
-	// 												href={`/devices/${device.id}`}
-	// 											>
-	// 												{device.name}
-	// 											</Link>
-	// 											{device.isActive && (
-	// 												<span className="text-muted-foreground">
-	// 													Active until{" "}
-	// 													{new Date().toLocaleDateString("en-US", {
-	// 														month: "short",
-	// 														day: "2-digit",
-	// 														year: "numeric",
-	// 													})}
-	// 												</span>
-	// 											)}
+	// Build params object for getDevices
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 
-	// 											{device.blocked && (
-	// 												<div className="p-2 rounded border my-2">
-	// 													<span>Comment: </span>
-	// 													<p className="text-neutral-500">
-	// 														blocked because he was watching youtube
-	// 													</p>
-	// 												</div>
-	// 											)}
-	// 										</div>
-	// 									</TableCell>
-	// 									<TableCell className="font-medium">
-	// 										{device.User?.name}
-	// 									</TableCell>
+	const [error, devices] = await tryCatch(
+		getDevices(apiParams, true),
+	);
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
+	const { meta, data } = devices;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
+					<h3>No devices.</h3>
+				</div>
+			) : (
+				<>
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableCaption>Table of all devices.</TableCaption>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Device Name</TableHead>
+									<TableHead>User</TableHead>
+									<TableHead>MAC Address</TableHead>
+									<TableHead>Vendor</TableHead>
+									<TableHead>#</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{data?.map((device) => (
+									<TableRow
+										key={device.id}
+									>
+										<TableCell>
+											<div className="flex flex-col items-start">
+												<Link
+													className={cn(
+														"hover:underline font-semibold",
+														device.is_active ? "text-green-600" : "",
+													)}
+													href={`/devices/${device.id}`}
+												>
+													{device.name}
+												</Link>
+												{device.is_active ? (
+													<div className="text-muted-foreground">
+														Active until{" "}
+														<span className="font-semibold">
+															{new Date(device.expiry_date || "").toLocaleDateString(
+																"en-US",
+																{
+																	month: "short",
+																	day: "2-digit",
+																	year: "numeric",
+																},
+															)}
+														</span>
+													</div>
+												) : (
+													<p className="text-muted-foreground">Device Inactive</p>
+												)}
+												{device.has_a_pending_payment && (
+													<Link href={`/payments/${device.pending_payment_id}`}>
+														<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
+															Payment Pending{" "}
+															<HandCoins className="animate-pulse" size={14} />
+														</span>
+													</Link>
+												)}
 
-	// 									<TableCell className="font-medium">{device.mac}</TableCell>
-	// 									<TableCell>
-	// 										{device.isActive ? "Active" : "Inactive"}
-	// 									</TableCell>
-	// 									<TableCell>
-	// 										{device.blocked ? "Blocked" : "Not Blocked"}
-	// 									</TableCell>
-	// 									<TableCell>
-	// 										{device.blocked ? device.blockedBy : ""}
-	// 									</TableCell>
-	// 									<TableCell>
-	// 										{new Date().toLocaleDateString("en-US", {
-	// 											month: "short",
-	// 											day: "2-digit",
-	// 											year: "numeric",
-	// 										})}
-	// 									</TableCell>
-	// 									<TableCell>
-	// 										<BlockDeviceDialog
-	// 											admin={isAdmin}
-	// 											type={device.blocked ? "unblock" : "block"}
-	// 											device={device}
-	// 										/>
-	// 									</TableCell>
-	// 								</TableRow>
-	// 							))}
-	// 						</TableBody>
-	// 						<TableFooter>
-	// 							<TableRow>
-	// 								<TableCell colSpan={7}>
-	// 									{query.length > 0 && (
-	// 										<p className="text-sm text-muted-foreground">
-	// 											Showing {devices.length} locations for &quot;{query}
-	// 											&quot;
-	// 										</p>
-	// 									)}
-	// 								</TableCell>
-	// 								<TableCell className="text-muted-foreground">
-	// 									{totalDevices} devices
-	// 								</TableCell>
-	// 							</TableRow>
-	// 						</TableFooter>
-	// 					</Table>
-	// 					<Pagination totalPages={totalPages} currentPage={page} />
-	// 				</div>
-	// 				<div className="sm:hidden my-4">
-	// 					{devices.map((device) => (
-	// 						<DeviceCard
-	// 							parentalControl={parentalControl}
-	// 							key={device.id}
-	// 							device={device}
-	// 						/>
-	// 					))}
-	// 				</div>
-	// 			</>
-	// 		)}
-	// 	</div>
-	// );
+												{device.blocked_by === "ADMIN" && device.blocked && (
+													<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
+														<span className="font-semibold">Comment</span>
+														<p className="text-neutral-400">{device?.reason_for_blocking}</p>
+													</div>
+												)}
+											</div>
+										</TableCell>
+										<TableCell className="font-medium">
+											<div className="flex flex-col items-start">
+												{device?.user?.name}
+												<span className="text-muted-foreground">{device?.user?.id_card}</span>
+											</div>
+
+										</TableCell>
+										<TableCell className="font-medium">{device.mac}</TableCell>
+										<TableCell className="font-medium">{device?.vendor}</TableCell>
+										<TableCell>
+											{!device.has_a_pending_payment && (
+												<BlockDeviceDialog
+													admin={isAdmin}
+													type={device.blocked ? "unblock" : "block"}
+													device={device}
+												/>
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={5} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">
+												Total {meta?.total} device.
+											</p>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} devices.
+											</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
+					<div className="sm:hidden my-4">
+						{data?.map((device) => (
+							<DeviceCard
+								parentalControl={parentalControl}
+								key={device.id}
+								device={device}
+							/>
+						))}
+					</div>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)
+			}
+		</div >
+	);
 }

components/auth/application-layout.tsx

@@ -1,21 +1,19 @@
-import { DeviceCartDrawer } from "@/components/device-cart";
-import { Wallet } from "@/components/wallet";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
-
-import { ModeToggle } from "@/components/theme-toggle";
-import { AppSidebar } from "@/components/ui/app-sidebar";
-
 import { getProfile } from "@/actions/payment";
 import { authOptions } from "@/app/auth";
+import { DeviceCartDrawer } from "@/components/device-cart";
+import { ModeToggle } from "@/components/theme-toggle";
+import { AppSidebar } from "@/components/ui/app-sidebar";
 import { Separator } from "@/components/ui/separator";
 import {
 	SidebarInset,
 	SidebarProvider,
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { Wallet } from "@/components/wallet";
 import { tryCatch } from "@/utils/tryCatch";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
 import { WelcomeBanner } from "../welcome-banner";
 import { AccountPopover } from "./account-popver";
 

components/block-device-dialog.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { blockDevice as BlockDeviceFromOmada } from "@/actions/omada-actions";
+import { DialogDescription } from "@radix-ui/react-dialog";
+import { OctagonX, ShieldBan } from "lucide-react";
+import { useActionState, useEffect, useState, useTransition } from "react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -13,168 +16,146 @@ import {
 import { Label } from "@/components/ui/label";
 import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
-import { blockDevice } from "@/queries/devices";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { OctagonX } from "lucide-react";
-import { useState } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+import { blockDeviceAction } from "@/queries/devices";
 import { TextShimmer } from "./ui/text-shimmer";
 import { Textarea } from "./ui/textarea";
 
-const validationSchema = z.object({
-	reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
-});
+export type BlockDeviceFormState = {
+	message: string;
+	success: boolean;
+	fieldErrors?: {
+		reason_for_blocking?: string[];
+	};
+	payload?: FormData;
+};
+
+const initialState: BlockDeviceFormState = {
+	message: "",
+	success: false,
+	fieldErrors: {},
+};
 
 export default function BlockDeviceDialog({
 	device,
-	admin,
-}: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
-	const [disabled, setDisabled] = useState(false);
+	// admin,
+	parentalControl = false,
+}: {
+	device: Device;
+	type: "block" | "unblock";
+	admin?: boolean;
+	parentalControl?: boolean;
+}) {
 	const [open, setOpen] = useState(false);
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm<z.infer<typeof validationSchema>>({
-		resolver: zodResolver(validationSchema),
-	});
+	const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
+	const [isTransitioning, startTransition] = useTransition();
 
-	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
-		setDisabled(true);
-		console.log(data);
-		toast.promise(
-			blockDevice({
-				deviceId: String(device.id),
-				reason_for_blocking: data.reasonForBlocking,
-				blocked_by: "ADMIN",
-			}),
-			{
-				loading: "Blocking...",
-				success: () => {
-					setDisabled(false);
-					setOpen((prev) => !prev);
-					return "Blocked!";
-				},
-				error: (error) => {
-					setDisabled(false);
-					return error || "Something went wrong";
-				},
-			},
-		);
-		setDisabled(false);
+	const handleSimpleBlock = () => {
+		startTransition(() => {
+			const formData = new FormData();
+			formData.append("deviceId", String(device.id));
+			formData.append("reason_for_blocking", "");
+			formData.append("action", "simple-block");
+			formData.append("blocked_by", "PARENT");
+
+			formAction(formData);
+		});
 	};
 
+	const handleUnblock = () => {
+		startTransition(() => {
+			const formData = new FormData();
+			formData.append("deviceId", String(device.id));
+			formData.append("reason_for_blocking", "");
+			formData.append("action", "unblock");
+			formData.append("blocked_by", "PARENT");
+
+			formAction(formData);
+		});
+	};
+
+	// Show toast notifications based on state changes
+	useEffect(() => {
+		if (state.message) {
+			if (state.success) {
+				toast.success(state.message);
+				if (open) setOpen(false);
+			} else {
+				toast.error(state.message);
+			}
+		}
+	}, [state, open]);
+
+	const isLoading = isPending || isTransitioning;
+
+	// If device is blocked and user is not admin, show unblock button
+	if (device.blocked && parentalControl) {
+		return (
+			<Button onClick={handleUnblock} disabled={isLoading}>
+				{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
+			</Button>
+		);
+	}
+
+	// If device is not blocked and user is not admin, show simple block button
+	if (!device.blocked && parentalControl) {
+		return (
+			<Button onClick={handleSimpleBlock} disabled={isLoading} variant="destructive">
+				<ShieldBan />
+				{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
+			</Button>
+		);
+	}
+
+	// If user is admin, show block with reason dialog
 	return (
 		<div>
-			{device.blocked ? (
-				<Button
-					onClick={() => {
-						setDisabled(true);
-						toast.promise(
-							BlockDeviceFromOmada({
-								macAddress: device.mac,
-								type: "unblock",
-								reason: "",
-							}),
-							{
-								loading: "unblockinig...",
-								success: () => {
-									setDisabled(false);
-									return "Unblocked!";
-								},
-								error: () => {
-									setDisabled(false);
-									return "Something went wrong";
-								},
-							},
-						);
-					}}
-				>
-					{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
-				</Button>
-			) : (
-				<>
-					{!admin ? (
-						<Button
-							variant={"destructive"}
-							onClick={() => {
-								setDisabled(true);
-								toast.promise(
-									BlockDeviceFromOmada({
-										macAddress: device.mac,
-										type: "block",
-										reason: "",
-										blockedBy: "PARENT",
-									}),
-									{
-										loading: "blocking...",
-										success: () => {
-											setDisabled(false);
-											return "blocked!";
-										},
-										error: () => {
-											setDisabled(false);
-											return "Something went wrong";
-										},
-									},
-								);
-							}}
-						>
-							<OctagonX />
-							{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
-						</Button>
-					) : (
-						<Dialog open={open} onOpenChange={setOpen}>
-							<DialogTrigger asChild>
-								<Button disabled={disabled} variant="destructive">
-									<OctagonX />
-									Block
-								</Button>
-							</DialogTrigger>
-							<DialogContent className="sm:max-w-[425px]">
-								<DialogHeader>
-									<DialogTitle>
-										Please provide a reason for blocking this device.
-									</DialogTitle>
-								</DialogHeader>
-								<form onSubmit={handleSubmit(onSubmit)}>
-									<div className="grid gap-4 py-4">
-										<div className="flex flex-col items-start gap-1">
-											<Label htmlFor="reason" className="text-right">
-												Reason for blocking
-											</Label>
-											<Textarea
-												rows={10}
-												{...register("reasonForBlocking")}
-												id="reasonForBlocking"
-												className={cn(
-													"col-span-5",
-													errors.reasonForBlocking && "ring-2 ring-red-500",
-												)}
-											/>
-											<span className="text-sm text-red-500">
-												{errors.reasonForBlocking?.message}
-											</span>
-										</div>
-									</div>
-									<DialogFooter>
-										<Button
-											variant={"destructive"}
-											disabled={disabled}
-											type="submit"
-										>
-											Block
-										</Button>
-									</DialogFooter>
-								</form>
-							</DialogContent>
-						</Dialog>
-					)}
-				</>
-			)}
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogTrigger asChild>
+					<Button disabled={isLoading} variant="destructive">
+						<OctagonX />
+						Block
+					</Button>
+				</DialogTrigger>
+				<DialogContent className="sm:max-w-[425px]">
+					<DialogHeader>
+						<DialogTitle>Block 🚫</DialogTitle>
+						<DialogDescription className="text-sm text-muted-foreground">
+							Please provide a reason for blocking this device
+						</DialogDescription>
+					</DialogHeader>
+					<form action={formAction} className="space-y-4">
+						<input type="hidden" name="deviceId" value={String(device.id)} />
+						<input type="hidden" name="action" value="block" />
+						<input type="hidden" name="blocked_by" value="ADMIN" />
+
+						<div className="grid gap-4 py-4">
+							<div className="flex flex-col items-start gap-1">
+								<Label htmlFor="reason_for_blocking" className="text-right">
+									Reason for blocking
+								</Label>
+								<Textarea
+									rows={10}
+									name="reason_for_blocking"
+									id="reason_for_blocking"
+									defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
+									className={cn(
+										"col-span-5",
+										(state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
+									)}
+								/>
+								<span className="text-sm text-red-500">
+									{state.fieldErrors?.reason_for_blocking?.[0]}
+								</span>
+							</div>
+						</div>
+						<DialogFooter>
+							<Button variant="destructive" disabled={isLoading} type="submit">
+								{isLoading ? "Blocking..." : "Block"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
-}
+}

components/clickable-row.tsx

@@ -1,11 +1,11 @@
 "use client";
+import { useAtom } from "jotai";
+import { HandCoins } from "lucide-react";
+import Link from "next/link";
 import { TableCell, TableRow } from "@/components/ui/table";
 import { deviceCartAtom } from "@/lib/atoms";
 import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
-import { useAtom } from "jotai";
-import { HandCoins } from "lucide-react";
-import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
 export default function ClickableRow({
@@ -66,7 +66,7 @@ export default function ClickableRow({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<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">
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
 								Payment Pending{" "}
 								<HandCoins className="animate-pulse" size={14} />
 							</span>
@@ -91,6 +91,7 @@ export default function ClickableRow({
 						admin={admin}
 						type={device.blocked ? "unblock" : "block"}
 						device={device}
+						parentalControl={parentalControl}
 					/>
 				)}
 			</TableCell>

components/device-card.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { deviceCartAtom } from "@/lib/atoms";
-import type { Device } from "@/lib/backend-types";
-import { cn } from "@/lib/utils";
 import { useAtom } from "jotai";
 import { HandCoins } from "lucide-react";
 import Link from "next/link";
+import { deviceCartAtom } from "@/lib/atoms";
+import type { Device } from "@/lib/backend-types";
+import { cn } from "@/lib/utils";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
 import { Badge } from "./ui/badge";

components/devices-table.tsx

@@ -1,3 +1,5 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
 	Table,
@@ -11,8 +13,6 @@ import {
 } from "@/components/ui/table";
 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";
@@ -21,15 +21,18 @@ import Pagination from "./pagination";
 export async function DevicesTable({
 	searchParams,
 	parentalControl,
+	additionalFilters = {},
+
 }: {
 	searchParams: Promise<{
 		[key: string]: unknown;
 	}>;
 	parentalControl?: boolean;
+	additionalFilters?: Record<string, string | number | boolean>;
 }) {
 	const resolvedParams = await searchParams;
 	const session = await getServerSession(authOptions);
-	const isAdmin = session?.user?.is_superuser;
+	const isAdmin = session?.user?.is_admin;
 
 	const page = Number.parseInt(resolvedParams.page as string) || 1;
 	const limit = 10;
@@ -42,9 +45,15 @@ export async function DevicesTable({
 			apiParams[key] = typeof value === "number" ? value : String(value);
 		}
 	}
+
+	for (const [key, value] of Object.entries(additionalFilters)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
 	apiParams.limit = limit;
 	apiParams.offset = offset;
-
+	console.log("API Params:", apiParams);
 	const [error, devices] = await tryCatch(
 		getDevices(apiParams),
 	);

components/devices-to-pay.tsx

@@ -1,4 +1,13 @@
 "use client";
+import {
+	BadgeDollarSign,
+	Clipboard,
+	ClipboardCheck,
+	Loader2,
+	Wallet,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 import { verifyPayment } from "@/actions/payment";
 import {
 	Table,
@@ -10,15 +19,6 @@ import {
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
-import {
-	BadgeDollarSign,
-	Clipboard,
-	ClipboardCheck,
-	Loader2,
-	Wallet,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
 import { Button } from "./ui/button";
 
 export default function DevicesToPay({

components/generic-filter.tsx

@@ -15,6 +15,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
+import { DualRangeSlider } from "@/components/ui/dual-range-slider";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
@@ -89,6 +90,16 @@ type FilterInputConfig<TKey extends string> =
     label: string;
     type: "radio-group";
     options: FilterOption[];
+  }
+  | {
+    name: TKey;
+    label: string;
+    type: "dual-range-slider";
+    min: number;
+    max: number;
+    step?: number;
+    sliderLabel?: string;
+    formatLabel?: (value: number | undefined) => React.ReactNode;
   };
 
 // Utility type to extract the config for a specific key from the array
@@ -112,6 +123,8 @@ type FilterValues<
     ? string[]
     : GetConfigForKey<K, TInputs> extends { type: "radio-group" }
     ? string
+    : GetConfigForKey<K, TInputs> extends { type: "dual-range-slider" }
+    ? number[]
     : string;
   };
 
@@ -163,6 +176,16 @@ export default function DynamicFilter<
             TFilterKeys,
             TInputs
           >[typeof input.name];
+      } else if (input.type === "dual-range-slider") {
+        const minValue = searchParams.get(`${input.name}_min`);
+        const maxValue = searchParams.get(`${input.name}_max`);
+        const parsedMin = minValue ? Number(minValue) : input.min;
+        const parsedMax = maxValue ? Number(maxValue) : input.max;
+        (initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
+          [parsedMin, parsedMax] as FilterValues<
+            TFilterKeys,
+            TInputs
+          >[typeof input.name];
       } else {
         (initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
           (urlValue || "") as FilterValues<
@@ -203,6 +226,15 @@ export default function DynamicFilter<
       }));
     };
 
+  // Handler for dual range slider changes
+  const handleDualRangeChange =
+    (name: TFilterKeys) => (values: number[]) => {
+      setInputValues((prev) => ({
+        ...prev,
+        [name]: values,
+      }));
+    };
+
   // Handles applying all filters
   const handleApplyFilters = () => {
     const newParams = new URLSearchParams(currentParams.toString()); // Start fresh with current params
@@ -218,6 +250,16 @@ export default function DynamicFilter<
         } else {
           newParams.delete(input.name);
         }
+      } else if (input.type === "dual-range-slider") {
+        const rangeValues = value as number[];
+        // Only set params if values are different from the default min/max
+        if (rangeValues.length === 2 && (rangeValues[0] !== input.min || rangeValues[1] !== input.max)) {
+          newParams.set(`${input.name}_min`, rangeValues[0].toString());
+          newParams.set(`${input.name}_max`, rangeValues[1].toString());
+        } else {
+          newParams.delete(`${input.name}_min`);
+          newParams.delete(`${input.name}_max`);
+        }
       } else {
         // String/Number inputs
         if (value) {
@@ -245,6 +287,10 @@ export default function DynamicFilter<
         (clearedInputState as FilterValues<TFilterKeys, TInputs>)[
           input.name as TFilterKeys
         ] = [] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
+      } else if (input.type === "dual-range-slider") {
+        (clearedInputState as FilterValues<TFilterKeys, TInputs>)[
+          input.name as TFilterKeys
+        ] = [input.min, input.max] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
       } else if (input.type === "radio-group" || input.type === "string" || input.type === "number") {
         (clearedInputState as FilterValues<TFilterKeys, TInputs>)[
           input.name as TFilterKeys
@@ -263,7 +309,7 @@ export default function DynamicFilter<
   const appliedFilters = useMemo(() => {
     const filters: Array<{
       key: TFilterKeys;
-      value: string | string[];
+      value: string | string[] | number[];
       label: string;
       config: FilterInputConfig<TFilterKeys>;
     }> = [];
@@ -282,6 +328,19 @@ export default function DynamicFilter<
               config: input,
             });
           }
+        } else if (input.type === "dual-range-slider") {
+          const minValue = searchParams.get(`${input.name}_min`);
+          const maxValue = searchParams.get(`${input.name}_max`);
+          if (minValue && maxValue) {
+            const parsedMin = Number(minValue);
+            const parsedMax = Number(maxValue);
+            filters.push({
+              key: input.name,
+              value: [parsedMin, parsedMax],
+              label: input.label,
+              config: input,
+            });
+          }
         } else {
           filters.push({
             key: input.name,
@@ -298,7 +357,7 @@ export default function DynamicFilter<
   // Dynamic `prettyPrintFilter` for badges
   const prettyPrintFilter = (
     _key: TFilterKeys,
-    value: string | string[],
+    value: string | string[] | number[],
     config: FilterInputConfig<TFilterKeys>,
   ) => {
     if (config.type === "checkbox-group") {
@@ -312,6 +371,18 @@ export default function DynamicFilter<
         </p>
       );
     }
+    if (config.type === "dual-range-slider") {
+      const rangeValues = value as number[];
+      const formatLabel = config.formatLabel || ((val: number | undefined) => val?.toString() || "");
+      return (
+        <p>
+          {config.label}:{" "}
+          <span className="text-muted-foreground">
+            {formatLabel(rangeValues[0])} - {formatLabel(rangeValues[1])}
+          </span>
+        </p>
+      );
+    }
     return (
       <p>
         {config.label}: <span className="text-muted-foreground">{value}</span>
@@ -322,15 +393,26 @@ export default function DynamicFilter<
   // Handles removing an individual filter
   const handleRemoveFilter = (keyToRemove: TFilterKeys) => {
     const newParams = new URLSearchParams(currentParams.toString());
-    newParams.delete(keyToRemove);
-    newParams.set("page", "1"); // Reset page after removing a filter
 
     // Clear the specific input's local state
     const inputConfig = inputs.find((input) => input.name === keyToRemove);
-    setInputValues((prev) => ({
-      ...prev,
-      [keyToRemove]: inputConfig?.type === "checkbox-group" ? [] : "",
-    }));
+
+    if (inputConfig?.type === "dual-range-slider") {
+      newParams.delete(`${keyToRemove}_min`);
+      newParams.delete(`${keyToRemove}_max`);
+      setInputValues((prev) => ({
+        ...prev,
+        [keyToRemove]: [inputConfig.min, inputConfig.max],
+      }));
+    } else {
+      newParams.delete(keyToRemove);
+      setInputValues((prev) => ({
+        ...prev,
+        [keyToRemove]: inputConfig?.type === "checkbox-group" ? [] : "",
+      }));
+    }
+
+    newParams.set("page", "1"); // Reset page after removing a filter
 
     startTransition(() => {
       replace(`${pathname}?${newParams.toString()}`);
@@ -384,6 +466,27 @@ export default function DynamicFilter<
                         onChange={handleCheckboxGroupChange(input.name)}
                       />
                     );
+                  case "dual-range-slider":
+                    return (
+                      <div
+                        key={input.name}
+                        className="px-2 w-full flex flex-col gap-2 p-2 border rounded-md"
+                      >
+                        <Label className="font-semibold text-sm">
+                          {input.label}
+                        </Label>
+                        <div className="px-3 py-2 mt-5">
+                          <DualRangeSlider
+                            label={(value) => <span className="text-xs">{value}{input.sliderLabel}</span>}
+                            value={inputValues[input.name] as number[]}
+                            onValueChange={handleDualRangeChange(input.name)}
+                            min={input.min}
+                            max={input.max}
+                            step={input.step || 1}
+                          />
+                        </div>
+                      </div>
+                    );
                   case "radio-group":
                     return (
                       <div

components/how-to-get-mac.tsx

@@ -1,3 +1,5 @@
+import { PhoneIcon } from "lucide-react"
+import Link from "next/link"
 import {
   Accordion,
   AccordionContent,
@@ -5,8 +7,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { PhoneIcon } from "lucide-react"
-import Link from "next/link"
 
 
 export function GetMacAccordion() {
@@ -18,7 +18,7 @@ export function GetMacAccordion() {
     >
       <AccordionItem value="item-1">
         <AccordionTrigger>How do I find my MAC Address?</AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
+        <AccordionContent className="flex flex-col gap-4 text-start">
           <p>
             A MAC (Media Access Control) address is a unique identifier assigned
             to a device`&apos;`s network. It is used to identify the device on a

components/payments-table.tsx

@@ -1,3 +1,7 @@
+import { Calendar } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getPayments } from "@/actions/payment";
 import {
 	Table,
 	TableBody,
@@ -8,14 +12,9 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import Link from "next/link";
-
-import { getPayments } from "@/actions/payment";
 import type { Payment } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
-import { Calendar } from "lucide-react";
-import { redirect } from "next/navigation";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
@@ -31,59 +30,6 @@ export async function PaymentsTable({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	// const session = await auth.api.getSession({
-	// 	headers: await headers(),
-	// });
-	// const query = (await searchParams)?.query || "";
-	// const page = (await searchParams)?.page;
-	// const totalPayments = await prisma.payment.count({
-	// 	where: {
-	// 		userId: session?.session.userId,
-	// 		OR: [
-	// 			{
-	// 				devices: {
-	// 					every: {
-	// 						name: {
-	// 							contains: query || "",
-	// 							mode: "insensitive",
-	// 						},
-	// 					},
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// });
-
-	// const totalPages = Math.ceil(totalPayments / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
-
-	// const payments = await prisma.payment.findMany({
-	// 	where: {
-	// 		userId: session?.session.userId,
-	// 		OR: [
-	// 			{
-	// 				devices: {
-	// 					every: {
-	// 						name: {
-	// 							contains: query || "",
-	// 							mode: "insensitive",
-	// 						},
-	// 					},
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// 	include: {
-	// 		devices: true,
-	// 	},
-
-	// 	skip: offset,
-	// 	take: limit,
-	// 	orderBy: {
-	// 		createdAt: "desc",
-	// 	},
-	// });
 	const [error, payments] = await tryCatch(getPayments());
 
 	if (error) {
@@ -223,7 +169,7 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 	return (
 		<div
 			className={cn(
-				"flex flex-col items-start border rounded p-2",
+				"flex flex-col items-start border rounded p-2 my-2",
 				payment?.paid
 					? "bg-green-500/10 border-dashed border-green=500"
 					: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",

components/ui/app-sidebar.tsx

@@ -9,7 +9,8 @@ import {
 	UsersRound,
 	Wallet2Icon,
 } from "lucide-react";
-
+import Link from "next/link";
+import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
 	Collapsible,
@@ -28,8 +29,6 @@ import {
 	SidebarMenuItem,
 	SidebarRail,
 } from "@/components/ui/sidebar";
-import { getServerSession } from "next-auth";
-import Link from "next/link";
 
 type Permission = {
 	id: number;
@@ -40,17 +39,17 @@ type Categories = {
 	id: string;
 	children: (
 		| {
-				title: string;
-				link: string;
-				perm_identifier: string;
-				icon: React.JSX.Element;
-		  }
+			title: string;
+			link: string;
+			perm_identifier: string;
+			icon: React.JSX.Element;
+		}
 		| {
-				title: string;
-				link: string;
-				icon: React.JSX.Element;
-				perm_identifier?: undefined;
-		  }
+			title: string;
+			link: string;
+			icon: React.JSX.Element;
+			perm_identifier?: undefined;
+		}
 	)[];
 }[];
 
@@ -128,27 +127,31 @@ export async function AppSidebar({
 
 	const session = await getServerSession(authOptions);
 
-	const filteredCategories = categories.map((category) => {
-		const filteredChildren = category.children.filter((child) => {
-			const permIdentifier = child.perm_identifier;
-			return session?.user?.user_permissions?.some((permission: Permission) => {
-				const permissionParts = permission.name.split(" ");
-				const modelNameFromPermission = permissionParts.slice(2).join(" ");
-				return modelNameFromPermission === permIdentifier;
-			});
-		});
-
-		return { ...category, children: filteredChildren };
-	});
-	const filteredCategoriesWithChildren = filteredCategories.filter(
-		(category) => category.children.length > 0,
-	);
-
 	let CATEGORIES: Categories;
-	if (session?.user?.is_superuser) {
+	if (session?.user?.is_admin) {
 		CATEGORIES = categories;
 	} else {
-		CATEGORIES = filteredCategoriesWithChildren;
+		// Filter out ADMIN CONTROL category for non-admin users
+		const nonAdminCategories = categories.filter(
+			(category) => category.id !== "ADMIN CONTROL"
+		);
+
+		const filteredCategories = nonAdminCategories.map((category) => {
+			const filteredChildren = category.children.filter((child) => {
+				const permIdentifier = child.perm_identifier;
+				return session?.user?.user_permissions?.some((permission: Permission) => {
+					const permissionParts = permission.name.split(" ");
+					const modelNameFromPermission = permissionParts.slice(2).join(" ");
+					return modelNameFromPermission === permIdentifier;
+				});
+			});
+
+			return { ...category, children: filteredChildren };
+		});
+
+		CATEGORIES = filteredCategories.filter(
+			(category) => category.children.length > 0,
+		);
 	}
 
 	return (

components/ui/dialog.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
 import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -123,7 +123,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-start text-muted-foreground text-sm", className)}
       {...props}
     />
   )

components/ui/dual-range-slider.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface DualRangeSliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {
+  labelPosition?: 'top' | 'bottom';
+  label?: (value: number | undefined) => React.ReactNode;
+}
+
+const DualRangeSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  DualRangeSliderProps
+>(({ className, label, labelPosition = 'top', ...props }, ref) => {
+  const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn('relative flex w-full touch-none select-none items-center', className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      {initialValue.map((value, index) => (
+        <React.Fragment key={`${index + 1}`}>
+          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+            {label && (
+              <span
+                className={cn(
+                  'absolute flex w-full justify-center',
+                  labelPosition === 'top' && '-top-7',
+                  labelPosition === 'bottom' && 'top-4',
+                )}
+              >
+                {label(value)}
+              </span>
+            )}
+          </SliderPrimitive.Thumb>
+        </React.Fragment>
+      ))}
+    </SliderPrimitive.Root>
+  );
+});
+DualRangeSlider.displayName = 'DualRangeSlider';
+
+export { DualRangeSlider };

components/user/add-device-dialog.tsx

@@ -1,15 +1,14 @@
 "use client";
 
+import { Loader2, Plus } from "lucide-react";
+import { useActionState, useEffect, useState } from "react"; // Import useActionState
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Plus } from "lucide-react";
-import { useActionState, useEffect, useState } from "react"; // Import useActionState
-import { toast } from "sonner";
-import { GetMacAccordion } from "../how-to-get-mac";
-
 import { addDeviceAction } from "@/queries/devices";
+import { GetMacAccordion } from "../how-to-get-mac";
 
 export type AddDeviceFormState = {
 	message: string;
@@ -72,7 +71,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 					<div className="grid gap-4 py-4">
 						<div className="flex flex-col gap-2">
 							<div>
-								<Label htmlFor="device_name" className="text-right">
+								<Label htmlFor="device_name">
 									Device Name
 								</Label>
 								<Input
@@ -91,7 +90,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 							</div>
 
 							<div>
-								<Label htmlFor="mac_address" className="text-right">
+								<Label htmlFor="mac_address">
 									Mac Address
 								</Label>
 								<Input

lib/backend-types.ts

@@ -1,3 +1,5 @@
+import { User } from "./types/user";
+
 export interface Links {
 	next_page: string | null;
 	previous_page: string | null;
@@ -45,7 +47,9 @@ export interface Device {
 	expiry_date: string | null;
 	created_at: string;
 	updated_at: string;
-	user: number;
+	user: Pick<User, "id" | "id_card" | "mobile"> & {
+		name: string;
+	};
 }
 
 export interface ApiError {

queries/devices.ts

@@ -1,12 +1,13 @@
 "use server";
 
+import { revalidatePath } from "next/cache";
+import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
+import { BlockDeviceFormState } from "@/components/block-device-dialog";
 import type { AddDeviceFormState, initialState } from "@/components/user/add-device-dialog";
 import type { ApiError, ApiResponse, Device } from "@/lib/backend-types";
 import { checkSession } from "@/utils/session";
 import { handleApiResponse } from "@/utils/tryCatch";
-import { getServerSession } from "next-auth";
-import { revalidatePath } from "next/cache";
 
 type GetDevicesProps = {
 	name?: string;
@@ -17,7 +18,7 @@ type GetDevicesProps = {
 	status?: string;
 	[key: string]: string | number | undefined; // Allow additional properties for flexibility
 };
-export async function getDevices(params: GetDevicesProps) {
+export async function getDevices(params: GetDevicesProps, allDevices = false) {
 	const session = await checkSession();
 
 	// Build query string from all defined params
@@ -27,7 +28,7 @@ export async function getDevices(params: GetDevicesProps) {
 		.join("&");
 
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/devices/?${query}`,
+		`${process.env.SARLINK_API_BASE_URL}/api/devices/?${query}&all_devices=${allDevices}`,
 		{
 			method: "GET",
 			headers: {
@@ -114,32 +115,77 @@ export async function addDeviceAction(
 	}
 }
 
-export async function blockDevice({
-	deviceId,
-	reason_for_blocking,
-	blocked_by,
-}: {
-	deviceId: string;
-	reason_for_blocking: string;
-	blocked_by: "ADMIN" | "PARENT";
-}) {
-	const session = await getServerSession(authOptions);
-	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/block/`,
-		{
-			method: "PUT",
-			headers: {
-				"Content-Type": "application/json",
-				Authorization: `Token ${session?.apiToken}`,
+export async function blockDeviceAction(
+	prevState: BlockDeviceFormState,
+	formData: FormData
+): Promise<BlockDeviceFormState> {
+	const deviceId = formData.get("deviceId") as string;
+	const reason_for_blocking = formData.get("reason_for_blocking") as string;
+	const action = formData.get("action") as "block" | "unblock" | "simple-block";
+	const blocked_by = formData.get("blocked_by") as "ADMIN" | "PARENT";
+
+	try {
+		const session = await getServerSession(authOptions);
+		if (!session?.apiToken) {
+			return {
+				success: false,
+				message: "Authentication required.",
+				fieldErrors: {},
+				payload: formData
+			};
+		}
+
+		// Validation only for admin block with reason
+		if (action === "block" && session?.user?.is_superuser && (!reason_for_blocking || reason_for_blocking.trim().length < 5)) {
+			return {
+				success: false,
+				message: "Reason for blocking is required and must be at least 5 characters.",
+				fieldErrors: {
+					reason_for_blocking: ["Reason is required and must be at least 5 characters."]
+				},
+				payload: formData
+			};
+		}
+
+		const isBlocking = action === "block" || action === "simple-block";
+
+		const response = await fetch(
+			`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/block/`,
+			{
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/json",
+					Authorization: `Token ${session.apiToken}`,
+				},
+				body: JSON.stringify({
+					blocked: isBlocking,
+					reason_for_blocking: session?.user?.is_superuser
+						? reason_for_blocking || (action === "simple-block" ? "Blocked by admin" : "")
+						: isBlocking ? "Blocked by parent" : "",
+					blocked_by: session?.user?.is_superuser ? blocked_by : "PARENT",
+				}),
 			},
-			body: JSON.stringify({
-				blocked: true,
-				reason_for_blocking: session?.user?.is_superuser
-					? reason_for_blocking
-					: "Blocked by parent",
-				blocked_by: session?.user?.is_superuser ? "ADMIN" : "PARENT",
-			}),
-		},
-	);
-	return handleApiResponse<Device>(response, "blockDevice");
-}
+		);
+
+		const result = await handleApiResponse<Device>(response, "blockDeviceAction");
+
+		revalidatePath("/devices");
+		revalidatePath("/parental-control");
+
+		return {
+			success: true,
+			message: isBlocking ? "Device blocked successfully!" : "Device unblocked successfully!",
+			fieldErrors: {},
+			payload: formData
+		};
+
+	} catch (error: unknown) {
+		console.error("Block Device Action Error:", error);
+		return {
+			success: false,
+			message: (error as ApiError).message || "An unexpected error occurred.",
+			fieldErrors: {},
+			payload: formData
+		};
+	}
+}