apkt-eis/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts

697 lines
20 KiB
TypeScript

import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import {
Document,
AlignmentType,
Packer,
Paragraph,
Table,
TableCell,
TableRow,
VerticalAlign,
TextRun,
WidthType,
PageOrientation
} from 'docx'
import { saveAs } from 'file-saver'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
const reportName = 'Rekapitulasi Keluhan Per Unit'
const fontSize = 5
const detailFontSize = 3
const groupingData = (data: any) => {
const groupedData: any = {}
data.forEach((item: any) => {
const { nama_up3 } = item
if (!groupedData[nama_up3]) {
groupedData[nama_up3] = []
}
groupedData[nama_up3].push(item)
})
return groupedData
}
const formatData = (rawData: any) => {
const data = groupingData(rawData)
const formattedData: any = []
const grandTotal: any = {
total_laporan: 0,
total_laporan_sudah_selesai: 0,
total_laporan_belum_selesai: 0,
total_response_time_total: 0,
total_response_time_rata_rata: [],
total_response_time_max: [],
total_response_time_min: [],
total_response_time_lebih_sla: 0,
total_response_time_kurang_sla: 0,
total_recovery_time_total: 0,
total_recovery_time_rata_rata: [],
total_recovery_time_max: [],
total_recovery_time_min: [],
total_recovery_time_lebih_sla: 0,
total_recovery_time_kurang_sla: 0
}
for (const key of Object.keys(data)) {
const nama_up3 = key
const total: any = {
total_laporan: 0,
total_laporan_sudah_selesai: 0,
total_laporan_belum_selesai: 0,
total_response_time_total: 0,
total_response_time_rata_rata: [],
total_response_time_max: [],
total_response_time_min: [],
total_response_time_lebih_sla: 0,
total_response_time_kurang_sla: 0,
total_recovery_time_total: 0,
total_recovery_time_rata_rata: [],
total_recovery_time_max: [],
total_recovery_time_min: [],
total_recovery_time_lebih_sla: 0,
total_recovery_time_kurang_sla: 0
}
formattedData.push([
{
content: nama_up3,
colSpan: 19,
styles: { fontStyle: 'bold' }
}
])
for (let i = 0; i < data[nama_up3].length; i++) {
formattedData.push([
{ content: i + 1, styles: { halign: 'right' } },
data[nama_up3][i].nama_ulp,
formatNumber(data[nama_up3][i].total),
formatNumber(data[nama_up3][i].total_selesai),
formatPercentage(
!data[nama_up3][i].total || !data[nama_up3][i].total_selesai
? '0%'
: (data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100
),
formatNumber(data[nama_up3][i].total_inproses),
formatPercentage(
!data[nama_up3][i].total_inproses || !data[nama_up3][i].total
? '0%'
: (data[nama_up3][i].total_inproses / data[nama_up3][i].total) * 100
),
formatNumber(data[nama_up3][i].total_durasi_response),
formatNumber(data[nama_up3][i].avg_durasi_response),
formatWaktu(data[nama_up3][i].max_durasi_response),
formatWaktu(data[nama_up3][i].min_durasi_response),
formatNumber(data[nama_up3][i].total_diatas_sla_response),
formatNumber(data[nama_up3][i].total_dibawah_sla_response),
formatNumber(data[nama_up3][i].total_durasi_recovery),
formatNumber(data[nama_up3][i].avg_durasi_recovery),
formatWaktu(data[nama_up3][i].max_durasi_recovery),
formatWaktu(data[nama_up3][i].min_durasi_recovery),
formatNumber(data[nama_up3][i].total_diatas_sla_recovery),
formatNumber(data[nama_up3][i].total_dibawah_sla_recovery)
])
total.total_laporan += data[nama_up3][i].total
total.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
total.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
total.total_response_time_total += data[nama_up3][i].total_durasi_response
total.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
total.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
total.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
total.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
total.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
total.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
total.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
total.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
total.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
total.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
total.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
grandTotal.total_laporan += data[nama_up3][i].total
grandTotal.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
grandTotal.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
grandTotal.total_response_time_total += data[nama_up3][i].total_durasi_response
grandTotal.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
grandTotal.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
grandTotal.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
grandTotal.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
grandTotal.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
grandTotal.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
grandTotal.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
grandTotal.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
grandTotal.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
grandTotal.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
grandTotal.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
}
formattedData.push([
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
formatNumber(total.total_laporan),
formatNumber(total.total_laporan_sudah_selesai),
formatPercentage(
!total.total_laporan_sudah_selesai || !total.total_laporan
? '0%'
: (total.total_laporan_sudah_selesai / total.total_laporan) * 100
),
formatNumber(total.total_laporan_belum_selesai),
formatPercentage(
!total.total_laporan_belum_selesai || !total.total_laporan
? '0%'
: (total.total_laporan_belum_selesai / total.total_laporan) * 100
),
formatNumber(total.total_response_time_total),
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
formatWaktu(Math.min(...total.total_response_time_min)),
formatNumber(total.total_response_time_lebih_sla),
formatNumber(total.total_response_time_kurang_sla),
formatNumber(total.total_recovery_time_total),
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
formatWaktu(Math.min(...total.total_recovery_time_min)),
formatNumber(total.total_recovery_time_lebih_sla),
formatNumber(total.total_recovery_time_kurang_sla)
])
}
formattedData.push([
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
formatNumber(grandTotal.total_laporan),
formatNumber(grandTotal.total_laporan_sudah_selesai),
formatPercentage(
!grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
? '0%'
: (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
),
formatNumber(grandTotal.total_laporan_belum_selesai),
formatPercentage(
!grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
? '0%'
: (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
),
formatNumber(grandTotal.total_response_time_total),
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
formatNumber(grandTotal.total_response_time_lebih_sla),
formatNumber(grandTotal.total_response_time_kurang_sla),
formatNumber(grandTotal.total_recovery_time_total),
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
formatNumber(grandTotal.total_recovery_time_lebih_sla),
formatNumber(grandTotal.total_recovery_time_kurang_sla)
])
return formattedData
}
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.periode ? reportMeta.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('id-ID', {
month: 'long'
})}-${dateFrom.getFullYear()}`
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
month: 'long'
})}-${dateTo.getFullYear()}`
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
}
return { dateFromFormat, dateToFormat, dayTo }
}
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
const data = formatData(rawData)
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
[`${reportName}`.toUpperCase()],
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 23
})
autoTable(doc, {
head: [
[
{
content: 'No',
rowSpan: 3
},
{
content: 'Unit',
rowSpan: 3
},
{
content: 'Laporan',
colSpan: 5
},
{
content: 'Response Time',
colSpan: 6
},
{
content: 'Penyelesaian',
colSpan: 6
}
],
[
{
content: 'Total',
rowSpan: 2
},
{
content: 'Sudah Selesai',
colSpan: 2
},
{
content: 'Belum Selesai',
colSpan: 2
},
{
content: 'Hari',
colSpan: 4
},
{
content: 'Laporan',
colSpan: 2
},
{
content: 'Hari',
colSpan: 4
},
{
content: 'Laporan',
colSpan: 2
}
],
[
'Jml',
'%',
'Jml',
'%',
'Total',
'Rata-Rata',
'Max',
'Min',
'>Sla',
'<Sla',
'Total',
'Rata-Rata',
'Max',
'Min',
'>Sla',
'<Sla'
]
],
body: data,
styles: {
fontSize,
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',
valign: 'middle'
},
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()
})
}
if (data.cell.text[0] === 'TOTAL') {
for (const key in data.row.cells) {
data.row.cells[key].styles.fillColor = [192, 192, 192]
data.row.cells[key].styles.fontStyle = 'bold'
}
}
if (data.cell.text[0] === 'GRAND TOTAL') {
for (const key in data.row.cells) {
data.row.cells[key].styles.fillColor = [192, 192, 192]
data.row.cells[key].styles.fontStyle = 'bold'
}
}
},
startY: 30
})
autoTable(doc, {
head: [
[`${meta.dayTo}, ${meta.dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
if (preview) {
doc.setProperties({
title: `${reportName}`
})
window.open(doc.output('bloburl'))
} else {
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
}
}
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [['PT. PLN(Persero)']],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10,
margin: 5
})
autoTable(doc, {
head: [
[`Daftar Detail ${reportName}`.toUpperCase()],
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18,
margin: 5
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Dalam Proses Bidang',
'Selesai Bidang Unit',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Rayon',
'Uraian',
'Response Pelanggan'
]
],
body: rawData.map((item: any, i: any) => [
{ content: i + 1, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
item.durasi_response_time,
item.durasi_recovery_time,
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.nama_ulp,
item.uraian,
item.respon_pelanggan
]),
styles: {
fontSize: detailFontSize,
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',
valign: 'middle'
},
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: 24,
margin: 5
})
autoTable(doc, {
head: [
[`${meta.dayTo}, ${meta.dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: detailFontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
}
const exportToXLSX = (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(worksheet, 5, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
6,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:S1')
worksheet.mergeCells('A2:S2')
worksheet.mergeCells('A3:S3')
worksheet.mergeCells('A5:S5')
worksheet.mergeCells('A6:S6')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 8, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportDetailToXLSX = (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
4,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:P1')
worksheet.mergeCells('A3:P3')
worksheet.mergeCells('A4:P4')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
`Laporan Detail ${reportName}.xlsx`
)
})
})
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }