Add Agreements page, enhance Devices and Users components with sorting and filtering options, and implement user verification dialogs

- Introduced a new Agreements page for managing agreements in the dashboard.
- Enhanced the Devices page by adding sorting and filtering options for better device management.
- Updated the Users page to include sorting functionality and improved layout.
- Implemented user verification and rejection dialogs for better user management.
- Added InputReadOnly component for displaying user information in a read-only format.
- Refactored search component to improve usability and visual consistency.

components/user/add-device-dialog.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { AddDevice } from "@/actions/user-actions";
+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 { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2, Plus } from "lucide-react";
+import { useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
+
+  const formSchema = z.object({
+    name: z.string().min(2, { message: "Name is required." }),
+    mac_address: z
+      .string()
+      .min(2, { message: "MAC Address is required." })
+      .regex(
+        /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
+        "Please enter a valid MAC address",
+      ),
+  });
+
+  const [disabled, setDisabled] = useState(false);
+  const [open, setOpen] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  if (!user_id) {
+    return null
+  }
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
+    console.log(data);
+    setDisabled(true)
+    toast.promise(AddDevice({ mac_address: data.mac_address, name: data.name, user_id: user_id }), {
+      loading: 'Adding new device...',
+      success: () => {
+        setDisabled(false)
+        setOpen((prev) => !prev)
+        return 'Device successfully added!'
+      },
+      error: (error) => {
+        setDisabled(false)
+        return error || 'Something went wrong.'
+      },
+    })
+  };
+
+
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          className="gap-2 items-center"
+          disabled={disabled}
+          variant="default"
+        >
+          Add Device
+          <Plus size={16} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>New Device</DialogTitle>
+          <DialogDescription>
+            To add a new device, enter the device name and mac address below. Click save when you are done.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="grid gap-4 py-4">
+            <div className="flex flex-col gap-2">
+              <div>
+                <Label htmlFor="device_name" className="text-right">
+                  Device Name
+                </Label>
+                <Input
+                  placeholder="eg: Iphone X"
+                  type="text"
+                  {...register("name")}
+                  id="device_name"
+                  className="col-span-3"
+                />
+                <span className="text-red-500 text-sm">
+                  {errors.name?.message}
+                </span>
+              </div>
+
+              <div>
+                <Label htmlFor="address" className="text-right">
+                  Mac Address
+                </Label>
+                <Input
+                  placeholder="Mac address of your device"
+                  {...register("mac_address")}
+                  id="mac_address"
+                  className="col-span-3"
+                />
+                <span className="text-red-500 text-sm">
+                  {errors.mac_address?.message}
+                </span>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button disabled={disabled} type="submit">
+              {disabled ? <Loader2 className="animate-spin" /> : "Save"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}