update

src/assets/css/style.css

@@ -962,6 +962,10 @@ select {
   z-index: 50;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .order-last {
   order: 9999;
 }

src/components/DatePicker.vue

@@ -11,20 +11,12 @@
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker 
+    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator="   s/d   " :shortcuts="false"
-      v-model="dateValue"
+      :auto-apply="false" v-slot="{ value, placeholder }">
-      :formatter="formatter"
-      separator="   s/d   "
-      :shortcuts="false"
-      :auto-apply="false"
-      v-slot="{ value, placeholder }"
-    >
       <div class="flex">
         <div class="flex-1">
-          <button
+          <button type="button"
-            type="button"
+            class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
-            class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>

src/components/Form/FiltersType/index.ts

@@ -0,0 +1,17 @@
+export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
+export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
+export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
+export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
+export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
+export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
+export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
+export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
+export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
+export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
+export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
+export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
+export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
+export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
+export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
+export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
+export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'

src/components/Pages/Gangguan/Table_9.vue

@@ -67,13 +67,18 @@
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
+
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="" summary-type="sum" value-format="number"
+                    display-format="Total: {0}" />
+            </DxSummary>
         </DxDataGrid>
     </div>
 </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 { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } 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'
@@ -114,4 +119,47 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = [
+    {
+        no: 1,
+        kode: 'A',
+        jenisGangguan: 'Gangguan A',
+        laporan: {
+            total: 10,
+            sudahSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+            belumSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+        },
+        responseTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        },
+        recoveryTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        }
+    },
+]
+
 </script>