[Update] Guest

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

@@ -0,0 +1,137 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Guest;
+use App\Models\Pelanggan;
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+
+class GuestApiController extends Controller
+{
+    public function index(string $code)
+    {
+        $pelanggan = Pelanggan::where('kode_pelanggan', $code)->first();
+        if (!$pelanggan) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Pelanggan tidak ditemukan.',
+            ], 404);
+        }
+        if ($pelanggan->status !== 'diterima') {
+            return response()->json([
+                'success' => false,
+                'message' => 'Pesanan belum diterima.',
+            ], 400);
+        }
+
+        $guests = Guest::where('id_pelanggan', $pelanggan->id)->get();
+
+        return response()->json([
+            'success' => true,
+            'data'    => $guests,
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        try {
+            $validated = $request->validate([
+                'kode_pelanggan' => 'required|exists:pelanggans,kode_pelanggan',
+                'nama_tamu' => 'required|string|max:255',
+            ]);
+
+            $pelanggan = Pelanggan::where('kode_pelanggan', $validated['kode_pelanggan'])->firstOrFail();
+
+            $jumlah_tamu = Guest::where('id_pelanggan', $pelanggan->id)->count();
+            $paket = $pelanggan->template->paket;
+            if ($paket === 'starter' && $jumlah_tamu >= 10) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Batas tamu untuk paket starter adalah 10.',
+                ], 400);
+            } elseif ($paket === 'basic' && $jumlah_tamu >= 20) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Batas tamu untuk paket Basic adalah 20.',
+                ], 400);
+            } elseif ($paket === 'premium' && $jumlah_tamu >= 30) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Batas tamu untuk paket Premium adalah 30.',
+                ], 400);
+            }
+            // cek anunya udah diterima
+            if ($pelanggan->status !== 'diterima') {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Pesanan belum diterima.',
+                ], 400);
+            }
+
+            $guest = Guest::create([
+                'id_pelanggan' => $pelanggan->id,
+                'nama_tamu' => $validated['nama_tamu'],
+                'kode_invitasi' => 'INV-' . strtoupper(Str::random(6)),
+            ]);
+
+            return response()->json([
+                'success' => true,
+                'data'    => $guest,
+            ], 201);
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Validation failed',
+                'errors'  => $e->errors(),
+            ], 422);
+        }
+    }
+
+    public function destroy(int $id)
+    {
+        $guest = Guest::find($id);
+
+        if (!$guest) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Tamu tidak ditemukan.',
+            ], 404);
+        }
+
+        try {
+            $guest->delete();
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Tamu berhasil dihapus.',
+            ], 200);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Gagal menghapus tamu.',
+            ], 500);
+        }
+    }
+
+    // Ambil undangan berdasarkan invitation code
+    public function getByInvitationCode($code)
+    {
+        $data = Guest::with('pelanggan.template')
+            ->where('kode_invitasi', $code)
+            ->first();
+
+        if (!$data) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Data undangan tidak ditemukan.',
+            ], 404);
+        }
+
+        return response()->json([
+            'success' => true,
+            'data'    => $data,
+        ]);
+    }
+}

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

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Models\Guest;
 use App\Models\Pelanggan;
 use App\Models\Template;
 use Illuminate\Http\Request;
@@ -26,10 +27,10 @@ class PelangganApiController extends Controller
 
             $template = Template::where('slug', $request->input('template_slug'))->firstOrFail();
 
-            // Generate unique invitation code
+            // Generate unique customer code
-            $invitationCode = 'INV-' . strtoupper(Str::random(6));
+            $customerCode = 'CUST-' . strtoupper(Str::random(6));
-            while (Pelanggan::where('invitation_code', $invitationCode)->exists()) {
+            while (Pelanggan::where('kode_pelanggan', $customerCode)->exists()) {
-                $invitationCode = 'INV-' . strtoupper(Str::random(6));
+                $customerCode = 'CUST-' . strtoupper(Str::random(6));
             }
 
             // Handle file uploads
@@ -50,7 +51,7 @@ class PelangganApiController extends Controller
                 'form'            => array_merge($validated['form'], ['foto' => $fotoPaths]),
                 'harga'           => $template->harga,
                 'status'          => 'menunggu',
-                'invitation_code' => $invitationCode,
+                'kode_pelanggan'  => $customerCode,
             ]);
 
             return response()->json([
@@ -108,27 +109,6 @@ class PelangganApiController extends Controller
         ]);
     }
 
-    // 🔹 Ambil pesanan berdasarkan invitation code
-    public function getByInvitationCode($code)
-    {
-        $pelanggan = Pelanggan::with('template')
-            ->where('invitation_code', $code)
-            ->where('status', 'diterima')
-            ->first();
-
-        if (!$pelanggan) {
-            return response()->json([
-                'success' => false,
-                'message' => 'Data undangan tidak ditemukan.',
-            ], 404);
-        }
-
-        return response()->json([
-            'success' => true,
-            'data'    => $pelanggan,
-        ]);
-    }
-
     // 🔹 Update status pesanan (opsional untuk admin mobile)
     public function updateStatus(Request $request, $id)
     {

backend-baru/app/Models/Guest.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Guest extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'id_pelanggan',
+        'nama_tamu',
+        'kode_invitasi',
+    ];
+
+    public function pelanggan()
+    {
+        return $this->belongsTo(Pelanggan::class, 'id_pelanggan');
+    }
+}

backend-baru/app/Models/Pelanggan.php

@@ -19,7 +19,7 @@ class Pelanggan extends Model
         'form',
         'harga',
         'status',
-        'invitation_code',
+        'kode_pelanggan',
     ];
 
     protected $casts = [
@@ -31,4 +31,9 @@ class Pelanggan extends Model
     {
         return $this->belongsTo(Template::class, 'template_id');
     }
+
+    public function guests()
+    {
+        return $this->hasMany(Guest::class, 'id_pelanggan');
+    }
 }

backend-baru/database/factories/GuestFactory.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+use App\Models\Guest;
+
+class GuestFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            'id_pelanggan' => null, // Diisi oleh seeder
+            'nama_tamu' => $this->faker->name(),
+            'kode_invitasi' => $this->generateUniqueInvitationCode(),
+        ];
+    }
+
+    protected function generateUniqueInvitationCode(): string
+    {
+        do {
+            $code = 'INV-' . strtoupper(Str::random(6));
+        } while (Guest::where('kode_invitasi', $code)->exists());
+
+        return $code;
+    }
+}

backend-baru/database/factories/PelangganFactory.php

@@ -24,7 +24,7 @@ class PelangganFactory extends Factory
 
         // Generate unique invitation code
         $invitationCode = 'INV-' . strtoupper(Str::random(6));
-        while (Pelanggan::where('invitation_code', $invitationCode)->exists()) {
+        while (Pelanggan::where('kode_pelanggan', $invitationCode)->exists()) {
             $invitationCode = 'INV-' . strtoupper(Str::random(6));
         }
 
@@ -36,7 +36,7 @@ class PelangganFactory extends Factory
             'form' => $formData,
             'harga' => $template->harga,
             'status' => $this->faker->randomElement(['menunggu', 'diterima', 'ditolak']),
-            'invitation_code' => $invitationCode,
+            'kode_pelanggan' => $invitationCode,
         ];
     }
 

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

@@ -21,7 +21,7 @@ return new class extends Migration {
 
             $table->decimal('harga', 15, 2)->nullable();
             $table->enum('status', ['menunggu', 'diterima', 'ditolak'])->default('menunggu');
-            $table->string('invitation_code')->unique();
+            $table->string('kode_pelanggan')->unique();
             $table->timestamps();
         });
     }

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

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('guests', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('id_pelanggan')->constrained('pelanggans')->cascadeOnDelete();
+            $table->string('nama_tamu');
+            $table->string('kode_invitasi');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('guests');
+    }
+};

backend-baru/database/seeders/PelangganSeeder.php

@@ -10,7 +10,17 @@ class PelangganSeeder extends Seeder
 {
     public function run(): void
     {
-        Pelanggan::factory(100)->create();
+        $pelanggan = Pelanggan::factory(100)->create();
+
+        $guests = [];
+        foreach ($pelanggan as $item) {
+            $guestData = \App\Models\Guest::factory()->count(rand(1, 5))->make([
+                'id_pelanggan' => $item->id,
+            ])->toArray();
+            $guests = array_merge($guests, $guestData);
+        }
+        \App\Models\Guest::insert($guests);
+        
         // $pelanggans = [
         //     [
         //         'nama_pemesan' => 'Arief Dwi Wicaksono',

backend-baru/routes/api.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Api\GuestApiController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\Api\TemplateApiController;
@@ -30,7 +31,7 @@ Route::get('/pelanggans', [PelangganApiController::class, 'index']);
 Route::get('/pelanggans/id/{id}', [PelangganApiController::class, 'show']);
 
 // Ambil pelanggan berdasarkan KODE UNDANGAN
-Route::get('/pelanggans/code/{code}', [PelangganApiController::class, 'getByInvitationCode']);
+Route::get('/pelanggans/code/{code}', [GuestApiController::class, 'getByInvitationCode']);
 
 // Simpan pesanan baru
 Route::post('/pelanggans', [PelangganApiController::class, 'store']);
@@ -45,3 +46,11 @@ Route::get('/reviews', [ReviewApiController::class, 'index']);
 Route::post('/reviews', [ReviewApiController::class, 'store']);
 Route::get('/reviews/{id}', [ReviewApiController::class, 'show']);
 Route::delete('/reviews/{id}', [ReviewApiController::class, 'destroy']);
+
+// ============================
+// GUESTS
+// Ini buat si pelanggan mengotak atik tamu undangannya
+// ============================
+Route::get('/guests/{code}', [GuestApiController::class, 'index']);
+Route::post('/guests', [GuestApiController::class, 'store']);
+Route::delete('/guests/{id}', [GuestApiController::class, 'destroy']);

proyek-frontend/app/pages/p/[code].vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="w-full min-h--screen bg-gray-100">
+  <div class="w-full min-h-screen bg-gray-100">
-   
-
     <!-- Loading State -->
-    <div v-if="pending" class="text-center">
+    <div v-if="isLoading" class="flex items-center justify-center min-h-screen">
+      <div class="text-center">
         <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500 mx-auto"></div>
         <p class="mt-4 text-gray-600">Loading invitation...</p>
       </div>
+    </div>
 
     <!-- Error State -->
-    <div v-else-if="error || !data" class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
+    <div v-else-if="hasError" class="flex items-center justify-center min-h-screen p-4">
+      <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
         <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -17,26 +18,60 @@
           </path>
         </svg>
         <p class="text-lg font-semibold text-gray-800 mb-2">Undangan Tidak Ditemukan</p>
-      <p class="text-gray-600 mb-6">Maaf, undangan yang Anda cari tidak tersedia atau sudah tidak berlaku.</p>
+        <p class="text-gray-600 mb-6">{{ errorMessage }}</p>
         <NuxtLink to="/"
           class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
           Kembali ke Beranda
         </NuxtLink>
       </div>
+    </div>
 
     <!-- Data Loaded Successfully -->
-    <div v-else-if="data && data.template">
+    <div v-else-if="pelangganData">
       <!-- Dynamic Component for Known Slugs -->
-      <component v-if="dynamicComponent" :is="dynamicComponent" :data="data" />
+      <component v-if="dynamicComponent" :is="dynamicComponent" :data="pelangganData" :tamu="tamuData" />
 
       <!-- Fallback for Unknown Slugs -->
-      <div v-else class="w-full bg-white rounded-lg shadow-lg p-8">
+      <div v-else class="container mx-auto p-4">
+        <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
           <h1 class="text-2xl font-bold text-gray-800 mb-1">Invitation Data</h1>
           <div class="text-sm mb-4 text-gray-500">Tampilan ini muncul saat komponen template belum tersedia</div>
-        <div v-for="(value, key) in data" :key="key" class="mb-4">
+          
-          <h2 class="text-lg font-semibold text-gray-700 capitalize">{{ key.replace('_', ' ') }}</h2>
+          <!-- Guest Info -->
-          <p v-if="typeof value !== 'object'" class="text-gray-600">{{ value }}</p>
+          <div class="mb-6 p-4 bg-blue-50 rounded-lg">
-          <pre v-else class="text-gray-600 bg-gray-50 p-2 rounded">{{ JSON.stringify(value, null, 2) }}</pre>
+            <h2 class="text-lg font-semibold text-gray-700 mb-2">Informasi Tamu</h2>
+            <p class="text-gray-600"><strong>Nama:</strong> {{ tamuData.nama_tamu }}</p>
+            <p class="text-gray-600"><strong>Kode:</strong> {{ tamuData.kode_invitasi }}</p>
+          </div>
+
+          <!-- Customer Info -->
+          <div class="mb-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-2">Informasi Pelanggan</h2>
+            <p class="text-gray-600"><strong>Nama:</strong> {{ pelangganData.nama_pemesan }}</p>
+            <p class="text-gray-600"><strong>Email:</strong> {{ pelangganData.email }}</p>
+            <p class="text-gray-600"><strong>No. Telp:</strong> {{ pelangganData.no_tlpn }}</p>
+            <p class="text-gray-600"><strong>Status:</strong> {{ pelangganData.status }}</p>
+          </div>
+
+          <!-- Template Info -->
+          <div class="mb-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-2">Template</h2>
+            <p class="text-gray-600"><strong>Nama:</strong> {{ pelangganData.template.nama_template }}</p>
+            <p class="text-gray-600"><strong>Slug:</strong> {{ pelangganData.template.slug }}</p>
+            <p class="text-gray-600"><strong>Paket:</strong> {{ pelangganData.template.paket }}</p>
+          </div>
+
+          <!-- Form Data -->
+          <div class="mb-6">
+            <h2 class="text-lg font-semibold text-gray-700 mb-2">Data Form</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div v-for="(value, key) in pelangganData.form" :key="key" class="p-3 bg-gray-50 rounded">
+                <p class="text-sm font-medium text-gray-700 capitalize">{{ key.replace(/_/g, ' ') }}</p>
+                <p v-if="typeof value !== 'object'" class="text-sm text-gray-600 break-words">{{ value || '-' }}</p>
+                <pre v-else class="text-xs text-gray-600 overflow-x-auto">{{ JSON.stringify(value, null, 2) }}</pre>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -44,63 +79,20 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent, computed } from 'vue'
+import { defineAsyncComponent, ref, computed, onMounted } from 'vue'
-import { useRoute, useRuntimeConfig, useAsyncData, createError } from '#app'
+import { useRoute, useRuntimeConfig } from '#app'
 
 const route = useRoute()
 const config = useRuntimeConfig()
 const backendUrl = config.public.apiBaseUrl
 
-const { data, pending, error } = await useAsyncData(
+// State management
-  'invitation',
+const isLoading = ref(true)
-  async () => {
+const hasError = ref(false)
-    try {
+const errorMessage = ref('Maaf, undangan yang Anda cari tidak tersedia atau sudah tidak berlaku.')
-      const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
+const invitationData = ref(null)
-      console.log('✅ API response:', response)
-      console.log('🧾 response.data:', response.data)
-      console.log('🧩 Template data:', response.data?.template)
-      console.log('🔖 Template slug:', response.data?.template?.slug)
-      // Check if the API response indicates failure
-      if (!response.success) {
-        throw createError({
-          statusCode: 404,
-          message: response.message || 'Undangan tidak ditemukan',
-          fatal: false
-        })
-      }
-
-      // Validate data structure
-      if (!response.data || !response.data.template) {
-        throw createError({
-          statusCode: 404,
-          message: 'Data undangan tidak valid',
-          fatal: false
-        })
-      }
-
-      return response.data
-    } catch (err) {
-      // Handle network errors or other exceptions
-      if (err.statusCode) {
-        throw err
-      }
-
-      throw createError({
-        statusCode: err.statusCode || 500,
-        message: 'Undangan tidak ditemukan',
-        fatal: false
-      })
-    }
-  },
-  {
-    // Prevent automatic error propagation
-    lazy: false,
-    server: true,
-    // Transform function to ensure consistent data structure
-    transform: (data) => data
-  }
-)
 
+// Component map
 const componentMap = {
   'undangan-minimalis': defineAsyncComponent(() => import('~/components/undangan/undangan-minimalis.vue')),
   'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
@@ -110,30 +102,81 @@ const componentMap = {
   'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
   'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
   'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
-  // Add more mappings as templates are developed
 }
 
-const dynamicComponent = computed(() => {
+// Computed properties
-  if (!data.value?.template?.slug) return null
+const pelangganData = computed(() => invitationData.value?.pelanggan || null)
-  return componentMap[data.value.template.slug] || null
-})
 
-// === DEBUG WATCHER ===
+const tamuData = computed(() => {
-watchEffect(() => {
+  if (!invitationData.value) return null
-  if (data.value) {
+  return {
-    console.log('📦 Template slug:', data.value?.template?.slug)
+    id: invitationData.value.id,
-    console.log('🧩 Dynamic component:', dynamicComponent.value)
+    nama_tamu: invitationData.value.nama_tamu,
+    kode_invitasi: invitationData.value.kode_invitasi,
+    created_at: invitationData.value.created_at,
+    updated_at: invitationData.value.updated_at
   }
 })
 
-// Set meta tags only if data exists
+const dynamicComponent = computed(() => {
+  if (!pelangganData.value?.template?.slug) return null
+  return componentMap[pelangganData.value.template.slug] || null
+})
+
+// Fetch data function
+const fetchInvitation = async () => {
+  try {
+    console.log('🔍 Fetching invitation for code:', route.params.code)
+    
+    const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
+    
+    console.log('✅ API response:', response)
+
+    // Validate response
+    if (!response.success) {
+      throw new Error(response.message || 'Undangan tidak ditemukan')
+    }
+
+    if (!response.data || !response.data.pelanggan) {
+      throw new Error('Data undangan tidak valid')
+    }
+
+    if (!response.data.pelanggan.template) {
+      throw new Error('Template undangan tidak ditemukan')
+    }
+
+    // Set data
+    invitationData.value = response.data
+    
+    console.log('📦 Pelanggan:', pelangganData.value)
+    console.log('🎫 Tamu:', tamuData.value)
+    console.log('📝 Template slug:', pelangganData.value?.template?.slug)
+    console.log('🧩 Component:', dynamicComponent.value ? 'Found' : 'Not found')
+
+  } catch (err) {
+    console.error('❌ Error fetching invitation:', err)
+    hasError.value = true
+    errorMessage.value = err.message || 'Terjadi kesalahan saat memuat undangan.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Fetch on client side only
+onMounted(() => {
+  fetchInvitation()
+})
+
+// Set meta tags
 useHead(() => ({
-  title: data.value?.nama_pemesan || 'Undangan Tak Bernama',
+  title: pelangganData.value?.nama_pemesan 
+    ? `Undangan dari ${pelangganData.value.nama_pemesan}` 
+    : 'Undangan Digital',
   meta: [
     {
       name: 'description',
-      content: data.value
+      content: pelangganData.value
-        ? `${data.value.nama_pemesan} mengundang Anda untuk menghadiri acara berikut!`
+        ? `${pelangganData.value.nama_pemesan} mengundang Anda untuk menghadiri acara ${pelangganData.value.template?.nama_template || 'spesial'}!`
         : 'Undangan Digital'
     },
   ],

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

@@ -0,0 +1,241 @@
+<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">
+      <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">
+        Manajemen Daftar Tamu
+      </h1>
+
+      <!-- Input Kode Pelanggan -->
+      <div class="mb-6">
+        <form @submit.prevent="handleFetchGuests" class="flex gap-2">
+          <input
+            v-model="kodePelanggan"
+            type="text"
+            placeholder="Kode Pelanggan (contoh: PLG-123456)"
+            class="flex-1 border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+          <button
+            type="submit"
+            class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed whitespace-nowrap"
+            :disabled="loading"
+          >
+            {{ loading ? 'Memuat...' : 'Cari' }}
+          </button>
+        </form>
+        <p v-if="errorMessage && !dataLoaded" class="text-red-500 mt-3 text-sm">
+          {{ errorMessage }}
+        </p>
+      </div>
+
+      <!-- Area Data Tamu (Muncul setelah fetch berhasil) -->
+      <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> 
+            {{ kodePelanggan.toUpperCase() }}
+          </p>
+        </div>
+        
+        <!-- Form Tambah Tamu -->
+        <form @submit.prevent="handleAddGuest" class="mb-6">
+          <label class="block text-sm font-semibold text-gray-700 mb-2">
+            Tambah Tamu Baru
+          </label>
+          <div class="flex gap-2">
+            <input
+              v-model="namaTamu"
+              type="text"
+              placeholder="Nama Tamu"
+              class="flex-1 border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
+              required
+            />
+            <button
+              type="submit"
+              class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed whitespace-nowrap"
+              :disabled="loading"
+            >
+              {{ loading ? 'Menambahkan...' : 'Tambah' }}
+            </button>
+          </div>
+        </form>
+        
+        <p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm">
+          {{ errorMessage }}
+        </p>
+        <p v-if="successMessage" class="text-green-500 mb-4 text-sm">
+          {{ successMessage }}
+        </p>
+
+        <!-- Tabel Daftar Tamu -->
+        <div class="mt-6">
+          <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">
+            <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-center font-semibold text-gray-700">Aksi</th>
+                </tr>
+              </thead>
+              <tbody>
+                <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 text-gray-600 font-mono text-sm">
+                    <a :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" target="_blank">{{ guest.kode_invitasi }}</a>
+                  </td>
+                  <td class="p-3 text-center">
+                    <button
+                      @click="handleDeleteGuest(guest.id)"
+                      class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed text-sm"
+                      :disabled="loading"
+                    >
+                      Hapus
+                    </button>
+                  </td>
+                </tr>
+              </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// State Management
+const kodePelanggan = ref('');
+const dataLoaded = ref(false);
+const guests = ref([]);
+const namaTamu = ref('');
+const errorMessage = ref('');
+const successMessage = ref('');
+const loading = ref(false);
+const config = useRuntimeConfig();
+const backendUrl = config.public.apiBaseUrl;
+
+// Runtime Config
+const { public: { apiBase } } = useRuntimeConfig();
+
+// Fetch guests data based on customer code
+const handleFetchGuests = async () => {
+  if (!kodePelanggan.value.trim()) {
+    errorMessage.value = 'Kode pelanggan harus diisi.';
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = '';
+  successMessage.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.';
+    dataLoaded.value = false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Add new guest
+const handleAddGuest = async () => {
+  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,
+      method: 'POST',
+      body: {
+        kode_pelanggan: kodePelanggan.value.toUpperCase(),
+        nama_tamu: namaTamu.value.trim(),
+      },
+    });
+    
+    if (response.success) {
+      guests.value.push(response.data);
+      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;
+  }
+};
+
+// Delete guest
+const handleDeleteGuest = async (id) => {
+  if (!confirm('Apakah Anda yakin ingin menghapus 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;
+  }
+};
+</script>

proyek-frontend/nuxt.config.ts

@@ -26,6 +26,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
+      baseUrl: process.env.NUXT_PUBLIC_BASE_URL || 'http://localhost:3000',
       apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
     }
   }