100 lines
3.3 KiB
Vue
100 lines
3.3 KiB
Vue
<template>
|
|
<div class="my-6">
|
|
<hr class="border-B mb-5" />
|
|
<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>
|
|
<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>
|
|
</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('');
|
|
const data = ref(null);
|
|
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;
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
const response = await axios.get(`/api/detail-laporan?tanggal=${date}`);
|
|
data.value = response.data;;
|
|
} catch (error) {
|
|
console.error('Gagal mengambil data laporan:', error);
|
|
data.value = null;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
const today = new Date().toISOString().split('T')[0];
|
|
tanggalDipilih.value = today;
|
|
|
|
fetchSales();
|
|
});
|
|
|
|
watch(tanggalDipilih, (newDate) => {
|
|
fetchData(newDate);
|
|
}, { immediate: true });
|
|
</script> |