Enhance device management and user experience features

- Updated `package.json` to include the latest version of `@radix-ui/react-separator` and added `moment` for date handling.
- Modified `blockDevice` function in `omada-actions.ts` to include a `blockedBy` parameter, allowing differentiation between admin and parent actions.
- Refactored `payment.ts` to include expiry date handling for devices during payment processing.
- Improved `DevicesTable` and `ClickableRow` components to support admin functionalities and enhance device interaction.
- Updated `BlockDeviceDialog` to accept an `admin` prop, allowing for tailored blocking actions based on user role.
- Enhanced UI components for better consistency and responsiveness across the dashboard.

These changes improve the overall functionality and maintainability of the application, providing a better user experience in device management.

components/block-device-dialog.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import { blockDevice } from "@/actions/omada-actions"
-import { Button } from "@/components/ui/button"
+import { blockDevice } from "@/actions/omada-actions";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -9,127 +9,174 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
-import { cn } from "@/lib/utils"
-import { zodResolver } from "@hookform/resolvers/zod"
-import type { Device, } from "@prisma/client"
-import { OctagonX } from "lucide-react"
-import { useState } from "react"
-import { type SubmitHandler, useForm } from "react-hook-form"
-import { toast } from "sonner"
-import { z } from "zod"
-import { Textarea } from "./ui/textarea"
-import { TextShimmer } from "./ui/text-shimmer"
-
-
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Device } from "@prisma/client";
+import { OctagonX } from "lucide-react";
+import { useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+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 default function BlockDeviceDialog({ device, type }: { device: Device, type: "block" | "unblock" }) {
-  const [disabled, setDisabled] = useState(false)
-  const [open, setOpen] = useState(false)
+export default function BlockDeviceDialog({
+  device,
+  type,
+  admin,
+}: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
+  const [disabled, setDisabled] = useState(false);
+  const [open, setOpen] = useState(false);
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<z.infer<typeof validationSchema>>({
     resolver: zodResolver(validationSchema),
-  })
+  });
 
   const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
-    setDisabled(true)
-    console.log(data)
-    toast.promise(blockDevice({
-      macAddress: device.mac,
-      type: type,
-      reason: data.reasonForBlocking,
-      // reason: data.reasonForBlocking,
-    }), {
-      loading: "Blocking...",
-      success: () => {
-        setDisabled(false)
-        setOpen((prev) => !prev)
-        return "Blocked!"
+    setDisabled(true);
+    console.log(data);
+    toast.promise(
+      blockDevice({
+        macAddress: device.mac,
+        type: type,
+        reason: data.reasonForBlocking,
+        blockedBy: "ADMIN",
+        // reason: data.reasonForBlocking,
+      }),
+      {
+        loading: "Blocking...",
+        success: () => {
+          setDisabled(false);
+          setOpen((prev) => !prev);
+          return "Blocked!";
+        },
+        error: (error) => {
+          setDisabled(false);
+          return error || "Something went wrong";
+        },
       },
-      error: (error) => {
-        setDisabled(false)
-        return error || "Something went wrong"
-      },
-    })
-    setDisabled(false)
-
-  }
+    );
+    setDisabled(false);
+  };
 
   return (
     <div>
       {device.blocked ? (
-        <Button onClick={
-          () => {
+        <Button
+          onClick={() => {
             setDisabled(true);
-            toast.promise(blockDevice({
-              macAddress: device.mac,
-              type: "unblock",
-              reason: '',
-            }), {
-              loading: "unblockinig...",
-              success: () => {
-                setDisabled(false);
-                return "Unblocked!";
+            toast.promise(
+              blockDevice({
+                macAddress: device.mac,
+                type: "unblock",
+                reason: "",
+              }),
+              {
+                loading: "unblockinig...",
+                success: () => {
+                  setDisabled(false);
+                  return "Unblocked!";
+                },
+                error: () => {
+                  setDisabled(false);
+                  return "Something went wrong";
+                },
               },
-              error: () => {
-                setDisabled(false);
-                return "Something went wrong";
-              },
-            })
-          }
-        }>
-          {disabled ? (
-            <TextShimmer>
-              Unblocking
-            </TextShimmer>
-          ) : "Unblock"}
+            );
+          }}
+        >
+
+          {disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
         </Button>
-
       ) : (
-
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild>
-            <Button disabled={disabled} variant="destructive">
+        <>
+          {!admin ? (
+            <Button
+              variant={"destructive"}
+              onClick={() => {
+                setDisabled(true);
+                toast.promise(
+                  blockDevice({
+                    macAddress: device.mac,
+                    type: "block",
+                    reason: "",
+                    blockedBy: "PARENT",
+                  }),
+                  {
+                    loading: "blocking...",
+                    success: () => {
+                      setDisabled(false);
+                      return "blocked!";
+                    },
+                    error: () => {
+                      setDisabled(false);
+                      return "Something went wrong";
+                    },
+                  },
+                );
+              }}
+            >
               <OctagonX />
-              Block
+              {disabled ? <TextShimmer>Blocking</TextShimmer> : "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">
+          ) : (
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogTrigger asChild>
+                <Button disabled={disabled} variant="destructive">
+                  <OctagonX />
                   Block
                 </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
+              </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>
-
-  )
-}
+  );
+}