Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

resources/js/components/KasirForm.vue

@@ -1,32 +1,70 @@
 <template>
+<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">
+                    <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" />
+                    <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">
+                    <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">
+                    <button
+                        @click="konfirmasiPenjualan"
+                        class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
+                    >
                         Lanjut
                     </button>
                 </div>
@@ -42,28 +80,58 @@
         </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="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">
+        <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">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>
+                    <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">
+                <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-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>
@@ -71,115 +139,138 @@
 </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}`, {
             headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
-        });;
+        });
         item.value = response.data;
-    hargaJual.value = item.value.produk.harga_jual
+        hargaJual.value = item.value.produk.harga_jual;
 
         if (item.value.is_sold) {
-      throw new Error('Item sudah terjual')
+            throw new Error("Item sudah terjual");
         }
-    if (pesanan.value.some(p => p.id === item.value.id)) {
-      throw new Error('Item sedang dipesan')
+        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'}`
+        info.value = `Item dipilih: ${item.value.produk.nama} dari ${
+            item.value.posisi ? item.value.posisi : "Brankas"
+        }`;
 
         infoTimeout = setTimeout(() => {
-      info.value = ''
-    }, 3000)
-
+            info.value = "";
+        }, 3000);
     } catch (err) {
-    if (err == '') {
-      error.value = 'Error: Item tidak ditemukan'
+        if (err == "") {
+            error.value = "Error: Item tidak ditemukan";
         } else {
-      error.value = err
+            error.value = err;
         }
-    info.value = ''
-    hargaJual.value = null
-    item.value = null
+        info.value = "";
+        hargaJual.value = null;
+        item.value = null;
 
         errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
+            error.value = "";
+        }, 3000);
     } finally {
-    loadingItem.value = false
+        loadingItem.value = false;
     }
-}
+};
 
 const tambahItem = () => {
     if (!item.value || !hargaJual.value) {
-    error.value = 'Scan atau masukkan kode item untuk dijual.'
+        error.value = "Scan atau masukkan kode item untuk dijual.";
         if (kodeItem.value) {
-      error.value = 'Masukkan harga jual, atau input dari kode item lagi.'
+            error.value =
+                "Masukkan harga jual, atau input dari kode item lagi.";
         }
-    clearTimeout(errorTimeout)
+        clearTimeout(errorTimeout);
         errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
-    return
+            error.value = "";
+        }, 3000);
+        return;
     }
 
     // harga deal
-  item.value.harga_deal = hargaJual.value
+    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)
+    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)
+        error.value = "Belum ada item yang dipesan.";
+        clearTimeout(errorTimeout);
         errorTimeout = setTimeout(() => {
-      error.value = ''
-    }, 3000)
-    return
+            error.value = "";
+        }, 3000);
+        return;
     }
 
     // Todo: Implementasi konfirmasi penjualan
-  alert('Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)')
-}
+    alert("Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)");
+};
 
 const total = computed(() => {
     let sum = 0;
-  pesanan.value.forEach(item => {
+    pesanan.value.forEach((item) => {
         sum += item.harga_deal;
     });
     return sum;
-})
+});
 </script>