From 47baf8dfe214f0fe0b351bfe333a400fe35df2e4 Mon Sep 17 00:00:00 2001
From: Asya Vee <hello@asyavee.me>
Date: Tue, 26 Aug 2025 18:06:44 +0400
Subject: [PATCH] booking form validation and data types

---
 apps/pocketbase/pb_data/auxiliary.db        | Bin 888832 -> 901120 bytes
 apps/web/app/page.tsx                       |   2 +-
 apps/web/components/BookingForm.tsx         | 299 ++++++--------------
 apps/web/components/BookingSummary.tsx      |  78 +++++
 apps/web/components/BookingTypeSelector.tsx |  68 +++++
 apps/web/components/CustomerDetails.tsx     | 116 ++++++++
 apps/web/components/DateSelector.tsx        |  67 +++++
 apps/web/components/TimeSlotSelector.tsx    |  53 ++++
 apps/web/package.json                       |   1 +
 apps/web/types/bookings.ts                  | 243 +++++++++++-----
 pnpm-lock.yaml                              |  13 +
 11 files changed, 661 insertions(+), 279 deletions(-)
 create mode 100644 apps/web/components/BookingSummary.tsx
 create mode 100644 apps/web/components/BookingTypeSelector.tsx
 create mode 100644 apps/web/components/CustomerDetails.tsx
 create mode 100644 apps/web/components/DateSelector.tsx
 create mode 100644 apps/web/components/TimeSlotSelector.tsx

diff --git a/apps/pocketbase/pb_data/auxiliary.db b/apps/pocketbase/pb_data/auxiliary.db
index 9879ecb94d982e8240f46ed94c82286ab7e33343..ad6147411217a6c102f0c293fefb86cf831eea2f 100644
GIT binary patch
delta 2596
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

delta 1405
zcmXw3e@xX?6#t%k@AuvJ{q??2=K};46%-*Po(WGBgr`PmsSi+5Q+z0uIOTz<xwRZf
zDjE}>1Sidjs3{cbQ_S0{DXw(QO@pRw_(#zy*K|66jM7rp_krE*?w<2G=X1~5=bqiF
zDo@qn^oAIDv?NKr!Live`n3O;X+NURwg9QOQ+LjRPG89*wR85Ui!ViRGcAl?G=DQM
zo9$+u888dXG!fkmF($JDC(wJ^9wql!W?k4ESrb?#0;`}Y)iFjYl32VpptWfQ>Qjtp
zfGLdbrBNcU0hZedS<zV8pVj;aohn@WVFuv+@gxB+B^x`i1Yohq{}?)tL5GlY$T+}B
zUNW87=8Dx`(!t<8G;_&X3>FZVsLLf=75EHgA6bc|KJt_hC;IbA8YH1Tn<a^^d@`rl
za^w*4;LMP9TZJeNk#7w+f|V%{hq3c$A$FZ72@nw0F{c{lp`1f&a8C}+5|?sl6NiP3
z)e8c6C69JuAAv;l&Z3jVwYfC?7PJUCl~F*|&9WgV^4u&!g^gm>47Ln#!)?vA>uM&m
zwk)n@+B|U(LfLO?!~=d?H=+KZcZAqhVmk(wjqz)2nJ!C8S76IKfy#`^vbUyg+~o0W
zh7ZK%HMaT=NI==iCt$LZ&%*Uiz6=Vn(qmhQtuee%tR2P=mg|w=mdp-wsmZ{N!>fi8
zUFeVD*_af?mtgfCo+jMYyxUPGUzZ}K0g3%>#yN70GQCbarT(b&D^V<(W)VNs*k?ex
zG+?Lv3J>z7Jl1y0_Bs2B9b#{?6#5rEPj}J<G=lt0j+1hd4g+ur>Yxy!rC+5sn^*op
zZkAWd@$63HxQbK^-RBO>f5NBXCy)6U>Y;C2qPnmGd8}~k<1H*aP`&8i$8TT|xkvoo
z%*STHDIs@r18_tSUkue^Z4ZA)VJ5cRQ>Kfi8$586HN$cVoz--Lm>jYv1Ae$(9Vu$d
z)vX|IpRq^YT?P$Og5;Ojr}_zfkq+8P?RCwrexa^bP30S<%w7jsW}M`w#Z)6-k~he3
zR%9GD=EDW{O#jD`YyZVg_*UCJTd90g_L*CxPRD+FmAvxuB5bJAiU^f3bX2J&q#xbw
zN<Jrd=xOQ2EF88;P6{Ih=xI|5MNPXhADHn-8r4{t6E#F(FqDvLWf537$R~^p2F1yv
z%2_f5k@_&S8}A%f3dDvEB}lR1gi?sR+myxBk_{htX(W!NvIpgQt&p(9=Pf;X&j0th
z|KMCmVLm8rlGPWQrl_rQBdh~&&>PeAKrMtF=-o!+@LHt42)7N>RdheJ-r*Ujte9I>
z28H(Z!9?`=<gT#fYBae`dMwde%ynkIIn9hUZH~K+>yEF<PIQ*2;|(=n5&vJ<x=wZD
zWnG_wNrqmEy@q}YeWqS2V%DgtHu#y~l5%w<J`U&XHS|}p)}eooXHEUJ!6=;ES)rb*
z&{zfa+Y^!ZX$hFxrzK-?pO%RS`?T?*t50+B#?*=xBJoeHH&Si2`u0j{tr`fo{Skgw
zMdQQ0PsEhNMlO*gkq&x>GF1FsU5^gW;Yh4JV;_N8<*GxBX*V+Db57l=S;YGVuhLtI
x_-eZ@%T|><ys%4`#Xq}r_3>~{LXvSvt5;HZhix)@pM*rPK|Mf3XuIJv{sWZ4uB`w7

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index e1000e2..c3f1ca3 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
       </main>
       <footer className="bg-white text-black py-8 mt-12">
         <div className="max-w-2xl mx-auto px-4 text-center">
-          <p className="text-gray-600 mb-2">Questions? Get in touch</p>
+          <p className="text-gray-600 mb-2">Get in touch</p>
           <a
             href="mailto:vitrify@asyavee.me"
             className="text-blue-600 hover:text-blue-800 transition-colors font-medium"
diff --git a/apps/web/components/BookingForm.tsx b/apps/web/components/BookingForm.tsx
index 738d227..9eaba99 100644
--- a/apps/web/components/BookingForm.tsx
+++ b/apps/web/components/BookingForm.tsx
@@ -1,16 +1,34 @@
 'use client'
 
-import React, { useState } from 'react';
-import { Calendar, Clock, User, Mail, Users } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import BookingTypeSelector from './BookingTypeSelector';
+import DateSelector from './DateSelector';
+import TimeSlotSelector from './TimeSlotSelector';
+import CustomerDetails from './CustomerDetails';
+import BookingSummary from './BookingSummary';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
 
 const BookingInterface = () => {
   const [selectedDate, setSelectedDate] = useState('');
   const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
   const [selectedBookingType, setSelectedBookingType] = useState('');
-  const [customerName, setCustomerName] = useState('');
-  const [customerEmail, setCustomerEmail] = useState('');
   const [participantsCount, setParticipantsCount] = useState(1);
 
+  const { register, handleSubmit, formState: { errors, isValid }, setValue, trigger } = useForm<FormData>({
+    mode: 'onChange',
+    defaultValues: {
+      customerName: '',
+      customerEmail: '',
+      participantsCount: 1
+    }
+  });
+
   // Mock data - will be replaced with API calls
   const bookingTypes = [
     { id: '1', name: 'wheel_rental', display_name: 'Wheel Rental', requires_payment: false, price_per_person: 0 },
@@ -30,35 +48,44 @@ const BookingInterface = () => {
 
   const selectedBookingTypeData = bookingTypes.find(bt => bt.id === selectedBookingType);
 
-  const handleSubmit = () => {
-    console.log({
-      selectedBookingType,
-      selectedDate,
-      selectedTimeSlot,
-      customerName,
-      customerEmail,
-      participantsCount
-    });
-  };
+  useEffect(() => {
+    setValue('participantsCount', participantsCount);
+    trigger('participantsCount');
+  }, [participantsCount, setValue, trigger]);
 
-  const generateCalendarDays = () => {
-    const today = new Date();
-    const days = [];
+  const onSubmit = (data: FormData) => {
+    const selectedTimeSlotData = timeSlots.find(slot => slot.id === selectedTimeSlot);
     
-    for (let i = 0; i < 14; i++) {
-      const date = new Date(today);
-      date.setDate(today.getDate() + i);
-      days.push({
-        date: date.toISOString().split('T')[0],
-        day: date.getDate(),
-        month: date.toLocaleDateString('en', { month: 'short' }),
-        dayName: date.toLocaleDateString('en', { weekday: 'short' })
-      });
-    }
-    return days;
+    const formData = {
+      bookingTypeId: selectedBookingType,
+      customerName: data.customerName,
+      customerEmail: data.customerEmail,
+      startTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.start_time}:00`
+        : '',
+      endTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.end_time}:00`
+        : '',
+      participantsCount: data.participantsCount,
+    };
+    
+    console.log(formData);
   };
 
-  const calendarDays = generateCalendarDays();
+  const handleParticipantsCountChange = (count: number) => {
+    setParticipantsCount(count);
+  };
+
+  const handleBookingTypeChange = (typeId: string) => {
+    setSelectedBookingType(typeId);
+    setSelectedDate('');
+    setSelectedTimeSlot('');
+  };
+
+  const handleDateChange = (date: string) => {
+    setSelectedDate(date);
+    setSelectedTimeSlot('');
+  };
 
   return (
     <div className="min-h-screen bg-gray-50 p-4">
@@ -71,201 +98,53 @@ const BookingInterface = () => {
 
         <div className="space-y-8">
           {/* Booking Type Selection */}
-          <div className="bg-white rounded-xl p-6 shadow-sm">
-            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-              <Calendar className="w-5 h-5" />
-              Select Experience
-            </h2>
-            <div className="grid gap-3">
-              {bookingTypes.map((type) => (
-                <label key={type.id} className="cursor-pointer">
-                  <input
-                    type="radio"
-                    name="bookingType"
-                    value={type.id}
-                    checked={selectedBookingType === type.id}
-                    onChange={(e) => setSelectedBookingType(e.target.value)}
-                    className="sr-only"
-                  />
-                  <div className={`p-4 rounded-lg border-2 transition-all ${
-                    selectedBookingType === type.id 
-                      ? 'border-blue-500 bg-blue-50' 
-                      : 'border-gray-200 hover:border-gray-300'
-                  }`}>
-                    <div className="flex justify-between items-start">
-                      <div>
-                        <h3 className="font-medium text-gray-900">{type.display_name}</h3>
-                        {type.requires_payment && (
-                          <p className="text-sm text-gray-600 mt-1">
-                            ${type.price_per_person} per person
-                          </p>
-                        )}
-                      </div>
-                      {type.requires_payment && (
-                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
-                          Payment Required
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
+          <BookingTypeSelector
+            bookingTypes={bookingTypes}
+            selectedBookingType={selectedBookingType}
+            onBookingTypeChange={handleBookingTypeChange}
+          />
 
           {/* Date Selection */}
           {selectedBookingType && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Calendar className="w-5 h-5" />
-                Choose Date
-              </h2>
-              <div className="grid grid-cols-7 gap-2 md:gap-3">
-                {calendarDays.map((day) => (
-                  <button
-                    key={day.date}
-                    type="button"
-                    onClick={() => setSelectedDate(day.date)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      selectedDate === day.date
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="text-xs font-medium">{day.dayName}</div>
-                    <div className="text-sm font-semibold">{day.day}</div>
-                    <div className="text-xs">{day.month}</div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <DateSelector
+              selectedDate={selectedDate}
+              onDateChange={handleDateChange}
+            />
           )}
 
           {/* Time Slot Selection */}
           {selectedDate && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Clock className="w-5 h-5" />
-                Available Times
-              </h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {timeSlots.map((slot) => (
-                  <button
-                    key={slot.id}
-                    type="button"
-                    disabled={!slot.available}
-                    onClick={() => setSelectedTimeSlot(slot.id)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      !slot.available
-                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                        : selectedTimeSlot === slot.id
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="font-medium">
-                      {slot.start_time} - {slot.end_time}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <TimeSlotSelector
+              timeSlots={timeSlots}
+              selectedTimeSlot={selectedTimeSlot}
+              onTimeSlotChange={setSelectedTimeSlot}
+            />
           )}
 
           {/* Customer Details */}
           {selectedTimeSlot && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <User className="w-5 h-5" />
-                Your Details
-              </h2>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <CustomerDetails
+                register={register}
+                errors={errors}
+                participantsCount={participantsCount}
+                onParticipantsCountChange={handleParticipantsCountChange}
+              />
               
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Full Name *
-                  </label>
-                  <input
-                    type="text"
-                    value={customerName}
-                    onChange={(e) => setCustomerName(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your full name"
+              {/* Summary & Submit */}
+              {isValid && (
+                <div className="mt-8">
+                  <BookingSummary
+                    selectedBookingTypeData={selectedBookingTypeData}
+                    selectedDate={selectedDate}
+                    selectedTimeSlot={selectedTimeSlot}
+                    timeSlots={timeSlots}
+                    participantsCount={participantsCount}
+                    onSubmit={handleSubmit(onSubmit)}
                   />
                 </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Email Address *
-                  </label>
-                  <input
-                    type="email"
-                    value={customerEmail}
-                    onChange={(e) => setCustomerEmail(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your email"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
-                    <Users className="w-4 h-4" />
-                    Number of Participants
-                  </label>
-                  <select
-                    value={participantsCount}
-                    onChange={(e) => setParticipantsCount(parseInt(e.target.value))}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
-                      <option key={num} value={num}>{num} participant{num > 1 ? 's' : ''}</option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Summary & Submit */}
-          {selectedTimeSlot && customerName && customerEmail && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
-              
-              <div className="space-y-3 mb-6">
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Experience:</span>
-                  <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Date:</span>
-                  <span className="font-medium">{selectedDate}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Time:</span>
-                  <span className="font-medium">
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.start_time} - 
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.end_time}
-                  </span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Participants:</span>
-                  <span className="font-medium">{participantsCount}</span>
-                </div>
-                {selectedBookingTypeData?.requires_payment && (
-                  <div className="flex justify-between text-lg font-semibold border-t pt-3">
-                    <span>Total:</span>
-                    <span>${selectedBookingTypeData.price_per_person * participantsCount}</span>
-                  </div>
-                )}
-              </div>
-
-              <button
-                onClick={handleSubmit}
-                className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-              >
-                {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
-              </button>
-            </div>
+              )}
+            </form>
           )}
         </div>
       </div>
diff --git a/apps/web/components/BookingSummary.tsx b/apps/web/components/BookingSummary.tsx
new file mode 100644
index 0000000..7ce927a
--- /dev/null
+++ b/apps/web/components/BookingSummary.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface BookingSummaryProps {
+  selectedBookingTypeData: BookingType | undefined;
+  selectedDate: string;
+  selectedTimeSlot: string;
+  timeSlots: TimeSlot[];
+  participantsCount: number;
+  onSubmit: () => void;
+}
+
+const BookingSummary: React.FC<BookingSummaryProps> = ({
+  selectedBookingTypeData,
+  selectedDate,
+  selectedTimeSlot,
+  timeSlots,
+  participantsCount,
+  onSubmit,
+}) => {
+  const selectedTimeSlotData = timeSlots.find(s => s.id === selectedTimeSlot);
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
+      
+      <div className="space-y-3 mb-6">
+        <div className="flex justify-between">
+          <span className="text-gray-600">Experience:</span>
+          <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Date:</span>
+          <span className="font-medium">{selectedDate}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Time:</span>
+          <span className="font-medium">
+            {selectedTimeSlotData?.start_time} - {selectedTimeSlotData?.end_time}
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Participants:</span>
+          <span className="font-medium">{participantsCount}</span>
+        </div>
+        {selectedBookingTypeData?.requires_payment && (
+          <div className="flex justify-between text-lg font-semibold border-t pt-3">
+            <span>Total:</span>
+            <span>₾{selectedBookingTypeData.price_per_person * participantsCount}</span>
+          </div>
+        )}
+      </div>
+
+      <button
+        onClick={onSubmit}
+        className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+      >
+        {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
+      </button>
+    </div>
+  );
+};
+
+export default BookingSummary;
\ No newline at end of file
diff --git a/apps/web/components/BookingTypeSelector.tsx b/apps/web/components/BookingTypeSelector.tsx
new file mode 100644
index 0000000..143e9cb
--- /dev/null
+++ b/apps/web/components/BookingTypeSelector.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface BookingTypeSelectorProps {
+  bookingTypes: BookingType[];
+  selectedBookingType: string;
+  onBookingTypeChange: (typeId: string) => void;
+}
+
+const BookingTypeSelector: React.FC<BookingTypeSelectorProps> = ({
+  bookingTypes,
+  selectedBookingType,
+  onBookingTypeChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Select Experience
+      </h2>
+      <div className="grid gap-3">
+        {bookingTypes.map((type) => (
+          <label key={type.id} className="cursor-pointer">
+            <input
+              type="radio"
+              name="bookingType"
+              value={type.id}
+              checked={selectedBookingType === type.id}
+              onChange={(e) => onBookingTypeChange(e.target.value)}
+              className="sr-only"
+            />
+            <div className={`p-4 rounded-lg border-2 transition-all ${
+              selectedBookingType === type.id 
+                ? 'border-blue-500 bg-blue-50' 
+                : 'border-gray-200 hover:border-gray-300'
+            }`}>
+              <div className="flex justify-between items-start">
+                <div>
+                  <h3 className="font-medium text-gray-900">{type.display_name}</h3>
+                  {type.requires_payment && (
+                    <p className="text-sm text-gray-600 mt-1">
+                      ${type.price_per_person} per person
+                    </p>
+                  )}
+                </div>
+                {type.requires_payment && (
+                  <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+                    Payment Required
+                  </span>
+                )}
+              </div>
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BookingTypeSelector;
\ No newline at end of file
diff --git a/apps/web/components/CustomerDetails.tsx b/apps/web/components/CustomerDetails.tsx
new file mode 100644
index 0000000..17658a2
--- /dev/null
+++ b/apps/web/components/CustomerDetails.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { User, Users } from 'lucide-react';
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
+
+interface CustomerDetailsProps {
+  register: UseFormRegister<FormData>;
+  errors: FieldErrors<FormData>;
+  participantsCount: number;
+  onParticipantsCountChange: (count: number) => void;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = ({
+  register,
+  errors,
+  participantsCount,
+  onParticipantsCountChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <User className="w-5 h-5" />
+        Your Details
+      </h2>
+      
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Full Name *
+          </label>
+          <input
+            type="text"
+            {...register('customerName', { 
+              required: 'Full name is required',
+              minLength: { value: 2, message: 'Name must be at least 2 characters' }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerName ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your full name"
+          />
+          {errors.customerName && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerName.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Email Address *
+          </label>
+          <input
+            type="email"
+            {...register('customerEmail', { 
+              required: 'Email address is required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Please enter a valid email address'
+              }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerEmail ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your email"
+          />
+          {errors.customerEmail && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerEmail.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            Number of Participants
+          </label>
+          <div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.max(1, participantsCount - 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount <= 1}
+            >
+              <span className="text-xl font-medium">−</span>
+            </button>
+            <div className="flex-1 text-center px-4">
+              <span className="text-xl font-semibold text-gray-900">{participantsCount}</span>
+              <div className="text-xs text-gray-500">participant{participantsCount > 1 ? 's' : ''}</div>
+            </div>
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.min(8, participantsCount + 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount >= 8}
+            >
+              <span className="text-xl font-medium">+</span>
+            </button>
+          </div>
+          <input
+            type="hidden"
+            {...register('participantsCount', { 
+              min: { value: 1, message: 'At least 1 participant required' },
+              max: { value: 8, message: 'Maximum 8 participants allowed' }
+            })}
+            value={participantsCount}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerDetails;
\ No newline at end of file
diff --git a/apps/web/components/DateSelector.tsx b/apps/web/components/DateSelector.tsx
new file mode 100644
index 0000000..9fe386c
--- /dev/null
+++ b/apps/web/components/DateSelector.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface CalendarDay {
+  date: string;
+  day: number;
+  month: string;
+  dayName: string;
+}
+
+interface DateSelectorProps {
+  selectedDate: string;
+  onDateChange: (date: string) => void;
+}
+
+const DateSelector: React.FC<DateSelectorProps> = ({
+  selectedDate,
+  onDateChange,
+}) => {
+  const generateCalendarDays = (): CalendarDay[] => {
+    const today = new Date();
+    const days = [];
+    
+    for (let i = 0; i < 14; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      days.push({
+        date: date.toISOString().split('T')[0],
+        day: date.getDate(),
+        month: date.toLocaleDateString('en', { month: 'short' }),
+        dayName: date.toLocaleDateString('en', { weekday: 'short' })
+      });
+    }
+    return days;
+  };
+
+  const calendarDays = generateCalendarDays();
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Choose Date
+      </h2>
+      <div className="grid grid-cols-7 gap-2 md:gap-3">
+        {calendarDays.map((day) => (
+          <button
+            key={day.date}
+            type="button"
+            onClick={() => onDateChange(day.date)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              selectedDate === day.date
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="text-xs font-medium">{day.dayName}</div>
+            <div className="text-sm font-semibold">{day.day}</div>
+            <div className="text-xs">{day.month}</div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DateSelector;
\ No newline at end of file
diff --git a/apps/web/components/TimeSlotSelector.tsx b/apps/web/components/TimeSlotSelector.tsx
new file mode 100644
index 0000000..52e6475
--- /dev/null
+++ b/apps/web/components/TimeSlotSelector.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Clock } from 'lucide-react';
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface TimeSlotSelectorProps {
+  timeSlots: TimeSlot[];
+  selectedTimeSlot: string;
+  onTimeSlotChange: (slotId: string) => void;
+}
+
+const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
+  timeSlots,
+  selectedTimeSlot,
+  onTimeSlotChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Clock className="w-5 h-5" />
+        Available Times
+      </h2>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        {timeSlots.map((slot) => (
+          <button
+            key={slot.id}
+            type="button"
+            disabled={!slot.available}
+            onClick={() => onTimeSlotChange(slot.id)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              !slot.available
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : selectedTimeSlot === slot.id
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="font-medium">
+              {slot.start_time} - {slot.end_time}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TimeSlotSelector;
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 7b5c546..98cb035 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,6 +19,7 @@
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.62.0",
     "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
diff --git a/apps/web/types/bookings.ts b/apps/web/types/bookings.ts
index 326663b..4b58809 100644
--- a/apps/web/types/bookings.ts
+++ b/apps/web/types/bookings.ts
@@ -1,79 +1,186 @@
-// types/booking.ts
-
-export interface BookingType {
-    id: string;
-    name: string;
-    display_name: string;
-    requires_payment: boolean;
-    default_duration: number; // in minutes
-    description?: string;
-    resources: string; // relation to resources collection
-    created: string;
-    updated: string;
+// Base types for PocketBase records
+export interface BaseRecord {
+  id: string;
+  created: string;
+  updated: string;
 }
 
-export interface Resource {
-    id: string;
-    type: 'wheel' | 'workstation';
-    capacity: number;
-    is_active: boolean;
-    created: string;
-    updated: string;
+// Resource entity
+export interface Resource extends BaseRecord {
+  name: string;
+  type: 'wheel' | 'workstation';
+  capacity: number;
+  is_active: boolean;
 }
 
-export interface TimeSlot {
-    id: string;
-    booking_types: string[]; // relation to booking types
-    start_time: string;
-    end_time: string;
-    is_reccuring: boolean;
-    max_capacity: number;
-    is_active: boolean;
-    recurrence_pattern?:  {
-        type: string;
-        days: number[];
-        end_date: string;
-    };
-    created: string;
-    updated: string;
+// Booking Type entity
+export interface BookingType extends BaseRecord {
+  name: string;
+  display_name: string;
+  description?: string;
+  requires_payment?: boolean;
+  base_duration: number; // minutes, min 30
+  min_duration: number;
+  price_per_person: number;
+  resources: string; // relation to Resource
+  min_capacity: number;
+  max_capacity: number;
+  is_active: boolean;
 }
 
-export interface Booking {
-    id: string;
-    booking_type: string; // relation to booking type
-    customer_name: string;
-    customer_email: string;
-    internal_notes?: string;
-    start_time: string;
-    end_time: string;
-    participants_count: number;
-    status: 'confirmed' | 'cancelled' | 'completed';
-    payment_status: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
-    payment_required: boolean;
-    cancellation_token: string;
-    created: string;
-    updated: string;
+// Time Slot entity
+export interface TimeSlot extends BaseRecord {
+  booking_types: string[]; // relation to BookingType (many-to-many)
+  start_time: string;
+  end_time: string;
+  is_active: boolean;
+  is_reccuring?: boolean;
+  recurrence_pattern?: RecurrencePattern;
+  max_capacity: number;
 }
 
+// Recurrence pattern structure
+export interface RecurrencePattern {
+  type: 'daily' | 'weekly' | 'monthly';
+  interval: number;
+  days_of_week?: number[]; // 0-6, Sunday = 0
+  end_date?: string;
+  occurrences?: number;
+}
+
+// Booking entity
+export interface Booking extends BaseRecord {
+  booking_type: string; // relation to BookingType
+  customer_name: string;
+  customer_email: string;
+  internal_notes?: string;
+  start_time: string;
+  end_time: string;
+  participants_count: number;
+  status: 'confirmed' | 'cancelled' | 'completed';
+  payment_status: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
+  payment_required: boolean;
+  cancellation_token: string;
+  use_subscription?: string; // relation to subscription (future feature)
+}
+
+// Frontend form types
 export interface BookingFormData {
-    bookingTypeId: string;
-    customerName: string;
-    customerEmail: string;
-    participantsCount: number;
-    startTime: Date;
-    endTime: Date;
+  bookingTypeId: string;
+  customerName: string;
+  customerEmail: string;
+  startTime: string;
+  endTime: string;
+  participantsCount: number;
+  internalNotes?: string;
 }
 
-// For the booking flow state
-export interface BookingFlowState {
-    step: 'booking-type' | 'date-time' | 'customer-details' | 'confirmation';
-    selectedBookingType?: BookingType;
-    selectedDate?: Date;
-    selectedTimeSlot?: string; // time slot ID or time string
-    customerDetails?: {
-        name: string;
-        email: string;
-        participantsCount: number;
-        notes?: string;
-    };
-}
\ No newline at end of file
+// API response types
+export interface BookingResponse {
+  success: boolean;
+  booking?: Booking;
+  error?: string;
+  cancellationUrl?: string;
+}
+
+export interface AvailabilityResponse {
+  success: boolean;
+  availableSlots?: TimeSlot[];
+  error?: string;
+}
+
+// Expanded types with relations
+export interface BookingWithRelations extends Omit<Booking, 'booking_type'> {
+  expand?: {
+    booking_type?: BookingType;
+  };
+}
+
+export interface BookingTypeWithRelations extends Omit<BookingType, 'resources'> {
+  expand?: {
+    resources?: Resource;
+  };
+}
+
+export interface TimeSlotWithRelations extends Omit<TimeSlot, 'booking_types'> {
+  expand?: {
+    booking_types?: BookingType[];
+  };
+}
+
+// Utility types for API operations
+export interface CreateBookingData {
+  booking_type: string;
+  customer_name: string;
+  customer_email: string;
+  start_time: string;
+  end_time: string;
+  participants_count: number;
+  internal_notes?: string;
+  status: 'confirmed';
+  payment_status: 'not_required' | 'pending';
+  payment_required: boolean;
+}
+
+export interface UpdateBookingData {
+  status?: 'confirmed' | 'cancelled' | 'completed';
+  payment_status?: 'not_required' | 'paid' | 'refunded' | 'partially_refunded' | 'pending';
+  internal_notes?: string;
+}
+
+// Filter and query types
+export interface BookingFilters {
+  status?: string;
+  payment_status?: string;
+  booking_type?: string;
+  date_from?: string;
+  date_to?: string;
+  customer_email?: string;
+}
+
+export interface TimeSlotFilters {
+  booking_type?: string;
+  date_from?: string;
+  date_to?: string;
+  is_active?: boolean;
+}
+
+// Error types
+export interface BookingError {
+  code: string;
+  message: string;
+  field?: string;
+}
+
+// Validation types
+export interface BookingValidation {
+  isValid: boolean;
+  errors: BookingError[];
+}
+
+// Constants
+export const BOOKING_TYPES = {
+  WHEEL_RENTAL: 'wheel_rental',
+  HAND_BUILDING: 'hand_building_coworking',
+  PERSONAL_WORKSHOP: 'personal_workshop',
+  GROUP_WORKSHOP: 'group_workshop',
+} as const;
+
+export const BOOKING_STATUS = {
+  CONFIRMED: 'confirmed',
+  CANCELLED: 'cancelled',
+  COMPLETED: 'completed',
+} as const;
+
+export const PAYMENT_STATUS = {
+  NOT_REQUIRED: 'not_required',
+  PAID: 'paid',
+  REFUNDED: 'refunded',
+  PARTIALLY_REFUNDED: 'partially_refunded',
+  PENDING: 'pending',
+} as const;
+
+export const RESOURCE_TYPES = {
+  WHEEL: 'wheel',
+  WORKSTATION: 'workstation',
+} as const;
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5b15ba..f244ecc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-hook-form:
+        specifier: ^7.62.0
+        version: 7.62.0(react@19.1.0)
       tailwindcss:
         specifier: ^4.1.12
         version: 4.1.12
@@ -1437,6 +1440,12 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-hook-form@7.62.0:
+    resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3063,6 +3072,10 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-hook-form@7.62.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   react-is@16.13.1: {}
 
   react@19.1.0: {}