@htlkg/components 0.0.11 → 0.0.13

package/src/patterns/DETAIL_PAGE.md

@@ -0,0 +1,446 @@
+# Detail Page Pattern
+
+Display comprehensive information about a single entity with related data, cards, and navigation.
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ AdminLayout                                                  │
+├─────────────────────────────────────────────────────────────┤
+│ Page Header (entity title + breadcrumbs)                    │
+├─────────────────────────────────────────────────────────────┤
+│ Back Button + Action Dropdown                                │
+├─────────────────────────────────────────────────────────────┤
+│ Card Grid (1-3 columns)                                     │
+│ ├── Info Card 1 (Guest Info, Primary Data)                  │
+│ ├── Info Card 2 (Summary, Secondary Data)                   │
+│ └── Info Card 3 (Status, Payment, etc.)                     │
+├─────────────────────────────────────────────────────────────┤
+│ Related Data Section                                        │
+│ ├── Principal/Owner Card                                    │
+│ └── Related Items (companions, reservations)                │
+├─────────────────────────────────────────────────────────────┤
+│ Timeline / Activity Log                                     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## CRM Template Reference
+
+Based on: `ui/src/components/Templates/CRM/BookingDetails.vue`
+
+```vue
+<!-- CRM Template Structure (raw @hotelinking/ui) -->
+<uiWrapper :sidebar :topbar>
+  <uiViewHeader :pages="pages" :title="`Booking ID: ${bookingData.bookingId}`" />
+
+  <!-- Back + Actions -->
+  <div class="flex justify-between items-center mb-4">
+    <uiButton :icon="ArrowLeftIcon" @click="handleBack">Back to Bookings</uiButton>
+    <uiDropdown :items="contactOptions" @optionSelected="handleOption" />
+  </div>
+
+  <!-- Card Grid -->
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+    <!-- Guest Information Card -->
+    <div class="bg-white rounded-lg border border-gray-200 shadow">
+      <div class="px-6 py-5 border-b border-gray-200">
+        <h3 class="text-lg font-bold">Guest Information</h3>
+      </div>
+      <div class="px-6 py-5 space-y-8">
+        <div class="flex items-start gap-3">
+          <EnvelopeIcon class="h-4 w-4 text-gray-400" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Email</div>
+            <div class="text-sm text-gray-900">{{ data.email }}</div>
+          </div>
+        </div>
+        <!-- More fields... -->
+      </div>
+    </div>
+    <!-- More cards... -->
+  </div>
+
+  <!-- Timeline -->
+  <uiTimeline :timeline="timelineData" />
+</uiWrapper>
+```
+
+## Enhanced Pattern (with @htlkg/*)
+
+### Astro Page
+
+```astro
+---
+// src/pages/[brandId]/admin/booking/[bookingId].astro
+import Layout from '@/layouts/Layout.astro';
+import BookingDetails from '@/components/admin/BookingDetails.vue';
+import { getBooking } from '@/services/booking';
+
+export const prerender = false;
+
+const { brandId, bookingId } = Astro.params;
+const booking = await getBooking(bookingId);
+
+if (!booking) {
+  return Astro.redirect('/404');
+}
+
+const layoutProps = {
+  title: `Booking ${booking.id}`,
+  breadcrumbs: [
+    { name: 'Bookings', href: `/${brandId}/admin/bookings` },
+    { name: booking.id, current: true },
+  ],
+};
+---
+
+<Layout {...layoutProps}>
+  <BookingDetails
+    client:load
+    booking={booking}
+    brandId={brandId}
+  />
+</Layout>
+```
+
+### Vue Component
+
+```vue
+<!-- src/components/admin/BookingDetails.vue -->
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Modal } from '@htlkg/components/overlays';
+import { useModal, useConfirmation, useNotifications } from '@htlkg/components/composables';
+import { uiButton, uiDropdown, uiTag, uiTimeline } from '@hotelinking/ui';
+import {
+  ArrowLeftIcon,
+  EnvelopeIcon,
+  PhoneIcon,
+  MapPinIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  UserIcon,
+  UsersIcon,
+} from '@heroicons/vue/24/outline';
+
+interface Props {
+  booking: Booking;
+  brandId: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  back: [];
+  edit: [booking: Booking];
+}>();
+
+// Modal for editing guest
+const editModal = useModal<Guest>();
+
+// Confirmation for cancel booking
+const confirmation = useConfirmation();
+const { notify } = useNotifications();
+
+// Action dropdown items
+const actionItems = [
+  { name: 'Contact guest via:', value: '0', active: true },
+  { name: 'Email', value: 'email' },
+  { name: 'Phone', value: 'phone' },
+  { name: 'SMS', value: 'sms' },
+];
+
+// Timeline data
+const timelineData = computed(() => ({
+  id: 'booking-timeline',
+  footerText: 'View all events',
+  items: props.booking.timeline.map((event, index) => ({
+    id: index + 1,
+    content: event.description,
+    date: formatDate(event.date),
+    datetime: event.date,
+    icon: event.icon,
+    iconBackground: 'default',
+  })),
+}));
+
+// Handlers
+function handleBack() {
+  emit('back');
+}
+
+function handleAction(item: { value: string }) {
+  if (item.value === 'email') {
+    window.location.href = `mailto:${props.booking.guest.email}`;
+  }
+}
+
+async function handleCancelBooking() {
+  const confirmed = await confirmation.confirmDestructive('Cancel Booking');
+  if (confirmed) {
+    try {
+      await cancelBooking(props.booking.id);
+      notify({ type: 'success', message: 'Booking cancelled' });
+    } catch (error) {
+      notify({ type: 'error', message: 'Failed to cancel booking' });
+    }
+  }
+}
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function getInitials(name: string): string {
+  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+}
+</script>
+
+<template>
+  <!-- Back Button + Actions -->
+  <div class="flex justify-between items-center mb-4">
+    <uiButton :icon="ArrowLeftIcon" @click="handleBack">
+      Back to Bookings
+    </uiButton>
+    <uiDropdown
+      :items="actionItems"
+      position="right"
+      @optionSelected="handleAction"
+    />
+  </div>
+
+  <!-- Card Grid -->
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+    <!-- Guest Information Card -->
+    <div class="bg-white rounded-lg border border-gray-200 shadow overflow-hidden">
+      <div class="px-6 py-5 border-b border-gray-200">
+        <div class="flex items-center gap-2 mb-2">
+          <UserIcon class="h-5 w-5 text-gray-400" />
+          <h3 class="text-lg font-bold text-gray-900">Guest Information</h3>
+        </div>
+        <p class="text-sm text-gray-500">
+          {{ booking.guest.name }} • {{ booking.guest.memberStatus }}
+        </p>
+      </div>
+      <div class="px-6 py-5 space-y-6">
+        <!-- Email -->
+        <div class="flex items-start gap-3">
+          <EnvelopeIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Email</div>
+            <div class="text-sm text-gray-900">{{ booking.guest.email }}</div>
+          </div>
+        </div>
+        <!-- Phone -->
+        <div class="flex items-start gap-3">
+          <PhoneIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Phone</div>
+            <div class="text-sm text-gray-900">{{ booking.guest.phone }}</div>
+          </div>
+        </div>
+        <!-- Address -->
+        <div class="flex items-start gap-3">
+          <MapPinIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Address</div>
+            <div class="text-sm text-gray-900">{{ booking.guest.address }}</div>
+          </div>
+        </div>
+        <!-- Preferences Tags -->
+        <div class="pt-4 border-t border-gray-200">
+          <div class="text-sm font-medium text-gray-500 mb-3">Preferences</div>
+          <div class="flex flex-wrap gap-2">
+            <uiTag
+              v-for="pref in booking.guest.preferences"
+              :key="pref"
+              color="gray"
+              size="small"
+            >
+              {{ pref }}
+            </uiTag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Booking Summary Card -->
+    <div class="bg-white rounded-lg border border-gray-200 shadow overflow-hidden">
+      <div class="px-6 py-5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <CalendarIcon class="h-5 w-5 text-gray-400" />
+          <h3 class="text-lg font-bold text-gray-900">Booking Summary</h3>
+        </div>
+      </div>
+      <div class="px-6 py-5 space-y-4">
+        <div class="flex items-start gap-3">
+          <CalendarIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Check-in</div>
+            <div class="text-sm text-gray-900">{{ formatDate(booking.checkin) }}</div>
+          </div>
+        </div>
+        <div class="flex items-start gap-3">
+          <CalendarIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Check-out</div>
+            <div class="text-sm text-gray-900">{{ formatDate(booking.checkout) }}</div>
+          </div>
+        </div>
+        <div class="flex items-start gap-3">
+          <CalendarIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Booking Date</div>
+            <div class="text-sm text-gray-900">{{ formatDate(booking.createdAt) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Payment Details Card -->
+    <div class="bg-white rounded-lg border border-gray-200 shadow overflow-hidden">
+      <div class="px-6 py-5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <CreditCardIcon class="h-5 w-5 text-gray-400" />
+          <h3 class="text-lg font-bold text-gray-900">Payment Details</h3>
+        </div>
+      </div>
+      <div class="px-6 py-5 space-y-4">
+        <div class="flex items-start gap-3">
+          <CreditCardIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+          <div>
+            <div class="text-sm font-medium text-gray-500">Amount</div>
+            <div class="text-sm text-gray-900">{{ booking.payment.amount }}</div>
+          </div>
+        </div>
+        <div class="flex items-start gap-3">
+          <div class="h-4 w-4" /> <!-- Spacer -->
+          <div>
+            <div class="text-sm font-medium text-gray-500">Status</div>
+            <div class="mt-1">
+              <uiTag :color="booking.payment.status === 'Paid' ? 'green' : 'yellow'" size="small">
+                {{ booking.payment.status }}
+              </uiTag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Companions Section -->
+  <div class="bg-white rounded-lg border border-gray-200 shadow overflow-hidden mb-8">
+    <div class="px-6 py-5 border-b border-gray-200">
+      <div class="flex items-center gap-2">
+        <UsersIcon class="h-5 w-5 text-gray-400" />
+        <h3 class="text-lg font-bold text-gray-900">Booking Companions</h3>
+      </div>
+    </div>
+    <div class="px-6 py-5 space-y-4">
+      <div
+        v-for="companion in booking.companions"
+        :key="companion.email"
+        class="flex items-center justify-between"
+      >
+        <div class="flex items-center gap-4">
+          <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+            <span class="text-sm font-medium text-gray-600">
+              {{ getInitials(companion.name) }}
+            </span>
+          </div>
+          <div>
+            <div class="font-semibold text-gray-900">{{ companion.name }}</div>
+            <div class="text-sm text-gray-500">{{ companion.email }}</div>
+          </div>
+        </div>
+        <uiTag color="gray" size="small">{{ companion.relationship }}</uiTag>
+      </div>
+    </div>
+  </div>
+
+  <!-- Timeline -->
+  <uiTimeline
+    name="Timeline"
+    :timeline="timelineData"
+    @timeline-event-clicked="(id) => console.log('Event clicked:', id)"
+    @timeline-footer-clicked="() => console.log('View all events')"
+  />
+
+  <!-- Edit Guest Modal -->
+  <Modal
+    :open="editModal.isOpen.value"
+    :title="`Edit ${editModal.data.value?.name || 'Guest'}`"
+    @close="editModal.close"
+  >
+    <!-- Edit form here -->
+  </Modal>
+</template>
+```
+
+## Key Patterns
+
+### Info Card Structure
+
+```vue
+<div class="bg-white rounded-lg border border-gray-200 shadow overflow-hidden">
+  <!-- Header with icon and title -->
+  <div class="px-6 py-5 border-b border-gray-200">
+    <div class="flex items-center gap-2 mb-2">
+      <IconComponent class="h-5 w-5 text-gray-400" />
+      <h3 class="text-lg font-bold text-gray-900">Card Title</h3>
+    </div>
+    <p class="text-sm text-gray-500">Subtitle or description</p>
+  </div>
+
+  <!-- Content with icon-labeled fields -->
+  <div class="px-6 py-5 space-y-6">
+    <div class="flex items-start gap-3">
+      <FieldIcon class="h-4 w-4 text-gray-400 mt-0.5" />
+      <div>
+        <div class="text-sm font-medium text-gray-500">Label</div>
+        <div class="text-sm text-gray-900">Value</div>
+      </div>
+    </div>
+    <!-- More fields... -->
+  </div>
+</div>
+```
+
+### Grid Layouts
+
+```vue
+<!-- 3-column on desktop, 1 on mobile -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+<!-- 2-column on desktop -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+```
+
+### Back Navigation
+
+```vue
+<div class="flex justify-between items-center mb-4">
+  <uiButton :icon="ArrowLeftIcon" @click="emit('back')">
+    Back to List
+  </uiButton>
+  <uiDropdown :items="actions" @optionSelected="handleAction" />
+</div>
+```
+
+## Checklist
+
+- [ ] Astro page with entity data fetch
+- [ ] Vue component with card-based layout
+- [ ] Back button navigation
+- [ ] Action dropdown for entity operations
+- [ ] Info cards with icon-labeled fields (3-column grid)
+- [ ] Tags for status, preferences, etc.
+- [ ] Related data sections (companions, related items)
+- [ ] Timeline/activity log
+- [ ] `useModal` for edit dialogs
+- [ ] `useConfirmation` for destructive actions
+- [ ] Loading/skeleton states