Merge pull request #6 from i701/feat/block-devices

refactor: enhance parental control features and improve device blocki…

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,7 +1,4 @@
-import { redirect } from "next/navigation";
-import { getServerSession } from "next-auth";
 import { Suspense } from "react";
-import { authOptions } from "@/app/auth";
 import { PaymentsTable } from "@/components/payments-table";
 import Search from "@/components/search";
 
@@ -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">

components/block-device-dialog.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-
+import { DialogDescription } from "@radix-ui/react-dialog";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { OctagonX, ShieldBan } from "lucide-react";
-import { OctagonX } from "lucide-react";
+import { useActionState, useEffect, useState, useTransition } from "react";
-import { useState } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,160 +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({
+export type BlockDeviceFormState = {
-	reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
+	message: string;
-});
+	success: boolean;
+	fieldErrors?: {
+		reason_for_blocking?: string[];
+	};
+	payload?: FormData;
+};
+
+const initialState: BlockDeviceFormState = {
+	message: "",
+	success: false,
+	fieldErrors: {},
+};
 
 export default function BlockDeviceDialog({
 	device,
-	admin,
+	// admin,
-}: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
+	parentalControl = false,
-	const [disabled, setDisabled] = useState(false);
+}: {
+	device: Device;
+	type: "block" | "unblock";
+	admin?: boolean;
+	parentalControl?: boolean;
+}) {
 	const [open, setOpen] = useState(false);
-	const {
+	const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
-		register,
+	const [isTransitioning, startTransition] = useTransition();
-		handleSubmit,
-		formState: { errors },
-	} = useForm<z.infer<typeof validationSchema>>({
-		resolver: zodResolver(validationSchema),
-	});
 
-	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
+	const handleSimpleBlock = () => {
-		setDisabled(true);
+		startTransition(() => {
-		console.log(data);
+			const formData = new FormData();
-		toast.promise(
+			formData.append("deviceId", String(device.id));
-			blockDevice({
+			formData.append("reason_for_blocking", "");
-				deviceId: String(device.id),
+			formData.append("action", "simple-block");
-				reason_for_blocking: data.reasonForBlocking,
+			formData.append("blocked_by", "PARENT");
-				blocked_by: "ADMIN",
+
-			}),
+			formAction(formData);
-			{
+		});
-				loading: "Blocking...",
-				success: () => {
-					setDisabled(false);
-					setOpen((prev) => !prev);
-					return "Blocked!";
-				},
-				error: (error) => {
-					setDisabled(false);
-					return error || "Something went wrong";
-				},
-			},
-		);
-		setDisabled(false);
 	};
 
+	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 ? (
+			<Dialog open={open} onOpenChange={setOpen}>
-				<Button
+				<DialogTrigger asChild>
-					onClick={() => {
+					<Button disabled={isLoading} variant="destructive">
-						setDisabled(true);
+						<OctagonX />
-						toast.promise(
+						Block
-							blockDevice({
+					</Button>
-								blocked_by: "PARENT",
+				</DialogTrigger>
-								deviceId: String(device.id),
+				<DialogContent className="sm:max-w-[425px]">
-								reason_for_blocking: ""
+					<DialogHeader>
-							}),
+						<DialogTitle>Block 🚫</DialogTitle>
-							{
+						<DialogDescription className="text-sm text-muted-foreground">
-								loading: "unblockinig...",
+							Please provide a reason for blocking this device
-								success: () => {
+						</DialogDescription>
-									setDisabled(false);
+					</DialogHeader>
-									return "Unblocked!";
+					<form action={formAction} className="space-y-4">
-								},
+						<input type="hidden" name="deviceId" value={String(device.id)} />
-								error: () => {
+						<input type="hidden" name="action" value="block" />
-									setDisabled(false);
+						<input type="hidden" name="blocked_by" value="ADMIN" />
-									return "Something went wrong";
+
-								},
+						<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>
-					{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
+								<Textarea
-				</Button>
+									rows={10}
-			) : (
+									name="reason_for_blocking"
-				<div>
+									id="reason_for_blocking"
-					{!admin ? (
+									defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
-						<Button
+									className={cn(
-							variant={"destructive"}
+										"col-span-5",
-							onClick={() => {
+										(state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
-								setDisabled(true);
+									)}
-								toast.promise(
+								/>
-									blockDevice({
+								<span className="text-sm text-red-500">
-										blocked_by: "PARENT",
+									{state.fieldErrors?.reason_for_blocking?.[0]}
-										deviceId: String(device.id),
+								</span>
-										reason_for_blocking: "",
+							</div>
-									}),
+						</div>
-									{
+						<DialogFooter>
-										loading: "blocking...",
+							<Button variant="destructive" disabled={isLoading} type="submit">
-										success: () => {
+								{isLoading ? "Blocking..." : "Block"}
-											setDisabled(false);
+							</Button>
-											return "blocked!";
+						</DialogFooter>
-										},
+					</form>
-										error: () => {
+				</DialogContent>
-											setDisabled(false);
+			</Dialog>
-											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>
-					)}
-				</div>
-			)}
 		</div>
 	);
 }

components/clickable-row.tsx

@@ -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,11 +21,14 @@ 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);
@@ -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),
 	);

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({
+export async function blockDeviceAction(
-	deviceId,
+	prevState: BlockDeviceFormState,
-	reason_for_blocking,
+	formData: FormData
-	blocked_by,
+): Promise<BlockDeviceFormState> {
-}: {
+	const deviceId = formData.get("deviceId") as string;
-	deviceId: string;
+	const reason_for_blocking = formData.get("reason_for_blocking") as string;
-	reason_for_blocking: string;
+	const action = formData.get("action") as "block" | "unblock" | "simple-block";
-	blocked_by: "ADMIN" | "PARENT";
+	const blocked_by = formData.get("blocked_by") as "ADMIN" | "PARENT";
-}) {
+
-	console.log("Blocking device:", deviceId, reason_for_blocking, blocked_by);
+	try {
-	const session = await getServerSession(authOptions);
+		const session = await getServerSession(authOptions);
-	const response = await fetch(
+		if (!session?.apiToken) {
-		`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/block/`,
+			return {
-		{
+				success: false,
-			method: "PUT",
+				message: "Authentication required.",
-			headers: {
+				fieldErrors: {},
-				"Content-Type": "application/json",
+				payload: formData
-				Authorization: `Token ${session?.apiToken}`,
+			};
+		}
+
+		// 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
+		const result = await handleApiResponse<Device>(response, "blockDeviceAction");
-					? reason_for_blocking
+
-					: "Blocked by parent",
+		revalidatePath("/devices");
-				blocked_by: session?.user?.is_superuser ? "ADMIN" : "PARENT",
+		revalidatePath("/parental-control");
-			}),
+
-		},
+		return {
-	);
+			success: true,
-	return handleApiResponse<Device>(response, "blockDevice");
+			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
+		};
+	}
+}