From 2bb9237eef91208dd7a84448659adce6b7077820 Mon Sep 17 00:00:00 2001
From: Alex Polo <alex@example.com>
Date: Wed, 29 Oct 2025 11:17:55 +0100
Subject: [PATCH] feat(booking): disable blocked and unavailable dates using
 weekly availability and blocked dates API

---
 src/app/book/page.tsx | 48 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/app/book/page.tsx b/src/app/book/page.tsx
index 74f056e..327330e 100644
--- a/src/app/book/page.tsx
+++ b/src/app/book/page.tsx
@@ -6,8 +6,53 @@ import { Input } from '@/components/ui/input'
 import { sampleData } from '@/config/sample-data'
 import { Package, Menu } from '@/types/models'
 import { useState } from 'react'
+import { useEffect } from 'react'
+
+type Weekly = { id: string; weekday: number; start_time: string; end_time: string }
+
 
 export default function BookingPage() {
+  const [weekly, setWeekly] = useState<Weekly[]>([])
+  const [blockedDates, setBlockedDates] = useState<string[]>([])
+  const [loadingAvail, setLoadingAvail] = useState(true)
+
+  useEffect(() => {
+    let mounted = true
+    Promise.all([
+      fetch('/api/availability/weekly').then(r => r.ok ? r.json() : []),
+      fetch('/api/availability/blocked').then(r => r.ok ? r.json() : [])
+    ]).then(([w, b]) => {
+      if (!mounted) return
+      setWeekly(Array.isArray(w) ? w : [])
+      setBlockedDates(Array.isArray(b) ? b.map((x: any) => x.block_date) : [])
+      setLoadingAvail(false)
+    }).catch(err => {
+      console.error('Error loading availability', err)
+      setLoadingAvail(false)
+    })
+    return () => { mounted = false }
+  }, [])
+
+  // disabled callback for DatePicker
+  const disabled = (date: Date) => {
+    if (loadingAvail) return false
+    const y = date.getFullYear()
+    const m = (date.getMonth() + 1).toString().padStart(2, '0')
+    const d = date.getDate().toString().padStart(2, '0')
+    const iso = `${y}-${m}-${d}`
+
+    // blocked specific dates
+    if (blockedDates.includes(iso)) return true
+
+    // weekday availability (0 = Sunday)
+    const weekday = date.getDay()
+    const availForDay = weekly.filter(w => Number(w.weekday) === Number(weekday))
+    // If no availability defined for this weekday, disable the date
+    if (availForDay.length === 0) return true
+
+    return false
+  }
+
   return (
     <div className="container mx-auto px-4 py-12">
       <div className="max-w-3xl mx-auto">
@@ -32,7 +77,8 @@ export default function BookingPage() {
                 <label className="block text-sm font-medium mb-2">
                   Hvornår?
                 </label>
-                <DatePicker className="w-full" />
+                <DatePicker className="w-full" disabled={disabled} />
+                {loadingAvail && <p className="text-sm text-primary-500 mt-2">Indlæser tilgængelighed...</p>}
               </div>
               <div>
                 <label className="block text-sm font-medium mb-2">