Refactor CSS styles and input components

src/assets/css/style.css

@@ -3285,6 +3285,10 @@ body {
   vertical-align: top !important;
 }
 
+.align-top {
+  vertical-align: top;
+}
+
 .align-middle {
   vertical-align: middle;
 }

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -152,8 +152,7 @@
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
-                    class-name="flex-1 h-[56px]" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -155,7 +155,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>

src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue

@@ -158,17 +158,17 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -183,13 +183,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-  DxColumn,
+    DxColumn,
-  DxExport,
+    DxExport,
-  DxLoadPanel,
+    DxLoadPanel,
-  DxPager,
+    DxPager,
-  DxPaging,
+    DxPaging,
-  DxSearchPanel,
+    DxSearchPanel,
-  DxSelection
+    DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'

src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue

@@ -144,17 +144,17 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -7,7 +7,7 @@
     <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">
+      column-resizing-mode="widget" :word-wrap-enabled="false">
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
       <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
@@ -21,38 +21,38 @@
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Response Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
 
-      <template #data="{ data }">
+      <template #cellLeft="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
@@ -84,13 +84,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -116,16 +115,16 @@
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
         <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-      ? formatWaktu(dataDetail?.durasi_response_time)
+    ? formatWaktu(dataDetail?.durasi_response_time)
-      : '-'
+    : '-'
     " class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
         <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-      ? formatWaktu(dataDetail?.durasi_recovery_time)
+    ? formatWaktu(dataDetail?.durasi_recovery_time)
-      : '-'
+    : '-'
     " class-name="flex-1" />
       </div>
 
@@ -141,8 +140,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
     </div>
   </DetailDialog>
@@ -154,7 +152,7 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -173,6 +171,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -262,4 +261,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
+})
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -7,7 +7,7 @@
     <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">
+      column-resizing-mode="widget" :word-wrap-enabled="false">
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
       <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
@@ -21,42 +21,56 @@
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellRight" />
       <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+        cell-template="cellLeft" />
 
-      <template #data="{ data }">
+      <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -125,7 +139,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -135,8 +149,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -158,7 +171,7 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type10 from '@/components/Form/FiltersType/Type10.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -177,6 +190,8 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -271,4 +286,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
+})
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -7,7 +7,7 @@
     <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">
+      column-resizing-mode="widget" :word-wrap-enabled="false">
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
       <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
@@ -21,39 +21,40 @@
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+        cell-template="cellLeft" />
 
-      <template #data="{ data }">
+      <template #cellLeft="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
+
       <template #data-waktu="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -117,7 +118,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -127,8 +128,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -150,7 +150,7 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -169,6 +169,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -261,4 +262,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
+})
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -7,7 +7,7 @@
     <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">
+      column-resizing-mode="widget" :word-wrap-enabled="false">
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
       <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
@@ -21,39 +21,53 @@
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+        cell-template="cellLeft" />
 
-      <template #data="{ data }">
+      <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #cellRight="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
+    formatNumber(data.text) :
+    data.text }}
+        </p>
+      </template>
+
       <template #data-waktu="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@@ -117,7 +131,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -127,8 +141,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -150,7 +163,7 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -169,6 +182,8 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -262,4 +277,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
+})
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -7,7 +7,7 @@
     <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">
+      column-resizing-mode="widget" :word-wrap-enabled="false">
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
       <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
@@ -21,36 +21,36 @@
       <DxColumn css-class="custom-table-column" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
         css-class="custom-table-column" cell-template="data-waktu" />
       <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+        cell-template="cellLeft" />
 
-      <template #data="{ data }">
+      <template #cellLeft="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
@@ -88,16 +88,16 @@
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
         <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-      ? formatWaktu(dataDetail?.durasi_response_time)
+    ? formatWaktu(dataDetail?.durasi_response_time)
-      : '-'
+    : '-'
     " class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
         <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-      ? formatWaktu(dataDetail?.durasi_recovery_time)
+    ? formatWaktu(dataDetail?.durasi_recovery_time)
-      : '-'
+    : '-'
     " class-name="flex-1" />
       </div>
 
@@ -118,7 +118,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -128,8 +128,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -151,7 +150,7 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -170,6 +169,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -259,4 +259,7 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
+})
 </script>

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -18,41 +18,48 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+      <DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
       <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
+        css-class="custom-table-column !align-top" />
       <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
 
       <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
       <DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
-        css-class="custom-table-column" />
+        css-class="custom-table-column !align-top" cell-template="cellLeft" />
+
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -60,7 +67,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -79,6 +86,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -157,4 +165,8 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
+
+onMounted(() => {
+  data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
+})
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -165,7 +165,7 @@
 
         <div class="flex flex-row justify-between w-full">
           <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
+          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
@@ -175,7 +175,7 @@
 
         <div class="flex flex-row justify-between w-full">
           <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
+          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
@@ -185,12 +185,12 @@
 
         <div class="flex flex-row justify-between w-full">
           <h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
-          <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
+          <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
           <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
-          <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
+          <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
       </div>
     </div>