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)