From ecc64c7b61bf1eb18680eb198d6957bfdc3c20be Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 2 Feb 2024 10:41:31 +0700
Subject: [PATCH] Add new store files and update table components

---
 src/components/Form/FiltersType/Type1.vue    |  73 +---------
 src/components/Form/FiltersType/Type6.vue    |   8 +-
 src/components/Form/FiltersType/reference.ts |  72 +++++++++
 src/components/Pages/Gangguan/Table_1.vue    |  19 ++-
 src/components/Pages/Gangguan/Table_10.vue   |  64 ++++++--
 src/components/Pages/Gangguan/Table_11.vue   |   7 +-
 src/components/Pages/Gangguan/Table_12.vue   |   7 +-
 src/components/Pages/Gangguan/Table_13.vue   |   6 +-
 src/components/Pages/Gangguan/Table_14.vue   |   6 +-
 src/components/Pages/Gangguan/Table_15.vue   |   7 +-
 src/components/Pages/Gangguan/Table_16.vue   |   7 +-
 src/components/Pages/Gangguan/Table_17.vue   |   7 +-
 src/components/Pages/Gangguan/Table_18.vue   |   7 +-
 src/components/Pages/Gangguan/Table_19.vue   |   7 +-
 src/components/Pages/Gangguan/Table_2.vue    |  63 ++++++--
 src/components/Pages/Gangguan/Table_20.vue   |   7 +-
 src/components/Pages/Gangguan/Table_3.vue    |  72 +++++++--
 src/components/Pages/Gangguan/Table_4.vue    |  78 +++++++---
 src/components/Pages/Gangguan/Table_5.vue    |  65 ++++++---
 src/components/Pages/Gangguan/Table_6.vue    |  49 +++++--
 src/components/Pages/Gangguan/Table_7.vue    |  71 ++++++---
 src/components/Pages/Gangguan/Table_8.vue    | 145 +++++++++++--------
 src/components/Pages/Gangguan/Table_9.vue    |  61 +++++++-
 src/stores/media.ts                          |  16 ++
 src/stores/totalDuration.ts                  |  25 ++++
 src/stores/totalReport.ts                    |  25 ++++
 26 files changed, 691 insertions(+), 283 deletions(-)
 create mode 100644 src/components/Form/FiltersType/reference.ts
 create mode 100644 src/stores/media.ts
 create mode 100644 src/stores/totalDuration.ts
 create mode 100644 src/stores/totalReport.ts

diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 5720782..06b9988 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -1,76 +1,8 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { getUid, getUp3,getPosko } from '@/utils/network';
-import { ref } from 'vue'
-import { usePostsStore } from '@/stores/posts';
-import { useUp3Store } from '@/stores/up3';
-import { useRegionStore } from '@/stores/region';
-interface Item {
-  id: number;
-  name: any;
-}
-
-const items = ref<Item[]>([]);
-const itemsUp3 = ref<Item[]>([]);
-const itemsPosko = ref<Item[]>([]);
-// Fetch data from the API using Axios
-const fetchData = async () => {
-  try {
-    const res = await getUid()
-    // console.log(res.data);
-
-    items.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-};
-
-const fetchDataUp3 = async (uid: number) => {
-  try {
-    const res = await getUp3(uid)
-    itemsUp3.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-};
-const fetchDataPosko = async (uppp: number) => {
-  try {
-    const res = await getPosko(uppp)
-    itemsPosko.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-};
-const selectedUid = (value: any) => {
-  useRegionStore().setData(value.id);
-  fetchDataUp3(value.id);
-}
-const selectedUppp = (value: any) => {
-  useUp3Store().setData(value.id);
-  fetchDataPosko(value.id);
-}
-const selectedPosko = (value: any) => {
-  usePostsStore().setData(value.id);
-}
-
+import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 fetchData();
-
 </script>
 
 <template>
@@ -97,5 +29,4 @@ fetchData();
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
     <DatePicker  />
   </div>
-</template>
-@/stores/up3
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 2965ffe..f622d52 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  fetchData();
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="selectedUid($event)" :data="items"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,13 +17,13 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
new file mode 100644
index 0000000..e0f6597
--- /dev/null
+++ b/src/components/Form/FiltersType/reference.ts
@@ -0,0 +1,72 @@
+
+import { getUid, getUp3,getPosko } from '@/utils/network';
+import { ref } from 'vue'
+import { usePostsStore } from '@/stores/posts';
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+interface Item {
+  id: number;
+  name: any;
+}
+
+const items = ref<Item[]>([]);
+const itemsUp3 = ref<Item[]>([]);
+const itemsPosko = ref<Item[]>([]);
+// Fetch data from the API using Axios
+const fetchData = async () => {
+  try {
+    const res = await getUid()
+    // console.log(res.data);
+
+    items.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+const fetchDataUp3 = async (uid: number) => {
+  try {
+    const res = await getUp3(uid)
+    itemsUp3.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const fetchDataPosko = async (uppp: number) => {
+  try {
+    const res = await getPosko(uppp)
+    itemsPosko.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const selectedUid = (value: any) => {
+  useRegionStore().setData(value.id);
+  fetchDataUp3(value.id);
+}
+const selectedUppp = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataPosko(value.id);
+}
+const selectedPosko = (value: any) => {
+  usePostsStore().setData(value.id);
+}
+
+
+
+export { selectedUid, selectedUppp, selectedPosko ,fetchData , items, itemsUp3, itemsPosko};
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index e214536..088f0ad 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -9,9 +9,10 @@
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel :position="position"  :show-indicator="showIndicator"
-                :show-pane="showPane" :shading="shading" 
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position"  
+            :show-indicator="showIndicator"
+            :show-pane="showPane" :shading="shading" 
+            v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
@@ -206,7 +207,6 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-
 import { useDialogStore } from '@/stores/dialog'
 import { useFiltersStore } from '@/stores/filters'
 import { useDateStore } from '@/stores/date'
@@ -286,7 +286,7 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
     }
   }
 `;
-const { onResult, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
     posko: "",
@@ -313,7 +313,7 @@ watch(detected, () => {
             queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    pembuat_laporan: 'BELUM ADA'
+                    pembuat_laporan: '-'
                 }];
             });
         }
@@ -321,6 +321,9 @@ watch(detected, () => {
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
+    onError((error) => {
+        console.log(error)
+    })
 })
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
@@ -331,14 +334,10 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const showData = () => {
     showDetail.value = true
 }
-
-
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-1',
     });
 })
-
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index c7d0566..d031035 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -8,7 +8,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -18,8 +19,8 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
+            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
@@ -78,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -88,14 +89,21 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag';
-
+import { useDateStore } from '@/stores/date'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
-const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
 query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
-    $minDurasiRecoveryTime: Int!
-    $maxDurasiRecoveryTime: Int!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
@@ -103,8 +111,6 @@ query daftarGangguanRecoveryTime(
     daftarKeluhanRecoveryTime(
         dateFrom: $dateFrom
         dateTo: $dateTo
-        minDurasiRecoveryTime: $minDurasiRecoveryTime
-        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
         posko: $posko
         idUid: $idUid
         idUp3: $idUp3
@@ -154,6 +160,44 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                    kode: 'Kode'
+                }];
+
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(queryError => {
+        console.log(queryError)
+    })
+})
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 98c57eb..6f7a77d 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -1,6 +1,6 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -159,7 +159,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
 query rekapitulasiGangguanPerPosko(
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 87a4207..bfe24b6 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -86,7 +86,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag';
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
 query rekapitulasiGangguanPerRegu(
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index 3ed07b9..fb6389a 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -86,6 +86,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index c6efabe..e2db059 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -39,6 +39,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 664fb49..9e35884 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@@ -36,7 +36,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 68bd1e2..c3198ac 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@@ -151,7 +151,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 257001f..a29bc68 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -77,7 +77,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index e71bb09..e70f070 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -83,7 +83,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 827f37c..52b7630 100644
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -54,7 +54,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 529946e..324f954 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
@@ -9,7 +9,11 @@
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel
-            v-model:visible.sync="loadingVisible"
+            :position="position"  
+            :show-indicator="showIndicator"
+            :show-pane="showPane" :shading="shading" 
+            v-if="loading"
+            v-model:visible="loading"
             :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -161,7 +165,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -169,6 +173,18 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
 import InputText from '@/components/InputText.vue';
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useTotalReport } from '@/stores/totalReport';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+
+
 const data = ref<any[]>([])
 const dataDetail = ref<any>({})
 const showDetail = ref(false)
@@ -213,18 +229,36 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     waktu_response
   }
 }`;
-
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, variables } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
-        minJmlLapor: 2,
-        maxJmlLapor: 100,
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+ const { onResult, onError, loading, refetch  } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+        minJmlLapor: 0,
+        maxJmlLapor: 0,
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
         posko: "",
         idUid: 0,
         idUp3: 0,
     })
+
+
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minJmlLapor = useTotalReport().getDataMin()
+    const maxJmlLapor = useTotalReport().getDataMax()
+
+    refetch({
+        minJmlLapor,
+        maxJmlLapor,
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
     onResult(queryResult => {
         if(queryResult.data != undefined){
             data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
@@ -234,6 +268,13 @@ onMounted(() => {
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
+    onError(error => {
+        console.log(error)
+    })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
+   
     filters.setConfig({
         type: 'type-6',
     })
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index fcebd54..a5b03ed 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -64,7 +64,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index cabbd8e..82701f7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -7,7 +7,8 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -46,12 +47,23 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useTotalDuration } from '@/stores/totalDuration';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+
 const data = ref<any[]>([])
 
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
@@ -89,27 +101,55 @@ query daftarGangguanResponseTime(
         waktu_response
     }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, variables } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        minDurasiResponseTime: 1, //menit
-        maxDurasiResponseTime: 1,// menit
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    minDurasiResponseTime: 1, //menit
+    maxDurasiResponseTime: 1,// menit
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+onResult(queryResult => {
+    if (queryResult.data != undefined) {
+        data.value = queryResult.data.daftarGangguanResponseTime;
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minDurasiResponseTime = useTotalDuration().getDataMin();
+    const maxDurasiResponseTime = useTotalDuration().getDataMax();
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        minDurasiResponseTime,
+        maxDurasiResponseTime,
+        posko,
+        idUid: uid,
+        idUp3: up3
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanResponseTime;
-            loadingVisible.value = false
+            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
+    onError(error => {
+        console.log(error)
+    })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
     filters.setConfig({
         type: 'type-7',
     })
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 16e0086..2bcb884 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -7,14 +7,17 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-                <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" data-type="number" caption="No" />
-           
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+                caption="Tgl Lapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
@@ -23,7 +26,8 @@
                 caption="Durasi Response Time" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
                 caption="Referensi Marking" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
@@ -45,13 +49,22 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-
+import { useDateStore } from '@/stores/date';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useTotalDuration } from '@/stores/totalDuration';
+import { useUp3Store } from '@/stores/up3';
+import { useSearchStore } from '@/stores/filtersAction';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
 query daftarGangguanRecoveryTime(
@@ -88,27 +101,48 @@ query daftarGangguanRecoveryTime(
         waktu_response
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, variables } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        minDurasiRecoveryTime: 1, //menit
-        maxDurasiRecoveryTime: 43,// menit
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    minDurasiRecoveryTime: 1, //menit
+    maxDurasiRecoveryTime: 1,// menit
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minDurasiRecoveryTime = useTotalDuration().getDataMin();
+    const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        minDurasiRecoveryTime,
+        maxDurasiRecoveryTime,
+        posko,
+        idUid: uid,
+        idUp3: up3
     })
     onResult(queryResult => {
-        if(queryResult.data != undefined){
+        if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanRecoveryTime;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
+    onError(error => {
+        console.log(error)
+    })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
     filters.setConfig({
         type: 'type-7',
     })
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index daf3a42..7146857 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -7,16 +7,17 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" 
-            caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" 
-            caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+                caption="Tgl Lapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
@@ -25,7 +26,8 @@
                 caption="Durasi Response Time" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@@ -45,13 +47,21 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
 query daftarGangguanSelesaiTanpaIdPelanggan(
@@ -84,25 +94,42 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
         waktu_response
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, variables } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-31").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
+    onError(error => {
+        console.log(error)
+    })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
     filters.setConfig({
         type: 'type-1',
     })
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index ec19648..44ffa4e 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -7,7 +7,8 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true"/>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -37,13 +38,22 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useMediaStore } from '@/stores/media';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
 query daftarGangguanBerdasarkanMedia(
@@ -78,21 +88,34 @@ query daftarGangguanBerdasarkanMedia(
         waktu_response
         }
 }`;
-const loadingVisible = ref<boolean>(false)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
         posko: "",
         idUid: 0,
         idUp3: 0,
         media : "Twitter"
     })
+   
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+        media
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -101,6 +124,10 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
+    
     filters.setConfig({
         type: 'type-16',
     })
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 0134572..0be8d99 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -1,20 +1,23 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-                <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" data-type="number" caption="No" />
-           
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+                caption="Tgl Lapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
@@ -23,7 +26,8 @@
                 caption="Durasi Response Time" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@@ -43,13 +47,21 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
 query daftarGangguanDiselesaikanMobileAPKT(
@@ -82,20 +94,31 @@ query daftarGangguanDiselesaikanMobileAPKT(
         waktu_response
         }
 }`;
-const loadingVisible = ref<boolean>(false)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -104,6 +127,10 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
+})
+onMounted(() => {
+    const filters = useFiltersStore()
+
     filters.setConfig({
         type: 'type-1',
     })
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index 289339a..a0f4c95 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -1,64 +1,66 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
-                css-class="custom-table-column" />  
-            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" :allow-resizing="false"
                 css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+                :allow-resizing="false" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" :allow-resizing="false"
-                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+                :allow-resizing="false" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
     </div>
@@ -68,7 +70,7 @@
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -77,19 +79,27 @@ import { Workbook } from 'exceljs'
 
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { useDateStore } from '@/stores/date'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALL = gql`
 query rekapitulasiAllGangguan(
-    # $dateFrom: Date!
-    # $dateTo: Date!
+    $dateFrom: Date!
+    $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
 ) {
     rekapitulasiAllGangguan(
-        # dateFrom: $dateFrom
-        # dateTo: $dateTo
+        dateFrom: $dateFrom
+        dateTo: $dateTo
         posko: $posko
         idUid: $idUid
         idUp3: $idUp3
@@ -119,7 +129,45 @@ query rekapitulasiAllGangguan(
         total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+    if (queryResult.data != undefined) {
+        queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+            data.value = [...data.value, {
+                ...item,
+                nama_unit: 'UNIT'
+            }];
+
+        })
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+})
+onError((error) => {
+    console.log(error)
+})
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -156,34 +204,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 onMounted(() => {
-
     const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
-        // dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        // dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
-    onResult(queryResult => {
-        loadingVisible.value = true
-        if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value,{
-                    ...item,
-                    nama_unit: 'UNIT'
-                }];
-               
-            })
-
-            loadingVisible.value = false
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index b16f3d2..a9208a5 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,6 +1,6 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -8,7 +8,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -115,7 +116,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
@@ -125,14 +126,22 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag';
-
+import { useDateStore } from '@/stores/date'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const dataReal = ref<any[]>([])
+
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
 query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
-    $minDurasiRecoveryTime: Int!
-    $maxDurasiRecoveryTime: Int!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
@@ -162,7 +171,13 @@ query daftarGangguanRecoveryTime(
         waktu_response
         }
 }`;
-const loadingVisible = ref<boolean>(true)
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -919,10 +934,40 @@ const data = [
         }
     },
 ]
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                dataReal.value = [...dataReal.value, {
+                    ...item,
+                    nama_unit: 'UNIT'
+                }];
+
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(queryError => {
+        console.log(queryError)
+    })
+})
 
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-1',
         reportButton: true
diff --git a/src/stores/media.ts b/src/stores/media.ts
new file mode 100644
index 0000000..cf9f5f7
--- /dev/null
+++ b/src/stores/media.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useMediaStore = defineStore('media', () => {
+    const media = ref('')
+    const setData = (value: string) => {
+        media.value = value
+    }
+    const getData = () => {
+        return media.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})
\ No newline at end of file
diff --git a/src/stores/totalDuration.ts b/src/stores/totalDuration.ts
new file mode 100644
index 0000000..4034436
--- /dev/null
+++ b/src/stores/totalDuration.ts
@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useTotalDuration = defineStore('totalDuration', () => {
+    const totalMin = ref()
+    const totalMax = ref()
+    const setDataMin = (value: Number) => {
+        totalMax.value = value
+    }
+    const getDataMin = () => {
+        return totalMax.value
+    }
+    const setDataMax = (value: Number) => {
+        totalMin.value = value
+    }
+    const getDataMax = () => {
+        return totalMin.value
+    }
+    return {
+        setDataMin,
+        getDataMin,
+        setDataMax,
+        getDataMax,
+    }
+})
\ No newline at end of file
diff --git a/src/stores/totalReport.ts b/src/stores/totalReport.ts
new file mode 100644
index 0000000..d1bbabd
--- /dev/null
+++ b/src/stores/totalReport.ts
@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useTotalReport = defineStore('totalReport', () => {
+    const totalMin = ref()
+    const totalMax = ref()
+    const setDataMin = (value: Number) => {
+        totalMax.value = value
+    }
+    const getDataMin = () => {
+        return totalMax.value
+    }
+    const setDataMax = (value: Number) => {
+        totalMin.value = value
+    }
+    const getDataMax = () => {
+        return totalMin.value
+    }
+    return {
+        setDataMin,
+        getDataMin,
+        setDataMax,
+        getDataMax,
+    }
+})
\ No newline at end of file