From 29de22c0d0117154577d379e1c8d0dbb68f442c3 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Tue, 28 Oct 2025 11:34:34 +0700
Subject: [PATCH] fix design ultah basic

---
 .../templates/UltahBasic/GuestBook.vue        | 133 ++++++++++--------
 .../undangan/undangan-ulang-tahun-basic.vue   |  88 +++++-------
 2 files changed, 108 insertions(+), 113 deletions(-)

diff --git a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
index abf543d..dcbd1bf 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
@@ -1,37 +1,55 @@
 <template>
   <div class="p-6 text-center max-w-2xl mx-auto relative">
     <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
-      💌 Buku Tamu 💌
+      💌 Guest Book 💌
     </h2>
 
     <!-- 🎈 Balon Kiri -->
-    <img src="/balloon2.png" alt="Balloons Left"
-      class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none" />
+    <img
+      src="/balloon2.png"
+      alt="Balloons Left"
+      class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
+    />
 
     <!-- 🎈 Balon Kanan -->
-    <img src="/balloon2.png" alt="Balloons Right"
-      class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none" />
+    <img
+      src="/balloon2.png"
+      alt="Balloons Right"
+      class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
+    />
 
     <!-- 💌 Form RSVP -->
-    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10">
+    <div
+      class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
+    >
       <form @submit.prevent="submitMessage" class="space-y-4">
         <!-- Nama Tamu -->
         <div>
-          <input v-model="form.name" type="text" :placeholder="guest || 'Nama Lengkap Tamu'"
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="guest || 'Nama Lengkap Tamu'"
             class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300"
-            :disabled="!!guest" />
+            :disabled="!!guest"
+          />
         </div>
 
         <!-- Pesan/Ucapan -->
         <div>
-          <textarea v-model="form.message" rows="4" placeholder="Tulis ucapan dan harapan terbaik..."
-            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"></textarea>
+          <textarea
+            v-model="form.message"
+            rows="4"
+            placeholder="Tulis ucapan dan harapan terbaik..."
+            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
+          ></textarea>
         </div>
 
         <!-- Status Kehadiran -->
         <div>
-          <select v-model="form.attendance"
-            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white">
+          <select
+            v-model="form.attendance"
+            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white"
+          >
             <option value="hadir">✅ Saya Hadir</option>
             <option value="tidak_hadir">❌ Tidak Hadir</option>
             <option value="mungkin">🤔 Mungkin Hadir</option>
@@ -39,13 +57,19 @@
         </div>
 
         <!-- Error Message -->
-        <div v-if="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
+        <div
+          v-if="errorMessage"
+          class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl"
+        >
           {{ errorMessage }}
         </div>
 
         <!-- Submit Button -->
-        <button type="submit" :disabled="!form.name.trim() || !form.message.trim() || submitLoading"
-          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg">
+        <button
+          type="submit"
+          :disabled="!form.name.trim() || !form.message.trim() || submitLoading"
+          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg"
+        >
           ✨ {{ submitLoading ? 'Mengirim...' : 'Kirim RSVP' }}
         </button>
       </form>
@@ -58,16 +82,17 @@
     </div>
 
     <div v-else class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
-      <div v-for="(msg, i) in messages" :key="msg.id || i"
-        class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300">
-        <div class="flex items-start justify-between mb-2">
-          <span class="font-bold text-orange-800 text-lg">{{ msg.nama }}</span>
-          <span :class="getAttendanceClass(msg.status_kehadiran)" class="px-3 py-1 rounded-full text-sm font-semibold">
+     <div class="space-y-4">
+      <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
+        <div class="flex items-center justify-between mb-2">
+          <span class="font-bold text-orange-800">{{ msg.nama }}</span>
+          <span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
             {{ formatAttendance(msg.status_kehadiran) }}
           </span>
         </div>
-        <p class="text-gray-700 text-left">{{ msg.pesan }}</p>
+        <p class="text-gray-700">{{ msg.pesan }}</p>
       </div>
+    </div>
 
       <div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
         <p class="text-gray-600 text-lg">
@@ -86,27 +111,20 @@ const route = useRoute();
 const config = useRuntimeConfig();
 const backendUrl = config.public.apiBaseUrl;
 const invitationCode = route.params.code || '';
-const guest = route.query.guest
+const guest = route.query.code
 
-
-const messages = ref([]);
-const form = ref({ name: '', message: '', attendance: 'hadir' });
-
-
-// Fungsi untuk mengambil daftar RSVP dari backend
-const fetchMessages = async () => {
-  try {
-    const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`);
-    if (!response.ok) throw new Error('Gagal mengambil data RSVP');
-
-    const data = await response.json();
-    messages.value = data.data || [];
-  } catch (error) {
-    console.error('Error mengambil RSVP:', error);
-    alert('Terjadi kesalahan saat mengambil data RSVP.');
+const props = defineProps({
+  messages: {
+    type: Array,
+    required: false,
+    default: () => []
   }
-};
+})
 
+const messages = ref([...props.messages]) 
+
+
+const form = ref({ name: '', message: '', attendance: 'hadir' });
 
 // Fungsi untuk mengirim data RSVP ke backend
 const submitMessage = async () => {
@@ -123,6 +141,7 @@ const submitMessage = async () => {
   }
 
   try {
+    console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, payload)
     const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
       method: 'POST',
       headers: {
@@ -131,18 +150,19 @@ const submitMessage = async () => {
       body: JSON.stringify({
         nama: form.value.name,
         pesan: form.value.message,
-        status_kehadiran: form.value.attendance,
+        status_kehadiran: form.value.attendance, 
       }),
-
+      
     });
 
-    if (!response.ok) {
-      throw new Error('Gagal menyimpan RSVP');
+    if (!response.ok) { 
+      console.log(response)
+      throw new Error(`Gagal menyimpan RSVP,${response.errors}`);
     }
-
+  
     const result = await response.json();
     messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
-    form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
+    form.value = { name: '', message: '', attendance: 'hadir' };
     alert(result.message); // Tampilkan pesan sukses dari backend
   } catch (error) {
     console.error('Error menyimpan RSVP:', error);
@@ -153,11 +173,11 @@ const submitMessage = async () => {
 // Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
 const getAttendanceClass = (attendance) => {
   switch (attendance) {
-    case 'yes':
+    case 'iya':
       return 'bg-green-100 text-green-700';
-    case 'no':
+    case 'tidak':
       return 'bg-red-100 text-red-700';
-    case 'maybe':
+    case 'mungkin':
       return 'bg-yellow-100 text-yellow-700';
     default:
       return 'bg-gray-100 text-gray-700';
@@ -167,33 +187,25 @@ const getAttendanceClass = (attendance) => {
 // Fungsi untuk memformat teks kehadiran
 const formatAttendance = (attendance) => {
   switch (attendance) {
-    case 'yes':
+    case 'iya':
       return 'Hadir';
-    case 'no':
+    case 'tidak':
       return 'Tidak Hadir';
-    case 'maybe':
+    case 'mungkin':
       return 'Mungkin';
     default:
       return attendance;
   }
 };
-
-// Panggil fetchMessages saat komponen dimuat
-onMounted(() => {
-  fetchMessages();
-});
 </script>
-
 <style scoped>
 @keyframes swing-top {
   0% {
     transform: rotate(2deg);
   }
-
   50% {
     transform: rotate(-2deg);
   }
-
   100% {
     transform: rotate(2deg);
   }
@@ -202,6 +214,5 @@ onMounted(() => {
 .animate-swing-top {
   animation: swing-top 4s ease-in-out infinite;
   transform-origin: bottom center;
-  /* ✅ Balon berayun dari bawah (tali diam) */
 }
-</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 0286ae8..930b174 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
@@ -9,81 +9,58 @@
     </div>
 
     <!-- Navigation -->
-    <nav
-      v-if="currentSection !== 'landing'"
-      class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in"
-    >
+    <nav v-if="currentSection !== 'landing'"
+      class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in">
       <ul
-        class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200"
-      >
-        <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">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>
+        class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200">
+        <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">Galeri</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">Terima Kasih</button></li>
       </ul>
     </nav>
 
     <!-- Tombol Musik -->
     <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
-      <button
-        @click="toggleMusic"
-        class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl"
-      >
+      <button @click="toggleMusic"
+        class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl">
         <span class="text-lg">{{ isPlaying ? '⏸️' : '▶️' }}</span>
       </button>
     </div>
 
     <!-- Main Section -->
     <main
-      class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
-    >
+      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' && tamu"
-        :childName="formData.nama_panggilan"
+      <Landing v-if="currentSection === 'landing' && tamu" :childName="formData.nama_panggilan"
         :guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
-        @open-invitation="switchSection('introduction')"
-        @toggle-music="toggleMusic"
-      />
+        @open-invitation="switchSection('introduction')" @toggle-music="toggleMusic" />
 
       <!-- Introduction -->
-      <Introduction
-        v-if="currentSection === 'introduction'"
-        :age="formData.umur_yang_dirayakan"
-        :childName="formData.nama_lengkap"
-        :childOrder="formData.anak_ke"
+      <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[0]}` : null"
-      />
+        :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : 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"
-      />
+      <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 === 'gallery'" :images="galleryImages" />
 
       <!-- Guest Book -->
-      <GuestBook
-        v-if="currentSection === 'guestbook'"
-        :guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
-        :messages="messages"
-        @addMessage="addMessage"
-      />
+      <GuestBook v-if="currentSection === 'guestbook'" :guestName="tamu.nama_tamu || 'Tamu Undangan'" :messages="messages"
+        @addMessage="addMessage" />
 
       <!-- Thank You -->
-      <ThankYou
-        v-if="currentSection === 'thanks'"
-        :childName="formData.nama_panggilan"
-        :jsonData="formData"
-      />
+      <ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
     </main>
   </div>
 </template>
@@ -113,7 +90,7 @@ const route = useRoute()
 
 // Data dari backend
 const formData = computed(() => props.data.form || {})
-const messages = computed(() => props.data.rsvp || [])
+const messages = ref(props.data.rsvp || [])
 
 // Galeri gambar (support foto array atau field lama)
 const galleryImages = computed(() => {
@@ -167,8 +144,15 @@ button {
 }
 
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .animate-fade-in {