@ossy/booking 1.16.0 → 1.16.2

package/src/public-booking.page.jsx

@@ -1,6 +1,11 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
 import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
+import { useSdk } from '@ossy/sdk-react'
+import { metadata as CreateBooking } from './create-booking.action.js'
+import { metadata as GetServices } from './get-services.action.js'
+import { metadata as GetAvailableSlots } from './get-available-slots.action.js'
+import { invokeErrorMessage } from './invoke-error-message.js'
 
 const MONTH_KEYS = [
   'publicBooking.month.january', 'publicBooking.month.february', 'publicBooking.month.march',
@@ -98,7 +103,8 @@ function SlotPicker ({ slots, selectedSlot, onSelectSlot, t, language }) {
   )
 }
 
-function BookingForm ({ slot, consultantSlug, onSuccess, t }) {
+function BookingForm ({ slot, service, consultantSlug, onSuccess, t }) {
+  const sdk = useSdk();
   const [clientName, setClientName] = useState('')
   const [clientEmail, setClientEmail] = useState('')
   const [clientMessage, setClientMessage] = useState('')
@@ -110,13 +116,17 @@ function BookingForm ({ slot, consultantSlug, onSuccess, t }) {
     if (!clientName.trim() || !clientEmail.trim()) return
     setSubmitting(true); setError(null)
     try {
-      const res = await fetch('/actions/booking/create', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ consultantId: consultantSlug, startAt: slot.startAt, duration: slot.duration, clientName: clientName.trim(), clientEmail: clientEmail.trim(), clientMessage: clientMessage.trim() }),
+      await sdk.invoke(CreateBooking, {
+        consultantId: consultantSlug,
+        startAt: slot.startAt,
+        duration: slot.duration,
+        serviceId: service?.id,
+        clientName: clientName.trim(),
+        clientEmail: clientEmail.trim(),
+        clientMessage: clientMessage.trim(),
       })
-      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('publicBooking.form.error', { status: res.status })) }
-      await res.json(); onSuccess()
-    } catch (err) { setError(err.message) } finally { setSubmitting(false) }
+      onSuccess()
+    } catch (err) { setError(await invokeErrorMessage(err, t('publicBooking.form.error', { status: '' }))) } finally { setSubmitting(false) }
   }
 
   return (
@@ -135,7 +145,7 @@ function BookingForm ({ slot, consultantSlug, onSuccess, t }) {
           <Textarea value={clientMessage} onChange={e => setClientMessage(e.target.value)} placeholder={t('publicBooking.form.messagePlaceholder')} rows={3} />
         </View>
         {error && <Alert variant="danger">{error}</Alert>}
-        <Button type="submit" variant="primary" disabled={submitting}>{submitting ? t('publicBooking.form.submitting') : t('publicBooking.form.submit')}</Button>
+        <Button data-action={CreateBooking.id} type="submit" variant="primary" disabled={submitting}>{submitting ? t('publicBooking.form.submitting') : t('publicBooking.form.submit')}</Button>
       </View>
     </form>
   )
@@ -156,33 +166,86 @@ function PendingScreen ({ slot, t, language }) {
 
 export const metadata = {
   id: 'public-booking',
+  public: true,
   path: { sv: '/boka/:consultantSlug', en: '/book/:consultantSlug' },
 }
 
+function ServicePicker ({ services, selectedService, onSelect, t, language }) {
+  if (!services?.length) {
+    return <Text color="secondary">{t('publicBooking.noServices')}</Text>
+  }
+  const formatPrice = (cents, currency) => {
+    if (!cents) return t('publicBooking.serviceFree')
+    return new Intl.NumberFormat(language === 'sv' ? 'sv-SE' : 'en-GB', { style: 'currency', currency: currency || 'SEK' }).format(cents / 100)
+  }
+  return (
+    <View gap="s">
+      {services.map(service => (
+        <Button
+          key={service.id}
+          variant={selectedService?.id === service.id ? 'tab-active' : 'tab'}
+          onClick={() => onSelect(service)}
+          style={{ justifyContent: 'flex-start', textAlign: 'left' }}
+        >
+          <View gap="xs">
+            <Text weight="medium">{service.name}</Text>
+            <Text size="s" color="secondary">
+              {t('publicBooking.serviceMeta', { duration: service.duration, price: formatPrice(service.price, service.currency) })}
+            </Text>
+          </View>
+        </Button>
+      ))}
+    </View>
+  )
+}
+
 export default function PublicBookingPage ({ consultantSlug }) {
   const { t, language } = useLocale()
+  const sdk = useSdk()
   const router = useRouter()
   const slug = consultantSlug ?? router?.params?.consultantSlug
   const today = new Date()
+  const [services, setServices] = useState([])
+  const [loadingServices, setLoadingServices] = useState(true)
+  const [servicesError, setServicesError] = useState(null)
+  const [selectedService, setSelectedService] = useState(null)
   const [calYear, setCalYear] = useState(today.getFullYear())
   const [calMonth, setCalMonth] = useState(today.getMonth())
   const [slots, setSlots] = useState([])
-  const [loadingSlots, setLoadingSlots] = useState(true)
+  const [loadingSlots, setLoadingSlots] = useState(false)
   const [slotsError, setSlotsError] = useState(null)
   const [selectedDate, setSelectedDate] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
-  const [step, setStep] = useState('pick-slot')
+  const [step, setStep] = useState('pick-service')
 
   useEffect(() => {
     if (!slug) return
+    setLoadingServices(true)
+    setServicesError(null)
+    sdk.invoke(GetServices, { consultantId: slug })
+      .then(data => {
+        const list = Array.isArray(data) ? data : []
+        setServices(list)
+        if (list.length === 1) setSelectedService(list[0])
+        setLoadingServices(false)
+      })
+      .catch(() => { setServicesError(t('publicBooking.servicesError')); setLoadingServices(false) })
+  }, [slug, sdk, t])
+
+  useEffect(() => {
+    if (!slug || !selectedService || step === 'pick-service') return
     setLoadingSlots(true); setSlotsError(null)
     const from = new Date().toISOString()
     const to = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString()
-    fetch(`/actions/booking/get-available-slots?consultantId=${encodeURIComponent(slug)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
-      .then(r => r.ok ? r.json() : Promise.reject(r))
+    sdk.invoke(GetAvailableSlots, {
+      consultantId: slug,
+      serviceId: selectedService.id,
+      from,
+      to,
+    })
       .then(data => { setSlots(data); setLoadingSlots(false) })
       .catch(() => { setSlotsError(t('publicBooking.slotsError')); setLoadingSlots(false) })
-  }, [slug, t])
+  }, [slug, selectedService, step, sdk, t])
 
   const slotsGrouped = groupSlotsByDate(slots)
   const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
@@ -199,43 +262,76 @@ export default function PublicBookingPage ({ consultantSlug }) {
         ) : step === 'fill-form' && selectedSlot ? (
           <View gap="m">
             <Button variant="link" onClick={() => setStep('pick-slot')}>{t('publicBooking.back')}</Button>
+            {selectedService && (
+              <View surface="secondary" roundness="m" inset="s">
+                <Text weight="medium">{selectedService.name}</Text>
+                <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedService.duration })}</Text>
+              </View>
+            )}
             <View surface="secondary" roundness="m" inset="s">
               <Text weight="medium">{t('publicBooking.selectedTime', { datetime: formatDate(selectedSlot.startAt, t, language) })}</Text>
               <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedSlot.duration })}</Text>
             </View>
-            <BookingForm slot={selectedSlot} consultantSlug={slug} onSuccess={() => setStep('confirmed')} t={t} />
+            <BookingForm slot={selectedSlot} service={selectedService} consultantSlug={slug} onSuccess={() => setStep('confirmed')} t={t} />
           </View>
-        ) : (
-          <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
-            <View style={{ flex: 1, minWidth: 260 }}>
-              {loadingSlots ? (
-                <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('publicBooking.loadingSlots')}</Text>
-              ) : slotsError ? (
-                <Alert variant="danger">{slotsError}</Alert>
-              ) : (
-                <MonthCalendar year={calYear} month={calMonth} slotsGrouped={slotsGrouped} selectedDate={selectedDate}
-                  onSelectDate={(dateKey) => { setSelectedDate(dateKey); setSelectedSlot(null) }}
-                  onPrevMonth={() => { if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) } else setCalMonth(m => m - 1) }}
-                  onNextMonth={() => { if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) } else setCalMonth(m => m + 1) }}
-                  t={t} />
-              )}
+        ) : step === 'pick-slot' && selectedService ? (
+          <View gap="m">
+            <Button variant="link" onClick={() => { setStep('pick-service'); setSelectedSlot(null); setSelectedDate(null) }}>{t('publicBooking.back')}</Button>
+            <View surface="secondary" roundness="m" inset="s">
+              <Text weight="medium">{selectedService.name}</Text>
+              <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedService.duration })}</Text>
             </View>
-            <View gap="m" style={{ flex: 1, minWidth: 260 }}>
-              {selectedDate ? (
-                <>
-                  <Title variant="tertiary">
-                    {(() => { const [y, m, d] = selectedDate.split('-').map(Number); return `${d} ${t(MONTH_KEYS[m - 1])} ${y}` })()}
-                  </Title>
-                  <SlotPicker slots={selectedDateSlots} selectedSlot={selectedSlot} onSelectSlot={setSelectedSlot} t={t} language={language} />
-                  {selectedSlot && <Button variant="primary" onClick={() => setStep('fill-form')}>{t('publicBooking.continue')}</Button>}
-                </>
-              ) : (
-                <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
-                  <Text color="secondary" style={{ textAlign: 'center' }}>{t('publicBooking.pickDate')}</Text>
-                </View>
-              )}
+            <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
+              <View style={{ flex: 1, minWidth: 260 }}>
+                {loadingSlots ? (
+                  <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('publicBooking.loadingSlots')}</Text>
+                ) : slotsError ? (
+                  <Alert variant="danger">{slotsError}</Alert>
+                ) : (
+                  <MonthCalendar year={calYear} month={calMonth} slotsGrouped={slotsGrouped} selectedDate={selectedDate}
+                    onSelectDate={(dateKey) => { setSelectedDate(dateKey); setSelectedSlot(null) }}
+                    onPrevMonth={() => { if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) } else setCalMonth(m => m - 1) }}
+                    onNextMonth={() => { if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) } else setCalMonth(m => m + 1) }}
+                    t={t} />
+                )}
+              </View>
+              <View gap="m" style={{ flex: 1, minWidth: 260 }}>
+                {selectedDate ? (
+                  <>
+                    <Title variant="tertiary">
+                      {(() => { const [y, m, d] = selectedDate.split('-').map(Number); return `${d} ${t(MONTH_KEYS[m - 1])} ${y}` })()}
+                    </Title>
+                    <SlotPicker slots={selectedDateSlots} selectedSlot={selectedSlot} onSelectSlot={setSelectedSlot} t={t} language={language} />
+                    {selectedSlot && <Button variant="primary" onClick={() => setStep('fill-form')}>{t('publicBooking.continue')}</Button>}
+                  </>
+                ) : (
+                  <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
+                    <Text color="secondary" style={{ textAlign: 'center' }}>{t('publicBooking.pickDate')}</Text>
+                  </View>
+                )}
+              </View>
             </View>
           </View>
+        ) : (
+          <View gap="m">
+            <Title variant="tertiary">{t('publicBooking.chooseService')}</Title>
+            {loadingServices ? (
+              <Text color="secondary">{t('publicBooking.loadingServices')}</Text>
+            ) : servicesError ? (
+              <Alert variant="danger">{servicesError}</Alert>
+            ) : (
+              <ServicePicker
+                services={services}
+                selectedService={selectedService}
+                onSelect={setSelectedService}
+                t={t}
+                language={language}
+              />
+            )}
+            {selectedService && (
+              <Button variant="primary" onClick={() => setStep('pick-slot')}>{t('publicBooking.continue')}</Button>
+            )}
+          </View>
         )}
       </View>
     </View>

package/src/save-availability.action.js

@@ -1,73 +1 @@
-import { nanoid } from 'nanoid'
-import { Aggregate } from '@ossy/event-store'
-import { Resource, ResourcesEvents, ResourcesQueries } from '@ossy/resources'
-
-export const id = 'booking/save-availability'
-export const access = 'workspace'
-
-export async function run({ payload, req, log }) {
-  const workspaceId = req?.workspaceId
-
-  if (!workspaceId) {
-    throw Object.assign(new Error('workspaceId is required'), { status: 400 })
-  }
-
-  const { weeklyWindows, sessionDurations, bufferMinutes, timezone } = payload ?? {}
-
-  log?.info(`[booking/save-availability] Saving availability for workspace ${workspaceId}`)
-
-  const content = {
-    weeklyWindows: weeklyWindows ?? [],
-    sessionDurations: Array.isArray(sessionDurations) && sessionDurations.length
-      ? sessionDurations
-      : [60],
-    bufferMinutes: bufferMinutes ?? 0,
-    timezone: timezone ?? 'Europe/Stockholm',
-  }
-
-  // Check if a config resource already exists for this workspace
-  const existing = await ResourcesQueries.GetResources({
-    type: '@ossy/booking/availability',
-    belongsTo: workspaceId,
-  })
-
-  // Identify the single config resource (new format has weeklyWindows array in content)
-  const configResource = existing.find(r => Array.isArray(r.content?.weeklyWindows))
-
-  if (configResource) {
-    log?.info(`[booking/save-availability] Updating existing resource ${configResource.id}`)
-
-    await Aggregate.Of(Resource, configResource.id)
-      .then(
-        Aggregate.Add(
-          ResourcesEvents.ContentUpdated({
-            createdBy: req?.userId ?? 'system',
-            content,
-          }),
-        ),
-      )
-      .then(Aggregate.Save())
-
-    return { id: configResource.id, content }
-  }
-
-  // No config resource found — create a new one
-  const resourceId = nanoid()
-  log?.info(`[booking/save-availability] Creating new resource ${resourceId}`)
-
-  const event = ResourcesEvents.Created({
-    aggregateId: resourceId,
-    type: '@ossy/booking/availability',
-    createdBy: req?.userId ?? 'system',
-    belongsTo: workspaceId,
-    location: '/availability/',
-    name: `availability-config.json`,
-    content,
-  })
-
-  await Aggregate.Of(Resource, event).then(Aggregate.View())
-
-  log?.info(`[booking/save-availability] Resource ${resourceId} created`)
-
-  return { id: resourceId, content }
-}
+export const metadata = { id: 'booking/save-availability', access: 'workspace' }

package/src/save-availability.task.js

@@ -0,0 +1,74 @@
+import { nanoid } from 'nanoid'
+import { Aggregate } from '@ossy/event-store'
+import { Resource, ResourcesEvents } from '@ossy/resources/server'
+import { getBookingResources } from './booking-resources.js'
+import { availability } from './locations.js'
+
+export const metadata = { id: 'booking/save-availability' }
+
+export async function run({ payload, req, log }) {
+  const workspaceId = req?.workspaceId
+
+  if (!workspaceId) {
+    throw Object.assign(new Error('workspaceId is required'), { status: 400 })
+  }
+
+  const { weeklyWindows, sessionDurations, bufferMinutes, timezone } = payload ?? {}
+
+  log?.info(`[booking/save-availability] Saving availability for workspace ${workspaceId}`)
+
+  const content = {
+    weeklyWindows: weeklyWindows ?? [],
+    sessionDurations: Array.isArray(sessionDurations) && sessionDurations.length
+      ? sessionDurations
+      : [60],
+    bufferMinutes: bufferMinutes ?? 0,
+    timezone: timezone ?? 'Europe/Stockholm',
+  }
+
+  // Check if a config resource already exists for this workspace
+  const existing = await getBookingResources({
+    type: '@ossy/booking/availability',
+    belongsTo: workspaceId,
+  })
+
+  // Identify the single config resource (new format has weeklyWindows array in content)
+  const configResource = existing.find(r => Array.isArray(r.content?.weeklyWindows))
+
+  if (configResource) {
+    log?.info(`[booking/save-availability] Updating existing resource ${configResource.id}`)
+
+    await Aggregate.Of(Resource, configResource.id)
+      .then(
+        Aggregate.Add(
+          ResourcesEvents.ContentUpdated({
+            createdBy: req?.userId ?? 'system',
+            content,
+          }),
+        ),
+      )
+      .then(Aggregate.Save())
+
+    return { id: configResource.id, content }
+  }
+
+  // No config resource found — create a new one
+  const resourceId = nanoid()
+  log?.info(`[booking/save-availability] Creating new resource ${resourceId}`)
+
+  const event = ResourcesEvents.Created({
+    aggregateId: resourceId,
+    type: '@ossy/booking/availability',
+    createdBy: req?.userId ?? 'system',
+    belongsTo: workspaceId,
+    location: availability,
+    name: `availability-config.json`,
+    content,
+  })
+
+  await Aggregate.Of(Resource, event).then(Aggregate.View())
+
+  log?.info(`[booking/save-availability] Resource ${resourceId} created`)
+
+  return { id: resourceId, content }
+}

package/src/send-booking-reminder.task.js

@@ -1,4 +1,4 @@
-import { ResourcesQueries } from '@ossy/resources'
+import { getBookingResources } from './booking-resources.js'
 import BookingReminderEmail from './booking-reminder.email.jsx'
 
 export const metadata = {
@@ -13,7 +13,7 @@ export async function run({ sdk, log, integrations }) {
 
   log?.info(`[booking/send-reminder] Checking bookings between ${windowStart} and ${windowEnd}`)
 
-  const allBookings = await ResourcesQueries.GetResources({
+  const allBookings = await getBookingResources({
     type: '@ossy/booking/booking',
   })
 

package/src/services.page.jsx

@@ -1,8 +1,13 @@
-import React from 'react'
-import { View, Title, Text, Button, Tags, useLocale } from '@ossy/design-system'
+import React, { useState, useEffect, useCallback } from 'react'
+import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
+import { useSdk } from '@ossy/sdk-react'
 import { Definition } from './Definition.js'
-import { moduleStatusTags } from './moduleStatus.js'
 import { ServiceCard } from './ServiceCard.jsx'
+import { metadata as CreateService } from './create-service.action.js'
+import { metadata as UpdateService } from './update-service.action.js'
+import { metadata as DeleteService } from './delete-service.action.js'
+import { metadata as GetServices } from './get-services.action.js'
+import { invokeErrorMessage } from './invoke-error-message.js'
 
 export const metadata = {
   id: 'booking/services',
@@ -12,8 +17,90 @@ export const metadata = {
   },
 }
 
-const ServicesPage = () => {
+const EMPTY_FORM = {
+  name: '',
+  duration: 60,
+  price: 0,
+  currency: 'SEK',
+  description: '',
+  active: true,
+}
+
+export default function ServicesPage () {
   const { t } = useLocale()
+  const sdk = useSdk()
+  const [services, setServices] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [formOpen, setFormOpen] = useState(false)
+  const [editingId, setEditingId] = useState(null)
+  const [form, setForm] = useState(EMPTY_FORM)
+  const [saving, setSaving] = useState(false)
+
+  const loadServices = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await sdk.invoke(GetServices, { includeInactive: true })
+      setServices(Array.isArray(data) ? data : [])
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [sdk, t])
+
+  useEffect(() => {
+    loadServices()
+  }, [loadServices])
+
+  const openCreate = () => {
+    setEditingId(null)
+    setForm(EMPTY_FORM)
+    setFormOpen(true)
+  }
+
+  const openEdit = (service) => {
+    setEditingId(service.id)
+    setForm({
+      name: service.name ?? '',
+      duration: service.duration ?? 60,
+      price: service.price ?? 0,
+      currency: service.currency ?? 'SEK',
+      description: service.description ?? '',
+      active: service.active !== false,
+    })
+    setFormOpen(true)
+  }
+
+  const handleSave = async () => {
+    if (!form.name.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      const bookingAction = editingId ? UpdateService : CreateService
+      const body = editingId ? { serviceId: editingId, ...form } : form
+      await sdk.invoke(bookingAction, body)
+      setFormOpen(false)
+      await loadServices()
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('booking.services.errorSave')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (serviceId) => {
+    if (!window.confirm(t('booking.services.deleteConfirm'))) return
+    setError(null)
+    try {
+      await sdk.invoke(DeleteService, { serviceId })
+      await loadServices()
+    } catch (err) {
+      setError(await invokeErrorMessage(err, t('booking.services.errorDelete')))
+    }
+  }
+
   return (
     <View
       gap="m"
@@ -21,45 +108,78 @@ const ServicesPage = () => {
       style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
     >
       <View inset="s" gap="s">
-        <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0 }}>
-          <View layout="row" gap="s" alignItems="center">
-            <Title>{Definition.title} — {t('booking.services.titleSuffix')}</Title>
-            {moduleStatusTags(Definition).length > 0 && (
-              <Tags tags={moduleStatusTags(Definition)} size="s" />
-            )}
-          </View>
-          <Button variant="primary" size="s">{t('booking.services.addService')}</Button>
+        <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0, flexWrap: 'wrap', gap: 'var(--space-s)' }}>
+          <Title>{Definition.title} — {t('booking.services.titleSuffix')}</Title>
+          <Button variant="primary" size="s" onClick={openCreate}>{t('booking.services.addService')}</Button>
         </View>
-
-        <Text style={{ maxWidth: '400px' }}>
-          {t('booking.services.description')}
-        </Text>
+        <Text style={{ maxWidth: '480px' }}>{t('booking.services.description')}</Text>
       </View>
 
-      <View gap="s" inset="s">
-        <Title variant="secondary">{t('booking.services.yourServices')}</Title>
+      {error && <Alert variant="danger">{error}</Alert>}
 
-        <View gap="s">
-          <ServiceCard
-            name={t('booking.services.example.introCall.name')}
-            duration={30}
-            price={0}
-            currency="SEK"
-            description={t('booking.services.example.introCall.description')}
-            active
-          />
-          <ServiceCard
-            name={t('booking.services.example.strategy.name')}
-            duration={60}
-            price={150000}
-            currency="SEK"
-            description={t('booking.services.example.strategy.description')}
-            active
-          />
+      {formOpen && (
+        <View gap="m" surface="secondary" roundness="m" inset="m">
+          <Title variant="tertiary">{editingId ? t('booking.services.editService') : t('booking.services.newService')}</Title>
+          <View gap="xs">
+            <Text weight="medium">{t('booking.services.field.name')}</Text>
+            <Input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
+          </View>
+          <View gap="xs">
+            <Text weight="medium">{t('booking.services.field.duration')}</Text>
+            <Input type="number" value={String(form.duration)} onChange={e => setForm(f => ({ ...f, duration: Number(e.target.value) || 60 }))} />
+          </View>
+          <View gap="xs">
+            <Text weight="medium">{t('booking.services.field.price')}</Text>
+            <Input type="number" value={String(form.price)} onChange={e => setForm(f => ({ ...f, price: Number(e.target.value) || 0 }))} />
+          </View>
+          <View gap="xs">
+            <Text weight="medium">{t('booking.services.field.currency')}</Text>
+            <Input value={form.currency} onChange={e => setForm(f => ({ ...f, currency: e.target.value }))} />
+          </View>
+          <View gap="xs">
+            <Text weight="medium">{t('booking.services.field.description')}</Text>
+            <Textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} rows={3} />
+          </View>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <input type="checkbox" checked={form.active} onChange={e => setForm(f => ({ ...f, active: e.target.checked }))} />
+            <Text>{t('booking.services.field.active')}</Text>
+          </label>
+          <View layout="row" gap="s">
+            <Button data-action={editingId ? UpdateService.id : CreateService.id} variant="primary" disabled={saving} onClick={handleSave}>
+              {saving ? t('booking.services.saving') : t('booking.services.save')}
+            </Button>
+            <Button variant="neutral" onClick={() => setFormOpen(false)}>{t('booking.services.cancel')}</Button>
+          </View>
         </View>
+      )}
+
+      <View gap="s" inset="s">
+        <Title variant="secondary">{t('booking.services.yourServices')}</Title>
+        {loading ? (
+          <Text color="secondary">{t('booking.services.loading')}</Text>
+        ) : services.length === 0 ? (
+          <Text color="secondary">{t('booking.services.empty')}</Text>
+        ) : (
+          <View gap="s">
+            {services.map(service => (
+              <View key={service.id} gap="xs">
+                <ServiceCard
+                  name={service.name}
+                  duration={service.duration}
+                  price={service.price}
+                  currency={service.currency}
+                  description={service.description}
+                  active={service.active !== false}
+                />
+                <View layout="row" gap="s">
+                  <Button variant="link" size="s" onClick={() => openEdit(service)}>{t('booking.services.edit')}</Button>
+                  <Button data-action={DeleteService.id} variant="link" size="s" onClick={() => handleDelete(service.id)}>{t('booking.services.delete')}</Button>
+                </View>
+              </View>
+            ))}
+          </View>
+        )}
       </View>
     </View>
   )
 }
-
-export default ServicesPage