Creating Admin Panel Page

Admin Panel pages are internal web app pages that are only accessible to application administrators. These pages usually require the user to be authenticated and have admin privileges.

All admin panel pages should be children of the layout located at src/app/(dynamic-pages)/(authenticated-pages)/app_admin/layout.tsx. This layout handles checking if the user is authenticated and if they have admin privileges. If the user is not authenticated or does not have admin privileges, they will be redirected to the login page.

Here is an example of how to create an admin panel page:

src/app/(dynamic-pages)/(authenticated-pages)/app_admin/some-route/page.tsx

export default async function YourPageName() {
  // Your page content goes here
  return <div>// Your JSX goes here</div>;
}

Admin panel layout

src/app/(dynamic-pages)/(authenticated-pages)/app_admin/layout.tsx

import { redirect } from 'next/navigation';
import { serverGetLoggedInUser } from '@/utils/server/serverGetLoggedInUser';
import { Suspense } from 'react';
import { ApplicationAdminSidebar } from '../(application-pages)/_sidebar/ApplicationAdminSidebar';
import { getIsAppAdmin } from '@/data/user/user';
import { InternalNavbar } from '@/components/ui/NavigationMenu/InternalNavbar';
import { ApplicationLayoutShell } from '@/components/ApplicationLayoutShell';
import { Alert } from '@/components/ui/Alert';
 
export const revalidate = 0;
 
async function fetchData() {
  const user = await serverGetLoggedInUser();
  const [isUserAppAdmin] = await Promise.all([getIsAppAdmin(user)]);
 
  return { isUserAppAdmin };
}
 
export default async function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  try {
    const { isUserAppAdmin } = await fetchData();
 
    if (!isUserAppAdmin) {
      return redirect('/dashboard');
    }
    return (
      <ApplicationLayoutShell
        sidebar={
          <Suspense fallback={<p>Loading ...</p>}>
            <ApplicationAdminSidebar />
          </Suspense>
        }
      >
        <div className="h-full overflow-y-auto">
          <InternalNavbar>
            <div className="flex items-center justify-start w-full">
              Admin panel
            </div>
          </InternalNavbar>
          <div className="relative flex-1 h-auto mt-8 w-full">
            <div className="pl-6 pr-12 space-y-6 pb-10">
              <Alert
                variant="default"
                className="hover:bg-gray-50 dark:hover:bg-slate-800/50 bg-gray-50 dark:bg-slate-800/50 text-gray-600 dark:text-slate-400"
              >
                All sections of this area are protected and only accessible by
                Application Admins. This is a preview of the admin panel for
                demo purposes.
              </Alert>
              {children}
            </div>
          </div>
        </div>
      </ApplicationLayoutShell>
    );
  } catch (fetchDataError) {
    // report error
    return <p>Error: An error occurred.</p>;
  }
}

Admin panel layout

On this page