nextjs-cleo-minimarket/app/(dashboard)/master/sub-group-product/page.tsx

import { Suspense } from "react";

import { CariMaster } from "@/app/(dashboard)/master/_components/cari-master";
import { getCurrentUser } from "@/data/auth";
import { listGroupProductOptions } from "@/data/group-product";
import { DaftarSubGroupProduct } from "./_components/daftar-sub-group-product";
import { TambahSubGroupProductButton } from "./_components/tambah-sub-group-product-button";

export default function SubGroupProductPage({
  searchParams,
}: {
  searchParams: Promise<{ search?: string; page?: string }>;
}) {
  return (
    <div className="p-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold">Data Sub Group Product</h1>
        <div className="flex items-center gap-2">
          <Suspense fallback={null}>
            <CariMaster
              basePath="/master/sub-group-product"
              placeholder="Cari sub group product..."
            />
          </Suspense>
          <Suspense fallback={null}>
            <TambahSubGroupProduct />
          </Suspense>
        </div>
      </div>
      <Suspense fallback={<p className="mt-4 text-sm">Memuat...</p>}>
        <DaftarSubGroupProduct searchParams={searchParams} />
      </Suspense>
    </div>
  );
}

async function TambahSubGroupProduct() {
  await getCurrentUser();
  const groupProducts = await listGroupProductOptions();

  return <TambahSubGroupProductButton groupProducts={groupProducts} />;
}