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/user-reject-dialog.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { Rejectuser } from "@/actions/user-actions"
+import { Button } from "@/components/ui/button"
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	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 { User } from "@prisma/client"
+import { UserX } 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"
+
+
+
+const validationSchema = z.object({
+	reason: z.string().min(5, { message: "Reason is required" }),
+})
+
+export default function UserRejectDialog({ user }: { user: User }) {
+	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(Rejectuser({
+			userId: user.id,
+			reason: data.reason,
+		}), {
+			loading: "Rejecting...",
+			success: () => {
+				setDisabled(false)
+				setOpen((prev) => !prev)
+				return "Rejected!"
+			},
+			error: (error) => {
+				setDisabled(false)
+				return error || "Something went wrong"
+			},
+		})
+		setDisabled(false)
+
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button disabled={disabled} variant="destructive">
+					<UserX />
+					Reject
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Are you sure you want to {" "}
+						<span className="text-red-500">reject</span>{" "}
+						this user?</DialogTitle>
+					<DialogDescription className="py-2">
+						<li>Name: {user.name}</li>
+						<li>ID Card: {user.id_card}</li>
+						<li>Address: {user.address}</li>
+						<li>DOB: {new Date(user.dob ?? "").toLocaleDateString("en-US", {
+							month: "short",
+							day: "2-digit",
+							year: "numeric",
+						})}
+						</li>
+						<li>Phone Number: {user.phoneNumber}</li>
+					</DialogDescription>
+				</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">
+								Rejection details
+							</Label>
+							<Textarea rows={10} {...register("reason")} id="reason" className={cn("col-span-5", errors.reason && "ring-2 ring-red-500")} />
+							<span className="text-sm text-red-500">
+								{errors.reason?.message}
+							</span>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button variant={"destructive"} disabled={disabled} type="submit">
+							Reject
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	)
+}