resources/js/components/KasirForm.vue

@@ -2,33 +2,25 @@
     <div>
       <!-- Input Grid -->
       <div class="grid grid-cols-2 gap-4 mb-4">
-        <div class="flex flex-col gap-4">
+        <div>
-          <div>
+          <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
-            <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>
-          <div>
-            <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
-            <InputField
-              v-model="hargaJual"
-              type="number"
-            />
-          </div>
         </div>
-        <div class="flex items-center justify-center">
+    <br>
-          <div class="text-center">
+        <div>
-            <span class="block text-gray-600 font-medium">Total:</span>
+            <!-- Total -->
-            <span class="text-3xl font-bold text-[#0f1d4a]">
+            <div class="flex justify-center items-baseline gap-2 mb-1 ml-130">
-              Rp{{ total.toLocaleString() }},-
+              <span class="text-gray-600 font-medium">Total:</span>
-            </span>
+              <span class="text-3xl font-bold text-[#0f1d4a]">Rp{{ total.toLocaleString() }},-</span>
-          </div>
+            </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>
       </div>
 
+
       <!-- Buttons -->
       <div class="flex gap-4 mb-6">
         <button @click="tambahItem"
@@ -67,10 +59,8 @@
 
 
 
-
   <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 props.transaksi" :key="trx.id">
+          <tr v-for="trx in 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 || 0).toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ trx.pendapatan.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,19 +24,10 @@
   </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,33 +8,24 @@
 
         <!-- Right Section -->
         <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
-          <KasirTransaksiList :transaksi="transaksi" @detail="lihatDetail" />
+          <KasirTransaksiList :transaksi="dummyTransaksi" @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 transaksi = ref([])
+  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 },
+  ]
 
-  onMounted(async () => {
+  const lihatDetail = (trx) => {
-  try {
+    alert(`Detail transaksi: ${trx.kode}`)
-    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>