sarlink-portal/app/(dashboard)/devices/page.tsx

import { authOptions } from "@/app/auth";
import { DevicesTable } from "@/components/devices-table";
import Search from "@/components/search";
import AddDeviceDialogForm from "@/components/user/add-device-dialog";
import { getServerSession } from "next-auth";
import React, { Suspense } from "react";
import DevicesTableSkeleton from "./device-table-skeleton";

export default async function Devices({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
	}>;
}) {
	const query = (await searchParams)?.query || "";
	const page = (await searchParams)?.page || 1;
	const session = await getServerSession(authOptions);
	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">
				<h3 className="text-sarLinkOrange text-2xl">My Devices</h3>
				<AddDeviceDialogForm user_id={session?.user?.id} />
			</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 || page} fallback={<DevicesTableSkeleton />}>
				<DevicesTable parentalControl={false} searchParams={searchParams} />
			</Suspense>
		</div>
	);
}