From f76c9a4987a584eb6d3448e70195992a28eae4d3 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Mon, 27 Oct 2025 15:57:43 +0700
Subject: [PATCH] nama tamu

---
 .../components/templates/Ultah/Landing.vue    |  10 +-
 .../templates/UltahStarter/ThankYou.vue       |   8 +-
 .../undangan/undangan-ulang-tahun-basic.vue   |  29 ++--
 .../undangan/undangan-ulang-tahun-premium.vue | 160 +++++++++---------
 .../undangan/undangan-ulang-tahun-starter.vue |  32 +++-
 proyek-frontend/app/pages/p/[code].vue        |   1 +
 6 files changed, 131 insertions(+), 109 deletions(-)

diff --git a/proyek-frontend/app/components/templates/Ultah/Landing.vue b/proyek-frontend/app/components/templates/Ultah/Landing.vue
index a5dc898..d596337 100644
--- a/proyek-frontend/app/components/templates/Ultah/Landing.vue
+++ b/proyek-frontend/app/components/templates/Ultah/Landing.vue
@@ -14,7 +14,7 @@
     <!-- Right Side (Text) -->
     <div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10">
       <h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
-        Celebrate With Us
+        Rayakan Bersama Kami
       </h1>
       <h2
         class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
@@ -22,14 +22,14 @@
         {{ childName }}
       </h2>
       <h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
-        Birthday Party
+        Pesta Ulang Tahun
       </h3>
 
       <div
         class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block"
       >
         <p class="text-orange-700 text-lg">Kepada Yth.</p>
-        <p class="text-orange-800 text-xl font-bold">{{ guestName }}</p>
+        <p class="text-orange-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
       </div>
 
       <div>
@@ -37,7 +37,7 @@
           @click="$emit('open-invitation')"
           class="mt-6 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all"
         >
-          Open Invitation
+          Buka Undangan
         </button>
       </div>
     </div>
@@ -72,4 +72,4 @@ defineProps({
 .animate-bounce-slow {
   animation: bounce-slow 3s infinite ease-in-out;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue b/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
index 5530e42..3b02936 100644
--- a/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="relative w-full min-h-screen bg-gradient-to-b from-blue-900 via-red-800 to-black text-white flex flex-col lg:flex-row items-center justify-between overflow-hidden"
+    class="relative w-full min-h-screen bg-gradient-to-b from-blue-900 via-red-800 to-black text-white flex flex-col lg:flex-row items-center justify-center overflow-hidden"
   >
     <!-- 🌐 Efek jaring latar -->
     <div class="absolute inset-0 opacity-10 pointer-events-none">
@@ -37,7 +37,7 @@
 
     <!-- ================= KONTEN TEKS (KIRI) ================= -->
     <div
-      class="relative z-10 w-full lg:w-1/2 min-h-[50vh] flex flex-col justify-center items-center lg:items-start text-center lg:text-left px-6 lg:px-20 py-12 lg:py-0 space-y-8"
+      class="relative z-10 w-full max-w-lg lg:w-1/2 min-h-[50vh] flex flex-col justify-center items-center text-center px-6 lg:px-12 py-12 space-y-8"
     >
       <div class="text-5xl sm:text-6xl animate-bounce">🕷️</div>
 
@@ -67,7 +67,7 @@
       <!-- Tombol Kembali -->
       <button
         @click="reloadPage"
-        class="w-full bg-gradient-to-r from-red-600 to-blue-600 text-white py-4 px-8 rounded-full font-bold shadow-2xl hover:from-red-700 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 border-2 border-white/30 text-lg flex items-center justify-center gap-3"
+        class="w-full max-w-xs bg-gradient-to-r from-red-600 to-blue-600 text-white py-4 px-8 rounded-full font-bold shadow-2xl hover:from-red-700 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 border-2 border-white/30 text-lg flex items-center justify-center gap-3"
       >
         <span class="text-2xl">🕸️</span>
         Kembali ke Awal
@@ -132,4 +132,4 @@ onMounted(() => {
     object-position: center right;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
index 6fab814..0286ae8 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
@@ -18,9 +18,9 @@
       >
         <li><button @click="switchSection('introduction')" :class="navClass('introduction')" class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li>
         <li><button @click="switchSection('event')" :class="navClass('event')" class="px-3 py-1 rounded-full transition-all duration-300">Event</button></li>
-        <li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Gallery</button></li>
-        <li><button @click="switchSection('guestbook')" :class="navClass('guestbook')" class="px-3 py-1 rounded-full transition-all duration-300">Guest Book</button></li>
-        <li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Thanks</button></li>
+        <li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Galeri</button></li>
+        <li><button @click="switchSection('guestbook')" :class="navClass('guestbook')" class="px-3 py-1 rounded-full transition-all duration-300">Buku Tamu</button></li>
+        <li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Terima Kasih</button></li>
       </ul>
     </nav>
 
@@ -40,10 +40,11 @@
     >
       <!-- Landing -->
       <Landing
-        v-if="currentSection === 'landing'"
+        v-if="currentSection === 'landing' && tamu"
         :childName="formData.nama_panggilan"
-        :guestName="data.nama_tamu"
+        :guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
         @open-invitation="switchSection('introduction')"
+        @toggle-music="toggleMusic"
       />
 
       <!-- Introduction -->
@@ -72,7 +73,7 @@
       <!-- Guest Book -->
       <GuestBook
         v-if="currentSection === 'guestbook'"
-        :guestName="data.nama_tamu"
+        :guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
         :messages="messages"
         @addMessage="addMessage"
       />
@@ -84,14 +85,12 @@
         :jsonData="formData"
       />
     </main>
-
-
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watchEffect } from 'vue'
-import { useRuntimeConfig } from '#app'
+import { useRoute, useRuntimeConfig } from '#app'
 
 // Import Komponen
 import Landing from '~/components/templates/UltahBasic/Landing.vue'
@@ -103,15 +102,18 @@ import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
 
 // Props dari halaman induk
 const props = defineProps({
-  data: { type: Object, required: true }
+  data: { type: Object, required: true },
+  tamu: { type: Object, required: true } // Tambahkan props tamu
 })
 
 // Runtime config (untuk backend URL)
 const config = useRuntimeConfig()
 const backendUrl = config.public.apiBaseUrl
+const route = useRoute()
 
 // Data dari backend
 const formData = computed(() => props.data.form || {})
+const messages = computed(() => props.data.rsvp || [])
 
 // Galeri gambar (support foto array atau field lama)
 const galleryImages = computed(() => {
@@ -125,12 +127,16 @@ const galleryImages = computed(() => {
     formData.value.foto_3,
     formData.value.foto_4,
     formData.value.foto_5
-  ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  ].filter(Boolean).map(img => `${backendUrl}/storage/${img}`)
 })
 
+// Debug log
 watchEffect(() => {
   console.log("🧾 formData:", formData.value)
+  console.log("🧾 messages:", messages.value)
   console.log("🖼️ galleryImages:", galleryImages.value)
+  console.log("👤 tamu.nama_tamu:", props.tamu.nama_tamu)
+  console.log("🚪 route.query.guest:", route.query.guest)
 })
 
 // Navigasi antar bagian
@@ -142,7 +148,6 @@ const isPlaying = ref(false)
 const toggleMusic = () => (isPlaying.value = !isPlaying.value)
 
 // Buku tamu
-const messages = ref([])
 const addMessage = (msg) => messages.value.push(msg)
 
 // Style untuk navigasi aktif
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
index 7930f0b..5693c19 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
@@ -1,59 +1,67 @@
 <template>
-    <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
-        <!-- Navigation -->
-        <nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
-            <ul
-                class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
-                <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
-                <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
-                <li><button @click="switchSection('galeri')" :class="navClass('galeri')">Gallery</button></li>
-                <li><button @click="switchSection('say')" :class="navClass('say')">Guest Book</button></li>
-                <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
-            </ul>
-        </nav>
+  <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
+    <!-- Navigation -->
+    <nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
+      <ul class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
+        <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
+        <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
+        <li><button @click="switchSection('galeri')" :class="navClass('galeri')">Galeri</button></li>
+        <li><button @click="switchSection('say')" :class="navClass('say')">Buku Tamu</button></li>
+        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
+      </ul>
+    </nav>
 
-        <!-- Tombol Musik -->
-        <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
-            <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
-                {{ isPlaying ? '⏸️' : '▶️' }}
-            </button>
-        </div>
-
-        <main
-            class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
-            <!-- Landing -->
-            <Landing v-if="currentSection === 'landing'" :childName="formData.nama_panggilan"
-                :guestName="data.nama_tamu" @open-invitation="switchSection('introduction')" />
-
-            <!-- Introduction -->
-            <Introduction v-if="currentSection === 'introduction'" :age="formData.umur_yang_dirayakan"
-                :childName="formData.nama_lengkap" :childOrder="formData.anak_ke"
-                :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
-                :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[4]}` : null" />
-
-
-            <!-- Event -->
-            <Event v-if="currentSection === 'event'" :hari_tanggal_acara="formData.hari_tanggal_acara"
-                :waktu="formData.waktu" :alamat="formData.alamat" :link_gmaps="formData.link_gmaps"
-                :hitung_mundur="formData.hitung_mundur" />
-
-
-            <!-- Gallery -->
-            <Gallery v-if="currentSection === 'galeri'" :images="galleryImages" />
-
-            <!-- Guest Book -->
-            <GuestBook v-if="currentSection === 'say'" :guestName="data.nama_tamu" :messages="messages"
-                @addMessage="addMessage" />
-
-            <!-- Thank You -->
-            <ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
-        </main>
+    <!-- Tombol Musik -->
+    <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+      <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
+        {{ isPlaying ? '⏸️' : '▶️' }}
+      </button>
     </div>
+
+    <main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
+      <!-- Landing -->
+      <Landing
+        v-if="currentSection === 'landing'"
+        :childName="formData.nama_panggilan"
+        :guestName="tamu.nama_tamu || 'Tamu Undangan'"
+        @open-invitation="switchSection('introduction')"
+      />
+
+      <!-- Introduction -->
+      <Introduction
+        v-if="currentSection === 'introduction'"
+        :age="formData.umur_yang_dirayakan"
+        :childName="formData.nama_lengkap"
+        :childOrder="formData.anak_ke"
+        :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
+        :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[4]}` : null"
+      />
+
+      <!-- Event -->
+      <Event
+        v-if="currentSection === 'event'"
+        :hari_tanggal_acara="formData.hari_tanggal_acara"
+        :waktu="formData.waktu"
+        :alamat="formData.alamat"
+        :link_gmaps="formData.link_gmaps"
+        :hitung_mundur="formData.hitung_mundur"
+      />
+
+      <!-- Gallery -->
+      <Gallery v-if="currentSection === 'galeri'" :images="galleryImages" />
+
+      <!-- Guest Book -->
+      <GuestBook v-if="currentSection === 'say'" :guestName="tamu.nama_tamu || 'Tamu Undangan'" :messages="rsvpData" @addMessage="addMessage" />
+
+      <!-- Thank You -->
+      <ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
+    </main>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { useRuntimeConfig } from '#app'
+import { ref, computed, watchEffect } from 'vue'
+import { useRoute, useRuntimeConfig } from '#app'
 
 // Komponen
 import Landing from '~/components/templates/Ultah/Landing.vue'
@@ -63,50 +71,44 @@ import Gallery from '~/components/templates/Ultah/Gallery.vue'
 import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
 import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
 
-
-
 // Props dari halaman /p/[code].vue
 const props = defineProps({
-    data: { type: Object, required: true }
+  data: { type: Object, required: true },
+  tamu: { type: Object, required: true } // Tambahkan props tamu
 })
 
-
-
-
-
 // Runtime config
 const config = useRuntimeConfig()
 const backendUrl = config.public.apiBaseUrl
+const route = useRoute()
 
 // Data form dari backend
 const formData = computed(() => props.data.form || {})
-
+const rsvpData = computed(() => props.data.rsvp || {})
 
 const galleryImages = computed(() => {
-    const f = formData.value.foto
-
-
-    if (Array.isArray(f)) {
-        return f.map(img => `${backendUrl}/storage/${img}`)
-    }
-
-    // Jika masih bentuk lama (foto_1, foto_2, dst.)
-    return [
-        formData.value.foto_1,
-        formData.value.foto_2,
-        formData.value.foto_3,
-        formData.value.foto_4,
-        formData.value.foto_5
-    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  const f = formData.value.foto
+  if (Array.isArray(f)) {
+    return f.map(img => `${backendUrl}/storage/${img}`)
+  }
+  return [
+    formData.value.foto_1,
+    formData.value.foto_2,
+    formData.value.foto_3,
+    formData.value.foto_4,
+    formData.value.foto_5
+  ].filter(Boolean).map(img => `${backendUrl}/${img}`)
 })
 
+// Debug log
 watchEffect(() => {
-    console.log("🧾 formData:", formData.value)
-    console.log("🖼️ galleryImages:", galleryImages.value)
+  console.log("🧾 formData:", formData.value)
+  console.log("🧾 rsvpData:", rsvpData.value)
+  console.log("🖼️ galleryImages:", galleryImages.value)
+  console.log("👤 tamu.nama_tamu:", props.tamu.nama_tamu)
+  console.log("🚪 route.query.guest:", route.query.guest)
 })
 
-
-
 // Navigasi antar section
 const currentSection = ref('landing')
 const switchSection = (s) => (currentSection.value = s)
@@ -119,9 +121,9 @@ const toggleMusic = () => (isPlaying.value = !isPlaying.value)
 const messages = ref([])
 const addMessage = (msg) => messages.value.push(msg)
 
-// Dummy countdown (bisa diganti dinamis nanti)
+// Dummy countdown
 const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 })
 
 // Style untuk navigasi aktif
 const navClass = (s) => (currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600')
-</script>
+</script>
\ No newline at end of file
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 99430e0..8e36752 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
@@ -68,6 +68,7 @@
           v-bind="componentProps"
           @open-invitation="switchSection('introduction')"
           @addMessage="addMessage"
+          @toggle-music="toggleMusic"
         />
       </transition>
     </main>
@@ -76,7 +77,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { useRuntimeConfig } from '#app'
+import { useRoute, useRuntimeConfig } from '#app'
 
 // 🧩 Import Semua Komponen
 import Landing from '~/components/templates/UltahStarter/Landing.vue'
@@ -86,14 +87,19 @@ import Gallery from '~/components/templates/UltahStarter/Gallery.vue'
 import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
 
 // Props dari induk
-const props = defineProps({ data: Object })
+const props = defineProps({
+  data: { type: Object, required: true },
+  tamu: { type: Object, required: true } // Tambahkan props tamu
+})
 
 // URL backend
 const config = useRuntimeConfig()
 const backendUrl = config.public.apiBaseUrl
+const route = useRoute()
 
 // Data backend
 const formData = computed(() => props.data.form || {})
+const messages = computed(() => props.data.rsvp || [])
 
 // ✅ Gambar galeri
 const galleryImages = computed(() => {
@@ -108,8 +114,8 @@ const currentSection = ref('landing')
 const sections = [
   { key: 'introduction', label: 'Intro' },
   { key: 'event', label: 'Event' },
-  { key: 'gallery', label: 'Gallery' },
-  { key: 'thanks', label: 'Thanks' }
+  { key: 'gallery', label: 'Galeri' },
+  { key: 'thanks', label: 'Terima Kasih' }
 ]
 
 const switchSection = (section) => (currentSection.value = section)
@@ -118,9 +124,7 @@ const switchSection = (section) => (currentSection.value = section)
 const isPlaying = ref(false)
 const toggleMusic = () => (isPlaying.value = !isPlaying.value)
 
-// 💬 Buku tamu
-const messages = ref([])
-const addMessage = (msg) => messages.value.push(msg)
+
 
 // 🎭 Komponen dinamis berdasarkan section
 const currentComponent = computed(() => {
@@ -138,7 +142,7 @@ const currentComponent = computed(() => {
 // 🎁 Props untuk tiap komponen
 const componentProps = computed(() => ({
   childName: formData.value.nama_panggilan,
-  guestName: props.data.nama_tamu,
+  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}`,
@@ -155,6 +159,16 @@ const componentProps = computed(() => ({
   jsonData: formData.value
 }))
 
+// Debug log
+import { watchEffect } from 'vue'
+watchEffect(() => {
+  console.log("🧾 formData:", formData.value)
+  console.log("🧾 messages:", messages.value)
+  console.log("🖼️ galleryImages:", galleryImages.value)
+  console.log("👤 tamu.nama_tamu:", props.tamu.nama_tamu)
+  console.log("🚪 route.query.guest:", route.query.guest)
+})
+
 // Style aktif navigasi
 const navClass = (key) =>
   currentSection.value === key
@@ -199,4 +213,4 @@ const navClass = (key) =>
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index c272e62..6bda90c 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -135,6 +135,7 @@ const fetchInvitation = async () => {
     // Validate response
     if (!response.success) {
       throw new Error(response.message || 'Undangan tidak ditemukan')
+      console.log('🎫 tamuData:', tamuData.value)
     }
 
     if (!response.data || !response.data.pelanggan) {