diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 43b09f7..7e4268c 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1373,10 +1373,6 @@ body {
   margin-top: 1.5rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mb-10 {
   margin-bottom: 2.5rem;
 }
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
new file mode 100644
index 0000000..c70cd0f
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -0,0 +1,91 @@
+<template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => filters = value" />
+    </Filters>
+
+    <Anomali_LAPPGP_LPT :data="data" />
+    <Anomali_LAPPGP_LPP :filters-detail="filters" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+const data = ref<any[]>([])
+
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
+
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
new file mode 100755
index 0000000..d2aab7a
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan PLN Mobile
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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" :word-wrap-enabled="true">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      css-class="custom-table-column" />
+    <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
+      css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number" caption="b" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number" caption="c" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+          caption="d=b+c" css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number" caption="e=b/a" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
+          data-type="number" caption="f=c/a" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali" data-type="number"
+          caption="g=e+f" css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  filtersDetail: {
+    type: Object as PropType<any>,
+    required: true
+  }
+})
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { ref, watch, type PropType } from 'vue'
+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 filtersDetail = ref({}); // Declare the 'filters' variable
+
+// watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
+//     filterData(newValue)
+// }, { immediate: true })
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
+  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
+
+    ) {
+        nama_petugas
+        nama_posko
+        persen_penyelesaian_petugas_anomali
+        persen_penyelesaian_petugas_anomali_cc_123
+        persen_penyelesaian_petugas_anomali_pln_mobile
+        total_penyelesaian_petugas_anomali
+        total_penyelesaian_petugas_anomali_cc_123
+        total_penyelesaian_petugas_anomali_pln_mobile
+        total_wo
+    }
+  }
+`
+const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item,
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+  laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
+)
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
new file mode 100755
index 0000000..2ed71e6
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan Total
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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" :word-wrap-enabled="true">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a" css-class="custom-table-column" />
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number" caption="b" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number" caption="c" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+          caption="d=b+c" css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
+            data-type="number" caption="Marking" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
+            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+            data-type="number" caption="Marking" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
+            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
+            data-type="number" caption="Marking" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
+            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+    </DxColumn>
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const props = defineProps({
+  data: Array as () => any[],
+})
+const data = computed(() => props.data)
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
new file mode 100644
index 0000000..d1763ef
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -0,0 +1,86 @@
+<template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => filters = value" />
+    </Filters>
+
+    <Anomali_LAPPGU_LPT :data="data" />
+    <Anomali_LAPPGU_LPP :data="data" />
+</template>
+
+<script setup lang="ts">
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ref } from 'vue'
+const data = ref<any[]>([])
+
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
new file mode 100755
index 0000000..59b1dc4
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan PLN Mobile
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
+        css-class="custom-table-column" />
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
+        css-class="custom-table-column" />
+    </DxColumn>
+    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
+        css-class="custom-table-column" />
+    </DxColumn>
+
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { computed, ref } from 'vue'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const props = defineProps({
+  data: Array as () => any[],
+})
+const data = computed(() => props.data)
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
new file mode 100755
index 0000000..b92f307
--- /dev/null
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan Total
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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" :word-wrap-enabled="true">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="f" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="g" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+    </DxColumn>
+
+    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+    </DxColumn>
+
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const loading = ref(false)
+const shading = ref(true)
+const showPane = ref(true)
+const props = defineProps({
+  data: Array as () => any[],
+})
+const data = computed(() => props.data)
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
new file mode 100755
index 0000000..cd86335
--- /dev/null
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -0,0 +1,79 @@
+<template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => filters = value" />
+    </Filters>
+
+    <Anomali_LAPPKU_LPT :data="data" />
+    <Anomali_LAPPKU_LPP :data="data" />
+</template>
+
+<script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import { ref } from 'vue'
+import { Anomali_LAPPKU_LPT, Anomali_LAPPKU_LPP } from '../.'
+import { Type4 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const data = ref<any[]>([])
+
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
new file mode 100755
index 0000000..1c0085b
--- /dev/null
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan PLN Mobile
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
+        css-class="custom-table-column" />
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
+        css-class="custom-table-column" />
+    </DxColumn>
+    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
+        css-class="custom-table-column" />
+    </DxColumn>
+
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { computed, ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const props = defineProps({
+  data: Array as () => any[],
+})
+const data = computed(() => props.data)
+const loading = ref(false)
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
new file mode 100755
index 0000000..590e097
--- /dev/null
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan Total
+    </h1>
+  </div>
+  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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" :word-wrap-enabled="true">
+    <DxSelection mode="single" />
+    <DxPaging :enabled="false" />
+    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+    <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" />
+    <DxColumnFixing :enabled="true" />
+
+    <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+
+    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxColumn>
+
+  </DxDataGrid>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const props = defineProps({
+  data: Array as () => any[],
+})
+const data = computed(() => props.data)
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5,
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true,
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
deleted file mode 100755
index 7c26661..0000000
--- a/src/components/Pages/Anomali/Table_61.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type4 @update:filters="(value) => (filters = value)" />
-  </Filters>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-    :word-wrap-enabled="true"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      :width="170"
-      alignment="center"
-      data-field=""
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="a"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="b"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="d"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="e=a+b+c+d"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="f" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="g" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-    </DxColumn>
-
-    <DxColumn
-      alignment="center"
-      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-    </DxColumn>
-  </DxDataGrid>
-
-  <AnomaliTable2 />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { AnomaliTable2 } from '.'
-import { Type4 } from '@/components/Form/FiltersType'
-import Filters from '@/components/Form/Filters.vue'
-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 onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-
-const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    laporanAnomaliPenangananPengaduanGangguanPetugas(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      nama_posko
-      persen_penyelesaian_petugas_anomali_cc_123_marking
-      persen_penyelesaian_petugas_anomali_cc_123_non_marking
-      persen_penyelesaian_petugas_anomali_marking
-      persen_penyelesaian_petugas_anomali_non_marking
-      persen_penyelesaian_petugas_anomali_pln_mobile_marking
-      persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
-      total_penyelesaian_petugas_anomali_cc_123_marking
-      total_penyelesaian_petugas_anomali_cc_123_non_marking
-      total_penyelesaian_petugas_anomali_marking
-      total_penyelesaian_petugas_anomali_non_marking
-      total_penyelesaian_petugas_anomali_pln_mobile_marking
-      total_penyelesaian_petugas_anomali_pln_mobile_non_marking
-      total_petugas
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : '',
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-const filters = ref()
-</script>
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
deleted file mode 100755
index 7d07bdc..0000000
--- a/src/components/Pages/Anomali/Table_62.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      alignment="center"
-      data-field=""
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="a"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="b"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="c=b/a"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-  </DxDataGrid>
-</template>
-
-<script setup lang="ts">
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { ref } from 'vue'
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const loading = ref(true)
-const data = ref<any[]>([])
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-</script>
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
deleted file mode 100755
index 0bd0d4f..0000000
--- a/src/components/Pages/Anomali/Table_63.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type4 @update:filters="(value) => (filters = value)" />
-  </Filters>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-    :word-wrap-enabled="true"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      :width="170"
-      alignment="center"
-      data-field="nama_posko"
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="total_petugas"
-        caption="a"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
-          data-type="number"
-          caption="b"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_cc_123"
-          data-type="number"
-          caption="c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali"
-          data-type="number"
-          caption="d=b+c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_marking"
-            data-type="number"
-            caption="Marking"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_non_marking"
-            data-type="number"
-            caption="Non Marking"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-      </DxColumn>
-    </DxColumn>
-  </DxDataGrid>
-
-  <AnomaliTable4 :filters-detail="filters" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { AnomaliTable4 } from '.'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
-import { Type4 } from '@/components/Form/FiltersType'
-import Filters from '@/components/Form/Filters.vue'
-
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $jenisLaporan: Int
-    $idUid: Int
-    $idUp3: Int
-    $posko: String
-  ) {
-    laporanAnomaliPenangananPengaduanGangguanPetugas(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      jenisLaporan: $jenisLaporan
-      idUid: $idUid
-      idUp3: $idUp3
-      posko: $posko
-    ) {
-      nama_posko
-      persen_penyelesaian_petugas_anomali_cc_123_marking
-      persen_penyelesaian_petugas_anomali_cc_123_non_marking
-      persen_penyelesaian_petugas_anomali_marking
-      persen_penyelesaian_petugas_anomali_non_marking
-      persen_penyelesaian_petugas_anomali_pln_mobile_marking
-      persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
-      total_penyelesaian_petugas_anomali_cc_123_marking
-      total_penyelesaian_petugas_anomali_cc_123_non_marking
-      total_penyelesaian_petugas_anomali_marking
-      total_penyelesaian_petugas_anomali_non_marking
-      total_penyelesaian_petugas_anomali_pln_mobile_marking
-      total_penyelesaian_petugas_anomali_pln_mobile_non_marking
-      total_petugas
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : '',
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item,
-            total_penyelesaian_petugas_anomali_cc_123:
-              item.total_penyelesaian_petugas_anomali_cc_123_marking +
-              item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
-            total_penyelesaian_petugas_anomali_pln_mobile:
-              item.total_penyelesaian_petugas_anomali_pln_mobile_marking +
-              item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
-            total_penyelesaian_petugas_anomali:
-              item.total_penyelesaian_petugas_anomali_marking +
-              item.total_penyelesaian_petugas_anomali_non_marking
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-const filters = ref()
-</script>
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
deleted file mode 100755
index 65360e6..0000000
--- a/src/components/Pages/Anomali/Table_64.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-    :word-wrap-enabled="true"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      :width="170"
-      alignment="center"
-      data-field="nama_posko"
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn
-      :width="170"
-      alignment="center"
-      data-field="nama_petugas"
-      caption="Nama Petugas"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-      <DxColumn
-        alignment="center"
-        caption="(PLN Mobile, CC123, DLL)"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_wo"
-          data-type="number"
-          caption="a"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
-          data-type="number"
-          caption="b"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_cc_123"
-          data-type="number"
-          caption="c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_penyelesaian_petugas_anomali"
-          data-type="number"
-          caption="d=b+c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
-          data-type="number"
-          caption="e=b/a"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali_cc_123"
-          data-type="number"
-          caption="f=c/a"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali"
-          data-type="number"
-          caption="g=e+f"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-  </DxDataGrid>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  filtersDetail: {
-    type: Object as PropType<any>,
-    required: true
-  }
-})
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { ref, watch, type PropType } from 'vue'
-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 filtersDetail = ref({}) // Declare the 'filters' variable
-watch(
-  () => filtersDetail.value,
-  (newValue) => {
-    // Access the 'value' property of the 'filters' ref
-    filterData(newValue)
-  },
-  { immediate: true }
-)
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
-  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $jenisLaporan: Int
-    $idUid: Int
-    $idUp3: Int
-    $posko: String
-  ) {
-    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      jenisLaporan: $jenisLaporan
-      idUid: $idUid
-      idUp3: $idUp3
-      posko: $posko
-    ) {
-      nama_petugas
-      nama_posko
-      persen_penyelesaian_petugas_anomali
-      persen_penyelesaian_petugas_anomali_cc_123
-      persen_penyelesaian_petugas_anomali_pln_mobile
-      total_penyelesaian_petugas_anomali
-      total_penyelesaian_petugas_anomali_cc_123
-      total_penyelesaian_petugas_anomali_pln_mobile
-      total_wo
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : '',
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-</script>
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
deleted file mode 100755
index 946cbf8..0000000
--- a/src/components/Pages/Anomali/Table_65.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type4 @update:filters="(value) => (filters = value)" />
-  </Filters>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-    :word-wrap-enabled="true"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      :width="170"
-      alignment="center"
-      data-field=""
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="a"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="b"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="c"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="d"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="e=a+b+c+d"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="f"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="g"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="h=f+g"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-
-    <DxColumn
-      alignment="center"
-      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="i=f/e"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="j=g/e"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="k=i+j"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxColumn>
-  </DxDataGrid>
-
-  <AnomaliTable6 />
-</template>
-
-<script setup lang="ts">
-import Filters from '@/components/Form/Filters.vue'
-
-import { ref } from 'vue'
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { AnomaliTable6 } from '.'
-import { Type4 } from '@/components/Form/FiltersType'
-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 onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-
-const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    laporanCheckInCheckOut(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      avg_durasi_wo_gangguan_individual
-      avg_durasi_wo_penugasan_khusus
-      avg_rct_wo_gangguan_individual
-      avg_rpt_wo_gangguan_individual
-      jumlah_wo_gangguan_individual
-      jumlah_wo_penugasan_khusus
-      personil_yantek
-      user_regu
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : '',
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: '',
-  idUid: 0,
-  idUp3: 0
-})
-const filters = ref()
-</script>
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
deleted file mode 100755
index 37daba0..0000000
--- a/src/components/Pages/Anomali/Table_66.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
-  <DxDataGrid
-    class="max-h-[calc(100vh-140px)] mb-10"
-    :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"
-  >
-    <DxSelection mode="single" />
-    <DxPaging :enabled="false" />
-    <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <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"
-    />
-    <DxColumnFixing :enabled="true" />
-
-    <DxColumn
-      alignment="center"
-      data-field=""
-      caption="Nama Unit"
-      css-class="custom-table-column"
-    />
-    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="a"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="b"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-    <DxColumn
-      alignment="center"
-      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column"
-    >
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        data-type="number"
-        caption="c=b/a"
-        css-class="custom-table-column"
-      />
-    </DxColumn>
-  </DxDataGrid>
-</template>
-
-<script setup lang="ts">
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { ref } from 'vue'
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
-const loading = ref(false)
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-</script>
diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
index eeedd38..68c18b8 100755
--- a/src/components/Pages/Anomali/index.ts
+++ b/src/components/Pages/Anomali/index.ts
@@ -1,6 +1,11 @@
-export { default as AnomaliTable1 } from '@/components/Pages/Anomali/Table_61.vue'
-export { default as AnomaliTable2 } from '@/components/Pages/Anomali/Table_62.vue'
-export { default as AnomaliTable3 } from '@/components/Pages/Anomali/Table_63.vue'
-export { default as AnomaliTable4 } from '@/components/Pages/Anomali/Table_64.vue'
-export { default as AnomaliTable5 } from '@/components/Pages/Anomali/Table_65.vue'
-export { default as AnomaliTable6 } from '@/components/Pages/Anomali/Table_66.vue'
\ No newline at end of file
+export { default as Anomali_LAPPGU } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue'
+export { default as Anomali_LAPPGU_LPT } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue'
+export { default as Anomali_LAPPGU_LPP } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue'
+
+export { default as Anomali_LAPPGP } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue'
+export { default as Anomali_LAPPGP_LPT } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue'
+export { default as Anomali_LAPPGP_LPP } from '@/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue'
+
+export { default as Anomali_LAPPKU } from '@/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue'
+export { default as Anomali_LAPPKU_LPT } from '@/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue'
+export { default as Anomali_LAPPKU_LPP } from '@/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/LaporanCICO.vue
similarity index 100%
rename from src/components/Pages/Cico/Table_60.vue
rename to src/components/Pages/Cico/LaporanCICO.vue
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
index afe5ed0..e09ed23 100755
--- a/src/components/Pages/Cico/index.ts
+++ b/src/components/Pages/Cico/index.ts
@@ -1 +1 @@
-export { default as CicoTable1 } from '@/components/Pages/Cico/Table_60.vue'
\ No newline at end of file
+export { default as LaporanCICO } from '@/components/Pages/Cico/LaporanCICO.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
similarity index 100%
rename from src/components/Pages/Ctt/Table_67.vue
rename to src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
index e93864f..9b32a10 100755
--- a/src/components/Pages/Ctt/index.ts
+++ b/src/components/Pages/Ctt/index.ts
@@ -1 +1 @@
-export { default as CttTable1 } from '@/components/Pages/Ctt/Table_67.vue'
\ No newline at end of file
+export { default as LaporanCttKwhPeriksa } from '@/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index eb56db0..fbec8c7 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -3,208 +3,71 @@
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
+      :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" 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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="170"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="data"
-        header-cell-template="title-header"
-      />
+      <DxColumn alignment="center" :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="data" header-cell-template="title-header" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_selesai"
-          data-type="number"
-          caption="Selesai"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_selesai"
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_inproses"
-          data-type="number"
-          caption="InProgress"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_inproses"
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_response"
-          data-type="number"
-          caption="Rata-Rata"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_response"
-          data-type="number"
-          caption="Max"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_response"
-          data-type="number"
-          caption="Min"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_response"
-          data-type="number"
-          caption="> SLA"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_response"
-          data-type="number"
-          caption="≤ SLA"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          caption="> SLA" css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+          caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_recovery"
-          data-type="number"
-          caption="Rata-Rata"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_recovery"
-          data-type="number"
-          caption="Max"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_recovery"
-          data-type="number"
-          caption="Min"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_recovery"
-          data-type="number"
-          caption="> SLA"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_recovery"
-          data-type="number"
-          caption="≤ SLA"
-          css-class="custom-table-column"
-          cell-template="data"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
+          css-class="custom-table-column" cell-template="data" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
+          css-class="custom-table-column" cell-template="data" />
       </DxColumn>
       <template #data="{ data }">
-        <p class="cursor-pointer" @click="showDialog()">
+        <p class="text-left cursor-pointer" @click="showDialog()">
           {{ data.text }}
         </p>
       </template>
 
       <template #title-header="{ data }">
-        <p class="text-center">
-          {{ data.text }}
+        <p class="w-full text-center">
+          {{ data.column.caption }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="showDialogDetail"
-    :full-width="true"
-    title="Detail Rekapitulasi Keluhan All"
-    @on-close="closeDetailDialog"
-  >
+  <DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
+    @on-close="closeDetailDialog">
     <div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
       <div class="flex flex-1 p-4 bg-white rounded-xl">
         <div class="w-full">
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
similarity index 100%
rename from src/components/Pages/Material/Table_68.vue
rename to src/components/Pages/Material/Daftar/Material_DGMYG.vue
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
similarity index 100%
rename from src/components/Pages/Material/Table_69.vue
rename to src/components/Pages/Material/Rekap/Material_RPM.vue
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
index 6eed0fc..6301386 100755
--- a/src/components/Pages/Material/index.ts
+++ b/src/components/Pages/Material/index.ts
@@ -1,2 +1,2 @@
-export { default as MaterialTable1 } from '@/components/Pages/Material/Table_68.vue'
-export { default as MaterialTable2 } from '@/components/Pages/Material/Table_69.vue'
\ No newline at end of file
+export { default as MaterialDGMYG } from '@/components/Pages/Material/Daftar/Material_DGMYG.vue'
+export { default as MaterialRPM } from '@/components/Pages/Material/Rekap/Material_RPM.vue'
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/PencarianData.vue
similarity index 100%
rename from src/components/Pages/PencarianData/Table_71.vue
rename to src/components/Pages/PencarianData/PencarianData.vue
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
index 012e268..a1475cb 100755
--- a/src/components/Pages/PencarianData/index.ts
+++ b/src/components/Pages/PencarianData/index.ts
@@ -1 +1 @@
-export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_71.vue'
\ No newline at end of file
+export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/PencarianData.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Transaksi.vue
similarity index 100%
rename from src/components/Pages/Transaksi/Table_70.vue
rename to src/components/Pages/Transaksi/Transaksi.vue
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
index 9335e94..e80f721 100755
--- a/src/components/Pages/Transaksi/index.ts
+++ b/src/components/Pages/Transaksi/index.ts
@@ -1 +1 @@
-export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_70.vue'
\ No newline at end of file
+export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Transaksi.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index ea54da9..65d6ee2 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -71,15 +71,10 @@ import {
   MonalisaTable8,
   MonalisaTable9
 } from '@/components/Pages/Monalisa'
-import { CicoTable1 } from '@/components/Pages/Cico'
-import {
-  AnomaliTable1,
-  AnomaliTable2,
-  AnomaliTable3,
-  AnomaliTable5
-} from '@/components/Pages/Anomali'
-import { CttTable1 } from '@/components/Pages/Ctt'
-import { MaterialTable1, MaterialTable2 } from '@/components/Pages/Material'
+import { LaporanCICO } from '@/components/Pages/Cico'
+import { Anomali_LAPPGU, Anomali_LAPPKU, Anomali_LAPPGP } from '@/components/Pages/Anomali'
+import { LaporanCttKwhPeriksa } from '@/components/Pages/Ctt'
+import { MaterialDGMYG, MaterialRPM } from '@/components/Pages/Material'
 import { TransaksiTable1 } from '@/components/Pages/Transaksi'
 import { PencarianDataTable1 } from '@/components/Pages/PencarianData'
 
@@ -540,7 +535,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Check In /Check Out (CICO)',
-                component: CicoTable1
+                component: LaporanCICO
               },
               {
                 path: ':pathMatch(.*)*',
@@ -565,12 +560,12 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
-                component: AnomaliTable1
+                component: Anomali_LAPPGU
               },
               {
                 path: '2',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
-                component: AnomaliTable3
+                component: Anomali_LAPPGP
               },
               {
                 path: ':pathMatch(.*)*',
@@ -585,7 +580,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                component: AnomaliTable5
+                component: Anomali_LAPPKU
               },
               {
                 path: ':pathMatch(.*)*',
@@ -606,7 +601,7 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Laporan CTT & KWH Periksa',
-            component: CttTable1
+            component: LaporanCttKwhPeriksa
           },
           {
             path: ':pathMatch(.*)*',
@@ -625,7 +620,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
-                component: MaterialTable1
+                component: MaterialDGMYG
               },
               {
                 path: ':pathMatch(.*)*',
@@ -640,7 +635,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Pemakaian Material',
-                component: MaterialTable2
+                component: MaterialRPM
               },
               {
                 path: ':pathMatch(.*)*',