Enhance device management and user experience features

- Updated `package.json` to include the latest version of `@radix-ui/react-separator` and added `moment` for date handling.
- Modified `blockDevice` function in `omada-actions.ts` to include a `blockedBy` parameter, allowing differentiation between admin and parent actions.
- Refactored `payment.ts` to include expiry date handling for devices during payment processing.
- Improved `DevicesTable` and `ClickableRow` components to support admin functionalities and enhance device interaction.
- Updated `BlockDeviceDialog` to accept an `admin` prop, allowing for tailored blocking actions based on user role.
- Enhanced UI components for better consistency and responsiveness across the dashboard.

These changes improve the overall functionality and maintainability of the application, providing a better user experience in device management.

app/(dashboard)/user-devices/page.tsx

@@ -1,4 +1,21 @@
-export default async function UserDevcies() {
+import { DevicesTable } from "@/components/devices-table";
+import Search from "@/components/search";
+import { Suspense } from "react";
+
+
+
+
+export default async function UserDevices({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
+	const query = (await searchParams)?.query || "";
 	return (
 		<div>
 			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -6,6 +23,17 @@ export default async function UserDevcies() {
 					User Devices
 				</h3>
 			</div>
+
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				<Search />
+
+			</div>
+			<Suspense key={query} fallback={"loading...."}>
+				<DevicesTable parentalControl={true} searchParams={searchParams} />
+			</Suspense>
 		</div>
 	);
 }