diff --git a/app/Http/Controllers/TransaksiController.php b/app/Http/Controllers/TransaksiController.php
index 055a1bb..274f123 100644
--- a/app/Http/Controllers/TransaksiController.php
+++ b/app/Http/Controllers/TransaksiController.php
@@ -19,10 +19,21 @@ class TransaksiController extends Controller
             $query->limit((int)$limit);
         }
         $transaksi = $query->get();
-        $transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->latest()->limit(100)->get();
-        return response()->json($transaksi);
+
+        // Mapping agar sesuai dengan kebutuhan frontend
+        $mapped = $transaksi->map(function ($trx) {
+            return [
+                'id'        => $trx->id,
+                'tanggal'   => $trx->created_at->format('d/m/Y'),
+                'kode'      => 'TRX-' . str_pad($trx->id, 6, '0', STR_PAD_LEFT),
+                'pendapatan'=> $trx->total_harga,
+            ];
+        });
+
+        return response()->json($mapped);
     }
 
+
     // Detail transaksi by ID
     public function show($id)
     {
diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index 97aefbe..7d1468c 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -16,6 +16,7 @@
             <InputField
               v-model="hargaJual"
               type="number"
+              placeholder="Masukkan Harga Jual"
             />
           </div>
         </div>
@@ -53,10 +54,10 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50">
-            <td class="border border-gray-200 p-2 text-center">{{ index + 1 }}</td>
+          <tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50 text-center">
+            <td class="border border-gray-200 p-2">{{ index + 1 }}</td>
             <td class="border border-gray-200 p-2">{{ item.kode }}</td>
-            <td class="border border-gray-200 p-2 text-center">{{ item.jumlah }}</td>
+            <td class="border border-gray-200 p-2">{{ item.jumlah }}</td>
             <td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
             <td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
           </tr>
@@ -73,7 +74,7 @@
 import InputField from './InputField.vue'
 
   const kodeItem = ref('')
-  const hargaJual = ref(0)
+  const hargaJual = ref(null)
   const pesanan = ref([])
 
   const tambahItem = () => {
@@ -91,3 +92,4 @@ import InputField from './InputField.vue'
     pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
   )
   </script>
+
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index 5aa9b2d..e356c91 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -26,8 +26,8 @@
 
   onMounted(async () => {
   try {
-    const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
-    
+    const res = await axios.get("/api/transaksi?limit=10") // GANTI URL SESUAI API
+
     transaksi.value = res.data
   } catch (err) {
     console.error("Gagal fetch transaksi:", err)