From dc6c0ce9206a1f2f67e1eee4dbae1da99a2ded67 Mon Sep 17 00:00:00 2001
From: MuzakkiABBAUF <muzakki.abbauftech@gmail.com>
Date: Mon, 13 Oct 2025 15:43:25 +0700
Subject: [PATCH] fix

---
 .../app/pages/form/undangan-khitan-basic.vue  | 109 +++++++++---------
 .../pages/form/undangan-khitan-premium.vue    |  37 +++---
 2 files changed, 74 insertions(+), 72 deletions(-)

diff --git a/proyek-frontend/app/pages/form/undangan-khitan-basic.vue b/proyek-frontend/app/pages/form/undangan-khitan-basic.vue
index b815114..b2172f8 100644
--- a/proyek-frontend/app/pages/form/undangan-khitan-basic.vue
+++ b/proyek-frontend/app/pages/form/undangan-khitan-basic.vue
@@ -129,66 +129,67 @@
         />
       </section>
 
-      <!-- Galeri Foto -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
-        <div
-          class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
-        >
-          <input
-            id="gallery"
-            type="file"
-            multiple
-            accept="image/*"
-            class="hidden"
-            @change="handleFileChange"
-          />
-          <label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
-            <span class="text-4xl font-bold">+</span>
-            <span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
-          </label>
-          <div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            <div
-              v-for="(src, i) in previews"
-              :key="i"
-              class="relative group"
-            >
-              <img
-                :src="src"
-                class="w-24 h-24 object-cover rounded-lg border shadow"
-              />
-              <button
-                @click="removeFile(i)"
-                class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
-              >
-                ✕
-              </button>
-            </div>
-            <label
-              v-if="previews.length < 4"
-              for="gallery"
-              class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
-            >
-              <span class="text-3xl font-bold">+</span>
-            </label>
-          </div>
-        </div>
-      </section>
-
+      
       <!-- Musik -->
       <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
-        <input
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
+          <input
           v-model="form.form.link_music"
           type="text"
           placeholder="Link Musik (opsional)"
           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
-        />
-      </section>
-
-      <!-- Tombol -->
-      <div class="text-end mt-6">
-        <button
+          />
+        </section>
+        
+        <!-- Galeri Foto -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
+          <div
+            class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
+          >
+            <input
+              id="gallery"
+              type="file"
+              multiple
+              accept="image/*"
+              class="hidden"
+              @change="handleFileChange"
+            />
+            <label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
+              <span class="text-4xl font-bold">+</span>
+              <span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
+            </label>
+            <div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              <div
+                v-for="(src, i) in previews"
+                :key="i"
+                class="relative group"
+              >
+                <img
+                  :src="src"
+                  class="w-24 h-24 object-cover rounded-lg border shadow"
+                />
+                <button
+                  @click="removeFile(i)"
+                  class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
+                >
+                  ✕
+                </button>
+              </div>
+              <label
+                v-if="previews.length < 4"
+                for="gallery"
+                class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
+              >
+                <span class="text-3xl font-bold">+</span>
+              </label>
+            </div>
+          </div>
+        </section>
+        
+        <!-- Tombol -->
+        <div class="text-end mt-6">
+            <button
           @click="batal"
           class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"
         >
diff --git a/proyek-frontend/app/pages/form/undangan-khitan-premium.vue b/proyek-frontend/app/pages/form/undangan-khitan-premium.vue
index 91551db..04c676d 100644
--- a/proyek-frontend/app/pages/form/undangan-khitan-premium.vue
+++ b/proyek-frontend/app/pages/form/undangan-khitan-premium.vue
@@ -131,19 +131,28 @@
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <input v-model="form.form.rekening_1" placeholder="Rekening 1"
             class="w-full border border-gray-300 rounded-lg px-3 py-2 
-                   focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                   outline-none transition" />
-          <input v-model="form.form.rekening_2" placeholder="Rekening 2"
+            focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
+            outline-none transition" />
+            <input v-model="form.form.rekening_2" placeholder="Rekening 2"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 
+            focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
+            outline-none transition" />
+            <input v-model="form.form.rekening_3" placeholder="Rekening 3"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 
+            focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
+            outline-none transition" />
+          </div>
+        </section>
+        
+        <!-- Musik -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
+          <input v-model="form.form.link_music" placeholder="Link Music (opsional)"
             class="w-full border border-gray-300 rounded-lg px-3 py-2 
                    focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
                    outline-none transition" />
-          <input v-model="form.form.rekening_3" placeholder="Rekening 3"
-            class="w-full border border-gray-300 rounded-lg px-3 py-2 
-                   focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                   outline-none transition" />
-        </div>
-      </section>
-
+        </section>
+        
       <!-- Foto Upload -->
       <section class="mb-8">
         <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
@@ -178,14 +187,6 @@
         </div>
       </section>
 
-      <!-- Musik -->
-      <section class="mb-8">
-        <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
-        <input v-model="form.form.link_music" placeholder="Link Music (opsional)"
-          class="w-full border border-gray-300 rounded-lg px-3 py-2 
-                 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 
-                 outline-none transition" />
-      </section>
 
       <!-- Tombol -->
       <div class="text-end mt-6">