MED-104: create booking view with categories

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>