Refactor page layout in admin accounts component

The layout of the admin accounts component has been refactored. The "Accounts" heading has been removed from the 'admin-accounts-table.tsx' component and placed as a PageHeader in the 'page.tsx'. A description has also been added to the PageHeader, and the content was wrapped in a PageBody component for better structure and readability.

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

@@ -3,6 +3,7 @@ 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;
@@ -24,26 +25,33 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
 
   return (
     <>
-      <ServerDataLoader
+      <PageHeader
-        table={'accounts'}
+        title={'Accounts'}
-        client={client}
+        description={`Below is the list of all the accounts in your application.`}
-        page={page}
+      />
-        where={filters}
+
-      >
+      <PageBody>
-        {({ data, page, pageSize, pageCount }) => {
+        <ServerDataLoader
-          return (
+          table={'accounts'}
-            <AdminAccountsTable
+          client={client}
-              page={page}
+          page={page}
-              pageSize={pageSize}
+          where={filters}
-              pageCount={pageCount}
+        >
-              data={data}
+          {({ data, page, pageSize, pageCount }) => {
-              filters={{
+            return (
-                type: searchParams.account_type ?? 'all',
+              <AdminAccountsTable
-              }}
+                page={page}
-            />
+                pageSize={pageSize}
-          );
+                pageCount={pageCount}
-        }}
+                data={data}
-      </ServerDataLoader>
+                filters={{
+                  type: searchParams.account_type ?? 'all',
+                }}
+              />
+            );
+          }}
+        </ServerDataLoader>
+      </PageBody>
     </>
   );
 }

packages/features/admin/src/components/admin-accounts-table.tsx

@@ -100,8 +100,6 @@ function AccountsTableFilters(props: {
 
   return (
     <div className={'flex items-center justify-between space-x-4'}>
-      <Heading level={3}>Accounts</Heading>
-
       <div className={'flex space-x-4'}>
         <Form {...form}>
           <form