menu monitoring perubahan

app/Controllers/Kewilayahan/IdentAktifitasHasil/IdentifikasiLapangan.php

@@ -462,6 +462,8 @@ class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
                     $data->like("UPPER(E.NAMA)", strtoupper($value->value), 'both');
                 } else if ($value->id == 'NAMA') {
                     $data->like("UPPER(A.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
                 } else {
                     $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
                 }
@@ -477,6 +479,8 @@ class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
                     $data->orderBy("E.NAMA", $value->desc ? 'desc' : 'asc');
                 } else if ($value->id == 'NAMA') {
                     $data->orderBy("A.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
                 } else {
                     $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
                 }

app/Controllers/Kewilayahan/Monitoring/Kegiatan.php

@@ -1,5 +1,5 @@
 <?php
-namespace App\Controllers\Kewilayahan;
+namespace App\Controllers\Kewilayahan\Monitoring;
 
 use App\Libraries\AldLibrary;
 use CodeIgniter\API\ResponseTrait;
@@ -7,7 +7,7 @@ use CodeIgniter\Controller;
 use DateTime;
 use DateTimeZone;
 
-class Monitoring extends Controller
+class Kegiatan extends Controller
 {
 
     use ResponseTrait;

app/Controllers/Kewilayahan/Monitoring/PerubahanPerilaku.php

@@ -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;
+    }
+
+}

app/Controllers/Kewilayahan/Sebaran/Identifikasi.php

@@ -328,8 +328,9 @@ class Identifikasi extends \App\Controllers\Kewilayahan\Kytp
                     $data->like("UPPER(E.NAMA)", strtoupper($value->value), 'both');
                 } else if ($value->id == 'NAMA') {
                     $data->like("UPPER(A.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
                 } else {
-
                     $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
                 }
             }
@@ -344,6 +345,8 @@ class Identifikasi extends \App\Controllers\Kewilayahan\Kytp
                     $data->orderBy("E.NAMA", $value->desc ? 'desc' : 'asc');
                 } else if ($value->id == 'NAMA') {
                     $data->orderBy("A.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
                 } else {
 
                     $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');

app/Views/inc/sidebar.php

@@ -79,12 +79,23 @@
                             <a href="<?=base_url()?>kewilayahan/kytp" class="menu-item">Dashboard Matoa</a>
                         </div>
                         <div class="submenu-content">
-                            <a href="<?=base_url()?>kewilayahan/monitoring" class="menu-item">Monitoring Kegiatan</a>
+                            <a href="<?=base_url()?>kewilayahan/peta" class="menu-item">Peta</a>
                         </div>
                         <div class="submenu-content">
-                            <a href="<?=base_url()?>kewilayahan/peta" class="menu-item">Peta</a>
+                            <div class="nav-item has-sub">
+                                <a href="#"><i class="ik ik-circle"></i><span>Monitoring</span></a>
+                                    <div class="submenu-content">
+                                        <a href="<?=base_url()?>kewilayahan/monitoring/kegiatan" class="menu-item">Kegiatan</a>
+                                    </div>
+                                    <div class="submenu-content">
+                                        <a href="<?=base_url()?>kewilayahan/monitoring/perubahanperilaku" class="menu-item">Perubahan Perilaku</a>
                                     </div>
                             </div>
+                        </div>
+
+
+
+                    </div>
 
 
                     <div class="nav-item has-sub">

app/Views/kewilayahan/kytp/componentPenugasanAktifitas/PerubahanPerilaku.js

@@ -67,6 +67,13 @@ const PerubahanPerilaku = ({ dataSend }) => {
   //   const filtered = kpdlStore.progresifitasPembayaran ? kpdlStore.progresifitasPembayaran.filter((val, key) => val.color === 'black') : 0
   //   // console.log({ filtered })
   // }, [kpdlStore])
+
+  function renderPct() {
+    const data1 = kpdlStore.progresifitasPembayaran
+    const filtered = data1.filter((val, idx) => val.color === 'grey')
+    console.log(filtered)
+    return 'aaa'
+  }
   return (
     <>
       <Row>
@@ -99,7 +106,7 @@ const PerubahanPerilaku = ({ dataSend }) => {
                   </div>
                 </div>
                 <span className="text-green-500 font-medium">Rp {format_angka(data?.pembayaranRupiah ?? 0)}</span>
-                {/* <span className="text-500">since last visit</span> */}
+                <span className="text-500">{renderPct}</span>
               </div>
             </div>
             <div className="col-12 md:col-6 lg:col-3">

app/Views/kewilayahan/kytp/componentProgresifitas/Pengampu.js

@@ -1,7 +1,7 @@
 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 { Col, Row, Table } from 'reactstrap'
 import { format_angka } from '../util'
 import collect from 'collect.js'
 import jquery from 'jquery'
@@ -10,7 +10,7 @@ import { Sidebar } from 'primereact/sidebar'
 import '/node_modules/primeflex/primeflex.css'
 import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
 import { Text } from '@mantine/core'
-
+import { Dialog } from 'primereact/dialog'
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 var relativeTime = require('dayjs/plugin/relativeTime')
@@ -38,6 +38,7 @@ const Pengampu = ({ dataSend }) => {
         ...dataSend
       },
       success: (data) => {
+        console.log({ data })
         setDataAssign(data.assign)
         setDataUnAssign(data.unassign)
       }
@@ -56,8 +57,9 @@ const Pengampu = ({ dataSend }) => {
         height: '300'
       },
       title: {
-        text: title,
+        text: title === 'KPP Terdaftar' ? '<span class="text-primary cursor-pointer judul_pengampu"><u>' + title + '</u></span>' : title,
-        style: { fontSize: '10px' }
+        useHTML: true,
+        style: { fontSize: '12px' }
       },
       tooltip: {
         pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total NPWP yang ada'
@@ -98,6 +100,16 @@ const Pengampu = ({ dataSend }) => {
       ]
     }
   }
+  const [visibleModal, setVisibleModal] = useState(false)
+  useEffect(() => {
+    const judul = document.querySelector('.judul_pengampu')
+    if (judul) {
+      judul.addEventListener('click', () => {
+        // console.log('ya')
+        setVisibleModal(true)
+      })
+    }
+  }, [])
 
   const TableDetailGraph = ({ dataSend, query, jenisChart }) => {
     const tableContainerRef = useRef(null)
@@ -339,6 +351,53 @@ const Pengampu = ({ dataSend }) => {
           </Sidebar>
         </Col>
       </Row>
+      <Row>
+        <Dialog
+          header="Tabel Sebaran Pengampu"
+          visible={visibleModal}
+          style={{ width: '50vw' }}
+          onHide={() => {
+            if (!visibleModal) return
+            setVisibleModal(false)
+          }}
+        >
+          <Row>
+            <Col md="12">
+              <Table bordered>
+                <thead>
+                  <tr>
+                    <th>No</th>
+                    <th>KPP</th>
+                    <th>Jumlah</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {dataAssign &&
+                    dataAssign.map((val, idx) => {
+                      return (
+                        <tr key={idx}>
+                          <td className="text-center">{idx + 1}</td>
+                          <td>{val.name}</td>
+                          <td
+                            className="text-center text-primary cursor-pointer underline"
+                            onClick={() => {
+                              setQuery(val.key)
+                              setJenisChart('KPP Terdaftar')
+                              setVisibleSidebar(true)
+                            }}
+                          >
+                            {val.y}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                </tbody>
+                <tfoot></tfoot>
+              </Table>
+            </Col>
+          </Row>
+        </Dialog>
+      </Row>
     </>
   )
 }

app/Views/kewilayahan/kytp/componentProgresifitas/ZonaPengawasan.js

@@ -1,7 +1,7 @@
 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 { Col, Row, Table } from 'reactstrap'
 import { format_angka } from '../util'
 import collect from 'collect.js'
 import jquery from 'jquery'
@@ -10,7 +10,7 @@ import { Sidebar } from 'primereact/sidebar'
 import '/node_modules/primeflex/primeflex.css'
 import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
 import { Text } from '@mantine/core'
-
+import { Dialog } from 'primereact/dialog'
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 var relativeTime = require('dayjs/plugin/relativeTime')
@@ -53,7 +53,8 @@ const ZonaPengawasan = ({ dataSend }) => {
         height: '300'
       },
       title: {
-        text: title,
+        text: '<span class="text-primary cursor-pointer judul_zona"><u>' + title + '</u></span>',
+        useHTML: true,
         style: { fontSize: '10px' }
       },
       tooltip: {
@@ -94,7 +95,16 @@ const ZonaPengawasan = ({ dataSend }) => {
       ]
     }
   }
-
+  const [visibleModal, setVisibleModal] = useState(false)
+  useEffect(() => {
+    const judul = document.querySelector('.judul_zona')
+    if (judul) {
+      judul.addEventListener('click', () => {
+        // console.log('ya')
+        setVisibleModal(true)
+      })
+    }
+  }, [])
   const TableDetailGraph = ({ dataSend, query }) => {
     const tableContainerRef = useRef(null)
     const rowVirtualizerInstanceRef = useRef(null)
@@ -359,6 +369,52 @@ const ZonaPengawasan = ({ dataSend }) => {
           </Sidebar>
         </Col>
       </Row>
+      <Row>
+        <Dialog
+          header="Tabel Sebaran Pengampu"
+          visible={visibleModal}
+          style={{ width: '50vw' }}
+          onHide={() => {
+            if (!visibleModal) return
+            setVisibleModal(false)
+          }}
+        >
+          <Row>
+            <Col md="12">
+              <Table bordered>
+                <thead>
+                  <tr>
+                    <th>No</th>
+                    <th>KPP</th>
+                    <th>Jumlah</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {dataAll &&
+                    dataAll.map((val, idx) => {
+                      return (
+                        <tr key={idx}>
+                          <td className="text-center">{idx + 1}</td>
+                          <td>{val.name}</td>
+                          <td
+                            className="text-center text-primary cursor-pointer underline"
+                            onClick={() => {
+                              setQuery(val.key)
+                              setVisibleSidebar(true)
+                            }}
+                          >
+                            {val.y}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                </tbody>
+                <tfoot></tfoot>
+              </Table>
+            </Col>
+          </Row>
+        </Dialog>
+      </Row>
     </>
   )
 }

app/Views/kewilayahan/kytp/store/KpdlStore.js

@@ -4,7 +4,9 @@ export const kpdlSlice = createSlice({
   initialState: {
     selectedOpsi: null,
     dataMonitoring: [],
+    dataMonitoringPerubahanPerilakuPenambahanWpBayar: [],
     dataUrut: { urutKanwil: [], urutKpp: [], urutSeksi: [], urutPegawai: [] },
+    dataUrutPerubahanPerilakuPenambahanWpBayar: { urutKanwil: [], urutKpp: [], urutSeksi: [], urutPegawai: [] },
     progresifitasPembayaran: null
   },
   reducers: {
@@ -14,15 +16,28 @@ export const kpdlSlice = createSlice({
     setDataMonitoring: (state, action) => {
       state.dataMonitoring = action.payload
     },
+    setDataMonitoringPerubahanPerilakuPenambahanWpBayar: (state, action) => {
+      state.dataMonitoringPerubahanPerilakuPenambahanWpBayar = action.payload
+    },
     setDataUrut: (state, action) => {
       state.dataUrut = action.payload
     },
+    setDataUrutPerubahanPerilakuPenambahanWpBayar: (state, action) => {
+      state.dataUrutPerubahanPerilakuPenambahanWpBayar = action.payload
+    },
     setProgresifitasPembayaran: (state, action) => {
       state.progresifitasPembayaran = action.payload
     }
   }
 })
 
-export const { setSelectedOpsi, setDataMonitoring, setDataUrut, setProgresifitasPembayaran } = kpdlSlice.actions
+export const {
+  setSelectedOpsi,
+  setDataMonitoring,
+  setDataUrut,
+  setProgresifitasPembayaran,
+  setDataUrutPerubahanPerilakuPenambahanWpBayar,
+  setDataMonitoringPerubahanPerilakuPenambahanWpBayar
+} = kpdlSlice.actions
 
 export default kpdlSlice.reducer

app/Views/kewilayahan/monitoring/index.js

@@ -95,7 +95,7 @@ const App = () => {
     setLoading(true)
     jquery
       .ajax({
-        url: base_url + 'kewilayahan/monitoring/data',
+        url: base_url + 'kewilayahan/monitoring/kegiatan/data',
         method: 'POST',
         dataType: 'json',
         data: {

app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Kanwil.js

@@ -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

app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Kpp.js

@@ -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

app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Pegawai.js

@@ -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

app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Seksi.js

@@ -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

app/Views/kewilayahan/monitoringPerubahanPerilaku/grafik/PenambahanWpBayar.js

@@ -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

app/Views/kewilayahan/monitoringPerubahanPerilaku/index.js

@@ -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)

app/Views/kewilayahan/monitoringPerubahanPerilaku/monitoring.php

@@ -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') ?>

app/Views/kewilayahan/peta/components/NipPengampu.js

@@ -8,7 +8,7 @@ import jquery from 'jquery'
 import collect from 'collect.js'
 
 import { useDispatch, useSelector } from 'react-redux'
-import { setSelectedOpsi } from '../../kytp/store/PetaStore'
+import { setCqlFilterWilayah, setSelectedOpsi } from '../../kytp/store/PetaStore'
 import { matoaLayers } from '../layers/overlayLayers'
 import { useMap } from 'react-leaflet'
 const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi, setIsOpenPopUpWilayah, refFeatureBawah }) => {
@@ -26,6 +26,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
   const [seksiSelected, setSeksiSelected] = useState([])
   const [arSelected, setArSelected] = useState([])
   const base_url = '/engineN/'
+
   useEffect(() => {
     jquery.ajax({
       url: base_url + 'kewilayahan/ref/kanwil',
@@ -104,6 +105,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
       setDataSend({ opsiWilZona: dataOpsi.pengampu.key, nip_ar_pengampu })
       const par_pengampu = nip_ar_pengampu2.join("','")
       const cq_filter_poi = "NIP_AR_PENGAMPU in ('" + par_pengampu + "')"
+      dispatch(setCqlFilterWilayah(cq_filter_poi))
       matoaLayers.poiMatoaNpwpLayer.setParams({
         styles: 'poi_matoa_npwp',
         cql_filter: cq_filter_poi,
@@ -122,6 +124,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
       toast.current.show({ severity: 'info', summary: 'Info', detail: 'AR Pengampu harus dipilih' })
     }
   }
+
   return (
     <>
       <Row>

app/Views/kewilayahan/peta/components/NipPerekam.js

@@ -7,7 +7,7 @@ import { isObjEmpty } from '../../kytp/util'
 import jquery from 'jquery'
 import collect from 'collect.js'
 import { useDispatch, useSelector } from 'react-redux'
-import { setSelectedOpsi } from '../../kytp/store/PetaStore'
+import { setCqlFilterWilayah, setSelectedOpsi } from '../../kytp/store/PetaStore'
 import { matoaLayers } from '../layers/overlayLayers'
 import { useMap } from 'react-leaflet'
 
@@ -109,6 +109,8 @@ const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMat
 
       const par_perekam = nip_ar_perekam2.join("','")
       const cq_filter_poi = "CREATED_BY in ('" + par_perekam + "')"
+      dispatch(setCqlFilterWilayah(cq_filter_poi))
+
       matoaLayers.poiMatoaNpwpLayer.setParams({
         styles: 'poi_matoa_npwp',
         cql_filter: cq_filter_poi,

webpack-dev.config2.js

@@ -31,6 +31,7 @@ module.exports = {
   entry: {
     kpdl: './app/Views/kewilayahan/kytp/kpdl.js',
     monitoring: './app/Views/kewilayahan/monitoring/index.js',
+    'monitoring-perubahan-perilaku': './app/Views/kewilayahan/monitoringPerubahanPerilaku/index.js',
     peta: './app/Views/kewilayahan/peta/peta.js'
   },
   output: {

webpack.config.js

@@ -21,6 +21,7 @@ module.exports = {
   entry: {
     kpdl: './app/Views/kewilayahan/kytp/kpdl.js',
     monitoring: './app/Views/kewilayahan/monitoring/index.js',
+    'monitoring-perubahan-perilaku': './app/Views/kewilayahan/monitoringPerubahanPerilaku/index.js',
     peta: './app/Views/kewilayahan/peta/peta.js'
   },
   output: {