diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 6af7c74..24f84cb 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -40,11 +40,13 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="50"
+        :width="100"
         alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
+        data-field="no"
+        data-type="number"
       />
       <DxColumn
         :width="170"
@@ -52,6 +54,7 @@
         data-field="media"
         caption="Nama Media"
         css-class="custom-table-column"
+        cell-template="cell-left"
       />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
         <DxColumn
@@ -64,6 +67,34 @@
           css-class="custom-table-column"
         />
       </DxColumn>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Call PLN 123"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          v-for="i in 31"
+          summary-type="sum"
+          display-format="{0}"
+          :column="`tgl${i}`"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
+
+      <template #cell-left="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -72,7 +103,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { ref } from 'vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -82,7 +112,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 2426e3d..4f4ea4b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -45,11 +45,13 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="50"
+        :width="100"
         alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
+        data-type="number"
+        data-field="no"
       />
       <DxColumn
         :width="170"
@@ -57,6 +59,16 @@
         data-field="tanggal_lapor"
         caption="Tanggal Lapor"
         css-class="custom-table-column"
+        cell-template="cell-left"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_uid"
+        caption="Nama UID"
+        css-class="custom-table-column"
+        :group-index="0"
+        v-if="filters.groupBy"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -83,6 +95,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
+            cell-template="percent"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -101,6 +114,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
+            cell-template="percent"
           />
         </DxColumn>
       </DxColumn>
@@ -217,11 +231,130 @@
         </DxColumn>
       </DxColumn>
 
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_selesai"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_selesai"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_inproses"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_inproses"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_recovery"
+          css-class="text-white"
+        />
+      </DxSummary>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+      <template #percent="{ data }">
+        <p>{{ data.text }}%</p>
+      </template>
+      <template #cell-left="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -240,7 +373,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -334,7 +469,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
-const filters = ref()
+const filters = ref({ groupBy: false })
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index b750aa3..1096d8b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -45,18 +45,31 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="50"
+        :width="100"
         alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
+        data-type="number"
+        data-field="no"
       />
+
+      <!-- <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+        :group-index="0"
+      /> -->
+
       <DxColumn
         :width="170"
         alignment="center"
         data-field="nama_ulp"
         caption="Unit"
         css-class="custom-table-column"
+        cell-templete="cell-left"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -83,6 +96,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
+            cell-templete="percent"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -101,6 +115,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
+            cell-templete="percent"
           />
         </DxColumn>
       </DxColumn>
@@ -217,11 +232,257 @@
         </DxColumn>
       </DxColumn>
 
+      <DxSummary>
+        <DxGroupItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_selesai"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_selesai"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_inproses"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_inproses"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_response"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+        <DxGroupItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_recovery"
+          css-class="text-white"
+          :show-in-group-footer="true"
+        />
+
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_selesai"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_selesai"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_inproses"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}%"
+          column="persen_inproses"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_response"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="avg_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="min_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="max_durasi_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_diatas_sla_recovery"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          column="total_dibawah_sla_recovery"
+          css-class="text-white"
+        />
+      </DxSummary>
+
       <template #data-waktu="{ data }">
         <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+      <template #percent="{ data }">
+        <p>{{ data.text }}%</p>
+      </template>
+      <template #cell-left="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -240,7 +501,10 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem,
+  DxGroupItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'