diff --git a/resources/js/components/KasirForm1.vue b/resources/js/components/KasirForm1.vue
new file mode 100644
index 0000000..0d05c28
--- /dev/null
+++ b/resources/js/components/KasirForm1.vue
@@ -0,0 +1,344 @@
+<template>
+  <ConfirmDeleteModal v-if="showDeleteModal" :isOpen="showDeleteModal" title="Konfirmasi"
+    message="Yakin ingin menghapus item ini?" @confirm="hapusPesanan" @cancel="closeDeleteModal" />
+
+  <!-- Struk Input Overlay -->
+  <StrukOverlay
+    v-if="showStruk"
+    :isOpen="showStruk"
+    :pesanan="pesanan"
+    :total="total"
+    @close="closeStruk"
+    @transaksi-saved="handleTransaksiSaved"
+  />
+
+  <!-- Struk View (Print) Overlay -->
+  <StrukView
+    v-if="showStrukView"
+    :isOpen="showStrukView"
+    :transaksi="savedTransaksi"
+    @close="closeStrukView"
+  />
+
+  <div class="p-2 sm:p-4 h-120 relative">
+    <!-- Grid Form & Total -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      <!-- Input Form -->
+      <div class="order-2 md:order-1 flex flex-col gap-4">
+        <!-- Input Kode Item -->
+        <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>
+
+        <!-- Input Harga Jual -->
+        <div>
+          <label class="block text-sm font-medium text-D">Harga Jual</label>
+          <input
+            type="text"
+            v-model="hargaJualFormatted"
+            @input="formatHargaInput"
+            @keypress="onlyNumbers"
+            placeholder="Masukkan Harga Jual"
+            class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-md border border-B shadow-sm sm:text-sm"
+          />
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div class="flex flex-col sm:flex-row justify-between gap-2">
+          <button @click="tambahItem"
+            class="w-full sm:w-auto px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition">
+            Tambah Item
+          </button>
+        </div>
+      </div>
+
+      <!-- Total -->
+      <div class="order-1 md:order-2 flex flex-col md:flex-row md:items-center md:justify-center gap-1">
+        <div class="text-left md:text-start">
+          <span class="block text-gray-600 font-medium">Total:</span>
+          <span class="text-2xl sm:text-3xl font-bold text-D">
+            Rp{{ total.toLocaleString() }},-
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error & Info -->
+    <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 Responsive -->
+    <div class="overflow-x-auto">
+      <table class="w-full border border-B rounded-lg overflow-hidden text-xs sm:text-sm">
+        <thead class="bg-A text-D">
+          <tr>
+            <th class="border border-B p-2 w-8">No</th>
+            <th class="border border-B p-2">Nama 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 w-10"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="pesanan.length == 0" class="text-center text-D/70">
+            <td colspan="5" class="h-16 border border-B text-xs sm:text-sm">
+              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 truncate max-w-[120px] sm:max-w-none">
+              {{ item.produk.nama }}
+            </td>
+            <td class="border border-B p-2 truncate max-w-[80px]">
+              {{ item.nampan ? item.nampan.nama : "Brankas" }}
+            </td>
+            <td class="border border-B p-2 whitespace-nowrap">
+              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="absolute bottom-0 right-1">
+      <button @click="konfirmasiPenjualan"
+        class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition">
+        Lanjut
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import axios from "axios";
+import ConfirmDeleteModal from "./ConfirmDeleteModal.vue";
+import StrukOverlay from "./StrukOverlay.vue";
+import StrukView from "./StrukView.vue";
+
+// Emit untuk komunikasi dengan parent
+const emit = defineEmits(['transaksi-saved']);
+
+const kodeItem = ref("");
+const info = ref("");
+const error = ref("");
+const hargaJual = ref(null);
+const hargaJualFormatted = ref("");
+const item = ref(null);
+const loadingItem = ref(false);
+const pesanan = ref([]);
+const showDeleteModal = ref(false);
+const deleteIndex = ref(null);
+
+const showStruk = ref(false);
+const showStrukView = ref(false);
+const savedTransaksi = ref(null);
+
+let errorTimeout = null;
+let infoTimeout = null;
+
+const formatNumber = (num) => {
+  if (!num) return "";
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+};
+
+const unformatNumber = (str) => {
+  if (!str) return null;
+  const cleaned = str.replace(/\./g, "");
+  const number = parseInt(cleaned);
+  return isNaN(number) ? null : number;
+};
+
+const formatHargaInput = (event) => {
+  const value = event.target.value;
+  const cleanValue = value.replace(/\D/g, "");
+
+  if (cleanValue) {
+    const formatted = formatNumber(cleanValue);
+    hargaJualFormatted.value = formatted;
+    hargaJual.value = parseInt(cleanValue);
+  } else {
+    hargaJualFormatted.value = "";
+    hargaJual.value = null;
+  }
+};
+
+const onlyNumbers = (event) => {
+  const char = String.fromCharCode(event.which);
+  if (!/[0-9]/.test(char)) {
+    event.preventDefault();
+  }
+};
+
+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;
+    hargaJualFormatted.value = formatNumber(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.nampan ? 'Nampan ' + item.value.nampan.nama : "Brankas"}`;
+
+    infoTimeout = setTimeout(() => {
+      info.value = "";
+    }, 5000);
+  } catch (err) {
+    error.value = err.message || "Item tidak ditemukan";
+    info.value = "";
+    hargaJual.value = null;
+    hargaJualFormatted.value = "";
+    item.value = null;
+
+    errorTimeout = setTimeout(() => {
+      error.value = "";
+    }, 5000);
+  } 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 = "";
+    }, 5000);
+    return;
+  }
+
+  // Check if pesanan already has an item
+  if (pesanan.value.length >= 1) {
+    error.value = "Hanya satu item yang dapat ditambahkan per transaksi. Hapus item sebelumnya untuk menambahkan yang baru.";
+    clearTimeout(errorTimeout);
+    errorTimeout = setTimeout(() => {
+      error.value = "";
+    }, 5000);
+    return;
+  }
+
+  item.value.kode_item = kodeItem.value;
+  item.value.harga_deal = Number(hargaJual.value);
+  item.value.posisi = item.value.nampan ? item.value.nampan.nama : "Brankas";
+
+  pesanan.value = [item.value]; // Replace any existing item
+
+  console.log("Pesanan:", item.value);
+
+  kodeItem.value = "";
+  hargaJual.value = null;
+  hargaJualFormatted.value = "";
+  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 = []; // Clear the pesanan array
+  }
+  closeDeleteModal();
+};
+
+const konfirmasiPenjualan = () => {
+  if (pesanan.value.length === 0) {
+    error.value = "Belum ada item yang dipesan.";
+    clearTimeout(errorTimeout);
+    errorTimeout = setTimeout(() => {
+      error.value = "";
+    }, 5000);
+    return;
+  }
+  showStruk.value = true;
+};
+
+const closeStruk = () => {
+  showStruk.value = false;
+};
+
+const closeStrukView = () => {
+  showStrukView.value = false;
+  savedTransaksi.value = null;
+
+  // Reset pesanan setelah menutup struk view
+  pesanan.value = [];
+};
+
+// Handler ketika transaksi berhasil disimpan
+const handleTransaksiSaved = (transaksiData) => {
+  // Tutup StrukOverlay
+  showStruk.value = false;
+
+  // Simpan data transaksi
+  savedTransaksi.value = transaksiData;
+
+  // Emit ke parent (Kasir.vue)
+  emit('transaksi-saved', transaksiData);
+
+  // Buka StrukView untuk print
+  setTimeout(() => {
+    showStrukView.value = true;
+  }, 300);
+};
+
+const total = computed(() => {
+  let sum = 0;
+  pesanan.value.forEach((item) => {
+    sum += item.harga_deal;
+  });
+  return sum;
+});
+</script>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index 6b0f365..e9d9ac3 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -46,7 +46,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import axios from "axios";
 
 import mainLayout from "../layouts/mainLayout.vue";
-import KasirForm from "../components/KasirForm.vue";
+import KasirForm from "../components/KasirForm1.vue";
 import KasirTransaksiList from "../components/KasirTransaksiList.vue";
 import ModalConfirm from "../components/ModalConfirm.vue";