- app 
  - (dashboard)
    - dashboard
      @teacher
        - page.tsx
      @student
        - page.tsx
      layout.tsx
      page.tsx

// layout.tsx
import { redirect } from "next/navigation";
import { Suspense } from "react";
import FooterInfo from "~/app/_components/footer-info";
import MaxWidthWrapper from "~/app/_components/max-width-wrapper";
import LoadingSVG from "~/components/ui/loading-svg";
import { validateRequest } from "~/lib/auth";
import { TanstackProvider } from "~/providers/TanstackProvider";
import Navbar from "./_components/navbar";

export const dynamic = "force-dynamic";

export default async function DashboardLayout({
  modal,
  admin,
  contractor,
  customer,
  common,
}: {
  modal: React.ReactNode;
  admin: React.ReactNode;
  contractor: React.ReactNode;
  customer: React.ReactNode;
  common: React.ReactNode;
}) {
  const { user } = await validateRequest();

  // If no user, redirect to login
  if (!user) {
    return redirect("/login");
  }

  return (
    <TanstackProvider>
      <div className="grid h-full w-full grid-rows-[auto_1fr]">
        <Navbar />
        <main className="flex h-full flex-col overflow-y-auto pt-4">
          <div className="flex grow pb-8">
            <MaxWidthWrapper className="space-y-4">
              <Suspense fallback={<LoadingSVG size={64} />}>
                {user.role === "admin" && admin}
                {user.role === "contractor" && contractor}
                {user.role === "customer" && customer}
                {common}
              </Suspense>
            </MaxWidthWrapper>
          </div>
          <FooterInfo />
        </main>
        <Suspense fallback={<LoadingSVG size={64} />}>{modal}</Suspense>
      </div>
    </TanstackProvider>
  );
}

    {user.role === "admin" && admin}
    {user.role === "contractor" && contractor}
    {user.role === "customer" && customer}
    {common}