From 1e9c6440cc2bc1340dd39426acc702928c4545a1 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:12:05 +0700
Subject: [PATCH] tes api kategori & template

---
 proyek-frontend/app/app.vue                   |   4 +-
 .../template-page/CategorySelection.vue       | 121 +++++---------
 .../components/template-page/TemplateGrid.vue | 150 ++++++++----------
 proyek-frontend/nuxt.config.ts                |   6 +-
 4 files changed, 107 insertions(+), 174 deletions(-)

diff --git a/proyek-frontend/app/app.vue b/proyek-frontend/app/app.vue
index d136a2c..d07c770 100644
--- a/proyek-frontend/app/app.vue
+++ b/proyek-frontend/app/app.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <NuxtPage />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
 
diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index 8a66ff7..aaaedfb 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -1,99 +1,50 @@
 <template>
   <div>
-    <LandingPageHeader />
+    <div class="mb-8">
+      <NuxtLink 
+        to="/" 
+        class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+        </svg>
+        Kembali ke Beranda
+      </NuxtLink>
+    </div>
+    <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
+      Pilih Template Favoritmu
+    </h1>
+    <p class="mt-2 text-center text-gray-500">
+      "Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
+    </p>
 
-    <main class="container mx-auto px-4 py-16 md:py-20">
-      
-      <div class="mb-8">
-        <NuxtLink 
-          to="/" 
-          class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-          </svg>
-          Kembali ke Beranda
-        </NuxtLink>
-      </div>
-      <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
-        Pilih Template Favoritmu
-      </h1>
-      <p class="mt-2 text-center text-gray-500">
-        "Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
-      </p>
-
-      <div class="mt-12">
-        <div v-if="isLoading" class="text-center text-gray-500">
-          <p>Memuat kategori...</p>
-          </div>
-
-        <div v-else-if="error" class="text-center text-red-500 bg-red-100 p-4 rounded-lg">
-          <p><strong>Oops, terjadi kesalahan:</strong></p>
-          <p>{{ error }}</p>
-        </div>
-
-        <div v-else>
-          <div v-if="categories.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div 
-              v-for="category in categories" 
-              :key="category.id"
-              @click="onCategoryClick(category.nama)"
-              class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
-            >
-              <img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
-              <div class="p-6 bg-white">
-                <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
-              </div>
-            </div>
-          </div>
-          <div v-else class="text-center text-gray-500">
-            <p>Saat ini belum ada kategori yang tersedia.</p>
-          </div>
+    <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
+    <div v-else-if="error" class="mt-12 text-center text-red-500">Gagal memuat kategori.</div>
+    
+    <div v-else-if="categories && categories.length > 0" class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div 
+        v-for="category in categories" 
+        :key="category.id"
+        @click="onCategoryClick(category)"
+        class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
+      >
+        <img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
+        <div class="p-6 bg-white">
+          <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
         </div>
       </div>
-
-    </main>
-
-    <Footer />
+    </div>
   </div>
 </template>
 
 <script setup>
-import LandingPageHeader from '~/components/landing-page/header.vue';
-import Footer from '~/components/landing-page/footer.vue'; 
-
 const emit = defineEmits(['category-selected']);
 
-const categories = ref([]);
-// State baru untuk loading dan error
-const isLoading = ref(true);
-const error = ref(null);
+// Gunakan useFetch yang lebih modern dan bersih
+const { data: categories, pending: isLoading, error } = useFetch('http://localhost:8000/api/kategoris');
 
-const fetchCategories = async () => {
-  // Reset state sebelum fetch
-  isLoading.value = true;
-  error.value = null;
-  
-  try {
-    const data = await $fetch('http://localhost:8000/api/kategoris');
-    categories.value = data;
-  } catch (err) {
-    console.error('Gagal ambil kategori:', err);
-    // Set pesan error yang akan ditampilkan ke pengguna
-    error.value = 'Tidak dapat terhubung ke server. Silakan coba lagi nanti.';
-  } finally {
-    // Set loading ke false setelah selesai (baik sukses maupun gagal)
-    isLoading.value = false;
-  }
-}
-
-const onCategoryClick = (categoryName) => {
-  emit('category-selected', categoryName);
+const onCategoryClick = (category) => {
+  // Dan mengirimkan seluruh objek tersebut ke induk
+  emit('category-selected', category);
 };
-
-onMounted(() => {
-  fetchCategories();
-});
-// Cukup satu baris ini untuk mengambil data dan mengelola semua state!
-// const { data: categories, pending: isLoading, error } = await useFetch('http://localhost:8000/api/kategoris');
 </script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index 0ec471c..c04192a 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -1,102 +1,78 @@
 <template>
   <div>
-    <LandingPageHeader />
+    <div class="flex items-center mb-8">
+      <button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
+        Kembali
+      </button>
+      <h1 class="text-3xl md:text-4xl font-bold text-gray-800">
+        Template {{ category }}
+      </h1>
+    </div>
 
-    <main class="container mx-auto px-4 py-16 md:py-20">
-      <div class="flex items-center mb-8">
-        <button
-          @click="$emit('back')"
-          class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-1"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-          Kembali
-        </button>
-        <h1 class="text-3xl md:text-4xl font-bold text-gray-800">
-          Template {{ category }}
-        </h1>
-      </div>
+    <div v-if="isLoading" class="text-center py-10">
+      <p>Memuat template...</p>
+    </div>
+    <div v-else-if="error" class="text-center py-10 text-red-600">
+      <p>Gagal memuat template. Silakan coba lagi.</p>
+    </div>
+    
+    <div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+      
+      <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col">
+        <img :src="tpl.foto" :alt="tpl.nama" class="w-full h-48 object-cover" />
+        
+        <div class="p-5 flex flex-col flex-grow">
+          <h4 class="text-lg font-bold text-gray-800 truncate mb-1">{{ tpl.nama }}</h4>
+          
+          <p class="text-green-600 font-semibold text-xl mb-4">
+            Rp {{ tpl.harga.toLocaleString('id-ID') }}
+          </p>
 
-      <!-- Loading -->
-      <div v-if="isLoading" class="text-center py-10">
-        <p>Memuat template...</p>
-      </div>
-
-      <!-- Error -->
-      <div v-else-if="error" class="text-center py-10 text-red-600">
-        <p>Gagal memuat template. Silakan coba lagi.</p>
-      </div>
-
-      <!-- Data Ada -->
-      <div
-        v-else-if="templates && templates.length > 0"
-        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
-      >
-        <div
-          v-for="tpl in templates"
-          :key="tpl.id"
-          class="border rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow"
-        >
-          <img
-            :src="`http://localhost:8000/storage/${tpl.foto}`"
-            :alt="tpl.nama_template"
-            class="bg-gray-200 h-48 w-full object-cover"
-          />
-          <div class="p-4">
-            <h4 class="font-semibold truncate">{{ tpl.nama_template }}</h4>
-            <p class="text-gray-500">
-              Rp {{ Number(tpl.harga ?? 0).toLocaleString('id-ID') }}
-            </p>
+          <div v-if="tpl.fitur" class="mb-auto text-center">
+    <span class="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">
+      {{ tpl.fitur.deskripsi }}
+    </span>
+  </div>
+          
+          <div class="mt-6">
+            <div class="flex items-center gap-3">
+              <button class="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
+                Preview
+              </button>
+              <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
+                Order
+              </button>
+            </div>
           </div>
         </div>
       </div>
-
-      <!-- Data Kosong -->
-      <div v-else class="text-center py-10 text-gray-500">
-        <p>Belum ada template untuk kategori ini.</p>
       </div>
-    </main>
-
-    <Footer />
+    
+    <div v-else class="text-center py-10 text-gray-500">
+      <p>Belum ada template untuk kategori ini.</p>
+    </div>
   </div>
 </template>
 
 <script setup>
-import LandingPageHeader from '~/components/landing-page/header.vue'
-import Footer from '~/components/landing-page/footer.vue'
-
+// Bagian <script> Anda sudah benar, tidak perlu diubah.
 const props = defineProps({
-  category: {
-    type: String,
-    required: true,
-  },
-  id_category: {
-    type: Number,
-    required: true,
-  },
-})
+  category: { type: String, required: true },
+  id_category: { type: Number, required: true },
+});
 
-defineEmits(['back'])
+defineEmits(['back']);
 
-// Panggil API Laravel
-const {
-  data: templates,
-  pending: isLoading,
-  error,
-} = 
-useFetch(() => `/api/templates?kategori_id=${props.id_category}`, {
-  baseURL: 'http://localhost:8000',
-  key: () => `templates-${props.id_category}`,
-  transform: (res) => res ?? []
-})
-</script>
+const { data: templates, pending: isLoading, error } = useFetch(
+  () => `/api/templates/category/${props.id_category}`, 
+  {
+    baseURL: 'http://localhost:8000',
+    key: () => `templates-${props.id_category}`,
+    transform: (response) => {
+      if (!response || !Array.isArray(response)) return [];
+      return response;
+    }
+  }
+);
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/nuxt.config.ts b/proyek-frontend/nuxt.config.ts
index 7e815b9..b3bb747 100644
--- a/proyek-frontend/nuxt.config.ts
+++ b/proyek-frontend/nuxt.config.ts
@@ -19,5 +19,9 @@ export default defineNuxtConfig({
       tailwindcss(),
     ],
   },
-  
+  runtimeConfig: {
+    public: {
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
+    }
+  }
 })
\ No newline at end of file