From d2b2db90a614545e8cd4e6be84863c5b4385e221 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Tue, 14 Oct 2025 11:37:54 +0700
Subject: [PATCH] fix kategori

---
 .../template-page/CategorySelection.vue       | 59 ++++++++-----------
 .../components/template-page/TemplateGrid.vue | 50 +++++++++-------
 2 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index b142f4a..9d7dcbd 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -29,38 +29,28 @@
           Gagal memuat kategori.
         </div>
 
-       <!-- Kategori Grid -->
-    <div 
-      v-else-if="categories.length > 0" 
-      class="mt-12 flex flex-wrap justify-center gap-6"
-    >
-      <div 
-        v-for="category in categories" 
-        :key="category.id + '-' + category.foto"
-        @click="onCategoryClick(category)"
-        class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
-      >
-        <img 
-          v-if="category.foto" 
-          :src="`http://localhost:8000${category.foto}`" 
-          :alt="category.nama" 
-          class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
-        >
-        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
-        <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
-          <h3 class="text-xl font-semibold mb-2">
-            {{ category.nama }}
-          </h3>
-          <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
-            {{ category.deskripsi }}
-          </p>
+        <!-- Kategori Grid -->
+        <div v-else-if="categories.length > 0" class="mt-12 flex flex-wrap justify-center gap-6">
+          <div v-for="category in categories" :key="category.id + '-' + category.foto"
+            @click="onCategoryClick(category)"
+            class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72">
+            <img v-if="category.foto" :src="`http://localhost:8000${category.foto}`" :alt="category.nama"
+              class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110">
+            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
+            <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
+              <h3 class="text-xl font-semibold mb-2">
+                {{ category.nama }}
+              </h3>
+              <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
+                {{ category.deskripsi }}
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
 
-    <div v-else class="mt-12 text-center text-gray-500">
-      Belum ada kategori.
-    </div>
+        <div v-else class="mt-12 text-center text-gray-500">
+          Belum ada kategori.
+        </div>
 
         <!-- Header Templates -->
         <div class="mt-20 text-center">
@@ -127,12 +117,11 @@
 
                 <!-- Buttons -->
                 <div class="flex items-center gap-3 mt-6">
-                  <button
-                    class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
-                    @click="onTemplateClick(t)">
+                  <button @click="$router.push(`/preview/${t.id}`)"
+                    class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors">
                     Preview
                   </button>
-                  <NuxtLink :to="`${t.formPath}?template_id=${t.id}`"
+                  <NuxtLink :to="`form/${t.formPath}`"
                     class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
                     Order
                   </NuxtLink>
@@ -263,7 +252,7 @@ const templatesWithFeatures = computed(() =>
     kategori: t.kategori,
     paket: paketData[index % paketData.length].paket,
     fiturs: paketData[index % paketData.length].fiturs.map((f, i) => ({ id: i + 1, deskripsi: f })),
-    formPath: formMapping[t.nama_template] || `/form/lainny` // 🔥 ambil path form sesuai mapping
+    formPath: t.slug
   }))
 )
 
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index 6a95b0c..b300adc 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -75,14 +75,16 @@
 
           <!-- Buttons -->
           <div class="flex items-center gap-3 mt-6">
-            <NuxtLink :to="`/preview/${tpl.id}`"
-              class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors text-center">
-              Preview
-            </NuxtLink>
-            <NuxtLink :to="`/form/${tpl.slug}`"
+
+            <NuxtLink ::to="`/form/${tpl.kategori.nama}/${tpl.slug}`"
               class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
               Order
+              <p class="text-xs text-gray-400 mt-2">Path: {{ `/form/${tpl.kategori?.nama}/${tpl.slug}` }}</p>
+
+              <!-- <pre>{{ tpl }}</pre> -->
             </NuxtLink>
+
+
           </div>
         </div>
       </div>
@@ -169,24 +171,26 @@ const fetchTemplates = async (categoryId) => {
     })
 
     templates.value = res.map(tpl => {
-      // Pastikan nama paket konsisten: 'Starter', 'Basic', 'Premium'
-      const paketKey = tpl.paket ? tpl.paket.charAt(0).toUpperCase() + tpl.paket.slice(1).toLowerCase() : 'Starter'
+  const paketKey = tpl.paket
+    ? tpl.paket.charAt(0).toUpperCase() + tpl.paket.slice(1).toLowerCase()
+    : 'Starter'
+
+  return {
+    id: tpl.id,
+    nama_template: tpl.nama_template,
+    slug: tpl.slug, 
+    harga: tpl.harga,
+    kategori: tpl.kategori, // pastikan kategori berisi object { nama_kategori }
+    foto: tpl.foto ?? '/logo2.png',
+    paket: paketKey,
+    fiturs: (fiturPerPaket[paketKey] || []).map((f, i) => ({
+      id: i + 1,
+      deskripsi: f
+    })),
+    preview_link: tpl.preview_link ?? null
+  }
+})
 
-      return {
-        id: tpl.id,
-        nama_template: tpl.nama_template,
-        harga: tpl.harga,
-        kategori: tpl.kategori,
-        foto: tpl.foto ?? '/logo2.png',
-        paket: paketKey,
-        fiturs: (fiturPerPaket[paketKey] || []).map((f, i) => ({
-          id: i + 1,
-          deskripsi: f
-        })),
-        preview_link: tpl.preview_link ?? null,
-        formPath: formMapping[tpl.nama_template] || '/form/lainny'
-      }
-    })
   } catch (err) {
     console.error(err)
     error.value = 'Gagal memuat template.'
@@ -202,6 +206,8 @@ onMounted(() => fetchTemplates(props.id_category))
 watch(() => props.id_category, (newId) => {
   if (newId) fetchTemplates(newId)
 })
+
+
 </script>
 
 <style scoped>