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.

app/(dashboard)/agreements/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Agreements() {
+  return (
+    <div>Agreements</div>
+  )
+}

app/(dashboard)/devices/page.tsx

@@ -1,7 +1,25 @@
 import { DevicesTable } from "@/components/devices-table";
+import Filter from "@/components/filter";
 import Search from "@/components/search";
-import { Button } from "@/components/ui/button";
+import AddDeviceDialogForm from "@/components/user/add-device-dialog";
+import { getCurrentUser } from "@/lib/auth-utils";
+import { AArrowDown, AArrowUp } from "lucide-react";
 import React, { Suspense } from "react";
+
+const sortfilterOptions = [
+	{
+		value: 'asc',
+		label: 'Ascending',
+		icon: <AArrowUp size={16} />,
+	},
+	{
+		value: 'desc',
+		label: 'Descending',
+		icon: <AArrowDown size={16} />,
+	},
+]
+
+
 export default async function Devices({
 	searchParams,
 }: {
@@ -12,14 +30,15 @@ export default async function Devices({
 		status: string;
 	}>;
 }) {
-
+	const query = (await searchParams)?.query || "";
+	const user = await getCurrentUser()
 	return (
 		<div>
 			<div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
 				<h3>
 					My Devices
 				</h3>
-				<Button>Add new device</Button>
+				<AddDeviceDialogForm user_id={user?.id} />
 			</div>
 
 			<div
@@ -27,9 +46,13 @@ export default async function Devices({
 				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
 			>
 				<Search />
-
+				<Filter
+					options={sortfilterOptions}
+					defaultOption="asc"
+					queryParamKey="sortBy"
+				/>
 			</div>
-			<Suspense fallback={"loading...."}>
+			<Suspense key={query} fallback={"loading...."}>
 				<DevicesTable searchParams={searchParams} />
 			</Suspense>
 		</div>

app/(dashboard)/user-devices/page.tsx

@@ -1,54 +1,9 @@
-import Filter from "@/components/filter";
-import Search from "@/components/search";
-import { UsersTable } from "@/components/user-table";
-import { CheckCheck, Hourglass, Minus } from "lucide-react";
-import React, { Suspense } from "react";
-export default async function UserDevcies({
-	searchParams,
-}: {
-	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
-	}>;
-}) {
-
+export default async function UserDevcies() {
 	return (
 		<div>
 			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
-				My Devices
+				User Devices
 			</h3>
-			<div
-				id="user-filters"
-				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
-			>
-				<Search />
-				<Filter
-					options={[
-						{
-							value: "all",
-							label: "ALL",
-							icon: <Minus size={14} />,
-						},
-						{
-							value: "unverified",
-							label: "Unverfieid",
-							icon: <CheckCheck size={14} />,
-						},
-						{
-							value: "verified",
-							label: "Verified",
-							icon: <Hourglass size={14} />,
-						},
-					]}
-					defaultOption="all"
-					queryParamKey="status"
-				/>
-			</div>
-			<Suspense fallback={"loading...."}>
-				<UsersTable searchParams={searchParams} />
-			</Suspense>
 		</div>
 	);
 }

app/(dashboard)/users/[userId]/verify/page.tsx

@@ -0,0 +1,68 @@
+import InputReadOnly from '@/components/input-read-only';
+import { Badge } from '@/components/ui/badge';
+import UserRejectDialog from '@/components/user/user-reject-dialog';
+import { UserVerifyDialog } from '@/components/user/user-verify-dialog';
+
+import prisma from '@/lib/db';
+import React from 'react'
+
+export default async function VerifyUserPage({
+  params,
+}: {
+  params: Promise<{
+    userId: string;
+  }>;
+}) {
+  const userId = (await params).userId
+  const dbUser = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  })
+  return (
+    <div>
+      <div className='flex items-center justify-between border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
+        <h3 className="">
+          Verify user
+        </h3>
+        <div className='flex gap-2'>
+          {dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
+          {dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
+          {dbUser?.verified && <Badge variant={"secondary"} className='bg-lime-500'>Verified</Badge>}
+        </div>
+
+      </div>
+      <div className='grid grid-cols-1 md:grid-cols-2 gap-4 items-start justify-start'>
+        <div id="database-information">
+          <h4 className='p-2 rounded font-semibold'>Database Information</h4>
+          <div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
+            <InputReadOnly label="Name" value={dbUser?.name ?? ""} />
+            <InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
+            <InputReadOnly label="Address" value={dbUser?.address ?? ""} />
+            <InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              year: "numeric",
+            })} />
+            <InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
+          </div>
+        </div>
+        <div id="national-information">
+          <h4 className='p-2 rounded font-semibold'>National Information</h4>
+          <div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
+            <InputReadOnly label="Name" value={dbUser?.name ?? ""} />
+            <InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
+            <InputReadOnly label="Address" value={dbUser?.address ?? ""} />
+            <InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              year: "numeric",
+            })} />
+            <InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}

app/(dashboard)/users/page.tsx

@@ -2,8 +2,28 @@ import Filter from "@/components/filter";
 import Search from "@/components/search";
 import { UsersTable } from "@/components/user-table";
 import { AdminAuthGuard } from "@/lib/auth-guard";
-import { CheckCheck, Hourglass, Minus } from "lucide-react";
+import {
+	AArrowDown,
+	AArrowUp,
+	CheckCheck,
+	Hourglass,
+	Minus,
+} from "lucide-react";
 import React, { Suspense } from "react";
+
+const sortfilterOptions = [
+	{
+		value: "asc",
+		label: "Ascending",
+		icon: <AArrowUp size={16} />,
+	},
+	{
+		value: "desc",
+		label: "Descending",
+		icon: <AArrowDown size={16} />,
+	},
+];
+
 export default async function AdminUsers({
 	searchParams,
 }: {
@@ -21,35 +41,39 @@ export default async function AdminUsers({
 			<h3 className="border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
 				Users
 			</h3>
-			<div
-				id="user-filters"
-				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
-			>
-				<div className="flex flex-col sm:flex-row flex-wrap items-start justify-start gap-2">
-					<Search />
-					<Filter
-						options={[
-							{
-								value: "all",
-								label: "ALL",
-								icon: <Minus size={14} />,
-							},
-							{
-								value: "unverified",
-								label: "Unverfieid",
-								icon: <CheckCheck size={14} />,
-							},
-							{
-								value: "verified",
-								label: "Verified",
-								icon: <Hourglass size={14} />,
-							},
-						]}
-						defaultOption="all"
-						queryParamKey="status"
-					/>
-				</div>
 
+			<div
+				id="user-table-filters"
+				className=" pb-4 gap-4 flex items-center justify-start"
+			>
+				<Search />
+				<Filter
+					options={[
+						{
+							value: "all",
+							label: "ALL",
+							icon: <Minus size={14} />,
+						},
+						{
+							value: "unverified",
+							label: "Unverfieid",
+							icon: <CheckCheck size={14} />,
+						},
+						{
+							value: "verified",
+							label: "Verified",
+							icon: <Hourglass size={14} />,
+						},
+					]}
+					defaultOption="all"
+					queryParamKey="status"
+				/>
+
+				<Filter
+					options={sortfilterOptions}
+					defaultOption="asc"
+					queryParamKey="sortBy"
+				/>
 			</div>
 			<Suspense fallback={"loading...."}>
 				<UsersTable searchParams={searchParams} />

components/auth/account-popver.tsx

@@ -6,12 +6,11 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 import { authClient } from "@/lib/auth-client";
-import type { User } from "@prisma/client";
 import { Loader2, User as UserIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
-export function AccountPopover({ user }: { user?: User }) {
+export function AccountPopover() {
   const session = authClient.useSession();
   const [loading, setLoading] = useState(false)
   const router = useRouter()
@@ -36,7 +35,6 @@ export function AccountPopover({ user }: { user?: User }) {
             <p className="text-sm text-muted-foreground">
               {session.data?.user?.phoneNumber}
             </p>
-            <span className="text-xs text-gray-500">{user?.address}</span>
           </div>
           <Button disabled={loading} onClick={async () => {
             setLoading(true)

components/auth/application-layout.tsx

@@ -15,7 +15,6 @@ import {
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { auth } from "@/lib/auth";
-import prisma from "@/lib/db";
 import { headers } from "next/headers";
 import { AccountPopover } from "./account-popver";
 
@@ -25,11 +24,7 @@ export async function ApplicationLayout({
 	const session = await auth.api.getSession({
 		headers: await headers()
 	});
-	const user = await prisma.user.findUnique({
-		where: {
-			id: session?.user?.id,
-		},
-	});
+
 	return (
 		<SidebarProvider>
 			<AppSidebar role={session?.user?.role || "USER"} />
@@ -53,7 +48,7 @@ export async function ApplicationLayout({
 
 					<div className="flex items-center gap-2">
 						<ModeToggle />
-						<AccountPopover user={user || undefined} />
+						<AccountPopover />
 					</div>
 				</header>
 				<div className="p-4">{children}</div>

components/auth/login-form.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 
 import { signin } from "@/actions/auth-actions";
-import { Loader } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useActionState } from "react";
 import { PhoneInput } from "../ui/phone-input";
 
@@ -37,7 +37,7 @@ export default function LoginForm() {
 						disabled={isPending}
 						type="submit"
 					>
-						{isPending ? <Loader className="animate-spin" /> : "Request OTP"}
+						{isPending ? <Loader2 className="animate-spin" /> : "Request OTP"}
 					</Button>
 				</div>
 				{/* <div className="mt-2 text-center text-sm">

components/auth/verify-otp-form.tsx

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth-client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
@@ -75,7 +75,7 @@ export default function VerifyOTPForm({
 					disabled={isPending}
 					type="submit"
 				>
-					{isPending ? <Loader className="animate-spin" /> : "Login"}
+					{isPending ? <Loader2 className="animate-spin" /> : "Login"}
 				</Button>
 			</div>
 			<div className="mb-4 text-center text-sm">

components/devices-table.tsx

@@ -103,8 +103,7 @@ export async function DevicesTable({
 									<TableCell className="font-medium">{device.mac}</TableCell>
 
 									<TableCell>
-										Hi
-										{/* <UserVerifyDialog user={user} /> */}
+										Parental Controls
 									</TableCell>
 								</TableRow>
 							))}

components/input-read-only.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function InputReadOnly({ label, value }: { label: string, value?: string }) {
+  return (
+    <div className="relative rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
+      <label htmlFor="input-33" className="block px-3 pt-2 text-xs font-medium text-foreground">
+        {label}
+      </label>
+      <input
+        id="input-33"
+        className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
+        placeholder={value}
+        disabled
+        value={value}
+        type="text"
+      />
+    </div>
+
+  )
+}

components/search.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Input } from "@/components/ui/input";
-import { Loader } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useRef, useTransition } from "react";
 import { Button } from "./ui/button";
@@ -36,7 +36,7 @@ export default function Search({ disabled }: { disabled?: boolean }) {
 				ref={inputRef}
 				placeholder="Search..."
 				type="text"
-				className="w-full"
+				className="w-fit"
 				name="search"
 				id="search"
 				defaultValue={searchQuery ? searchQuery : ""}
@@ -53,7 +53,7 @@ export default function Search({ disabled }: { disabled?: boolean }) {
 					replace(pathname);
 				}}
 			>
-				{isPending ? <Loader className="animate-spin" /> : "Reset"}
+				{isPending ? <Loader2 className="animate-spin" /> : "Reset"}
 			</Button>
 		</div>
 	);

components/user-table.tsx

@@ -9,9 +9,10 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import prisma from "@/lib/db";
+import Link from "next/link";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
-import { UserVerifyDialog } from "./user/user-verify-dialog";
+import { Button } from "./ui/button";
 
 export async function UsersTable({
 	searchParams,
@@ -43,7 +44,7 @@ export async function UsersTable({
 					},
 				},
 				{
-					house_name: {
+					address: {
 						contains: query || "",
 						mode: "insensitive",
 					},
@@ -57,6 +58,7 @@ export async function UsersTable({
 			],
 			verified: verified === "all" ? undefined : verified === "verified",
 		},
+
 	});
 
 	const totalPages = Math.ceil(totalUsers / 10);
@@ -79,7 +81,7 @@ export async function UsersTable({
 					},
 				},
 				{
-					house_name: {
+					address: {
 						contains: query || "",
 						mode: "insensitive",
 					},
@@ -92,6 +94,7 @@ export async function UsersTable({
 				},
 			],
 			verified: verified === "all" ? undefined : verified === "verified",
+
 		},
 		include: {
 			island: true,
@@ -100,7 +103,7 @@ export async function UsersTable({
 		skip: offset,
 		take: limit,
 		orderBy: {
-			name: `${sortBy}` as "asc" | "desc",
+			id: `${sortBy}` as "asc" | "desc",
 		},
 	});
 
@@ -146,7 +149,7 @@ export async function UsersTable({
 									<TableCell className="font-medium">{user.id_card}</TableCell>
 									<TableCell>{user.atoll?.name}</TableCell>
 									<TableCell>{user.island?.name}</TableCell>
-									<TableCell>{user.house_name}</TableCell>
+									<TableCell>{user.address}</TableCell>
 
 									<TableCell>
 										{user.verified ? (
@@ -175,7 +178,11 @@ export async function UsersTable({
 
 									<TableCell>{user.phoneNumber}</TableCell>
 									<TableCell>
-										<UserVerifyDialog user={user} />
+										<Link href={`/users/${user.id}/verify`}>
+											<Button>
+												Details
+											</Button>
+										</Link>
 									</TableCell>
 								</TableRow>
 							))}

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>
+  );
+}

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>
+	)
+}

components/user/user-verify-dialog.tsx

@@ -35,7 +35,18 @@ export function UserVerifyDialog({ user }: { user: User }) {
 				<AlertDialogHeader>
 					<AlertDialogTitle>Are you sure?</AlertDialogTitle>
 					<AlertDialogDescription>
-						Are you sure you want to verify <strong> {user.name}</strong>?
+						Are you sure you want to verify the following user?
+						<span className="inline-block my-4">
+							<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>
+						</span>
 					</AlertDialogDescription>
 				</AlertDialogHeader>
 				<AlertDialogFooter>