feature add click detail chart

app/Config/App.php

@@ -16,7 +16,7 @@ class App extends BaseConfig
      *
      *    http://example.com/
      */
-    public $baseURL = BASEURL .'/engineN';
+    public $baseURL = BASEURL . '/engineN';
 
     /**
      * Allowed Hostnames in the Site URL other than the hostname in the baseURL.

app/Controllers/Kewilayahan/IdentAktifitasHasil/IdentifikasiLapangan.php

@@ -0,0 +1,270 @@
+<?php
+namespace App\Controllers\Kewilayahan\IdentAktifitasHasil;
+
+use App\Libraries\AldLibrary;
+use App\Libraries\KpdlLibrary;
+
+class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
+
+{
+
+    protected function dataKpdl($request, $bulan)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+
+        $opsiWilZona = $Ald->decryptMe($request->getPost('opsiWilZona'), $username);
+        $adm4_pcode  = [];
+        foreach ($request->getPost('adm4_pcode') ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->getPost('id_poly_zona') ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->getPost('nip_ar_perekam') ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->getPost('nip_ar_pengampu') ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $db          = \Config\Database::connect();
+        $KpdlLibrary = new KpdlLibrary;
+        if ($bulan == 'semua') {
+
+            $npwp = $db->table('KPDL_MV_JML_KPDL A')
+                ->select('BULAN, SUM(JML) JML')
+                ->where("TAHUN =" . date('Y'))
+                ->where('BULAN <=', date('m'))
+                ->groupBy('BULAN');
+
+            if ($opsiWilZona == 'wilayah') {
+                $npwp = $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+            }
+
+            if ($opsiWilZona == 'zona') {
+                $npwp = $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+            }
+            if ($opsiWilZona == 'perekam') {
+                $npwp = $npwp->whereIn('NIP_PEREKAM', $nip_ar_perekam);
+            }
+
+            if ($opsiWilZona == 'pengampu') {
+                $npwp = $npwp->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+            }
+
+            $npwp = $npwp->getCompiledSelect();
+
+            $data = $db->table('BULAN A')
+                ->select("A.KODE as BULAN, C.JML")
+                ->join("(" . $npwp . ") C", 'A.KODE = C.BULAN', 'left')
+                ->orderBy('BULAN');
+
+            return $KpdlLibrary->single_array($data->get()->getResult(), 'JML');
+
+        } else {
+            $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
+            $generateTgl = "SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
+                                FROM
+                                dual
+                                CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1)";
+
+            $data = $db->table('KPDL_MV_LOKASI_SUBJEK B')
+                ->select("TO_CHAR(CREATION_DATE,'DD') as TGL, COUNT(1) JML")
+                ->where("to_char(CREATION_DATE,'YYYY') = ", date('Y'))
+                ->where("to_char(CREATION_DATE,'MM') = " . $bulan)
+                ->groupBy("TO_CHAR(CREATION_DATE,'DD')");
+
+            if ($opsiWilZona == 'wilayah') {
+                $data = $data->whereIn('ADM4_PCODE', $adm4_pcode);
+            }
+
+            if ($opsiWilZona == 'zona') {
+                $data = $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+            }
+
+            if ($opsiWilZona == 'perekam') {
+                $data = $data->whereIn('CREATED_BY', $nip_ar_perekam);
+            }
+
+            if ($opsiWilZona == 'pengampu') {
+                $data = $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+            }
+
+            $data = $data->getCompiledSelect();
+
+            $dataRet = $db->newQuery()
+                ->select("A.TGL, B.JML")
+                ->from("(" . $generateTgl . ") A")
+                ->join("(" . $data . ") B", "A.TGL = B.TGL", 'left')
+                ->orderBy("TGL");
+
+            return $KpdlLibrary->single_array($dataRet->get()->getResult(), 'JML');
+        }
+    }
+
+    protected function generateSeries($bulan)
+    {
+        $db          = \Config\Database::connect();
+        $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
+        $generateTgl = $db->query("SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
+                    FROM
+                    dual
+                    CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1) ORDER BY TGL");
+
+        $data     = $generateTgl->getResult();
+        $data_arr = [];
+        foreach ($data as $row) {
+            array_push($data_arr, $row->TGL);
+        }
+        return $data_arr;
+    }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        $size     = $this->request->getGet('size');
+        $size     = ($size > 101) ? 101 : $size;
+        $request  = json_decode(file_get_contents('php://input'));
+
+        $selectedBulan = $Ald->decryptKpdl($request->selectedBulan ?? '', $username) ?? 'semua'; // 1 - 12 / semua
+        $query         = $request->query; //bulan (1-12) / tanggal (1-31)
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A');
+        $data->join('KPDL_REF_STATUS_SPT', 'ID_STATUS_SPT = STATUS_SPT_TAHUNAN_TERAKHIR', 'left');
+        $data->join('PEGAWAI C', 'NIP_AR_ZONA = C.NIP9', 'left');
+        $data->join('KPDL_MV_OBJEK_PERSUBJEK D', 'A.ID_KPDL_SUBJEK = D.ID_KPDL_SUBJEK', 'left');
+        $data->join('PEGAWAI E', 'NIP_AR_PENGAMPU = E.NIP9', 'left');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+
+        $data->where("TO_CHAR(CREATION_DATE,'YYYY')", date('Y'));
+
+        if ($selectedBulan == 'semua') {
+            $data->where("TO_CHAR(CREATION_DATE,'MM')", sprintf("%02d", $query));
+        } else {
+            $data->where("TO_CHAR(CREATION_DATE,'DD')", sprintf("%02d", $query));
+            $data->where("TO_CHAR(CREATION_DATE,'MM')", sprintf("%02d", $selectedBulan));
+        }
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA", "ALAMAT", "MERK_USAHA"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->like("UPPER(C.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NM_AR_PENGAMPU') {
+                    $data->like("UPPER(E.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NAMA') {
+                    $data->like("UPPER(A.NAMA)", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->orderBy("C.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA_AR_PENGAMPU') {
+                    $data->orderBy("E.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA') {
+                    $data->orderBy("A.NAMA", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data->select('count(1) as JML');
+            return $data->get();
+        }
+        if ($type == 'raw') {
+
+            $data->select("UUID, A.NAMA,GEO_LOK_LAT, GEO_LOK_LING,ALAMAT, PROVINSI, KABUPATEN, KECAMATAN, KELURAHAN, RT, RW,
+            A.NPWP, NO_IDENTITAS, MERK_USAHA, NM_KANTOR_PENGAMPU, JUMLAH_PEMBAYARAN_THN_TERAKHIR,STATUS_SPT_TAHUNAN_TERAKHIR,
+            NM_KPP_ZONA ,NIP_AR_ZONA, NM_PEREKAM, KPP_ADM_PEREKAM,
+            TO_CHAR(CREATION_DATE, 'YYYY-MM-DD HH24:II:SS')CREATION_DATE, KETERANGAN,
+            C.NAMA NM_AR_ZONA, E.NAMA NM_AR_PENGAMPU, STATUS_WP_MFWP,JNS_WP_MFWP, COALESCE(D.SUM_NILAI,0) SUM_NILAI
+            ");
+            // print_r($data->getCompiledSelect());
+            // exit;
+
+            return $data->get($size - 1, $start);
+        }
+
+    }
+
+}

app/Controllers/Kewilayahan/Kytp.php

@@ -1,8 +1,9 @@
 <?php
 namespace App\Controllers\Kewilayahan;
 
+use App\Controllers\Kewilayahan\IdentAktifitasHasil\IdentifikasiLapangan;
+use App\Controllers\Kewilayahan\PoiGoogleMatoa\PoiGoogleMatoa;
 use App\Controllers\Kewilayahan\Sebaran\Identifikasi;
-use App\Controllers\Kewilayahan\Sebaran\IdentifikasiLapangan;
 use App\Controllers\Kewilayahan\Sebaran\JenisStatus;
 use App\Controllers\Kewilayahan\Sebaran\KLU;
 use App\Controllers\Kewilayahan\Sebaran\PayComp;
@@ -47,9 +48,9 @@ class Kytp extends Controller
             $dataReturn['poi_agg']  = [];
             $dataReturn['kpdl_agg'] = [];
         } else {
-
+            $poi                    = new PoiGoogleMatoa;
-            $dataReturn['poi_agg']  = $this->get_poi_agg();
+            $dataReturn['poi_agg']  = $poi->get_poi_agg($this->request);
-            $dataReturn['kpdl_agg'] = $this->get_kpdl_agg();
+            $dataReturn['kpdl_agg'] = $poi->get_kpdl_agg($this->request);
         }
         return json_encode($dataReturn);
     }
@@ -217,90 +218,6 @@ class Kytp extends Controller
 
     }
 
-    private function get_poi_agg()
-    {
-        ini_set('max_input_vars', 3000);
-        $Ald      = new AldLibrary();
-        $username = session('nip');
-
-        $opsiWilZona = $Ald->decryptMe($this->request->getPost('opsiWilZona'), $username) ?? null;
-
-        $adm4_pcode = [];
-
-        foreach ($this->request->getPost('adm4_pcode') ?? [] as $key => $value) {
-            array_push($adm4_pcode, $Ald->decryptKpdl($value, $username));
-        }
-
-        $id_poly_zona = [];
-        foreach ($this->request->getPost('id_poly_zona') ?? [] as $key => $value) {
-            array_push($id_poly_zona, $Ald->decryptKpdl($value, $username));
-        }
-
-        $db          = \Config\Database::connect();
-        $sqlGenerate = $db->table("KPDL_MV_JML_POI_AGG")
-            ->select("BULAN, sum(JML) as JML")
-            ->where('TAHUN =', date('Y'))
-            ->where('BULAN <=', (int) date('m'))
-            ->groupBy('BULAN');
-        if ($opsiWilZona == 'wilayah') {
-            $sqlGenerate->whereIn('ADM4_PCODE', $adm4_pcode);
-        }
-        if ($opsiWilZona == 'zona') {
-            $sqlGenerate->whereIn('ID_POLY_ZONA', $id_poly_zona);
-        }
-
-        $sqlGenerate = $sqlGenerate->getCompiledSelect();
-
-        $data = $db->table("BULAN a")
-            ->select("KODE as BULAN, JML")
-            ->join("(" . $sqlGenerate . ") b", "KODE = BULAN", 'left', false)
-            ->orderBy("BULAN", 'asc', false)->get()->getResult();
-
-        $dataPoiAgg = $this->single_array($data, 'JML');
-        return $dataPoiAgg;
-    }
-
-    private function get_kpdl_agg()
-    {
-        $Ald      = new AldLibrary();
-        $username = session('nip');
-
-        $opsiWilZona = $Ald->decryptMe($this->request->getPost('opsiWilZona'), $username) ?? null;
-
-        $adm4_pcode = [];
-
-        foreach ($this->request->getPost('adm4_pcode') ?? [] as $key => $value) {
-            array_push($adm4_pcode, $Ald->decryptKpdl($value, $username));
-        }
-
-        $id_poly_zona = [];
-        foreach ($this->request->getPost('id_poly_zona') ?? [] as $key => $value) {
-            array_push($id_poly_zona, $Ald->decryptKpdl($value, $username));
-        }
-
-        $db          = \Config\Database::connect();
-        $sqlGenerate = $db->table("KPDL_MV_JML_KPDL_AGG")
-            ->select("BULAN, sum(JML) as JML")
-            ->where('TAHUN =', date('Y'))
-            ->where('BULAN <=', (int) date('m'))
-            ->groupBy('BULAN');
-        if ($opsiWilZona == 'wilayah') {
-            $sqlGenerate->whereIn('ADM4_PCODE', $adm4_pcode);
-        }
-        if ($opsiWilZona == 'zona') {
-            $sqlGenerate->whereIn('ID_POLY_ZONA', $id_poly_zona);
-        }
-
-        $sqlGenerate = $sqlGenerate->getCompiledSelect();
-
-        $data = $db->table("BULAN a")
-            ->select("KODE as BULAN, JML")
-            ->join("(" . $sqlGenerate . ") b", "KODE = BULAN", 'left', false)
-            ->orderBy("BULAN", 'asc', false)->get()->getResult();
-
-        $dataPoiAgg = $this->single_array($data, 'JML');
-        return $dataPoiAgg;
-    }
     private function single_array($a, $key)
     {
         $ret = [];

app/Controllers/Kewilayahan/Peta.php

@@ -0,0 +1,29 @@
+<?php
+namespace App\Controllers\Kewilayahan;
+
+use CodeIgniter\API\ResponseTrait;
+use CodeIgniter\Controller;
+
+class Peta extends Controller
+{
+
+    use ResponseTrait;
+
+    public function index()
+    {
+        // $db   = \Config\Database::connect();
+        // $data = [];
+        // if (session('isLogin')) {
+        //     echo view('inc/head');
+        //     echo view('inc/navbar');
+        //     echo view('inc/sidebar');
+        //     echo view('kewilayahan/kytp/kpdl', $data);
+        //     echo view('inc/footer');
+        // } else {
+        //     return redirect()->to('auth');
+        // }
+
+        return view('kewilayahan/peta/index.html');
+    }
+
+}

app/Controllers/Kewilayahan/PoiGoogleMatoa/PoiGoogleMatoa.php

@@ -0,0 +1,96 @@
+<?php
+namespace App\Controllers\Kewilayahan\PoiGoogleMatoa;
+
+use App\Libraries\AldLibrary;
+use App\Libraries\KpdlLibrary;
+
+class PoiGoogleMatoa extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function get_poi_agg($request)
+    {
+        ini_set('max_input_vars', 3000);
+        $KpdlLib  = new KpdlLibrary();
+        $Ald      = new AldLibrary();
+        $username = session('nip');
+
+        $opsiWilZona = $Ald->decryptMe($request->getPost('opsiWilZona'), $username) ?? null;
+
+        $adm4_pcode = [];
+
+        foreach ($request->getPost('adm4_pcode') ?? [] as $key => $value) {
+            array_push($adm4_pcode, $Ald->decryptKpdl($value, $username));
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->getPost('id_poly_zona') ?? [] as $key => $value) {
+            array_push($id_poly_zona, $Ald->decryptKpdl($value, $username));
+        }
+
+        $db          = \Config\Database::connect();
+        $sqlGenerate = $db->table("KPDL_MV_JML_POI_AGG")
+            ->select("BULAN, sum(JML) as JML")
+            ->where('TAHUN =', date('Y'))
+            ->where('BULAN <=', (int) date('m'))
+            ->groupBy('BULAN');
+        if ($opsiWilZona == 'wilayah') {
+            $sqlGenerate->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+        if ($opsiWilZona == 'zona') {
+            $sqlGenerate->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $sqlGenerate = $sqlGenerate->getCompiledSelect();
+
+        $data = $db->table("BULAN a")
+            ->select("KODE as BULAN, JML")
+            ->join("(" . $sqlGenerate . ") b", "KODE = BULAN", 'left', false)
+            ->orderBy("BULAN", 'asc', false)->get()->getResult();
+
+        $dataPoiAgg = $KpdlLib->single_array($data, 'JML');
+        return $dataPoiAgg;
+    }
+
+    protected function get_kpdl_agg($request)
+    {
+        $Ald      = new AldLibrary();
+        $KpdlLib  = new KpdlLibrary();
+        $username = session('nip');
+
+        $opsiWilZona = $Ald->decryptMe($request->getPost('opsiWilZona'), $username) ?? null;
+
+        $adm4_pcode = [];
+
+        foreach ($request->getPost('adm4_pcode') ?? [] as $key => $value) {
+            array_push($adm4_pcode, $Ald->decryptKpdl($value, $username));
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->getPost('id_poly_zona') ?? [] as $key => $value) {
+            array_push($id_poly_zona, $Ald->decryptKpdl($value, $username));
+        }
+
+        $db          = \Config\Database::connect();
+        $sqlGenerate = $db->table("KPDL_MV_JML_KPDL_AGG")
+            ->select("BULAN, sum(JML) as JML")
+            ->where('TAHUN =', date('Y'))
+            ->where('BULAN <=', (int) date('m'))
+            ->groupBy('BULAN');
+        if ($opsiWilZona == 'wilayah') {
+            $sqlGenerate->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+        if ($opsiWilZona == 'zona') {
+            $sqlGenerate->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $sqlGenerate = $sqlGenerate->getCompiledSelect();
+
+        $data = $db->table("BULAN a")
+            ->select("KODE as BULAN, JML")
+            ->join("(" . $sqlGenerate . ") b", "KODE = BULAN", 'left', false)
+            ->orderBy("BULAN", 'asc', false)->get()->getResult();
+
+        $dataPoiAgg = $KpdlLib->single_array($data, 'JML');
+        return $dataPoiAgg;
+    }
+}

app/Controllers/Kewilayahan/Ref.php

@@ -262,7 +262,7 @@ class Ref extends Controller
                     return $this->respond([], 200);
                 }
 
-                //kasi
+                //ar
                 if (in_array($currentPegawai->KD_JAB_STRUKTURAL, ['602'])) {
                     $data->where('NIP_AR', session('nip'));
                 }
@@ -451,6 +451,18 @@ class Ref extends Controller
         ];
         return $this->respond($data, 200);
     }
+
+    public function user()
+    {
+        $Ald = new AldLibrary();
+
+        $data = [
+            'kppadm' => session('kppadm'),
+        ];
+
+        return $this->respond($data, 200);
+    }
+
     protected function change_case($arr)
     {
         return array_change_key_case($arr, CASE_LOWER);

app/Controllers/Kewilayahan/Sebaran/Identifikasi.php

@@ -59,7 +59,9 @@ class Identifikasi extends \App\Controllers\Kewilayahan\Kytp
 
         foreach ($data as $b) {
 
-            array_push($ret, ['name' => $b->IDENTIFIKASI,
+            array_push($ret, [
+                'key'   => $Ald->encryptKpdl($b->IDENTIFIKASI, $username),
+                'name'  => $b->IDENTIFIKASI,
                 'color' => $b->IDENTIFIKASI == 'NON NPWP' ? 'orange' : 'green',
                 'y'     => floatval($b->JML),
             ]
@@ -68,4 +70,143 @@ class Identifikasi extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        $size     = $this->request->getGet('size');
+        $size     = ($size > 101) ? 101 : $size;
+        $request  = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptKpdl($request->query, $username) ?? 'NON NPWP'; //NON NPWP || BER NPWP
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A');
+        $data->join('KPDL_REF_STATUS_SPT', 'ID_STATUS_SPT = STATUS_SPT_TAHUNAN_TERAKHIR', 'left');
+        $data->join('PEGAWAI C', 'NIP_AR_ZONA = C.NIP9', 'left');
+        $data->join('KPDL_MV_OBJEK_PERSUBJEK D', 'A.ID_KPDL_SUBJEK = D.ID_KPDL_SUBJEK', 'left');
+        $data->join('PEGAWAI E', 'NIP_AR_PENGAMPU = E.NIP9', 'left');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+
+        if ($query == 'NON NPWP') {
+            $data->where('A.NPWP IS NULL');
+        }
+
+        if ($query == 'BER NPWP') {
+            $data->where('A.NPWP IS NOT NULL');
+        }
+        if ($globalFilter) {
+            $columnFilter = ["NAMA", "ALAMAT", "MERK_USAHA"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->like("UPPER(C.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NM_AR_PENGAMPU') {
+                    $data->like("UPPER(E.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NAMA') {
+                    $data->like("UPPER(A.NAMA)", strtoupper($value->value), 'both');
+                } else {
+
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->orderBy("C.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA_AR_PENGAMPU') {
+                    $data->orderBy("E.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA') {
+                    $data->orderBy("A.NAMA", $value->desc ? 'desc' : 'asc');
+                } else {
+
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data->select('count(1) as JML');
+            return $data->get();
+        }
+        if ($type == 'raw') {
+
+            $data->select("UUID, A.NAMA,GEO_LOK_LAT, GEO_LOK_LING,ALAMAT, PROVINSI, KABUPATEN, KECAMATAN, KELURAHAN, RT, RW,
+            A.NPWP, NO_IDENTITAS, MERK_USAHA, NM_KANTOR_PENGAMPU, JUMLAH_PEMBAYARAN_THN_TERAKHIR,STATUS_SPT_TAHUNAN_TERAKHIR,
+            NM_KPP_ZONA ,NIP_AR_ZONA, NM_PEREKAM, KPP_ADM_PEREKAM, TO_CHAR(CREATION_DATE, 'YYYY-MM-DD HH24:II:SS')CREATION_DATE, KETERANGAN,
+            C.NAMA NM_AR_ZONA, E.NAMA NM_AR_PENGAMPU, STATUS_WP_MFWP,JNS_WP_MFWP, COALESCE(D.SUM_NILAI,0) SUM_NILAI
+            ");
+            // print_r($data->getCompiledSelect());
+            // exit;
+
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Controllers/Kewilayahan/Sebaran/IdentifikasiLapangan.php

@@ -1,129 +0,0 @@
-<?php
-namespace App\Controllers\Kewilayahan\Sebaran;
-
-use App\Libraries\AldLibrary;
-use App\Libraries\KpdlLibrary;
-
-class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
-
-{
-
-    protected function dataKpdl($request, $bulan)
-    {
-        $Ald      = new AldLibrary;
-        $username = session('nip');
-
-        $opsiWilZona = $Ald->decryptMe($request->getPost('opsiWilZona'), $username);
-        $adm4_pcode  = [];
-        foreach ($request->getPost('adm4_pcode') ?? [] as $key => $value) {
-            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
-        }
-
-        $id_poly_zona = [];
-        foreach ($request->getPost('id_poly_zona') ?? [] as $key => $value) {
-            $id_poly_zona[] = $Ald->decryptMe($value, $username);
-        }
-
-        $nip_ar_perekam = [];
-        foreach ($request->getPost('nip_ar_perekam') ?? [] as $key => $value) {
-            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
-        }
-
-        $nip_ar_pengampu = [];
-        foreach ($request->getPost('nip_ar_pengampu') ?? [] as $key => $value) {
-            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
-        }
-
-        $db          = \Config\Database::connect();
-        $KpdlLibrary = new KpdlLibrary;
-        if ($bulan == 'semua') {
-
-            $npwp = $db->table('KPDL_MV_JML_KPDL A')
-                ->select('BULAN, SUM(JML) JML')
-                ->where("TAHUN =" . date('Y'))
-                ->where('BULAN <=', date('m'))
-                ->groupBy('BULAN');
-
-            if ($opsiWilZona == 'wilayah') {
-                $npwp = $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
-            }
-
-            if ($opsiWilZona == 'zona') {
-                $npwp = $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
-            }
-            if ($opsiWilZona == 'perekam') {
-                $npwp = $npwp->whereIn('NIP_PEREKAM', $nip_ar_perekam);
-            }
-
-            if ($opsiWilZona == 'pengampu') {
-                $npwp = $npwp->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
-            }
-
-            $npwp = $npwp->getCompiledSelect();
-
-            $data = $db->table('BULAN A')
-                ->select("A.KODE as BULAN, C.JML")
-                ->join("(" . $npwp . ") C", 'A.KODE = C.BULAN', 'left')
-                ->orderBy('BULAN');
-
-            return $KpdlLibrary->single_array($data->get()->getResult(), 'JML');
-
-        } else {
-            $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
-            $generateTgl = "SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
-                                FROM
-                                dual
-                                CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1)";
-
-            $data = $db->table('KPDL_MV_LOKASI_SUBJEK B')
-                ->select("TO_CHAR(CREATION_DATE,'DD') as TGL, COUNT(1) JML")
-                ->where("to_char(CREATION_DATE,'YYYY') = ", date('Y'))
-                ->where("to_char(CREATION_DATE,'MM') = " . $bulan)
-                ->groupBy("TO_CHAR(CREATION_DATE,'DD')");
-
-            if ($opsiWilZona == 'wilayah') {
-                $data = $data->whereIn('ADM4_PCODE', $adm4_pcode);
-            }
-
-            if ($opsiWilZona == 'zona') {
-                $data = $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
-            }
-
-            if ($opsiWilZona == 'perekam') {
-                $data = $data->whereIn('CREATED_BY', $nip_ar_perekam);
-            }
-
-            if ($opsiWilZona == 'pengampu') {
-                $data = $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
-            }
-
-            $data = $data->getCompiledSelect();
-
-            $dataRet = $db->newQuery()
-                ->select("A.TGL, B.JML")
-                ->from("(" . $generateTgl . ") A")
-                ->join("(" . $data . ") B", "A.TGL = B.TGL", 'left')
-                ->orderBy("TGL");
-
-            return $KpdlLibrary->single_array($dataRet->get()->getResult(), 'JML');
-        }
-    }
-
-    protected function generateSeries($bulan)
-    {
-        $db          = \Config\Database::connect();
-        $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
-        $generateTgl = $db->query("SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
-                    FROM
-                    dual
-                    CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1) ORDER BY TGL");
-
-        $data     = $generateTgl->getResult();
-        $data_arr = [];
-        foreach ($data as $row) {
-            array_push($data_arr, $row->TGL);
-        }
-        return $data_arr;
-    }
-
-}

app/Controllers/Kewilayahan/Sebaran/JenisStatus.php

@@ -74,7 +74,7 @@ class JenisStatus extends \App\Controllers\Kewilayahan\Kytp
         foreach ($data as $b) {
 
             array_push($ret, ['name' => $b->{$kolom},
-                // 'color'                  => ,
+                'key'                    => $Ald->encryptKpdl($b->{$kolom}, $username),
                 'y'                      => floatval($b->JML),
             ]
             );
@@ -82,4 +82,140 @@ class JenisStatus extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query       = $Ald->decryptKpdl($request->query ?? '', $username) ?? ''; // OP KARYAWAN / NON EFEKTIF /dll
+        $jenisStatus = $request->jenisStatus ?? ''; // Jenis WP // Status WP
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $data = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        $kolom = "JNS_WP_MFWP";
+        switch ($jenisStatus) {
+            case 'Jenis WP':
+                $kolom = "JNS_WP_MFWP";
+                break;
+            case 'Status WP':
+                $kolom = "STATUS_WP_MFWP";
+                break;
+            default:
+
+                break;
+        }
+        $data->where($kolom, $query);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR, JUMLAH_PEMBAYARAN_THN_TERAKHIR, E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Controllers/Kewilayahan/Sebaran/KLU.php

@@ -33,8 +33,8 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
         }
 
         $db   = \Config\Database::connect();
-        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select("NPWP, NVL(KD_GOLPOK,'ZZ') KD_GOLPOK, NVL(NM_GOLPOK,'UNKNOWN') NM_GOLPOK, NVL(JUMLAH_PEMBAYARAN_THN_TERAKHIR,0) JUMLAH_PEMBAYARAN_THN_TERAKHIR")->distinct()
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select("NPWP, NVL(KD_GOLPOK,'ZZ') KD_GOLPOK, NVL(NM_GOLPOK,'TIDAK DIKETAHUI') NM_GOLPOK, NVL(JUMLAH_PEMBAYARAN_THN_TERAKHIR,0) JUMLAH_PEMBAYARAN_THN_TERAKHIR")->distinct()
-            ->where('NPWP IS NOT NULL');
+            ->where('NPWP IS NOT NULL'); //default jenis chart = kluterdaftar
 
         if ($jenischart == 'dataKluYgBayar') {
             $npwp = $npwp->where("JUMLAH_PEMBAYARAN_THN_TERAKHIR >", 0);
@@ -78,7 +78,7 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
             array_push($ret,
                 [
                     'name' => $b->NM_GOLPOK,
-                    'kode' => $Ald->encryptMe($b->KD_GOLPOK, $username),
+                    'key'  => $Ald->encryptMe($b->KD_GOLPOK, $username),
                     'y'    => floatval($b->JML),
                 ]
             );
@@ -86,4 +86,149 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        $size     = $this->request->getGet('size');
+        $size     = ($size > 101) ? 101 : $size;
+        $request  = json_decode(file_get_contents('php://input'));
+
+        $query      = $Ald->decryptMe($request->query ?? '', $username) ?? ''; //KD Golongan Pokok
+        $jenischart = $request->jenisChart ?? ''; //Jenis Chart
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select("A.NPWP, A.STATUS_WP_MFWP, A.JNS_WP_MFWP,A.STATUS_SPT_TAHUNAN_TERAKHIR,
+                                            NVL(KD_GOLPOK,'ZZ') KD_GOLPOK,
+                                            NVL(NM_GOLPOK,'TIDAK DIKETAHUI') NM_GOLPOK,
+                                            NVL(JUMLAH_PEMBAYARAN_THN_TERAKHIR,0) JUMLAH_PEMBAYARAN_THN_TERAKHIR")
+            ->distinct()
+            ->where('NPWP IS NOT NULL'); //default jenis chart = kluterdaftar
+
+        if ($jenischart == 'dataKluYgBayar') {
+            $npwp = $npwp->where("JUMLAH_PEMBAYARAN_THN_TERAKHIR >", 0);
+        }
+
+        if ($jenischart == 'dataKluYgTidakBayar') {
+            $npwp = $npwp->where("JUMLAH_PEMBAYARAN_THN_TERAKHIR <=", 0);
+        }
+
+        if ($opsiWilZona == 'wilayah') {
+            $npwp = $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $npwp = $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $npwp = $npwp->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $npwp = $npwp->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+
+        $data = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        if ($query != 'lainnya') {
+            $data->where("NVL(KD_GOLPOK,'ZZ')", $query);
+        } else {
+            $limaBesar = []; //Lima Besar
+            foreach ($request->limaBesar ?? [] as $key => $value) {
+                $limaBesar[] = $Ald->decryptMe($value, $username);
+            }
+            $data->whereNotIn("NVL(KD_GOLPOK,'ZZ')", $limaBesar);
+        }
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, A.KD_GOLPOK,A.NM_GOLPOK, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP,
+            B.TANGGAL_DAFTAR, A.JUMLAH_PEMBAYARAN_THN_TERAKHIR,E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Controllers/Kewilayahan/Sebaran/PayComp.php

@@ -66,7 +66,7 @@ class PayComp extends \App\Controllers\Kewilayahan\Kytp
         foreach ($data as $b) {
 
             array_push($ret, ['name' => $b->KETERANGAN,
-                // 'color'                  => $b->WARNA_BYR,
+                'key'                    => $Ald->encryptMe($b->KETERANGAN, $username),
                 'y'                      => floatval($b->Y),
                 'thn_bln'                => $b->THN_BLN,
             ]
@@ -75,4 +75,135 @@ class PayComp extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptMe($request->query ?? '', $username) ?? ''; // 1 bulan / 2 bulan / 12 bulan / etc
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $tahunBulan    = $request->tahunBulan ?? "2024-09";
+        $tahunBulanArr = explode("-", $tahunBulan);
+        $tahun         = $tahunBulanArr[0];
+        $bulan         = $tahunBulanArr[1];
+        $data          = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('KPDL_MV_PENERIMAAN_AGG_PC C', "A.NPWP = C.NPWP AND C.THNBYR = '" . $tahun . "' and BULAN=" . $bulan, "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        $bulanPc = explode(" ", $query)[0]; //dari string '1 bulan' '2 bulan' '12 bulan'
+        $data->where("C.JML", (float) $bulanPc);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR,C.JML,JUMLAH_PEMBAYARAN_THN_TERAKHIR,
+            E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
+
 }

app/Controllers/Kewilayahan/Sebaran/Pembayaran.php

@@ -79,6 +79,7 @@ class Pembayaran extends \App\Controllers\Kewilayahan\Kytp
 
             array_push($ret, ['name' => $name,
                 'color'                  => $b->WARNA_BYR,
+                'key'                    => $Ald->encryptMe($b->WARNA_BYR, $username),
                 'y'                      => floatval($b->Y),
                 'thn_bln'                => $b->THN_BLN,
             ]
@@ -87,4 +88,141 @@ class Pembayaran extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        $size     = $this->request->getGet('size');
+        $size     = ($size > 101) ? 101 : $size;
+        $request  = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptKpdl($request->query ?? '', $username) ?? 'NON NPWP'; //NON NPWP || BER NPWP
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $tahunBulan    = $request->tahunBulan ?? "2024-09";
+        $tahunBulanArr = explode("-", $tahunBulan);
+        $tahun         = $tahunBulanArr[0];
+        $bulan         = $tahunBulanArr[1];
+        $data          = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('KPDL_MV_PENERIMAAN_AGG C', "A.NPWP = C.NPWP AND C.THNBYR = '" . $tahun . "' and BULAN=" . $bulan, "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+        if ($query == 'black') {
+            $data->groupStart();
+            $data->orGroupStart();
+            $data->Where("C.WARNA_BYR IS NULL")
+                ->orWhere("C.WARNA_BYR", 'black');
+            $data->groupEnd();
+            $data->groupEnd();
+        } else {
+            $data->where("C.WARNA_BYR", $query);
+        }
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR,COALESCE(C.JML,0) JML,CASE WHEN C.WARNA_BYR IS NULL THEN 'BLACK' ELSE C.WARNA_BYR END WARNA_BYR,
+            E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Controllers/Kewilayahan/Sebaran/Pengampu.php

@@ -71,11 +71,10 @@ class Pengampu extends \App\Controllers\Kewilayahan\Kytp
 
         $ret = [];
 
-       
         foreach ($data as $b) {
 
             array_push($ret, ['name' => $b->NM_KANTOR_PENGAMPU,
-                'kode'                   => $Ald->encryptMe($b->KPPADM_PENGAMPU, $username),
+                'key'                    => $Ald->encryptMe($b->KPPADM_PENGAMPU, $username),
                 'y'                      => floatval($b->JML),
             ]
             );
@@ -83,4 +82,141 @@ class Pengampu extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query      = $Ald->decryptMe($request->query ?? '', $username) ?? ''; // OP KARYAWAN / NON EFEKTIF /dll
+        $jenisChart = $request->jenisChart ?? ''; // Jenis WP // Status WP
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.KPPADM_PENGAMPU, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $data = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        switch ($jenisChart) {
+            case 'assign':
+                $data = $data->where("A.NPWP IS NOT NULL");
+                break;
+            case 'unassign':
+                $data = $data->where("A.NPWP IS NOT NULL")
+                    ->where("NIP_AR_PENGAMPU IS NULL");
+                break;
+            default:
+
+                break;
+        }
+
+        $data->where("KPPADM_PENGAMPU", $query);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR, JUMLAH_PEMBAYARAN_THN_TERAKHIR, E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Controllers/Kewilayahan/Sebaran/SPTTAhunan.php

@@ -32,7 +32,7 @@ class SPTTAhunan extends \App\Controllers\Kewilayahan\Kytp
             $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
         }
         $db   = \Config\Database::connect();
-        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select('NPWP, B.KETERANGAN')->distinct()
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select('NPWP, STATUS_SPT_TAHUNAN_TERAKHIR, B.KETERANGAN')->distinct()
             ->join('KPDL_REF_STATUS_SPT B', "A.STATUS_SPT_TAHUNAN_TERAKHIR = B.ID_STATUS_SPT", "left")
             ->where('NPWP IS NOT NULL');
 
@@ -54,8 +54,8 @@ class SPTTAhunan extends \App\Controllers\Kewilayahan\Kytp
 
         $data = $db->newQuery()
             ->fromSubquery($npwp, "A")
-            ->select("KETERANGAN, count(1) as JML")
+            ->select("STATUS_SPT_TAHUNAN_TERAKHIR, KETERANGAN, count(1) as JML")
-            ->groupBy("A.KETERANGAN");
+            ->groupBy("STATUS_SPT_TAHUNAN_TERAKHIR, KETERANGAN");
 
         $data = $data->get()->getResult();
 
@@ -64,7 +64,7 @@ class SPTTAhunan extends \App\Controllers\Kewilayahan\Kytp
         foreach ($data as $b) {
 
             array_push($ret, ['name' => $b->KETERANGAN,
-                // 'color'                  => $b->IDENTIFIKASI == 'NON NPWP' ? 'orange' : 'green',
+                'key'                    => $Ald->encryptMe($b->STATUS_SPT_TAHUNAN_TERAKHIR, $username),
                 'y'                      => floatval($b->JML),
             ]
             );
@@ -72,4 +72,128 @@ class SPTTAhunan extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptMe($request->query ?? '', $username) ?? ''; // lapisan 1-5000 / lapisan 10000-200000 / etc
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $data = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        $data->where("STATUS_SPT_TAHUNAN_TERAKHIR", $query);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR, JUMLAH_PEMBAYARAN_THN_TERAKHIR, E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
+
 }

app/Controllers/Kewilayahan/Sebaran/Sof.php

@@ -80,10 +80,144 @@ class Sof extends \App\Controllers\Kewilayahan\Kytp
 
         $data = $sqlSemua->get()->getResult();
         foreach ($data as $key => $value) {
+            $value->key       = $Ald->encryptKpdl($value->LAPISAN, $username);
             $value->JML_C     = floatval($value->JML_C);
+            $value->THNBLN_C  = $Ald->encryptMe($tahun . '-' . $bulan, $username);
             $value->JML_P1    = floatval($value->JML_P1);
+            $value->THNBLN_P1 = $Ald->encryptMe($tahun . '-' . ($bulan - 1), $username);
             $value->JML_P2    = floatval($value->JML_P2);
+            $value->THNBLN_P2 = $Ald->encryptMe($tahun . '-' . ($bulan - 2), $username);
         }
         return $data;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptKpdl($request->query ?? '', $username) ?? ''; // lapisan 1-5000 / lapisan 10000-200000 / etc
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A')->distinct()->select('A.NPWP, A.STATUS_SPT_TAHUNAN_TERAKHIR, JNS_WP_MFWP, STATUS_WP_MFWP, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->where('A.NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+        $npwp = $data;
+
+        $tahunBulan    = $Ald->decryptMe($request->tahunBulan ?? '', $username) ?? "2024-09";
+        $tahunBulanArr = explode("-", $tahunBulan);
+        $tahun         = $tahunBulanArr[0];
+        $bulan         = $tahunBulanArr[1];
+        $data          = $db->newQuery()->fromSubquery($npwp, "A")
+            ->join('MFWP B', "A.NPWP = B.NPWP", "left")
+            ->join('KPDL_MV_PENERIMAAN_AGG_SF C', "A.NPWP = C.NPWP AND C.THNBYR = '" . $tahun . "' and BULAN=" . $bulan, "left")
+            ->join('REF_KPP D', "B.KPPADM = D.KD_KPP", "left")
+            ->join('KPDL_REF_STATUS_SPT E', "A.STATUS_SPT_TAHUNAN_TERAKHIR = E.ID_STATUS_SPT", "left");
+
+        $data->where("C.LAPISAN", $query);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA_WP", "ALAMAT"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->like("A.NPWP", strtoupper($value->value), 'both');
+                } else {
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NPWP') {
+                    $data->orderBy("A.NPWP", $value->desc ? 'desc' : 'asc');
+                } else {
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data = $data->select("count(1) as JML");
+            return $data->get();
+        }
+        if ($type == 'raw') {
+            $data = $data->select("A.NPWP, B.NAMA_WP, B.ALAMAT, B.KELURAHAN, B.KECAMATAN, B.KOTA, B.PROPINSI,
+            B.KPPADM, B.NAMA_AR, B.FLAG_WPS_WPK, D.NM_KANTOR, A.STATUS_WP_MFWP, A.JNS_WP_MFWP, A.STATUS_SPT_TAHUNAN_TERAKHIR,
+            B.TANGGAL_DAFTAR,C.LAPISAN,JUMLAH_PEMBAYARAN_THN_TERAKHIR,
+            E.KETERANGAN");
+            // print_r($data->getCompiledSelect());
+            // exit;
+            return $data->get($size - 1, $start);
+        }
+
+    }
+
 }

app/Controllers/Kewilayahan/Sebaran/ZonaPengawasan.php

@@ -75,7 +75,7 @@ class ZonaPengawasan extends \App\Controllers\Kewilayahan\Kytp
         foreach ($data as $b) {
 
             array_push($ret, ['name' => $b->NM_KPP_ZONA,
-                'kode'                   => $Ald->encryptMe($b->KPPADM_ZONA, $username),
+                'key'                    => $Ald->encryptMe($b->KPPADM_ZONA, $username),
                 'y'                      => floatval($b->JML),
             ]
             );
@@ -83,4 +83,139 @@ class ZonaPengawasan extends \App\Controllers\Kewilayahan\Kytp
 
         return $ret;
     }
+
+    public function detail()
+    {
+        $dataRaw   = $this->dataRaw('raw')->getResultArray();
+        $dataCount = $this->dataRaw('count')->getRow();
+        $ret       = [
+            'data' => $dataRaw,
+            'meta' => ['totalRowCount' => $dataCount->JML],
+        ];
+        return $this->respond($ret, 200);
+    }
+
+    private function dataRaw($type)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $start    = $this->request->getGet('start');
+        // $start    = ($start > 100) ? 100 : $start;
+        $size    = $this->request->getGet('size');
+        $size    = ($size > 101) ? 101 : $size;
+        $request = json_decode(file_get_contents('php://input'));
+
+        $query = $Ald->decryptMe($request->query ?? '', $username) ?? ''; // kode KPP
+
+        $opsiWilZona = $Ald->decryptMe($request->opsiWilZona ?? '', $username);
+        $adm4_pcode  = [];
+        foreach ($request->adm4_pcode ?? [] as $key => $value) {
+            $adm4_pcode[] = $Ald->decryptKpdl($value, $username);
+        }
+
+        $id_poly_zona = [];
+        foreach ($request->id_poly_zona ?? [] as $key => $value) {
+            $id_poly_zona[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_perekam = [];
+        foreach ($request->nip_ar_perekam ?? [] as $key => $value) {
+            $nip_ar_perekam[] = $Ald->decryptMe($value, $username);
+        }
+
+        $nip_ar_pengampu = [];
+        foreach ($request->nip_ar_pengampu ?? [] as $key => $value) {
+            $nip_ar_pengampu[] = $Ald->decryptMe($value, $username);
+        }
+
+        $globalFilter = $this->request->getGet('globalFilter'); //string
+        $filters      = json_decode($this->request->getGet('filters')); //     [{"id":"MERK_USAHA","value":"toko"},{"id":"ALAMAT","value":"graha"}]
+        $sorting      = json_decode($this->request->getGet('sorting')); //    [{"id":"ALAMAT","desc":false}]
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_MV_LOKASI_SUBJEK A');
+        $data->join('KPDL_REF_STATUS_SPT', 'ID_STATUS_SPT = STATUS_SPT_TAHUNAN_TERAKHIR', 'left');
+        $data->join('PEGAWAI C', 'NIP_AR_ZONA = C.NIP9', 'left');
+        $data->join('KPDL_MV_OBJEK_PERSUBJEK D', 'A.ID_KPDL_SUBJEK = D.ID_KPDL_SUBJEK', 'left');
+        $data->join('PEGAWAI E', 'A.NIP_AR_PENGAMPU = E.NIP9', 'left');
+
+        if ($opsiWilZona == 'wilayah') {
+            $data->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        if ($opsiWilZona == 'perekam') {
+            $data->whereIn('CREATED_BY', $nip_ar_perekam);
+        }
+
+        if ($opsiWilZona == 'pengampu') {
+            $data->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
+        }
+
+        $data->where("KPPADM_ZONA", $query);
+
+        if ($globalFilter) {
+            $columnFilter = ["NAMA", "ALAMAT", "MERK_USAHA"];
+            $data->GroupStart();
+            $data->orGroupStart();
+            foreach ($columnFilter as $key => $value) {
+                $data->orLike("UPPER(" . $value . ")", strtoupper($globalFilter), 'both');
+            }
+            $data->groupEnd();
+            $data->groupEnd();
+        }
+
+        if (count($filters)) {
+            $data->GroupStart();
+            foreach ($filters as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->like("UPPER(C.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NM_AR_PENGAMPU') {
+                    $data->like("UPPER(E.NAMA)", strtoupper($value->value), 'both');
+                } else if ($value->id == 'NAMA') {
+                    $data->like("UPPER(A.NAMA)", strtoupper($value->value), 'both');
+                } else {
+
+                    $data->like("UPPER(" . $value->id . ")", strtoupper($value->value), 'both');
+                }
+            }
+            $data->groupEnd();
+        }
+
+        if (count($sorting)) {
+            foreach ($sorting as $key => $value) {
+                if ($value->id == 'NM_AR_ZONA') {
+                    $data->orderBy("C.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA_AR_PENGAMPU') {
+                    $data->orderBy("E.NAMA", $value->desc ? 'desc' : 'asc');
+                } else if ($value->id == 'NAMA') {
+                    $data->orderBy("A.NAMA", $value->desc ? 'desc' : 'asc');
+                } else {
+
+                    $data->orderBy($value->id, $value->desc ? 'desc' : 'asc');
+                }
+            }
+        }
+
+        if ($type == 'count') {
+            $data->select('count(1) as JML');
+            return $data->get();
+        }
+        if ($type == 'raw') {
+
+            $data->select("UUID, A.NAMA,GEO_LOK_LAT, GEO_LOK_LING,ALAMAT, PROVINSI, KABUPATEN, KECAMATAN, KELURAHAN, RT, RW,
+            A.NPWP, NO_IDENTITAS, MERK_USAHA, NM_KANTOR_PENGAMPU, JUMLAH_PEMBAYARAN_THN_TERAKHIR,STATUS_SPT_TAHUNAN_TERAKHIR,
+            NM_KPP_ZONA ,NIP_AR_ZONA, NM_PEREKAM, KPP_ADM_PEREKAM, TO_CHAR(CREATION_DATE, 'YYYY-MM-DD HH24:II:SS')CREATION_DATE, KETERANGAN,
+            C.NAMA NM_AR_ZONA, E.NAMA NM_AR_PENGAMPU, STATUS_WP_MFWP,JNS_WP_MFWP, COALESCE(D.SUM_NILAI,0) SUM_NILAI
+            ");
+            // print_r($data->getCompiledSelect());
+            // exit;
+
+            return $data->get($size - 1, $start);
+        }
+
+    }
 }

app/Views/inc/sidebar.php

@@ -6,9 +6,9 @@
 <div class="page-wrap">
     <div class="app-sidebar colored">
         <div class="sidebar-header">
-            <a class="header-brand" href="<?php base_url() ?>">
+            <a class="header-brand" href="<?php base_url()?>">
                 <div class="logo-img">
-                    <img src="<?= base_url('public/theme/src/img/brand-white.svg') ?>" class="header-brand-img"
+                    <img src="<?=base_url('public/theme/src/img/brand-white.svg')?>" class="header-brand-img"
                         alt="lavalite">
                 </div>
                 <span class="text">Engine</span>
@@ -25,9 +25,9 @@
                     <div class="nav-item has-sub">
                         <a href="javascript:void(0)"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
                         <div class="submenu-content">
-                            <?php if (session('tpkantor') == 'KPDJP') { ?>
+                            <?php if (session('tpkantor') == 'KPDJP') {?>
                                 <a href="<?php echo base_url('Home') ?>" class="menu-item">Nasional</a>
-                            <?php } ?>
+                            <?php }?>
                             <a href="<?php echo base_url('Kanwil') ?>" class="menu-item">Kanwil/KPP</a>
                             <a href="<?php echo base_url('Seksiar') ?>" class="menu-item">Seksi/AR</a>
                         </div>
@@ -36,8 +36,8 @@
                     <div class="nav-item has-sub">
                         <a href="javascript:void(0)"><i class="ik ik-layers"></i><span>Pengawasan Pembayaran</span> </a>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>home/gmapkjs" class="menu-item">MAP KJS</a>
+                            <a href="<?=base_url()?>home/gmapkjs" class="menu-item">MAP KJS</a>
-                            <a href="<?= base_url() ?>home/ppm" class="menu-item">Pembayaran Masa</a>
+                            <a href="<?=base_url()?>home/ppm" class="menu-item">Pembayaran Masa</a>
                         </div>
                     </div>
                     <!--   <div class="nav-lavel">UI Element</div>
@@ -54,15 +54,15 @@
                         <a href="#"><i class="ik ik-crosshair"></i><span>Raport</span> <span
                                 class="badge badge-danger">New</span></a>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>rapor/wpbayar" class="menu-item">WP Bayar</a>
+                            <a href="<?=base_url()?>rapor/wpbayar" class="menu-item">WP Bayar</a>
 
                         </div>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>rapor/wplapor" class="menu-item">WP Lapor</a>
+                            <a href="<?=base_url()?>rapor/wplapor" class="menu-item">WP Lapor</a>
 
                         </div>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>rapor/wpdaftar" class="menu-item">WP Daftar</a>
+                            <a href="<?=base_url()?>rapor/wpdaftar" class="menu-item">WP Daftar</a>
 
                         </div>
                     </div>
@@ -70,13 +70,16 @@
                     <div class="nav-item has-sub">
                         <a href="#"><i class="ik ik-layers"></i><span>Mapping</span></a>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>auth/underconst" class="menu-item">Data</a>
+                            <a href="<?=base_url()?>auth/underconst" class="menu-item">Data</a>
                         </div>
                     </div>
                      <div class="nav-item has-sub">
                         <a href="#"><i class="ik ik-layers"></i><span>Kewilayahan</span></a>
                         <div class="submenu-content">
-                            <a href="<?= base_url() ?>kewilayahan/kytp" class="menu-item">Dashboard Matoa</a>
+                            <a href="<?=base_url()?>kewilayahan/kytp" class="menu-item">Dashboard Matoa</a>
+                        </div>
+                        <div class="submenu-content">
+                            <a href="<?=base_url()?>kewilayahan/peta" class="menu-item">Peta</a>
                         </div>
                     </div>
                     <!--

app/Views/kewilayahan/dist/peta.js

@@ -0,0 +1,6 @@
+/******/ (() => { // webpackBootstrap
+const Root = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+/******/ })()
+;

app/Views/kewilayahan/kytp/TabPenugasan.js

@@ -1,26 +1,26 @@
-import React, { useRef, useState } from "react"
+import React, { useRef, useState } from 'react'
-import { Card, CardBody, CardHeader, CardTitle } from "reactstrap"
+import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap'
-import ChartKpdl from "./componentProgresifitas/ChartKPDL"
+import { Stepper } from 'primereact/stepper'
-import { Stepper } from "primereact/stepper"
+import { StepperPanel } from 'primereact/stepperpanel'
-import { StepperPanel } from "primereact/stepperpanel"
+import PenugasanKpdl from './componentPenugasanAktifitas/PenugasanKpdljs'
 const TabPenugasan = ({ dataSend }) => {
   const stepperRef = useRef(null)
   return (
     <>
       <Card>
         <CardHeader className="d-flex justify-content-center p-2">
-          <CardTitle tag={"h1"} className="font-weight-bold">
+          <CardTitle tag={'h1'} className="font-weight-bold">
             Statistik Penugasan Matoa Tahun Berjalan
           </CardTitle>
         </CardHeader>
 
         <CardBody className="mb-0">
           <div className="card flex justify-content-center">
-            <Stepper ref={stepperRef} style={{ flexBasis: "30rem" }}>
+            <Stepper ref={stepperRef} style={{ flexBasis: '30rem' }}>
               <StepperPanel header="Identifikasi Lapangan (KPDL/MATOA)">
                 <div className="flex flex-column h-12rem">
                   <div className="font-medium">
-                    <ChartKpdl dataSend={dataSend} />
+                    <PenugasanKpdl dataSend={dataSend} />
                   </div>
                 </div>
               </StepperPanel>

app/Views/kewilayahan/kytp/componentDepan/NipPengampu.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from 'react'
-import { MultiSelect } from "react-multi-select-component"
+import { MultiSelect } from 'react-multi-select-component'
-import { Col, Label, Row } from "reactstrap"
+import { Col, Label, Row } from 'reactstrap'
-import Select from "react-select"
+import Select from 'react-select'
-import { Button as ButtonP } from "primereact/button"
+import { Button as ButtonP } from 'primereact/button'
-import { isObjEmpty } from "../util"
+import { isObjEmpty } from '../util'
-import $ from "jquery"
+import $ from 'jquery'
-import collect from "collect.js"
+import collect from 'collect.js'
-import { setSelectedOpsi } from "../store/KpdlStore"
+import { setSelectedOpsi } from '../store/KpdlStore'
-import { useDispatch, useSelector } from "react-redux"
+import { useDispatch, useSelector } from 'react-redux'
 const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi }) => {
   const dispatch = useDispatch()
   const storeKpdl = useSelector((state) => state.kpdl)
@@ -21,12 +21,12 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
   const [kppSelected, setKppSelected] = useState({})
   const [seksiSelected, setSeksiSelected] = useState([])
   const [arSelected, setArSelected] = useState([])
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
   useEffect(() => {
     $.ajax({
-      url: base_url + "kewilayahan/ref/kanwil",
+      url: base_url + 'kewilayahan/ref/kanwil',
-      method: "GET",
+      method: 'GET',
-      dataType: "json",
+      dataType: 'json',
       success: (data) => {
         setKanwil(data)
       }
@@ -43,9 +43,9 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
     if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
       const kanwil = kanwilSelected.value
       $.ajax({
-        url: base_url + "kewilayahan/ref/kpp",
+        url: base_url + 'kewilayahan/ref/kpp',
-        method: "GET",
+        method: 'GET',
-        dataType: "json",
+        dataType: 'json',
         data: { kanwil },
         success: (data) => {
           setKpp(data)
@@ -62,9 +62,9 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
     if (kppSelected && !isObjEmpty(kppSelected)) {
       const kpp = kppSelected.value
       $.ajax({
-        url: base_url + "kewilayahan/ref/seksi",
+        url: base_url + 'kewilayahan/ref/seksi',
-        method: "GET",
+        method: 'GET',
-        dataType: "json",
+        dataType: 'json',
         data: { kpp },
         success: (data) => {
           setSeksi(data)
@@ -76,14 +76,14 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
   useEffect(() => {
     setAr([])
     setArSelected([])
-    const seksi = collect(seksiSelected).pluck("value").all()
+    const seksi = collect(seksiSelected).pluck('value').all()
     if (seksi.length && !isObjEmpty(seksiSelected)) {
       const kpp = kppSelected.value
 
       $.ajax({
-        url: base_url + "kewilayahan/ref/ar",
+        url: base_url + 'kewilayahan/ref/ar',
-        method: "POST",
+        method: 'POST',
-        dataType: "json",
+        dataType: 'json',
         data: { kpp, seksi },
         success: (data) => {
           setAr(data)
@@ -92,13 +92,13 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
     }
   }, [seksiSelected])
   const buttonProsesOnClick = () => {
-    const nip_ar_pengampu = collect(arSelected).pluck("value").all()
+    const nip_ar_pengampu = collect(arSelected).pluck('value').all()
     if (nip_ar_pengampu.length) {
       dispatch(setSelectedOpsi(dataOpsi.pengampu))
       setDataSend({ opsiWilZona: dataOpsi.pengampu.key, nip_ar_pengampu })
       setHiddenGraphMatoa(true)
     } else {
-      toast.current.show({ severity: "info", summary: "Info", detail: "AR Pengampu harus dipilih" })
+      toast.current.show({ severity: 'info', summary: 'Info', detail: 'AR Pengampu harus dipilih' })
     }
   }
   return (
@@ -152,7 +152,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
               setSeksiSelected(e)
             }}
             labelledBy="Pilih Seksi"
-            overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }}
+            overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Seksi' }}
           />
         </Col>
         <Col md="3">
@@ -169,7 +169,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
               setArSelected(e)
             }}
             labelledBy="Pilih AR"
-            overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }}
+            overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih AR' }}
           />
         </Col>
       </Row>

app/Views/kewilayahan/kytp/componentPenugasanAktifitas/PenugasanKpdljs

@@ -0,0 +1,468 @@
+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 { format_angka } from '../util'
+import collect from 'collect.js'
+import $ 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'
+var relativeTime = require('dayjs/plugin/relativeTime')
+const fetchSize = 101
+
+const PenugasanKpdl = ({ dataSend }) => {
+  const base_url = '<?=base_url()?>'
+
+  const refChart = useRef(null)
+  const [data, setData] = useState({
+    kpdl: [],
+    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)
+
+  useEffect(() => {
+    if (selectedBulan != '') {
+      $.get({
+        url: base_url + 'kewilayahan/kytp/identifikasiLapangan',
+        dataType: 'json',
+        type: 'POST',
+        data: {
+          ...dataSend,
+          bulan: selectedBulan
+        },
+        success: (data) => {
+          setData(data)
+        }
+      })
+    }
+  }, [dataSend, selectedBulan])
+
+  useEffect(() => {
+    $.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: 'Lokasi KPDL',
+            style: {
+              color: Highcharts.getOptions().colors[2]
+            }
+          },
+          opposite: true
+        },
+        {
+          title: {
+            text: 'Lokasi KPDL 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 === 'kpdl_tunggal') {
+                  setQuery(this.index + 1)
+                  setVisibleSidebar(true)
+                } else {
+                  return
+                }
+              }
+            }
+          }
+        }
+      },
+      series: [
+        {
+          name: 'Lokasi KPDL',
+          seriesType: 'kpdl_tunggal',
+          type: 'column',
+          yAxis: 0,
+          color: Highcharts.getOptions().colors[2],
+          data: data.kpdl,
+          marker: {
+            enabled: true
+          },
+          tooltip: {
+            valueSuffix: ' Kpdl'
+          }
+        },
+
+        {
+          name: 'Lokasi KPDL akumulasi',
+          seriesType: 'kpdl_akumulasi',
+          type: 'spline',
+          yAxis: 1,
+          data: data.akum,
+          marker: {
+            enabled: true
+          },
+          tooltip: {
+            valueSuffix: ' data'
+          },
+          visible: false
+        }
+      ]
+    }
+  }
+
+  const refBulanOnClick = (e) => {
+    const kodeBulan = e.target.dataset.value
+    const labelBulan = e.target.dataset.label
+    setSelectedBulan(kodeBulan)
+    setSelectedBulanText(labelBulan)
+  }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/identaktifitashasil/identifikasilapangan/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            selectedBulan,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NAMA',
+        header: 'Nama'
+      },
+
+      {
+        accessorKey: 'MERK_USAHA',
+        header: 'Merk Usaha'
+      },
+      {
+        accessorKey: 'NO_IDENTITAS',
+        header: 'No Identitas'
+      },
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN} ${dataRow.KECAMATAN} ${dataRow.KABUPATEN} ${dataRow.PROVINSI}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR_PENGAMPU',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NM_AR_PENGAMPU',
+        header: 'AR Pengampu'
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'SUM_NILAI',
+        header: 'NILAI DATA',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        }
+      },
+      {
+        accessorKey: 'NM_KPP_ZONA',
+        header: 'KPP Lokasi'
+      },
+      {
+        accessorKey: 'NM_AR_ZONA',
+        header: 'AR Wilayah',
+        filter: false
+      },
+      {
+        accessorKey: 'NM_PEREKAM',
+        header: 'Perekam'
+      },
+      {
+        accessorKey: 'CREATION_DATE',
+        header: 'Tgl Rekam',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue()).format('YYYY-MM-DD HH:mm:ss')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
+  return (
+    <>
+      <Row>
+        <Col md="12">
+          <div className="d-flex justify-content-between border-bottom-1 pb-2">
+            <div>
+              <span className="mr-2">Bulan :</span>
+              {bulan.map((val, idx) => {
+                return (
+                  <Badge
+                    key={idx}
+                    id={idx}
+                    data-value={val.value}
+                    data-label={val.label}
+                    severity="warning"
+                    value={val.label}
+                    className="ref_bulan_a cursor-pointer mr-10"
+                    onClick={(e) => refBulanOnClick(e)}
+                  ></Badge>
+                )
+              })}
+            </div>
+            <div>
+              <span>Bulan terpilih : </span>
+              <span>{selectedBulanText}</span>
+            </div>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default PenugasanKpdl

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

@@ -1,198 +0,0 @@
-import React, { useEffect, 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 { format_angka } from "../util"
-import collect from "collect.js"
-import $ from "jquery"
-import "primereact/resources/themes/bootstrap4-light-blue/theme.css"
-import "primeflex/primeflex.css"
-
-const ChartKpdl = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
-
-  const refChart = useRef(null)
-  const [data, setData] = useState({
-    kpdl: [],
-    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([])
-
-  useEffect(() => {
-    if (selectedBulan != "") {
-      $.get({
-        url: base_url + "kewilayahan/kytp/identifikasiLapangan",
-        dataType: "json",
-        type: "POST",
-        data: {
-          ...dataSend,
-          bulan: selectedBulan
-        },
-        success: (data) => {
-          setData(data)
-        }
-      })
-    }
-  }, [dataSend, selectedBulan])
-
-  useEffect(() => {
-    $.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: "Lokasi KPDL",
-            style: {
-              color: Highcharts.getOptions().colors[2]
-            }
-          },
-          opposite: true
-        },
-        {
-          title: {
-            text: "Lokasi KPDL 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: hijau_klik_series
-      //   },
-      series: [
-        {
-          name: "Lokasi KPDL",
-          type: "column",
-          yAxis: 0,
-          color: Highcharts.getOptions().colors[2],
-          data: data.kpdl,
-          marker: {
-            enabled: true
-          },
-          tooltip: {
-            valueSuffix: " Kpdl"
-          }
-        },
-
-        {
-          name: "Lokasi KPDL akumulasi",
-          type: "spline",
-          yAxis: 1,
-          data: data.akum,
-          marker: {
-            enabled: true
-          },
-          tooltip: {
-            valueSuffix: " data"
-          },
-          visible: false
-        }
-      ]
-    }
-  }
-
-  const refBulanOnClick = (e) => {
-    // console.log(e)
-    const kodeBulan = e.target.dataset.value
-    const labelBulan = e.target.dataset.label
-    setSelectedBulan(kodeBulan)
-    setSelectedBulanText(labelBulan)
-  }
-  return (
-    <>
-      <Row>
-        <Col md="12">
-          <div className="d-flex justify-content-between border-bottom-1 pb-2">
-            <div>
-              <span className="mr-2">Bulan :</span>
-              {bulan.map((val, idx) => {
-                return (
-                  <Badge
-                    id={idx}
-                    data-value={val.value}
-                    data-label={val.label}
-                    severity="warning"
-                    value={val.label}
-                    className="ref_bulan_a cursor-pointer mr-10"
-                    onClick={(e) => refBulanOnClick(e)}
-                  ></Badge>
-                )
-              })}
-            </div>
-            <div>
-              <span>Bulan terpilih : </span>
-              <span>{selectedBulanText}</span>
-            </div>
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} />
-        </Col>
-      </Row>
-    </>
-  )
-}
-
-export default ChartKpdl

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

@@ -1,84 +1,346 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Highcharts from "highcharts"
+import Highcharts from 'highcharts'
-import HighchartsReact from "highcharts-react-official"
+import HighchartsReact from 'highcharts-react-official'
-import { Col, Row } from "reactstrap"
+import { Col, Row } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
-const Identifikasi = ({ dataSend }) => {
+import { Sidebar } from 'primereact/sidebar'
-  const base_url = "<?=base_url()?>"
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+const fetchSize = 101
 
+const Identifikasi = ({ dataSend }) => {
+  const base_url = '<?=base_url()?>'
   const refChart = useRef(null)
-  const [data, setData] = useState(null)
+  const [dataGraph, setDataGraph] = useState(null)
+  const [dataDetail, setDataDetail] = useState({ meta: { data: [], total: 0 } })
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
 
   useEffect(() => {
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranIdentifikasi",
+      url: base_url + 'kewilayahan/kytp/sebaranIdentifikasi',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend
       },
       success: (data) => {
-        setData(data.data)
+        setDataGraph(data.data)
       }
     })
   }, [dataSend])
 
   const optionsChart = (data, title) => {
-    const total_wp = collect(data).sum("y")
+    const total_wp = collect(data).sum('y')
     return {
       chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false,
-        type: "pie",
+        type: 'pie',
-        zoomType: "xy",
+        zoomType: 'xy',
-        height: "300"
+        height: '300'
       },
       title: {
         text: title,
-        style: { fontSize: "10px" }
+        style: { fontSize: '10px' }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total lokasi Matoa"
+        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total lokasi Matoa'
       },
       accessibility: {
         point: {
-          valueSuffix: "%"
+          valueSuffix: '%'
         }
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
-          cursor: "pointer",
+          cursor: 'pointer',
           dataLabels: {
             enabled: true,
-            style: { fontSize: "10px" },
+            style: { fontSize: '10px' },
             // format: "{point.name}:  {point.y} <br> {point.percentage:.1f} %"
             formatter: function () {
-              return `${this.key} : ${Number(this.y).toLocaleString("id-ID", {
+              return `${this.key} : ${Number(this.y).toLocaleString('id-ID', {
                 minimumFractionDigits: 0,
                 maximumFractionDigits: 0
-              })} <br> ${Number(this.percentage).toLocaleString("id-ID")}%`
+              })} <br> ${Number(this.percentage).toLocaleString('id-ID')}%`
+            }
+          }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function (a) {
+                setQuery(this.key)
+                setVisibleSidebar(true)
+              }
             }
           }
         }
-        // series: pie_click
       },
       series: [
         {
-          name: "",
+          name: '',
           data
         }
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/identifikasi/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NAMA',
+        header: 'Nama'
+      },
+
+      {
+        accessorKey: 'MERK_USAHA',
+        header: 'Merk Usaha'
+      },
+      {
+        accessorKey: 'NO_IDENTITAS',
+        header: 'No Identitas'
+      },
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN} ${dataRow.KECAMATAN} ${dataRow.KABUPATEN} ${dataRow.PROVINSI}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR_PENGAMPU',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NM_AR_PENGAMPU',
+        header: 'AR Pengampu'
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'SUM_NILAI',
+        header: 'NILAI DATA',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        }
+      },
+      {
+        accessorKey: 'NM_KPP_ZONA',
+        header: 'KPP Lokasi'
+      },
+      {
+        accessorKey: 'NM_AR_ZONA',
+        header: 'AR Wilayah',
+        filter: false
+      },
+      {
+        accessorKey: 'NM_PEREKAM',
+        header: 'Perekam'
+      },
+      {
+        accessorKey: 'CREATION_DATE',
+        header: 'Tgl Rekam',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue()).format('YYYY-MM-DD HH:mm:ss')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
         <Col>
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, "Identifikasi Lokasi Matoa")} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataGraph, 'Identifikasi Lokasi Matoa')} />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
         </Col>
       </Row>
     </>

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

@@ -1,23 +1,39 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Highcharts from "highcharts"
+import Highcharts from 'highcharts'
-import HighchartsReact from "highcharts-react-official"
+import HighchartsReact from 'highcharts-react-official'
-import { Col, Row } from "reactstrap"
+import { Col, Row } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
+
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const JenisStatusWp = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
 
   const refChart = useRef(null)
   const refChart2 = useRef(null)
   const [dataJenis, setDataJenis] = useState(null)
   const [dataStatus, setDataStatus] = useState(null)
 
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [jenisStatus, setJenisStatus] = useState('')
+
   useEffect(() => {
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranJenisStatusWp",
+      url: base_url + 'kewilayahan/kytp/sebaranJenisStatusWp',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend
       },
@@ -29,56 +45,284 @@ const JenisStatusWp = ({ dataSend }) => {
   }, [dataSend])
 
   const optionsChart = (data, title) => {
-    const total_wp = collect(data).sum("y")
+    const total_wp = collect(data).sum('y')
     return {
       chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false,
-        type: "pie",
+        type: 'pie',
-        zoomType: "xy",
+        zoomType: 'xy',
-        height: "300"
+        height: '300'
       },
       title: {
         text: title,
-        style: { fontSize: "10px" }
+        style: { fontSize: '10px' }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP"
+        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total NPWP'
       },
       accessibility: {
         point: {
-          valueSuffix: "%"
+          valueSuffix: '%'
         }
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
-          cursor: "pointer",
+          cursor: 'pointer',
           dataLabels: {
             enabled: true,
-            style: { fontSize: "10px" },
+            style: { fontSize: '10px' },
-            format: "{point.name}: <br> {point.percentage:.1f} %"
+            format: '{point.name}: <br> {point.percentage:.1f} %'
+          }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function () {
+                setQuery(this.key)
+                setJenisStatus(this.series.name)
+                setVisibleSidebar(true)
+              }
+            }
           }
         }
-        // series: pie_click
       },
       series: [
         {
-          name: "",
+          name: title,
           data
         }
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query, jenisStatus }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/jenisstatus/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            jenisStatus,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' },
+      mantineTableBodyProps: { className: 'mb-3' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
         <Col md="6">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataJenis, "Jenis WP")} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataJenis, 'Jenis WP')} />
         </Col>
         <Col md="6">
-          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataStatus, "Status WP")} />
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataStatus, 'Status WP')} />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} jenisStatus={jenisStatus} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
         </Col>
       </Row>
     </>

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

@@ -1,27 +1,52 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Highcharts from "highcharts"
+import Highcharts from 'highcharts'
-import HighchartsReact from "highcharts-react-official"
+import HighchartsReact from 'highcharts-react-official'
-import { Col, Row } from "reactstrap"
+import { Col, Row } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
+
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const KLU = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
 
   const refChart = useRef(null)
   const refChart1 = useRef(null)
   const refChart2 = useRef(null)
   const refChart3 = useRef(null)
   const [dataKluTerdaftar, setDataKluTerdaftar] = useState(null)
+  const [limaKluTerdaftar, setLimaKluTerdaftar] = useState([])
+
   const [dataKluYgBayar, setDataKluYgBayar] = useState(null)
+  const [limaKluYgBayar, setLimaKluYgBayar] = useState([])
+
   const [dataKluYgTidakBayar, setDataKluYgTidakBayar] = useState(null)
+  const [limaKluYgTidakBayar, setLimaKluYgTidakBayar] = useState([])
+
   const [dataRupiahBayar, setDataRupiahBayar] = useState(null)
+  const [limaRupiahBayar, setLimaRupiahBayar] = useState([])
+
+  const [limaBesar, setLimaBesar] = useState([])
+
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [jenisChart, setJenisChart] = useState(null)
 
   useEffect(() => {
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranKLU",
+      url: base_url + 'kewilayahan/kytp/sebaranKLU',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend
       },
@@ -34,12 +59,13 @@ const KLU = ({ dataSend }) => {
           for (let index = 0; index < data.length; index++) {
             const element = data[index]
             if (index < 5) {
-              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
+              dataRet.push({ name: element.name, y: element.y, key: element.key })
             } else {
               jmlLainnya += element.y
             }
           }
-          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          setLimaKluTerdaftar(collect(dataRet).pluck('key').all())
+          dataRet.push({ name: 'Lainnya', y: jmlLainnya, key: "<?=encryptData('lainnya')?>" })
           return dataRet
         })
         setDataKluYgBayar(() => {
@@ -50,12 +76,13 @@ const KLU = ({ dataSend }) => {
           for (let index = 0; index < data.length; index++) {
             const element = data[index]
             if (index < 5) {
-              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
+              dataRet.push({ name: element.name, y: element.y, key: element.key })
             } else {
               jmlLainnya += element.y
             }
           }
-          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          setLimaKluYgBayar(collect(dataRet).pluck('key').all())
+          dataRet.push({ name: 'Lainnya', y: jmlLainnya, key: "<?=encryptData('lainnya')?>" })
           return dataRet
         })
 
@@ -67,12 +94,13 @@ const KLU = ({ dataSend }) => {
           for (let index = 0; index < data.length; index++) {
             const element = data[index]
             if (index < 5) {
-              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
+              dataRet.push({ name: element.name, y: element.y, key: element.key })
             } else {
               jmlLainnya += element.y
             }
           }
-          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          setLimaKluYgTidakBayar(collect(dataRet).pluck('key').all())
+          dataRet.push({ name: 'Lainnya', y: jmlLainnya, key: "<?=encryptData('lainnya')?>" })
           return dataRet
         })
 
@@ -84,80 +112,322 @@ const KLU = ({ dataSend }) => {
           for (let index = 0; index < data.length; index++) {
             const element = data[index]
             if (index < 5) {
-              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
+              dataRet.push({ name: element.name, y: element.y, key: element.key })
             } else {
               jmlLainnya += element.y
             }
           }
-          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          setLimaRupiahBayar(collect(dataRet).pluck('key').all())
+          dataRet.push({ name: 'Lainnya', y: jmlLainnya, key: "<?=encryptData('lainnya')?>" })
           return dataRet
         })
       }
     })
   }, [dataSend])
 
-  const optionsChart = (data, title, attribute1) => {
+  const optionsChart = (data, title, attribute1, jenisChart) => {
-    const total_wp = collect(data).sum("y")
+    const total_wp = collect(data).sum('y')
     return {
       chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false,
-        type: "pie",
+        type: 'pie',
-        zoomType: "xy",
+        zoomType: 'xy',
-        height: "300"
+        height: '300'
       },
       title: {
         text: `<u>${title}</u>`,
-        style: { fontSize: "14px" },
+        style: { fontSize: '14px' },
         useHTML: true
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total " + attribute1
+        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total ' + attribute1
       },
       accessibility: {
         point: {
-          valueSuffix: "%"
+          valueSuffix: '%'
         }
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
-          cursor: "pointer",
+          cursor: 'pointer',
           dataLabels: {
             enabled: true,
-            style: { fontSize: "10px" },
+            style: { fontSize: '10px' },
-            format: "{point.name}: <br> {point.percentage:.1f} %"
+            format: '{point.name}: <br> {point.percentage:.1f} %'
+          }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function () {
+                setLimaBesar(collect(this.series.data).pluck('key').all().slice(0, 5))
+                setQuery(this.key)
+                setJenisChart(this.series.name)
+                setVisibleSidebar(true)
+              }
+            }
           }
         }
-        // series: pie_click
       },
       series: [
         {
-          name: "",
+          name: jenisChart,
           data
         }
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/klu/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            jenisChart,
+            limaBesar,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'NM_GOLPOK',
+        header: 'Golongan Pokok'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
         <Col md="6">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataKluTerdaftar, "KLU Terdaftar", "NPWP")} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataKluTerdaftar, 'KLU Terdaftar', 'NPWP', 'dataKluTerdaftar')} />
         </Col>
         <Col md="6">
           <HighchartsReact
             ref={refChart3}
             highcharts={Highcharts}
-            options={optionsChart(dataRupiahBayar, "Dominasi KLU berdarkan Jumlah Pembayaran (Rp)", "Keseluruhan Pembayaran")}
+            options={optionsChart(dataRupiahBayar, 'Dominasi KLU berdarkan Jumlah Pembayaran (Rp)', 'Keseluruhan Pembayaran', 'dataRupiahBayar')}
           />
         </Col>
         <Col md="6">
-          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataKluYgBayar, "Dominasi KLU dengan pembayaran >0", "NPWP")} />
+          <HighchartsReact
+            ref={refChart1}
+            highcharts={Highcharts}
+            options={optionsChart(dataKluYgBayar, 'Dominasi KLU dengan pembayaran >0', 'NPWP', 'dataKluYgBayar')}
+          />
         </Col>
         <Col md="6">
-          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataKluYgTidakBayar, "Dominasi KLU pembayaran <=0", "NPWP")} />
+          <HighchartsReact
+            ref={refChart2}
+            highcharts={Highcharts}
+            options={optionsChart(dataKluYgTidakBayar, 'Dominasi KLU pembayaran <=0', 'NPWP', 'dataKluYgTidakBayar')}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
         </Col>
       </Row>
     </>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
 import { Col, Row } from 'reactstrap'
@@ -8,8 +8,16 @@ import $ from 'jquery'
 import { Skeleton } from 'primereact/skeleton'
 import collect from 'collect.js'
 
-const date = new Date()
+import { Sidebar } from 'primereact/sidebar'
-const cBulan = date.getMonth() + 1
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
 
 const PayComp = ({ dataSend }) => {
   const base_url = '<?=base_url()?>'
@@ -22,6 +30,10 @@ const PayComp = ({ dataSend }) => {
   const [dataMin2, setDataMin2] = useState(null)
   const [loading, setLoading] = useState(false)
 
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [tahunBulan, setTahunBulan] = useState(null)
+
   const currentMonth = '<?=currentMonth()?>'
   const currentYear = '<?=currentYear()?>'
 
@@ -79,8 +91,19 @@ const PayComp = ({ dataSend }) => {
             format: '{point.name}: <br> {point.percentage:.1f} %'
           }
           //showInLegend: true
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function (a) {
+                setQuery(this.key)
+                setTahunBulan(this.thn_bln)
+                setVisibleSidebar(true)
+              }
+            }
+          }
         }
-        // series: pie_click
       },
       series: [
         {
@@ -90,6 +113,207 @@ const PayComp = ({ dataSend }) => {
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/paycomp/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            tahunBulan,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JML',
+        header: 'Jml Bulan',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'center'
+        },
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
   return (
     <>
       {loading ? (
@@ -111,6 +335,31 @@ const PayComp = ({ dataSend }) => {
           </Col>
         </Row>
       )}
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
+        </Col>
+      </Row>
     </>
   )
 }

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

@@ -1,14 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react'
+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 { format_angka } from '../util'
 import $ from 'jquery'
-const date = new Date()
+
-const cBulan = date.getMonth() + 1
 import { Skeleton } from 'primereact/skeleton'
 import collect from 'collect.js'
 
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const Pembayaran = ({ dataSend }) => {
   const base_url = '<?=base_url()?>'
 
@@ -20,8 +30,13 @@ const Pembayaran = ({ dataSend }) => {
   const [dataMin2, setDataMin2] = useState(null)
   const [loading, setLoading] = useState(false)
 
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [tahunBulan, setTahunBulan] = useState(null)
+
   const currentMonth = '<?=currentMonth()?>'
   const currentYear = '<?=currentYear()?>'
+
   useEffect(() => {
     setLoading(true)
     $.get({
@@ -76,8 +91,19 @@ const Pembayaran = ({ dataSend }) => {
             format: '{point.name}: <br> {point.percentage:.1f} %'
           }
           // showInLegend: true
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function (a) {
+                setQuery(this.key)
+                setTahunBulan(this.thn_bln)
+                setVisibleSidebar(true)
+              }
+            }
+          }
         }
-        // series: pie_click
       },
       series: [
         {
@@ -87,6 +113,197 @@ const Pembayaran = ({ dataSend }) => {
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/pembayaran/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            tahunBulan,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JML',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
@@ -114,6 +331,31 @@ const Pembayaran = ({ dataSend }) => {
           )}
         </Col>
       </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
+        </Col>
+      </Row>
     </>
   )
 }

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

@@ -1,23 +1,39 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Highcharts from "highcharts"
+import Highcharts from 'highcharts'
-import HighchartsReact from "highcharts-react-official"
+import HighchartsReact from 'highcharts-react-official'
-import { Col, Row } from "reactstrap"
+import { Col, Row } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
+
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const Pengampu = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
 
   const refChart = useRef(null)
   const refChart2 = useRef(null)
   const [dataAssign, setDataAssign] = useState(null)
   const [dataUnAssign, setDataUnAssign] = useState(null)
 
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [jenisChart, setJenisChart] = useState(null)
+
   useEffect(() => {
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranPengampu",
+      url: base_url + 'kewilayahan/kytp/sebaranPengampu',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend
       },
@@ -28,57 +44,285 @@ const Pengampu = ({ dataSend }) => {
     })
   }, [dataSend])
 
-  const optionsChart = (data, title) => {
+  const optionsChart = (data, title, kode) => {
-    const total_wp = collect(data).sum("y")
+    const total_wp = collect(data).sum('y')
     return {
       chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false,
-        type: "pie",
+        type: 'pie',
-        zoomType: "xy",
+        zoomType: 'xy',
-        height: "300"
+        height: '300'
       },
       title: {
         text: title,
-        style: { fontSize: "10px" }
+        style: { fontSize: '10px' }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP yang ada"
+        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total NPWP yang ada'
       },
       accessibility: {
         point: {
-          valueSuffix: "%"
+          valueSuffix: '%'
         }
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
-          cursor: "pointer",
+          cursor: 'pointer',
           dataLabels: {
             enabled: true,
-            style: { fontSize: "10px" },
+            style: { fontSize: '10px' },
-            format: "{point.name}: <br> {point.percentage:.1f} %"
+            format: '{point.name}: <br> {point.percentage:.1f} %'
+          }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function () {
+                setQuery(this.key)
+                setJenisChart(this.series.name)
+                setVisibleSidebar(true)
+              }
+            }
           }
         }
-        // series: pie_click
       },
       series: [
         {
-          name: "",
+          name: kode,
           data
         }
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query, jenisChart }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/pengampu/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            jenisChart,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' },
+      mantineTableBodyProps: { className: 'mb-3' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
         <Col md="6">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataAssign, "KPP Terdaftar")} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataAssign, 'KPP Terdaftar', 'assign')} />
         </Col>
         <Col md="6">
-          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataUnAssign, "Status UnAssign")} />
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataUnAssign, 'Status UnAssign', 'unassign')} />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} jenisChart={jenisChart} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
         </Col>
       </Row>
     </>

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

@@ -1,21 +1,36 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Highcharts from "highcharts"
+import Highcharts from 'highcharts'
-import HighchartsReact from "highcharts-react-official"
+import HighchartsReact from 'highcharts-react-official'
-import { Col, Row } from "reactstrap"
+import { Col, Row } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
+
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const SPTTahunan = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
 
   const refChart = useRef(null)
   const [data, setData] = useState(null)
 
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+
   useEffect(() => {
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranSPTTahunan",
+      url: base_url + 'kewilayahan/kytp/sebaranSPTTahunan',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend
       },
@@ -26,53 +41,279 @@ const SPTTahunan = ({ dataSend }) => {
   }, [dataSend])
 
   const optionsChart = (data, title) => {
-    const total_wp = collect(data).sum("y")
+    const total_wp = collect(data).sum('y')
     return {
       chart: {
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false,
-        type: "pie",
+        type: 'pie',
-        zoomType: "xy",
+        zoomType: 'xy',
-        height: "300"
+        height: '300'
       },
       title: {
         text: title,
-        style: { fontSize: "10px" }
+        style: { fontSize: '10px' }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP yang ada"
+        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + format_angka(total_wp) + ' total NPWP yang ada'
       },
       accessibility: {
         point: {
-          valueSuffix: "%"
+          valueSuffix: '%'
         }
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
-          cursor: "pointer",
+          cursor: 'pointer',
           dataLabels: {
             enabled: true,
-            style: { fontSize: "10px" },
+            style: { fontSize: '10px' },
-            format: "{point.name}: <br> {point.percentage:.1f} %"
+            format: '{point.name}: <br> {point.percentage:.1f} %'
+          }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function (a) {
+                setQuery(this.key)
+                setVisibleSidebar(true)
+              }
+            }
           }
         }
-        // series: pie_click
       },
       series: [
         {
-          name: "",
+          name: '',
           data
         }
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query, tahunBulan }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/spttahunan/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' },
+      mantineTableBodyProps: { className: 'mb-3' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row>
         <Col>
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, "SPT Tahunan")} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, 'SPT Tahunan')} />
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
         </Col>
       </Row>
     </>

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

@@ -1,25 +1,41 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Col, Row, Table } from "reactstrap"
+import { Col, Row, Table } from 'reactstrap'
-import { format_angka } from "../util"
+import { format_angka } from '../util'
-import collect from "collect.js"
+import collect from 'collect.js'
-import $ from "jquery"
+import $ from 'jquery'
-const date = new Date()
+import { Skeleton } from 'primereact/skeleton'
-const cBulan = date.getMonth() + 1
+
-import { Skeleton } from "primereact/skeleton"
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const Sof = ({ dataSend }) => {
-  const base_url = "<?=base_url()?>"
+  const base_url = '<?=base_url()?>'
 
   const [data, setData] = useState([])
   const [total, setTotal] = useState({ totalC: 0, totalP1: 0, totalP2: 0 })
   const [loading, setLoading] = useState(false)
-  const currentMonth = "<?=currentMonth()?>"
+
-  const currentYear = "<?=currentYear()?>"
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
+  const [tahunBulan, setTahunBulan] = useState(null)
+
+  const currentMonth = '<?=currentMonth()?>'
+  const currentYear = '<?=currentYear()?>'
+
   useEffect(() => {
     setLoading(true)
     $.get({
-      url: base_url + "kewilayahan/kytp/sebaranSof",
+      url: base_url + 'kewilayahan/kytp/sebaranSof',
-      dataType: "json",
+      dataType: 'json',
-      type: "POST",
+      type: 'POST',
       data: {
         ...dataSend,
         tahun: currentYear,
@@ -28,15 +44,216 @@ const Sof = ({ dataSend }) => {
       success: (data) => {
         setData(data.data)
         setTotal({
-          totalC: collect(data.data).sum("JML_C"),
+          totalC: collect(data.data).sum('JML_C'),
-          totalP1: collect(data.data).sum("JML_P1"),
+          totalP1: collect(data.data).sum('JML_P1'),
-          totalP2: collect(data.data).sum("JML_P2")
+          totalP2: collect(data.data).sum('JML_P2')
         })
         setLoading(false)
       }
     })
   }, [dataSend])
 
+  const angkaOnClick = (key, tahunBulan) => {
+    setQuery(key)
+    setTahunBulan(tahunBulan)
+    setVisibleSidebar(true)
+  }
+
+  const TableDetailGraph = ({ dataSend, query, tahunBulan }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/sof/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            tahunBulan,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'NAMA_WP',
+        header: 'Nama'
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN ?? ''} ${dataRow.KECAMATAN ?? ''} ${dataRow.KOTA ?? ''} ${dataRow.PROPINSI ?? ''}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NAMA_AR',
+        header: 'AR'
+      },
+      {
+        accessorKey: 'FLAG_WPS_WPK',
+        header: 'WPS/WPK',
+        size: 100,
+        mantineTableBodyCellProps: {
+          align: 'center'
+        }
+      },
+      {
+        accessorKey: 'LAPISAN',
+        header: 'Lapisan'
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'TANGGAL_DAFTAR',
+        header: 'Tgl Daftar',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' },
+      mantineTableBodyProps: { className: 'mb-3' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       {loading ? (
@@ -49,64 +266,70 @@ const Sof = ({ dataSend }) => {
         <Row>
           <Col>
             <div className="d-flex justify-content-center">
-              <Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
+              <Table bordered style={{ width: 'auto', fontSize: '0.85rem' }}>
                 <thead className="bg-primary text-white">
                   <tr>
-                    <th class="text-center text-white" rowspan="2">
+                    <th className="text-center text-white" rowSpan="2">
                       Lapisan
                     </th>
-                    <th class="text-center text-white" colspan="2">
+                    <th className="text-center text-white" colSpan="2">
                       s.d Sekarang
                     </th>
-                    <th class="text-center text-white" colspan="2">
+                    <th className="text-center text-white" colSpan="2">
                       s.d Bulan Lalu
                     </th>
-                    <th class="text-center text-white" colspan="2">
+                    <th className="text-center text-white" colSpan="2">
                       s.d 2 Bulan Lalu
                     </th>
                   </tr>
                   <tr>
-                    <th class="text-center text-white">Jml WP</th>
+                    <th className="text-center text-white">Jml WP</th>
-                    <th class="text-center text-white">%</th>
+                    <th className="text-center text-white">%</th>
-                    <th class="text-center text-white">Jml WP</th>
+                    <th className="text-center text-white">Jml WP</th>
-                    <th class="text-center text-white">%</th>
+                    <th className="text-center text-white">%</th>
-                    <th class="text-center text-white">Jml WP</th>
+                    <th className="text-center text-white">Jml WP</th>
-                    <th class="text-center text-white">%</th>
+                    <th className="text-center text-white">%</th>
                   </tr>
-                  <tr class="">
+                  <tr className="">
-                    <th class="text-center text-white">1</th>
+                    <th className="text-center text-white">1</th>
-                    <th class="text-center text-white">2</th>
+                    <th className="text-center text-white">2</th>
-                    <th class="text-center text-white">3</th>
+                    <th className="text-center text-white">3</th>
-                    <th class="text-center text-white">4</th>
+                    <th className="text-center text-white">4</th>
-                    <th class="text-center text-white">5</th>
+                    <th className="text-center text-white">5</th>
-                    <th class="text-center text-white">6</th>
+                    <th className="text-center text-white">6</th>
-                    <th class="text-center text-white">7</th>
+                    <th className="text-center text-white">7</th>
                   </tr>
                 </thead>
                 <tbody>
                   {data.map((val, idx) => {
                     return (
-                      <tr id={idx}>
+                      <tr key={idx}>
-                        <td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
+                        <td className="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
-                        <td class="text-center p-1">{val.JML_C}</td>
+                        <td className="text-center p-1 cursor-pointer text-blue underline" onClick={() => angkaOnClick(val.key, val.THNBLN_C)}>
-                        <td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
+                          {Number(val.JML_C).toLocaleString('id-ID')}
-                        <td class="text-center p-1">{val.JML_P1}</td>
+                        </td>
-                        <td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
+                        <td className="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + '%'}</td>
-                        <td class="text-center p-1">{val.JML_P2}</td>
+                        <td className="text-center p-1 cursor-pointer text-blue underline" onClick={() => angkaOnClick(val.key, val.THNBLN_P1)}>
-                        <td class="text-center p-1">{((val.JML_P2 / total.totalP2) * 100).toFixed(2) + "%"}</td>
+                          {Number(val.JML_P1).toLocaleString('id-ID')}
+                        </td>
+                        <td className="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + '%'}</td>
+                        <td className="text-center p-1 cursor-pointer text-blue underline" onClick={() => angkaOnClick(val.key, val.THNBLN_P2)}>
+                          {Number(val.JML_P2).toLocaleString('id-ID')}
+                        </td>
+                        <td className="text-center p-1">{((val.JML_P2 / total.totalP2) * 100).toFixed(2) + '%'}</td>
                       </tr>
                     )
                   })}
                 </tbody>
                 <tfoot>
                   <tr className="font-weight-bold">
-                    <td class="text-center">Total</td>
+                    <td className="text-center">Total</td>
-                    <td class="text-center">{total.totalC}</td>
+                    <td className="text-center">{Number(total.totalC).toLocaleString('id-ID')}</td>
-                    <td class="text-center">100%</td>
+                    <td className="text-center">100%</td>
-                    <td class="text-center">{total.totalP1}</td>
+                    <td className="text-center">{Number(total.totalP1).toLocaleString('id-ID')}</td>
-                    <td class="text-center">100%</td>
+                    <td className="text-center">100%</td>
-                    <td class="text-center">{total.totalP2}</td>
+                    <td className="text-center">{Number(total.totalP2).toLocaleString('id-ID')}</td>
-                    <td class="text-center">100%</td>
+                    <td className="text-center">100%</td>
                   </tr>
                 </tfoot>
               </Table>
@@ -114,6 +337,31 @@ const Sof = ({ dataSend }) => {
           </Col>
         </Row>
       )}
+      <Row>
+        <Col>
+          <Sidebar
+            header={
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} tahunBulan={tahunBulan} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
+        </Col>
+      </Row>
     </>
   )
 }

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

@@ -1,17 +1,31 @@
-import React, { useEffect, useRef, useState } from 'react'
+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 { format_angka } from '../util'
 import collect from 'collect.js'
 import $ from 'jquery'
+
+import { Sidebar } from 'primereact/sidebar'
+import '/node_modules/primeflex/primeflex.css'
+import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
+import { Text } from '@mantine/core'
+
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+var relativeTime = require('dayjs/plugin/relativeTime')
+var customParseFormat = require('dayjs/plugin/customParseFormat')
+const fetchSize = 101
+
 const ZonaPengawasan = ({ dataSend }) => {
   const base_url = '<?=base_url()?>'
 
   const refChart = useRef(null)
   const refChart2 = useRef(null)
   const [dataAll, setDataAll] = useState(null)
-  // const [dataZpLuarKpp, setDataZpLuarKpp] = useState(null)
+
+  const [visibleSidebar, setVisibleSidebar] = useState(false)
+  const [query, setQuery] = useState(null)
 
   useEffect(() => {
     $.get({
@@ -59,8 +73,18 @@ const ZonaPengawasan = ({ dataSend }) => {
             style: { fontSize: '10px' },
             format: '{point.name}: <br> {point.percentage:.1f} %'
           }
+        },
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: function () {
+                setQuery(this.key)
+                setVisibleSidebar(true)
+              }
+            }
+          }
         }
-        // series: pie_click
       },
       series: [
         {
@@ -70,6 +94,222 @@ const ZonaPengawasan = ({ dataSend }) => {
       ]
     }
   }
+
+  const TableDetailGraph = ({ dataSend, query }) => {
+    const tableContainerRef = useRef(null)
+    const rowVirtualizerInstanceRef = useRef(null)
+    const [columnFilters, setColumnFilters] = useState([])
+    const [globalFilter, setGlobalFilter] = useState()
+    const [sorting, setSorting] = useState([])
+    const base_url = '<?=base_url()?>'
+    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
+      queryKey: ['table-data', columnFilters, globalFilter, sorting],
+
+      queryFn: async ({ pageParam = 0 }) => {
+        const url = new URL(base_url + 'kewilayahan/sebaran/zonapengawasan/detail')
+        url.searchParams.set('start', `${pageParam * fetchSize}`)
+        url.searchParams.set('size', `${fetchSize}`)
+        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
+        url.searchParams.set('globalFilter', globalFilter ?? '')
+        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))
+
+        const response = await fetch(url.href, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            query,
+            ...dataSend
+          })
+        })
+
+        const json = await response.json()
+        return json
+      },
+      getNextPageParam: (_lastGroup, groups) => groups.length,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
+    })
+
+    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
+    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
+    const totalFetched = flatData.length
+
+    const fetchMoreOnBottomReached = useCallback(
+      (containerRefElement) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
+          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
+          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
+            fetchNextPage()
+          }
+        }
+      },
+
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    )
+
+    const columns = [
+      {
+        accessorKey: 'NAMA',
+        header: 'Nama'
+      },
+
+      {
+        accessorKey: 'MERK_USAHA',
+        header: 'Merk Usaha'
+      },
+      {
+        accessorKey: 'NO_IDENTITAS',
+        header: 'No Identitas'
+      },
+      {
+        accessorKey: 'NPWP',
+        header: 'NPWP',
+        enableClickToCopy: true,
+        size: 150
+      },
+      {
+        accessorKey: 'ALAMAT',
+        header: 'Alamat'
+      },
+      {
+        accessorKey: 'KELURAHAN',
+        header: 'Wil. Adm.',
+        Cell: (data) => {
+          const dataRow = data.row.original
+          return `${dataRow.KELURAHAN} ${dataRow.KECAMATAN} ${dataRow.KABUPATEN} ${dataRow.PROVINSI}`
+        }
+      },
+      {
+        accessorKey: 'STATUS_WP_MFWP',
+        header: 'Status WP'
+      },
+      {
+        accessorKey: 'JNS_WP_MFWP',
+        header: 'Jenis WP'
+      },
+      {
+        accessorKey: 'NM_KANTOR_PENGAMPU',
+        header: 'KPP Terdaftar'
+      },
+      {
+        accessorKey: 'NM_AR_PENGAMPU',
+        header: 'AR Pengampu'
+      },
+      {
+        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
+        header: 'Rp',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        },
+        size: 100
+      },
+      {
+        accessorKey: 'KETERANGAN',
+        header: 'SPT'
+      },
+      {
+        accessorKey: 'SUM_NILAI',
+        header: 'NILAI DATA',
+        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
+        mantineTableHeadCellProps: {
+          align: 'right'
+        },
+        mantineTableBodyCellProps: {
+          align: 'right'
+        }
+      },
+      {
+        accessorKey: 'NM_KPP_ZONA',
+        header: 'KPP Lokasi'
+      },
+      {
+        accessorKey: 'NM_AR_ZONA',
+        header: 'AR Wilayah',
+        filter: false
+      },
+      {
+        accessorKey: 'NM_PEREKAM',
+        header: 'Perekam'
+      },
+      {
+        accessorKey: 'CREATION_DATE',
+        header: 'Tgl Rekam',
+        Cell: ({ cell }) => {
+          return dayjs(cell.getValue()).format('YYYY-MM-DD HH:mm:ss')
+        }
+      }
+    ]
+
+    useEffect(() => {
+      if (rowVirtualizerInstanceRef.current) {
+        try {
+          rowVirtualizerInstanceRef.current.scrollToIndex(0)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }, [sorting, columnFilters, globalFilter])
+
+    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+
+    useEffect(() => {
+      fetchMoreOnBottomReached(tableContainerRef.current)
+    }, [fetchMoreOnBottomReached])
+
+    const table1 = useMantineReactTable({
+      columns,
+      data: flatData,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
+      manualFiltering: true,
+      manualSorting: true,
+      mantineTableContainerProps: {
+        ref: tableContainerRef, //get access to the table container element
+        sx: { maxHeight: '600px' }, //give the table a max height
+        onScroll: (
+          event //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target)
+      },
+      mantineToolbarAlertBannerProps: {
+        color: 'red',
+        children: 'Error loading data'
+      },
+      onColumnFiltersChange: setColumnFilters,
+      onGlobalFilterChange: setGlobalFilter,
+      onSortingChange: setSorting,
+      renderBottomToolbarCustomActions: () => (
+        <Text className="text-sm">
+          Fetched {totalFetched} of {totalDBRowCount} total rows.
+        </Text>
+      ),
+      state: {
+        columnFilters,
+        globalFilter,
+        isLoading,
+        showAlertBanner: isError,
+        showProgressBars: isFetching,
+        sorting
+      },
+      rowVirtualizerInstanceRef, //get access to the virtualizer instance
+      rowVirtualizerProps: { overscan: 10 },
+      mantineTableBodyCellProps: { className: 'p-1 text-xs' },
+      mantineTableBodyProps: { className: 'mb-3' }
+    })
+
+    return <MantineReactTable table={table1} />
+  }
+
+  const queryClient = new QueryClient()
+
   return (
     <>
       <Row className="center">
@@ -77,18 +317,37 @@ const ZonaPengawasan = ({ dataSend }) => {
           <HighchartsReact
             ref={refChart}
             highcharts={Highcharts}
-            options={optionsChart(dataAll, 'Sebarann Zona Pengawasan yang telah dilakukan kegiatan MATOA/KPDL')}
+            options={optionsChart(dataAll, 'Sebaran Zona Pengawasan yang telah dilakukan kegiatan MATOA/KPDL')}
           />
           <div className="center text-center">
             <span className="text-center">Sebaran Lokasi Usaha atas WP Terdaftar</span>
           </div>
         </Col>
-        {/* <Col md="6">
+      </Row>
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataZpLuarKpp, "Zona Pengawasan Luar KPP")} />
+      <Row>
-          <div className="center text-center">
+        <Col>
-            <span>KPP Terdaftar {"<>"} KPP Zona</span>
+          <Sidebar
-          </div>
+            header={
-        </Col> */}
+              <>
+                <h4>Detail Data</h4>
+              </>
+            }
+            visible={visibleSidebar}
+            position="bottom"
+            onHide={() => setVisibleSidebar(false)}
+            style={{ height: 'calc(100vh - 100px)' }}
+            blockScroll
+            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
+          >
+            <Row>
+              <Col>
+                <QueryClientProvider client={queryClient}>
+                  <TableDetailGraph dataSend={dataSend} query={query} />
+                </QueryClientProvider>
+              </Col>
+            </Row>
+          </Sidebar>
+        </Col>
       </Row>
     </>
   )

app/Views/kewilayahan/kytp/kpdl.js

@@ -64,15 +64,21 @@ const Root = () => {
   // let session = null
   const [session, setSession] = useState({})
   useEffect(() => {
-    setTimeout(() => {
+    // setTimeout(() => {
-      const session1 = JSON.parse('<?=getSession()?>')
+    jquery.ajax({
-      setSession(session1)
+      url: base_url + 'kewilayahan/ref/user',
-      if (session1.kppadm === '000') {
+      method: 'GET',
+      dataType: 'json',
+      success: (data) => {
+        setSession(data)
+        if (data.kppadm === '000') {
           toggle('wilayah')
         } else {
           toggle('zona')
         }
-    }, 2000)
+      }
+    })
+    // }, 2000)
 
     jquery.ajax({
       url: base_url + 'kewilayahan/ref/propinsi',
@@ -247,7 +253,7 @@ const Root = () => {
     const adm4_pcode = collect(kelSelected).pluck('value').all()
     const id_poly_zona = collect(zpSelected).pluck('value').all()
     const nip_ar_pengampu = collect().pluck('value').all()
-    console.log(dataOpsi)
+
     switch (opsiWilZona) {
       case 'wilayah':
         if (adm4_pcode.length) {
@@ -273,9 +279,7 @@ const Root = () => {
     }
   }
 
-  useEffect(() => {
+  useEffect(() => {}, [storeKpdl.selectedOpsi])
-    console.log(storeKpdl.selectedOpsi)
-  }, [storeKpdl.selectedOpsi])
 
   useEffect(() => {
     Highcharts.setOptions({
@@ -502,7 +506,7 @@ const Root = () => {
                   </NavLink>
                 </NavItem>
               </Nav>
-              <TabContent className="py-3" activeTab={session.kppadm === '000' ? active : 'zona'}>
+              <TabContent className="py-3" activeTab={active}>
                 <TabPane tabId="wilayah">
                   <Row>
                     <Col md="3">

app/Views/kewilayahan/kytp/kpdl.php

@@ -6,8 +6,8 @@
 </style>
 <?php
 helper('Kpdl');
-
 ?>
+
 <div class="main-content">
     <div class="container-fluid">
         <div id="app"></div>

app/Views/kewilayahan/peta/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600" />
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> -->
+    <!-- <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
+      integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
+      crossorigin=""
+    /> -->
+    <title>%REACT_APP_SITE_TITLE%</title>
+  </head>
+  <body>
+    <div id="root">
+        <h1>TEST HTML</h1>
+    </div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

app/Views/kewilayahan/peta/peta.js

@@ -0,0 +1,3 @@
+const Root = () => {
+  return <></>
+}

package.json

@@ -1,12 +1,20 @@
 {
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@mantine/core": "6.0.21",
+    "@mantine/dates": "6.0.21",
+    "@mantine/hooks": "6.0.21",
     "@reduxjs/toolkit": "^2.2.7",
+    "@tabler/icons-react": "^3.16.0",
+    "@tanstack/react-query": "^5.56.2",
     "axios": "^1.7.6",
     "bootstrap": "4.6.0",
     "collect.js": "^4.36.1",
+    "dayjs": "^1.11.13",
     "highcharts": "^11.4.8",
     "highcharts-react-official": "^3.2.1",
     "jquery": "^3.7.1",
+    "mantine-react-table": "^1.3.4",
     "popper": "^1.0.1",
     "primeflex": "^3.3.1",
     "primereact": "^10.8.2",
@@ -34,6 +42,7 @@
     "css-loader": "^7.1.2",
     "path": "^0.12.7",
     "style-loader": "^4.0.0",
-    "webpack": "^5.94.0"
+    "webpack": "^5.94.0",
+    "webpack-dev-server": "^5.1.0"
   }
 }

public/kpdl/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600" />
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> -->
+    <!-- <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
+      integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
+      crossorigin=""
+    /> -->
+    <!-- <title>%REACT_APP_SITE_TITLE%</title> -->
+  </head>
+  <body>
+    <div id="root">
+        <h1>TEST HTML</h1>
+    </div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

webpack.config.js

@@ -4,13 +4,14 @@ module.exports = {
   // entry: "./App.js",
   entry: {
     kpdl: './app/Views/kewilayahan/kytp/kpdl.js'
+    // peta: './app/Views/kewilayahan/peta/peta.js'
   },
   output: {
     path: path.resolve('./app/Views/kewilayahan/dist'),
     filename: '[name].js'
   },
   optimization: {
-    minimize: true
+    minimize: false
   },
   module: {
     rules: [
@@ -31,5 +32,13 @@ module.exports = {
       }
     ]
   },
-  mode: 'production'
+  mode: 'development'
+  // devServer: {
+  //   static: {
+  //     directory: path.join(__dirname, 'public/kpdl'),
+  //     serveIndex: true
+  //   },
+  //   compress: false,
+  //   port: 9000
+  // }
 }