Add cell-template for custom table column***

***Adjust column width for MonalisaLB_KADDalamPelaporan.vue***
***Add new queries for laporan bulanan

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -1,5 +1,10 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -13,7 +18,6 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -41,11 +45,12 @@
 
       <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
         <DxColumn
-          :width="170"
+          :min-width="170"
           alignment="center"
           data-field="nama_ulp"
           caption="Nama Unit"
           css-class="custom-table-column"
+          cell-template="cell-left"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
@@ -115,7 +120,7 @@
         />
       </DxColumn>
       <DxColumn
-        :width="170"
+        :min-width="170"
         alignment="center"
         data-field="avg_aging_complaint"
         data-type="number"
@@ -127,6 +132,11 @@
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
       </template>
+      <template #cell-left="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -152,7 +162,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -196,69 +206,18 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-const agingComplaintBulanan = gql`
-  query agingComplaintBulanan($idUid: Int, $idUp3: Int, $idUlp: Int, $bulan: Int, $tahun: Int) {
-    agingComplaintBulanan(
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_regional
-      id_uid
-      nama_uid
-      id_up3
-      nama_up3
-      id_ulp
-      nama_ulp
-      avg_durasi_recovery_gangguan
-      sla_gangguan
-      avg_durasi_recovery_keluhan
-      sla_keluhan
-      aging_complaint_gangguan
-      aging_complaint_keluhan
-      avg_aging_complaint
-    }
-  }
-`
 
-// const agingComplaintBulanan = gql`
-//   query agingComplaintBulanan(
-//     $regional: String
-//     $idUid: Int
-//     $idUp3: Int
-//     $idUlp: Int
-//     $bulan: Int
-//     $tahun: Int
-//   ) {
-//     agingComplaintBulanan(
-//       regional: $regional
-//       idUid: $idUid
-//       idUp3: $idUp3
-//       idUlp: $idUlp
-//       bulan: $bulan
-//       tahun: $tahun
-//     ) {
-//       aging_komplain_gangguan
-//       aging_komplain_keluhan
-//       nama_posko
-//       persen_rata_aging_komplain
-//       rata_rct_gangguan_bulan
-//       rata_rct_gangguan_sla
-//       rata_rct_keluhan_bulan
-//       rata_rct_keluhan_sla
-//     }
-//   }
-// `
-const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
-  // regional: 0,
-  idUp3: 0,
-  idUid: 0,
-  idUlp: 0,
-  bulan: bulanSekarang.value,
-  tahun: tahunSekarang.value
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.laporan.bulanan.agingComplaintBulanan,
+  {
+    // regional: 0,
+    idUp3: 0,
+    idUid: 0,
+    idUlp: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+  }
+)
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params