Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj

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

@@ -228,6 +228,7 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
 const filterData = (params: any) => {
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -240,20 +241,45 @@ const filterData = (params: any) => {
     idUp3: up3 ? up3.id : 0,
     media: media ? media.id : ''
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanBerdasarkanMedia
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -261,7 +287,66 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'POSKO',
+          ':',
+          reportMeta.value.posko
+            ? reportMeta.value.posko.name.toUpperCase()
+            : 'Semua Posko'.toUpperCase()
+        ],
+        [
+          'MEDIA',
+          ':',
+          reportMeta.value.media
+            ? reportMeta.value.media.name.toUpperCase()
+            : 'Semua Media'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Gangguan Berdasarkan Media'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Nama Pelapor',
           'Alamat Pelapor',
@@ -278,7 +363,8 @@ const onExporting = (e: any) => {
           'Keterangan Media'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item, i) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.nama_pelapor,
         item.alamat_pelapor,
@@ -288,18 +374,65 @@ const onExporting = (e: any) => {
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.nama_posko,
         item.waktu_media,
         item.keterangan_media
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Gangguan Berdasarkan Media.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Gangguan Berdasarkan Media.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Berdasarkan Media')
@@ -322,6 +455,14 @@ const onExporting = (e: any) => {
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  media: { id: '', name: 'Semua Media' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia

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

@@ -484,8 +484,8 @@ const onExporting = (e: any) => {
         item.waktu_dialihkan,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.nama_posko_lama,
         item.nama_posko_baru,
         item.status_akhir,

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

@@ -242,20 +242,45 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3?.id ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -263,7 +288,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'POSKO',
+          ':',
+          reportMeta.value.posko
+            ? reportMeta.value.posko.name.toUpperCase()
+            : 'Semua Posko'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Gangguan Diselesaikan Mobile APKT'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -280,13 +357,14 @@ const onExporting = (e: any) => {
           'Posko'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item, i) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.idpel_nometer,
         item.nama_pelapor,
@@ -297,11 +375,60 @@ const onExporting = (e: any) => {
         item.nama_posko
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Gangguan Diselesaikan Mobile APKT.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Gangguan Diselesaikan Mobile APKT.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Diselesaikan Mobile APKT')
@@ -324,6 +451,13 @@ const onExporting = (e: any) => {
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT

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

@@ -506,8 +506,8 @@ const onExporting = (e: any) => {
         item.waktu_response,
         item.waktu_recovery,
         item.jumlah_lapor,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.idpel_nometer,
         item.nama_pelapor,

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

@@ -370,9 +370,8 @@ const closeDetail = () => (showDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
-  console.table(params)
-
   const dateValue = params.periode.split(' s/d ')
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -386,19 +385,55 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanRecoveryTime
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '46' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>45 Menit)'
+  } else if (minTime == '1' && maxTime == '45') {
+    durasi = 'Dibawah / Sesuai SLA (<=45 Menit)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -406,7 +441,60 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'POSKO',
+          ':',
+          reportMeta.value.posko
+            ? reportMeta.value.posko.name.toUpperCase()
+            : 'Semua Posko'.toUpperCase()
+        ],
+        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Gangguan Recovery Time'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -423,13 +511,14 @@ const onExporting = (e: any) => {
           'Posko'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item, i) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.referensi_marking,
         item.idpel_nometer,
@@ -440,11 +529,58 @@ const onExporting = (e: any) => {
         item.nama_posko
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Gangguan Recovery Time.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Gangguan Recovery Time.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Recovery Time')
@@ -477,6 +613,15 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
 })
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.gangguanRecoveryTime

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

@@ -348,6 +348,7 @@ const closeDetail = () => (showDetail.value = false)
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -361,13 +362,17 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanResponseTime
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
@@ -384,6 +389,38 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
 })
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '46' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>45 Menit)'
+  } else if (minTime == '1' && maxTime == '45') {
+    durasi = 'Dibawah / Sesuai SLA (<=45 Menit)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -391,7 +428,60 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'POSKO',
+          ':',
+          reportMeta.value.posko
+            ? reportMeta.value.posko.name.toUpperCase()
+            : 'Semua Posko'.toUpperCase()
+        ],
+        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Gangguan Response Time'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -408,13 +498,14 @@ const onExporting = (e: any) => {
           'Posko'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item, i) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.referensi_marking,
         item.idpel_nometer,
@@ -425,11 +516,58 @@ const onExporting = (e: any) => {
         item.nama_posko
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Gangguan Response Time.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Gangguan Response Time.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Response Time')
@@ -452,6 +590,15 @@ const onExporting = (e: any) => {
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.gangguanResponseTime

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

@@ -230,6 +230,7 @@ const { onResult, onError, loading, refetch } = useQuery(
 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('-')
@@ -241,20 +242,45 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -262,7 +288,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'POSKO',
+          ':',
+          reportMeta.value.posko
+            ? reportMeta.value.posko.name.toUpperCase()
+            : 'Semua Posko'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Gangguan Selesai Tanpa ID Pelanggan'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -279,13 +357,14 @@ const onExporting = (e: any) => {
           'Posko'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item, i) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.idpel_nometer,
         item.nama_pelapor,
@@ -296,11 +375,60 @@ const onExporting = (e: any) => {
         item.nama_posko
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Gangguan Selesai Tanpa ID Pelanggan.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Gangguan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Selesai Tanpa ID Pelanggan')
@@ -323,6 +451,13 @@ const onExporting = (e: any) => {
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan

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

@@ -337,6 +337,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -344,7 +365,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Berdasarkan Media'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Nama Pelapor',
           'Alamat Pelapor',
@@ -361,7 +434,8 @@ const onExporting = (e: any) => {
           'Keterangan Media'
         ]
       ],
-      body: data.value.map((item) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.nama_pelapor,
         item.alamat_pelapor,
@@ -378,11 +452,58 @@ const onExporting = (e: any) => {
         item.keterangan_media
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Berdasarkan Media.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Keluhan Berdasarkan Media.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media')
@@ -420,6 +541,7 @@ const { onResult, onError, loading, refetch } = useQuery(
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -436,16 +558,26 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia

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

@@ -236,6 +236,27 @@ const shading = ref(true)
 const showPane = ref(true)
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -243,7 +264,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Pembuat Laporan',
           'Tgl Lapor',
@@ -261,15 +334,16 @@ const onExporting = (e: any) => {
           'Keterangan Pelapor'
         ]
       ],
-      body: data.value.map((item: any) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.pembuat_laporan,
         item.waktu_lapor,
         item.waktu_dialihkan,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.nama_unit_lama,
         item.status_akhir,
         item.idpel_nometer,
@@ -279,11 +353,60 @@ const onExporting = (e: any) => {
         item.keterangan_pelapor
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Dialihkan Ke Unit Lain.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Keluhan Dialihkan Ke Unit Lain.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain')
@@ -342,6 +465,8 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
@@ -353,6 +478,13 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain

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

@@ -362,6 +362,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -369,7 +390,60 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ],
+        ['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Pelanggan Lebih Dari 1 Kali'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -387,14 +461,15 @@ const onExporting = (e: any) => {
           'Nama ULP'
         ]
       ],
-      body: data.value.map((item: any) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
         item.jumlah_lapor,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.idpel_nometer,
         item.nama_pelapor,
@@ -405,11 +480,60 @@ const onExporting = (e: any) => {
         item.nama_ulp
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali')
@@ -451,6 +575,7 @@ const filterData = (params: any) => {
   const { ulp, uid, up3 } = params
   const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
   const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
+
   refetch({
     minJmlLapor: minJmlLapor,
     maxJmlLapor: maxJmlLapor,
@@ -464,20 +589,33 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  minJmlLapor: 1,
+  maxJmlLapor: 1,
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali

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

@@ -7,12 +7,12 @@
           id: 1,
           name: 'Dibawah  / Sesuai SLA (<= 3 hari)',
           min: '1',
-          max: '4320'
+          max: '4381'
         },
         {
           id: 2,
           name: 'Melebihi SLA (> 3 hari)',
-          min: '46',
+          min: '4382',
           max: `${99999 * 60 * 24}`
         }
       ]"
@@ -339,6 +339,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '4382' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>3 hari)'
+  } else if (minTime == '1' && maxTime == '4381') {
+    durasi = 'Dibawah / Sesuai SLA (<=3 hari)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -346,7 +378,60 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ],
+        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Recovery Time'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -362,27 +447,75 @@ const onExporting = (e: any) => {
           'Nama ULP'
         ]
       ],
-      body: data.value.map((i) => [
+      body: data.value.map((item: any, i: any) => [
-        i.no_laporan,
+        { content: ++i, styles: { halign: 'right' } },
-        i.waktu_lapor,
+        item.no_laporan,
-        i.waktu_response,
+        item.waktu_lapor,
-        i.waktu_recovery,
+        item.waktu_response,
-        parseInt(i.durasi_response_time) ? formatWaktu(i.durasi_response_time) : '-',
+        item.waktu_recovery,
-        parseInt(i.durasi_recovery_time) ? formatWaktu(i.durasi_recovery_time) : '-',
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        i.status_akhir,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        i.idpel_nometer,
+        item.status_akhir,
-        i.nama_pelapor,
+        item.idpel_nometer,
-        i.alamat_pelapor,
+        item.nama_pelapor,
-        i.no_telp_pelapor,
+        item.alamat_pelapor,
-        i.keterangan_pelapor,
+        item.no_telp_pelapor,
-        i.nama_ulp
+        item.keterangan_pelapor,
+        item.nama_ulp
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Recovery Time.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Keluhan Recovery Time.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time')
@@ -422,6 +555,7 @@ const { onResult, onError, loading, refetch } = useQuery(
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -435,20 +569,33 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanRecoveryTime
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime

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

@@ -7,12 +7,12 @@
           id: 1,
           name: 'Dibawah  / Sesuai SLA (<= 1 hari)',
           min: '1',
-          max: '1440'
+          max: '1501'
         },
         {
           id: 2,
           name: 'Melebihi SLA (> 1 hari)',
-          min: '46',
+          min: '1502',
           max: `${99999 * 60 * 24}`
         }
       ]"
@@ -358,6 +358,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '1502' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>1 hari)'
+  } else if (minTime == '1' && maxTime == '1501') {
+    durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -365,7 +397,60 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ],
+        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Response Time'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -381,13 +466,14 @@ const onExporting = (e: any) => {
           'Nama ULP'
         ]
       ],
-      body: data.value.map((item: any) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
         item.waktu_recovery,
-        item.durasi_response_time,
+        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        item.durasi_recovery_time,
+        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
         item.status_akhir,
         item.idpel_nometer,
         item.nama_pelapor,
@@ -397,11 +483,58 @@ const onExporting = (e: any) => {
         item.nama_ulp
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Response Time.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc.save('Laporan Daftar Keluhan Response Time.pdf', { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time')
@@ -441,6 +574,7 @@ const { onResult, onError, loading, refetch } = useQuery(
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, maxTime, minTime } = params
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -459,16 +593,28 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanResponseTime
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime

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

@@ -330,6 +330,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -337,7 +358,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Selesai Tanpa ID Pelanggan'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Tgl Lapor',
           'Tgl Response',
@@ -354,7 +427,8 @@ const onExporting = (e: any) => {
           'Nama ULP'
         ]
       ],
-      body: data.value.map((item: any) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
@@ -371,11 +445,60 @@ const onExporting = (e: any) => {
         item.nama_ulp
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan')
@@ -413,6 +536,7 @@ const { onResult, onError, loading, refetch } = useQuery(
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -429,16 +553,26 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
 
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan

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

@@ -223,6 +223,27 @@ const shading = ref(true)
 const showPane = ref(true)
 
 const onExporting = (e: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape'
@@ -230,7 +251,59 @@ const onExporting = (e: any) => {
 
     autoTable(doc, {
       head: [
+        ['PT. PLN(Persero)', '', ''],
         [
+          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+          { content: ':', styles: { cellWidth: 1 } },
+          reportMeta.value.uid
+            ? reportMeta.value.uid.name.toUpperCase()
+            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+        ],
+        [
+          'UNIT PELAKSANA PELAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.up3
+            ? reportMeta.value.up3.name.toUpperCase()
+            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+        ],
+        [
+          'UNIT LAYANAN PELANGGAN',
+          ':',
+          reportMeta.value.ulp
+            ? reportMeta.value.ulp.name.toUpperCase()
+            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold'
+      },
+      theme: 'plain',
+      startY: 10
+    })
+
+    autoTable(doc, {
+      head: [
+        ['Daftar Keluhan Selesai di Contact Center'.toUpperCase()],
+        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      startY: 18
+    })
+
+    autoTable(doc, {
+      head: [
+        [
+          'No',
           'No Laporan',
           'Contact Center',
           'UI Dist.',
@@ -249,7 +322,8 @@ const onExporting = (e: any) => {
           'Sub Issue Type'
         ]
       ],
-      body: data.value.map((item: any) => [
+      body: data.value.map((item: any, i: any) => [
+        { content: ++i, styles: { halign: 'right' } },
         item.no_laporan,
         item.nama_ulp,
         item.nama_uid,
@@ -268,11 +342,60 @@ const onExporting = (e: any) => {
         item.nama_subissuetype
       ]),
       styles: {
-        fontSize: 4
+        fontSize: 3,
-      }
+        cellPadding: 1,
+        lineColor: [0, 0, 0],
+        lineWidth: 0.1,
+        cellWidth: 'auto'
+      },
+      rowPageBreak: 'auto',
+      headStyles: {
+        fillColor: [192, 192, 192],
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        cellWidth: 'wrap',
+        halign: 'center'
+      },
+      bodyStyles: {
+        textColor: [0, 0, 0]
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'head') {
+          data.cell.text = data.cell.text.map(function (word: any) {
+            return word.toUpperCase()
+          })
+        }
+      },
+      startY: 23
     })
 
-    doc.save('Daftar Keluhan Selesai di Contact Center.pdf')
+    autoTable(doc, {
+      head: [
+        [`${dayTo}, ${dateToFormat}`],
+        [
+          {
+            content: '(.........................................)',
+            styles: { minCellHeight: 8, valign: 'bottom' }
+          }
+        ]
+      ],
+      styles: {
+        fontSize: 3,
+        cellPadding: 0.1,
+        textColor: [0, 0, 0],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      theme: 'plain',
+      tableWidth: 50,
+      margin: { left: 230 }
+    })
+
+    doc
+      .save('Laporan Daftar Keluhan Selesai di Contact Center.pdf', { returnPromise: true })
+      .then(() => {
+        console.log('pdf berhasil disimpan')
+      })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center')
@@ -312,11 +435,17 @@ const { onResult, onError, loading, refetch } = useQuery(
   }
 )
 const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
-  const media = params.media ? params.media.id : ''
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -333,10 +462,13 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
     }
+
+    reportMeta.value = filters.value
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })