[Update] Tambah item

app/Http/Controllers/ItemController.php

@@ -31,6 +31,8 @@ class ItemController extends Controller
 
         $item = Item::create($validated);
 
+        $item->load('nampan');
+
         return response()->json([
             'message' => 'Item berhasil dibuat',
             'data' => $item

resources/js/components/BrankasList.vue

@@ -1,4 +1,3 @@
-// brankas list
 <template>
   <div v-if="loading" class="flex justify-center items-center h-screen">
     <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>

resources/js/components/CreateItemModal.vue

@@ -1,9 +1,9 @@
 <template>
   <Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
     <div class="p-6">
-      <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
+      
-
       <div v-if="!success">
+        <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
         <div class="mb-4">
           <label class="block text-gray-700 mb-2">Pilih Nampan</label>
           <InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
@@ -31,21 +31,22 @@
       <!-- Success State -->
       <div v-else>
         <div class="text-center">
-          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+          <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
-            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
+          <!-- QR Code -->
-              </path>
+          <div class="flex justify-center mb-4">
-            </svg>
+            <div class="p-2 border border-gray-300 rounded-lg">
+              <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
+            </div>
           </div>
 
-          <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
+          <!-- Item Info -->
-          <p class="text-gray-600 mb-2">
+          <div class="text-center text-gray-700 font-medium mb-1">
-            Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
+            {{ createdItem?.kode_item }}
-              selectedNampanName }}.
+          </div>
-          </p>
+          <div class="text-center text-gray-500 text-sm mb-6">
-          <p class="text-sm text-gray-500 mb-6">
+            {{ product?.nama }} - {{ createdItem?.nampan?.nama || 'Brankas' }}
-            ID Item: <strong>{{ createdItem.id }}</strong>
+          </div>
-          </p>
 
           <div class="flex flex-row justify-between gap-3">
             <button @click="handleClose"
@@ -53,9 +54,8 @@
               Selesai
             </button>
             <button @click="printItem"
-              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
+              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
-              disabled>
+              <i class="fas fa-print mr-1"></i>Print
-              Print
             </button>
             <button @click="addNewItem"
               class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
@@ -99,15 +99,15 @@ const success = ref(false);
 const loading = ref(false);
 const createdItem = ref(null);
 
-// Computed
+// QR Code generator - berdasarkan logika dari brankas list
-const selectedNampanName = computed(() => {
+const qrCodeUrl = computed(() => {
-  if (!selectedNampan.value) return 'Brankas';
+  if (createdItem.value && props.product) {
-
+    const itemId = createdItem.value.id || createdItem.value.kode_item;
-  console.log("Selected nampan ID:", selectedNampan.value);
+    const productName = props.product.nama.replace(/\s/g, "");
-  const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
+    const data = `ITM-${itemId}-${productName}`;
-  console.log("All nampan:", nampanList.value);
+    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
-  console.log("Selected nampan:", nampan);
+  }
-  return nampan ? nampan.nama : 'Brankas';
+  return "";
 });
 
 // Methods
@@ -156,6 +156,7 @@ const createItem = async () => {
     createdItem.value = response.data.data
     console.log('Item created:', createdItem);
 
+    loadNampanList();
   } catch (error) {
     console.error('Error creating item:', error);
     alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
@@ -167,10 +168,52 @@ const createItem = async () => {
 const addNewItem = () => {
   success.value = false;
   selectedNampan.value = '';
+  createdItem.value = null;
 };
 
+// Fungsi print berdasarkan logika dari brankas list
 const printItem = () => {
-  alert('Wak waw');
+  if (qrCodeUrl.value && createdItem.value && props.product) {
+    const printWindow = window.open('', '_blank');
+    const itemCode = createdItem.value.kode_item || createdItem.value.id;
+    
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>Print QR Code - ${itemCode}</title>
+          <style>
+            body { 
+              font-family: Arial, sans-serif; 
+              text-align: center; 
+              padding: 20px; 
+            }
+            .qr-container { 
+              border: 2px solid #ccc; 
+              padding: 20px; 
+              display: inline-block; 
+              margin: 20px;
+            }
+            .item-info {
+              margin-top: 10px;
+              font-size: 14px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="qr-container">
+            <img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
+            <div class="item-info">
+              <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
+              <div>${props.product.nama}</div>
+              <div style="color: #666; margin-top: 5px;">${props.product.berat}g</div>
+            </div>
+          </div>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+    printWindow.print();
+  }
 };
 
 const handleClose = () => {
@@ -178,6 +221,7 @@ const handleClose = () => {
   selectedNampan.value = '';
   success.value = false;
   loading.value = false;
+  createdItem.value = null;
 
   emit('close');
 };
@@ -188,8 +232,9 @@ watch(() => props.isOpen, (newValue) => {
     selectedNampan.value = '';
     success.value = false;
     loading.value = false;
+    createdItem.value = null;
 
     loadNampanList();
   }
 });
-</script>
+</script>