Kasir/resources/js/components/KasirForm.vue

<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>
            </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 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'

const kodeItem = ref('')
const info = ref('')
const error = ref('')
const hargaJual = ref(null)
const item = ref(null)
const loadingItem = ref(false)
const pesanan = ref([])

let errorTimeout = null
let infoTimeout = null

const inputItem = async () => {
  if (!kodeItem.value) return

  info.value = ''
  error.value = ''
  clearTimeout(infoTimeout)
  clearTimeout(errorTimeout)

  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

    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
  }
}

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.'
    }
    clearTimeout(errorTimeout)
    errorTimeout = setTimeout(() => {
      error.value = ''
    }, 3000)
    return
  }

  // harga deal
  item.value.harga_deal = hargaJual.value

  pesanan.value.push(item.value)

  // Reset input fields
  kodeItem.value = ''
  hargaJual.value = null
  item.value = null
  info.value = ''
  clearTimeout(infoTimeout)
}

const konfirmasiPenjualan = () => {
  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)')
}

const total = computed(() => {
  let sum = 0;
  pesanan.value.forEach(item => {
    sum += item.harga_deal;
  });
  return sum;
})
</script>