Merge branch 'main' of https://git.abbauf.com/Magang-2025/Undangan

proyek-frontend/app/app.vue

@@ -1,5 +1,35 @@
 <template>
   <div>
+    <NuxtLayout>
       <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
+
+<!-- <script setup>
+const props = defineProps({
+  category: {
+    type: String,
+    required: true,
+  },
+  id_category: {
+    type: Number,
+    required: true
+  }
+}) -->
+
+// const templates = ref([])
+
+// const fetchTemplates = async () => {
+//   try {
+//     templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
+//   } catch (error) {
+//     console.error('Gagal ambil template:', error)
+//   }
+// }
+
+// onMounted(() => {
+//   fetchTemplates()
+// })
+
+// defineEmits(['back']);

proyek-frontend/app/components/template-page/CategorySelection.vue

@@ -18,11 +18,14 @@
       "Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
     </p>
 
-    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+    <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.nama)"
+        @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">
@@ -37,22 +40,11 @@
 <script setup>
 const emit = defineEmits(['category-selected']);
 
-const categories = ref([])
+// Gunakan useFetch yang lebih modern dan bersih
+const { data: categories, pending: isLoading, error } = useFetch('http://localhost:8000/api/kategoris');
 
-// Ambil data kategori dari Laravel API pakai $fetch
+const onCategoryClick = (category) => {
-const fetchCategories = async () => {
+  // Dan mengirimkan seluruh objek tersebut ke induk
-  try {
+  emit('category-selected', category);
-    categories.value = await $fetch('http://localhost:8000/api/kategoris')
-  } catch (error) {
-    console.error('Gagal ambil kategori:', error)
-  }
-}
-
-const onCategoryClick = (categoryName) => {
-  emit('category-selected', categoryName);
 };
-
-onMounted(() => {
-  fetchCategories()
-})
 </script>

proyek-frontend/app/components/template-page/TemplateGrid.vue

@@ -1,49 +1,78 @@
 <template>
   <div>
     <div class="flex items-center mb-8">
-      <button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold mr-4">
+      <button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4">
-        &larr; Kembali ke Kategori
+        <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">
-        Pilih Template {{ category }} Favoritmu
+        Template {{ category }}
       </h1>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div v-if="isLoading" class="text-center py-10">
-      <div v-for="tpl in templates" :key="tpl.id" class="border rounded-lg p-4 text-center">
+      <p>Memuat template...</p>
-        <img :src="tpl.foto" :alt="tpl.nama" class="bg-gray-200 h-40 mb-4 rounded-md object-cover w-full" />
-        <h4 class="font-semibold">{{ tpl.nama }}</h4>
-        <p class="text-gray-500">Rp {{ tpl.harga }}</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>
+
+          <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>
+      </div>
+    
+    <div v-else class="text-center py-10 text-gray-500">
+      <p>Belum ada template untuk kategori ini.</p>
     </div>
   </div>
 </template>
 
 <script setup>
+// Bagian <script> Anda sudah benar, tidak perlu diubah.
 const props = defineProps({
-  category: {
+  category: { type: String, required: true },
-    type: String,
+  id_category: { type: Number, required: true },
-    required: true,
+});
-  },
-  id_category: {
-    type: Number,
-    required: true
-  }
-})
-
-const templates = ref([])
-
-const fetchTemplates = async () => {
-  try {
-    templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
-  } catch (error) {
-    console.error('Gagal ambil template:', error)
-  }
-}
-
-onMounted(() => {
-  fetchTemplates()
-})
 
 defineEmits(['back']);
+
+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>

proyek-frontend/app/pages/template.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="container mx-auto px-4 py-16">
+  <div>
+    <main class="container mx-auto px-4 py-16">
       <TemplatePageCategorySelection 
         v-if="!selectedCategory" 
         @category-selected="handleCategorySelect" 
@@ -7,21 +8,26 @@
 
       <TemplatePageTemplateGrid 
         v-else 
-      :category="selectedCategory" 
+        :id_category="selectedCategory.id"
+        :category="selectedCategory.nama" 
         @back="goBack" 
       />
+    </main>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+// 1. Impor komponen anak yang Anda gunakan
+import TemplatePageCategorySelection from '~/components/template-page/CategorySelection.vue'; // Pastikan path ini benar
+import TemplatePageTemplateGrid from '~/components/template-page/TemplateGrid.vue';       // Pastikan path ini benar
 
-// State untuk menyimpan kategori yang sedang dipilih
+// 2. State untuk menyimpan SELURUH OBJEK kategori yang dipilih
 const selectedCategory = ref(null);
 
-// Fungsi ini akan menangkap event dari CategorySelection
+// Fungsi ini sekarang akan menerima seluruh objek { id, nama }
-const handleCategorySelect = (categoryName) => {
+const handleCategorySelect = (categoryObject) => {
-  selectedCategory.value = categoryName;
+  selectedCategory.value = categoryObject;
 };
 
 // Fungsi ini akan menangkap event 'back' dari TemplateGrid

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'
+    }
+  }
 })