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

[update] laporan

Browse Source
This commit is contained in:
Baghaztra 2025-09-08 09:46:04 +07:00
parent e1a0711082
commit b1babd6c26
3 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/js/components/DetailLaporan.vue
View File

@ -1,48 +1,50 @@
<template>
<div class="my-6">
<hr class="border-B mb-5" />
<div class="flez flex-row mb-3">
<div class="flex flex-row mb-3 overflow-x-auto">
<input type="date" v-model="tanggalDipilih"
class="mt-1 block rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:outline-none focus:ring-D focus:ring-opacity-50 p-2" />
<InputSelect class="ml-3" :options="opsiSales" v-model="salesDipilih" />
</div>
<table class="w-full border-collapse border border-C rounded-md">
<thead>
<tr class="bg-C text-D rounded-t-md">
<th class="border-x border-C px-3 py-3">Nama Produk</th>
<th class="border-x border-C px-3 py-3">Item Terjual</th>
<th class="border-x border-C px-3 py-3">Total Berat</th>
<th class="border-x border-C px-3 py-3">Total Pendapatan</th>
</tr>
</thead>
<tbody>
<tr v-if="loading">
<td colspan="5" class="p-4">
<div class="flex items-center justify-center w-full h-30">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-D"></div>
<span class="ml-2 text-gray-600">Memuat data...</span>
</div>
</td>
</tr>
<tr v-else-if="!produk.length">
<td colspan="5" class="p-4 text-center">Tidak ada data untuk ditampilkan.</td>
</tr>
<template v-else v-for="item in produk" :key="item.nama_produk">
<tr class="hover:bg-B">
<td class="border-x border-C px-3 py-2 text-center">{{ item.nama_produk }}</td>
<td class="border-x border-C px-3 py-2 text-center">{{ item.jumlah_item_terjual }}</td>
<td class="border-x border-C px-3 py-2 text-center">{{ item.berat_terjual }} gr</td>
<td class="border-x border-C px-3 py-2 text-center">Rp {{ item.pendapatan }}</td>
<div class="mt-5 overflow-x-auto">
<table class="w-full border-collapse border border-C rounded-md">
<thead>
<tr class="bg-C text-D rounded-t-md">
<th class="border-x border-C px-3 py-3">Nama Produk</th>
<th class="border-x border-C px-3 py-3">Item Terjual</th>
<th class="border-x border-C px-3 py-3">Total Berat</th>
<th class="border-x border-C px-3 py-3">Total Pendapatan</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<tr v-if="loading">
<td colspan="5" class="p-4">
<div class="flex items-center justify-center w-full h-30">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-D"></div>
<span class="ml-2 text-gray-600">Memuat data...</span>
</div>
</td>
</tr>
<tr v-else-if="!produk.length">
<td colspan="5" class="p-4 text-center">Tidak ada data untuk ditampilkan.</td>
</tr>
<template v-else v-for="item in produk" :key="item.nama_produk">
<tr class="hover:bg-B">
<td class="border-x border-C px-3 py-2 text-center">{{ item.nama_produk }}</td>
<td class="border-x border-C px-3 py-2 text-center">{{ item.jumlah_item_terjual }}</td>
<td class="border-x border-C px-3 py-2 text-center">{{ item.berat_terjual }} gr</td>
<td class="border-x border-C px-3 py-2 text-center">Rp {{ item.pendapatan }}</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import InputSelect from './InputSelect.vue';
import axios from 'axios';
const tanggalDipilih = ref('');
@ -51,6 +53,24 @@ const loading = ref(false);
const produk = computed(() => data.value?.produk || []);
const salesDipilih = ref(null);
const opsiSales = ref([
{ label: 'Semua Sales', value: null, selected: true },
]);
const fetchSales = async () => {
try {
const response = await axios.get('/api/sales');
const salesData = response.data;
opsiSales.value = [{ label: 'Semua Sales', value: null }, ...salesData.map(sales => ({
label: sales.nama,
value: sales.id,
}))];
} catch (error) {
console.error('Gagal mengambil data sales:', error);
}
};
const fetchData = async (date) => {
if (!date) return;
@ -58,12 +78,11 @@ const fetchData = async (date) => {
try {
const response = await axios.get(`/api/detail-laporan?tanggal=${date}`);
data.value = response.data;
// console.log("Data berhasil diambil:", data.value);
data.value = response.data;;
} catch (error) {
console.error('Gagal mengambil data laporan:', error);
data.value = null;
}finally {
} finally {
loading.value = false;
}
};
@ -71,6 +90,8 @@ const fetchData = async (date) => {
onMounted(() => {
const today = new Date().toISOString().split('T')[0];
tanggalDipilih.value = today;
fetchSales();
});
watch(tanggalDipilih, (newDate) => {

2
resources/js/components/RingkasanLaporanA.vue
View File

@ -33,7 +33,7 @@
</div>
</div>
<div class="mt-5">
<div class="mt-5 overflow-x-auto">
<table class="w-full border-collapse border border-C rounded-md">
<thead>
<tr class="bg-C text-D rounded-t-md">

2
resources/js/components/RingkasanLaporanB.vue
View File

@ -33,7 +33,7 @@
</div>
</div>
<div class="mt-5">
<div class="mt-5 overflow-x-auto">
<table class="w-full border-collapse border border-C rounded-md">
<thead>
<tr class="bg-C text-D rounded-t-md">