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

Error Data transaksi tidak tampil

resources/js/components/KasirForm.vue

@@ -2,24 +2,32 @@
     <div>
       <!-- Input Grid -->
       <div class="grid grid-cols-2 gap-4 mb-4">
+        <div class="flex flex-col gap-4">
           <div>
             <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
-          <input v-model="kodeItem" type="text"
+            <InputField
-            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+              v-model="kodeItem"
+              type="text"
+              placeholder="Masukkan kode item"
+            />
           </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"
+            <InputField
-            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+              v-model="hargaJual"
+              type="number"
+            />
+          </div>
+        </div>
+        <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">
@@ -59,8 +67,10 @@
 
 
 
+
   <script setup>
   import { ref, computed } from 'vue'
+import InputField from './InputField.vue'
 
   const kodeItem = ref('')
   const hargaJual = ref(0)

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>

resources/js/pages/Kasir.vue

@@ -8,22 +8,31 @@
 
         <!-- 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 = [
+  const transaksi = ref([])
-    { id: 1, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 21200000 },
+
-    { id: 2, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
+  onMounted(async () => {
-    { id: 3, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
+  try {
-  ]
+    const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
+    
+    transaksi.value = res.data
+  } catch (err) {
+    console.error("Gagal fetch transaksi:", err)
+  }
+})
 
 const lihatDetail = (trx) => {
   alert(`Detail transaksi: ${trx.kode}`)