nama tamu

backend-baru/app/Http/Controllers/Api/RsvpApiController.php

@@ -30,6 +30,7 @@ class RsvpApiController extends Controller
 
             $rsvp = Rsvp::create([
                 'guest_id' => $guest->id,
+                'pelanggan_id' => $guest -> id_pelanggan,
                 'nama' => $validated['nama'],
                 'pesan' => $validated['pesan'],
                 'status_kehadiran' => $validated['status_kehadiran'],
@@ -41,16 +42,11 @@ class RsvpApiController extends Controller
                 'data' => $rsvp,
             ], 201);
 
-        } catch (\Illuminate\Validation\ValidationException $e) {
-            return response()->json([
-                'success' => false,
-                'message' => 'Validasi gagal',
-                'errors' => $e->errors(),
-            ], 422);
         } catch (\Exception $e) {
             return response()->json([
                 'success' => false,
                 'message' => 'Gagal menyimpan RSVP.',
+                'error' => $e->getMessage(),
             ], 500);
         }
     }

backend-baru/app/Models/Pelanggan.php

@@ -39,14 +39,7 @@ class Pelanggan extends Model
 
     public function rsvp()
     {
-        return $this->hasManyThrough(
-            Rsvp::class,
-            Guest::class,
-            'id_pelanggan',
-            'guest_id',
-            'id',
-            'id'
-        );
+        return $this->hasMany(Rsvp::class, 'pelanggan_id');
     }
 
 }

backend-baru/app/Models/Rsvp.php

@@ -8,9 +8,15 @@ use Illuminate\Database\Eloquent\Model;
 class Rsvp extends Model
 {
     use HasFactory;
-    protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran'];
+    protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran','pelanggan_id'];
 
     public function guest() {
         return $this->belongsTo(Guest::class);
     }
+
+    public function pelanggan()
+    {
+        return $this->belongsTo(Pelanggan::class, 'pelanggan_id');
+    }
+
 }

backend-baru/config/cors.php

@@ -19,7 +19,7 @@ return [
 
     'allowed_methods' => ['*'],
 
-    'allowed_origins' => ['*'],
+    'allowed_origins' => ['http://localhost:3001'],
 
     'allowed_origins_patterns' => [],
 

backend-baru/database/factories/RsvpFactory.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Rsvp;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class RsvpFactory extends Factory
+{
+    protected $model = Rsvp::class;
+
+    public function definition(): array
+    {
+        return [
+            'nama' => $this->faker->name(),
+            'pesan' => $this->faker->sentence(8),
+            'status_kehadiran' => $this->faker->randomElement(['hadir', 'tidak_hadir', 'mungkin']),
+        ];
+    }
+}

backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php

@@ -10,6 +10,7 @@ return new class extends Migration {
         Schema::create('rsvps', function (Blueprint $table) {
             $table->id();
             $table->foreignId('guest_id')->constrained('guests')->cascadeOnDelete(); // Link ke guests table
+            $table->foreignId('pelanggan_id')->constrained('pelanggans')->cascadeOnDelete(); // Link ke guests table
             $table->string('nama');
             $table->text('pesan');
             $table->enum('status_kehadiran', ['hadir', 'tidak_hadir', 'mungkin'])->default('mungkin');

backend-baru/database/seeders/PelangganSeeder.php

@@ -2,6 +2,7 @@
 
 namespace Database\Seeders;
 
+use App\Models\Rsvp;
 use Illuminate\Database\Seeder;
 use App\Models\Pelanggan;
 use Illuminate\Support\Str;
@@ -18,9 +19,17 @@ class PelangganSeeder extends Seeder
                 'id_pelanggan' => $item->id,
             ])->toArray();
             $guests = array_merge($guests, $guestData);
+
         }
         \App\Models\Guest::insert($guests);
-        
+
+         foreach ($pelanggan as $item) {
+            $guest = $item->guests()->inRandomOrder()->first();
+             Rsvp::factory(3)->create([
+                "pelanggan_id"=>$item->id,
+                "guest_id"=>$guest
+            ]);
+        }
         // $pelanggans = [
         //     [
         //         'nama_pemesan' => 'Arief Dwi Wicaksono',

backend-baru/routes/api.php

@@ -30,7 +30,7 @@ Route::get('/pelanggans', [PelangganApiController::class, 'index']);
 // Ambil pelanggan berdasarkan ID
 Route::get('/pelanggans/id/{id}', [PelangganApiController::class, 'show']);
 
-// Ambil pelanggan berdasarkan KODE UNDANGAN
+// Ambil undangan berdasarkan KODE UNDANGAN
 Route::get('/pelanggans/code/{code}', [GuestApiController::class, 'getByInvitationCode']);
 
 // Simpan pesanan baru

proyek-frontend/app/components/templates/Ultah/GuestBook.vue

@@ -47,27 +47,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]) // duplikat supaya bisa diubah
+
+
+const form = ref({ name: '', message: '', attendance: 'hadir' });
 
 // Fungsi untuk mengirim data RSVP ke backend
 const submitMessage = async () => {
@@ -84,6 +77,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: {
@@ -97,13 +91,14 @@ const submitMessage = async () => {
       
     });
 
-    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);
@@ -114,11 +109,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';
@@ -128,19 +123,14 @@ 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>

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>

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>

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

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>

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>

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) {

proyek-frontend/app/pages/p/daftar-tamu.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-3xl">
+    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-5xl">
       <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">
-        Manajemen Daftar Tamu
+        Manajemen Daftar Tamu & RSVP
       </h1>
 
       <!-- Input Kode Pelanggan -->
@@ -28,16 +28,39 @@
         </p>
       </div>
 
-      <!-- Area Data Tamu (Muncul setelah fetch berhasil) -->
+      <!-- Area Data Tamu -->
       <div v-if="dataLoaded">
         <!-- Info Kode Pelanggan -->
         <div class="bg-blue-50 p-3 rounded-lg mb-6">
           <p class="text-sm text-gray-700">
-            <span class="font-semibold">Kode Pelanggan:</span> 
+            <span class="font-semibold">Kode Pelanggan:</span>
             {{ kodePelanggan.toUpperCase() }}
           </p>
         </div>
-        
+
+        <!-- Ringkasan RSVP (4 kolom) -->
+        <div class="bg-green-50 p-4 rounded-lg mb-6 border border-green-200">
+          <h3 class="font-semibold text-green-800 mb-2">Ringkasan RSVP</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <p class="text-gray-600">Hadir</p>
+              <p class="font-bold text-green-600">{{ rsvpSummary.hadir }}</p>
+            </div>
+            <div>
+              <p class="text-gray-600">Tidak Hadir</p>
+              <p class="font-bold text-red-600">{{ rsvpSummary.tidak_hadir }}</p>
+            </div>
+            <div>
+              <p class="text-gray-600">Mungkin</p>
+              <p class="font-bold text-yellow-600">{{ rsvpSummary.mungkin }}</p>
+            </div>
+            <div>
+              <p class="text-gray-600">Belum RSVP</p>
+              <p class="font-bold text-gray-600">{{ rsvpSummary.belum_rsvp }}</p>
+            </div>
+          </div>
+        </div>
+
         <!-- Form Tambah Tamu -->
         <form @submit.prevent="handleAddGuest" class="mb-6">
           <label class="block text-sm font-semibold text-gray-700 mb-2">
@@ -60,7 +83,7 @@
             </button>
           </div>
         </form>
-        
+
         <p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm">
           {{ errorMessage }}
         </p>
@@ -73,29 +96,30 @@
           <h2 class="text-lg font-semibold text-gray-800 mb-3">
             Daftar Tamu ({{ guests.length }})
           </h2>
-          
-          <div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200">
+
+          <div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200 mb-10">
             <table class="w-full">
               <thead>
                 <tr class="bg-gray-100 border-b border-gray-200">
                   <th class="p-3 text-left font-semibold text-gray-700">No</th>
                   <th class="p-3 text-left font-semibold text-gray-700">Nama Tamu</th>
                   <th class="p-3 text-left font-semibold text-gray-700">Kode Invitasi</th>
+                  <th class="p-3 text-left font-semibold text-gray-700">Status RSVP</th>
                   <th class="p-3 text-center font-semibold text-gray-700">Aksi</th>
                 </tr>
               </thead>
               <tbody>
-                <tr 
-                  v-for="(guest, index) in guests" 
-                  :key="guest.id" 
+                <tr
+                  v-for="(guest, index) in guests"
+                  :key="guest.id"
                   class="border-b border-gray-100 hover:bg-gray-50 transition"
                 >
                   <td class="p-3 text-gray-700">{{ index + 1 }}</td>
                   <td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td>
                   <td class="p-3">
                     <div class="flex items-center gap-2">
-                      <a 
-                        :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" 
+                      <a
+                        :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`"
                         target="_blank"
                         class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
                         @click.stop
@@ -106,15 +130,31 @@
                         @click="shareInvitationLink(guest.kode_invitasi)"
                         class="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-xs font-medium transition shadow-sm whitespace-nowrap flex items-center gap-1"
                         :disabled="loading"
-                        title="Bagikan Link Invitasi"
+                        title="Bagikan Link"
                       >
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
                         </svg>
                         Share
                       </button>
                     </div>
                   </td>
+                  <td class="p-3">
+                    <span
+                      v-if="guest.rsvp"
+                      :class="{
+                        'px-3 py-1 rounded-full text-xs font-medium': true,
+                        'bg-green-100 text-green-800': guest.rsvp.status_kehadiran === 'hadir',
+                        'bg-red-100 text-red-800': guest.rsvp.status_kehadiran === 'tidak_hadir',
+                        'bg-yellow-100 text-yellow-800': guest.rsvp.status_kehadiran === 'mungkin'
+                      }"
+                    >
+                      {{ guest.rsvp.status_kehadiran === 'hadir' ? 'Hadir' :
+                         guest.rsvp.status_kehadiran === 'tidak_hadir' ? 'Tidak Hadir' : 'Mungkin' }}
+                    </span>
+                    <span v-else class="text-gray-400 text-xs italic">Belum RSVP</span>
+                  </td>
                   <td class="p-3 text-center">
                     <button
                       @click="handleDeleteGuest(guest.id)"
@@ -128,9 +168,64 @@
               </tbody>
             </table>
           </div>
-          <div v-else class="text-center py-8 bg-gray-50 rounded-lg border border-gray-200">
-            <p class="text-gray-500">Belum ada tamu yang ditambahkan.</p>
-            <p class="text-gray-400 text-sm mt-2">Tambahkan tamu pertama menggunakan form di atas.</p>
+        </div>
+
+        <!-- Daftar RSVP Lengkap -->
+        <div class="mt-10">
+          <h2 class="text-lg font-semibold text-gray-800 mb-3">
+            Daftar RSVP ({{ allRsvps.length }})
+          </h2>
+
+          <div v-if="allRsvps.length > 0" class="overflow-x-auto rounded-lg border border-gray-200">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="bg-indigo-50 border-b border-indigo-200">
+                  <th class="p-3 text-left font-semibold text-indigo-700">No</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Nama (RSVP)</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Nama Tamu (Undangan)</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Kode</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Status</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Ucapan</th>
+                  <th class="p-3 text-left font-semibold text-indigo-700">Waktu</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(rsvp, index) in allRsvps"
+                  :key="rsvp.id"
+                  class="border-b border-gray-100 hover:bg-indigo-50 transition"
+                >
+                  <td class="p-3 text-gray-700">{{ index + 1 }}</td>
+                  <td class="p-3 font-medium text-gray-800">{{ rsvp.nama || '-' }}</td>
+                  <td class="p-3 text-gray-600 italic">{{ rsvp.nama_tamu || '-' }}</td>
+                  <td class="p-3">
+                    <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ rsvp.kode_invitasi }}</code>
+                  </td>
+                  <td class="p-3">
+                    <span
+                      :class="{
+                        'px-2 py-1 rounded-full text-xs font-medium': true,
+                        'bg-green-100 text-green-800': rsvp.status_kehadiran === 'hadir',
+                        'bg-red-100 text-red-800': rsvp.status_kehadiran === 'tidak_hadir',
+                        'bg-yellow-100 text-yellow-800': rsvp.status_kehadiran === 'mungkin'
+                      }"
+                    >
+                      {{ rsvp.status_kehadiran === 'hadir' ? 'Hadir' :
+                         rsvp.status_kehadiran === 'tidak_hadir' ? 'Tidak Hadir' : 'Mungkin' }}
+                    </span>
+                  </td>
+                  <td class="p-3 text-gray-600 max-w-xs truncate" :title="rsvp.pesan">
+                    {{ rsvp.pesan || '-' }}
+                  </td>
+                  <td class="p-3 text-xs text-gray-500">
+                    {{ formatDate(rsvp.created_at) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div v-else class="text-center py-8 bg-indigo-50 rounded-lg border border-indigo-200">
+            <p class="text-indigo-600 font-medium">Belum ada RSVP dari tamu.</p>
           </div>
         </div>
       </div>
@@ -139,7 +234,7 @@
 </template>
 
 <script setup>
-// State Management
+// ---------- STATE ----------
 const kodePelanggan = ref('');
 const dataLoaded = ref(false);
 const guests = ref([]);
@@ -147,67 +242,63 @@ const namaTamu = ref('');
 const errorMessage = ref('');
 const successMessage = ref('');
 const loading = ref(false);
+const rsvpSummary = ref({ hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 });
+const allRsvps = ref([]);
+
 const config = useRuntimeConfig();
 const backendUrl = config.public.apiBaseUrl;
 
-// Runtime Config
-const { public: { apiBase } } = useRuntimeConfig();
-
-// Share invitation link
-const shareInvitationLink = async (kodeInvitasi) => {
-  const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`;
-  
-  if (navigator.share) {
-    // Native Web Share API (mobile)
-    try {
-      await navigator.share({
-        title: 'Undangan Pernikahan',
-        text: 'Silakan buka undangan pernikahan saya',
-        url: inviteUrl,
-      });
-    } catch (error) {
-      if (error.name !== 'AbortError') {
-        copyToClipboard(inviteUrl);
-      }
-    }
-  } else {
-    // Fallback to copy to clipboard (desktop)
-    copyToClipboard(inviteUrl);
-  }
-};
-
-// Copy to clipboard function
-const copyToClipboard = (text) => {
-  navigator.clipboard.writeText(text).then(() => {
-    // Show temporary success message
-    const originalText = successMessage.value;
-    successMessage.value = 'Link undangan berhasil disalin!';
-    setTimeout(() => {
-      successMessage.value = originalText;
-    }, 2000);
-  }).catch((err) => {
-    console.error('Failed to copy: ', err);
-    // Fallback for older browsers
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    try {
-      document.execCommand('copy');
-      const originalText = successMessage.value;
-      successMessage.value = 'Link undangan berhasil disalin!';
-      setTimeout(() => {
-        successMessage.value = originalText;
-      }, 2000);
-    } catch (err) {
-      console.error('Fallback copy failed: ', err);
-    }
-    document.body.removeChild(textArea);
+// ---------- UTILS ----------
+const formatDate = (dateString) => {
+  if (!dateString) return '-';
+  return new Date(dateString).toLocaleString('id-ID', {
+    day: '2-digit', month: 'short', year: 'numeric',
+    hour: '2-digit', minute: '2-digit'
   });
 };
 
-// Fetch guests data based on customer code
+const shareInvitationLink = async (kodeInvitasi) => {
+  const url = `${config.public.baseUrl}/p/${kodeInvitasi}`;
+  if (navigator.share) {
+    try { await navigator.share({ title: 'Undangan', url }); }
+    catch (e) { if (e.name !== 'AbortError') copyToClipboard(url); }
+  } else copyToClipboard(url);
+};
+
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    const old = successMessage.value;
+    successMessage.value = 'Link disalin!';
+    setTimeout(() => successMessage.value = old, 2000);
+  });
+};
+
+// ---------- FETCH RSVP PER KODE ----------
+const fetchRsvpForGuest = async (kodeInvitasi) => {
+  try {
+    const res = await $fetch(`${backendUrl}/api/rsvp/${kodeInvitasi}`, { method: 'GET' });
+    return res.success && res.data?.length ? res.data[0] : null;
+  } catch (e) {
+    console.error('RSVP fetch error:', e);
+    return null;
+  }
+};
+
+// ---------- FETCH SEMUA RSVP (hanya yang ada) ----------
+const fetchAllRsvps = async () => {
+  const list = [];
+  for (const g of guests.value) {
+    const r = await fetchRsvpForGuest(g.kode_invitasi);
+    if (r) {
+      r.nama_tamu = g.nama_tamu;          // tambahkan nama tamu
+      r.kode_invitasi = g.kode_invitasi;   // tambahkan kode
+      list.push(r);
+    }
+  }
+  allRsvps.value = list.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+};
+
+// ---------- FETCH GUESTS + COUNTER ----------
 const handleFetchGuests = async () => {
   if (!kodePelanggan.value.trim()) {
     errorMessage.value = 'Kode pelanggan harus diisi.';
@@ -217,99 +308,81 @@ const handleFetchGuests = async () => {
   loading.value = true;
   errorMessage.value = '';
   successMessage.value = '';
-  
+  rsvpSummary.value = { hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 };
+  allRsvps.value = [];
+
   try {
-    const response = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, {
-      method: 'GET',
-    });
-    
-    if (response.success) {
-      dataLoaded.value = true;
-      guests.value = response.data || [];
-      successMessage.value = 'Data tamu berhasil dimuat!';
-      setTimeout(() => { successMessage.value = ''; }, 3000);
-    } else {
-      errorMessage.value = response.message || 'Gagal mengambil daftar tamu.';
-      dataLoaded.value = false;
-    }
-  } catch (error) {
-    console.error('Fetch guests error:', error);
-    errorMessage.value = error.data?.message || 'Pelanggan tidak ditemukan atau pesanan belum diterima.';
+    const res = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, { method: 'GET' });
+    if (!res.success) throw new Error(res.message || 'Gagal mengambil data tamu');
+
+    const raw = res.data || [];
+    let hadir = 0, tidak_hadir = 0, mungkin = 0;
+
+    const guestsWithRsvp = await Promise.all(
+      raw.map(async (g) => {
+        const r = await fetchRsvpForGuest(g.kode_invitasi);
+        g.rsvp = r;
+
+        if (r?.status_kehadiran) {
+          if (r.status_kehadiran === 'hadir') hadir++;
+          else if (r.status_kehadiran === 'tidak_hadir') tidak_hadir++;
+          else if (r.status_kehadiran === 'mungkin') mungkin++;
+        }
+        return g;
+      })
+    );
+
+    const total = raw.length;
+    const belum = total - hadir - tidak_hadir - mungkin;
+
+    guests.value = guestsWithRsvp;
+    rsvpSummary.value = { hadir, tidak_hadir, mungkin, belum_rsvp: belum };
+
+    await fetchAllRsvps();
+
+    dataLoaded.value = true;
+    successMessage.value = 'Data tamu & RSVP berhasil dimuat!';
+    setTimeout(() => successMessage.value = '', 3000);
+  } catch (e) {
+    errorMessage.value = e.message || 'Pelanggan tidak ditemukan.';
     dataLoaded.value = false;
   } finally {
     loading.value = false;
   }
 };
 
-// Add new guest
+// ---------- TAMBAH & HAPUS ----------
 const handleAddGuest = async () => {
-  if (!namaTamu.value.trim()) {
-    errorMessage.value = 'Nama tamu harus diisi.';
-    return;
-  }
-
+  if (!namaTamu.value.trim()) { errorMessage.value = 'Nama tamu harus diisi.'; return; }
   loading.value = true;
-  errorMessage.value = '';
-  successMessage.value = '';
-  
   try {
-    const response = await $fetch(`${backendUrl}/api/guests`, {
-      baseURL: apiBase,
+    const res = await $fetch(`${backendUrl}/api/guests`, {
       method: 'POST',
-      body: {
-        kode_pelanggan: kodePelanggan.value.toUpperCase(),
-        nama_tamu: namaTamu.value.trim(),
-      },
+      body: { kode_pelanggan: kodePelanggan.value.toUpperCase(), nama_tamu: namaTamu.value.trim() }
     });
-    
-    if (response.success) {
-      guests.value.push(response.data);
+    if (res.success) {
       namaTamu.value = '';
-      successMessage.value = 'Tamu berhasil ditambahkan!';
-      setTimeout(() => { successMessage.value = ''; }, 3000);
-    } else {
-      errorMessage.value = response.message || 'Gagal menambahkan tamu.';
-    }
-  } catch (error) {
-    console.error('Add guest error:', error);
-    if (error.status === 422 && error.data?.errors) {
-      errorMessage.value = Object.values(error.data.errors).flat().join(' ');
-    } else {
-      errorMessage.value = error.data?.message || 'Terjadi kesalahan saat menambahkan tamu.';
-    }
-  } finally {
-    loading.value = false;
-  }
+      successMessage.value = 'Tamu ditambahkan!';
+      setTimeout(() => successMessage.value = '', 2000);
+      await handleFetchGuests();
+    } else errorMessage.value = res.message || 'Gagal tambah tamu.';
+  } catch (e) {
+    errorMessage.value = e.data?.message || 'Error saat tambah tamu.';
+  } finally { loading.value = false; }
 };
 
-// Delete guest
 const handleDeleteGuest = async (id) => {
-  if (!confirm('Apakah Anda yakin ingin menghapus tamu ini?')) {
-    return;
-  }
-
+  if (!confirm('Hapus tamu ini?')) return;
   loading.value = true;
-  errorMessage.value = '';
-  successMessage.value = '';
-  
   try {
-    const response = await $fetch(`${backendUrl}/api/guests/${id}`, {
-      baseURL: apiBase,
-      method: 'DELETE',
-    });
-    
-    if (response.success) {
-      guests.value = guests.value.filter(guest => guest.id !== id);
-      successMessage.value = 'Tamu berhasil dihapus!';
-      setTimeout(() => { successMessage.value = ''; }, 3000);
-    } else {
-      errorMessage.value = response.message || 'Gagal menghapus tamu.';
-    }
-  } catch (error) {
-    console.error('Delete guest error:', error);
-    errorMessage.value = error.data?.message || 'Terjadi kesalahan saat menghapus tamu.';
-  } finally {
-    loading.value = false;
-  }
+    const res = await $fetch(`${backendUrl}/api/guests/${id}`, { method: 'DELETE' });
+    if (res.success) {
+      successMessage.value = 'Tamu dihapus!';
+      setTimeout(() => successMessage.value = '', 2000);
+      await handleFetchGuests();
+    } else errorMessage.value = res.message || 'Gagal hapus.';
+  } catch (e) {
+    errorMessage.value = e.data?.message || 'Error hapus tamu.';
+  } finally { loading.value = false; }
 };
 </script>