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