Add Super Admin layout and update subscription functionalities

The key changes made in this code include the addition of a Super Admin layout. Also, subscription functionalities are updated and optimized. This ensures read, write permissions are specific to the relevant user and a helper function has been implemented to check if an account has an active subscription. Furthermore, UI enhancements have been made to the accounts table in the administration section. The seed data has also been modified.

apps/web/app/admin/_components/admin-sidebar.tsx

@@ -28,7 +28,7 @@ export async function AdminSidebar() {
         <AppLogo href={'/admin'} />
       </SidebarContent>
 
-      <SidebarContent>
+      <SidebarContent className={'mt-5'}>
         <SidebarGroup label={'Admin'} collapsible={false}>
           <SidebarItem end path={'/admin'} Icon={<Home className={'h-4'} />}>
             Home

apps/web/app/admin/_components/mobile-navigation.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+
+import { Menu } from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+
+export function AdminMobileNavigation() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-8 w-8'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent>
+        <DropdownMenuItem>
+          <Link href={'/admin'}>Home</Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <Link href={'/admin/accounts'}>Accounts</Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/web/app/admin/accounts/page.tsx

@@ -3,7 +3,6 @@ import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
 import { AdminAccountsTable } from '@kit/admin/components/admin-accounts-table';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
-import { PageBody, PageHeader } from '@kit/ui/page';
 
 interface SearchParams {
   page?: string;
@@ -25,33 +24,26 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
 
   return (
     <>
-      <PageHeader
-        title={'Accounts'}
-        description={`Manage your accounts, view their details, and more.`}
-      />
-
-      <PageBody>
-        <ServerDataLoader
-          table={'accounts'}
-          client={client}
-          page={page}
-          where={filters}
-        >
-          {({ data, page, pageSize, pageCount }) => {
-            return (
-              <AdminAccountsTable
-                page={page}
-                pageSize={pageSize}
-                pageCount={pageCount}
-                data={data}
-                filters={{
-                  type: searchParams.account_type ?? 'all',
-                }}
-              />
-            );
-          }}
-        </ServerDataLoader>
-      </PageBody>
+      <ServerDataLoader
+        table={'accounts'}
+        client={client}
+        page={page}
+        where={filters}
+      >
+        {({ data, page, pageSize, pageCount }) => {
+          return (
+            <AdminAccountsTable
+              page={page}
+              pageSize={pageSize}
+              pageCount={pageCount}
+              data={data}
+              filters={{
+                type: searchParams.account_type ?? 'all',
+              }}
+            />
+          );
+        }}
+      </ServerDataLoader>
     </>
   );
 }

apps/web/app/admin/layout.tsx

@@ -1,11 +1,22 @@
-import { Page } from '@kit/ui/page';
+import { Page, PageBody, PageHeader } from '@kit/ui/page';
 
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
+import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
 
 export const metadata = {
-  title: `Admin`,
+  title: `Super Admin`,
 };
 
 export default function AdminLayout(props: React.PropsWithChildren) {
-  return <Page sidebar={<AdminSidebar />}>{props.children}</Page>;
+  return (
+    <Page sidebar={<AdminSidebar />}>
+      <PageHeader
+        mobileNavigation={<AdminMobileNavigation />}
+        title={'Super Admin'}
+        description={`Your SaaS stats at a glance`}
+      />
+
+      <PageBody>{props.children}</PageBody>
+    </Page>
+  );
 }

apps/web/app/admin/page.tsx

@@ -1,15 +1,10 @@
 import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
-import { PageBody, PageHeader } from '@kit/ui/page';
 
 function AdminPage() {
   return (
     <>
-      <PageHeader title={'Admin'} description={`Your SaaS stats at a glance`} />
-
-      <PageBody>
-        <AdminDashboard />
-      </PageBody>
+      <AdminDashboard />
     </>
   );
 }