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'} />}

app/home/(user)/(dashboard)/booking/page.tsx

@@ -1,5 +1,6 @@
 import { use } from 'react';
 
+import { AppBreadcrumbs } from '@kit/ui/makerkit/app-breadcrumbs';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
@@ -22,15 +23,27 @@ export const generateMetadata = async () => {
 
 function BookingPage() {
   const { heroCategories, ttoCategories } = use(loadTtoServices());
-  console.log('ttoCategories', heroCategories, ttoCategories);
+
+  if (!heroCategories.length && !ttoCategories.length) {
+    return (
+      <>
+        <AppBreadcrumbs />
+        <h3 className="mt-8">
+          <Trans i18nKey="booking:noCategories" />
+        </h3>
+      </>
+    );
+  }
+
   return (
     <>
+      <AppBreadcrumbs />
       <HomeLayoutPageHeader
         title={<Trans i18nKey={'booking:title'} />}
         description={<Trans i18nKey={'booking:description'} />}
       />
 
-      <PageBody>
+      <PageBody className="space-y-2">
         <OrderCards heroCategories={heroCategories} />
         <ServiceCategories categories={ttoCategories} />
       </PageBody>