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

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

README.md

@@ -9,6 +9,7 @@ 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
 
+
  ### Payments1
  - [x] Show payments table
  - [x] Add all the filters for payment table (mobile responsive)
@@ -34,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

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,4 +1,7 @@
+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";
 
@@ -13,6 +16,8 @@ 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">

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/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,12 +1,9 @@
 "use client";
 
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { OctagonX } from "lucide-react";
-import { useState } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
+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 { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,131 +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 { 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 in block device dialog", 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) => {
-					console.error("Error blocking device:", error);
-					setDisabled(false);
-					return error.message || "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 && !admin ? (
-				<Button
-					onClick={() => {
-						setDisabled(true);
-						toast.promise(
-							blockDevice({
-								blocked_by: "ADMIN",
-								deviceId: String(device.id),
-								reason_for_blocking: "",
-							}),
-							{
-								loading: "unblockinig...",
-								success: () => {
-									setDisabled(false);
-									return "Unblocked!";
-								},
-								error: (error) => {
-									setDisabled(false);
-									return error.message || "Something went wrong";
-								},
-							},
-						);
-					}}
-				>
-					{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
-				</Button>
-			) : (
-				<div>
-					<Dialog open={open} onOpenChange={setOpen}>
-						<DialogTrigger asChild>
-							<Button disabled={disabled} variant="destructive">
-								<OctagonX />
-								Block
+			<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>
-						</DialogTrigger>
-						<DialogContent className="sm:max-w-[425px]">
-							<DialogHeader>
-								<DialogTitle className="text-muted-foreground">
-									Reason for blocking this device 🚫
-								</DialogTitle>
-							</DialogHeader>
-							<form onSubmit={handleSubmit(onSubmit)}>
-								<div className="grid gap-2 py-2">
-									<div className="flex flex-col items-start gap-4">
-										<Label htmlFor="reason" className="text-right text-muted-foreground">
-											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>
-				</div>
-			)}
+						</DialogFooter>
+					</form>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }

components/clickable-row.tsx

@@ -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

@@ -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/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/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

queries/devices.ts

@@ -3,6 +3,7 @@
 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";
@@ -114,33 +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";
-}) {
-	console.log("Blocking device:", deviceId, reason_for_blocking, blocked_by);
-	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
+		};
+	}
 }