diff --git a/resources/js/components/DetailLaporan.vue b/resources/js/components/DetailLaporan.vue
index 9be9c5c..a5c113a 100644
--- a/resources/js/components/DetailLaporan.vue
+++ b/resources/js/components/DetailLaporan.vue
@@ -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) => {
diff --git a/resources/js/components/RingkasanLaporanA.vue b/resources/js/components/RingkasanLaporanA.vue
index ef06b6a..bdc77d7 100644
--- a/resources/js/components/RingkasanLaporanA.vue
+++ b/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">
diff --git a/resources/js/components/RingkasanLaporanB.vue b/resources/js/components/RingkasanLaporanB.vue
index 9de8efb..59b3c14 100644
--- a/resources/js/components/RingkasanLaporanB.vue
+++ b/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">