From 4c73d228ed98b8ec05bec2824aee7ce066a184e1 Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Tue, 28 Apr 2026 15:05:22 +0200
Subject: [PATCH] fix(events): show customer phone in event details view (#331)

The phone field added in #322 was wired into the edit form but never
rendered in the read-only event-info panel, so admins could only see the
number while editing. Add a phone row gated on event_phone_field_enabled
(same toggle the form uses), and tighten the Event type so customer_phone
is no longer accessed via `(event as any)`.
---
 frontend/src/pages/admin/EventDetailsPage.tsx | 15 ++++++++++++++-
 frontend/src/types/index.ts                   |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/admin/EventDetailsPage.tsx b/frontend/src/pages/admin/EventDetailsPage.tsx
index 7938cf2f..445c73e7 100644
--- a/frontend/src/pages/admin/EventDetailsPage.tsx
+++ b/frontend/src/pages/admin/EventDetailsPage.tsx
@@ -431,7 +431,7 @@ export const EventDetailsPage: React.FC = () => {
       hero_photo_id: event.hero_photo_id || null,
       customer_name: event.customer_name || '',
       customer_email: event.customer_email || '',
-      customer_phone: (event as any).customer_phone || '',
+      customer_phone: event.customer_phone || '',
       source_mode: event.source_mode === 'reference' ? 'reference' : 'managed',
       external_path: event.external_path || '',
       require_password: normalizeRequirePassword(event.require_password),
@@ -1504,6 +1504,19 @@ export const EventDetailsPage: React.FC = () => {
                   </div>
                 </div>
 
+                {phoneFieldEnabled && (
+                  <div>
+                    <dt className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
+                      {t('events.customerPhone', 'Customer Phone')}
+                    </dt>
+                    <dd className="mt-1 text-sm text-neutral-900 dark:text-neutral-100">
+                      {event.customer_phone || (
+                        <span className="text-neutral-400">{t('common.notSet')}</span>
+                      )}
+                    </dd>
+                  </div>
+                )}
+
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <dt className="text-sm font-medium text-neutral-500 dark:text-neutral-400">{t('events.created')}</dt>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 83321372..19b6f6a3 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -7,6 +7,7 @@ export interface Event {
   event_date: string | null;
   customer_name?: string;
   customer_email: string;
+  customer_phone?: string | null;
   admin_email: string;
   welcome_message?: string;
   color_theme?: string;