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/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>
 	);