front-AT/app/(private)/Monitor/page.tsx

import Toggle from "@/app/Components/Global/Toggle/Toggle";
import MachineTable from "./MachineTable";
import styles from "./Page.module.css";
import MachineTableActive from "./MachineTableActive";
import DSC from "./DSC";
import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable";
import TableTable from "./TableTable";

export default async function Page(props: {
  searchParams?: Promise<{ numAcount: string; key: string }>;
}) {
  const params = await props.searchParams;
  const numAcount = params?.numAcount ?? null;
  const key = params?.key ?? "Equipos";

  return (
    <section className="containerSection">
      <h2 className="title">MONITOR</h2>

      <div className={styles.actions}>
        <button className={styles.resetButton}>Actualizar información</button>
      </div>
      <ToggleTable
        defaultView={key}
        options={[
          {
            key: "Equipos",
            label: "Equipos",
            content: (
              <>
                <MachineTableActive />
              </>
            ),
          },
          {
            key: "Mesas",
            label: "Mesas",
            content: (
              <>
                <TableTable />
              </>
            ),
          },
        ]}
      />
    </section>
  );
}