kpdl graph matoa

.gitignore

@@ -0,0 +1,4 @@
+/writable/debugbar/debugbar_*
+/writable/logs/*.log
+/writable/session/*
+/node_modules

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "[php]": {
-    "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
+    "editor.defaultFormatter": "kokororin.vscode-phpfmt"
   },
   "editor.formatOnType": true
 }

app/Config/App.php

@@ -183,4 +183,4 @@ class App extends BaseConfig
     public $CSRFRegenerate = true;
     public $CSRFRedirect = true;
     public bool $CSPEnabled = false;
-}
+}

app/Config/Constants.php

@@ -94,4 +94,4 @@ define('EVENT_PRIORITY_NORMAL', 100);
 /**
  * @deprecated Use \CodeIgniter\Events\Events::PRIORITY_HIGH instead.
  */
-define('EVENT_PRIORITY_HIGH', 10);
+define('EVENT_PRIORITY_HIGH', 10);

app/Config/Encryption.php

@@ -21,7 +21,7 @@ class Encryption extends BaseConfig
      * You need to ensure it is long enough for the cipher and mode you plan to use.
      * See the user guide for more info.
      */
-    public string $key = '';
+    public string $key = 'pecintaseni';
 
     /**
      * --------------------------------------------------------------------------
@@ -89,4 +89,4 @@ class Encryption extends BaseConfig
      * by CI3 Encryption default configuration.
      */
     public string $cipher = 'AES-256-CTR';
-}
+}

app/Config/Filters.php

@@ -66,4 +66,4 @@ class Filters extends BaseConfig
      * 'isLoggedIn' => ['before' => ['account/*', 'profiles/*']]
      */
     public array $filters = [];
-}
+}

app/Controllers/Kewilayahan/Kytp.php

@@ -0,0 +1,106 @@
+<?php
+namespace App\Controllers\Kewilayahan;
+
+use CodeIgniter\Controller;
+
+class Kytp extends Controller
+{
+
+    public function index()
+    {
+        $db = \Config\Database::connect();
+        // $data['all_propinsi'] = $db->table('KPDL_V_BATAS_DESA')->select('ADM1_PCODE, ADM1_EN')->distinct()->get()->getResult() ;
+        // dd($data['all_propinsi']);
+        $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');
+        }
+    }
+
+    public function graph_matoa()
+    {
+
+        $dataReturn['poi_agg']  = $this->get_poi_agg();
+        $dataReturn['kpdl_agg'] = $this->get_kpdl_agg();
+        return json_encode($dataReturn);
+    }
+
+    private function get_poi_agg()
+    {
+        $opsiWilZona  = $this->request->getPost('opsiWilZona');
+        $adm4_pcode   = $this->request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $this->request->getPost('id_poly_zona') ?? [];
+
+        $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()
+    {
+        $opsiWilZona  = $this->request->getPost('opsiWilZona');
+        $adm4_pcode   = $this->request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $this->request->getPost('id_poly_zona') ?? [];
+
+        $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 = [];
+        foreach ($a as $b) {
+            array_push($ret, floatval($b->$key));
+        }
+        for ($i = 0; $i < 12; $i++) {
+            if (!isset($ret[$i])) {
+                array_push($ret, 0);
+            }
+        }
+        return $ret;
+    }
+}

app/Controllers/Kewilayahan/Ref.php

@@ -0,0 +1,136 @@
+<?php
+namespace App\Controllers\Kewilayahan;
+
+use CodeIgniter\Controller;
+
+class Ref extends Controller
+{
+
+    public function propinsi()
+    {
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_V_BATAS_DESA')->where('ADM1_PCODE IS NOT NULL')->select('ADM1_PCODE as value, ADM1_EN as label')->distinct()->orderBy('ADM1_EN')->get()->getResult();
+
+        foreach ($data as $key => $val) {
+            $val->value = $val->value;
+        }
+
+        return json_encode($data);
+    }
+
+    public function kota()
+    {
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_V_BATAS_DESA')
+            ->select('ADM2_PCODE as value, ADM2_EN as label')
+            ->distinct()
+            ->where('ADM2_PCODE IS NOT NULL')
+            ->where('ADM1_PCODE', $this->request->getGet('prop'))
+            ->orderBy('ADM2_EN')->get()->getResult();
+        return json_encode($data);
+    }
+
+    public function kecamatan()
+    {
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_V_BATAS_DESA')
+            ->select('ADM3_PCODE as value, ADM3_EN as label')
+            ->distinct()
+            ->where('ADM3_PCODE IS NOT NULL')
+            ->where('ADM2_PCODE', $this->request->getGet('kota'))
+            ->orderBy('ADM3_EN')->get()->getResult();
+        return json_encode($data);
+    }
+
+    public function kelurahan()
+    {
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_V_BATAS_DESA')
+            ->select('ADM4_PCODE as value, ADM4_EN as label')
+            ->distinct()
+            ->where('ADM4_PCODE IS NOT NULL')
+            ->whereIn('ADM3_PCODE', $this->request->getGet('kec'))
+            ->orderBy('ADM4_EN')->get()->getResult();
+        return json_encode($data);
+    }
+
+    public function zpkanwil()
+    {
+
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_ZP_NAS_DIFF')
+            ->select('KD_KANWIL as value,  NM_KANWIL as label')
+            ->distinct()
+            ->orderBy('NM_KANWIL')->get()->getResult();
+
+        foreach ($data as $key => $val) {
+            $val->value = $val->value;
+        }
+
+        return json_encode($data);
+    }
+
+    public function zpkpp()
+    {
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_ZP_NAS_DIFF')
+            ->select('KD_KPP as value, NM_KPP as label')
+            ->distinct()
+            ->where('KD_KANWIL', $this->request->getGet('kanwil'))
+            ->orderBy('NM_KPP')->get()->getResult();
+        return json_encode($data);
+    }
+
+    public function zpseksi()
+    {
+        $db   = \Config\Database::connect();
+        $data = $db->table('KPDL_ZP_NAS_DIFF')
+            ->select('KD_UNIT_OR as value, SEKSI as label')
+            ->distinct()
+            ->whereIn('KD_KPP', $this->request->getGet('kpp'))
+            ->orderBy('SEKSI')->get()->getResult();
+        return json_encode($data);
+    }
+
+    public function zpar()
+    {
+        $db    = \Config\Database::connect();
+        $kpp   = $this->request->getGet('kpp');
+        $seksi = $this->request->getGet('seksi');
+
+        $data = $db->table('KPDL_ZP_NAS_DIFF')
+            ->select('NIP_AR as value, NM_AR as label')
+            ->distinct()
+            ->whereIn('KD_KPP', $kpp)
+            ->whereIn('KD_UNIT_OR', $seksi)
+            ->orderBy('NM_AR')->get()->getResult();
+        return json_encode($data);
+    }
+    public function zpzp()
+    {
+        $db    = \Config\Database::connect();
+        $kpp   = $this->request->getGet('kpp');
+        $seksi = $this->request->getGet('seksi');
+        $ar    = $this->request->getGet('ar');
+        $data  = $db->table('KPDL_ZP_NAS_DIFF')
+            ->select("OGC_FID as value, NO_URUT || '-' || ATTRIBUTE1 as label")
+            ->distinct()
+            ->whereIn('KD_KPP', $kpp)
+            ->whereIn('KD_UNIT_OR', $seksi)
+            ->whereIn('NIP_AR', $ar)
+            ->orderBy('LABEL')->get()->getResult();
+        foreach ($data as $key => $value) {
+            $value->label = $value->LABEL;
+            unset($value->LABEL);
+
+        }
+        return json_encode(($data));
+    }
+
+    public function change_case($arr)
+    {
+        return array_change_key_case($arr, CASE_LOWER);
+    }
+
+}

app/Models/Kpdl/MKpdlRef.php

@@ -0,0 +1,10 @@
+<?php 
+namespace App\Models\Kpdl;
+
+use CodeIgniter\Model;
+
+class MKpdlRef extends Model{
+    protected $table      = '';
+    // Uncomment below if you want add primary key
+    // protected $primaryKey = 'id';
+}

app/Views/inc/footer.php

@@ -1,14 +1,15 @@
-		<script>
-			$('#navbar-print').click(function() {
-				window.print();
-				return false;
-			});
-		</script>
-		<footer class="footer">
-			<div class="w-100 clearfix">
-				<span class="text-center text-sm-left d-md-inline-block">Copyright ©2024 All Rights Reserved.</span>
-				<span class="float-none float-sm-right mt-1 mt-sm-0 text-center"> <a href="<?php base_url() ?> " class="text-dark" target="_blank">Direktorat Ekstensifikasi Perpajakan</a></span>
-			</div>
-		</footer>
-		</div>
-		</div>
+<script>
+$('#navbar-print').click(function() {
+    window.print();
+    return false;
+});
+</script>
+<footer class="footer">
+    <div class="w-100 clearfix">
+        <span class="text-center text-sm-left d-md-inline-block">Copyright ©2024 All Rights Reserved.</span>
+        <span class="float-none float-sm-right mt-1 mt-sm-0 text-center"> <a href="<?php base_url() ?> "
+                class="text-dark" target="_blank">Direktorat Ekstensifikasi Perpajakan</a></span>
+    </div>
+</footer>
+</div>
+</div>

app/Views/inc/head.php

@@ -17,14 +17,18 @@
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/fontawesome-free/css/all.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/icon-kit/dist/css/iconkit.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/perfect-scrollbar/css/perfect-scrollbar.css') ?>">
-    <link rel="stylesheet" href="<?= base_url('public/theme/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css') ?>">
-    <link rel="stylesheet" href="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css') ?>">
+    <link rel="stylesheet"
+        href="<?= base_url('public/theme/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css') ?>">
+    <link rel="stylesheet"
+        href="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/weather-icons/css/weather-icons.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/c3/c3.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/plugins/owl.carousel/dist/assets/owl.carousel.min.css') ?>">
-    <link rel="stylesheet" href="<?= base_url('public/theme/plugins/owl.carousel/dist/assets/owl.theme.default.min.css') ?>">
+    <link rel="stylesheet"
+        href="<?= base_url('public/theme/plugins/owl.carousel/dist/assets/owl.theme.default.min.css') ?>">
     <link rel="stylesheet" href="<?= base_url('public/theme/dist/css/theme.min.css') ?>">
-
+    <link rel="stylesheet" href="<?= base_url('public/theme/custom/MultiSelect.css') ?>" type="text/css">
+    <link rel="stylesheet" href="<?= base_url('public/theme/custom/DynamicSelect.css') ?>" type="text/css">
 </head>
 
 <body>

app/Views/inc/js.php

@@ -7,10 +7,14 @@
 <script src="<?= base_url('public/theme/plugins/screenfull/dist/screenfull.js') ?>"></script>
 <script src="<?= base_url('public/theme/plugins/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
 <script src="<?= base_url('public/theme/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js') ?>"></script>
-<script src="<?= base_url('public/theme/plugins/datatables.net-responsive/js/dataTables.responsive.min.js') ?>"></script>
-<script src="<?= base_url('public/theme/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') ?>"></script>
+<script src="<?= base_url('public/theme/plugins/datatables.net-responsive/js/dataTables.responsive.min.js') ?>">
+</script>
+<script src="<?= base_url('public/theme/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') ?>">
+</script>
 <script src="<?= base_url('public/theme/plugins/moment/moment.js') ?>"></script>
-<script src="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') ?>"></script>
+<script
+    src="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') ?>">
+</script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://code.highcharts.com/highcharts-more.js"></script>
 <script src="https://code.highcharts.com/modules/accessibility.js"></script>
@@ -19,7 +23,9 @@
 <script src="<?= base_url('public/theme/dist/js/theme.js') ?>"></script>
 <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
 <script nomodule src="<?= base_url('public/theme/plugins/ionicons/dist/ionicons.js') ?>"></script>
-
+<script src="<?=base_url()?>public/theme/custom/MultiSelect.js"></script>
+<script src="<?=base_url()?>public/theme/custom/DynamicSelect.js"></script>
+<script src="<?=base_url()?>public/theme/custom/collect.min.js"></script>
 
 
 </body>

app/Views/inc/sidebar.php

@@ -72,6 +72,12 @@
                         <div class="submenu-content">
                             <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>
+                        </div>
                     </div>
                     <!--
                     <div class="nav-item">

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

@@ -0,0 +1,65 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * jQuery JavaScript Library v3.7.1
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-08-28T13:37Z
+ */
+
+/**
+ * @license React
+ * react-dom.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
+ * react-jsx-runtime.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
+ * react.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
+ * scheduler.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
+ *
+ * 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.
+ */

app/Views/kewilayahan/kytp/TabProgresifitas.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+export default function TabProgresifitas() {
+
+    const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` }))
+    return (
+        <div className="card">
+            <TabView scrollable onClick={(e) => {
+                console.log(e)
+            }} >
+
+                <TabPanel id="1" header="Identifikasi" >
+
+                </TabPanel>
+
+                <TabPanel id="2" header="Pembayaran">
+
+                </TabPanel>
+                <TabPanel id="3" header="Payment Compliant">
+
+                </TabPanel>
+                <TabPanel id="4" header="Strength Of Figure">
+
+                </TabPanel>
+
+                <TabPanel id="5" header="Jenis/Status WP">
+
+                </TabPanel>
+
+                <TabPanel id="5" header="Pengampu">
+
+                </TabPanel>
+                <TabPanel id="6" header="KLU">
+
+                </TabPanel>
+
+            </TabView>
+        </div>
+    )
+}

app/Views/kewilayahan/kytp/kpdl.js

@@ -0,0 +1,658 @@
+import React, { useEffect, useRef, useState } from "react"
+import ReactDOM from "react-dom"
+import { Button, Card, CardBody, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap"
+import Select from "react-select"
+import jQuery from "jquery"
+import collect from "collect.js"
+import { format_angka, isObjEmpty } from "./util"
+import { MultiSelect } from "react-multi-select-component"
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
+import { Toast } from 'primereact/toast';
+import { Button as ButtonP } from 'primereact/button';
+import "primereact/resources/themes/bootstrap4-light-blue/theme.css";
+import TabProgresifitas from "./TabProgresifitas"
+// import 'bootstrap/dist/css/bootstrap.m in.css';
+
+const Root = () => {
+  const base_url = "<?=base_url()?>"
+  const refChart1 = useRef(null)
+  const toast = useRef(null);
+  const [active, setActive] = useState('wilayah')
+  const toggle = tab => {
+    setActive(tab)
+  }
+
+  const [prop, setProp] = useState({})
+  const [kota, setKota] = useState({})
+  const [kec, setKec] = useState([])
+  const [kel, setKel] = useState([])
+
+  const [propSelected, setPropSelected] = useState({})
+  const [kotaSelected, setKotaSelected] = useState({})
+  const [kecSelected, setKecSelected] = useState([])
+  const [kelSelected, setKelSelected] = useState([])
+
+  const [kanwil, setKanwil] = useState({})
+  const [kpp, setKpp] = useState({})
+  const [seksi, setSeksi] = useState([])
+  const [ar, setAr] = useState([])
+  const [zp, setZp] = useState([])
+
+  const [kanwilSelected, setKanwilSelected] = useState({})
+  const [kppSelected, setKppSelected] = useState({})
+  const [seksiSelected, setSeksiSelected] = useState([])
+  const [arSelected, setArSelected] = useState([])
+  const [zpSelected, setZpSelected] = useState([])
+
+  const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
+
+  useEffect(() => {
+
+    jQuery.ajax({
+      url: base_url + 'kewilayahan/ref/propinsi', method: "GET", dataType: "json", success: ((data) => {
+        setProp(data)
+      })
+    })
+
+    jQuery.ajax({
+      url: base_url + 'kewilayahan/ref/zpkanwil', method: "GET", dataType: "json", success: ((data) => {
+        setKanwil(data)
+      })
+    })
+  }, [])
+
+
+  useEffect(() => {
+    setKota({})
+    setKec([])
+    setKel([])
+    setKotaSelected({})
+    setKecSelected([])
+    setKelSelected([])
+    if (propSelected && !isObjEmpty(propSelected)) {
+      const prop = propSelected.value
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/kota',
+        method: "GET",
+        dataType: "json",
+        data: { prop },
+        success: ((data) => {
+          setKota(data)
+        })
+      })
+    }
+  }, [propSelected])
+
+  useEffect(() => {
+    setKec([])
+    setKel([])
+    setKecSelected([])
+    setKelSelected([])
+    if (kotaSelected && !isObjEmpty(kotaSelected)) {
+      const kota = kotaSelected.value
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/kecamatan',
+        method: "GET",
+        dataType: "json",
+        data: { kota },
+        success: ((data) => {
+          setKec(data)
+        })
+      })
+
+    }
+  }, [kotaSelected])
+
+  useEffect(() => {
+    setKel([])
+    setKelSelected([])
+    console.log({ kecSelected })
+    if (kecSelected.length && !isObjEmpty(kecSelected)) {
+      const kec = collect(kecSelected).pluck('value').all()
+      console.log({ kec })
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/kelurahan',
+        method: "GET",
+        dataType: "json",
+        data: { kec },
+        success: ((data) => {
+          setKel(data)
+        })
+      })
+
+    }
+  }, [kecSelected])
+
+  useEffect(() => {
+    setKpp([])
+    setSeksi([])
+    setAr([])
+    setZp([])
+    setKppSelected([])
+    setSeksiSelected([])
+    setArSelected([])
+    setZpSelected([])
+    if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
+      const kanwil = kanwilSelected.value
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/zpkpp',
+        method: "GET",
+        dataType: "json",
+        data: { kanwil },
+        success: ((data) => {
+          setKpp(data)
+        })
+      })
+    }
+  }, [kanwilSelected])
+
+  useEffect(() => {
+    setSeksi([])
+    setAr([])
+    setZp([])
+    setSeksiSelected([])
+    setArSelected([])
+    setZpSelected([])
+    if (kppSelected && !isObjEmpty(kppSelected)) {
+      const kpp = collect(kppSelected).pluck('value').all()
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/zpseksi',
+        method: "GET",
+        dataType: "json",
+        data: { kpp },
+        success: ((data) => {
+          setSeksi(data)
+        })
+      })
+    }
+  }, [kppSelected])
+
+  useEffect(() => {
+    setAr([])
+    setZp([])
+    setArSelected([])
+    setZpSelected([])
+    if (seksiSelected && !isObjEmpty(seksiSelected)) {
+      const kpp = collect(kppSelected).pluck('value').all()
+      const seksi = collect(seksiSelected).pluck('value').all()
+
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/zpar',
+        method: "GET",
+        dataType: "json",
+        data: { kpp, seksi },
+        success: ((data) => {
+          setAr(data)
+        })
+      })
+    }
+  }, [seksiSelected])
+
+  useEffect(() => {
+    setZp([])
+    setZpSelected([])
+    if (arSelected && !isObjEmpty(arSelected)) {
+      const kpp = collect(kppSelected).pluck('value').all()
+      const seksi = collect(seksiSelected).pluck('value').all()
+      const ar = collect(arSelected).pluck('value').all()
+      jQuery.ajax({
+        url: base_url + 'kewilayahan/ref/zpzp',
+        method: "GET",
+        dataType: "json",
+        data: { kpp, seksi, ar },
+        success: ((data) => {
+          setZp(data)
+        })
+      })
+    }
+  }, [arSelected])
+
+  const buttonProsesOnClick = () => {
+    const opsiWilZona = active
+    const adm4_pcode = collect(kelSelected).pluck('value').all()
+    const id_poly_zona = collect(zpSelected).pluck('value').all()
+
+
+    let datasend = {
+      opsiWilZona,
+    }
+
+    switch (opsiWilZona) {
+      case 'wilayah':
+        if (adm4_pcode.length) {
+          datasend.adm4_pcode = adm4_pcode
+        } else {
+          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' });
+        }
+        break;
+      case 'zona':
+        if (id_poly_zona.length) {
+
+          datasend.id_poly_zona = id_poly_zona
+        } else {
+          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' });
+
+        }
+        break;
+      default:
+        break;
+    }
+
+    jQuery.ajax({
+      url: base_url + 'kewilayahan/kytp/graph_matoa',
+      dataType: "json",
+      type: "POST",
+      data: datasend,
+      success: (data) => {
+        setDataGraphMatoa(data)
+      }
+    })
+
+  }
+
+  useEffect(() => {
+    Highcharts.setOptions({
+      lang: {
+        decimalPoint: ',',
+        thousandsSep: '.',
+        numericSymbols: ["rb", "jt", "M", "T", "P", "E"]
+      },
+
+      tooltip: {
+        yDecimals: 2 // If you want to add 2 decimals
+      }
+    })
+    jQuery.ajax({
+      url: base_url + 'kewilayahan/kytp/graph_matoa',
+      dataType: "json",
+      type: "POST",
+      success: (data) => {
+        setDataGraphMatoa(data)
+      }
+    })
+
+
+  }, [])
+
+  const optionsGraphMatoaAgg = {
+    chart: {
+      zoomType: 'xy',
+      height: '320',
+    },
+    title: {
+      text: 'Poi Google dan Matoa',
+      // align: 'center'
+    },
+
+    xAxis: [{
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      crosshair: true
+    }],
+    yAxis: [
+      {
+        gridLineWidth: 0,
+        title: {
+          text: '',
+          style: {
+            color: Highcharts.getOptions().colors[0]
+          }
+        },
+        labels: {
+          //format: '{value}',
+          style: {
+            color: Highcharts.getOptions().colors[0]
+          }
+        },
+        visible: false
+      },
+      {
+        labels: {
+          //format: '{value}',
+          style: {
+            color: Highcharts.getOptions().colors[1]
+          }
+        },
+        title: {
+          text: 'NPWP Work True',
+          style: {
+            color: Highcharts.getOptions().colors[1]
+          }
+        },
+        opposite: true,
+        visible: false
+
+      },
+      {
+        gridLineWidth: 0,
+        title: {
+          text: 'Rupiah',
+          style: {
+            color: Highcharts.getOptions().colors[2]
+          }
+        },
+        labels: {
+          //format: '{value}',
+          style: {
+            color: Highcharts.getOptions().colors[2]
+          }
+        },
+        opposite: true,
+        visible: false
+      },
+      {
+        gridLineWidth: 0,
+        title: {
+          text: '',
+          style: {
+            color: "#FF0000"
+          }
+        },
+        labels: {
+          //format: '{value}',
+          style: {
+            color: "##FF0000"
+          }
+        },
+        opposite: true
+      }
+    ],
+    tooltip: {
+      shared: true
+    },
+    legend: {
+      layout: 'horizontal',
+      align: 'center',
+      //x: 80,
+      verticalAlign: 'top',
+      //y: 55,
+      //floating: true,
+      backgroundColor:
+        Highcharts.defaultOptions.legend.backgroundColor || // theme
+        'rgba(255,255,255,0.25)'
+    },
+    series: [{
+      color: '#FF0000',
+      name: 'Jml PoI',
+      type: 'column',
+      yAxis: 3,
+      data: dataGraphMatoa.poi_agg,
+      marker: {
+        enabled: true
+      },
+      tooltip: {
+        valueSuffix: ' PoI'
+      },
+    },
+    {
+      name: 'Matoa',
+      type: 'spline',
+      yAxis: 3,
+      data: dataGraphMatoa.kpdl_agg,
+      marker: {
+        enabled: true
+      },
+      tooltip: {
+        pointFormatter: function () {
+          const idx = this.index
+          let pct_coverage;
+          const jml_poi_agg = dataGraphMatoa.poi_agg
+          if (jml_poi_agg[idx] && jml_poi_agg[idx] !== 0) {
+            pct_coverage = format_angka(parseFloat((parseFloat(this.y) / jml_poi_agg[idx] * 100)).toFixed(2)) + '%';
+          }
+
+          let s = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + format_angka(this.y) + ' lokasi kpdl</b> ' + ((pct_coverage) ? '(' + pct_coverage + ')<br>\n' : '<br>')
+          return s;
+        },
+        shared: false
+      },
+      visible: true,
+      color: "#8000ff"
+    }],
+  }
+
+  return <>
+
+    <Row className="text-center">
+      <Col >
+        <h2>E-Geospatial Thematic Tax</h2>
+      </Col>
+    </Row>
+    <Row>
+      <Col sm="12">
+        <Card>
+          <CardBody>
+            <Nav tabs >
+              <NavItem >
+                <NavLink style={{ cursor: "pointer" }}
+                  active={active === 'wilayah'}
+                  onClick={() => {
+                    toggle('wilayah')
+                  }}
+                >
+                  Wilayah Adm.
+                </NavLink>
+              </NavItem>
+              <NavItem >
+                <NavLink style={{ cursor: "pointer" }}
+                  active={active === 'zona'}
+                  onClick={() => {
+                    toggle('zona')
+                  }}
+                >
+                  Zona Pengawasan
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent className="py-3" activeTab={active}>
+              <TabPane tabId="wilayah">
+                <Row>
+                  <Col md="3">
+                    <Label className='form-label' for='basicInput'>
+                      Propinsi
+                    </Label>
+                    <Select
+                      placeholder="Pilih Propinsi"
+                      className="basic-single w-100"
+                      onChange={(e) => {
+                        setPropSelected(e)
+                      }}
+                      classNamePrefix="select"
+                      defaultValue={propSelected}
+                      value={propSelected}
+                      isClearable={false}
+                      options={prop}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <Label className='form-label' for='basicInput'>
+                      Kota/Kab
+                    </Label>
+                    <Select
+                      placeholder="Pilih Kota/Kab"
+                      className="basic-single w-100"
+                      onChange={(e) => {
+                        setKotaSelected(e)
+                      }}
+                      classNamePrefix="select"
+                      defaultValue={kotaSelected}
+                      value={kotaSelected}
+                      isClearable={false}
+                      options={kota}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <Label className='form-label' for='Pilih Kecamatan'>
+                      Kecamatan
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={kec}
+                      value={kecSelected}
+                      onChange={(e) => {
+                        setKecSelected(e)
+                      }}
+                      labelledBy="Pilih Kecamatan"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kecamatan" }}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <Label className='form-label' for='Pilih Kelurahan'>
+                      Kelurahan
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={kel}
+                      value={kelSelected}
+                      onChange={(e) => {
+                        setKelSelected(e)
+                      }}
+                      labelledBy="Pilih Kelurahan"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kelurahan" }}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" />
+                  </Col>
+                </Row>
+
+              </TabPane>
+              <TabPane tabId="zona">
+                <Row>
+                  <Col md="2">
+                    <Label className='form-label' for='basicInput'>
+                      Kanwil
+                    </Label>
+                    <Select
+                      placeholder="Pilih Kanwil"
+                      className="basic-single w-100"
+                      onChange={(e) => {
+                        setKanwilSelected(e)
+                      }}
+                      classNamePrefix="select"
+                      defaultValue={kanwilSelected}
+                      value={kanwilSelected}
+                      isClearable={false}
+                      options={kanwil}
+                    />
+                  </Col>
+                  <Col md="2">
+                    <Label className='form-label' for='Pilih KPP'>
+                      KPP
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={kpp}
+                      value={kppSelected}
+                      onChange={(e) => {
+                        setKppSelected(e)
+                      }}
+                      labelledBy="Pilih KPP"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih KPP" }}
+                    />
+                  </Col>
+                  <Col md="2">
+                    <Label className='form-label' for='Pilih Seksi'>
+                      Seksi
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={seksi}
+                      value={seksiSelected}
+                      onChange={(e) => {
+                        setSeksiSelected(e)
+                      }}
+                      labelledBy="Pilih Seksi"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <Label className='form-label' for='Pilih AR'>
+                      AR
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={ar}
+                      value={arSelected}
+                      onChange={(e) => {
+                        setArSelected(e)
+                      }}
+                      labelledBy="Pilih AR"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }}
+                    />
+                  </Col>
+                  <Col md="3">
+                    <Label className='form-label' for='Pilih Zona'>
+                      Zona Pengawasan
+                    </Label>
+                    <MultiSelect
+                      className="me-1 w-full"
+                      hasSelectAll={true}
+                      debounceDuration={300}
+                      options={zp}
+                      value={zpSelected}
+                      onChange={(e) => {
+                        setZpSelected(e)
+                      }}
+                      labelledBy="Pilih Zona"
+                      overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Zona" }}
+                    />
+                  </Col>
+
+                  <Col md="2">
+
+                    <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" />
+                  </Col>
+                </Row>
+              </TabPane>
+            </TabContent>
+
+          </CardBody>
+        </Card>
+      </Col>
+    </Row>
+
+    <Row>
+      <Col sm="12">
+        <Card>
+          <CardBody>
+            <div id="graph_matoa_agg">
+              <HighchartsReact
+                ref={refChart1}
+                highcharts={Highcharts}
+                options={optionsGraphMatoaAgg}
+              />
+            </div>
+          </CardBody>
+        </Card>
+      </Col>
+    </Row>
+    <Row>
+      <Col sm="12">
+        <Card>
+          <CardBody>
+            <TabProgresifitas />
+
+          </CardBody>
+        </Card>
+      </Col>
+    </Row>
+    <Toast ref={toast} />
+  </>
+}
+
+const container = document.getElementById("app")
+const component = <Root />
+
+ReactDOM.render(component, container)

app/Views/kewilayahan/kytp/kpdl.php

@@ -0,0 +1,61 @@
+
+
+<div class="main-content">
+    <div class="container-fluid">
+        <div id="app"></div>
+        <!-- <div class=" row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row ">
+                            <div class="col col-sm-3">
+                                <div class="form-group">
+                                    <Label class="form-input">Propinsi</Label>
+                                    <select id="select_prop" name="select_prop" data-placeholder="Select ">
+
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col col-sm-3">
+                                <div class="form-group">
+                                    <Label class="form-input">Kota/Kab</Label>
+                                    <select id="select_kota" name="select_kota" data-placeholder="Select ">
+
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col col-sm-3">
+                                <div class="form-group">
+                                    <Label class="form-input">Kecamatan</Label>
+                                    <select id="select_kecamatan" name="select_kecamatan" data-placeholder="Select "
+                                        multiple="multiple" data-multi-select>
+
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col col-sm-3">
+                                <div class="form-group">
+                                    <Label class="form-input">Kelurahan/Desa</Label>
+                                    <select id="select_kelurahan" name="select_kelurahan" data-placeholder="Select "
+                                        multiple="multiple" data-multi-select>
+
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <a href="#" id="btn_proses" class="btn btn-primary">Go somewhere</a>
+                    </div>
+                </div>
+            </div>
+        </div> -->
+    </div>
+</div>
+
+
+
+<?php $isDevelopment = ENVIRONMENT === 'development';?>
+<script type="text/javascript">
+<?php echo view('kewilayahan/dist/kpdl.js') ?>
+</script>
+
+<?php echo view('inc/js.php') ?>

app/Views/kewilayahan/kytp/readme.txt

@@ -0,0 +1,15 @@
+console posisi di root app (EngineN)
+
+requirement : 
+- node versi : 20 + 
+- yarn latest version 
+
+setup awal jalankan perintah : 
+- yarn init
+- yarn (akan mendownload node_modules yang diperlukan)
+
+untuk build kode javascript agar bisa di load di browser =>
+jalankan perintah : npx webpack
+untuk dev : npx webpack --watch
+
+config ada webapack.config.js 

app/Views/kewilayahan/kytp/util.js

@@ -0,0 +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(",");
+}

package-lock.json

@@ -0,0 +1,161 @@
+{
+  "name": "engineN",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.1"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "dependencies": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg=="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      }
+    },
+    "react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "requires": {
+        "@remix-run/router": "1.19.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "requires": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      }
+    },
+    "scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "dependencies": {
+    "axios": "^1.7.6",
+    "bootstrap": "4.6.0",
+    "collect.js": "^4.36.1",
+    "highcharts": "^11.4.8",
+    "highcharts-react-official": "^3.2.1",
+    "jquery": "^3.7.1",
+    "popper": "^1.0.1",
+    "primereact": "^10.8.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-multi-select-component": "^4.3.4",
+    "react-router-dom": "^6.26.1",
+    "react-select": "^5.8.0",
+    "reactstrap": "8.10.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "name": "engineN",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://gitlab.dfoso.id/dfoso/engineN.git",
+  "author": "pecintaseni <pecintaseni@local.shot>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-react": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "path": "^0.12.7",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.94.0"
+  }
+}

public/js/kewilayahan/kpdl/kpdl.js

@@ -0,0 +1 @@
+(()=>{const e=document.getElementById("app");createRoot(e).render((()=>React.createElement(React.Fragment,null,React.createElement("h1",null,"Hallo"))))})();

public/theme/custom/DynamicSelect.css

@@ -0,0 +1,113 @@
+.dynamic-select {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+.dynamic-select .dynamic-select-header {
+  border: 1px solid #dee2e6;
+  padding: 7px 30px 7px 12px;
+}
+.dynamic-select .dynamic-select-header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
+  height: 12px;
+  width: 12px;
+}
+.dynamic-select .dynamic-select-header.dynamic-select-header-active {
+  border-color: #c1c9d0;
+}
+.dynamic-select .dynamic-select-header.dynamic-select-header-active::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+.dynamic-select .dynamic-select-header.dynamic-select-header-active + .dynamic-select-options {
+  display: flex;
+}
+.dynamic-select .dynamic-select-header .dynamic-select-header-placeholder {
+  color: #65727e;
+}
+.dynamic-select .dynamic-select-options {
+  display: none;
+  box-sizing: border-box;
+  flex-flow: wrap;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  margin-top: 5px;
+  padding: 5px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.dynamic-select .dynamic-select-options::-webkit-scrollbar {
+  width: 5px;
+}
+.dynamic-select .dynamic-select-options::-webkit-scrollbar-track {
+  background: #f0f1f3;
+}
+.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb {
+  background: #cdcfd1;
+}
+.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb:hover {
+  background: #b2b6b9;
+}
+.dynamic-select .dynamic-select-options .dynamic-select-option {
+  padding: 7px 12px;
+}
+.dynamic-select .dynamic-select-options .dynamic-select-option:hover, .dynamic-select .dynamic-select-options .dynamic-select-option:active {
+  background-color: #f3f4f7;
+}
+.dynamic-select .dynamic-select-header, .dynamic-select .dynamic-select-option {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  font-size: 16px;
+  color: #212529;
+}
+.dynamic-select .dynamic-select-header img, .dynamic-select .dynamic-select-option img {
+  object-fit: contain;
+  max-height: 100%;
+  max-width: 100%;
+}
+.dynamic-select .dynamic-select-header img.dynamic-size, .dynamic-select .dynamic-select-option img.dynamic-size {
+  object-fit: fill;
+  max-height: none;
+  max-width: none;
+}
+.dynamic-select .dynamic-select-header img, .dynamic-select .dynamic-select-header svg, .dynamic-select .dynamic-select-header i, .dynamic-select .dynamic-select-header span, .dynamic-select .dynamic-select-option img, .dynamic-select .dynamic-select-option svg, .dynamic-select .dynamic-select-option i, .dynamic-select .dynamic-select-option span {
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+.dynamic-select .dynamic-select-header.dynamic-select-no-text, .dynamic-select .dynamic-select-option.dynamic-select-no-text {
+  justify-content: center;
+}
+.dynamic-select .dynamic-select-header.dynamic-select-no-text img, .dynamic-select .dynamic-select-header.dynamic-select-no-text svg, .dynamic-select .dynamic-select-header.dynamic-select-no-text i, .dynamic-select .dynamic-select-header.dynamic-select-no-text span, .dynamic-select .dynamic-select-option.dynamic-select-no-text img, .dynamic-select .dynamic-select-option.dynamic-select-no-text svg, .dynamic-select .dynamic-select-option.dynamic-select-no-text i, .dynamic-select .dynamic-select-option.dynamic-select-no-text span {
+  margin-right: 0;
+}
+.dynamic-select .dynamic-select-header .dynamic-select-option-text, .dynamic-select .dynamic-select-option .dynamic-select-option-text {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  font-size: inherit;
+}

public/theme/custom/DynamicSelect.js

@@ -0,0 +1,183 @@
+/*
+ * Created by David Adams
+ * https://codeshack.io/dynamic-select-images-html-javascript/
+ * 
+ * Released under the MIT license
+ */
+class DynamicSelect {
+
+    constructor(element, options = {}) {
+        let defaults = {
+            placeholder: 'Select an option',
+            columns: 1,
+            name: '',
+            width: '',
+            height: '',
+            data: [],
+            onChange: function() {}
+        };
+        this.options = Object.assign(defaults, options);
+        this.selectElement = typeof element === 'string' ? document.querySelector(element) : element;
+        for(const prop in this.selectElement.dataset) {
+            if (this.options[prop] !== undefined) {
+                this.options[prop] = this.selectElement.dataset[prop];
+            }
+        }
+        this.name = this.selectElement.getAttribute('name') ? this.selectElement.getAttribute('name') : 'dynamic-select-' + Math.floor(Math.random() * 1000000);
+        if (!this.options.data.length) {
+            let options = this.selectElement.querySelectorAll('option');
+            for (let i = 0; i < options.length; i++) {
+                this.options.data.push({
+                    value: options[i].value,
+                    text: options[i].innerHTML,
+                    img: options[i].getAttribute('data-img'),
+                    selected: options[i].selected,
+                    html: options[i].getAttribute('data-html'),
+                    imgWidth: options[i].getAttribute('data-img-width'),
+                    imgHeight: options[i].getAttribute('data-img-height')
+                });
+            }
+        }
+        this.element = this._template();
+        this.selectElement.replaceWith(this.element);
+        this._updateSelected();
+        this._eventHandlers();
+    }
+
+    _template() {
+        let optionsHTML = '';
+        for (let i = 0; i < this.data.length; i++) {
+            let optionWidth = 100 / this.columns;
+            let optionContent = '';
+            if (this.data[i].html) {
+                optionContent = this.data[i].html;
+            } else {
+                optionContent = `
+                    ${this.data[i].img ? `<img src="${this.data[i].img}" alt="${this.data[i].text}" class="${this.data[i].imgWidth && this.data[i].imgHeight ? 'dynamic-size' : ''}" style="${this.data[i].imgWidth ? 'width:' + this.data[i].imgWidth + ';' : ''}${this.data[i].imgHeight ? 'height:' + this.data[i].imgHeight + ';' : ''}">` : ''}
+                    ${this.data[i].text ? '<span class="dynamic-select-option-text">' + this.data[i].text + '</span>' : ''}
+                `;
+            }
+            optionsHTML += `
+                <div class="dynamic-select-option${this.data[i].value == this.selectedValue ? ' dynamic-select-selected' : ''}${this.data[i].text || this.data[i].html ? '' : ' dynamic-select-no-text'}" data-value="${this.data[i].value}" style="width:${optionWidth}%;${this.height ? 'height:' + this.height + ';' : ''}">
+                    ${optionContent}
+                </div>
+            `;
+        }
+        let template = `
+            <div class="dynamic-select ${this.name}"${this.selectElement.id ? ' id="' + this.selectElement.id + '"' : ''} style="${this.width ? 'width:' + this.width + ';' : ''}${this.height ? 'height:' + this.height + ';' : ''}">
+                <input type="hidden" name="${this.name}" value="${this.selectedValue}">
+                <div class="dynamic-select-header" style="${this.width ? 'width:' + this.width + ';' : ''}${this.height ? 'height:' + this.height + ';' : ''}"><span class="dynamic-select-header-placeholder">${this.placeholder}</span></div>
+                <div class="dynamic-select-options" style="${this.options.dropdownWidth ? 'width:' + this.options.dropdownWidth + ';' : ''}${this.options.dropdownHeight ? 'height:' + this.options.dropdownHeight + ';' : ''}">${optionsHTML}</div>
+            </div>
+        `;
+        let element = document.createElement('div');
+        element.innerHTML = template;
+        return element;
+    }
+
+    _eventHandlers() {
+        this.element.querySelectorAll('.dynamic-select-option').forEach(option => {
+            option.onclick = () => {
+                this.element.querySelectorAll('.dynamic-select-selected').forEach(selected => selected.classList.remove('dynamic-select-selected'));
+                option.classList.add('dynamic-select-selected');
+                this.element.querySelector('.dynamic-select-header').innerHTML = option.innerHTML;
+                this.element.querySelector('input').value = option.getAttribute('data-value');
+                this.data.forEach(data => data.selected = false);
+                this.data.filter(data => data.value == option.getAttribute('data-value'))[0].selected = true;
+                this.element.querySelector('.dynamic-select-header').classList.remove('dynamic-select-header-active');
+                this.options.onChange(option.getAttribute('data-value'), option.querySelector('.dynamic-select-option-text') ? option.querySelector('.dynamic-select-option-text').innerHTML : '', option);
+            };
+        });
+        this.element.querySelector('.dynamic-select-header').onclick = () => {
+            this.element.querySelector('.dynamic-select-header').classList.toggle('dynamic-select-header-active');
+        };  
+        if (this.selectElement.id && document.querySelector('label[for="' + this.selectElement.id + '"]')) {
+            document.querySelector('label[for="' + this.selectElement.id + '"]').onclick = () => {
+                this.element.querySelector('.dynamic-select-header').classList.toggle('dynamic-select-header-active');
+            };
+        }
+        document.addEventListener('click', event => {
+            if (!event.target.closest('.' + this.name) && !event.target.closest('label[for="' + this.selectElement.id + '"]')) {
+                this.element.querySelector('.dynamic-select-header').classList.remove('dynamic-select-header-active');
+            }
+        });
+    }
+
+    _updateSelected() {
+        if (this.selectedValue) {
+            this.element.querySelector('.dynamic-select-header').innerHTML = this.element.querySelector('.dynamic-select-selected').innerHTML;
+        }
+    }
+
+    get selectedValue() {
+        let selected = this.data.filter(option => option.selected);
+        selected = selected.length ? selected[0].value : '';
+        return selected;
+    }
+
+    set data(value) {
+        this.options.data = value;
+    }
+
+    get data() {
+        return this.options.data;
+    }
+
+    set selectElement(value) {
+        this.options.selectElement = value;
+    }
+
+    get selectElement() {
+        return this.options.selectElement;
+    }
+
+    set element(value) {
+        this.options.element = value;
+    }
+
+    get element() {
+        return this.options.element;
+    }
+
+    set placeholder(value) {
+        this.options.placeholder = value;
+    }
+
+    get placeholder() {
+        return this.options.placeholder;
+    }
+
+    set columns(value) {
+        this.options.columns = value;
+    }
+
+    get columns() {
+        return this.options.columns;
+    }
+
+    set name(value) {
+        this.options.name = value;
+    }
+
+    get name() {
+        return this.options.name;
+    }
+
+    set width(value) {
+        this.options.width = value;
+    }
+
+    get width() {
+        return this.options.width;
+    }
+
+    set height(value) {
+        this.options.height = value;
+    }
+
+    get height() {
+        return this.options.height;
+    }
+
+}
+document.querySelectorAll('[data-dynamic-select]').forEach(select => new DynamicSelect(select));

public/theme/custom/MultiSelect.css

@@ -0,0 +1,150 @@
+.multi-select {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  user-select: none;
+}
+.multi-select .multi-select-header {
+  border: 1px solid #dee2e6;
+  padding: 7px 30px 7px 12px;
+  overflow: hidden;
+  gap: 7px;
+  min-height: 45px;
+}
+.multi-select .multi-select-header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
+  height: 12px;
+  width: 12px;
+}
+.multi-select .multi-select-header.multi-select-header-active {
+  border-color: #c1c9d0;
+}
+.multi-select .multi-select-header.multi-select-header-active::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+.multi-select .multi-select-header.multi-select-header-active + .multi-select-options {
+  display: flex;
+}
+.multi-select .multi-select-header .multi-select-header-placeholder {
+  color: #65727e;
+}
+.multi-select .multi-select-header .multi-select-header-option {
+  display: inline-flex;
+  align-items: center;
+  background-color: #f3f4f7;
+  font-size: 14px;
+  padding: 3px 8px;
+  border-radius: 5px;
+}
+.multi-select .multi-select-header .multi-select-header-max {
+  font-size: 14px;
+  color: #65727e;
+}
+.multi-select .multi-select-options {
+  display: none;
+  box-sizing: border-box;
+  flex-flow: wrap;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  margin-top: 5px;
+  padding: 5px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.multi-select .multi-select-options::-webkit-scrollbar {
+  width: 5px;
+}
+.multi-select .multi-select-options::-webkit-scrollbar-track {
+  background: #f0f1f3;
+}
+.multi-select .multi-select-options::-webkit-scrollbar-thumb {
+  background: #cdcfd1;
+}
+.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
+  background: #b2b6b9;
+}
+.multi-select .multi-select-options .multi-select-option, .multi-select .multi-select-options .multi-select-all {
+  padding: 4px 12px;
+  height: 42px;
+}
+.multi-select .multi-select-options .multi-select-option .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
+  margin-right: 14px;
+  height: 16px;
+  width: 16px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+}
+.multi-select .multi-select-options .multi-select-option .multi-select-option-text, .multi-select .multi-select-options .multi-select-all .multi-select-option-text {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  font-size: 16px;
+  line-height: 20px;
+}
+.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
+  border-color: #40c979;
+  background-color: #40c979;
+}
+.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
+  content: "";
+  display: block;
+  width: 3px;
+  height: 7px;
+  margin: 0.12em 0 0 0.27em;
+  border: solid #fff;
+  border-width: 0 0.15em 0.15em 0;
+  transform: rotate(45deg);
+}
+.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
+  color: #40c979;
+}
+.multi-select .multi-select-options .multi-select-option:hover, .multi-select .multi-select-options .multi-select-option:active, .multi-select .multi-select-options .multi-select-all:hover, .multi-select .multi-select-options .multi-select-all:active {
+  background-color: #f3f4f7;
+}
+.multi-select .multi-select-options .multi-select-all {
+  border-bottom: 1px solid #f1f3f5;
+  border-radius: 0;
+}
+.multi-select .multi-select-options .multi-select-search {
+  padding: 7px 10px;
+  border: 1px solid #dee2e6;
+  border-radius: 5px;
+  margin: 10px 10px 5px 10px;
+  width: 100%;
+  outline: none;
+  font-size: 16px;
+}
+.multi-select .multi-select-options .multi-select-search::placeholder {
+  color: #b2b5b9;
+}
+.multi-select .multi-select-header, .multi-select .multi-select-option, .multi-select .multi-select-all {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  align-items: center;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 16px;
+  color: #212529;
+}

public/theme/custom/MultiSelect.js

@@ -0,0 +1,260 @@
+/*
+ * Created by David Adams
+ * https://codeshack.io/multi-select-dropdown-html-javascript/
+ * 
+ * Released under the MIT license
+ */
+class MultiSelect {
+
+    constructor(element, options = {}) {
+        let defaults = {
+            placeholder: 'Select item(s)',
+            max: null,
+            search: true,
+            selectAll: true,
+            listAll: true,
+            closeListOnItemSelect: false,
+            name: '',
+            width: '',
+            height: '',
+            dropdownWidth: '',
+            dropdownHeight: '',
+            data: [],
+            onChange: function() {},
+            onSelect: function() {},
+            onUnselect: function() {}
+        };
+        this.options = Object.assign(defaults, options);
+        this.selectElement = typeof element === 'string' ? document.querySelector(element) : element;
+        for(const prop in this.selectElement.dataset) {
+            if (this.options[prop] !== undefined) {
+                this.options[prop] = this.selectElement.dataset[prop];
+            }
+        }
+        this.name = this.selectElement.getAttribute('name') ? this.selectElement.getAttribute('name') : 'multi-select-' + Math.floor(Math.random() * 1000000);
+        if (!this.options.data.length) {
+            let options = this.selectElement.querySelectorAll('option');
+            for (let i = 0; i < options.length; i++) {
+                this.options.data.push({
+                    value: options[i].value,
+                    text: options[i].innerHTML,
+                    selected: options[i].selected,
+                    html: options[i].getAttribute('data-html')
+                });
+            }
+        }
+        this.element = this._template();
+        this.selectElement.replaceWith(this.element);
+        this._updateSelected();
+        this._eventHandlers();
+    }
+
+    _template() {
+        let optionsHTML = '';
+        for (let i = 0; i < this.data.length; i++) {
+            optionsHTML += `
+                <div class="multi-select-option${this.selectedValues.includes(this.data[i].value) ? ' multi-select-selected' : ''}" data-value="${this.data[i].value}">
+                    <span class="multi-select-option-radio"></span>
+                    <span class="multi-select-option-text">${this.data[i].html ? this.data[i].html : this.data[i].text}</span>
+                </div>
+            `;
+        }
+        let selectAllHTML = '';
+        if (this.options.selectAll === true || this.options.selectAll === 'true') {
+            selectAllHTML = `<div class="multi-select-all">
+                <span class="multi-select-option-radio"></span>
+                <span class="multi-select-option-text">Select all</span>
+            </div>`;
+        }
+        let template = `
+            <div class="multi-select ${this.name}"${this.selectElement.id ? ' id="' + this.selectElement.id + '"' : ''} style="${this.width ? 'width:' + this.width + ';' : ''}${this.height ? 'height:' + this.height + ';' : ''}">
+                ${this.selectedValues.map(value => `<input type="hidden" name="${this.name}[]" value="${value}">`).join('')}
+                <div class="multi-select-header" style="${this.width ? 'width:' + this.width + ';' : ''}${this.height ? 'height:' + this.height + ';' : ''}">
+                    <span class="multi-select-header-max">${this.options.max ? this.selectedValues.length + '/' + this.options.max : ''}</span>
+                    <span class="multi-select-header-placeholder">${this.placeholder}</span>
+                </div>
+                <div class="multi-select-options" style="${this.options.dropdownWidth ? 'width:' + this.options.dropdownWidth + ';' : ''}${this.options.dropdownHeight ? 'height:' + this.options.dropdownHeight + ';' : ''}">
+                    ${this.options.search === true || this.options.search === 'true' ? '<input type="text" class="multi-select-search" placeholder="Search...">' : ''}
+                    ${selectAllHTML}
+                    ${optionsHTML}
+                </div>
+            </div>
+        `;
+        let element = document.createElement('div');
+        element.innerHTML = template;
+        return element;
+    }
+
+    _eventHandlers() {
+        let headerElement = this.element.querySelector('.multi-select-header');
+        this.element.querySelectorAll('.multi-select-option').forEach(option => {
+            option.onclick = () => {
+                let selected = true;
+                if (!option.classList.contains('multi-select-selected')) {
+                    if (this.options.max && this.selectedValues.length >= this.options.max) {
+                        return;
+                    }
+                    option.classList.add('multi-select-selected');
+                    if (this.options.listAll === true || this.options.listAll === 'true') {
+                        if (this.element.querySelector('.multi-select-header-option')) {
+                            let opt = Array.from(this.element.querySelectorAll('.multi-select-header-option')).pop();
+                            opt.insertAdjacentHTML('afterend', `<span class="multi-select-header-option" data-value="${option.dataset.value}">${option.querySelector('.multi-select-option-text').innerHTML}</span>`);
+                        } else {
+                            headerElement.insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option" data-value="${option.dataset.value}">${option.querySelector('.multi-select-option-text').innerHTML}</span>`);
+                        }
+                    }
+                    this.element.querySelector('.multi-select').insertAdjacentHTML('afterbegin', `<input type="hidden" name="${this.name}[]" value="${option.dataset.value}">`);
+                    this.data.filter(data => data.value == option.dataset.value)[0].selected = true;
+                } else {
+                    option.classList.remove('multi-select-selected');
+                    this.element.querySelectorAll('.multi-select-header-option').forEach(headerOption => headerOption.dataset.value == option.dataset.value ? headerOption.remove() : '');
+                    this.element.querySelector(`input[value="${option.dataset.value}"]`).remove();
+                    this.data.filter(data => data.value == option.dataset.value)[0].selected = false;
+                    selected = false;
+                }
+                if (this.options.listAll === false || this.options.listAll === 'false') {
+                    if (this.element.querySelector('.multi-select-header-option')) {
+                        this.element.querySelector('.multi-select-header-option').remove();
+                    }
+                    headerElement.insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option">${this.selectedValues.length} selected</span>`);
+                }
+                if (!this.element.querySelector('.multi-select-header-option')) {
+                    headerElement.insertAdjacentHTML('afterbegin', `<span class="multi-select-header-placeholder">${this.placeholder}</span>`);
+                } else if (this.element.querySelector('.multi-select-header-placeholder')) {
+                    this.element.querySelector('.multi-select-header-placeholder').remove();
+                }
+                if (this.options.max) {
+                    this.element.querySelector('.multi-select-header-max').innerHTML = this.selectedValues.length + '/' + this.options.max;
+                }
+                if (this.options.search === true || this.options.search === 'true') {
+                    this.element.querySelector('.multi-select-search').value = '';
+                }
+                this.element.querySelectorAll('.multi-select-option').forEach(option => option.style.display = 'flex');
+                if (this.options.closeListOnItemSelect === true || this.options.closeListOnItemSelect === 'true') {
+                    headerElement.classList.remove('multi-select-header-active');
+                }
+                this.options.onChange(option.dataset.value, option.querySelector('.multi-select-option-text').innerHTML, option);
+                if (selected) {
+                    this.options.onSelect(option.dataset.value, option.querySelector('.multi-select-option-text').innerHTML, option);
+                } else {
+                    this.options.onUnselect(option.dataset.value, option.querySelector('.multi-select-option-text').innerHTML, option);
+                }
+            };
+        });
+        headerElement.onclick = () => headerElement.classList.toggle('multi-select-header-active');  
+        if (this.options.search === true || this.options.search === 'true') {
+            let search = this.element.querySelector('.multi-select-search');
+            search.oninput = () => {
+                this.element.querySelectorAll('.multi-select-option').forEach(option => {
+                    option.style.display = option.querySelector('.multi-select-option-text').innerHTML.toLowerCase().indexOf(search.value.toLowerCase()) > -1 ? 'flex' : 'none';
+                });
+            };
+        }
+        if (this.options.selectAll === true || this.options.selectAll === 'true') {
+            let selectAllButton = this.element.querySelector('.multi-select-all');
+            selectAllButton.onclick = () => {
+                let allSelected = selectAllButton.classList.contains('multi-select-selected');
+                this.element.querySelectorAll('.multi-select-option').forEach(option => {
+                    let dataItem = this.data.find(data => data.value == option.dataset.value);
+                    if (dataItem && ((allSelected && dataItem.selected) || (!allSelected && !dataItem.selected))) {
+                        option.click();
+                    }
+                });
+                selectAllButton.classList.toggle('multi-select-selected');
+            };
+        }
+        if (this.selectElement.id && document.querySelector('label[for="' + this.selectElement.id + '"]')) {
+            document.querySelector('label[for="' + this.selectElement.id + '"]').onclick = () => {
+                headerElement.classList.toggle('multi-select-header-active');
+            };
+        }
+        document.addEventListener('click', event => {
+            if (!event.target.closest('.' + this.name) && !event.target.closest('label[for="' + this.selectElement.id + '"]')) {
+                headerElement.classList.remove('multi-select-header-active');
+            }
+        });
+    }
+
+    _updateSelected() {
+        if (this.options.listAll === true || this.options.listAll === 'true') {
+            this.element.querySelectorAll('.multi-select-option').forEach(option => {
+                if (option.classList.contains('multi-select-selected')) {
+                    this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option" data-value="${option.dataset.value}">${option.querySelector('.multi-select-option-text').innerHTML}</span>`);
+                }
+            });
+        } else {
+            if (this.selectedValues.length > 0) {
+                this.element.querySelector('.multi-select-header').insertAdjacentHTML('afterbegin', `<span class="multi-select-header-option">${this.selectedValues.length} selected</span>`);
+            }
+        }
+        if (this.element.querySelector('.multi-select-header-option')) {
+            this.element.querySelector('.multi-select-header-placeholder').remove();
+        }
+    }
+
+    get selectedValues() {
+        return this.data.filter(data => data.selected).map(data => data.value);
+    }
+
+    get selectedItems() {
+        return this.data.filter(data => data.selected);
+    }
+
+    set data(value) {
+        this.options.data = value;
+    }
+
+    get data() {
+        return this.options.data;
+    }
+
+    set selectElement(value) {
+        this.options.selectElement = value;
+    }
+
+    get selectElement() {
+        return this.options.selectElement;
+    }
+
+    set element(value) {
+        this.options.element = value;
+    }
+
+    get element() {
+        return this.options.element;
+    }
+
+    set placeholder(value) {
+        this.options.placeholder = value;
+    }
+
+    get placeholder() {
+        return this.options.placeholder;
+    }
+
+    set name(value) {
+        this.options.name = value;
+    }
+
+    get name() {
+        return this.options.name;
+    }
+
+    set width(value) {
+        this.options.width = value;
+    }
+
+    get width() {
+        return this.options.width;
+    }
+
+    set height(value) {
+        this.options.height = value;
+    }
+
+    get height() {
+        return this.options.height;
+    }
+
+}
+document.querySelectorAll('[data-multi-select]').forEach(select => new MultiSelect(select));

public/theme/custom/bootstrap-multiselect.min.css

@@ -0,0 +1,44 @@
+/**
+ * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
+ *
+ * Apache License, Version 2.0:
+ * Copyright (c) 2012 - 2022 David Stutz
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a
+ * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * BSD 3-Clause License:
+ * Copyright (c) 2012 - 2022 David Stutz
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *    - Redistributions of source code must retain the above copyright notice,
+ *      this list of conditions and the following disclaimer.
+ *    - Redistributions in binary form must reproduce the above copyright notice,
+ *      this list of conditions and the following disclaimer in the documentation
+ *      and/or other materials provided with the distribution.
+ *    - Neither the name of David Stutz nor the names of its contributors may be
+ *      used to endorse or promote products derived from this software without
+ *      specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect.dropdown-toggle:after{display:none}.multiselect{overflow:hidden;text-overflow:ellipsis}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .multiselect-reset .input-group{width:93%}.multiselect-container .multiselect-filter>.fa-search{z-index:1;padding-left:.75rem}.multiselect-container .multiselect-filter>input.multiselect-search{border:none;border-bottom:1px solid #d3d3d3;padding-left:2rem;margin-left:-1.625rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.multiselect-container .multiselect-filter>input.multiselect-search:focus{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.multiselect-container .multiselect-filter>.multiselect-moz-clear-filter{margin-left:-1.5rem;display:none}.multiselect-container .multiselect-option.multiselect-group-option-indented-full{padding-left:2.6rem}.multiselect-container .multiselect-option.multiselect-group-option-indented{padding-left:1.8rem}.multiselect-container .multiselect-group{cursor:pointer}.multiselect-container .multiselect-group.closed .dropdown-toggle::after{transform:rotate(-90deg)}.multiselect-container .multiselect-group .caret-container~.form-check{margin-left:.5rem}.multiselect-container .multiselect-all,.multiselect-container .multiselect-group,.multiselect-container .multiselect-option{padding:.25rem .25rem .25rem .75rem}.multiselect-container .multiselect-all.dropdown-item,.multiselect-container .multiselect-all.dropdown-toggle,.multiselect-container .multiselect-group.dropdown-item,.multiselect-container .multiselect-group.dropdown-toggle,.multiselect-container .multiselect-option.dropdown-item,.multiselect-container .multiselect-option.dropdown-toggle{cursor:pointer}.multiselect-container .multiselect-all .form-check-label,.multiselect-container .multiselect-group .form-check-label,.multiselect-container .multiselect-option .form-check-label{cursor:pointer}.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active{background-color:#d3d3d3;color:#000}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-all:hover,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-group:hover,.multiselect-container .multiselect-option:focus,.multiselect-container .multiselect-option:hover{background-color:#a9a9a9!important}.multiselect-container .multiselect-all .form-check,.multiselect-container .multiselect-group .form-check,.multiselect-container .multiselect-option .form-check{padding:0 5px 0 20px}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-option:focus{outline:0}.form-inline .multiselect-container span.form-check{padding:3px 20px 3px 40px}.input-group.input-group-sm>.multiselect-native-select .multiselect{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;padding-right:1.75rem;height:calc(1.5em + .5rem + 2px)}.input-group>.multiselect-native-select{flex:1 1 auto;width:1%}.input-group>.multiselect-native-select>div.btn-group{width:100%}.input-group>.multiselect-native-select:not(:first-child) .multiselect{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.multiselect-native-select:not(:last-child) .multiselect{border-top-right-radius:0;border-bottom-right-radius:0}

webpack.config.js

@@ -0,0 +1,33 @@
+const path = require("path")
+//__dirname,
+module.exports = {
+  // entry: "./App.js",
+  entry: {
+    kpdl: "./app/Views/kewilayahan/kytp/kpdl.js"
+  },
+  output: {
+    path: path.resolve("./app/Views/kewilayahan/dist"),
+    filename: "[name].js"
+  },
+
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-react"],
+            plugins: ["@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator"]
+          }
+        }
+      },
+      {
+        test: /\.css$/i,
+        // type: "asset"
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  mode: "production"
+}

writable/session/ci_session0hltdm5qr265fcr4tq2te38oubb47kfp

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723429948;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:43:"https://dfoso.id:51212/engineN/home/gmapkjs";

writable/session/ci_session0qnkq4bu6l5iebpaj0v6r5oogr4fdsiq

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719755649;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session11orrj52apsu0f3ojojag8u9tbu7beis

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722243622;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:35:"https://dfoso.id:51212/engineN/Home";

writable/session/ci_session12dvevre1h6ske4okc1v7loccj7uau8b

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719328099;

writable/session/ci_session16hf6fj4c6pam2ghjvajfe7rggjj1sej

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722570459;nip|s:9:"060110956";nipp|s:18:"198406132006021003";nama|s:24:"RIANTIARNO ALDI SASONGKO";kppadm|s:3:"000";jabatan|s:24:"Pranata Komputer Pertama";kantor|s:45:"Direktorat Teknologi Informasi dan Komunikasi";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"997";isLogin|b:1;_ci_previous_url|s:107:"https://localhost/engineN/home/ppm?kwl=160&kpp=414&seksi=04&nip=830060412&kdmap=411211&kjs=SEMUA&tahun=2023";

writable/session/ci_session1qkh2i5als9roi0qkbmj5ad76edu87jn

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719299921;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:41:"https://103.148.201.34:51212/engineN/Home";

writable/session/ci_session2256qfvr4lnoeui9el4355isa9igms3f

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720055338;

writable/session/ci_session285sbamqh8ge9urv9grlaqgbcj290lrc

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720146640;nip|s:9:"060111350";nipp|s:18:"198402272006021001";nama|s:13:"EDI FERIYANTO";kppadm|s:3:"000";jabatan|s:24:"Pranata Komputer Pertama";kantor|s:45:"Direktorat Teknologi Informasi dan Komunikasi";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"997";isLogin|b:1;_ci_previous_url|s:39:"https://localhost/engineN/rapor/wplapor";

writable/session/ci_session29geqnp5hl6mnsjc6uk6up7oi195mdrc

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719755094;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session2ae8acebpdut43abf6nta7lsrc2ad0vh

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722243622;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:35:"https://dfoso.id:51212/engineN/Home";

writable/session/ci_session2afcmv5mtmqfe5ptj0a9qoe69m5sdrjh

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1724564527;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:37:"https://dfoso.id:51212/engineN/Kanwil";

writable/session/ci_session2ckmd8dq2m4fkt7ukbru1bjebat3o9pt

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722504435;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:76:"https://dfoso.id:51212/engineN/Seksiar/detbyrlpr/170/501/04/955760313/2024/2";

writable/session/ci_session2sstlklvn6bm4b7pvs3k0hqgdf1tp65c

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719890417;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:44:"https://dfoso.id:51212/engineN/rapor/wplapor";

writable/session/ci_session30e0qcg3p8hvpfof0626gv5j4l1cio7t

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719760236;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session3jfcd4ajph7ih44vc3seeva3ka13u2f0

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723436952;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:38:"https://localhost/engineN/home/gmapkjs";

writable/session/ci_session3ljafafc8mtkoqo3enhutlro68qd1uqq

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720146902;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:49:"https://103.148.201.34:51212/engineN/home/gmapkjs";

writable/session/ci_session3q7jcaiak13nue160ivm5mbhld281fu8

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722413857;nip|s:9:"060111296";nipp|s:18:"198510052006022001";nama|s:13:"ANGGUN ABRINA";kppadm|s:3:"412";jabatan|s:22:"Account Representative";kantor|s:27:"KPP Pratama Depok Cimanggis";seksi|s:11:"KPP Pratama";tpkantor|s:3:"KPP";kwladm|s:3:"330";isLogin|b:1;_ci_previous_url|s:33:"https://localhost/engineN/seksiar";

writable/session/ci_session4fjpriajvanb4t9j7c5dlgh4ctu2i51s

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719891819;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:44:"https://dfoso.id:51212/engineN/rapor/wplapor";

writable/session/ci_session4jlrljgqebsohkptc7aiu36nfjbl0oke

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720148531;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wplapor";

writable/session/ci_session520v07kmp788vql3clntdl4iflmrmnjh

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719322762;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:41:"https://103.148.201.34:51212/engineN/Home";

writable/session/ci_session5dl9ib7381dfuhtk07cv0l1ikka2ebrs

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723435114;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:43:"https://dfoso.id:51212/engineN/home/gmapkjs";

writable/session/ci_session63p26st9apq6bntf9vbdj2rc6oandvbu

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722312809;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:35:"https://dfoso.id:51212/engineN/Home";

writable/session/ci_session6c8t68jo3s9uua5rfsn5ieodvvcblscm

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722496924;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:38:"https://dfoso.id:51212/engineN/Seksiar";

writable/session/ci_session6kaak0pbadnbb3lr9ta558m1364oo8il

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722415517;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:35:"https://dfoso.id:51212/engineN/Home";

writable/session/ci_session6on6piqck0o8a969iktdu7gljrpv2g9a

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719759738;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session6qnp52kig7tmtg6t095bd3t4n4plr900

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722663146;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:75:"https://10.10.20.216/engineN/seksiar/detpaycomp/170/519/01/830450542/2024/3";

writable/session/ci_session6rfikb4h9vgdugkoc9h55fmepqnbge4s

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719302039;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:41:"https://103.148.201.34:51212/engineN/Home";

writable/session/ci_session710l5l6tm1o8p7s7vjo9n083m3uco9me

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719396163;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:41:"https://103.148.201.34:51212/engineN/Home";

writable/session/ci_session7bvig4bplrr6qdrtce4u8vu5dufq4pan

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723440972;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:43:"https://dfoso.id:51212/engineN/home/gmapkjs";

writable/session/ci_session7olj4hf4ke3sicsh2snoh8va5qp47fhv

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720148531;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:51:"https://103.148.201.34:51212/engineN/rapor/wpdaftar";

writable/session/ci_session7rap28p7i2bjc6c02jrku1hghunag72e

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723447107;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:77:"https://dfoso.id:51212/engineN/seksiar/detpaycomp/090/087/06/060108940/2024/6";

writable/session/ci_session836dieahmsnohuoe13a5fvbjmupk35h0

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719758514;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session8dsjfu6el2655huc9uhtddppv4luk3e7

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719504428;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:39:"https://localhost/engineN/rapor/wpbayar";

writable/session/ci_session8eipgdeg5qhc40sfr91sse3c7d81hjev

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1723447107;nip|s:9:"060086978";nipp|s:18:"196805201995031003";nama|s:7:"SUPARNO";kppadm|s:3:"000";jabatan|s:8:"Direktur";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|N;tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:43:"https://dfoso.id:51212/engineN/home/gmapkjs";

writable/session/ci_session9236rs53be2fcfac60k8imkpkp51ipiu

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1720146902;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:51:"https://103.148.201.34:51212/engineN/rapor/wpdaftar";

writable/session/ci_session95qkob5u5gjf7v75vqh3o1ovao0mc8i2

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719676953;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:35:"https://10.10.20.216/engineN/Kanwil";

writable/session/ci_session96tub08igi27sc4hbo9q1ag813in3bqu

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722576859;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:43:"https://dfoso.id:51212/engineN/home/gmapkjs";

writable/session/ci_session98ror6a2qbqivsukovg9crjc869kjo7i

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719755649;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session9r7uk6fnibrkt7ijli4iqf03pd1e301v

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1721270945;

writable/session/ci_session9rhdue3m0j80bgcgldr4qokbk7h637ls

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719302039;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wpbayar";

writable/session/ci_session9vc2jtfr889pgv69cqiouqg7krmd0qfj

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1722505843;nip|s:9:"060106375";nipp|s:18:"198302102003121004";nama|s:12:"WAWAN SUANDI";kppadm|s:3:"170";jabatan|s:9:"Pelaksana";kantor|s:24:"Kanwil DJP Jawa Tengah I";seksi|s:45:"Bidang Data dan Pengawasan Potensi Perpajakan";tpkantor|s:6:"Kanwil";kwladm|s:3:"170";isLogin|b:1;_ci_previous_url|s:90:"https://dfoso.id:51212/engineN/Seksiar/detbyrlpr/170/501/04/955760313/2024/2?page_byrlpr=7";

writable/session/ci_sessionacmnu6l92vocft1o853me9o7hvqbi424

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719968379;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:50:"https://103.148.201.34:51212/engineN/rapor/wplapor";

writable/session/ci_sessionada9oe075dmv78ukcldskb6ad8mqpjo9

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719759051;

writable/session/ci_sessionaf79ash6unc6ktboh67aoju4deehepqu

@@ -1 +0,0 @@
-__ci_last_regenerate|i:1719936308;nip|s:9:"810201978";nipp|s:18:"199401292013101001";nama|s:23:"ALFIN RIZKY RACHMAWANTO";kppadm|s:3:"000";jabatan|s:9:"Pelaksana";kantor|s:39:"Direktorat Ekstensifikasi dan Penilaian";seksi|s:28:"SubDirektorat Ekstensifikasi";tpkantor|s:5:"KPDJP";kwladm|s:3:"991";isLogin|b:1;_ci_previous_url|s:41:"https://103.148.201.34:51212/engineN/Home";