Update admin and marketing layouts, add new admin components

Refined both admin and marketing layouts for a clearer design. Newly added components for the admin page include admin-account-page, admin-members-table and admin-memberships-table. Also included in this update are route renaming, minor text edits and corrections in the code.

apps/web/app/admin/accounts/[account]/page.tsx

@@ -1,7 +0,0 @@
-import { AdminGuard } from '@kit/admin/components/admin-guard';
-
-function AccountPage() {
-  return <div></div>;
-}
-
-export default AdminGuard(AccountPage);

apps/web/app/admin/accounts/[id]/page.tsx

@@ -0,0 +1,45 @@
+import { cache } from 'react';
+
+import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+
+interface Params {
+  params: {
+    id: string;
+  };
+}
+
+export const generateMetadata = async ({ params }: Params) => {
+  const account = await loadAccount(params.id);
+
+  return {
+    title: `Admin | ${account.name}`,
+  };
+};
+
+async function AccountPage({ params }: Params) {
+  const account = await loadAccount(params.id);
+
+  return <AdminAccountPage account={account} />;
+}
+
+export default AdminGuard(AccountPage);
+
+const loadAccount = cache(async (id: string) => {
+  const client = getSupabaseServerComponentClient({
+    admin: true,
+  });
+
+  const { data, error } = await client
+    .from('accounts')
+    .select('*, memberships: accounts_memberships (*)')
+    .eq('id', id)
+    .single();
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+});

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

@@ -1,6 +1,6 @@
 import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
 
-import { AccountsTable } from '@kit/admin/components/accounts-table';
+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';
@@ -8,8 +8,13 @@ import { PageBody, PageHeader } from '@kit/ui/page';
 interface SearchParams {
   page?: string;
   account_type?: 'all' | 'team' | 'personal';
+  query?: string;
 }
 
+export const metadata = {
+  title: `Accounts`,
+};
+
 function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
   const client = getSupabaseServerComponentClient({
     admin: true,
@@ -34,7 +39,7 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
         >
           {({ data, page, pageSize, pageCount }) => {
             return (
-              <AccountsTable
+              <AdminAccountsTable
                 page={page}
                 pageSize={pageSize}
                 pageCount={pageCount}
@@ -54,7 +59,8 @@ function AccountsPage({ searchParams }: { searchParams: SearchParams }) {
 function getFilters(params: SearchParams) {
   const filters: {
     [key: string]: {
-      eq: boolean;
+      eq?: boolean | string;
+      like?: string;
     };
   } = {};
 
@@ -64,6 +70,12 @@ function getFilters(params: SearchParams) {
     };
   }
 
+  if (params.query) {
+    filters.name = {
+      like: `%${params.query}%`,
+    };
+  }
+
   return filters;
 }
 

apps/web/app/admin/layout.tsx

@@ -2,6 +2,10 @@ import { Page } from '@kit/ui/page';
 
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 
+export const metadata = {
+  title: `Admin`,
+};
+
 export default function AdminLayout(props: React.PropsWithChildren) {
   return <Page sidebar={<AdminSidebar />}>{props.children}</Page>;
 }