MED-104: create booking view with categories

app/home/(user)/(dashboard)/booking/[handle]/page.tsx

@@ -1,13 +1,13 @@
-import { use } from 'react';
+import { HomeLayoutPageHeader } from '@/app/home/(user)/_components/home-page-header';
+import { loadCategory } from '@/app/home/(user)/_lib/server/load-category';
 
+import { AppBreadcrumbs } from '@kit/ui/makerkit/app-breadcrumbs';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { HomeLayoutPageHeader } from '../../../_components/home-page-header';
-
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
   const title = i18n.t('booking:title');
@@ -17,9 +17,17 @@ export const generateMetadata = async () => {
   };
 };
 
-function BookingHandlePage() {
+async function BookingHandlePage({ params }: { params: { handle: string } }) {
+  const handle = await params.handle;
+  const { category } = await loadCategory({ handle });
+
   return (
     <>
+      <AppBreadcrumbs
+        values={{
+          [handle]: category?.name || handle,
+        }}
+      />
       <HomeLayoutPageHeader
         title={<Trans i18nKey={'booking:title'} />}
         description={<Trans i18nKey={'booking:description'} />}