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