diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index 066a5ca..97aefbe 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -2,25 +2,33 @@
     <div>
       <!-- Input Grid -->
       <div class="grid grid-cols-2 gap-4 mb-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
-          <input v-model="kodeItem" type="text"
-            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+        <div class="flex flex-col gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
+            <InputField
+              v-model="kodeItem"
+              type="text"
+              placeholder="Masukkan kode item"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
+            <InputField
+              v-model="hargaJual"
+              type="number"
+            />
+          </div>
         </div>
-    <br>
-        <div>
-            <!-- Total -->
-            <div class="flex justify-center items-baseline gap-2 mb-1 ml-130">
-              <span class="text-gray-600 font-medium">Total:</span>
-              <span class="text-3xl font-bold text-[#0f1d4a]">Rp{{ total.toLocaleString() }},-</span>
-            </div>
-          <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
-          <input v-model="hargaJual" type="number"
-            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+        <div class="flex items-center justify-center">
+          <div class="text-center">
+            <span class="block text-gray-600 font-medium">Total:</span>
+            <span class="text-3xl font-bold text-[#0f1d4a]">
+              Rp{{ total.toLocaleString() }},-
+            </span>
+          </div>
         </div>
       </div>
 
-
       <!-- Buttons -->
       <div class="flex gap-4 mb-6">
         <button @click="tambahItem"
@@ -59,8 +67,10 @@
 
 
 
+
   <script setup>
   import { ref, computed } from 'vue'
+import InputField from './InputField.vue'
 
   const kodeItem = ref('')
   const hargaJual = ref(0)
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
index 0301fff..012b413 100644
--- a/resources/js/components/KasirTransaksiList.vue
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -10,10 +10,10 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="trx in transaksi" :key="trx.id">
+          <tr v-for="trx in props.transaksi" :key="trx.id">
             <td class="border border-gray-200 p-2">{{ trx.tanggal }}</td>
             <td class="border border-gray-200 p-2">{{ trx.kode }}</td>
-            <td class="border border-gray-200 p-2">Rp{{ trx.pendapatan.toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
             <td class="border border-gray-200 p-2 text-center">
               <button @click="$emit('detail', trx)"
                 class="px-3 py-1 rounded-md bg-[#c6a77d] text-white hover:bg-[#b09065] transition">Detail</button>
@@ -24,10 +24,19 @@
   </template>
 
   <script setup>
+  import { ref, onMounted } from "vue"
+
   const props = defineProps({
     transaksi: {
       type: Array,
       default: () => []
     }
   })
+
+  defineEmits(['detail'])
+
+  onMounted(() => {
+    console.log(props.transaksi);
+
+  })
   </script>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index 0b27fe4..5aa9b2d 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -8,24 +8,33 @@
 
         <!-- Right Section -->
         <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
-          <KasirTransaksiList :transaksi="dummyTransaksi" @detail="lihatDetail" />
+          <KasirTransaksiList :transaksi="transaksi" @detail="lihatDetail" />
         </div>
       </div>
     </mainLayout>
   </template>
 
   <script setup>
+  import { ref, onMounted } from "vue"
+    import axios from "axios"
+
   import mainLayout from '../layouts/mainLayout.vue'
   import KasirForm from '../components/KasirForm.vue'
   import KasirTransaksiList from '../components/KasirTransaksiList.vue'
 
-  const dummyTransaksi = [
-    { id: 1, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 21200000 },
-    { id: 2, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
-    { id: 3, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
-  ]
+  const transaksi = ref([])
 
-  const lihatDetail = (trx) => {
-    alert(`Detail transaksi: ${trx.kode}`)
+  onMounted(async () => {
+  try {
+    const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
+    
+    transaksi.value = res.data
+  } catch (err) {
+    console.error("Gagal fetch transaksi:", err)
   }
-  </script>
+})
+
+const lihatDetail = (trx) => {
+  alert(`Detail transaksi: ${trx.kode}`)
+}
+</script>