@nuxt-customer-portal/planning 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+## 0.4.0
+
+### Minor Changes
+
+- 59c8921: Add an organization-scoped, searchable and paginated synchronization task dashboard with activity sorting and individual retry actions.
+- 59c8921: Guide providers through connecting and fixing a writable main calendar before choosing optional conflict calendars, and show those calendars' busy periods in the availability view, including external events from the main calendar. Availability events now use a configurable calendar title and list the applicable products in their description. Sandbox bookings skip meeting-provider creation while still syncing appointments to the main calendar when development effects are enabled.
+- 59c8921: Add optional plannable service products with provider availability, Google Calendar and Zoom connections, 60-minute checkout reservations, appointment invitations, paid rescheduling, and policy-based cancellation refunds. Extend the product catalog and checkout integration while preserving ordinary purchases.
+
+### Patch Changes
+
+- 59c8921: Share appointment time formatting across Planning and checkout, respecting browser locale preferences and displaying midnight concisely.
+
+  Present checkout booking details with distinct date, time, and provider rows and a stable live reservation countdown.
+
+- 59c8921: Reduce scheduled calendar repair frequency, avoid rewriting existing Zoom meetings during repair, and defer Zoom rate-limit retries until the next UTC day.
+- 59c8921: Allow admins to configure maximum displayed appointment start-time spacing alongside minimum notice and start interval. Apply clock-aligned spacing server-side and default existing policies to 30 minutes.
+- 59c8921: Let customers select and review a booking time before explicitly continuing to checkout. Reserve only on confirmation and clear the selection when the date, timezone, provider, month, or currency changes.
+- 59c8921: Keep the selected appointment and checkout action together beneath a stable calendar workspace on desktop and in a safe-area-aware pinned bar on mobile. Compact the mobile offering summary and let customers move between the full calendar and an animated time-selection panel at every screen size, with reduced-motion support.
+- 59c8921: Add role-aware planning dashboard cards for upcoming appointments, schedule totals, conflicts, and common actions.
+- 59c8921: Present purchased files as reusable document cards, add them to appointment and purchase detail drawers, and use compact purchase cards in a fixed-toolbar collection layout.
+- 59c8921: Release unpaid booking holds before returning to time selection. Atomically replace the previous hold when choosing another time in the same tab, preserving it if the new slot cannot be reserved. Session-bound credentials cannot release confirmed bookings or holds attached to an order.
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+  - @nuxt-customer-portal/core@0.4.0
+  - @nuxt-customer-portal/products@0.4.0
+  - @nuxt-customer-portal/ui@0.4.0
+
+## Unreleased
+
+- Add plannable services, availability, calendar connections, reservations and appointment management.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuxt Customer Portal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# Planning
+
+Optional service-product scheduling for Nuxt Customer Portal. Requires `products` and its dependencies; paid commerce also requires the existing invoice-products integration. This extension builds on products issue #22 / PR #23.
+
+## Installation
+
+Add `@nuxt-customer-portal/planning` as a dependency and to `portal.config.ts` after `products` and before running the portal migration command:
+
+```ts
+layers: [
+  '@nuxt-customer-portal/preset',
+  '@nuxt-customer-portal/products',
+  '@nuxt-customer-portal/invoice-products',
+  '@nuxt-customer-portal/planning'
+]
+```
+
+The migration requires permission to install PostgreSQL's `btree_gist` extension. It adds scheduling tables and a provider/time exclusion constraint. Existing products default to ordinary checkout until explicitly marked plannable. Existing product JSON requires no backfill. Removing the planning layer prevents checkout and processing of plannable services; retain it while appointments or payment operations are outstanding.
+
+Run Nitro's scheduled tasks every minute in production. HTTP deployments need a reachable HTTPS public URL for Google change notifications. Calendar checks remain live on booking requests; a five-minute polling fallback detects external conflicts and repairs portal mirrors when notifications are unavailable. Ensure only trusted proxy headers determine public API client IPs.
+
+## Credentials and setup
+
+Use dedicated Google and Zoom OAuth applications, separate from portal sign-in applications:
+
+```dotenv
+PLANNING_ENCRYPTION_KEY=<base64-encoded 32-byte random key>
+PLANNING_GOOGLE_CLIENT_ID=
+PLANNING_GOOGLE_CLIENT_SECRET=
+PLANNING_ZOOM_CLIENT_ID=
+PLANNING_ZOOM_CLIENT_SECRET=
+```
+
+Generate the encryption key with `openssl rand -base64 32`. Keep this key stable and backed up with the encrypted database. OAuth tokens are encrypted with AES-256-GCM and never returned through setup APIs.
+
+Register redirect URLs using the portal's configured public origin:
+
+- `/api/planning/oauth/google/callback`
+- `/api/planning/oauth/zoom/callback`
+
+For local Google development use `http://localhost:3052`. Zoom requires the portal's configured public origin to be reachable over HTTPS; a local reverse proxy with a stable HTTPS hostname can forward to `http://localhost:3052`. Register the standard `/api/planning/oauth/zoom/callback` path on that hostname. Google authorization requests Calendar events, Calendar list read access, free/busy access, and identity/email.
+
+Configure the Zoom user-managed application with these user-level granular scopes (without the `:admin` variants):
+
+- Users → Get a user: `user:read:user`
+- Meetings → List meetings: `meeting:read:list_meetings`
+- Meetings → Get a meeting: `meeting:read:meeting`
+- Meetings → Create a meeting: `meeting:write:meeting`
+- Meetings → Update a meeting: `meeting:update:meeting`
+- Meetings → Delete a meeting: `meeting:delete:meeting`
+
+Enable appropriate test users or publish/verify the provider applications before connecting other users. Zoom account meeting limits still apply.
+
+In hosts using SaaS configuration, enable the Planning module alongside Products. Admins enable planning per organization member at `/admin/planning`. Providers connect accounts, choose calendars, timezone and after-appointment grace time, and create availability at `/availability`. Choose several calendars for conflicts and one writable calendar; the writable calendar is automatically included in conflict checks. Assign providers to a service in the existing product editor and supply a positive duration. A product may be free, and may require Zoom or have no online meeting.
+
+## Availability and reservations
+
+Availability supports individual windows and weekly series, end dates, skipped occurrences, and edits to one occurrence or the entire series. Windows apply to all assigned plannable products, including future assignments, or to selected products. UTC slot iteration preserves duration across daylight-saving changes and presents repeated wall times with timezone information.
+
+Changing a provider's scheduling timezone keeps availability at its configured local wall times in the new timezone. Confirmed appointments retain their original UTC instants and timezone snapshots. Product and grace-time changes likewise do not alter confirmed appointments.
+
+Google availability mirrors are free events; confirmed appointments are busy events with the grace time described. Customer checkout holds remain internal. Portal mirrors are managed from the portal; external edits/removals are repaired and reported to the provider. Personal Google events get no additional grace time. New conflicts preserve confirmed bookings and alert their provider.
+
+Catalog products expose `planningEnabled`, `durationMinutes`, and the existing `purchaseUrl`, which points to `/store/{slug}/book` for plannable services. Customers choose their timezone, any available provider or a named provider, then a slot. Exactly one appointment product, quantity one, is supported per checkout.
+
+The default hold is **60 minutes from selection**, configurable by organization policy/product override. Its opaque credential is bound to an HTTP-only browser cookie. Changing browsers requires selecting another slot. Stripe checkout does not extend the hold: its minimum session lifetime can exceed the remaining reservation time, so scheduled tasks explicitly close it at the original deadline. Payment completion timestamps come from verified Stripe events or authoritative success-event reconciliation, rather than webhook delivery time. Late payments never reclaim released inventory and are refunded through durable jobs. Appointment checkout currently uses card payments. Free products confirm after checkout without Stripe.
+
+Calendar API failure closes new availability and retries paid-order processing. Google and PostgreSQL cannot be atomically locked together; conflicts appearing after confirmation are flagged for provider resolution.
+
+## Appointment management and policies
+
+Guest customers sign in or verify a portal account and claim purchases by verified email before managing appointments at `/appointments`. Other users cannot manage those appointments.
+
+Organization defaults can be overridden per product. Defaults: 60-minute hold, 15-minute start intervals, 90-day horizon, 24-hour booking notice, one free completed change, 24-hour change cutoff, and cancellation disabled. Configure a positive change fee in each supported booking currency to enable changes after the allowance. Monetary storage uses integer minor units; the policy UI displays currency amounts.
+
+Customers may change to any currently eligible provider for the same product. The original appointment remains confirmed until replacement checkout succeeds. Free changes still require checkout; paid changes use a separate fee order and invoice. Failed/expired changes preserve the original and do not consume the allowance. Existing appointment duration and policy remain fixed. Reschedule/cancellation cutoffs are evaluated before accepting the customer action.
+
+Cancellation must be explicitly enabled. Configure one notice cutoff and a refund percentage. Cancellation releases internal occupancy immediately and updates the calendar invitation and meeting through retryable tasks. Refunds cover the original appointment purchase, excluding separately earned change fees, capped by its remaining refundable balance. Refund failures do not undo cancellation. Reconciliation preserves invoice/credit-note behavior through the existing commerce integration.
+
+Appointment invites keep their UID, organizer and incrementing sequence across changes and cancellations. Meetings, mirror updates and email use retryable jobs and stable identifiers. Admins can see appointments, conflicts and outstanding synchronization/refund jobs, and retry them at `/admin/planning`. The database retains an audit trail and permanent reservation confirmation evidence so replaying an original purchase never reverses a later reschedule or cancellation.
+
+## APIs and adapters
+
+Public portal-origin booking mutations:
+
+- `GET /api/store/planning/{productId}/availability?from=...&to=...`
+- `POST /api/store/planning/holds`
+- `DELETE /api/store/planning/hold` releases a session-bound hold before an order is created. Checkout waits for this release before returning to time selection. A new hold can supply `previousHoldToken` to atomically replace an unbound hold for the same product; failed slot validation rolls back the replacement. Browser-back/abandoned holds otherwise expire normally.
+- `GET /api/store/planning/hold?holdToken=...`
+- Existing `POST /api/store/checkout`, extended with `holdToken`.
+
+Provider/session APIs under `/api/planning` manage account connections, selected calendars, settings and availability. Verified customer APIs under `/api/planning/appointments` list, quote changes, expose replacement availability, and cancel appointments. Organization administrator APIs under `/api/planning/admin` manage provider switches/policy and expose appointments/jobs.
+
+`CalendarAdapter`, `MeetingAdapter`, and `registerPlanningAdapters` provide provider-neutral extension seams. `PlanningOrderIntegration` links checkout validation, reservation binding, pre-confirmation calendar checks and transactional confirmation to products. External provider API operations run outside database transactions.
+
+## Verification
+
+```sh
+node --import tsx --test packages/planning/test/planning.test.ts
+PLANNING_TEST_DATABASE_URL=postgresql://.../portal_planning_test node --import tsx --test packages/planning/test/database.test.ts
+```
+
+The database test requires an empty disposable database named `portal_planning_test` or `portal_planning_test_<suffix>` and applies actual core, client, product and planning migrations. It uses real portal authentication and PostgreSQL, with Google/Zoom/Stripe/email fixtures that never send external requests. Recreate the disposable database before rerunning.
+
+Before enabling live booking, connect Google/Zoom test accounts and verify consent/refresh, selected-calendar permissions, notification renewal, availability mirrors, real busy events, meeting creation and invitation delivery. These require provider credentials and approved test accounts; fixtures do not replace that deployment verification.
+
+### Appointment administration
+
+The Appointments menu includes the appointment collection, provider availability, and planning settings. Active members of the provider organization can view its appointments; organization owners and admins can reschedule or cancel them. Customers can view and manage only their own claimed purchases, subject to the policy recorded at booking. Staff reschedules preserve the customer change allowance. Cancellation retains order and appointment history, and refunds remain subject to eligibility. New appointments use booking and checkout.
+
+Planning settings use separate components for the Team members, Booking policy, and Synchronization tabs, with the same tab styling as Store settings.
+
+Personal connections and preferences are managed under My appointment settings (`/planning/settings`): Calendar settings contains Google connection, timezone, grace time, and calendar selection; Meeting settings contains the Zoom connection. Availability (`/availability`) contains only the availability editor and appointment blocks.
+
+Sandbox bookings use internal availability, holds, and appointments without requiring Google or Zoom connections or external calendar conflict checks. Live bookings still require healthy connections and configured calendars.

package/app/components/PlanningAppointmentCreateForm.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { z } from 'zod'
+
+const emit = defineEmits<{ cancel: [] }>(),
+  api = usePlanning(),
+  { t, locale } = useI18n(),
+  products = ref<Array<{ slug: string; title: string }>>([]),
+  state = reactive({ slug: '' }),
+  error = ref('')
+const schema = computed(() => z.object({ slug: z.string().min(1, t('planning.chooseProduct')) }))
+try {
+  products.value = await api.bookableProducts()
+} catch {
+  error.value = t('planning.loadError')
+}
+async function book() {
+  await navigateTo({ path: `/store/${encodeURIComponent(state.slug)}/book`, query: { locale: locale.value } })
+}
+</script>
+
+<template>
+  <UCard class="scroll-mt-24" @keydown.esc.stop="emit('cancel')"
+    ><template #header
+      ><div class="flex items-center justify-between gap-2">
+        <h2 class="font-semibold">{{ t('planning.newAppointment') }}</h2>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          :aria-label="t('planning.close')"
+          @click="emit('cancel')"
+        /></div></template
+    ><UAlert v-if="error" color="error" variant="outline" :title="error" />
+    <p class="mb-4 text-sm text-muted">{{ t('planning.newAppointmentNotice') }}</p>
+    <UForm :state="state" :schema="schema" novalidate class="space-y-4" @submit="book"
+      ><UFormField name="slug" :label="t('planning.product')"
+        ><USelectMenu
+          v-model="state.slug"
+          :items="products.map((p) => ({ value: p.slug, label: p.title }))"
+          value-key="value"
+          class="w-full"
+      /></UFormField>
+      <div class="flex justify-end gap-2">
+        <UButton color="neutral" variant="outline" @click="emit('cancel')">{{ t('planning.cancelAction') }}</UButton
+        ><UButton type="submit" :disabled="!state.slug">{{ t('planning.chooseTime') }}</UButton>
+      </div></UForm
+    ></UCard
+  >
+</template>

package/app/components/PlanningAppointmentDetails.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { AppointmentDetails, HoldResult } from '../composables/usePlanning'
+import type { Slot } from '../../shared/types'
+import { formatMoney } from '@nuxt-customer-portal/products/shared/money'
+
+const props = withDefaults(defineProps<{ id: string; timezone?: string; showSummary?: boolean }>(), {
+  showSummary: true
+})
+const emit = defineEmits<{ changed: [] }>()
+const { appointmentRange } = usePlanningTimeDisplay()
+const api = usePlanning(),
+  { t, locale } = useI18n(),
+  item = ref<AppointmentDetails>(),
+  error = ref(''),
+  busy = ref(false),
+  changeOpen = ref(false),
+  cancelOpen = ref(false)
+async function load() {
+  try {
+    item.value = await api.appointment(props.id)
+  } catch {
+    error.value = t('planning.loadError')
+  }
+}
+await load()
+async function reserved(hold: HoldResult) {
+  await navigateTo({
+    path: `/store/${encodeURIComponent(item.value!.productSlug)}`,
+    query: { appointmentId: item.value!.id, holdToken: hold.holdToken, currency: hold.currency, locale: locale.value }
+  })
+}
+async function abandonChange() {
+  busy.value = true
+  try {
+    await api.abandonChange(item.value!.id)
+    await load()
+    emit('changed')
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+async function selected(slot: Slot, timezone: string) {
+  if (busy.value) {
+    return
+  }
+  busy.value = true
+  try {
+    await api.staffReschedule(item.value!.id, {
+      providerUserId: slot.providerUserId,
+      start: slot.start,
+      customerTimezone: timezone,
+      revision: item.value!.revision
+    })
+    changeOpen.value = false
+    await load()
+    emit('changed')
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+async function cancel() {
+  busy.value = true
+  try {
+    await api.cancel(item.value!.id)
+    cancelOpen.value = false
+    await load()
+    emit('changed')
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="space-y-5">
+      <UAlert v-if="error" variant="outline" color="error" :title="error" /><template v-if="item">
+        <template v-if="showSummary">
+          <h1 class="text-2xl font-bold">{{ item.title }}</h1>
+          <p>
+            {{ appointmentRange(item.start, item.end, timezone || item.customerTimezone) }}
+          </p>
+          <p>{{ item.providerName }} · {{ t(`planning.${item.status}`) }}</p>
+        </template>
+        <UButton
+          v-if="showSummary && item.status === 'confirmed' && item.meetingUrl"
+          :to="item.meetingUrl"
+          target="_blank"
+          >{{ t(item.meetingProvider === 'zoom' ? 'planning.joinZoom' : 'planning.joinMeeting') }}</UButton
+        >
+        <UAlert v-if="item.pendingChangeExpiresAt" variant="outline" :title="t('planning.pendingChange')" />
+        <UButton
+          v-if="item.pendingChangeExpiresAt && item.canManage"
+          variant="outline"
+          :loading="busy"
+          @click="abandonChange"
+          >{{ t('planning.abandonChange') }}</UButton
+        >
+        <div
+          v-if="item.canReschedule || item.canCancel || !item.staff"
+          class="space-y-3 rounded-lg border border-default bg-muted/20 p-4"
+        >
+          <div v-if="item.canReschedule || item.canCancel" class="flex flex-wrap gap-3">
+            <UButton
+              v-if="item.canReschedule"
+              icon="i-lucide-calendar-sync"
+              variant="outline"
+              @click="changeOpen = true"
+              >{{ t('planning.reschedule') }}</UButton
+            ><UButton
+              v-if="item.canCancel"
+              icon="i-lucide-calendar-x-2"
+              color="error"
+              variant="soft"
+              @click="cancelOpen = true"
+              >{{ t('planning.cancelAppointmentAction') }}</UButton
+            >
+          </div>
+          <p v-if="!item.staff" class="text-sm text-muted">
+            {{ t('planning.changesUsed', { used: item.changes, free: item.freeChanges }) }}
+          </p>
+        </div>
+      </template>
+      <UModal v-if="changeOpen" v-model:open="changeOpen" :title="t('planning.reschedule')"
+        ><template #body
+          ><p v-if="item" class="mb-4">
+            {{
+              item.staff
+                ? t('planning.staffChangeNotice')
+                : item.changeFee
+                  ? t('planning.changeCosts', { amount: formatMoney(item.changeFee, item.currency, locale) })
+                  : t('planning.freeChange')
+            }}
+          </p>
+          <PlanningSlotPicker
+            v-if="item"
+            :product-id="item.productId"
+            :currency="item.currency"
+            :locale="locale === 'nl' ? 'nl' : 'en'"
+            :replaces-id="item.id"
+            :select-only="item.staff"
+            @selected="selected"
+            @reserved="reserved" /></template
+      ></UModal>
+      <UModal v-if="cancelOpen" v-model:open="cancelOpen" :title="t('planning.cancel')"
+        ><template #body
+          ><p v-if="item">
+            {{ t('planning.cancelConfirm', { amount: formatMoney(item.refundAmount, item.currency, locale) }) }}
+          </p>
+          <UButton class="mt-4" color="error" :loading="busy" @click="cancel">{{
+            t('planning.confirmCancellation')
+          }}</UButton></template
+        ></UModal
+      >
+    </div>
+  </div>
+</template>

package/app/components/PlanningAppointmentDrawer.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { AppointmentFile, AppointmentListItem } from '../composables/usePlanning'
+
+const props = defineProps<{ item: AppointmentListItem; timezone: string; staff?: boolean }>()
+const emit = defineEmits<{ changed: [] }>()
+const open = defineModel<boolean>('open', { required: true })
+const { t } = useI18n()
+const { appointmentRange } = usePlanningTimeDisplay()
+const files = ref<AppointmentFile[]>([])
+const filesError = ref(false)
+try {
+  files.value = await usePlanning().appointmentFiles(props.item.id)
+} catch {
+  filesError.value = true
+}
+const fileSource = (assetId: string) => `/api/planning/appointments/${props.item.id}/files/${assetId}`
+</script>
+
+<template>
+  <UDrawer
+    v-model:open="open"
+    direction="right"
+    :title="item.title"
+    :description="appointmentRange(item.start, item.end, timezone)"
+    close
+    :ui="{ content: 'w-full sm:max-w-xl' }"
+  >
+    <template #body>
+      <div class="space-y-5">
+        <div class="rounded-lg border border-default bg-muted/20 p-4">
+          <div class="flex flex-wrap items-center gap-2">
+            <UBadge :color="item.status === 'confirmed' ? 'success' : 'neutral'" variant="subtle">
+              {{ t(`planning.${item.status}`) }}
+            </UBadge>
+            <UBadge v-if="item.conflict" color="error" variant="subtle">{{ t('planning.conflict') }}</UBadge>
+          </div>
+          <dl class="mt-4 grid gap-4 text-sm sm:grid-cols-2">
+            <div>
+              <dt class="text-muted">{{ t('planning.time') }}</dt>
+              <dd class="mt-1 font-medium">{{ appointmentRange(item.start, item.end, timezone) }}</dd>
+              <dd class="text-muted">{{ timezone }}</dd>
+            </div>
+            <div>
+              <dt class="text-muted">{{ t('planning.host') }}</dt>
+              <dd class="mt-1 font-medium">{{ item.providerName || t('planning.unknownHost') }}</dd>
+              <dd v-if="staff && item.providerEmail" class="text-muted">{{ item.providerEmail }}</dd>
+            </div>
+            <div v-if="staff">
+              <dt class="text-muted">{{ t('planning.customer') }}</dt>
+              <dd class="mt-1 font-medium">{{ item.customerName || item.email }}</dd>
+              <dd class="text-muted">{{ item.email }}</dd>
+            </div>
+            <div v-if="item.meetingProvider === 'zoom'">
+              <dt class="text-muted">{{ t('planning.meetingProvider') }}</dt>
+              <dd class="mt-1">
+                <UButton
+                  v-if="item.status === 'confirmed' && item.meetingUrl"
+                  :to="item.meetingUrl"
+                  target="_blank"
+                  icon="i-lucide-video"
+                  size="xs"
+                  variant="outline"
+                >
+                  {{ t('planning.joinZoom') }}
+                </UButton>
+                <span v-else class="flex items-start gap-2">
+                  <UIcon name="i-lucide-video" class="mt-0.5 size-4 shrink-0 text-primary" />
+                  <span>
+                    <span class="block font-medium">{{ t('planning.zoomMeeting') }}</span>
+                    <span v-if="item.status === 'confirmed'" class="block text-muted">{{
+                      t('planning.zoomLinkPending')
+                    }}</span>
+                  </span>
+                </span>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <PlanningAppointmentDetails
+          :id="item.id"
+          :key="item.id"
+          :timezone="timezone"
+          :show-summary="false"
+          @changed="emit('changed')"
+        />
+        <section v-if="files.length || filesError" class="overflow-hidden rounded-lg border border-default bg-muted/20">
+          <header class="border-b border-default px-4 py-3">
+            <h2 class="font-semibold">{{ t(staff ? 'products.purchasedFiles' : 'products.yourFiles') }}</h2>
+          </header>
+          <UAlert
+            v-if="filesError"
+            class="m-4"
+            color="error"
+            variant="subtle"
+            :title="t('products.purchaseFilesFailed')"
+          />
+          <div v-else class="grid gap-3 p-4 sm:grid-cols-2">
+            <ProductsPurchasedFileCard
+              v-for="file in files"
+              :key="file.id"
+              :file="file"
+              :source="fileSource(file.id)"
+            />
+          </div>
+        </section>
+      </div>
+    </template>
+  </UDrawer>
+</template>