enskripsi progresifitas

app/Config/Autoload.php

@@ -45,7 +45,7 @@ class Autoload extends AutoloadConfig
      */
     public $psr4 = [
         APP_NAMESPACE => APPPATH, // For custom app namespace
-        'Config'      => APPPATH . 'Config',
+        'Config' => APPPATH . 'Config',
     ];
 
     /**
@@ -95,5 +95,5 @@ class Autoload extends AutoloadConfig
      *
      * @var list<string>
      */
-    public $helpers = [];
+    public $helpers = ['KpdlHelper'];
 }

app/Controllers/Kewilayahan/Kytp.php

@@ -17,7 +17,9 @@ use CodeIgniter\Controller;
 
 class Kytp extends Controller
 {
+
     use ResponseTrait;
+
     public function index()
     {
         $db   = \Config\Database::connect();
@@ -54,33 +56,33 @@ class Kytp extends Controller
 
     public function sebaranPembayaran()
     {
-        $ret   = [];
-        $tahun = $this->request->getPost('tahun') ?? date('Y');
-        $bulan = $this->request->getPost('bulan') ?? date('m');
+        $Ald      = new AldLibrary;
+        $username = session('nip');
 
+        $tahun             = $Ald->decryptMe($this->request->getPost('tahun'), $username) ?? date('Y');
+        $bulan             = $Ald->decryptMe($this->request->getPost('bulan'), $username) ?? date('m');
         $sebaranPembayaran = new Pembayaran;
 
         $dataReturn['dataC']    = $sebaranPembayaran->dataC($this->request, $tahun, $bulan);
         $dataReturn['dataMin1'] = $sebaranPembayaran->dataC($this->request, $tahun, $bulan - 1);
         $dataReturn['dataMin2'] = $sebaranPembayaran->dataC($this->request, $tahun, $bulan - 2);
         return $this->respond($dataReturn, 200);
-        // return json_encode($dataReturn);
     }
 
     public function sebaranIdentifikasi()
     {
-        $ret = [];
 
         $sebaran = new Identifikasi;
 
         $dataReturn['data'] = $sebaran->data($this->request);
         return $this->respond($dataReturn, 200);
-        // return json_encode($dataReturn);
     }
     public function sebaranPayComp()
     {
-        $tahun = $this->request->getPost('tahun') ?? date('Y');
-        $bulan = $this->request->getPost('bulan') ?? date('m');
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        $tahun    = $Ald->decryptMe($this->request->getPost('tahun'), $username) ?? date('Y');
+        $bulan    = $Ald->decryptMe($this->request->getPost('bulan'), $username) ?? date('m');
 
         $sebaran = new PayComp;
 
@@ -93,8 +95,11 @@ class Kytp extends Controller
 
     public function sebaranSof()
     {
-        $tahun = $this->request->getPost('tahun') ?? date('Y');
-        $bulan = $this->request->getPost('bulan') ?? date('m');
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+
+        $tahun = $Ald->decryptMe($this->request->getPost('tahun'), $username) ?? date('Y');
+        $bulan = $Ald->decryptMe($this->request->getPost('bulan'), $username) ?? date('m');
 
         $sebaran            = new Sof;
         $dataReturn['data'] = $sebaran->dataC($this->request, $tahun, $bulan);
@@ -125,9 +130,8 @@ class Kytp extends Controller
     public function sebaranZonaPengawasan()
     {
         ini_set('max_input_vars', 3000);
-        $sebaran                = new ZonaPengawasan;
-        $dataReturn['dalamKpp'] = $sebaran->data($this->request, 'dalamKpp');
-        $dataReturn['luarKpp']  = $sebaran->data($this->request, 'luarKpp');
+        $sebaran           = new ZonaPengawasan;
+        $dataReturn['all'] = $sebaran->data($this->request);
 
         return $this->respond($dataReturn, 200);
     }
@@ -145,11 +149,12 @@ class Kytp extends Controller
     public function sebaranKLU()
     {
 
-        $sebaran                        = new KLU;
-        $tahun                          = $this->request->getGet('tahun') ?? date('Y');
-        $dataReturn['dataKluTerdaftar'] = $sebaran->data($this->request, 'dataKluTerdaftar');
-        $dataReturn['dataKluYgBayar']   = $sebaran->data($this->request, 'dataKluYgBayar');
-        $dataReturn['dataRupiahBayar']  = $sebaran->data($this->request, 'dataRupiahBayar');
+        $sebaran                           = new KLU;
+        $tahun                             = $this->request->getGet('tahun') ?? date('Y');
+        $dataReturn['dataKluTerdaftar']    = $sebaran->data($this->request, 'dataKluTerdaftar');
+        $dataReturn['dataKluYgBayar']      = $sebaran->data($this->request, 'dataKluYgBayar');
+        $dataReturn['dataKluYgTidakBayar'] = $sebaran->data($this->request, 'dataKluYgTidakBayar');
+        $dataReturn['dataRupiahBayar']     = $sebaran->data($this->request, 'dataRupiahBayar');
 
         return $this->respond($dataReturn, 200);
     }
@@ -158,6 +163,11 @@ class Kytp extends Controller
     {
         $Ald      = new AldLibrary();
         $username = session('nip');
+        if (!$this->validate([
+            'bulan' => 'required|max_length[10]',
+        ])) {
+            exit;
+        }
 
         $sebaran            = new IdentifikasiLapangan;
         $bulan              = $Ald->decryptMe($this->request->getPost('bulan'), $username) ?? 'semua';

app/Controllers/Kewilayahan/Ref.php

@@ -377,10 +377,11 @@ class Ref extends Controller
         $Ald = new AldLibrary();
 
         $data = [
-            'wilayah'  => ['key' => $Ald->encryptMe('wilayah', session('nip'))],
-            'zona'     => ['key' => $Ald->encryptMe('zona', session('nip'))],
-            'perekam'  => ['key' => $Ald->encryptMe('perekam', session('nip'))],
-            'pengampu' => ['key' => $Ald->encryptMe('pengampu', session('nip'))],
+            'default'  => ['key' => $Ald->encryptMe('default', session('nip')), 'name' => 'default'],
+            'wilayah'  => ['key' => $Ald->encryptMe('wilayah', session('nip')), 'name' => 'wilayah'],
+            'zona'     => ['key' => $Ald->encryptMe('zona', session('nip')), 'name' => 'zona'],
+            'perekam'  => ['key' => $Ald->encryptMe('perekam', session('nip')), 'name' => 'perekam'],
+            'pengampu' => ['key' => $Ald->encryptMe('pengampu', session('nip')), 'name' => 'pengampu'],
         ];
         return $this->respond($data, 200);
     }

app/Controllers/Kewilayahan/Sebaran/JenisStatus.php

@@ -47,7 +47,7 @@ class JenisStatus extends \App\Controllers\Kewilayahan\Kytp
                 break;
         }
 
-        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select($kolom . ", count(1) JML", false)
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select($kolom . ", count(DISTINCT NPWP) JML", false)
             ->where($kolom . " IS NOT NULL")
             ->groupBy($kolom);
 

app/Controllers/Kewilayahan/Sebaran/KLU.php

@@ -33,13 +33,17 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
         }
 
         $db   = \Config\Database::connect();
-        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK A')->select('NPWP, KD_GOLPOK, NM_GOLPOK, JUMLAH_PEMBAYARAN_THN_TERAKHIR')->distinct()
+        $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()
             ->where('NPWP IS NOT NULL');
 
         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);
         }
@@ -56,14 +60,14 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
             $npwp = $npwp->whereIn('NIP_AR_PENGAMPU', $nip_ar_pengampu);
         }
 
-        $agg = "count(1) as JML";
+        $agg = "count(DISTINCT NPWP) as JML";
         if ($jenischart == 'dataRupiahBayar') {
             $agg = "SUM(JUMLAH_PEMBAYARAN_THN_TERAKHIR) as JML";
         }
         $data = $db->newQuery()
             ->fromSubquery($npwp, "A")
             ->select("KD_GOLPOK, NM_GOLPOK," . $agg)
-            ->groupBy("KD_GOLPOK, NM_GOLPOK")->orderBy("JML", "desc")->limit(5);
+            ->groupBy("KD_GOLPOK, NM_GOLPOK")->orderBy("JML", "desc");
 
         $data = $data->get()->getResult();
 
@@ -74,7 +78,7 @@ class KLU extends \App\Controllers\Kewilayahan\Kytp
             array_push($ret,
                 [
                     'name' => $b->NM_GOLPOK,
-                    'id'   => $b->KD_GOLPOK,
+                    'kode' => $Ald->encryptMe($b->KD_GOLPOK, $username),
                     'y'    => floatval($b->JML),
                 ]
             );

app/Controllers/Kewilayahan/Sebaran/PayComp.php

@@ -56,7 +56,7 @@ class PayComp extends \App\Controllers\Kewilayahan\Kytp
         $data = $db->newQuery()
             ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN,  B.JML|| ' bulan' as KETERANGAN, COUNT(1) AS Y", false)
             ->fromSubquery($npwp, 'A')
-            ->join('KPDL_MV_PENERIMAAN_AGG_PC B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'inner')
+            ->join('KPDL_MV_PENERIMAAN_AGG_PC B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = '" . $tahun . "' and B.BULAN=" . $bulan), 'inner')
             ->groupBy("B.JML")->orderBy("KETERANGAN");
 
         $data = $data->get()->getResult();

app/Controllers/Kewilayahan/Sebaran/Pembayaran.php

@@ -56,9 +56,8 @@ class Pembayaran extends \App\Controllers\Kewilayahan\Kytp
         $data = $db->newQuery()
             ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN,  NVL(WARNA_BYR, 'black') WARNA_BYR, COUNT(1) AS Y")
             ->fromSubquery($npwp, 'A')
-            ->join('KPDL_MV_PENERIMAAN_AGG B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'left')
+            ->join('KPDL_MV_PENERIMAAN_AGG B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = '" . $tahun . "' and B.BULAN=" . $bulan), 'left')
             ->groupBy("NVL(WARNA_BYR, 'black')")->orderBy("WARNA_BYR");
-
         $data = $data->get()->getResult();
 
         $ret = [];

app/Controllers/Kewilayahan/Sebaran/Sof.php

@@ -55,19 +55,19 @@ class Sof extends \App\Controllers\Kewilayahan\Kytp
         $sqlBulanIni = $db->newQuery()
             ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
             ->fromSubquery($npwp, 'A')
-            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'inner')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = '" . $tahun . "' and B.BULAN=" . $bulan), 'inner')
             ->groupBy("B.LAPISAN")->getCompiledSelect();
 
         $sqlBulanLalu = $db->newQuery()
             ->select("'" . $tahun . '-' . $bulan - 1 . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
             ->fromSubquery($npwp, 'A')
-            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan - 1), 'inner')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = '" . $tahun . "' and B.BULAN=" . $bulan - 1), 'inner')
             ->groupBy("B.LAPISAN")->getCompiledSelect();
 
         $sql2BulanLalu = $db->newQuery()
             ->select("'" . $tahun . '-' . $bulan - 2 . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
             ->fromSubquery($npwp, 'A')
-            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan - 2), 'inner')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = '" . $tahun . "' and B.BULAN=" . $bulan - 2), 'inner')
             ->groupBy("B.LAPISAN")->getCompiledSelect();
 
         $sqlSemua = $db->newQuery()

app/Controllers/Kewilayahan/Sebaran/ZonaPengawasan.php

@@ -6,7 +6,7 @@ use App\Libraries\AldLibrary;
 class ZonaPengawasan extends \App\Controllers\Kewilayahan\Kytp
 
 {
-    protected function data($request, $jenis)
+    protected function data($request)
     {
         ini_set('max_input_vars', 3000);
         $Ald      = new AldLibrary;
@@ -35,22 +35,22 @@ class ZonaPengawasan extends \App\Controllers\Kewilayahan\Kytp
 
         $db = \Config\Database::connect();
 
-        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select("KPPADM_ZONA, NM_KPP_ZONA, count(DISTINCT NPWP) JML", false)
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select("KPPADM_ZONA, NM_KPP_ZONA, count(1) JML", false)
             ->groupBy("KPPADM_ZONA, NM_KPP_ZONA")->orderBy("JML", 'desc');
 
-        switch ($jenis) {
-            case 'dalamKpp':
-                $npwp = $npwp->where("NPWP IS NOT NULL")
-                    ->where("KPPADM_PENGAMPU = KPPADM_ZONA");
-                break;
-            case 'luarKpp':
-                $npwp = $npwp->where("NPWP IS NOT NULL")
-                    ->where("KPPADM_PENGAMPU != KPPADM_ZONA");
-                break;
-            default:
-
-                break;
-        }
+        // switch ($jenis) {
+        //     case 'dalamKpp':
+        //         $npwp = $npwp->where("NPWP IS NOT NULL")
+        //             ->where("KPPADM_PENGAMPU = KPPADM_ZONA");
+        //         break;
+        //     case 'luarKpp':
+        //         $npwp = $npwp->where("NPWP IS NOT NULL")
+        //             ->where("KPPADM_PENGAMPU != KPPADM_ZONA");
+        //         break;
+        //     default:
+
+        //         break;
+        // }
 
         if ($opsiWilZona == 'wilayah') {
             $npwp->whereIn('ADM4_PCODE', $adm4_pcode);

app/Helpers/KpdlHelper_helper.php

@@ -0,0 +1,29 @@
+<?php
+
+use App\Libraries\AldLibrary;
+if (!function_exists('currentMonth')) {
+    function currentMonth()
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        return $Ald->encryptMe(date('m'), $username);
+    }
+}
+
+if (!function_exists('currentYear')) {
+    function currentYear()
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        return $Ald->encryptMe(date('Y'), $username);
+    }
+}
+
+if (!function_exists('encryptData')) {
+    function encryptData($text)
+    {
+        $Ald      = new AldLibrary;
+        $username = session('nip');
+        return $Ald->encryptMe($text, $username);
+    }
+}

app/Views/kewilayahan/dist/kpdl.js.LICENSE.txt

@@ -55,6 +55,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

app/Views/kewilayahan/kytp/TabProgresifitas.js

@@ -10,8 +10,13 @@ import Pengampu from "./componentProgresifitas/Pengampu"
 import SPTTahunan from "./componentProgresifitas/SPTTahunan"
 import KLU from "./componentProgresifitas/KLU"
 import ZonaPengawasan from "./componentProgresifitas/ZonaPengawasan"
+import { useDispatch, useSelector } from "react-redux"
+import { isObjEmpty } from "./util"
 
 export default function TabProgresifitas({ dataSend }) {
+  const dispatch = useDispatch()
+  const storeKpdl = useSelector((state) => state.kpdl)
+
   return (
     <div className="card">
       <TabView scrollable>
@@ -39,14 +44,17 @@ export default function TabProgresifitas({ dataSend }) {
         <TabPanel id="tab_5" header="Jenis/Status WP">
           <JenisStatusWp dataSend={dataSend} />
         </TabPanel>
-
-        <TabPanel id="tab_5" header="Pengampu">
-          <Pengampu dataSend={dataSend} />
-        </TabPanel>
-        <TabPanel id="tab_6" header="Zona Pengawasan">
-          <ZonaPengawasan dataSend={dataSend} />
-        </TabPanel>
-        <TabPanel id="tab_8" header="KLU">
+        {storeKpdl && !isObjEmpty(storeKpdl) && storeKpdl.selectedOpsi && storeKpdl.selectedOpsi?.name !== "pengampu" ? (
+          <TabPanel id="tab_5" header="Pengampu">
+            <Pengampu dataSend={dataSend} />
+          </TabPanel>
+        ) : null}
+        {storeKpdl && !isObjEmpty(storeKpdl) && storeKpdl.selectedOpsi && storeKpdl.selectedOpsi?.name !== "zona" ? (
+          <TabPanel id="tab_6" header="Zona Pengawasan">
+            <ZonaPengawasan dataSend={dataSend} />
+          </TabPanel>
+        ) : null}
+        <TabPanel id="tab_8" header="KLU (Golongan Pokok)">
           <KLU dataSend={dataSend} />
         </TabPanel>
       </TabView>

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

@@ -6,7 +6,12 @@ import { Button as ButtonP } from "primereact/button"
 import { isObjEmpty } from "../util"
 import $ from "jquery"
 import collect from "collect.js"
+import { setSelectedOpsi } from "../store/KpdlStore"
+import { useDispatch, useSelector } from "react-redux"
 const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi }) => {
+  const dispatch = useDispatch()
+  const storeKpdl = useSelector((state) => state.kpdl)
+
   const [kanwil, setKanwil] = useState({})
   const [kpp, setKpp] = useState({})
   const [seksi, setSeksi] = useState([])
@@ -55,7 +60,6 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
     setSeksiSelected([])
     setArSelected([])
     if (kppSelected && !isObjEmpty(kppSelected)) {
-      // const kpp = collect(kppSelected).pluck("value").all()
       const kpp = kppSelected.value
       $.ajax({
         url: base_url + "kewilayahan/ref/seksi",
@@ -90,6 +94,7 @@ const NipPengampu = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMa
   const buttonProsesOnClick = () => {
     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 {

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

@@ -6,8 +6,13 @@ import { Button as ButtonP } from "primereact/button"
 import { isObjEmpty } from "../util"
 import $ from "jquery"
 import collect from "collect.js"
+import { useDispatch, useSelector } from "react-redux"
+import { setSelectedOpsi } from "../store/KpdlStore"
 
 const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi }) => {
+  const dispatch = useDispatch()
+  const storeKpdl = useSelector((state) => state.kpdl)
+
   const base_url = "<?=base_url()?>"
 
   const [kanwil, setKanwil] = useState({})
@@ -58,7 +63,6 @@ const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMat
     setSeksiSelected([])
     setArSelected([])
     if (kppSelected && !isObjEmpty(kppSelected)) {
-      // const kpp = collect(kppSelected).pluck("value").all()
       const kpp = kppSelected.value
       $.ajax({
         url: base_url + "kewilayahan/ref/seksi",
@@ -95,6 +99,7 @@ const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMat
   const buttonProsesOnClick = () => {
     const nip_ar_perekam = collect(arSelected).pluck("value").all()
     if (nip_ar_perekam.length) {
+      dispatch(setSelectedOpsi(dataOpsi.perekam))
       setDataSend({ opsiWilZona: dataOpsi.perekam.key, nip_ar_perekam })
       setHiddenGraphMatoa(true)
     } else {
@@ -115,7 +120,6 @@ const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMat
               setKanwilSelected(e)
             }}
             classNamePrefix="select"
-            // defaultValue={kanwilSelected}
             value={kanwilSelected}
             isClearable={false}
             options={kanwil}

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

@@ -25,18 +25,20 @@ const ChartKpdl = ({ dataSend }) => {
   const [bulan, setBulan] = useState([])
 
   useEffect(() => {
-    $.get({
-      url: base_url + "kewilayahan/kytp/identifikasiLapangan",
-      dataType: "json",
-      type: "POST",
-      data: {
-        ...dataSend,
-        bulan: selectedBulan
-      },
-      success: (data) => {
-        setData(data)
-      }
-    })
+    if (selectedBulan != "") {
+      $.get({
+        url: base_url + "kewilayahan/kytp/identifikasiLapangan",
+        dataType: "json",
+        type: "POST",
+        data: {
+          ...dataSend,
+          bulan: selectedBulan
+        },
+        success: (data) => {
+          setData(data)
+        }
+      })
+    }
   }, [dataSend, selectedBulan])
 
   useEffect(() => {

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

@@ -11,8 +11,10 @@ const KLU = ({ dataSend }) => {
   const refChart = useRef(null)
   const refChart1 = useRef(null)
   const refChart2 = useRef(null)
+  const refChart3 = useRef(null)
   const [dataKluTerdaftar, setDataKluTerdaftar] = useState(null)
-  const [dataKluYgBayar, setDataKluYgbayar] = useState(null)
+  const [dataKluYgBayar, setDataKluYgBayar] = useState(null)
+  const [dataKluYgTidakBayar, setDataKluYgTidakBayar] = useState(null)
   const [dataRupiahBayar, setDataRupiahBayar] = useState(null)
 
   useEffect(() => {
@@ -24,9 +26,72 @@ const KLU = ({ dataSend }) => {
         ...dataSend
       },
       success: (resp) => {
-        setDataKluTerdaftar(resp.dataKluTerdaftar)
-        setDataKluYgbayar(resp.dataKluYgBayar)
-        setDataRupiahBayar(resp.dataRupiahBayar)
+        setDataKluTerdaftar(() => {
+          const data = resp.dataKluTerdaftar
+          const dataRet = []
+          let jmlLainnya = 0
+
+          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 })
+            } else {
+              jmlLainnya += element.y
+            }
+          }
+          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          return dataRet
+        })
+        setDataKluYgBayar(() => {
+          const data = resp.dataKluYgBayar
+          const dataRet = []
+          let jmlLainnya = 0
+
+          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 })
+            } else {
+              jmlLainnya += element.y
+            }
+          }
+          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          return dataRet
+        })
+
+        setDataKluYgTidakBayar(() => {
+          const data = resp.dataKluYgTidakBayar
+          const dataRet = []
+          let jmlLainnya = 0
+
+          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 })
+            } else {
+              jmlLainnya += element.y
+            }
+          }
+          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          return dataRet
+        })
+
+        setDataRupiahBayar(() => {
+          const data = resp.dataRupiahBayar
+          const dataRet = []
+          let jmlLainnya = 0
+
+          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 })
+            } else {
+              jmlLainnya += element.y
+            }
+          }
+          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
+          return dataRet
+        })
       }
     })
   }, [dataSend])
@@ -43,8 +108,9 @@ const KLU = ({ dataSend }) => {
         height: "300"
       },
       title: {
-        text: title,
-        style: { fontSize: "10px" }
+        text: `<u>${title}</u>`,
+        style: { fontSize: "14px" },
+        useHTML: true
       },
       tooltip: {
         pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total " + attribute1
@@ -81,15 +147,18 @@ const KLU = ({ dataSend }) => {
           <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataKluTerdaftar, "KLU Terdaftar", "NPWP")} />
         </Col>
         <Col md="6">
-          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataKluYgBayar, "KLU Yang Bayar", "NPWP")} />
-        </Col>
-        <Col md="12">
           <HighchartsReact
-            ref={refChart2}
+            ref={refChart3}
             highcharts={Highcharts}
-            options={optionsChart(dataRupiahBayar, "Dominasi KLU berdarkan Jumlah Bayar", "Keseluruhan Pembayaran")}
+            options={optionsChart(dataRupiahBayar, "Dominasi KLU berdarkan Jumlah Pembayaran (Rp)", "Keseluruhan Pembayaran")}
           />
         </Col>
+        <Col md="6">
+          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataKluYgBayar, "Dominasi KLU dengan pembayaran >0", "NPWP")} />
+        </Col>
+        <Col md="6">
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataKluYgTidakBayar, "Dominasi KLU pembayaran <=0", "NPWP")} />
+        </Col>
       </Row>
     </>
   )

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

@@ -4,6 +4,9 @@ import HighchartsReact from "highcharts-react-official"
 import { Col, Row } from "reactstrap"
 import { format_angka } from "../util"
 import $ from "jquery"
+
+import { Skeleton } from "primereact/skeleton"
+
 const date = new Date()
 const cBulan = date.getMonth() + 1
 
@@ -16,21 +19,27 @@ const PayComp = ({ dataSend }) => {
   const [dataC, setDataC] = useState(null)
   const [dataMin1, setDataMin1] = useState(null)
   const [dataMin2, setDataMin2] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const currentMonth = "<?=currentMonth()?>"
+  const currentYear = "<?=currentYear()?>"
 
   useEffect(() => {
+    setLoading(true)
     $.get({
       url: base_url + "kewilayahan/kytp/sebaranPayComp",
       dataType: "json",
       type: "POST",
       data: {
         ...dataSend,
-        tahun: date.getFullYear(),
-        bulan: cBulan
+        tahun: currentYear,
+        bulan: currentMonth
       },
       success: (data) => {
         setDataC(data.dataC)
         setDataMin1(data.dataMin1)
         setDataMin2(data.dataMin2)
+        setLoading(false)
       }
     })
   }, [dataSend])
@@ -82,17 +91,25 @@ const PayComp = ({ dataSend }) => {
   }
   return (
     <>
-      <Row>
-        <Col md="4">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
-        </Col>
-        <Col md="4">
-          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
-        </Col>
-        <Col md="4">
-          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
-        </Col>
-      </Row>
+      {loading ? (
+        <Row>
+          <Col md="12">
+            <Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton>
+          </Col>
+        </Row>
+      ) : (
+        <Row>
+          <Col md="4">
+            <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
+          </Col>
+          <Col md="4">
+            <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
+          </Col>
+          <Col md="4">
+            <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
+          </Col>
+        </Row>
+      )}
     </>
   )
 }

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

@@ -6,6 +6,7 @@ import { format_angka } from "../util"
 import $ from "jquery"
 const date = new Date()
 const cBulan = date.getMonth() + 1
+import { Skeleton } from "primereact/skeleton"
 
 const Pembayaran = ({ dataSend }) => {
   const base_url = "<?=base_url()?>"
@@ -16,21 +17,26 @@ const Pembayaran = ({ dataSend }) => {
   const [dataC, setDataC] = useState(null)
   const [dataMin1, setDataMin1] = useState(null)
   const [dataMin2, setDataMin2] = useState(null)
+  const [loading, setLoading] = useState(false)
 
+  const currentMonth = "<?=currentMonth()?>"
+  const currentYear = "<?=currentYear()?>"
   useEffect(() => {
+    setLoading(true)
     $.get({
       url: base_url + "kewilayahan/kytp/sebaranPembayaran",
       dataType: "json",
       type: "POST",
       data: {
         ...dataSend,
-        tahun: date.getFullYear(),
-        bulan: cBulan
+        tahun: currentYear,
+        bulan: currentMonth
       },
       success: (data) => {
         setDataC(data.dataC)
         setDataMin1(data.dataMin1)
         setDataMin2(data.dataMin2)
+        setLoading(false)
       }
     })
   }, [dataSend])
@@ -83,14 +89,28 @@ const Pembayaran = ({ dataSend }) => {
   return (
     <>
       <Row>
-        <Col md="4">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
+        <Col md="4" className="">
+          {loading ? (
+            <div className="text-center">
+              <Skeleton className="" shape="circle" size="15rem"></Skeleton>
+            </div>
+          ) : (
+            <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
+          )}
         </Col>
         <Col md="4">
-          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
+          {loading ? (
+            <Skeleton className="" shape="circle" size="15rem"></Skeleton>
+          ) : (
+            <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
+          )}
         </Col>
         <Col md="4">
-          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
+          {loading ? (
+            <Skeleton className="center text-center" shape="circle" size="15rem"></Skeleton>
+          ) : (
+            <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
+          )}
         </Col>
       </Row>
     </>

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

@@ -5,22 +5,25 @@ import collect from "collect.js"
 import $ from "jquery"
 const date = new Date()
 const cBulan = date.getMonth() + 1
-
+import { Skeleton } from "primereact/skeleton"
 const Sof = ({ dataSend }) => {
   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()?>"
   useEffect(() => {
+    setLoading(true)
     $.get({
       url: base_url + "kewilayahan/kytp/sebaranSof",
       dataType: "json",
       type: "POST",
       data: {
         ...dataSend,
-        tahun: date.getFullYear(),
-        bulan: cBulan
+        tahun: currentYear,
+        bulan: currentMonth
       },
       success: (data) => {
         setData(data.data)
@@ -29,79 +32,88 @@ const Sof = ({ dataSend }) => {
           totalP1: collect(data.data).sum("JML_P1"),
           totalP2: collect(data.data).sum("JML_P2")
         })
+        setLoading(false)
       }
     })
   }, [dataSend])
 
   return (
     <>
-      <Row>
-        <Col>
-          <div className="d-flex justify-content-center">
-            <Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
-              <thead className="bg-primary text-white">
-                <tr>
-                  <th class="text-center text-white" rowspan="2">
-                    Lapisan
-                  </th>
-                  <th class="text-center text-white" colspan="2">
-                    s.d Sekarang
-                  </th>
-                  <th class="text-center text-white" colspan="2">
-                    s.d Bulan Lalu
-                  </th>
-                  <th class="text-center text-white" colspan="2">
-                    s.d 2 Bulan Lalu
-                  </th>
-                </tr>
-                <tr>
-                  <th class="text-center text-white">Jml WP</th>
-                  <th class="text-center text-white">%</th>
-                  <th class="text-center text-white">Jml WP</th>
-                  <th class="text-center text-white">%</th>
-                  <th class="text-center text-white">Jml WP</th>
-                  <th class="text-center text-white">%</th>
-                </tr>
-                <tr class="">
-                  <th class="text-center text-white">1</th>
-                  <th class="text-center text-white">2</th>
-                  <th class="text-center text-white">3</th>
-                  <th class="text-center text-white">4</th>
-                  <th class="text-center text-white">5</th>
-                  <th class="text-center text-white">6</th>
-                  <th class="text-center text-white">7</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.map((val, idx) => {
-                  return (
-                    <tr id={idx}>
-                      <td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
-                      <td class="text-center p-1">{val.JML_C}</td>
-                      <td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
-                      <td class="text-center p-1">{val.JML_P1}</td>
-                      <td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
-                      <td class="text-center p-1">{val.JML_P2}</td>
-                      <td class="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 class="text-center">{total.totalC}</td>
-                  <td class="text-center">100%</td>
-                  <td class="text-center">{total.totalP1}</td>
-                  <td class="text-center">100%</td>
-                  <td class="text-center">{total.totalP2}</td>
-                  <td class="text-center">100%</td>
-                </tr>
-              </tfoot>
-            </Table>
-          </div>
-        </Col>
-      </Row>
+      {loading ? (
+        <Row>
+          <Col>
+            <Skeleton className="" shape="rectangle" height="20rem" width="100%"></Skeleton>
+          </Col>
+        </Row>
+      ) : (
+        <Row>
+          <Col>
+            <div className="d-flex justify-content-center">
+              <Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
+                <thead className="bg-primary text-white">
+                  <tr>
+                    <th class="text-center text-white" rowspan="2">
+                      Lapisan
+                    </th>
+                    <th class="text-center text-white" colspan="2">
+                      s.d Sekarang
+                    </th>
+                    <th class="text-center text-white" colspan="2">
+                      s.d Bulan Lalu
+                    </th>
+                    <th class="text-center text-white" colspan="2">
+                      s.d 2 Bulan Lalu
+                    </th>
+                  </tr>
+                  <tr>
+                    <th class="text-center text-white">Jml WP</th>
+                    <th class="text-center text-white">%</th>
+                    <th class="text-center text-white">Jml WP</th>
+                    <th class="text-center text-white">%</th>
+                    <th class="text-center text-white">Jml WP</th>
+                    <th class="text-center text-white">%</th>
+                  </tr>
+                  <tr class="">
+                    <th class="text-center text-white">1</th>
+                    <th class="text-center text-white">2</th>
+                    <th class="text-center text-white">3</th>
+                    <th class="text-center text-white">4</th>
+                    <th class="text-center text-white">5</th>
+                    <th class="text-center text-white">6</th>
+                    <th class="text-center text-white">7</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.map((val, idx) => {
+                    return (
+                      <tr id={idx}>
+                        <td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
+                        <td class="text-center p-1">{val.JML_C}</td>
+                        <td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
+                        <td class="text-center p-1">{val.JML_P1}</td>
+                        <td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
+                        <td class="text-center p-1">{val.JML_P2}</td>
+                        <td class="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 class="text-center">{total.totalC}</td>
+                    <td class="text-center">100%</td>
+                    <td class="text-center">{total.totalP1}</td>
+                    <td class="text-center">100%</td>
+                    <td class="text-center">{total.totalP2}</td>
+                    <td class="text-center">100%</td>
+                  </tr>
+                </tfoot>
+              </Table>
+            </div>
+          </Col>
+        </Row>
+      )}
     </>
   )
 }

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

@@ -10,8 +10,8 @@ const ZonaPengawasan = ({ dataSend }) => {
 
   const refChart = useRef(null)
   const refChart2 = useRef(null)
-  const [dataZpDalamKpp, setDataZpDalamKpp] = useState(null)
-  const [dataZpLuarKpp, setDataZpLuarKpp] = useState(null)
+  const [dataAll, setDataAll] = useState(null)
+  // const [dataZpLuarKpp, setDataZpLuarKpp] = useState(null)
 
   useEffect(() => {
     $.get({
@@ -22,8 +22,7 @@ const ZonaPengawasan = ({ dataSend }) => {
         ...dataSend
       },
       success: (data) => {
-        setDataZpDalamKpp(data.dalamKpp)
-        setDataZpLuarKpp(data.luarKpp)
+        setDataAll(data.all)
       }
     })
   }, [dataSend])
@@ -44,7 +43,7 @@ const ZonaPengawasan = ({ dataSend }) => {
         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 Lokasi KPDL"
       },
       accessibility: {
         point: {
@@ -73,19 +72,23 @@ const ZonaPengawasan = ({ dataSend }) => {
   }
   return (
     <>
-      <Row>
-        <Col md="6">
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataZpDalamKpp, "Zona Pengawasan KPP Sendiri")} />
+      <Row className="center">
+        <Col md="12">
+          <HighchartsReact
+            ref={refChart}
+            highcharts={Highcharts}
+            options={optionsChart(dataAll, "Sebarann Zona Pengawasan yang telah dilakukan kegiatan MATOA/KPDL")}
+          />
           <div className="center text-center">
-            <span className="text-center">KPP Terdaftar = KPP Zona</span>
+            <span className="text-center">Sebaran Lokasi Usaha atas WP Terdaftar</span>
           </div>
         </Col>
-        <Col md="6">
+        {/* <Col md="6">
           <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataZpLuarKpp, "Zona Pengawasan Luar KPP")} />
           <div className="center text-center">
             <span>KPP Terdaftar {"<>"} KPP Zona</span>
           </div>
-        </Col>
+        </Col> */}
       </Row>
     </>
   )

app/Views/kewilayahan/kytp/kpdl.js

@@ -16,6 +16,9 @@ import TabProgresifitas from "./TabProgresifitas"
 import TabPenugasan from "./TabPenugasan"
 import NipPerekam from "./componentDepan/NipPerekam"
 import NipPengampu from "./componentDepan/NipPengampu"
+import { Provider, useDispatch, useSelector } from "react-redux"
+import { store } from "./store/store"
+import { setSelectedOpsi } from "./store/KpdlStore"
 // import 'bootstrap/dist/css/bootstrap.m in.css';
 // let datasend = {}
 
@@ -23,7 +26,8 @@ const Root = () => {
   const base_url = "<?=base_url()?>"
   const refChart1 = useRef(null)
   const toast = useRef(null)
-
+  const dispatch = useDispatch()
+  const storeKpdl = useSelector((state) => state.kpdl)
   const [dataOpsi, setDataOpsi] = useState({})
   const [active, setActive] = useState("wilayah")
 
@@ -58,8 +62,6 @@ const Root = () => {
   const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [], nip_ar_perekam: [], nip_ar_pengampu: [] })
   const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
 
-  const [nipArPengampu, setNipArPengampu] = useState([])
-
   useEffect(() => {}, [])
   useEffect(() => {
     jquery.ajax({
@@ -82,6 +84,7 @@ const Root = () => {
 
     jquery.getJSON(base_url + "kewilayahan/ref/opsi").then((response) => {
       setDataOpsi(response)
+      dispatch(setSelectedOpsi(response.default))
     })
 
     let judul = document.getElementById("judul")
@@ -238,6 +241,7 @@ const Root = () => {
     switch (opsiWilZona) {
       case "wilayah":
         if (adm4_pcode.length) {
+          dispatch(setSelectedOpsi(dataOpsi.wilayah))
           setDataSend({ opsiWilZona: dataOpsi.wilayah.key, adm4_pcode, id_poly_zona: [] })
           setHiddenGraphMatoa(false)
         } else {
@@ -246,6 +250,7 @@ const Root = () => {
         break
       case "zona":
         if (id_poly_zona.length) {
+          dispatch(setSelectedOpsi(dataOpsi.zona))
           setDataSend({ opsiWilZona: dataOpsi.zona.key, adm4_pcode: [], id_poly_zona })
           setHiddenGraphMatoa(false)
         } else {
@@ -258,6 +263,10 @@ const Root = () => {
     }
   }
 
+  useEffect(() => {
+    console.log(storeKpdl.selectedOpsi)
+  }, [storeKpdl.selectedOpsi])
+
   useEffect(() => {
     Highcharts.setOptions({
       accessibility: false,
@@ -679,7 +688,7 @@ const Root = () => {
         </Col>
       </Row>
 
-      <Row hidden={hiddenGraphMatoa}>
+      <Row hidden={["pengampu", "perekam"].includes(storeKpdl.selectedOpsi?.name)}>
         <Col sm="12">
           <Card>
             <CardHeader className="d-flex justify-content-center p-2">
@@ -700,7 +709,7 @@ const Root = () => {
           <Card>
             <CardHeader className="d-flex justify-content-center p-2">
               <CardTitle tag={"h1"} className="font-weight-bold">
-                Statistik Progresifitas Hasil Kegiatan Matoa
+                Statistik Progresifitas & Sebaran Data Hasil Kegiatan Matoa
               </CardTitle>
             </CardHeader>
             <CardBody>
@@ -720,6 +729,10 @@ const Root = () => {
 }
 
 const container = document.getElementById("app")
-const component = <Root />
+const component = (
+  <Provider store={store}>
+    <Root />
+  </Provider>
+)
 
 ReactDOM.render(component, container)

app/Views/kewilayahan/kytp/kpdl.php

@@ -4,7 +4,11 @@
         visibility: hidden;
     }
 </style>
+<?php
 
+helper('Kpdl');
+
+?>
 <div class="main-content">
     <div class="container-fluid">
         <div id="app"></div>
@@ -17,6 +21,7 @@
 <?php $isDevelopment = ENVIRONMENT === 'development';?>
 
 <script type="text/javascript">
+
 <?php echo view('kewilayahan/dist/kpdl.js') ?>
 </script>
 

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

@@ -0,0 +1,16 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
+export const kpdlSlice = createSlice({
+  name: "kpdl",
+  initialState: {
+    selectedOpsi: null
+  },
+  reducers: {
+    setSelectedOpsi: (state, action) => {
+      state.selectedOpsi = action.payload
+    }
+  }
+})
+
+export const { setSelectedOpsi } = kpdlSlice.actions
+
+export default kpdlSlice.reducer

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

@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit"
+import kpdl from "./KpdlStore"
+const rootReducer = {
+  kpdl
+}
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) => {
+    return getDefaultMiddleware({
+      serializableCheck: false
+    })
+  }
+})
+
+export { store }

app/Views/kewilayahan/kytp/util.js

@@ -1,6 +1,6 @@
 export const isObjEmpty = (obj) => Object.keys(obj).length === 0
 export function format_angka(num) {
-    var num_parts = num.toString().split(".");
-    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return num_parts.join(",");
-}
+  var num_parts = num.toString().split(".")
+  num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+  return num_parts.join(",")
+}

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.7",
     "axios": "^1.7.6",
     "bootstrap": "4.6.0",
     "collect.js": "^4.36.1",
@@ -12,6 +13,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-multi-select-component": "^4.3.4",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.1",
     "react-select": "^5.8.0",
     "reactstrap": "8.10.0",

yarn.lock

@@ -453,6 +453,16 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@reduxjs/toolkit@^2.2.7":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.7.tgz#199e3d10ccb39267cb5aee92c0262fd9da7fdfb2"
+  integrity sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
+
 "@remix-run/router@1.19.1":
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.19.1.tgz#984771bfd1de2715f42394c87fb716c1349e014f"
@@ -546,6 +556,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
@@ -3144,6 +3159,11 @@ ieee754@^1.1.13, ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -4652,6 +4672,14 @@ react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-redux@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
+  integrity sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==
+  dependencies:
+    "@types/use-sync-external-store" "^0.0.3"
+    use-sync-external-store "^1.0.0"
+
 react-router-dom@^6.26.1:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.1.tgz#a408892b41767a49dc94b3564b0e7d8e3959f623"
@@ -4784,6 +4812,16 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 regenerator-runtime@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
@@ -4865,6 +4903,11 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -5727,6 +5770,11 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
+use-sync-external-store@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"