Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Magang-2025:f76c9a4987a584eb6d3448e70195992a28eae4d3
Branches Tags
Magang-2025:main
Magang-2025:baru
Magang-2025:production
..
compare: Magang-2025:fc6c4a214a77d0770ee278a103b82a30b609aefd
Branches Tags
Magang-2025:baru
Magang-2025:main
Magang-2025:production

No commits in common. "f76c9a4987a584eb6d3448e70195992a28eae4d3" and "fc6c4a214a77d0770ee278a103b82a30b609aefd" have entirely different histories.
f76c9a4987 ... fc6c4a214a

16 changed files with 303 additions and 413 deletions
Show Stats Expand all files Collapse all files

8
backend-baru/app/Http/Controllers/Api/RsvpApiController.php
View File

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

9
backend-baru/app/Models/Pelanggan.php
View File

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

8
backend-baru/app/Models/Rsvp.php
View File

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

2
backend-baru/config/cors.php
View File

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

20
backend-baru/database/factories/RsvpFactory.php
View File

@ -1,20 +0,0 @@
<?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']),
];
}
}

1
backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php
View File

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

11
backend-baru/database/seeders/PelangganSeeder.php
View File

@ -2,7 +2,6 @@
namespace Database\Seeders; namespace Database\Seeders;
use App\Models\Rsvp;
use Illuminate\Database\Seeder; use Illuminate\Database\Seeder;
use App\Models\Pelanggan; use App\Models\Pelanggan;
use Illuminate\Support\Str; use Illuminate\Support\Str;
@ -19,17 +18,9 @@ class PelangganSeeder extends Seeder
'id_pelanggan' => $item->id, 'id_pelanggan' => $item->id,
])->toArray(); ])->toArray();
$guests = array_merge($guests, $guestData); $guests = array_merge($guests, $guestData);
} }
\App\Models\Guest::insert($guests); \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 = [ // $pelanggans = [
// [ // [
// 'nama_pemesan' => 'Arief Dwi Wicaksono', // 'nama_pemesan' => 'Arief Dwi Wicaksono',

2
backend-baru/routes/api.php
View File

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

56
proyek-frontend/app/components/templates/Ultah/GuestBook.vue
View File

@ -47,21 +47,28 @@ const route = useRoute();
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const backendUrl = config.public.apiBaseUrl; const backendUrl = config.public.apiBaseUrl;
const invitationCode = route.params.code || ''; const invitationCode = route.params.code || '';
const guest = route.query.code const guest = route.query.guest
const props = defineProps({
messages: {
type: Array,
required: false,
default: () => []
}
})
const messages = ref([...props.messages]) // duplikat supaya bisa diubah
const messages = ref([]);
const form = ref({ name: '', message: '', attendance: 'hadir' }); 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.');
}
};
// Fungsi untuk mengirim data RSVP ke backend // Fungsi untuk mengirim data RSVP ke backend
const submitMessage = async () => { const submitMessage = async () => {
if (!form.value.name || !form.value.message) { if (!form.value.name || !form.value.message) {
@ -77,7 +84,6 @@ const submitMessage = async () => {
} }
try { try {
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, payload)
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, { const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -91,14 +97,13 @@ const submitMessage = async () => {
}); });
if (!response.ok) { if (!response.ok) {
console.log(response) throw new Error('Gagal menyimpan RSVP');
throw new Error(`Gagal menyimpan RSVP,${response.errors}`);
} }
const result = await response.json(); const result = await response.json();
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
form.value = { name: '', message: '', attendance: 'hadir' }; form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
alert(result.message); // Tampilkan pesan sukses dari backend alert(result.message); // Tampilkan pesan sukses dari backend
} catch (error) { } catch (error) {
console.error('Error menyimpan RSVP:', error); console.error('Error menyimpan RSVP:', error);
@ -109,11 +114,11 @@ const submitMessage = async () => {
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran // Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
const getAttendanceClass = (attendance) => { const getAttendanceClass = (attendance) => {
switch (attendance) { switch (attendance) {
case 'iya': case 'yes':
return 'bg-green-100 text-green-700'; return 'bg-green-100 text-green-700';
case 'tidak': case 'no':
return 'bg-red-100 text-red-700'; return 'bg-red-100 text-red-700';
case 'mungkin': case 'maybe':
return 'bg-yellow-100 text-yellow-700'; return 'bg-yellow-100 text-yellow-700';
default: default:
return 'bg-gray-100 text-gray-700'; return 'bg-gray-100 text-gray-700';
@ -123,14 +128,19 @@ const getAttendanceClass = (attendance) => {
// Fungsi untuk memformat teks kehadiran // Fungsi untuk memformat teks kehadiran
const formatAttendance = (attendance) => { const formatAttendance = (attendance) => {
switch (attendance) { switch (attendance) {
case 'iya': case 'yes':
return 'Hadir'; return 'Hadir';
case 'tidak': case 'no':
return 'Tidak Hadir'; return 'Tidak Hadir';
case 'mungkin': case 'maybe':
return 'Mungkin'; return 'Mungkin';
default: default:
return attendance; return attendance;
} }
}; };
// Panggil fetchMessages saat komponen dimuat
onMounted(() => {
fetchMessages();
});
</script> </script>

10
proyek-frontend/app/components/templates/Ultah/Landing.vue
View File

@ -14,7 +14,7 @@
<!-- Right Side (Text) --> <!-- Right Side (Text) -->
<div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10"> <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"> <h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
Rayakan Bersama Kami Celebrate With Us
</h1> </h1>
<h2 <h2
class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md" class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
@ -22,14 +22,14 @@
{{ childName }} {{ childName }}
</h2> </h2>
<h3 class="text-orange-800 text-2xl md:text-4xl font-bold"> <h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
Pesta Ulang Tahun Birthday Party
</h3> </h3>
<div <div
class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block" 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-700 text-lg">Kepada Yth.</p>
<p class="text-orange-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p> <p class="text-orange-800 text-xl font-bold">{{ guestName }}</p>
</div> </div>
<div> <div>
@ -37,7 +37,7 @@
@click="$emit('open-invitation')" @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" 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"
> >
Buka Undangan Open Invitation
</button> </button>
</div> </div>
</div> </div>
@ -72,4 +72,4 @@ defineProps({
.animate-bounce-slow { .animate-bounce-slow {
animation: bounce-slow 3s infinite ease-in-out; animation: bounce-slow 3s infinite ease-in-out;
} }
</style> </style>

8
proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<section <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-center 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-between overflow-hidden"
> >
<!-- 🌐 Efek jaring latar --> <!-- 🌐 Efek jaring latar -->
<div class="absolute inset-0 opacity-10 pointer-events-none"> <div class="absolute inset-0 opacity-10 pointer-events-none">
@ -37,7 +37,7 @@
<!-- ================= KONTEN TEKS (KIRI) ================= --> <!-- ================= KONTEN TEKS (KIRI) ================= -->
<div <div
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" 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"
> >
<div class="text-5xl sm:text-6xl animate-bounce">🕷️</div> <div class="text-5xl sm:text-6xl animate-bounce">🕷️</div>
@ -67,7 +67,7 @@
<!-- Tombol Kembali --> <!-- Tombol Kembali -->
<button <button
@click="reloadPage" @click="reloadPage"
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" 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"
> >
<span class="text-2xl">🕸️</span> <span class="text-2xl">🕸️</span>
Kembali ke Awal Kembali ke Awal
@ -132,4 +132,4 @@ onMounted(() => {
object-position: center right; object-position: center right;
} }
} }
</style> </style>

29
proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
View File

@ -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('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('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('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">Buku Tamu</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> <li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Thanks</button></li>
</ul> </ul>
</nav> </nav>
@ -40,11 +40,10 @@
> >
<!-- Landing --> <!-- Landing -->
<Landing <Landing
v-if="currentSection === 'landing' && tamu" v-if="currentSection === 'landing'"
:childName="formData.nama_panggilan" :childName="formData.nama_panggilan"
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'" :guestName="data.nama_tamu"
@open-invitation="switchSection('introduction')" @open-invitation="switchSection('introduction')"
@toggle-music="toggleMusic"
/> />
<!-- Introduction --> <!-- Introduction -->
@ -73,7 +72,7 @@
<!-- Guest Book --> <!-- Guest Book -->
<GuestBook <GuestBook
v-if="currentSection === 'guestbook'" v-if="currentSection === 'guestbook'"
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'" :guestName="data.nama_tamu"
:messages="messages" :messages="messages"
@addMessage="addMessage" @addMessage="addMessage"
/> />
@ -85,12 +84,14 @@
:jsonData="formData" :jsonData="formData"
/> />
</main> </main>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed, watchEffect } from 'vue' import { ref, computed, watchEffect } from 'vue'
import { useRoute, useRuntimeConfig } from '#app' import { useRuntimeConfig } from '#app'
// Import Komponen // Import Komponen
import Landing from '~/components/templates/UltahBasic/Landing.vue' import Landing from '~/components/templates/UltahBasic/Landing.vue'
@ -102,18 +103,15 @@ import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
// Props dari halaman induk // Props dari halaman induk
const props = defineProps({ 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) // Runtime config (untuk backend URL)
const config = useRuntimeConfig() const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl const backendUrl = config.public.apiBaseUrl
const route = useRoute()
// Data dari backend // Data dari backend
const formData = computed(() => props.data.form || {}) const formData = computed(() => props.data.form || {})
const messages = computed(() => props.data.rsvp || [])
// Galeri gambar (support foto array atau field lama) // Galeri gambar (support foto array atau field lama)
const galleryImages = computed(() => { const galleryImages = computed(() => {
@ -127,16 +125,12 @@ const galleryImages = computed(() => {
formData.value.foto_3, formData.value.foto_3,
formData.value.foto_4, formData.value.foto_4,
formData.value.foto_5 formData.value.foto_5
].filter(Boolean).map(img => `${backendUrl}/storage/${img}`) ].filter(Boolean).map(img => `${backendUrl}/${img}`)
}) })
// Debug log
watchEffect(() => { watchEffect(() => {
console.log("🧾 formData:", formData.value) console.log("🧾 formData:", formData.value)
console.log("🧾 messages:", messages.value)
console.log("🖼️ galleryImages:", galleryImages.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 // Navigasi antar bagian
@ -148,6 +142,7 @@ const isPlaying = ref(false)
const toggleMusic = () => (isPlaying.value = !isPlaying.value) const toggleMusic = () => (isPlaying.value = !isPlaying.value)
// Buku tamu // Buku tamu
const messages = ref([])
const addMessage = (msg) => messages.value.push(msg) const addMessage = (msg) => messages.value.push(msg)
// Style untuk navigasi aktif // Style untuk navigasi aktif

160
proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
View File

@ -1,67 +1,59 @@
<template> <template>
<div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden"> <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
<!-- Navigation --> <!-- Navigation -->
<nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"> <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"> <ul
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li> 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('event')" :class="navClass('event')">Event</button></li> <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
<li><button @click="switchSection('galeri')" :class="navClass('galeri')">Galeri</button></li> <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
<li><button @click="switchSection('say')" :class="navClass('say')">Buku Tamu</button></li> <li><button @click="switchSection('galeri')" :class="navClass('galeri')">Gallery</button></li>
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li> <li><button @click="switchSection('say')" :class="navClass('say')">Guest Book</button></li>
</ul> <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
</nav> </ul>
</nav>
<!-- Tombol Musik --> <!-- Tombol Musik -->
<div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'"> <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"> <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
{{ isPlaying ? '⏸️' : '▶️' }} {{ isPlaying ? '⏸️' : '▶️' }}
</button> </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>
</div> </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> </template>
<script setup> <script setup>
import { ref, computed, watchEffect } from 'vue' import { ref, computed } from 'vue'
import { useRoute, useRuntimeConfig } from '#app' import { useRuntimeConfig } from '#app'
// Komponen // Komponen
import Landing from '~/components/templates/Ultah/Landing.vue' import Landing from '~/components/templates/Ultah/Landing.vue'
@ -71,44 +63,50 @@ import Gallery from '~/components/templates/Ultah/Gallery.vue'
import GuestBook from '~/components/templates/Ultah/GuestBook.vue' import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
import ThankYou from '~/components/templates/Ultah/ThankYou.vue' import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
// Props dari halaman /p/[code].vue // Props dari halaman /p/[code].vue
const props = defineProps({ const props = defineProps({
data: { type: Object, required: true }, data: { type: Object, required: true }
tamu: { type: Object, required: true } // Tambahkan props tamu
}) })
// Runtime config // Runtime config
const config = useRuntimeConfig() const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl const backendUrl = config.public.apiBaseUrl
const route = useRoute()
// Data form dari backend // Data form dari backend
const formData = computed(() => props.data.form || {}) const formData = computed(() => props.data.form || {})
const rsvpData = computed(() => props.data.rsvp || {})
const galleryImages = computed(() => { const galleryImages = computed(() => {
const f = formData.value.foto const f = formData.value.foto
if (Array.isArray(f)) {
return f.map(img => `${backendUrl}/storage/${img}`)
} if (Array.isArray(f)) {
return [ return f.map(img => `${backendUrl}/storage/${img}`)
formData.value.foto_1, }
formData.value.foto_2,
formData.value.foto_3, // Jika masih bentuk lama (foto_1, foto_2, dst.)
formData.value.foto_4, return [
formData.value.foto_5 formData.value.foto_1,
].filter(Boolean).map(img => `${backendUrl}/${img}`) 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(() => { watchEffect(() => {
console.log("🧾 formData:", formData.value) console.log("🧾 formData:", formData.value)
console.log("🧾 rsvpData:", rsvpData.value) console.log("🖼️ galleryImages:", galleryImages.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 // Navigasi antar section
const currentSection = ref('landing') const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s) const switchSection = (s) => (currentSection.value = s)
@ -121,9 +119,9 @@ const toggleMusic = () => (isPlaying.value = !isPlaying.value)
const messages = ref([]) const messages = ref([])
const addMessage = (msg) => messages.value.push(msg) const addMessage = (msg) => messages.value.push(msg)
// Dummy countdown // Dummy countdown (bisa diganti dinamis nanti)
const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 }) const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 })
// Style untuk navigasi aktif // Style untuk navigasi aktif
const navClass = (s) => (currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600') const navClass = (s) => (currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600')
</script> </script>

32
proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
View File

@ -68,7 +68,6 @@
v-bind="componentProps" v-bind="componentProps"
@open-invitation="switchSection('introduction')" @open-invitation="switchSection('introduction')"
@addMessage="addMessage" @addMessage="addMessage"
@toggle-music="toggleMusic"
/> />
</transition> </transition>
</main> </main>
@ -77,7 +76,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { useRoute, useRuntimeConfig } from '#app' import { useRuntimeConfig } from '#app'
// 🧩 Import Semua Komponen // 🧩 Import Semua Komponen
import Landing from '~/components/templates/UltahStarter/Landing.vue' import Landing from '~/components/templates/UltahStarter/Landing.vue'
@ -87,19 +86,14 @@ import Gallery from '~/components/templates/UltahStarter/Gallery.vue'
import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue' import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
// Props dari induk // Props dari induk
const props = defineProps({ const props = defineProps({ data: Object })
data: { type: Object, required: true },
tamu: { type: Object, required: true } // Tambahkan props tamu
})
// URL backend // URL backend
const config = useRuntimeConfig() const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl const backendUrl = config.public.apiBaseUrl
const route = useRoute()
// Data backend // Data backend
const formData = computed(() => props.data.form || {}) const formData = computed(() => props.data.form || {})
const messages = computed(() => props.data.rsvp || [])
// ✅ Gambar galeri // ✅ Gambar galeri
const galleryImages = computed(() => { const galleryImages = computed(() => {
@ -114,8 +108,8 @@ const currentSection = ref('landing')
const sections = [ const sections = [
{ key: 'introduction', label: 'Intro' }, { key: 'introduction', label: 'Intro' },
{ key: 'event', label: 'Event' }, { key: 'event', label: 'Event' },
{ key: 'gallery', label: 'Galeri' }, { key: 'gallery', label: 'Gallery' },
{ key: 'thanks', label: 'Terima Kasih' } { key: 'thanks', label: 'Thanks' }
] ]
const switchSection = (section) => (currentSection.value = section) const switchSection = (section) => (currentSection.value = section)
@ -124,7 +118,9 @@ const switchSection = (section) => (currentSection.value = section)
const isPlaying = ref(false) const isPlaying = ref(false)
const toggleMusic = () => (isPlaying.value = !isPlaying.value) const toggleMusic = () => (isPlaying.value = !isPlaying.value)
// 💬 Buku tamu
const messages = ref([])
const addMessage = (msg) => messages.value.push(msg)
// 🎭 Komponen dinamis berdasarkan section // 🎭 Komponen dinamis berdasarkan section
const currentComponent = computed(() => { const currentComponent = computed(() => {
@ -142,7 +138,7 @@ const currentComponent = computed(() => {
// 🎁 Props untuk tiap komponen // 🎁 Props untuk tiap komponen
const componentProps = computed(() => ({ const componentProps = computed(() => ({
childName: formData.value.nama_panggilan, childName: formData.value.nama_panggilan,
guestName: route.query.guest || props.tamu.nama_tamu || 'Tamu Undangan', guestName: props.data.nama_tamu,
age: formData.value.umur_yang_dirayakan, age: formData.value.umur_yang_dirayakan,
childOrder: formData.value.anak_ke, childOrder: formData.value.anak_ke,
parentsName: `${formData.value.nama_bapak} & ${formData.value.nama_ibu}`, parentsName: `${formData.value.nama_bapak} & ${formData.value.nama_ibu}`,
@ -159,16 +155,6 @@ const componentProps = computed(() => ({
jsonData: formData.value 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 // Style aktif navigasi
const navClass = (key) => const navClass = (key) =>
currentSection.value === key currentSection.value === key
@ -213,4 +199,4 @@ const navClass = (key) =>
from { opacity: 0; transform: translateY(-10px); } from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
</style> </style>

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

@ -135,7 +135,6 @@ const fetchInvitation = async () => {
// Validate response // Validate response
if (!response.success) { if (!response.success) {
throw new Error(response.message || 'Undangan tidak ditemukan') throw new Error(response.message || 'Undangan tidak ditemukan')
console.log('🎫 tamuData:', tamuData.value)
} }
if (!response.data || !response.data.pelanggan) { if (!response.data || !response.data.pelanggan) {

359
proyek-frontend/app/pages/p/daftar-tamu.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4"> <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-5xl"> <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"> <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">
Manajemen Daftar Tamu & RSVP Manajemen Daftar Tamu
</h1> </h1>
<!-- Input Kode Pelanggan --> <!-- Input Kode Pelanggan -->
@ -28,39 +28,16 @@
</p> </p>
</div> </div>
<!-- Area Data Tamu --> <!-- Area Data Tamu (Muncul setelah fetch berhasil) -->
<div v-if="dataLoaded"> <div v-if="dataLoaded">
<!-- Info Kode Pelanggan --> <!-- Info Kode Pelanggan -->
<div class="bg-blue-50 p-3 rounded-lg mb-6"> <div class="bg-blue-50 p-3 rounded-lg mb-6">
<p class="text-sm text-gray-700"> <p class="text-sm text-gray-700">
<span class="font-semibold">Kode Pelanggan:</span> <span class="font-semibold">Kode Pelanggan:</span>
{{ kodePelanggan.toUpperCase() }} {{ kodePelanggan.toUpperCase() }}
</p> </p>
</div> </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 Tambah Tamu -->
<form @submit.prevent="handleAddGuest" class="mb-6"> <form @submit.prevent="handleAddGuest" class="mb-6">
<label class="block text-sm font-semibold text-gray-700 mb-2"> <label class="block text-sm font-semibold text-gray-700 mb-2">
@ -83,7 +60,7 @@
</button> </button>
</div> </div>
</form> </form>
<p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm"> <p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm">
{{ errorMessage }} {{ errorMessage }}
</p> </p>
@ -96,30 +73,29 @@
<h2 class="text-lg font-semibold text-gray-800 mb-3"> <h2 class="text-lg font-semibold text-gray-800 mb-3">
Daftar Tamu ({{ guests.length }}) Daftar Tamu ({{ guests.length }})
</h2> </h2>
<div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200 mb-10"> <div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200">
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr class="bg-gray-100 border-b border-gray-200"> <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">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">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">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> <th class="p-3 text-center font-semibold text-gray-700">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(guest, index) in guests" v-for="(guest, index) in guests"
:key="guest.id" :key="guest.id"
class="border-b border-gray-100 hover:bg-gray-50 transition" 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-700">{{ index + 1 }}</td>
<td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td> <td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td>
<td class="p-3"> <td class="p-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a <a
:href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`"
target="_blank" target="_blank"
class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition" class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
@click.stop @click.stop
@ -130,31 +106,15 @@
@click="shareInvitationLink(guest.kode_invitasi)" @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" 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" :disabled="loading"
title="Bagikan Link" title="Bagikan Link Invitasi"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" <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>
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> </svg>
Share Share
</button> </button>
</div> </div>
</td> </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"> <td class="p-3 text-center">
<button <button
@click="handleDeleteGuest(guest.id)" @click="handleDeleteGuest(guest.id)"
@ -168,64 +128,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</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>
<!-- Daftar RSVP Lengkap --> <p class="text-gray-400 text-sm mt-2">Tambahkan tamu pertama menggunakan form di atas.</p>
<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> </div>
</div> </div>
@ -234,7 +139,7 @@
</template> </template>
<script setup> <script setup>
// ---------- STATE ---------- // State Management
const kodePelanggan = ref(''); const kodePelanggan = ref('');
const dataLoaded = ref(false); const dataLoaded = ref(false);
const guests = ref([]); const guests = ref([]);
@ -242,63 +147,67 @@ const namaTamu = ref('');
const errorMessage = ref(''); const errorMessage = ref('');
const successMessage = ref(''); const successMessage = ref('');
const loading = ref(false); const loading = ref(false);
const rsvpSummary = ref({ hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 });
const allRsvps = ref([]);
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const backendUrl = config.public.apiBaseUrl; const backendUrl = config.public.apiBaseUrl;
// ---------- UTILS ---------- // Runtime Config
const formatDate = (dateString) => { const { public: { apiBase } } = useRuntimeConfig();
if (!dateString) return '-';
return new Date(dateString).toLocaleString('id-ID', {
day: '2-digit', month: 'short', year: 'numeric',
hour: '2-digit', minute: '2-digit'
});
};
// Share invitation link
const shareInvitationLink = async (kodeInvitasi) => { const shareInvitationLink = async (kodeInvitasi) => {
const url = `${config.public.baseUrl}/p/${kodeInvitasi}`; const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`;
if (navigator.share) { if (navigator.share) {
try { await navigator.share({ title: 'Undangan', url }); } // Native Web Share API (mobile)
catch (e) { if (e.name !== 'AbortError') copyToClipboard(url); } try {
} else copyToClipboard(url); 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) => { const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
const old = successMessage.value; // Show temporary success message
successMessage.value = 'Link disalin!'; const originalText = successMessage.value;
setTimeout(() => successMessage.value = old, 2000); 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);
}); });
}; };
// ---------- FETCH RSVP PER KODE ---------- // Fetch guests data based on customer code
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 () => { const handleFetchGuests = async () => {
if (!kodePelanggan.value.trim()) { if (!kodePelanggan.value.trim()) {
errorMessage.value = 'Kode pelanggan harus diisi.'; errorMessage.value = 'Kode pelanggan harus diisi.';
@ -308,81 +217,99 @@ const handleFetchGuests = async () => {
loading.value = true; loading.value = true;
errorMessage.value = ''; errorMessage.value = '';
successMessage.value = ''; successMessage.value = '';
rsvpSummary.value = { hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 };
allRsvps.value = [];
try { try {
const res = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, { method: 'GET' }); const response = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, {
if (!res.success) throw new Error(res.message || 'Gagal mengambil data tamu'); method: 'GET',
});
const raw = res.data || [];
let hadir = 0, tidak_hadir = 0, mungkin = 0; if (response.success) {
dataLoaded.value = true;
const guestsWithRsvp = await Promise.all( guests.value = response.data || [];
raw.map(async (g) => { successMessage.value = 'Data tamu berhasil dimuat!';
const r = await fetchRsvpForGuest(g.kode_invitasi); setTimeout(() => { successMessage.value = ''; }, 3000);
g.rsvp = r; } else {
errorMessage.value = response.message || 'Gagal mengambil daftar tamu.';
if (r?.status_kehadiran) { dataLoaded.value = false;
if (r.status_kehadiran === 'hadir') hadir++; }
else if (r.status_kehadiran === 'tidak_hadir') tidak_hadir++; } catch (error) {
else if (r.status_kehadiran === 'mungkin') mungkin++; console.error('Fetch guests error:', error);
} errorMessage.value = error.data?.message || 'Pelanggan tidak ditemukan atau pesanan belum diterima.';
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; dataLoaded.value = false;
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
// ---------- TAMBAH & HAPUS ---------- // Add new guest
const handleAddGuest = async () => { 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; loading.value = true;
errorMessage.value = '';
successMessage.value = '';
try { try {
const res = await $fetch(`${backendUrl}/api/guests`, { const response = await $fetch(`${backendUrl}/api/guests`, {
baseURL: apiBase,
method: 'POST', 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 (res.success) {
if (response.success) {
guests.value.push(response.data);
namaTamu.value = ''; namaTamu.value = '';
successMessage.value = 'Tamu ditambahkan!'; successMessage.value = 'Tamu berhasil ditambahkan!';
setTimeout(() => successMessage.value = '', 2000); setTimeout(() => { successMessage.value = ''; }, 3000);
await handleFetchGuests(); } else {
} else errorMessage.value = res.message || 'Gagal tambah tamu.'; errorMessage.value = response.message || 'Gagal menambahkan tamu.';
} catch (e) { }
errorMessage.value = e.data?.message || 'Error saat tambah tamu.'; } catch (error) {
} finally { loading.value = false; } 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) => { const handleDeleteGuest = async (id) => {
if (!confirm('Hapus tamu ini?')) return; if (!confirm('Apakah Anda yakin ingin menghapus tamu ini?')) {
return;
}
loading.value = true; loading.value = true;
errorMessage.value = '';
successMessage.value = '';
try { try {
const res = await $fetch(`${backendUrl}/api/guests/${id}`, { method: 'DELETE' }); const response = await $fetch(`${backendUrl}/api/guests/${id}`, {
if (res.success) { baseURL: apiBase,
successMessage.value = 'Tamu dihapus!'; method: 'DELETE',
setTimeout(() => successMessage.value = '', 2000); });
await handleFetchGuests();
} else errorMessage.value = res.message || 'Gagal hapus.'; if (response.success) {
} catch (e) { guests.value = guests.value.filter(guest => guest.id !== id);
errorMessage.value = e.data?.message || 'Error hapus tamu.'; successMessage.value = 'Tamu berhasil dihapus!';
} finally { loading.value = false; } 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> </script>