feat(ui): display purchaser details on receipt and seat pages

Show customer name and phone number in a new panel
Add English and Chinese translations for the purchaser label

app/pages/seat/[token].vue

@@ -10,6 +10,7 @@ import { formatDateTime } from '../../utils/formatters'
 
 const route = useRoute()
 const apiClient = useApiClient()
+const { t } = useLocale()
 
 const token = String(route.params.token || '')
 
@@ -54,6 +55,22 @@ useSeoMeta({
 
       <div class="grid gap-4 lg:grid-cols-[18rem_minmax(0,1fr)] lg:gap-6">
         <UCard class="surface-card overflow-hidden rounded-lg" :ui="{ body: 'space-y-4 p-4 sm:p-5' }">
+          <div class="surface-panel rounded-lg px-4 py-3 text-left text-sm">
+            <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
+              {{ t('receipt.purchaser') }}
+            </p>
+            <div class="mt-2 space-y-2">
+              <div class="flex min-w-0 items-center gap-2 font-semibold text-highlighted">
+                <UIcon name="i-lucide-user-round" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerName }}</span>
+              </div>
+              <div class="flex min-w-0 items-center gap-2 text-default">
+                <UIcon name="i-lucide-phone" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerPhone }}</span>
+              </div>
+            </div>
+          </div>
+
           <div class="space-y-1 text-center">
             <p class="text-sm font-semibold text-highlighted">
               QR Code