Mobile booking view

apps/frontend/src/features/booking/booking.tsx

@@ -1,8 +1,10 @@
+import { useIsMobile } from '@/hooks/use-mobile';
 import type { ComplexWithRole } from '@repo/api-contract';
 import { BookingProvider } from './booking-provider';
 import { BookingCreateDialog } from './components/booking-create-dialog';
 import { BookingDaySummary, BookingQuickActions } from './components/booking-day-summary';
 import { BookingHeader } from './components/booking-header';
+import { BookingMobile } from './components/booking-mobile';
 import { BookingTimeline } from './components/booking-timeline';
 import { BookingToolbar } from './components/booking-toolbar';
 import { BookingToolsDialog } from './components/booking-tools-dialog';
@@ -12,17 +14,23 @@ interface BookingProps {
 }
 
 export function Booking({ complex }: BookingProps) {
+  const isMobile = useIsMobile();
+
   return (
     <BookingProvider complex={complex}>
-      <div className="flex flex-col gap-5">
-        <BookingHeader />
-        <BookingToolbar />
-        <BookingTimeline />
-        <div className="grid gap-5 xl:grid-cols-4">
-          <BookingDaySummary />
-          <BookingQuickActions />
+      {isMobile ? (
+        <BookingMobile />
+      ) : (
+        <div className="flex flex-col gap-5">
+          <BookingHeader />
+          <BookingToolbar />
+          <BookingTimeline />
+          <div className="grid gap-5 xl:grid-cols-4">
+            <BookingDaySummary />
+            <BookingQuickActions />
+          </div>
         </div>
-      </div>
+      )}
       <BookingCreateDialog />
       <BookingToolsDialog />
     </BookingProvider>