WIP feat(admin-devices): enhance device management from admin with dynamic filters and improved blocking functionality

components/block-device-dialog.tsx

@@ -1,5 +1,12 @@
 "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 { toast } from "sonner";
+import { z } from "zod";
 import { blockDevice as BlockDeviceFromOmada } from "@/actions/omada-actions";
 import { Button } from "@/components/ui/button";
 import {
@@ -14,13 +21,6 @@ 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 { TextShimmer } from "./ui/text-shimmer";
 import { Textarea } from "./ui/textarea";
 
@@ -44,7 +44,7 @@ export default function BlockDeviceDialog({
 
 	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
 		setDisabled(true);
-		console.log(data);
+		console.log("data in block device dialog", data);
 		toast.promise(
 			blockDevice({
 				deviceId: String(device.id),
@@ -59,8 +59,9 @@ export default function BlockDeviceDialog({
 					return "Blocked!";
 				},
 				error: (error) => {
+					console.error("Error blocking device:", error);
 					setDisabled(false);
-					return error || "Something went wrong";
+					return error.message || "Something went wrong";
 				},
 			},
 		);
@@ -74,10 +75,10 @@ export default function BlockDeviceDialog({
 					onClick={() => {
 						setDisabled(true);
 						toast.promise(
-							BlockDeviceFromOmada({
-								macAddress: device.mac,
-								type: "unblock",
-								reason: "",
+							blockDevice({
+								blocked_by: "ADMIN",
+								deviceId: String(device.id),
+								reason_for_blocking: "",
 							}),
 							{
 								loading: "unblockinig...",
@@ -85,9 +86,9 @@ export default function BlockDeviceDialog({
 									setDisabled(false);
 									return "Unblocked!";
 								},
-								error: () => {
+								error: (error) => {
 									setDisabled(false);
-									return "Something went wrong";
+									return error.message || "Something went wrong";
 								},
 							},
 						);
@@ -96,84 +97,53 @@ export default function BlockDeviceDialog({
 					{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>
+					<Dialog open={open} onOpenChange={setOpen}>
+						<DialogTrigger asChild>
+							<Button disabled={disabled} variant="destructive">
+								<OctagonX />
+								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>
-									<DialogFooter>
-										<Button
-											variant={"destructive"}
-											disabled={disabled}
-											type="submit"
-										>
-											Block
-										</Button>
-									</DialogFooter>
-								</form>
-							</DialogContent>
-						</Dialog>
-					)}
-				</>
+								</div>
+								<DialogFooter>
+									<Button
+										variant={"destructive"}
+										disabled={disabled}
+										type="submit"
+									>
+										Block
+									</Button>
+								</DialogFooter>
+							</form>
+						</DialogContent>
+					</Dialog>
+				</div>
 			)}
 		</div>
 	);