From 024c9b243f3ed290e8970e35aca3a9e07547e3e3 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Tue, 28 Oct 2025 10:26:37 +0700
Subject: [PATCH] fix design template ultah starter

---
 .../templates/UltahStarter/Event.vue          | 16 ++--
 .../templates/UltahStarter/Landing.vue        |  2 +-
 .../templates/UltahStarter/ThankYou.vue       |  6 +-
 .../undangan/undangan-ulang-tahun-starter.vue | 74 +++++++++++++------
 .../app/pages/form/ulang_tahun/starter.vue    | 10 +++
 proyek-frontend/app/pages/p/[code].vue        |  4 +-
 6 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/proyek-frontend/app/components/templates/UltahStarter/Event.vue b/proyek-frontend/app/components/templates/UltahStarter/Event.vue
index cc0a216..dfd244f 100644
--- a/proyek-frontend/app/components/templates/UltahStarter/Event.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/Event.vue
@@ -16,7 +16,7 @@
         <div class="text-3xl">📅</div>
         <div class="text-left">
           <h2 class="font-semibold text-red-400">Hari & Tanggal</h2>
-          <p class="text-white font-medium">Rabu, 22 Oktober 2025</p>
+          <p class="text-white font-medium">{{ hari_tanggal_acara }}</p>
         </div>
       </div>
 
@@ -25,7 +25,7 @@
         <div class="text-3xl">⏰</div>
         <div class="text-left">
           <h2 class="font-semibold text-blue-400">Waktu Acara</h2>
-          <p class="text-white font-medium">18.00</p>
+          <p class="text-white font-medium">{{ waktu }}</p>
         </div>
       </div>
 
@@ -34,16 +34,18 @@
         <div class="text-3xl">📍</div>
         <div class="text-left">
           <h2 class="font-semibold text-yellow-400">Lokasi Petualangan</h2>
-          <p class="text-white font-medium">jkbjkb</p>
+          <p class="text-white font-medium">{{ alamat }}</p>
         </div>
       </div>
 
       <!-- Tombol Maps -->
-      <button
-        class="mt-4 bg-gray-800 text-white px-6 py-3 rounded-full font-semibold hover:bg-gray-700 transition-all duration-300 mx-auto flex items-center gap-2"
+      <a
+        :href="link_gmaps"
+        target="_blank"
+        class="mt-4 bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-full font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 mx-auto flex items-center gap-2 justify-center"
       >
-        🗺️ Link Maps Menyusul
-      </button>
+         🗺️ Buka Google Maps 
+      </a>
     </div>
 
     <!-- Catatan -->
diff --git a/proyek-frontend/app/components/templates/UltahStarter/Landing.vue b/proyek-frontend/app/components/templates/UltahStarter/Landing.vue
index e3c648a..a5970bf 100644
--- a/proyek-frontend/app/components/templates/UltahStarter/Landing.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/Landing.vue
@@ -46,7 +46,7 @@
     <p
       class="text-2xl font-bold mb-10 text-yellow-100 drop-shadow-md animate-fade-up-delay"
     >
-      Bergabunglah dalam petualangan ulang tahun {{ childName }}! 🎭
+      Bergabunglah dalam petualangan ulang tahun ! 🎭
     </p>
 
     <!-- 🔘 BUTTON -->
diff --git a/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue b/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
index 3b02936..a22f7cb 100644
--- a/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
@@ -51,10 +51,8 @@
         Atas kehadiran dan doa <span class="text-yellow-300 font-semibold">spider-power</span> untuk
       </p>
 
-      <p
-        class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50"
-      >
-        {{ childName || 'Spider-Kid' }}
+      <p class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50">
+        {{ childName }}
       </p>
 
       <div class="bg-black/50 backdrop-blur-lg rounded-2xl p-6 border border-red-500/50">
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
index 8e36752..104c375 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
@@ -89,7 +89,7 @@ import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
 // Props dari induk
 const props = defineProps({
   data: { type: Object, required: true },
-  tamu: { type: Object, required: true } // Tambahkan props tamu
+  tamu: { type: Object, required: true } 
 })
 
 // URL backend
@@ -103,10 +103,10 @@ const messages = computed(() => props.data.rsvp || [])
 
 // ✅ Gambar galeri
 const galleryImages = computed(() => {
-  const f = formData.value
-  return [f.foto_1, f.foto_2, f.foto_3, f.foto_4, f.foto_5]
+  const fotos = formData.value.foto || [] 
+  return fotos
     .filter(Boolean)
-    .map(img => `${backendUrl}/storage/${img.replace(/^public\//, '')}`)
+    .map(img => `${backendUrl}/storage/${img}`) 
 })
 
 // 🌍 Navigasi section
@@ -139,25 +139,53 @@ const currentComponent = computed(() => {
   }
 })
 
-// 🎁 Props untuk tiap komponen
-const componentProps = computed(() => ({
-  childName: formData.value.nama_panggilan,
-  guestName: route.query.guest || props.tamu.nama_tamu || 'Tamu Undangan',
-  age: formData.value.umur_yang_dirayakan,
-  childOrder: formData.value.anak_ke,
-  parentsName: `${formData.value.nama_bapak} & ${formData.value.nama_ibu}`,
-  childPhoto: formData.value.foto?.length
-    ? `${backendUrl}/storage/${formData.value.foto[0]}`
-    : null,
-  hari_tanggal_acara: formData.value.hari_tanggal_acara,
-  waktu: formData.value.waktu,
-  alamat: formData.value.alamat,
-  link_gmaps: formData.value.link_gmaps,
-  hitung_mundur: formData.value.hitung_mundur,
-  images: galleryImages.value,
-  messages: messages.value,
-  jsonData: formData.value
-}))
+// Props untuk tiap komponen
+const componentProps = computed(() => {
+  const f = formData.value
+
+  // Foto anak (untuk Introduction & ThankYou)
+  const childPhoto = f.foto?.[0] 
+    ? `${backendUrl}/storage/${f.foto[0].replace(/^public\//, '')}` 
+    : null
+
+  // Format tanggal: 2025-10-24 → Jumat, 24 Oktober 2025
+  const formatDate = (dateStr) => {
+    if (!dateStr) return 'Akan diumumkan'
+    try {
+      const d = new Date(dateStr)
+      return d.toLocaleDateString('id-ID', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      })
+    } catch {
+      return dateStr
+    }
+  }
+
+  return {
+    // === Introduction & ThankYou ===
+    childName: f.nama_lengkap || 'Spider Kid',
+    guestName: route.query.guest || props.tamu.nama_tamu || 'Tamu Undangan',
+    age: f.umur_yang_dirayakan,
+    childOrder: f.anak_ke,
+    parentsName: `${f.nama_bapak || 'Bapak'} & ${f.nama_ibu || 'Ibu'}`,
+    childPhoto,
+
+    // === Event ===
+    hari_tanggal_acara: formatDate(f.hari_tanggal_acara),
+    waktu: f.waktu,
+    alamat: f.alamat,
+    link_gmaps: f.link_gmaps || '#',
+
+    // === Gallery ===
+    images: galleryImages.value,
+
+    // === ThankYou ===
+    jsonData: f
+  }
+})
 
 // Debug log
 import { watchEffect } from 'vue'
diff --git a/proyek-frontend/app/pages/form/ulang_tahun/starter.vue b/proyek-frontend/app/pages/form/ulang_tahun/starter.vue
index 6e31066..f025d1b 100644
--- a/proyek-frontend/app/pages/form/ulang_tahun/starter.vue
+++ b/proyek-frontend/app/pages/form/ulang_tahun/starter.vue
@@ -113,6 +113,16 @@
               Alamat
             </label>
           </div>
+          <div class="relative md:col-span-2">
+            <input v-model="form.form.link_gmaps" type="text" required placeholder=" "
+              class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <label class="absolute left-1 top-0 text-gray-400 text-xs transition-all 
+               peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
+               peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
+               peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
+              Link Gmaps
+            </label>
+          </div>
         </div>
       </section>
 
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index 6bda90c..a6777cb 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -131,11 +131,11 @@ const fetchInvitation = async () => {
     const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
     
     console.log('✅ API response:', response)
-
+   console.log('🎫 tamuData:', tamuData.value)
     // Validate response
     if (!response.success) {
       throw new Error(response.message || 'Undangan tidak ditemukan')
-      console.log('🎫 tamuData:', tamuData.value)
+      
     }
 
     if (!response.data || !response.data.pelanggan) {