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,6 +25,12 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
 
   return (
     <>
+      <PageHeader
+        title={'Accounts'}
+        description={`Below is the list of all the accounts in your application.`}
+      />
+
+      <PageBody>
         <ServerDataLoader
           table={'accounts'}
           client={client}
@@ -44,6 +51,7 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
             );
           }}
         </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