@ossy/booking 1.13.2 → 1.14.0

package/src/bookings.page.jsx

@@ -1,9 +1,26 @@
-import React from 'react'
-import { View, Title, Text, Tags } from '@ossy/design-system'
-import { Definition } from './Definition.js'
-import { moduleStatusTags } from './moduleStatus.js'
-import { BookingList } from './BookingList.jsx'
+import React, { useState, useEffect, useCallback } from 'react'
+import { BookingCard } from './booking-card.component.jsx'
 
+// ---------------------------------------------------------------------------
+// Tokens
+// ---------------------------------------------------------------------------
+const C = {
+  bg: '#fafafa',
+  surface: '#ffffff',
+  border: '#e4e4e7',
+  primary: '#111111',
+  secondary: '#52525b',
+  muted: '#a1a1aa',
+  tabActive: '#111111',
+  tabActiveBg: '#f4f4f5',
+  tabText: '#52525b',
+  errorText: '#dc2626',
+}
+const FONT = 'system-ui, -apple-system, sans-serif'
+
+// ---------------------------------------------------------------------------
+// Page metadata
+// ---------------------------------------------------------------------------
 export const metadata = {
   id: 'booking/bookings',
   path: {
@@ -12,31 +29,271 @@ export const metadata = {
   },
 }
 
-const BookingsPage = () => (
-  <View
-    gap="m"
-    surface="primary"
-    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
-  >
-    <View inset="s" gap="s">
-      <View layout="row" gap="s" alignItems="center">
-        <Title>{Definition.title} — Bookings</Title>
-        {moduleStatusTags(Definition).length > 0 && (
-          <Tags tags={moduleStatusTags(Definition)} size="s" />
+// ---------------------------------------------------------------------------
+// Tab bar
+// ---------------------------------------------------------------------------
+const TABS = [
+  { id: 'pending', label: 'Förfrågningar' },
+  { id: 'confirmed', label: 'Bekräftade' },
+  { id: 'all', label: 'Alla' },
+]
+
+function TabBar({ activeId, onChange, counts }) {
+  return (
+    <div style={{ display: 'flex', gap: 4, borderBottom: `1px solid ${C.border}`, marginBottom: 20 }}>
+      {TABS.map(tab => {
+        const isActive = tab.id === activeId
+        const count = counts?.[tab.id]
+        return (
+          <button
+            key={tab.id}
+            onClick={() => onChange(tab.id)}
+            style={{
+              background: 'none',
+              border: 'none',
+              borderBottom: isActive ? `2px solid ${C.primary}` : '2px solid transparent',
+              padding: '10px 14px',
+              marginBottom: -1,
+              fontFamily: FONT,
+              fontSize: 13,
+              fontWeight: isActive ? 600 : 400,
+              color: isActive ? C.primary : C.secondary,
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              whiteSpace: 'nowrap',
+              transition: 'color 0.1s',
+            }}
+          >
+            {tab.label}
+            {count != null && count > 0 && (
+              <span
+                style={{
+                  background: isActive ? C.primary : C.border,
+                  color: isActive ? '#fff' : C.secondary,
+                  borderRadius: 999,
+                  fontSize: 10,
+                  fontWeight: 700,
+                  padding: '1px 6px',
+                  lineHeight: 1.5,
+                }}
+              >
+                {count}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+function EmptyState({ tab }) {
+  const messages = {
+    pending: { icon: '📭', heading: 'Inga förfrågningar', body: 'Du har inga väntande bokningsförfrågningar just nu.' },
+    confirmed: { icon: '📅', heading: 'Inga bekräftade bokningar', body: 'Bekräftade bokningar visas här.' },
+    all: { icon: '🗂', heading: 'Inga bokningar', body: 'Bokningar från dina klienter visas här.' },
+  }
+  const m = messages[tab] ?? messages.all
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 24px',
+        color: C.muted,
+        fontFamily: FONT,
+        textAlign: 'center',
+        gap: 8,
+      }}
+    >
+      <span style={{ fontSize: 32 }}>{m.icon}</span>
+      <span style={{ fontSize: 15, fontWeight: 600, color: C.secondary }}>{m.heading}</span>
+      <span style={{ fontSize: 13 }}>{m.body}</span>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Spinner
+// ---------------------------------------------------------------------------
+function Spinner() {
+  return (
+    <>
+      <style href="booking/spinner" precedence="low">
+        {`@keyframes booking-spin { to { transform: rotate(360deg) } }`}
+      </style>
+      <div
+        style={{
+          width: 22,
+          height: 22,
+          border: '3px solid #e4e4e7',
+          borderTopColor: C.primary,
+          borderRadius: '50%',
+          animation: 'booking-spin 0.7s linear infinite',
+          margin: '40px auto',
+        }}
+      />
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+export default function BookingsPage({ workspaceId }) {
+  const [activeTab, setActiveTab] = useState('pending')
+  const [bookings, setBookings] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const loadBookings = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch('/actions/booking/list', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.message ?? `Fel ${res.status}`)
+      }
+      const data = await res.json()
+      setBookings(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadBookings()
+  }, [loadBookings])
+
+  // Filtered views
+  const pending = bookings.filter(b => b.status === 'pending')
+  const confirmed = bookings.filter(b => b.status === 'confirmed')
+  const visible = activeTab === 'pending' ? pending : activeTab === 'confirmed' ? confirmed : bookings
+
+  const counts = { pending: pending.length, confirmed: confirmed.length, all: bookings.length }
+
+  // Actions
+  const handleConfirm = async (booking) => {
+    const res = await fetch('/actions/booking/confirm', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ bookingId: booking.id }),
+    })
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data?.message ?? 'Bekräftning misslyckades')
+    }
+    await loadBookings()
+  }
+
+  const handleDecline = async (booking) => {
+    const res = await fetch('/actions/booking/decline', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ bookingId: booking.id }),
+    })
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data?.message ?? 'Avböjning misslyckades')
+    }
+    await loadBookings()
+  }
+
+  const handleCancel = async (booking) => {
+    const res = await fetch('/actions/booking/cancel', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ bookingId: booking.id }),
+    })
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data?.message ?? 'Avbokning misslyckades')
+    }
+    await loadBookings()
+  }
+
+  const handleView = (booking) => {
+    window.location.href = `/bokningar/${booking.id}`
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily: FONT,
+        height: '100%',
+        overflowY: 'auto',
+        background: C.bg,
+        padding: 'var(--space-m, 16px) var(--space-l, 24px)',
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* Page header */}
+      <div style={{ marginBottom: 24 }}>
+        <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: C.primary }}>
+          Bokningar
+        </h1>
+        <p style={{ margin: '4px 0 0', fontSize: 14, color: C.secondary }}>
+          Hantera bokningsförfrågningar och bekräftade möten.
+        </p>
+      </div>
+
+      {/* Content card */}
+      <div
+        style={{
+          background: C.surface,
+          border: `1px solid ${C.border}`,
+          borderRadius: 12,
+          padding: '20px 24px',
+        }}
+      >
+        <TabBar activeId={activeTab} onChange={setActiveTab} counts={counts} />
+
+        {loading ? (
+          <Spinner />
+        ) : error ? (
+          <div
+            style={{
+              padding: '24px',
+              fontSize: 14,
+              color: C.errorText,
+              textAlign: 'center',
+              fontFamily: FONT,
+            }}
+          >
+            {error}
+          </div>
+        ) : visible.length === 0 ? (
+          <EmptyState tab={activeTab} />
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {visible.map(booking => (
+              <BookingCard
+                key={booking.id}
+                booking={booking}
+                onConfirm={booking.status === 'pending' ? handleConfirm : undefined}
+                onDecline={booking.status === 'pending' ? handleDecline : undefined}
+                onCancel={booking.status === 'confirmed' ? handleCancel : undefined}
+                onView={handleView}
+              />
+            ))}
+          </div>
         )}
-      </View>
-
-      <Text style={{ maxWidth: '400px' }}>
-        Incoming appointments from your clients.
-      </Text>
-    </View>
-
-    <View gap="s" inset="s">
-      <Title variant="secondary">Upcoming</Title>
-      {/* TODO: load bookings via booking.get-bookings view, filtered by status=confirmed */}
-      <BookingList bookings={[]} />
-    </View>
-  </View>
-)
-
-export default BookingsPage
+      </div>
+    </div>
+  )
+}

package/src/create-booking.action.js

@@ -37,13 +37,25 @@ export async function run({ payload, log, integrations }) {
     belongsTo: consultantId,
   })
 
-  const weeklyWindows = availabilityResources.map(r => ({
-    dayOfWeek: r.content?.dayOfWeek,
-    startTime: r.content?.startTime ?? '09:00',
-    endTime: r.content?.endTime ?? '17:00',
-  })).filter(w => w.dayOfWeek != null)
+  // New format: single resource with weeklyWindows array in content
+  const configResource = availabilityResources.find(r => Array.isArray(r.content?.weeklyWindows))
+  let weeklyWindows, firstResource
+
+  if (configResource) {
+    weeklyWindows = configResource.content.weeklyWindows ?? []
+    firstResource = configResource
+  } else {
+    // Legacy format: one resource per day
+    firstResource = availabilityResources[0]
+    weeklyWindows = availabilityResources
+      .map(r => ({
+        dayOfWeek: r.content?.dayOfWeek,
+        startTime: r.content?.startTime ?? '09:00',
+        endTime: r.content?.endTime ?? '17:00',
+      }))
+      .filter(w => w.dayOfWeek != null)
+  }
 
-  const firstResource = availabilityResources[0]
   const availability = {
     weeklyWindows,
     bufferMinutes: firstResource?.content?.bufferMinutes ?? 0,

package/src/get-availability.action.js

@@ -0,0 +1,52 @@
+import { ResourcesQueries } from '@ossy/resources'
+
+export const id = 'booking/get-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 })
+  }
+
+  log?.info(`[booking/get-availability] Loading availability for workspace ${workspaceId}`)
+
+  const resources = await ResourcesQueries.GetResources({
+    type: '@ossy/booking/availability',
+    belongsTo: workspaceId,
+  })
+
+  if (!resources.length) {
+    log?.info('[booking/get-availability] No availability configured')
+    return null
+  }
+
+  // New format: single resource with weeklyWindows array
+  const configResource = resources.find(r => Array.isArray(r.content?.weeklyWindows))
+  if (configResource) {
+    return {
+      id: configResource.id,
+      weeklyWindows: configResource.content.weeklyWindows ?? [],
+      sessionDurations: configResource.content.sessionDurations ?? [60],
+      bufferMinutes: configResource.content.bufferMinutes ?? 0,
+      timezone: configResource.content.timezone ?? 'Europe/Stockholm',
+    }
+  }
+
+  // Legacy format: one resource per day — reconstruct config shape
+  const firstResource = resources[0]
+  return {
+    id: firstResource.id,
+    weeklyWindows: resources
+      .map(r => ({
+        dayOfWeek: r.content?.dayOfWeek,
+        startTime: r.content?.startTime ?? '09:00',
+        endTime: r.content?.endTime ?? '17:00',
+      }))
+      .filter(w => w.dayOfWeek != null),
+    sessionDurations: [firstResource?.content?.sessionDuration ?? 60],
+    bufferMinutes: firstResource?.content?.bufferMinutes ?? 0,
+    timezone: firstResource?.content?.timezone ?? 'Europe/Stockholm',
+  }
+}

package/src/get-available-slots.action.js

@@ -26,13 +26,25 @@ export async function run({ payload, log }) {
     return []
   }
 
-  const weeklyWindows = availabilityResources.map(r => ({
-    dayOfWeek: r.content?.dayOfWeek,
-    startTime: r.content?.startTime ?? '09:00',
-    endTime: r.content?.endTime ?? '17:00',
-  })).filter(w => w.dayOfWeek != null)
+  // New format: single resource with weeklyWindows array in content
+  const configResource = availabilityResources.find(r => Array.isArray(r.content?.weeklyWindows))
+  let weeklyWindows, firstResource
+
+  if (configResource) {
+    weeklyWindows = configResource.content.weeklyWindows ?? []
+    firstResource = configResource
+  } else {
+    // Legacy format: one resource per day
+    firstResource = availabilityResources[0]
+    weeklyWindows = availabilityResources
+      .map(r => ({
+        dayOfWeek: r.content?.dayOfWeek,
+        startTime: r.content?.startTime ?? '09:00',
+        endTime: r.content?.endTime ?? '17:00',
+      }))
+      .filter(w => w.dayOfWeek != null)
+  }
 
-  const firstResource = availabilityResources[0]
   const availability = {
     weeklyWindows,
     bufferMinutes: firstResource?.content?.bufferMinutes ?? 0,
@@ -58,7 +70,11 @@ export async function run({ payload, log }) {
       status: 'confirmed',
     }))
 
-  const slotDuration = duration ?? firstResource?.content?.sessionDuration ?? DEFAULT_DURATION
+  const sessionDurations = configResource
+    ? (configResource.content.sessionDurations ?? [DEFAULT_DURATION])
+    : [firstResource?.content?.sessionDuration ?? DEFAULT_DURATION]
+
+  const slotDuration = duration ?? sessionDurations[0] ?? DEFAULT_DURATION
 
   const slots = getAvailableSlots({
     availability,

package/src/list-bookings.action.js

@@ -0,0 +1,36 @@
+import { ResourcesQueries } from '@ossy/resources'
+
+export const id = 'booking/list'
+export const access = 'workspace'
+
+export async function run({ payload, req, log }) {
+  const workspaceId = req?.workspaceId
+  const status = payload?.status ?? null
+
+  log?.info(`[booking/list] Loading bookings for workspace ${workspaceId}`, { status })
+
+  const resources = await ResourcesQueries.GetResources({
+    type: '@ossy/booking/booking',
+    belongsTo: workspaceId,
+  })
+
+  let bookings = resources.map(r => ({
+    id: r.id,
+    ...r.content,
+    createdAt: r.createdAt,
+  }))
+
+  if (status) {
+    bookings = bookings.filter(b => b.status === status)
+  }
+
+  bookings.sort((a, b) => {
+    const dateA = new Date(a.startsAt ?? a.createdAt ?? 0).getTime()
+    const dateB = new Date(b.startsAt ?? b.createdAt ?? 0).getTime()
+    return dateB - dateA
+  })
+
+  log?.info(`[booking/list] Found ${bookings.length} booking(s)`)
+
+  return bookings
+}

package/src/save-availability.action.js

@@ -0,0 +1,73 @@
+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 }
+}