Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update Kasir, KasirForm, KasirTransaksiList]

Browse Source 
Error Data transaksi tidak tampil
This commit is contained in:
Timoti313 2025-08-28 16:20:58 +07:00
parent 4dd3c5188f
commit 1d6bee91e1
3 changed files with 54 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/components/KasirForm.vue
View File

@ -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"
class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
<InputField
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"
class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
<InputField
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)

13
resources/js/components/KasirTransaksiList.vue
View File

@ -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>

21
resources/js/pages/Kasir.vue
View File

@ -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 = [
{ 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([])
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)
}
})
const lihatDetail = (trx) => {
alert(`Detail transaksi: ${trx.kode}`)