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.

app/(dashboard)/devices/page.tsx

@@ -1,7 +1,25 @@
 import { DevicesTable } from "@/components/devices-table";
+import Filter from "@/components/filter";
 import Search from "@/components/search";
-import { Button } from "@/components/ui/button";
+import AddDeviceDialogForm from "@/components/user/add-device-dialog";
+import { getCurrentUser } from "@/lib/auth-utils";
+import { AArrowDown, AArrowUp } from "lucide-react";
 import React, { Suspense } from "react";
+
+const sortfilterOptions = [
+	{
+		value: 'asc',
+		label: 'Ascending',
+		icon: <AArrowUp size={16} />,
+	},
+	{
+		value: 'desc',
+		label: 'Descending',
+		icon: <AArrowDown size={16} />,
+	},
+]
+
+
 export default async function Devices({
 	searchParams,
 }: {
@@ -12,14 +30,15 @@ export default async function Devices({
 		status: string;
 	}>;
 }) {
-
+	const query = (await searchParams)?.query || "";
+	const user = await getCurrentUser()
 	return (
 		<div>
 			<div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
 				<h3>
 					My Devices
 				</h3>
-				<Button>Add new device</Button>
+				<AddDeviceDialogForm user_id={user?.id} />
 			</div>
 
 			<div
@@ -27,9 +46,13 @@ export default async function Devices({
 				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
 			>
 				<Search />
-
+				<Filter
+					options={sortfilterOptions}
+					defaultOption="asc"
+					queryParamKey="sortBy"
+				/>
 			</div>
-			<Suspense fallback={"loading...."}>
+			<Suspense key={query} fallback={"loading...."}>
 				<DevicesTable searchParams={searchParams} />
 			</Suspense>
 		</div>