From 6ab455869132a1e32ae9c714cbbd4aa82bf40d6a Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 13 May 2024 19:27:25 +0700
Subject: [PATCH] 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          | 48 +++++++++++--------
 .../src/components/admin-accounts-table.tsx   |  2 -
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/apps/web/app/admin/accounts/page.tsx b/apps/web/app/admin/accounts/page.tsx
index 99e2aa050..bc010582f 100644
--- a/apps/web/app/admin/accounts/page.tsx
+++ b/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
-        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>
+      <PageHeader
+        title={'Accounts'}
+        description={`Below is the list of all the accounts in your application.`}
+      />
+
+      <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>
     </>
   );
 }
diff --git a/packages/features/admin/src/components/admin-accounts-table.tsx b/packages/features/admin/src/components/admin-accounts-table.tsx
index c10c2798a..d0af34f84 100644
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/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