pecintaseni
3 months ago
committed by
=
37 changed files with 285745 additions and 277 deletions
@ -0,0 +1,574 @@
|
||||
<?php |
||||
namespace App\Controllers\Kewilayahan\Monitoring; |
||||
|
||||
use App\Libraries\AldLibrary; |
||||
use CodeIgniter\API\ResponseTrait; |
||||
use CodeIgniter\Controller; |
||||
use DateTime; |
||||
use DateTimeZone; |
||||
|
||||
class PerubahanPerilaku extends Controller |
||||
{ |
||||
|
||||
use ResponseTrait; |
||||
public function __construct() |
||||
{ |
||||
|
||||
$kppadm = session('kppadm'); |
||||
if (!in_array($kppadm, ['000'])) { |
||||
// exit; |
||||
} |
||||
|
||||
} |
||||
|
||||
public function index() |
||||
{ |
||||
if (session('isLogin')) { |
||||
echo view('inc/head'); |
||||
echo view('inc/navbar'); |
||||
echo view('inc/sidebar'); |
||||
echo view('kewilayahan/monitoringPerubahanPerilaku/monitoring'); |
||||
echo view('inc/footer'); |
||||
} else { |
||||
return redirect()->to('auth'); |
||||
} |
||||
} |
||||
|
||||
public function penambahananwpbayar() |
||||
{ |
||||
$config = config(\Config\App::class, false); |
||||
|
||||
$Ald = new AldLibrary; |
||||
$username = session('nip'); |
||||
$kpp = []; |
||||
foreach ($this->request->getPost('kpp') ?? [] as $key => $value) { |
||||
$kpp[] = $Ald->decryptMe($value, $username); |
||||
} |
||||
|
||||
$tahun = $this->request->getPost('tahun'); |
||||
// $thn = new DateTime($tahun); |
||||
// $thn->setTimezone(new DateTimeZone($config->appTimezone)); |
||||
// print_r($tahun); |
||||
// exit; |
||||
$db = \Config\Database::connect(); |
||||
|
||||
$sql = "select C.KODE||'-'|| B.KD_KPP ||'-'||A.KD_UNIT_ORGANISASI ||'-'|| A.NIP9 AS KODE_PEG, |
||||
C.KODE as KD_KANWIL, B.KD_KPP as KPPADM, A.KD_UNIT_ORGANISASI as KODE_SEKSI, NIP9 as NIP_AR, |
||||
C.NAMA as NAMA_KANWIL , B.NM_KANTOR as NAMA_KANTOR , A.NAMA_UNIT_ES4 , A.NAMA as NAMA_PEGAWAI, |
||||
COALESCE (BLN_1, 0) BLN_1, |
||||
COALESCE (BLN_2, 0) BLN_2, |
||||
COALESCE (BLN_3, 0) BLN_3, |
||||
COALESCE (BLN_4, 0) BLN_4, |
||||
COALESCE (BLN_5, 0) BLN_5, |
||||
COALESCE (BLN_6, 0) BLN_6, |
||||
COALESCE (BLN_7, 0) BLN_7, |
||||
COALESCE (BLN_8, 0) BLN_8, |
||||
COALESCE (BLN_9, 0) BLN_9, |
||||
COALESCE (BLN_10, 0) BLN_10, |
||||
COALESCE (BLN_11, 0) BLN_11, |
||||
COALESCE (BLN_12, 0) BLN_12 |
||||
FROM PEGAWAI A |
||||
LEFT JOIN REF_KPP B ON |
||||
(A.KPPADM = B.KD_KPP) |
||||
LEFT JOIN REF_KANWIL C ON |
||||
(B.KD_KANWIL = C.KODE) |
||||
LEFT JOIN |
||||
( |
||||
SELECT |
||||
NIP_AR_PENGAMPU , |
||||
sum(CASE WHEN POSISI_BULAN =1 THEN 1 ELSE 0 END) AS BLN_1, |
||||
sum(CASE WHEN POSISI_BULAN =2 THEN 1 ELSE 0 END) AS BLN_2, |
||||
sum(CASE WHEN POSISI_BULAN =3 THEN 1 ELSE 0 END) AS BLN_3, |
||||
sum(CASE WHEN POSISI_BULAN =4 THEN 1 ELSE 0 END) AS BLN_4, |
||||
sum(CASE WHEN POSISI_BULAN =5 THEN 1 ELSE 0 END) AS BLN_5, |
||||
sum(CASE WHEN POSISI_BULAN =6 THEN 1 ELSE 0 END) AS BLN_6, |
||||
sum(CASE WHEN POSISI_BULAN =7 THEN 1 ELSE 0 END) AS BLN_7, |
||||
sum(CASE WHEN POSISI_BULAN =8 THEN 1 ELSE 0 END) AS BLN_8, |
||||
sum(CASE WHEN POSISI_BULAN =9 THEN 1 ELSE 0 END) AS BLN_9, |
||||
sum(CASE WHEN POSISI_BULAN =10 THEN 1 ELSE 0 END) AS BLN_10, |
||||
sum(CASE WHEN POSISI_BULAN = 11 THEN 1 ELSE 0 END) AS BLN_11, |
||||
sum(CASE WHEN POSISI_BULAN = 12 THEN 1 ELSE 0 END) AS BLN_12 |
||||
FROM kpdl_mv_penambahan_wp_byr a |
||||
WHERE POSISI_TAHUN = :tahun: |
||||
GROUP BY NIP_AR_PENGAMPU |
||||
) D ON (A.NIP9 = D.NIP_AR_PENGAMPU) |
||||
WHERE (A.KD_UNIT_ORGANISASI BETWEEN '0421071700' AND '0421072200' OR A.KD_UNIT_ORGANISASI BETWEEN '0424071800' AND '0424072300') |
||||
AND A.KPPADM in :kpp: |
||||
ORDER BY KODE_PEG"; |
||||
$data = $db->query($sql, [ |
||||
'tahun' => $tahun, |
||||
'kpp' => $kpp, |
||||
])->getResultArray(); |
||||
// print_r($data); |
||||
// helper('array'); |
||||
$groupingData = array_group_by($data, ['KD_KANWIL', 'KPPADM', 'KODE_SEKSI']); |
||||
// print_r($groupingData); |
||||
// exit; |
||||
$bentukanArray = []; |
||||
$data1 = []; |
||||
foreach ($groupingData as $key1 => $value1) { //kanwil |
||||
$data1['KEY_LABEL'] = $key1; |
||||
$data1['LABEL'] = ''; |
||||
$data1['BLN_1'] = 0; |
||||
$data1['BLN_2'] = 0; |
||||
$data1['BLN_3'] = 0; |
||||
$data1['BLN_4'] = 0; |
||||
$data1['BLN_5'] = 0; |
||||
$data1['BLN_6'] = 0; |
||||
$data1['BLN_7'] = 0; |
||||
$data1['BLN_8'] = 0; |
||||
$data1['BLN_9'] = 0; |
||||
$data1['BLN_10'] = 0; |
||||
$data1['BLN_11'] = 0; |
||||
$data1['BLN_12'] = 0; |
||||
$data1['TOTAL'] = 0; |
||||
$data1['subRows'] = []; |
||||
|
||||
$data2 = []; |
||||
foreach ($value1 as $key2 => $value2) { //kpp |
||||
$data2['KEY_LABEL'] = $key1 . '-' . $key2; |
||||
$data2['LABEL'] = ''; |
||||
$data2['BLN_1'] = 0; |
||||
$data2['BLN_2'] = 0; |
||||
$data2['BLN_3'] = 0; |
||||
$data2['BLN_4'] = 0; |
||||
$data2['BLN_5'] = 0; |
||||
$data2['BLN_6'] = 0; |
||||
$data2['BLN_7'] = 0; |
||||
$data2['BLN_8'] = 0; |
||||
$data2['BLN_9'] = 0; |
||||
$data2['BLN_10'] = 0; |
||||
$data2['BLN_11'] = 0; |
||||
$data2['BLN_12'] = 0; |
||||
$data2['TOTAL'] = 0; |
||||
$data2['subRows'] = []; |
||||
|
||||
$data3 = []; |
||||
foreach ($value2 as $key3 => $value3) { //seksi |
||||
$data3['KEY_LABEL'] = $key1 . '-' . $key3; |
||||
$data3['LABEL'] = ''; |
||||
$data3['BLN_1'] = 0; |
||||
$data3['BLN_2'] = 0; |
||||
$data3['BLN_3'] = 0; |
||||
$data3['BLN_4'] = 0; |
||||
$data3['BLN_5'] = 0; |
||||
$data3['BLN_6'] = 0; |
||||
$data3['BLN_7'] = 0; |
||||
$data3['BLN_8'] = 0; |
||||
$data3['BLN_9'] = 0; |
||||
$data3['BLN_10'] = 0; |
||||
$data3['BLN_11'] = 0; |
||||
$data3['BLN_12'] = 0; |
||||
$data3['TOTAL'] = 0; |
||||
$data3['subRows'] = []; |
||||
|
||||
$data4 = []; |
||||
foreach ($value3 as $key4 => $value4) { //AR |
||||
$data4['KEY_LABEL'] = $value4['KODE_PEG']; |
||||
$data4['LABEL'] = $value4['NAMA_PEGAWAI']; |
||||
$data4['BLN_1'] = (float) $value4['BLN_1']; |
||||
$data4['BLN_2'] = (float) $value4['BLN_2']; |
||||
$data4['BLN_3'] = (float) $value4['BLN_3']; |
||||
$data4['BLN_4'] = (float) $value4['BLN_4']; |
||||
$data4['BLN_5'] = (float) $value4['BLN_5']; |
||||
$data4['BLN_6'] = (float) $value4['BLN_6']; |
||||
$data4['BLN_7'] = (float) $value4['BLN_7']; |
||||
$data4['BLN_8'] = (float) $value4['BLN_8']; |
||||
$data4['BLN_9'] = (float) $value4['BLN_9']; |
||||
$data4['BLN_10'] = (float) $value4['BLN_10']; |
||||
$data4['BLN_11'] = (float) $value4['BLN_11']; |
||||
$data4['BLN_12'] = (float) $value4['BLN_12']; |
||||
|
||||
$data4['TOTAL'] = (float) $value4['BLN_1'] + |
||||
(float) $value4['BLN_1'] + |
||||
(float) $value4['BLN_2'] + |
||||
(float) $value4['BLN_3'] + |
||||
(float) $value4['BLN_4'] + |
||||
(float) $value4['BLN_5'] + |
||||
(float) $value4['BLN_6'] + |
||||
(float) $value4['BLN_7'] + |
||||
(float) $value4['BLN_8'] + |
||||
(float) $value4['BLN_9'] + |
||||
(float) $value4['BLN_10'] + |
||||
(float) $value4['BLN_11'] + |
||||
(float) $value4['BLN_12']; |
||||
|
||||
foreach ($value4 as $key5 => $value5) { |
||||
$data4[$key5] = $value5; |
||||
} |
||||
|
||||
$data3['LABEL'] = $value4['NAMA_UNIT_ES4']; |
||||
$data3['NAMA_KANTOR'] = $value4['NAMA_KANTOR']; |
||||
$data2['LABEL'] = $value4['NAMA_KANTOR']; |
||||
$data1['LABEL'] = $value4['NAMA_KANWIL']; |
||||
|
||||
$data3['BLN_1'] += (float) $data4['BLN_1']; |
||||
$data3['BLN_2'] += (float) $data4['BLN_2']; |
||||
$data3['BLN_3'] += (float) $data4['BLN_3']; |
||||
$data3['BLN_4'] += (float) $data4['BLN_4']; |
||||
$data3['BLN_5'] += (float) $data4['BLN_5']; |
||||
$data3['BLN_6'] += (float) $data4['BLN_6']; |
||||
$data3['BLN_7'] += (float) $data4['BLN_7']; |
||||
$data3['BLN_8'] += (float) $data4['BLN_8']; |
||||
$data3['BLN_9'] += (float) $data4['BLN_9']; |
||||
$data3['BLN_10'] += (float) $data4['BLN_10']; |
||||
$data3['BLN_11'] += (float) $data4['BLN_11']; |
||||
$data3['BLN_12'] += (float) $data4['BLN_12']; |
||||
$data3['TOTAL'] += (float) $data4['TOTAL']; |
||||
// $data3['JUMLAH_AR'] += ($value4['ISEXIST_INWAS'] == 'TRUE' && $value4['NAMA_JABATAN'] == 'Account Representative' ? 1 : 0); |
||||
array_push($data3['subRows'], $data4); |
||||
} |
||||
// $data3['RATA_RATA'] = $data3['JUMLAH_AR'] == 0 ? 0 : $data3['JUMLAH'] / $data3['JUMLAH_AR']; |
||||
$data2['BLN_1'] += (float) $data3['BLN_1']; |
||||
$data2['BLN_2'] += (float) $data3['BLN_2']; |
||||
$data2['BLN_3'] += (float) $data3['BLN_3']; |
||||
$data2['BLN_4'] += (float) $data3['BLN_4']; |
||||
$data2['BLN_5'] += (float) $data3['BLN_5']; |
||||
$data2['BLN_6'] += (float) $data3['BLN_6']; |
||||
$data2['BLN_7'] += (float) $data3['BLN_7']; |
||||
$data2['BLN_8'] += (float) $data3['BLN_8']; |
||||
$data2['BLN_9'] += (float) $data3['BLN_9']; |
||||
$data2['BLN_10'] += (float) $data3['BLN_10']; |
||||
$data2['BLN_11'] += (float) $data3['BLN_11']; |
||||
$data2['BLN_12'] += (float) $data3['BLN_12']; |
||||
$data2['TOTAL'] += (float) $data3['TOTAL']; |
||||
// $data2['JUMLAH_AR'] += $data3['JUMLAH_AR']; |
||||
array_push($data2['subRows'], $data3); |
||||
} |
||||
// $data2['RATA_RATA'] = $data2['JUMLAH_AR'] == 0 ? 0 : $data2['JUMLAH'] / $data2['JUMLAH_AR']; |
||||
$data1['BLN_1'] += (float) $data2['BLN_1']; |
||||
$data1['BLN_2'] += (float) $data2['BLN_2']; |
||||
$data1['BLN_3'] += (float) $data2['BLN_3']; |
||||
$data1['BLN_4'] += (float) $data2['BLN_4']; |
||||
$data1['BLN_5'] += (float) $data2['BLN_5']; |
||||
$data1['BLN_6'] += (float) $data2['BLN_6']; |
||||
$data1['BLN_7'] += (float) $data2['BLN_7']; |
||||
$data1['BLN_8'] += (float) $data2['BLN_8']; |
||||
$data1['BLN_9'] += (float) $data2['BLN_9']; |
||||
$data1['BLN_10'] += (float) $data2['BLN_10']; |
||||
$data1['BLN_11'] += (float) $data2['BLN_11']; |
||||
$data1['BLN_12'] += (float) $data2['BLN_12']; |
||||
$data1['TOTAL'] += (float) $data2['TOTAL']; |
||||
// $data1['JUMLAH_AR'] += $data2['JUMLAH_AR']; |
||||
array_push($data1['subRows'], $data2); |
||||
} |
||||
// $data1['RATA_RATA'] = $data1['JUMLAH_AR'] == 0 ? 0 : $data1['JUMLAH'] / $data1['JUMLAH_AR']; |
||||
array_push($bentukanArray, $data1); |
||||
} |
||||
$dataReturn['data'] = $bentukanArray; |
||||
// $tempData = $bentukanArray; |
||||
$dataChart = $this->urutKanwil($bentukanArray); |
||||
$dataReturn['urutKanwil'] = $dataChart['urutKanwil']; |
||||
$dataReturn['urutKpp'] = $dataChart['urutKpp']; |
||||
$dataReturn['urutSeksi'] = $dataChart['urutSeksi']; |
||||
$dataReturn['urutPegawai'] = $dataChart['urutPegawai']; |
||||
|
||||
return $this->respond($dataReturn, 200); |
||||
|
||||
} |
||||
|
||||
public function data() |
||||
{ |
||||
|
||||
$config = config(\Config\App::class, false); |
||||
|
||||
$Ald = new AldLibrary; |
||||
$username = session('nip'); |
||||
$kanwil = []; |
||||
foreach ($this->request->getPost('kanwil') ?? [] as $key => $value) { |
||||
$kanwil[] = $Ald->decryptMe($value, $username); |
||||
} |
||||
$kpp = []; |
||||
foreach ($this->request->getPost('kpp') ?? [] as $key => $value) { |
||||
$kpp[] = $Ald->decryptMe($value, $username); |
||||
} |
||||
|
||||
$tanggalAwal = $this->request->getPost('tanggalAwal'); |
||||
$tanggalAkhir = $this->request->getPost('tanggalAkhir'); |
||||
$tgl_awal = new DateTime($tanggalAwal); |
||||
$tgl_awal->setTimezone(new DateTimeZone($config->appTimezone)); |
||||
|
||||
$tgl_akhir = new DateTime($tanggalAkhir); |
||||
$tgl_akhir->setTimezone(new DateTimeZone($config->appTimezone)); |
||||
|
||||
$db = \Config\Database::connect(); |
||||
$sql = "SELECT |
||||
A.KD_KANWIL, |
||||
A.NAMA_KANWIL , |
||||
A.KPPADM, |
||||
A.KODE_SEKSI, |
||||
A.KODE_PEG, |
||||
A.NAMA_KANTOR, |
||||
A.NAMA_UNIT_ES4, |
||||
A.NAMA_JABATAN, |
||||
A.NAMA, |
||||
COALESCE (B.JML, |
||||
0) JML, |
||||
'TRUE' AS ISEXIST_INWAS |
||||
FROM |
||||
--KASI DAN AR WAS |
||||
( |
||||
SELECT |
||||
KPPADM, |
||||
KPPADM || '-' || KD_UNIT_ORGANISASI AS KODE_SEKSI, |
||||
KPPADM || '-' || KD_UNIT_ORGANISASI || '-' || NIP9 AS KODE_PEG, |
||||
P.NIP9, |
||||
P.NAMA, |
||||
NAMA_KANTOR, |
||||
KD_UNIT_ORGANISASI, |
||||
P.NAMA_UNIT_ES4, |
||||
KD_JAB_STRUKTURAL, |
||||
NAMA_JABATAN, |
||||
B.KD_KANWIL, |
||||
C.NAMA AS NAMA_KANWIL |
||||
FROM |
||||
PEGAWAI P |
||||
LEFT JOIN REF_KPP B ON |
||||
(P.KPPADM = B.KD_KPP) |
||||
LEFT JOIN REF_KANWIL C ON |
||||
(B.KD_KANWIL = C.KODE) |
||||
WHERE |
||||
P.KD_JAB_STRUKTURAL IN ('602', '401') |
||||
AND (KD_UNIT_ORGANISASI BETWEEN '0421071700' AND '0421072200' |
||||
OR KD_UNIT_ORGANISASI BETWEEN '0424071800' AND '0424072300') AND kppadm in :kpp: ) A |
||||
LEFT JOIN -- KPDL_PETUGAS_PEREKAM_AGG |
||||
( SELECT KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, NIP_PEREKAM , count(1) jml |
||||
FROM --KPDL_PETUGAS_REKAM |
||||
(SELECT KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, |
||||
ID_KPDL_SUBJEK, KPP_ADM_PEREKAM , CREATED_BY NIP_PEREKAM, |
||||
CREATION_DATE, ORG_APPROVAL_KASI, NIP_APPROVAL_KASI, |
||||
TGL_APPROVAL_KASI, STS_APPROVAL_KASI, TGL_APPROVAL_PKD, |
||||
STS_APPROVAL_PKD |
||||
FROM KPDL_MV_LOKASI_SUBJEK a WHERE trunc(a.CREATION_DATE) BETWEEN DATE :tanggalawal: AND DATE :tanggalakhir:) A |
||||
GROUP BY KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, NIP_PEREKAM) B ON |
||||
(A.KODE_PEG = B.KODE_PEG_PEREKAM) |
||||
UNION ALL |
||||
-- EX ANGGOTA WAS |
||||
SELECT |
||||
A.KD_KANWIL, |
||||
A.NAMA_KANWIL, |
||||
A.KPPADM, |
||||
A.KODE_SEKSI, |
||||
B.KODE_PEG_PEREKAM, |
||||
A.NAMA_KANTOR, |
||||
A.NAMA_UNIT_ES4, |
||||
' EX ANGGOTA' AS NAMA_JABATAN, |
||||
C.NAMA, |
||||
COALESCE (B.JML, |
||||
0) JML, |
||||
'FALSE' AS ISEXIST_INWAS |
||||
FROM |
||||
-- KPDL_SEKSIWAS_SEINDONESIA |
||||
( SELECT |
||||
KPPADM, |
||||
KPPADM||'-'||KD_UNIT_ORGANISASI AS kode_seksi, KPPADM||'-'||KD_UNIT_ORGANISASI ||'-'||nip9 AS kode_peg, p.NIP9, p.nama, |
||||
NAMA_KANTOR, KD_UNIT_ORGANISASI, p.NAMA_UNIT_ES4, KD_JAB_STRUKTURAL, NAMA_JABATAN, b.kd_kanwil, c.nama AS nama_kanwil FROM PEGAWAI p |
||||
LEFT JOIN ref_kpp b ON (p.kppadm = b.kd_kpp) |
||||
LEFT JOIN ref_kanwil c ON (b.kd_kanwil= c.kode) |
||||
WHERE p.KD_JAB_STRUKTURAL ='401' |
||||
AND (KD_UNIT_ORGANISASI BETWEEN '0421071700' AND '0421072200' OR KD_UNIT_ORGANISASI BETWEEN '0424071800' AND '0424072300' ) |
||||
AND kppadm in :kpp:) A |
||||
JOIN |
||||
--KASI DAN AR WAS |
||||
( |
||||
SELECT |
||||
B.KODE_SEKSI_PEREKAM , |
||||
KODE_PEG_PEREKAM , |
||||
NIP_PEREKAM, |
||||
JML |
||||
FROM |
||||
-- KPDL_PETUGAS_PEREKAM_AGG |
||||
( SELECT KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, NIP_PEREKAM , count(1) jml |
||||
FROM --KPDL_PETUGAS_REKAM |
||||
( SELECT KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, |
||||
ID_KPDL_SUBJEK, KPP_ADM_PEREKAM, CREATED_BY NIP_PEREKAM, |
||||
CREATION_DATE, ORG_APPROVAL_KASI, NIP_APPROVAL_KASI, |
||||
TGL_APPROVAL_KASI, STS_APPROVAL_KASI, TGL_APPROVAL_PKD, |
||||
STS_APPROVAL_PKD |
||||
FROM KPDL_MV_LOKASI_SUBJEK a WHERE trunc(a.CREATION_DATE) BETWEEN DATE :tanggalawal: AND DATE :tanggalakhir:) a |
||||
GROUP BY KODE_SEKSI_PEREKAM, KODE_PEG_PEREKAM, NIP_PEREKAM) B |
||||
WHERE |
||||
B.KODE_PEG_PEREKAM NOT IN ( |
||||
SELECT |
||||
KPPADM || '-' || KD_UNIT_ORGANISASI || '-' || NIP9 |
||||
FROM |
||||
PEGAWAI P |
||||
WHERE |
||||
P.KD_JAB_STRUKTURAL IN ('602', '401') |
||||
AND (KD_UNIT_ORGANISASI BETWEEN '0421071700' AND '0421072200' |
||||
OR KD_UNIT_ORGANISASI BETWEEN '0424071800' AND '0424072300'))) B |
||||
ON |
||||
(A.KODE_SEKSI = B.KODE_SEKSI_PEREKAM) |
||||
LEFT JOIN PEGAWAI C ON |
||||
(B.NIP_PEREKAM = C.NIP9) ORDER BY KD_KANWIL ASC, NAMA_KANTOR DESC, NAMA_UNIT_ES4 ASC, NAMA_JABATAN DESC"; |
||||
|
||||
$data = $db->query($sql, [ |
||||
'tanggalawal' => $tgl_awal->format('Y-m-d'), |
||||
'tanggalakhir' => $tgl_akhir->format('Y-m-d'), |
||||
'kpp' => $kpp, |
||||
])->getResultArray(); |
||||
helper('array'); |
||||
$groupingData = array_group_by($data, ['KD_KANWIL', 'KPPADM', 'KODE_SEKSI']); |
||||
|
||||
$bentukanArray = []; |
||||
$data1 = []; |
||||
foreach ($groupingData as $key1 => $value1) { //kanwil |
||||
$data1['KEY_LABEL'] = $key1; |
||||
$data1['LABEL'] = ''; |
||||
$data1['JUMLAH'] = 0; |
||||
$data1['JUMLAH_AR'] = 0; |
||||
$data1['RATA_RATA'] = 0; |
||||
$data1['subRows'] = []; |
||||
|
||||
$data2 = []; |
||||
foreach ($value1 as $key2 => $value2) { //kpp |
||||
$data2['KEY_LABEL'] = $key1 . '-' . $key2; |
||||
$data2['LABEL'] = ''; |
||||
$data2['JUMLAH'] = 0; |
||||
$data2['JUMLAH_AR'] = 0; |
||||
$data2['RATA_RATA'] = 0; |
||||
$data2['subRows'] = []; |
||||
|
||||
$data3 = []; |
||||
foreach ($value2 as $key3 => $value3) { //seksi |
||||
$data3['KEY_LABEL'] = $key1 . '-' . $key3; |
||||
$data3['LABEL'] = ''; |
||||
$data3['NAMA_KANTOR'] = ''; |
||||
$data3['JUMLAH'] = 0; |
||||
$data3['JUMLAH_AR'] = 0; |
||||
$data3['RATA_RATA'] = 0; |
||||
$data3['subRows'] = []; |
||||
|
||||
$data4 = []; |
||||
foreach ($value3 as $key4 => $value4) { //AR |
||||
$data4['KEY_LABEL'] = $key1 . '-' . $value4['KODE_PEG']; |
||||
$data4['LABEL'] = $value4['NAMA']; |
||||
$data4['JUMLAH'] = (float) $value4['JML']; |
||||
|
||||
foreach ($value4 as $key5 => $value5) { |
||||
$data4[$key5] = $value5; |
||||
} |
||||
|
||||
$data3['LABEL'] = $value4['NAMA_UNIT_ES4']; |
||||
$data3['NAMA_KANTOR'] = $value4['NAMA_KANTOR']; |
||||
$data2['LABEL'] = $value4['NAMA_KANTOR']; |
||||
$data1['LABEL'] = $value4['NAMA_KANWIL']; |
||||
|
||||
$data3['JUMLAH'] += $data4['JUMLAH']; |
||||
$data3['JUMLAH_AR'] += ($value4['ISEXIST_INWAS'] == 'TRUE' && $value4['NAMA_JABATAN'] == 'Account Representative' ? 1 : 0); |
||||
array_push($data3['subRows'], $data4); |
||||
} |
||||
$data3['RATA_RATA'] = $data3['JUMLAH_AR'] == 0 ? 0 : $data3['JUMLAH'] / $data3['JUMLAH_AR']; |
||||
$data2['JUMLAH'] += $data3['JUMLAH']; |
||||
$data2['JUMLAH_AR'] += $data3['JUMLAH_AR']; |
||||
array_push($data2['subRows'], $data3); |
||||
} |
||||
$data2['RATA_RATA'] = $data2['JUMLAH_AR'] == 0 ? 0 : $data2['JUMLAH'] / $data2['JUMLAH_AR']; |
||||
$data1['JUMLAH'] += $data2['JUMLAH']; |
||||
$data1['JUMLAH_AR'] += $data2['JUMLAH_AR']; |
||||
array_push($data1['subRows'], $data2); |
||||
} |
||||
$data1['RATA_RATA'] = $data1['JUMLAH_AR'] == 0 ? 0 : $data1['JUMLAH'] / $data1['JUMLAH_AR']; |
||||
array_push($bentukanArray, $data1); |
||||
} |
||||
$dataReturn['data'] = $bentukanArray; |
||||
|
||||
$tempData = $bentukanArray; |
||||
$dataChart = $this->urutKanwil($bentukanArray); |
||||
$dataReturn['urutKanwil'] = $dataChart['urutKanwil']; |
||||
$dataReturn['urutKpp'] = $dataChart['urutKpp']; |
||||
$dataReturn['urutSeksi'] = $dataChart['urutSeksi']; |
||||
$dataReturn['urutPegawai'] = $dataChart['urutPegawai']; |
||||
|
||||
return $this->respond($dataReturn, 200); |
||||
} |
||||
|
||||
protected function urutKanwil($tempData) |
||||
{ |
||||
array_sort_by_multiple_keys($tempData, ['TOTAL' => SORT_DESC, 'KEY_LABEL' => SORT_ASC]); |
||||
//kanwil |
||||
$kanwil = array_slice($tempData, 0, 5); |
||||
|
||||
//kpp |
||||
$kppInKanwil = []; |
||||
foreach ($tempData as $key => $value) { |
||||
foreach ($value['subRows'] as $key2 => $value2) { |
||||
array_push($kppInKanwil, $value2); |
||||
} |
||||
} |
||||
array_sort_by_multiple_keys($kppInKanwil, ['TOTAL' => SORT_DESC, 'KEY_LABEL' => SORT_ASC]); |
||||
$kpp = array_slice($kppInKanwil, 0, 5); |
||||
|
||||
//seksi |
||||
$seksiInKpp = []; |
||||
foreach ($kppInKanwil as $key => $value) { |
||||
foreach ($value['subRows'] as $key2 => $value2) { |
||||
array_push($seksiInKpp, $value2); |
||||
} |
||||
} |
||||
array_sort_by_multiple_keys($seksiInKpp, ['TOTAL' => SORT_DESC, 'KEY_LABEL' => SORT_ASC]); |
||||
$seksi = array_slice($seksiInKpp, 0, 5); |
||||
|
||||
//ar Aktif |
||||
$arInSeksi = []; |
||||
foreach ($seksiInKpp as $key => $value) { |
||||
foreach ($value['subRows'] as $key2 => $value2) { |
||||
// if ($value2['NAMA_JABATAN'] == 'Account Representative' && $value2['ISEXIST_INWAS'] == 'TRUE') { |
||||
array_push($arInSeksi, $value2); |
||||
// } |
||||
} |
||||
} |
||||
array_sort_by_multiple_keys($arInSeksi, ['TOTAL' => SORT_DESC]); |
||||
$ar = array_slice($arInSeksi, 0, 5); |
||||
|
||||
foreach ($kanwil as $key => $value) { |
||||
unset($kanwil[$key]['subRows']); |
||||
} |
||||
|
||||
foreach ($kpp as $key => $value) { |
||||
unset($kpp[$key]['subRows']); |
||||
} |
||||
foreach ($seksi as $key => $value) { |
||||
unset($seksi[$key]['subRows']); |
||||
} |
||||
|
||||
$data['urutKanwil'] = $kanwil; |
||||
$data['urutKpp'] = $kpp; |
||||
$data['urutSeksi'] = $seksi; |
||||
$data['urutPegawai'] = $ar; |
||||
return $data; |
||||
} |
||||
|
||||
protected function urutKpp($tempData) |
||||
{ |
||||
|
||||
$kppInKanwil = []; |
||||
foreach ($tempData as $key => $value) { |
||||
foreach ($value['subRows'] as $key2 => $value2) { |
||||
array_push($kppInKanwil, $value2); |
||||
// # code... |
||||
} |
||||
} |
||||
array_sort_by_multiple_keys($kppInKanwil, ['TOTAL' => SORT_DESC, 'KEY_LABEL' => SORT_ASC]); |
||||
//hilangkan child subRows |
||||
$dataRet = array_slice($kppInKanwil, 0, 5); |
||||
return $dataRet; |
||||
} |
||||
|
||||
protected function urutSeksi($tempData) |
||||
{ |
||||
|
||||
$kppInKanwil = []; |
||||
foreach ($tempData as $key => $value) { |
||||
foreach ($value['subRows'] as $key2 => $value2) { |
||||
array_push($kppInKanwil, $value2); |
||||
} |
||||
} |
||||
array_sort_by_multiple_keys($kppInKanwil, ['TOTAL' => SORT_DESC, 'KEY_LABEL' => SORT_ASC]); |
||||
|
||||
//hilangkan child subRows |
||||
$dataRet = array_slice($kppInKanwil, 0, 5); |
||||
return $dataRet; |
||||
} |
||||
|
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,469 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import Highcharts from 'highcharts' |
||||
import HighchartsReact from 'highcharts-react-official' |
||||
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap' |
||||
import collect from 'collect.js' |
||||
import { Toast } from 'primereact/toast' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
import { MantineReactTable } from 'mantine-react-table' |
||||
import jquery from 'jquery' |
||||
import { isObjEmpty, titleCase } from '../../kytp/util' |
||||
import { useSelector } from 'react-redux' |
||||
const date = new Date() |
||||
|
||||
const Kanwil = () => { |
||||
const base_url = '/engineN/' |
||||
const toast = useRef(null) |
||||
|
||||
const refChart1 = useRef() |
||||
const refChart2 = useRef() |
||||
const refChart3 = useRef() |
||||
// const refChart4 = useRef()
|
||||
|
||||
const [data, setData] = useState([]) |
||||
|
||||
const [urutKanwil, setUrutKanwil] = useState({ categories: [], dataSeries: [] }) |
||||
const [urutKpp, setUrutKpp] = useState({ categories: [], dataSeries: [] }) |
||||
const [urutSeksi, setUrutSeksi] = useState({ categories: [], dataSeries: [] }) |
||||
const [urutPegawai, setUrutPegawai] = useState({ categories: [], dataSeries: [] }) |
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
|
||||
useEffect(() => { |
||||
// if (isObjEmpty(paramSelected)) {
|
||||
// return
|
||||
// }
|
||||
// const kanwil = collect(kanwilSelected).pluck('value').all()
|
||||
// const kpp = collect(kppSelected).pluck('value').all()
|
||||
const data = storeKpdl.dataUrutPerubahanPerilakuPenambahanWpBayar |
||||
|
||||
setUrutKanwil(() => { |
||||
const categories = [] |
||||
const dataSeries = [] |
||||
data.urutKanwil.map((val, idx) => { |
||||
categories.push(String(val.LABEL).replace('Kanwil DJP', '')) |
||||
dataSeries.push(val.RATA_RATA) |
||||
}) |
||||
return { categories, dataSeries } |
||||
}) |
||||
setUrutKpp(() => { |
||||
const categories = [] |
||||
const dataSeries = [] |
||||
data.urutKpp.map((val, idx) => { |
||||
categories.push(String(val.LABEL).replace('KPP Pratama', '')) |
||||
dataSeries.push(val.RATA_RATA) |
||||
}) |
||||
return { categories, dataSeries } |
||||
}) |
||||
setUrutSeksi(() => { |
||||
const categories = [] |
||||
const dataSeries = [] |
||||
data.urutSeksi.map((val, idx) => { |
||||
categories.push(String(val.LABEL).replace('Seksi', '') + '-' + String(val.NAMA_KANTOR).replace('KPP Pratama', '')) |
||||
dataSeries.push(val.RATA_RATA) |
||||
}) |
||||
return { categories, dataSeries } |
||||
}) |
||||
setUrutPegawai(() => { |
||||
const categories = [] |
||||
const dataSeries = [] |
||||
data.urutPegawai.map((val, idx) => { |
||||
categories.push(String(val.LABEL) + ' - ' + String(val.NAMA_UNIT_ES4).replace('Seksi', '') + ' - ' + String(val.NAMA_KANTOR).replace('KPP Pratama', '')) |
||||
dataSeries.push(val.JUMLAH) |
||||
}) |
||||
return { categories, dataSeries } |
||||
}) |
||||
}, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar, storeKpdl.dataUrutPerubahanPerilakuPenambahanWpBayar]) |
||||
|
||||
const columns = useMemo( |
||||
() => [ |
||||
{ |
||||
accessorKey: 'LABEL', |
||||
header: 'Unit/Pegawai', |
||||
size: 200, |
||||
mantineTableBodyCellProps: ({ cell }) => { |
||||
const rowObject = cell.row.original |
||||
// if (!cell.row.getCanExpand()) {
|
||||
// if (rowObject.ISEXIST_INWAS === 'FALSE') {
|
||||
// return { style: { color: 'red' } }
|
||||
// }
|
||||
// if (rowObject.NAMA_JABATAN === 'Kepala Seksi') {
|
||||
// return { style: { color: 'blue' } }
|
||||
// }
|
||||
// }
|
||||
}, |
||||
footer: `Total` |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_1', |
||||
header: 'Jan', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_1, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_2', |
||||
header: 'Feb', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_2, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_3', |
||||
header: 'Mar', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_3, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_4', |
||||
header: 'Apr', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_4, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_5', |
||||
header: 'Mei', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_5, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_6', |
||||
header: 'Jun', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_6, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_7', |
||||
header: 'Jul', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_7, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_8', |
||||
header: 'Agu', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_8, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_9', |
||||
header: 'Sep', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_9, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_10', |
||||
header: 'Okt', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_10, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_11', |
||||
header: 'Nov', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_11, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_12', |
||||
header: 'Des', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.BLN_12, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'TOTAL', |
||||
header: 'Total', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar.reduce((acc, row) => acc + row.TOTAL, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
} |
||||
], |
||||
[] |
||||
) |
||||
|
||||
const optionsChart = (props, title, urutChart) => { |
||||
return { |
||||
chart: { |
||||
type: 'bar', |
||||
height: 350, |
||||
borderColor: '#EBBA95', |
||||
borderWidth: 2 |
||||
}, |
||||
title: { |
||||
text: `${title}`, |
||||
style: { fontSize: '14px' }, |
||||
useHTML: true |
||||
}, |
||||
|
||||
xAxis: { |
||||
categories: props.categories, |
||||
labels: { |
||||
formatter: function () { |
||||
return urutChart === 4 ? String(this.value).split('-')[0] : this.value |
||||
}, |
||||
allowOverlap: false, |
||||
style: { |
||||
whiteSpace: 'wrap', |
||||
overflow: 'allow' |
||||
} |
||||
} |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
title: { |
||||
text: null |
||||
}, |
||||
labels: { |
||||
overflow: 'justify' |
||||
}, |
||||
gridLineWidth: 0 |
||||
}, |
||||
tooltip: { |
||||
valueSuffix: ' Subjek', |
||||
backgroundColor: '#FCFFC5', |
||||
// pointFormat: '{point.y}',
|
||||
formatter: function () { |
||||
return '<b>' + this.x + '</b> : <b>' + Number(this.y).toLocaleString('id-ID', { maximumFractionDigits: 2 }) + '</b>' |
||||
}, |
||||
enabled: true |
||||
}, |
||||
plotOptions: { |
||||
bar: { |
||||
borderRadius: '20%', |
||||
dataLabels: { |
||||
enabled: true, |
||||
formatter: function () { |
||||
return `${Number(this.y).toLocaleString('id-ID', { |
||||
minimumFractionDigits: 0, |
||||
maximumFractionDigits: 2 |
||||
})}` |
||||
} |
||||
}, |
||||
groupPadding: 0.1 |
||||
} |
||||
}, |
||||
credits: { |
||||
enabled: false |
||||
}, |
||||
series: [{ name: 'Subjek KPDL', data: props.dataSeries }] |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Row style={{ minHeight: '200px' }}> |
||||
<Col md="12"> |
||||
<MantineReactTable |
||||
initialState={{ sorting: [{ id: 'TOTAL', desc: true }] }} |
||||
columns={columns} |
||||
data={storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar} |
||||
enableExpanding |
||||
enableExpandAll //default
|
||||
mantineTopToolbarProps={{ className: 'z-0', allowFullScreen: false }} |
||||
enableFullScreenToggle={false} |
||||
enablePagination={false} |
||||
mantineTableBodyCellProps={({ cell }) => ({ |
||||
className: 'text-xs py-1', |
||||
sx: { |
||||
backgroundColor: cell.row.depth === 1 || !cell.row.getCanExpand() ? 'ButtonHighlight' : 'inherit', |
||||
fontWeight: cell.row.depth === 0 ? '600' : 'inherit' |
||||
} |
||||
})} |
||||
mantineTableBodyProps={{ className: 'mb-3' }} |
||||
mantineTableHeadCellProps={{ align: 'center', className: 'text-xs p-1' }} |
||||
enableTableFooter |
||||
// renderBottomToolbar={
|
||||
// <div>
|
||||
// <Row className="pl-5 text-xs">
|
||||
// <Col>
|
||||
// <Label>Legenda Tabel :</Label>
|
||||
// <ul>
|
||||
// <li style={{ color: 'blue' }}>Kepala Seksi</li>
|
||||
// <li style={{ color: 'red' }}>Eks Kepala/Anggota Seksi terkait</li>
|
||||
// </ul>
|
||||
// </Col>
|
||||
// </Row>
|
||||
// </div>
|
||||
// }
|
||||
// mantineTableProps={{
|
||||
// highlightOnHover: false,
|
||||
// withColumnBorders: true
|
||||
// }}
|
||||
mantineTableProps={{ |
||||
highlightOnHover: false, |
||||
withColumnBorders: true, |
||||
// withBorder: colorScheme === 'light',
|
||||
sx: { |
||||
'tbody > tr > td': { |
||||
padding: '0.4rem 0.4rem', |
||||
fontSize: '0.96rem' |
||||
}, |
||||
'tfoot > tr > th': { |
||||
// padding: '1rem 0.4rem',
|
||||
textAlign: 'end', |
||||
borderBottom: '1px solid #dee2e6', |
||||
borderRight: '0.0625rem solid #dee2e6', |
||||
borderTop: 'none', |
||||
padding: '0.4rem 0.4rem' |
||||
// fontSize: "2.96rem"
|
||||
} |
||||
} |
||||
}} |
||||
content |
||||
/> |
||||
</Col> |
||||
{/* <Col md="4"> |
||||
<Row> |
||||
{urutKanwil.dataSeries.length ? ( |
||||
<Col md="12" className="m-1"> |
||||
<HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(urutKanwil, 'Urut Rata-rata Kanwil', 1)} /> |
||||
</Col> |
||||
) : null} |
||||
{urutKpp.dataSeries.length ? ( |
||||
<Col md="12" className="m-1"> |
||||
<HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(urutKpp, 'Urut Rata-rata KPP', 2)} /> |
||||
</Col> |
||||
) : null} |
||||
{urutKpp.dataSeries.length ? ( |
||||
<Col md="12" className="m-1"> |
||||
<HighchartsReact ref={refChart3} highcharts={Highcharts} options={optionsChart(urutSeksi, 'Urut Rata-rata Seksi', 3)} /> |
||||
</Col> |
||||
) : null} |
||||
{urutKpp.dataSeries.length ? ( |
||||
<Col md="12" className="m-1"> |
||||
<HighchartsReact ref={refChart3} highcharts={Highcharts} options={optionsChart(urutPegawai, 'Jml. Subjek Urut AR', 4)} /> |
||||
</Col> |
||||
) : null} |
||||
</Row> |
||||
</Col> */} |
||||
</Row> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Kanwil |
||||
@ -0,0 +1,344 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import Highcharts from 'highcharts' |
||||
import HighchartsReact from 'highcharts-react-official' |
||||
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap' |
||||
import collect from 'collect.js' |
||||
import { Toast } from 'primereact/toast' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table' |
||||
import jquery from 'jquery' |
||||
import { isObjEmpty, titleCase } from '../../kytp/util' |
||||
import { useSelector } from 'react-redux' |
||||
const date = new Date() |
||||
|
||||
const Kpp = () => { |
||||
const base_url = '/engineN/' |
||||
const toast = useRef(null) |
||||
const [isLoading, setIsLoading] = useState() |
||||
const rowVirtualizerInstanceRef = useRef(null) |
||||
|
||||
const [data, setData] = useState([]) |
||||
const [sorting, setSorting] = useState([{ id: 'TOTAL', desc: true }]) |
||||
|
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
useEffect(() => { |
||||
if (data.length) { |
||||
try { |
||||
//scroll to the top of the table when the sorting changes
|
||||
rowVirtualizerInstanceRef.current?.scrollToIndex(0) |
||||
} catch (e) { |
||||
// console.log(e)
|
||||
} |
||||
} |
||||
}, [sorting]) |
||||
|
||||
useEffect(() => { |
||||
const sharedData = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar |
||||
const data2 = [] |
||||
sharedData.map((val, _idx) => { |
||||
// console.log({ val })
|
||||
val.subRows.map((val2, _idx2) => { |
||||
// console.log({ val2 })
|
||||
data2.push(val2) |
||||
}) |
||||
}) |
||||
setData(data2) |
||||
setIsLoading(false) |
||||
}, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar]) |
||||
|
||||
const columns = useMemo( |
||||
() => [ |
||||
{ |
||||
accessorKey: 'LABEL', |
||||
header: 'Unit/Pegawai', |
||||
size: 200, |
||||
mantineTableBodyCellProps: ({ cell }) => { |
||||
const rowObject = cell.row.original |
||||
} |
||||
// footer: `Total`
|
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_1', |
||||
header: 'Jan', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_1, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_2', |
||||
header: 'Feb', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_2, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_3', |
||||
header: 'Mar', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_3, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_4', |
||||
header: 'Apr', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_4, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_5', |
||||
header: 'Mei', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_5, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_6', |
||||
header: 'Jun', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_6, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_7', |
||||
header: 'Jul', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_7, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_8', |
||||
header: 'Agu', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_8, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_9', |
||||
header: 'Sep', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_9, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_10', |
||||
header: 'Okt', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_10, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_11', |
||||
header: 'Nov', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_11, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_12', |
||||
header: 'Des', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_12, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'TOTAL', |
||||
header: 'Total', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.TOTAL, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
} |
||||
], |
||||
[] |
||||
) |
||||
|
||||
const table = useMantineReactTable({ |
||||
columns, |
||||
data, //10,000 rows
|
||||
enableBottomToolbar: false, |
||||
enableGlobalFilterModes: true, |
||||
enablePagination: false, |
||||
enableRowVirtualization: true, |
||||
mantineTableContainerProps: { sx: { maxHeight: '600px' }, className: 'p-2' }, |
||||
onSortingChange: setSorting, |
||||
state: { isLoading, sorting }, |
||||
rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
|
||||
enableExpanding: true, |
||||
mantineTopToolbarProps: { allowFullScreen: false }, |
||||
enableFullScreenToggle: false, |
||||
enablePagination: false, |
||||
mantineTableBodyCellProps: ({ cell }) => ({ |
||||
className: 'text-xs py-1', |
||||
sx: { |
||||
backgroundColor: cell.row.depth === 1 ? 'ButtonHighlight' : 'inherit', |
||||
fontWeight: cell.row.depth === 0 ? '600' : 'inherit' |
||||
} |
||||
}), |
||||
mantineTableBodyProps: { className: 'mb-3' }, |
||||
mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' }, |
||||
// renderBottomToolbar: ({ table }) => (
|
||||
// <div>
|
||||
// <Row className="pl-5 text-xs">
|
||||
// <Col>
|
||||
// <Label>Legenda Tabel :</Label>
|
||||
// <ul>
|
||||
// <li style={{ color: 'blue' }}>Kepala Seksi</li>
|
||||
// <li style={{ color: 'red' }}>Eks Kepala/Anggota Seksi terkait</li>
|
||||
// </ul>
|
||||
// </Col>
|
||||
// </Row>
|
||||
// </div>
|
||||
// ),
|
||||
|
||||
// enableStickyFooter: true,
|
||||
rowVirtualizerInstanceRef |
||||
}) |
||||
return ( |
||||
<> |
||||
<Row style={{ minHeight: '200px' }}> |
||||
<Col> |
||||
<MantineReactTable |
||||
table={table} |
||||
mantineTableProps={{ |
||||
highlightOnHover: false, |
||||
withColumnBorders: true, |
||||
sx: { |
||||
'tbody > tr > td': { |
||||
padding: '0.4rem 0.4rem', |
||||
fontSize: '0.96rem' |
||||
}, |
||||
'tfoot > tr > th': { |
||||
textAlign: 'end', |
||||
borderBottom: '1px solid #dee2e6', |
||||
borderRight: '0.0625rem solid #dee2e6', |
||||
borderTop: 'none', |
||||
padding: '0.4rem 0.4rem' |
||||
} |
||||
} |
||||
}} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Kpp |
||||
@ -0,0 +1,251 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import Highcharts from 'highcharts' |
||||
import HighchartsReact from 'highcharts-react-official' |
||||
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap' |
||||
import collect from 'collect.js' |
||||
import { Toast } from 'primereact/toast' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table' |
||||
import jquery from 'jquery' |
||||
import { isObjEmpty, titleCase } from '../../kytp/util' |
||||
import { useSelector } from 'react-redux' |
||||
const date = new Date() |
||||
|
||||
const Pegawai = () => { |
||||
const base_url = '/engineN/' |
||||
const toast = useRef(null) |
||||
|
||||
const refChart1 = useRef() |
||||
const refChart2 = useRef() |
||||
const refChart3 = useRef() |
||||
// const refChart4 = useRef()
|
||||
|
||||
const [data, setData] = useState([]) |
||||
const [isLoading, setIsLoading] = useState() |
||||
const rowVirtualizerInstanceRef = useRef(null) |
||||
const [sorting, setSorting] = useState([{ id: 'TOTAL', desc: true }]) |
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
useEffect(() => { |
||||
if (data.length) { |
||||
try { |
||||
//scroll to the top of the table when the sorting changes
|
||||
rowVirtualizerInstanceRef.current?.scrollToIndex(0) |
||||
} catch (e) { |
||||
// console.log(e)
|
||||
} |
||||
} |
||||
}, [sorting]) |
||||
|
||||
useEffect(() => { |
||||
const sharedData = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar |
||||
const data2 = [] |
||||
sharedData.map((val, _idx) => { |
||||
val.subRows.map((val2, _idx2) => { |
||||
val2.subRows.map((val3, _idx3) => { |
||||
data2.push(...val3.subRows) |
||||
}) |
||||
}) |
||||
}) |
||||
setData(data2) |
||||
setIsLoading(false) |
||||
}, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar]) |
||||
|
||||
const columns = useMemo( |
||||
() => [ |
||||
{ |
||||
accessorKey: 'LABEL', |
||||
header: 'Unit/Pegawai', |
||||
size: 200, |
||||
Cell: ({ cell }) => { |
||||
const rowData = cell.row.original |
||||
return cell.getValue() + ' - ' + rowData.NAMA_KANTOR + ' - ' + rowData.NAMA_UNIT_ES4 |
||||
}, |
||||
mantineTableBodyCellProps: ({ cell }) => { |
||||
// const rowObject = cell.row.original
|
||||
// if (!cell.row.getCanExpand()) {
|
||||
// if (rowObject.ISEXIST_INWAS === 'FALSE') {
|
||||
// return { style: { color: 'red' } }
|
||||
// }
|
||||
// if (rowObject.NAMA_JABATAN === 'Kepala Seksi') {
|
||||
// return { style: { color: 'blue' } }
|
||||
// }
|
||||
// }
|
||||
} |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_1', |
||||
header: 'Jan', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_2', |
||||
header: 'Feb', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_3', |
||||
header: 'Mar', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_4', |
||||
header: 'Apr', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_5', |
||||
header: 'Mei', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_5, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_6', |
||||
header: 'Jun', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_7', |
||||
header: 'Jul', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_8', |
||||
header: 'Agu', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_9', |
||||
header: 'Sep', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_10', |
||||
header: 'Okt', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_11', |
||||
header: 'Nov', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_12', |
||||
header: 'Des', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'TOTAL', |
||||
header: 'Total', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
} |
||||
], |
||||
[] |
||||
) |
||||
const table = useMantineReactTable({ |
||||
columns, |
||||
data, //10,000 rows
|
||||
enableBottomToolbar: false, |
||||
enableGlobalFilterModes: true, |
||||
enableRowVirtualization: true, |
||||
mantineTableContainerProps: { sx: { maxHeight: '600px' } }, |
||||
onSortingChange: setSorting, |
||||
state: { isLoading, sorting }, |
||||
rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
|
||||
mantineTopToolbarProps: { allowFullScreen: false }, |
||||
enableFullScreenToggle: false, |
||||
enablePagination: false, |
||||
mantineTableBodyCellProps: ({ cell }) => ({ |
||||
className: 'text-xs py-1', |
||||
sx: { |
||||
fontWeight: cell.row.depth === 0 ? '600' : 'inherit' |
||||
} |
||||
}), |
||||
mantineTableBodyProps: { className: 'mb-3' }, |
||||
mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' }, |
||||
renderBottomToolbar: false, |
||||
mantineTableProps: { |
||||
highlightOnHover: false, |
||||
withColumnBorders: true |
||||
}, |
||||
rowVirtualizerInstanceRef, |
||||
enableRowNumbers: true, |
||||
displayColumnDefOptions: { |
||||
'mrt-row-numbers': { |
||||
mantineTableBodyCellProps: { |
||||
align: 'center' |
||||
}, |
||||
size: 80 |
||||
} |
||||
} |
||||
}) |
||||
return ( |
||||
<> |
||||
<Row style={{ minHeight: '200px' }}> |
||||
<Col> |
||||
<MantineReactTable table={table} /> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Pegawai |
||||
@ -0,0 +1,248 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import Highcharts from 'highcharts' |
||||
import HighchartsReact from 'highcharts-react-official' |
||||
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap' |
||||
import collect from 'collect.js' |
||||
import { Toast } from 'primereact/toast' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table' |
||||
import jquery from 'jquery' |
||||
import { isObjEmpty, titleCase } from '../../kytp/util' |
||||
import { useSelector } from 'react-redux' |
||||
const date = new Date() |
||||
|
||||
const Seksi = () => { |
||||
const base_url = '/engineN/' |
||||
const toast = useRef(null) |
||||
|
||||
const refChart1 = useRef() |
||||
const refChart2 = useRef() |
||||
const refChart3 = useRef() |
||||
// const refChart4 = useRef()
|
||||
|
||||
const [data, setData] = useState([]) |
||||
const [isLoading, setIsLoading] = useState() |
||||
const rowVirtualizerInstanceRef = useRef(null) |
||||
const [sorting, setSorting] = useState([{ id: 'TOTAL', desc: true }]) |
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
useEffect(() => { |
||||
if (data.length) { |
||||
try { |
||||
//scroll to the top of the table when the sorting changes
|
||||
rowVirtualizerInstanceRef.current?.scrollToIndex(0) |
||||
} catch (e) { |
||||
console.log(e) |
||||
} |
||||
} |
||||
}, [sorting]) |
||||
|
||||
useEffect(() => { |
||||
const sharedData = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar |
||||
const data2 = [] |
||||
sharedData.map((val, _idx) => { |
||||
val.subRows.map((val2, _idx2) => { |
||||
val2.subRows.map((val3, _idx3) => { |
||||
data2.push(val3) |
||||
}) |
||||
}) |
||||
}) |
||||
setData(data2) |
||||
setIsLoading(false) |
||||
}, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar]) |
||||
|
||||
const columns = useMemo( |
||||
() => [ |
||||
{ |
||||
accessorKey: 'LABEL', |
||||
header: 'Unit/Pegawai', |
||||
size: 200, |
||||
Cell: ({ cell }) => { |
||||
const rowData = cell.row.original |
||||
if (!cell.row.getCanExpand()) { |
||||
return cell.getValue() |
||||
} else { |
||||
return cell.getValue() + ' - ' + rowData.NAMA_KANTOR |
||||
} |
||||
}, |
||||
mantineTableBodyCellProps: ({ cell }) => { |
||||
const rowObject = cell.row.original |
||||
// if (!cell.row.getCanExpand()) {
|
||||
// if (rowObject.ISEXIST_INWAS === 'FALSE') {
|
||||
// return { style: { color: 'red' } }
|
||||
// }
|
||||
// if (rowObject.NAMA_JABATAN === 'Kepala Seksi') {
|
||||
// return { style: { color: 'blue' } }
|
||||
// }
|
||||
// }
|
||||
} |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_1', |
||||
header: 'Jan', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_2', |
||||
header: 'Feb', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_3', |
||||
header: 'Mar', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_4', |
||||
header: 'Apr', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_5', |
||||
header: 'Mei', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'), |
||||
footer: ( |
||||
<span className="pe-1 right"> |
||||
{Number(data.reduce((acc, row) => acc + row.BLN_5, 0)).toLocaleString('id-ID', { |
||||
maximumFractionDigits: 0 |
||||
})} |
||||
</span> |
||||
) |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_6', |
||||
header: 'Jun', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_7', |
||||
header: 'Jul', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_8', |
||||
header: 'Agu', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_9', |
||||
header: 'Sep', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_10', |
||||
header: 'Okt', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_11', |
||||
header: 'Nov', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'BLN_12', |
||||
header: 'Des', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
}, |
||||
{ |
||||
accessorKey: 'TOTAL', |
||||
header: 'Total', |
||||
size: 80, |
||||
mantineTableBodyCellProps: { |
||||
align: 'right' |
||||
}, |
||||
Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID') |
||||
} |
||||
], |
||||
[] |
||||
) |
||||
const table = useMantineReactTable({ |
||||
columns, |
||||
data, //10,000 rows
|
||||
enableBottomToolbar: true, |
||||
enableGlobalFilterModes: true, |
||||
enableRowVirtualization: true, |
||||
mantineTableContainerProps: { sx: { maxHeight: '600px' } }, |
||||
onSortingChange: setSorting, |
||||
state: { isLoading, sorting }, |
||||
rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
|
||||
enableExpanding: true, |
||||
mantineTopToolbarProps: { allowFullScreen: false }, |
||||
enableFullScreenToggle: false, |
||||
enablePagination: false, |
||||
mantineTableBodyCellProps: ({ cell }) => ({ |
||||
className: 'text-xs py-1', |
||||
sx: { |
||||
backgroundColor: cell.row.depth === 1 || !cell.row.getCanExpand() ? 'ButtonHighlight' : 'inherit', |
||||
fontWeight: cell.row.depth === 0 ? '600' : 'inherit' |
||||
} |
||||
}), |
||||
mantineTableBodyProps: { className: 'mb-3' }, |
||||
mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' }, |
||||
|
||||
mantineTableProps: { |
||||
highlightOnHover: false, |
||||
withColumnBorders: true |
||||
}, |
||||
rowVirtualizerInstanceRef |
||||
}) |
||||
return ( |
||||
<> |
||||
<Row style={{ minHeight: '200px' }}> |
||||
<Col> |
||||
<MantineReactTable table={table} /> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Seksi |
||||
@ -0,0 +1,212 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' |
||||
import Highcharts from 'highcharts' |
||||
import HighchartsReact from 'highcharts-react-official' |
||||
import { Col, Row } from 'reactstrap' |
||||
import { Badge } from 'primereact/badge' |
||||
import { Button as ButtonP } from 'primereact/button' |
||||
|
||||
import collect from 'collect.js' |
||||
import jquery from 'jquery' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
|
||||
import { Sidebar } from 'primereact/sidebar' |
||||
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table' |
||||
import { Text } from '@mantine/core' |
||||
|
||||
import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query' |
||||
import dayjs from 'dayjs' |
||||
import { useSelector } from 'react-redux' |
||||
var relativeTime = require('dayjs/plugin/relativeTime') |
||||
const fetchSize = 101 |
||||
|
||||
const PenambahanWpBayar = () => { |
||||
const base_url = '/engineN/' |
||||
|
||||
const refChart = useRef(null) |
||||
const [data, setData] = useState({ |
||||
npwp: [], |
||||
npwp_akum: [], |
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
||||
}) |
||||
|
||||
const [selectedBulan, setSelectedBulan] = useState('') |
||||
const [selectedBulanText, setSelectedBulanText] = useState('semua') |
||||
const [bulan, setBulan] = useState([]) |
||||
|
||||
const [visibleSidebar, setVisibleSidebar] = useState(false) |
||||
const [query, setQuery] = useState(null) |
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
// useEffect(() => {
|
||||
// if (selectedBulan != '') {
|
||||
// jquery.get({
|
||||
// url: base_url + 'kewilayahan/kytp/identifikasiLapangan',
|
||||
// dataType: 'json',
|
||||
// type: 'POST',
|
||||
// data: {
|
||||
// ...dataSend,
|
||||
// bulan: selectedBulan
|
||||
// },
|
||||
// success: (data) => {
|
||||
// setData(data)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }, [dataSend, selectedBulan])
|
||||
|
||||
useEffect(() => { |
||||
const dataMonitoring = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar |
||||
const bulan = [] |
||||
const bulan_akum = [] |
||||
|
||||
if (dataMonitoring) { |
||||
let akum = 0 |
||||
for (let i = 1; i <= 12; i++) { |
||||
const current = Number(dataMonitoring.reduce((acc, row) => acc + row['BLN_' + i], 0)) |
||||
bulan.push(current) |
||||
akum += current |
||||
bulan_akum.push(akum) |
||||
} |
||||
setData({ |
||||
npwp: bulan, |
||||
npwp_akum: bulan_akum, |
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
||||
}) |
||||
} |
||||
}, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar]) |
||||
|
||||
// useEffect(() => {
|
||||
// jquery.get({
|
||||
// url: base_url + 'kewilayahan/kytp/getBulan',
|
||||
// dataType: 'json',
|
||||
// type: 'GET',
|
||||
// success: (data) => {
|
||||
// setBulan(data)
|
||||
// setSelectedBulan(data[0].value)
|
||||
// }
|
||||
// })
|
||||
// }, [])
|
||||
|
||||
const optionsChart1 = () => { |
||||
return { |
||||
chart: { |
||||
zoomType: 'xy', |
||||
height: '320pt' |
||||
}, |
||||
title: { |
||||
text: '', |
||||
align: 'left' |
||||
}, |
||||
subtitle: { |
||||
align: 'left' |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
categories: data.categories, |
||||
crosshair: true |
||||
} |
||||
], |
||||
|
||||
yAxis: [ |
||||
{ |
||||
labels: { |
||||
style: { |
||||
color: Highcharts.getOptions().colors[2] |
||||
} |
||||
}, |
||||
title: { |
||||
text: 'NPWP', |
||||
style: { |
||||
color: Highcharts.getOptions().colors[2] |
||||
} |
||||
}, |
||||
opposite: true |
||||
}, |
||||
{ |
||||
title: { |
||||
text: 'NPWP s.d.', |
||||
style: { |
||||
color: Highcharts.getOptions().colors[0] |
||||
} |
||||
}, |
||||
labels: { |
||||
style: { |
||||
color: Highcharts.getOptions().colors[0] |
||||
} |
||||
}, |
||||
opposite: true |
||||
} |
||||
], |
||||
|
||||
tooltip: { |
||||
shared: true |
||||
}, |
||||
legend: { |
||||
layout: 'horizontal', |
||||
align: 'center', |
||||
|
||||
verticalAlign: 'top', |
||||
backgroundColor: |
||||
Highcharts.defaultOptions.legend.backgroundColor || // theme
|
||||
'rgba(255,255,255,0.25)' |
||||
}, |
||||
plotOptions: { |
||||
series: { |
||||
cursor: 'pointer', |
||||
point: { |
||||
events: { |
||||
click: function () { |
||||
// console.log(this)
|
||||
if (this.series.userOptions.seriesType === 'npwp_bulan') { |
||||
setQuery(this.index + 1) |
||||
setVisibleSidebar(true) |
||||
} else { |
||||
return |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'NPWP', |
||||
seriesType: 'npwp_bulan', |
||||
type: 'column', |
||||
yAxis: 0, |
||||
color: Highcharts.getOptions().colors[2], |
||||
data: data.npwp, |
||||
marker: { |
||||
enabled: true |
||||
}, |
||||
tooltip: { |
||||
valueSuffix: ' NPWP' |
||||
} |
||||
}, |
||||
|
||||
{ |
||||
name: 'NPWP akumulasi', |
||||
seriesType: 'npwp_bulan_akumulasi', |
||||
type: 'spline', |
||||
yAxis: 1, |
||||
data: data.npwp_akum, |
||||
marker: { |
||||
enabled: true |
||||
}, |
||||
tooltip: { |
||||
valueSuffix: ' NPWP' |
||||
} |
||||
// visible: false
|
||||
} |
||||
] |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} /> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default PenambahanWpBayar |
||||
@ -0,0 +1,262 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react' |
||||
import ReactDOM from 'react-dom' |
||||
import { store } from '../kytp/store/store' |
||||
import { Provider, useDispatch, useSelector } from 'react-redux' |
||||
import { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap' |
||||
import collect from 'collect.js' |
||||
import { MultiSelect } from 'react-multi-select-component' |
||||
import { Toast } from 'primereact/toast' |
||||
import { Button as ButtonP } from 'primereact/button' |
||||
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css' |
||||
import 'primeflex/primeflex.css' |
||||
import Tanggal from '../commons/Tanggal' |
||||
import jquery, { data, getJSON } from 'jquery' |
||||
import Kanwil from './componentMonitoring/Kanwil' |
||||
import Kpp from './componentMonitoring/Kpp' |
||||
import Seksi from './componentMonitoring/Seksi' |
||||
import { TabPanel, TabView } from 'primereact/tabview' |
||||
import Pegawai from './componentMonitoring/Pegawai' |
||||
import { setDataMonitoringPerubahanPerilakuPenambahanWpBayar, setDataUrut, setDataUrutPerubahanPerilakuPenambahanWpBayar } from '../kytp/store/KpdlStore' |
||||
import { Skeleton } from 'primereact/skeleton' |
||||
import { Calendar } from 'primereact/calendar' |
||||
import PenambahanWpBayar from './grafik/PenambahanWpBayar' |
||||
const date = new Date() |
||||
|
||||
const App = () => { |
||||
const base_url = '/engineN/' |
||||
const toast = useRef(null) |
||||
const [active, setActive] = useState(0) |
||||
const refTab = useRef() |
||||
const toggle = (tab) => { |
||||
setActive(tab) |
||||
} |
||||
const [kanwil, setKanwil] = useState([]) |
||||
const [kanwilSelected, setKanwilSelected] = useState([]) |
||||
const [kpp, setKpp] = useState([]) |
||||
const [kppSelected, setKppSelected] = useState([]) |
||||
const [tanggalAwal, setTanggalAwal] = useState(new Date(date.getFullYear(), 0, 1).toISOString()) |
||||
const [tanggalAkhir, setTanggalAkhir] = useState(date.toISOString()) |
||||
const [paramSelected, setParamSelected] = useState({}) |
||||
const [loading, setLoading] = useState(false) |
||||
const storeKpdl = useSelector((state) => state.kpdl) |
||||
const dispatch = useDispatch() |
||||
const [tahun, setTahun] = useState(new Date(date.getFullYear(), 0, 1)) |
||||
useEffect(() => { |
||||
jquery.ajax({ |
||||
url: base_url + 'kewilayahan/ref/kanwil', |
||||
method: 'GET', |
||||
dataType: 'json', |
||||
success: (data) => { |
||||
setKanwil(data) |
||||
} |
||||
}) |
||||
}, []) |
||||
|
||||
useEffect(() => { |
||||
const kanwil = collect(kanwilSelected).pluck('value').all() |
||||
setKppSelected([]) |
||||
setKpp([]) |
||||
|
||||
if (!kanwil.length) { |
||||
return |
||||
} |
||||
jquery.ajax({ |
||||
url: base_url + 'kewilayahan/ref/kppmultikanwil', |
||||
method: 'POST', |
||||
dataType: 'json', |
||||
data: { |
||||
kanwil |
||||
}, |
||||
success: (data) => { |
||||
setKpp(data) |
||||
} |
||||
}) |
||||
}, [kanwilSelected]) |
||||
|
||||
const buttonProsesOnClick = () => { |
||||
// console.log(tahun.getFullYear)
|
||||
if (!kppSelected.length) { |
||||
return toast.current.show({ severity: 'info', summary: 'Info', detail: 'KPP harus dipilih' }) |
||||
} |
||||
|
||||
if (!tahun) { |
||||
return toast.current.show({ severity: 'info', summary: 'Info', detail: 'Periode Awal harus dipilih' }) |
||||
} |
||||
|
||||
setActive(0) |
||||
setParamSelected({ |
||||
kanwilSelected, |
||||
kppSelected, |
||||
tahun |
||||
}) |
||||
|
||||
const kanwil = collect(kanwilSelected).pluck('value').all() |
||||
const kpp = collect(kppSelected).pluck('value').all() |
||||
setLoading(true) |
||||
jquery |
||||
.ajax({ |
||||
url: base_url + 'kewilayahan/monitoring/perubahanperilaku/penambahananwpbayar', |
||||
method: 'POST', |
||||
dataType: 'json', |
||||
data: { |
||||
kanwil, |
||||
kpp, |
||||
tahun: tahun.getFullYear() |
||||
}, |
||||
success: (dataReturn) => { |
||||
dispatch(setDataMonitoringPerubahanPerilakuPenambahanWpBayar(dataReturn.data)) |
||||
dispatch( |
||||
setDataUrutPerubahanPerilakuPenambahanWpBayar({ |
||||
urutKanwil: dataReturn.urutKanwil, |
||||
urutKpp: dataReturn.urutKpp, |
||||
urutSeksi: dataReturn.urutSeksi, |
||||
urutPegawai: dataReturn.urutPegawai |
||||
}) |
||||
) |
||||
} |
||||
}) |
||||
.done(() => { |
||||
setLoading(false) |
||||
}) |
||||
} |
||||
useEffect(() => { |
||||
let judul = document.getElementById('judul') |
||||
judul.innerHTML = '<h3><b><strong>E-Geospatial Thematic Tax</strong></b></h3>' |
||||
}, []) |
||||
return ( |
||||
<> |
||||
<Card> |
||||
<CardHeader className="pb-1"> |
||||
<CardTitle tag={'h5'}>Pilih Unit Kerja Pengampu</CardTitle> |
||||
</CardHeader> |
||||
<CardBody className="pt-1"> |
||||
<Row className="mt-2"> |
||||
<Col md="3"> |
||||
<Label className="form-label" for="Pilih Kanwil"> |
||||
Kanwil |
||||
</Label> |
||||
<MultiSelect |
||||
className="me-1 w-full multi-select" |
||||
hasSelectAll={true} |
||||
debounceDuration={300} |
||||
options={kanwil} |
||||
value={kanwilSelected} |
||||
onChange={(e) => { |
||||
setKanwilSelected(e) |
||||
}} |
||||
labelledBy="Pilih Kanwil" |
||||
overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Kanwil' }} |
||||
/> |
||||
</Col> |
||||
<Col md="3"> |
||||
<Label className="form-label" for="Pilih KPP"> |
||||
KPP |
||||
</Label> |
||||
<MultiSelect |
||||
className="me-1 w-full multi-select" |
||||
hasSelectAll={true} |
||||
debounceDuration={300} |
||||
options={kpp} |
||||
value={kppSelected} |
||||
onChange={(e) => { |
||||
setKppSelected(e) |
||||
}} |
||||
labelledBy="Pilih KPP" |
||||
overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih KPP' }} |
||||
/> |
||||
</Col> |
||||
<Col md="2"> |
||||
<Label className="form-label" for="Pilih Tahun"> |
||||
Tahun |
||||
</Label> |
||||
<Calendar |
||||
ariaLabel="Pilih Tahun" |
||||
value={tahun} |
||||
onChange={(e) => { |
||||
console.log(e) |
||||
setTahun(e.value) |
||||
}} |
||||
view="year" |
||||
dateFormat="yy" |
||||
minDate={new Date('2024-01-01')} |
||||
maxDate={new Date(date.getFullYear() + 1, 0, 1)} |
||||
/> |
||||
{/* <Tanggal setValue={setTanggalAwal} value={tanggalAwal} startOrEnd={'Periode Awal'} /> */} |
||||
</Col> |
||||
<Col md="2">{/* <Tanggal setValue={setTanggalAkhir} value={tanggalAkhir} startOrEnd={'Periode Akhir'} /> */}</Col> |
||||
<Col md="2" className="pt-4"> |
||||
<ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" /> |
||||
</Col> |
||||
</Row> |
||||
</CardBody> |
||||
</Card> |
||||
<Card> |
||||
<CardBody className="pb-1"> |
||||
<h5> |
||||
Monitoring Perubahan Perilaku WP: <small>Semula tidak bayar menjadi bayar</small> |
||||
</h5> |
||||
<CardSubtitle className="pb-0 mb-0 text-red-400">Berdasarkan assignment WP sesuai dengan lingkup pilihan pencarian</CardSubtitle> |
||||
</CardBody> |
||||
<CardBody className="pt-1"> |
||||
{loading ? ( |
||||
<Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton> |
||||
) : ( |
||||
<> |
||||
<Row> |
||||
<Col md="12"> |
||||
<TabView |
||||
activeIndex={active} |
||||
scrollable |
||||
onTabChange={(e) => setActive(e.index)} |
||||
className="p-0" |
||||
pt={{ panelContainer: { className: 'p-0' } }} |
||||
> |
||||
<TabPanel id="tab_1" header="Kanwil" className="p-0"> |
||||
<Kanwil /> |
||||
</TabPanel> |
||||
<TabPanel id="tab_2" header="KPP" className="p-0"> |
||||
<Kpp /> |
||||
</TabPanel> |
||||
|
||||
<TabPanel id="tab_3" header="Seksi" className="p-0"> |
||||
<Seksi /> |
||||
</TabPanel> |
||||
|
||||
<TabPanel id="tab_4" header="Aktor" className="p-0"> |
||||
<Pegawai /> |
||||
</TabPanel> |
||||
</TabView> |
||||
</Col> |
||||
</Row> |
||||
</> |
||||
)} |
||||
</CardBody> |
||||
</Card> |
||||
<Card> |
||||
<CardBody className="mt-4"> |
||||
{loading ? ( |
||||
<Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton> |
||||
) : ( |
||||
<Row> |
||||
<Col md="12"> |
||||
<PenambahanWpBayar /> |
||||
</Col> |
||||
</Row> |
||||
)} |
||||
</CardBody> |
||||
</Card> |
||||
<Row> |
||||
<Toast ref={toast} /> |
||||
</Row> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const container = document.getElementById('app') |
||||
const component = ( |
||||
<Provider store={store}> |
||||
<App /> |
||||
</Provider> |
||||
) |
||||
|
||||
ReactDOM.render(component, container) |
||||
@ -0,0 +1,40 @@
|
||||
<link rel="stylesheet" href="<?=base_url('public/kpdl/dist/monitoring.css')?>">
|
||||
|
||||
<style> |
||||
.highcharts-credits{ |
||||
visibility: hidden; |
||||
} |
||||
.tanggal { |
||||
min-height: 40px; |
||||
} |
||||
.multi-select { |
||||
.dropdown-content{ |
||||
z-index: 5 !important; |
||||
} |
||||
} |
||||
.mantine-TableHeadCell-Content-Labels { |
||||
padding-left: 0; |
||||
} |
||||
</style> |
||||
|
||||
<?php |
||||
helper('Kpdl'); |
||||
?> |
||||
|
||||
<div class="main-content"> |
||||
<div class="container-fluid"> |
||||
<div id="app"></div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<?php $isDevelopment = ENVIRONMENT === 'development';?> |
||||
|
||||
<!-- src="<=base_url('public/kpdl/dist/monitoring.js')?>"> --> |
||||
<script type="text/javascript"> |
||||
<?php echo view('kewilayahan/dist/monitoring-perubahan-perilaku.js') ?> |
||||
</script> |
||||
|
||||
<?php echo view('inc/js.php') ?> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue