From 7083d585f1bee7f5cc48e4b73edfcd14312d6a2c Mon Sep 17 00:00:00 2001
From: timotiabbauftech <timotiabbauftech@gmail.com>
Date: Mon, 8 Sep 2025 14:42:59 +0700
Subject: [PATCH] Update KasirForm.vue

---
 resources/js/components/KasirForm.vue | 393 ++++++++++++++++----------
 1 file changed, 242 insertions(+), 151 deletions(-)

diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index d73956e..567a23b 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -1,185 +1,276 @@
 <template>
-  <div>
-    <div class="grid grid-cols-2 h-full gap-4 mb-4">
-      <div class="flex flex-col gap-4">
-        <div>
-          <label class="block text-sm font-medium text-D">Kode Item *</label>
-          <div class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B">
-            <input type="text" v-model="kodeItem" @keyup.enter="inputItem" placeholder="Scan atau masukkan kode item"
-              class=" bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md" />
-            <button v-if="!loadingItem" @click="inputItem" class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"><i
-                class="fas fa-arrow-right"></i></button>
-            <div v-else class="flex items-center justify-center px-3">
-              <div class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center">
-                <i class="fas fa-spinner"></i>
-              </div>
+<ConfirmDeleteModal
+  :isOpen="showDeleteModal"
+  title="Konfirmasi"
+  message="Yakin ingin menghapus item ini?"
+  @confirm="hapusPesanan"
+  @cancel="closeDeleteModal"
+/>
+
+    <div>
+        <div class="grid grid-cols-2 h-full gap-4 mb-4">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-D"
+                        >Kode Item *</label
+                    >
+                    <div
+                        class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
+                    >
+                        <input
+                            type="text"
+                            v-model="kodeItem"
+                            @keyup.enter="inputItem"
+                            placeholder="Scan atau masukkan kode item"
+                            class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
+                        />
+                        <button
+                            v-if="!loadingItem"
+                            @click="inputItem"
+                            class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
+                        >
+                            <i class="fas fa-arrow-right"></i>
+                        </button>
+                        <div
+                            v-else
+                            class="flex items-center justify-center px-3"
+                        >
+                            <div
+                                class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
+                            >
+                                <i class="fas fa-spinner"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-D"
+                        >Harga Jual</label
+                    >
+                    <InputField
+                        v-model="hargaJual"
+                        type="number"
+                        placeholder="Masukkan Harga Jual"
+                    />
+                </div>
+
+                <div class="flex justify-between gap-4">
+                    <button
+                        @click="tambahItem"
+                        class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
+                    >
+                        Tambah Item
+                    </button>
+                    <button
+                        @click="konfirmasiPenjualan"
+                        class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
+                    >
+                        Lanjut
+                    </button>
+                </div>
+            </div>
+            <div class="flex pt-10 justify-center">
+                <div class="text-start">
+                    <span class="block text-gray-600 font-medium">Total:</span>
+                    <span class="text-3xl font-bold text-D">
+                        Rp{{ total.toLocaleString() }},-
+                    </span>
+                </div>
             </div>
-          </div>
-        </div>
-        <div>
-          <label class="block text-sm font-medium text-D">Harga Jual</label>
-          <InputField v-model="hargaJual" type="number" placeholder="Masukkan Harga Jual" />
         </div>
 
-        <div class="flex justify-between gap-4">
-          <button @click="tambahItem" class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition">
-            Tambah Item
-          </button>
-          <button @click="konfirmasiPenjualan"
-            class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition">
-            Lanjut
-          </button>
+        <div class="mb-4">
+            <p
+                v-if="error"
+                :class="{ 'animate-shake': error }"
+                class="text-sm text-red-600 mt-1"
+            >
+                {{ error }}
+            </p>
+            <p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
         </div>
-      </div>
-      <div class="flex pt-10 justify-center">
-        <div class="text-start">
-          <span class="block text-gray-600 font-medium">Total:</span>
-          <span class="text-3xl font-bold text-D">
-            Rp{{ total.toLocaleString() }},-
-          </span>
-        </div>
-      </div>
+
+        <table
+            class="w-full border border-B text-sm rounded-lg overflow-hidden"
+        >
+            <thead class="bg-A text-D">
+                <tr>
+                    <th class="border border-B p-2">No</th>
+                    <th class="border border-B p-2">Nam Produk</th>
+                    <th class="border border-B p-2">Posisi</th>
+                    <th class="border border-B p-2">Harga</th>
+                    <th class="border border-B p-2"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-if="pesanan.length == 0" class="text-center text-D/70">
+                    <td colspan="5" class="h-20 border border-B">
+                        Belum ada item dipesan
+                    </td>
+                </tr>
+                <tr
+                    v-else
+                    v-for="(item, index) in pesanan"
+                    :key="index"
+                    class="hover:bg-gray-50 text-center"
+                >
+                    <td class="border border-B p-2">{{ index + 1 }}</td>
+                    <td class="border border-B p-2 text-left">
+                        {{ item.produk.nama }}
+                    </td>
+                    <td class="border border-B p-2">
+                        {{ item.posisi ? item.posisi : "Brankas" }}
+                    </td>
+                    <td class="border border-B p-2">
+                        Rp{{ item.harga_deal.toLocaleString() }}
+                    </td>
+                    <td class="border border-B p-2 text-center">
+                        <button
+                            @click="openDeleteModal(index)"
+                            class="text-red-500 hover:text-red-700"
+                        >
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
-
-    <div class="mb-4">
-      <p v-if="error" :class="{ 'animate-shake': error }" class="text-sm text-red-600 mt-1">{{ error }}</p>
-      <p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
-    </div>
-
-    <table class="w-full border border-B text-sm rounded-lg overflow-hidden">
-      <thead class="bg-A text-D">
-        <tr>
-          <th class="border border-B p-2">No</th>
-          <th class="border border-B p-2">Nam Produk </th>
-          <th class="border border-B p-2">Posisi</th>
-          <th class="border border-B p-2">Harga</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-if="pesanan.length == 0" class="text-center text-D/70">
-          <td colspan="5" class="h-20 border border-B">Belum ada item dipesan</td>
-        </tr>
-        <tr v-else v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50 text-center">
-          <td class="border border-B p-2">{{ index + 1 }}</td>
-          <td class="border border-B p-2 text-left">{{ item.produk.nama }}</td>
-          <td class="border border-B p-2">{{ item.posisi ? item.posisi : 'Brankas' }}</td>
-          <td class="border border-B p-2">Rp{{ item.harga_deal.toLocaleString() }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import InputField from './InputField.vue'
-import axios from 'axios'
+import { ref, computed } from "vue";
+import InputField from "./InputField.vue";
+import axios from "axios";
+import ConfirmDeleteModal from "./ConfirmDeleteModal.vue";
 
-const kodeItem = ref('')
-const info = ref('')
-const error = ref('')
-const hargaJual = ref(null)
-const item = ref(null)
-const loadingItem = ref(false)
-const pesanan = ref([])
+const kodeItem = ref("");
+const info = ref("");
+const error = ref("");
+const hargaJual = ref(null);
+const item = ref(null);
+const loadingItem = ref(false);
+const pesanan = ref([]);
+const showDeleteModal = ref(false)
+const deleteIndex = ref(null)
 
-let errorTimeout = null
-let infoTimeout = null
+let errorTimeout = null;
+let infoTimeout = null;
 
 const inputItem = async () => {
-  if (!kodeItem.value) return
+    if (!kodeItem.value) return;
 
-  info.value = ''
-  error.value = ''
-  clearTimeout(infoTimeout)
-  clearTimeout(errorTimeout)
+    info.value = "";
+    error.value = "";
+    clearTimeout(infoTimeout);
+    clearTimeout(errorTimeout);
 
-  loadingItem.value = true
+    loadingItem.value = true;
 
-  try {
-    const response = await axios.get(`/api/item/${kodeItem.value}`, {
+    try {
+        const response = await axios.get(`/api/item/${kodeItem.value}`, {
             headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
-        });;
-    item.value = response.data;
-    hargaJual.value = item.value.produk.harga_jual
+        });
+        item.value = response.data;
+        hargaJual.value = item.value.produk.harga_jual;
 
-    if (item.value.is_sold) {
-      throw new Error('Item sudah terjual')
+        if (item.value.is_sold) {
+            throw new Error("Item sudah terjual");
+        }
+        if (pesanan.value.some((p) => p.id === item.value.id)) {
+            throw new Error("Item sedang dipesan");
+        }
+        info.value = `Item dipilih: ${item.value.produk.nama} dari ${
+            item.value.posisi ? item.value.posisi : "Brankas"
+        }`;
+
+        infoTimeout = setTimeout(() => {
+            info.value = "";
+        }, 3000);
+    } catch (err) {
+        if (err == "") {
+            error.value = "Error: Item tidak ditemukan";
+        } else {
+            error.value = err;
+        }
+        info.value = "";
+        hargaJual.value = null;
+        item.value = null;
+
+        errorTimeout = setTimeout(() => {
+            error.value = "";
+        }, 3000);
+    } finally {
+        loadingItem.value = false;
     }
-    if (pesanan.value.some(p => p.id === item.value.id)) {
-      throw new Error('Item sedang dipesan')
-    }
-    info.value = `Item dipilih: ${item.value.produk.nama} dari ${item.value.posisi ? item.value.posisi : 'Brankas'}`
-
-    infoTimeout = setTimeout(() => {
-      info.value = ''
-    }, 3000)
-
-  } catch (err) {
-    if (err == '') {
-      error.value = 'Error: Item tidak ditemukan'
-    } else {
-      error.value = err
-    }
-    info.value = ''
-    hargaJual.value = null
-    item.value = null
-
-    errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
-  } finally {
-    loadingItem.value = false
-  }
-}
+};
 
 const tambahItem = () => {
-  if (!item.value || !hargaJual.value) {
-    error.value = 'Scan atau masukkan kode item untuk dijual.'
-    if (kodeItem.value) {
-      error.value = 'Masukkan harga jual, atau input dari kode item lagi.'
+    if (!item.value || !hargaJual.value) {
+        error.value = "Scan atau masukkan kode item untuk dijual.";
+        if (kodeItem.value) {
+            error.value =
+                "Masukkan harga jual, atau input dari kode item lagi.";
+        }
+        clearTimeout(errorTimeout);
+        errorTimeout = setTimeout(() => {
+            error.value = "";
+        }, 3000);
+        return;
     }
-    clearTimeout(errorTimeout)
-    errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
-    return
-  }
 
-  // harga deal
-  item.value.harga_deal = hargaJual.value
+    // harga deal
+    item.value.harga_deal = hargaJual.value;
 
-  pesanan.value.push(item.value)
+    pesanan.value.push(item.value);
 
-  // Reset input fields
-  kodeItem.value = ''
-  hargaJual.value = null
-  item.value = null
-  info.value = ''
-  clearTimeout(infoTimeout)
+    // Reset input fields
+    kodeItem.value = "";
+    hargaJual.value = null;
+    item.value = null;
+    info.value = "";
+    clearTimeout(infoTimeout);
+};
+
+const openDeleteModal = (index) => {
+  deleteIndex.value = index
+  showDeleteModal.value = true
 }
 
+const closeDeleteModal = () => {
+  showDeleteModal.value = false
+  deleteIndex.value = null
+}
+
+const hapusPesanan = () => {
+  if (deleteIndex.value !== null) {
+    pesanan.value.splice(deleteIndex.value, 1)
+  }
+  closeDeleteModal()
+}
+
+
 const konfirmasiPenjualan = () => {
-  if (pesanan.value.length === 0) {
-    error.value = 'Belum ada item yang dipesan.'
-    clearTimeout(errorTimeout)
-    errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
-    return
-  }
+    if (pesanan.value.length === 0) {
+        error.value = "Belum ada item yang dipesan.";
+        clearTimeout(errorTimeout);
+        errorTimeout = setTimeout(() => {
+            error.value = "";
+        }, 3000);
+        return;
+    }
 
-  // Todo: Implementasi konfirmasi penjualan
-  alert('Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)')
-}
+    // Todo: Implementasi konfirmasi penjualan
+    alert("Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)");
+};
 
 const total = computed(() => {
-  let sum = 0;
-  pesanan.value.forEach(item => {
-    sum += item.harga_deal;
-  });
-  return sum;
-})
+    let sum = 0;
+    pesanan.value.forEach((item) => {
+        sum += item.harga_deal;
+    });
+    return sum;
+});
 </script>