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)/users/page.tsx

@@ -2,8 +2,28 @@ import Filter from "@/components/filter";
 import Search from "@/components/search";
 import { UsersTable } from "@/components/user-table";
 import { AdminAuthGuard } from "@/lib/auth-guard";
-import { CheckCheck, Hourglass, Minus } from "lucide-react";
+import {
+	AArrowDown,
+	AArrowUp,
+	CheckCheck,
+	Hourglass,
+	Minus,
+} 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 AdminUsers({
 	searchParams,
 }: {
@@ -21,35 +41,39 @@ export default async function AdminUsers({
 			<h3 className="border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
 				Users
 			</h3>
-			<div
-				id="user-filters"
-				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
-			>
-				<div className="flex flex-col sm:flex-row flex-wrap items-start justify-start gap-2">
-					<Search />
-					<Filter
-						options={[
-							{
-								value: "all",
-								label: "ALL",
-								icon: <Minus size={14} />,
-							},
-							{
-								value: "unverified",
-								label: "Unverfieid",
-								icon: <CheckCheck size={14} />,
-							},
-							{
-								value: "verified",
-								label: "Verified",
-								icon: <Hourglass size={14} />,
-							},
-						]}
-						defaultOption="all"
-						queryParamKey="status"
-					/>
-				</div>
 
+			<div
+				id="user-table-filters"
+				className=" pb-4 gap-4 flex items-center justify-start"
+			>
+				<Search />
+				<Filter
+					options={[
+						{
+							value: "all",
+							label: "ALL",
+							icon: <Minus size={14} />,
+						},
+						{
+							value: "unverified",
+							label: "Unverfieid",
+							icon: <CheckCheck size={14} />,
+						},
+						{
+							value: "verified",
+							label: "Verified",
+							icon: <Hourglass size={14} />,
+						},
+					]}
+					defaultOption="all"
+					queryParamKey="status"
+				/>
+
+				<Filter
+					options={sortfilterOptions}
+					defaultOption="asc"
+					queryParamKey="sortBy"
+				/>
 			</div>
 			<Suspense fallback={"loading...."}>
 				<UsersTable searchParams={searchParams} />