[update] laporan

resources/js/components/DetailLaporan.vue

@@ -1,12 +1,12 @@
 <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>
-
+    <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">
@@ -39,10 +39,12 @@
         </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,8 +78,7 @@ 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;
@@ -71,6 +90,8 @@ const fetchData = async (date) => {
 onMounted(() => {
   const today = new Date().toISOString().split('T')[0];
   tanggalDipilih.value = today;
+
+  fetchSales();
 });
 
 watch(tanggalDipilih, (newDate) => {

resources/js/components/RingkasanLaporanA.vue

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

resources/js/components/RingkasanLaporanB.vue

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