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/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">