sarlink-portal/app/(dashboard)/parental-control/page.tsx

import { Suspense } from "react";
import DevicesTableSkeleton from "@/components/device-table-skeleton";
import { DevicesTable } from "@/components/devices-table";
import DynamicFilter from "@/components/generic-filter";

export default async function ParentalControl({
	searchParams,
}: {
	searchParams: Promise<{
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	const parentalControlFilters = {
		is_active: "true",
		has_a_pending_payment: "false",
	};

	return (
		<div>
			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
				<h3 className="text-sarLinkOrange text-2xl">Parental Control</h3>
			</div>

			<div
				id="user-filters"
				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<DynamicFilter
					description="Filter devices by name, MAC address, or vendor."
					title="Device Filter"
					inputs={[
						{
							name: "name",
							label: "Device Name",
							type: "string",
							placeholder: "Enter device name",
						},
						{
							name: "mac",
							label: "MAC Address",
							type: "string",
							placeholder: "Enter MAC address",
						},
						{
							name: "vendor",
							label: "Vendor",
							type: "string",
							placeholder: "Enter vendor name",
						},
					]}
				/>{" "}
			</div>
			<Suspense
				key={(await searchParams).page}
				fallback={
					<DevicesTableSkeleton
						headers={["Device Name", "Mac Address", "Vendor", "#"]}
						length={10}
					/>
				}
			>
				<DevicesTable
					parentalControl={true}
					searchParams={searchParams}
					additionalFilters={parentalControlFilters}
				/>
			</Suspense>
		</div>
	);
}