progresifitas

.eslintrc.js

@@ -0,0 +1,91 @@
+module.exports = {
+  parser: "@babel/eslint-parser",
+  env: {
+    node: true,
+    es6: true,
+    browser: true
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    requireConfigFile: false,
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+      experimentalObjectRestSpread: true
+    },
+    babelOptions: {
+      presets: ["@babel/preset-react"]
+    }
+  },
+  rules: {
+    "no-console": "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+
+    // Best Practices
+    eqeqeq: "error",
+    "no-invalid-this": "error",
+    "no-return-assign": "error",
+    "no-unused-expressions": ["error", { allowTernary: true }],
+    "no-useless-concat": "error",
+    "no-useless-return": "error",
+
+    // Variable
+    // 'init-declarations': 'error',
+    "no-use-before-define": "error",
+
+    "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z]" }],
+
+    // Stylistic Issues
+    "array-bracket-newline": ["error", { multiline: true, minItems: null }],
+    "array-bracket-spacing": "error",
+    "brace-style": ["error", "1tbs", { allowSingleLine: true }],
+    "block-spacing": "error",
+    "comma-dangle": "error",
+    "comma-spacing": "error",
+    "comma-style": "error",
+    "computed-property-spacing": "error",
+    "func-call-spacing": "error",
+    "implicit-arrow-linebreak": ["error", "beside"],
+    // indent: ['error', 4],
+    "keyword-spacing": "error",
+    "multiline-ternary": ["error", "never"],
+    // 'no-lonely-if': 'error',
+    "no-mixed-operators": "error",
+    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
+    "no-tabs": "error",
+    "no-unneeded-ternary": "error",
+    "no-whitespace-before-property": "error",
+    "nonblock-statement-body-position": "error",
+    "object-property-newline": [
+      "error",
+      { allowAllPropertiesOnSameLine: true }
+    ],
+    "quote-props": ["error", "as-needed"],
+    // quotes: ['error', 'prefer-single'],
+    semi: ["error", "never"],
+    "semi-spacing": "error",
+    "space-before-blocks": "error",
+    // 'space-before-function-paren': 'error',
+    "space-in-parens": "error",
+    "space-infix-ops": 0,
+    "space-unary-ops": "error",
+
+    // ES6
+    "arrow-spacing": "error",
+    "no-confusing-arrow": "error",
+    "no-duplicate-imports": "error",
+    "no-var": "error",
+    "object-shorthand": "error",
+    "prefer-const": "error",
+    "prefer-template": "error"
+  }
+
+  // rules: {
+  //   'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  //   'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  //   semi: ['error', 'never'],
+  //   'max-len': 'off',
+  //   camelcase: ['error', { properties: 'never', ignoreDestructuring: true, ignoreImports: true }]
+  // }
+}

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "trailingComma": "none",
+  "comma-dangle": false,
+  "printWidth": 160,
+  "bracketSpacing": true
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+    "recommendations": []
+
+}

.vscode/settings.json

@@ -1,11 +1,21 @@
 {
-  "editor.wordWrap": "on",
-  "chat.editor.wordWrap": "on",
-  "editor.formatOnPaste": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "[php]": {
-    "editor.defaultFormatter": "kokororin.vscode-phpfmt"
-  },
-  "editor.formatOnType": true
+    "phpfmt.php_bin": "\"C:/xampp/php/php.exe\"",
+    "[php]": {
+        "editor.formatOnSave": true
+    },
+    "phpfmt.enable_auto_align": true,
+    "phpfmt.detect_indent": false,
+    "phpfmt.indent_with_space": 4,
+    "prettier.singleQuote": true,
+    "prettier.useTabs": true,
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+        },
+    "[typescriptreact]":{
+        "editor.defaultFormatter" : "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+
 }

app/Controllers/Kewilayahan/Kytp.php

@@ -1,11 +1,16 @@
 <?php
 namespace App\Controllers\Kewilayahan;
 
+use App\Controllers\Kewilayahan\Sebaran\Identifikasi;
+use App\Controllers\Kewilayahan\Sebaran\PayComp;
+use App\Controllers\Kewilayahan\Sebaran\Pembayaran;
+use App\Controllers\Kewilayahan\Sebaran\Sof;
+use CodeIgniter\API\ResponseTrait;
 use CodeIgniter\Controller;
 
 class Kytp extends Controller
 {
-
+    use ResponseTrait;
     public function index()
     {
         $db = \Config\Database::connect();
@@ -31,9 +36,60 @@ class Kytp extends Controller
         return json_encode($dataReturn);
     }
 
+    public function sebaranPembayaran()
+    {
+        $ret   = [];
+        $tahun = $this->request->getPost('tahun') ?? date('Y');
+        $bulan = $this->request->getPost('bulan') ?? date('m');
+
+        $sebaranPembayaran = new Pembayaran;
+
+        $dataReturn['dataC']    = $sebaranPembayaran->dataC($this->request, $tahun, $bulan);
+        $dataReturn['dataMin1'] = $sebaranPembayaran->dataC($this->request, $tahun, $bulan - 1);
+        $dataReturn['dataMin2'] = $sebaranPembayaran->dataC($this->request, $tahun, $bulan - 2);
+        return $this->respond($dataReturn, 200);
+        // return json_encode($dataReturn);
+    }
+
+    public function sebaranIdentifikasi()
+    {
+        $ret = [];
+
+        $sebaran = new Identifikasi;
+
+        $dataReturn['data'] = $sebaran->data($this->request);
+        return $this->respond($dataReturn, 200);
+        // return json_encode($dataReturn);
+    }
+    public function sebaranPayComp()
+    {
+        $tahun = $this->request->getPost('tahun') ?? date('Y');
+        $bulan = $this->request->getPost('bulan') ?? date('m');
+
+        $sebaran = new PayComp;
+
+        $dataReturn['dataC']    = $sebaran->dataC($this->request, $tahun, $bulan);
+        $dataReturn['dataMin1'] = $sebaran->dataC($this->request, $tahun, $bulan - 1);
+        $dataReturn['dataMin2'] = $sebaran->dataC($this->request, $tahun, $bulan - 2);
+
+        return $this->respond($dataReturn, 200);
+    }
+
+    public function sebaranSof()
+    {
+        $tahun = $this->request->getPost('tahun') ?? date('Y');
+        $bulan = $this->request->getPost('bulan') ?? date('m');
+
+        $sebaran            = new Sof;
+        $dataReturn['data'] = $sebaran->dataC($this->request, $tahun, $bulan);
+
+        return $this->respond($dataReturn, 200);
+    }
+
     private function get_poi_agg()
     {
-        $opsiWilZona  = $this->request->getPost('opsiWilZona');
+
+        $opsiWilZona  = $this->request->getPost('opsiWilZona') ?? null;
         $adm4_pcode   = $this->request->getPost('adm4_pcode') ?? [];
         $id_poly_zona = $this->request->getPost('id_poly_zona') ?? [];
 

app/Controllers/Kewilayahan/Sebaran/Identifikasi.php

@@ -0,0 +1,41 @@
+<?php
+namespace App\Controllers\Kewilayahan\Sebaran;
+
+class Identifikasi extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function data($request)
+    {
+        $opsiWilZona  = $request->getPost('opsiWilZona');
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+
+        $db = \Config\Database::connect();
+
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select("CASE WHEN (NPWP IS NULL) THEN 'NON NPWP' ELSE 'BER NPWP' END AS IDENTIFIKASI, count(1) JML", false)
+            ->groupBy("CASE WHEN (NPWP IS NULL) THEN 'NON NPWP' ELSE 'BER NPWP' END");
+
+        if ($opsiWilZona == 'wilayah') {
+            $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $data = $npwp->get()->getResult();
+
+        $ret = [];
+
+        foreach ($data as $b) {
+
+            array_push($ret, ['name' => $b->IDENTIFIKASI,
+                'color'                  => $b->IDENTIFIKASI == 'NON NPWP' ? 'orange' : 'green',
+                'y'                      => floatval($b->JML),
+            ]
+            );
+        }
+
+        return $ret;
+    }
+}

app/Controllers/Kewilayahan/Sebaran/PayComp.php

@@ -0,0 +1,49 @@
+<?php
+namespace App\Controllers\Kewilayahan\Sebaran;
+
+use CodeIgniter\Database\RawSql;
+
+class PayComp extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function dataC($request, $tahun, $bulan)
+    {
+        $opsiWilZona  = $request->getPost('opsiWilZona');
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+
+        $db = \Config\Database::connect();
+        //npwp
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select('NPWP')->distinct()->where('NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $data = $db->newQuery()
+            ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN,  B.JML|| ' bulan' as KETERANGAN, COUNT(1) AS Y", false)
+            ->fromSubquery($npwp, 'A')
+            ->join('KPDL_MV_PENERIMAAN_AGG_PC B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'inner')
+            ->groupBy("B.JML")->orderBy("KETERANGAN");
+
+        $data = $data->get()->getResult();
+
+        $ret = [];
+
+        foreach ($data as $b) {
+
+            array_push($ret, ['name' => $b->KETERANGAN,
+                // 'color'                  => $b->WARNA_BYR,
+                'y'                      => floatval($b->Y),
+                'thn_bln'                => $b->THN_BLN,
+            ]
+            );
+        }
+
+        return $ret;
+    }
+}

app/Controllers/Kewilayahan/Sebaran/Pembayaran.php

@@ -0,0 +1,70 @@
+<?php
+namespace App\Controllers\Kewilayahan\Sebaran;
+
+use CodeIgniter\Database\RawSql;
+
+class Pembayaran extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function dataC($request, $tahun, $bulan)
+    {
+        $opsiWilZona  = $request->getPost('opsiWilZona');
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+        // $tahun        = $this->request->getPost('tahun') ?? date('Y');
+        // $bulan        = $this->request->getPost('bulan') ?? date('m');
+
+        // $opsiWilZona  = '';
+        // $adm4_pcode   = '';
+        // $id_poly_zona = '';
+        // $tahun        = date('Y');
+        // $bulan        = date('m');
+
+        $db = \Config\Database::connect();
+        //npwp
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select('NPWP')->distinct()->where('NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $data = $db->newQuery()
+            ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN,  NVL(WARNA_BYR, 'black') WARNA_BYR, COUNT(1) AS Y")
+            ->fromSubquery($npwp, 'A')
+            ->join('KPDL_MV_PENERIMAAN_AGG B', new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'left')
+            ->groupBy("NVL(WARNA_BYR, 'black')")->orderBy("WARNA_BYR");
+
+        $data = $data->get()->getResult();
+
+        $ret = [];
+
+        foreach ($data as $b) {
+            $name = '';
+            switch ($b->WARNA_BYR) {
+                case 'black':$name = '<=0';
+                    break;
+                case 'red':$name = '< 5 jt';
+                    break;
+                case 'yellow':$name = '<48 jt';
+                    break;
+                case 'green':$name = '<100 jt';
+                    break;
+                case 'blue':$name = '> 100 jt';
+                    break;
+            }
+
+            array_push($ret, ['name' => $name,
+                'color'                  => $b->WARNA_BYR,
+                'y'                      => floatval($b->Y),
+                'thn_bln'                => $b->THN_BLN,
+            ]
+            );
+        }
+
+        return $ret;
+    }
+}

app/Controllers/Kewilayahan/Sebaran/Sof.php

@@ -0,0 +1,61 @@
+<?php
+namespace App\Controllers\Kewilayahan\Sebaran;
+
+use CodeIgniter\Database\RawSql;
+
+class Sof extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function dataC($request, $tahun, $bulan)
+    {
+        $opsiWilZona  = $request->getPost('opsiWilZona');
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+
+        $db = \Config\Database::connect();
+        //npwp
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select('NPWP')->distinct()->where('NPWP IS NOT NULL');
+
+        if ($opsiWilZona == 'wilayah') {
+            $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
+        }
+
+        if ($opsiWilZona == 'zona') {
+            $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
+        }
+
+        $sqlBulanIni = $db->newQuery()
+            ->select("'" . $tahun . '-' . $bulan . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
+            ->fromSubquery($npwp, 'A')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan), 'inner')
+            ->groupBy("B.LAPISAN")->getCompiledSelect();
+
+        $sqlBulanLalu = $db->newQuery()
+            ->select("'" . $tahun . '-' . $bulan - 1 . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
+            ->fromSubquery($npwp, 'A')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan - 1), 'inner')
+            ->groupBy("B.LAPISAN")->getCompiledSelect();
+
+        $sql2BulanLalu = $db->newQuery()
+            ->select("'" . $tahun . '-' . $bulan - 2 . "' AS THN_BLN, B.LAPISAN, count(1) JML", false)
+            ->fromSubquery($npwp, 'A')
+            ->join("KPDL_MV_PENERIMAAN_AGG_SF B", new RawSql("A.NPWP=B.NPWP and B.THNBYR = " . $tahun . " and B.BULAN=" . $bulan - 2), 'inner')
+            ->groupBy("B.LAPISAN")->getCompiledSelect();
+
+        $sqlSemua = $db->newQuery()
+            ->select("L.LAPISAN , NVL(A.JML, 0) AS JML_C, NVL(B.JML,0) JML_P1, NVL(C.JML,0) JML_P2")
+            ->from('KPDL_REF_LAPISAN L')
+            ->join("(" . $sqlBulanIni . ") A", "L.LAPISAN = A.LAPISAN", "left", false)
+            ->join("(" . $sqlBulanLalu . ") B", "L.LAPISAN = B.LAPISAN", "left", false)
+            ->join("(" . $sql2BulanLalu . ") C", "L.LAPISAN = C.LAPISAN", "left", false)
+            ->orderBy("L.LAPISAN");
+
+        $data = $sqlSemua->get()->getResult();
+        foreach ($data as $key => $value) {
+            $value->JML_C  = floatval($value->JML_C);
+            $value->JML_P1 = floatval($value->JML_P1);
+            $value->JML_P2 = floatval($value->JML_P2);
+        }
+        return $data;
+    }
+}

app/Views/kewilayahan/kytp/TabPenugasan.js

@@ -0,0 +1,14 @@
+import React, { useState } from "react"
+import { TabView, TabPanel } from "primereact/tabview"
+
+export default function TabPenugasan({ dataSend }) {
+  return (
+    <div className="card">
+      <TabView>
+        <TabPanel id="tab_1" header="Penugasan"></TabPanel>
+        <TabPanel id="tab_2" header="Aktifitas"></TabPanel>
+        <TabPanel id="tab_3" header="Hasil"></TabPanel>
+      </TabView>
+    </div>
+  )
+}

app/Views/kewilayahan/kytp/TabProgresifitas.js

@@ -1,40 +1,35 @@
-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>
-    )
+import React, { useState } from "react"
+import { TabView, TabPanel } from "primereact/tabview"
+// import Identifikasi from "./componentProgresifitas/Identifikasi"
+import Pembayaran from "./componentProgresifitas/Pembayaran"
+import Identifikasi from "./componentProgresifitas/Identifikasi"
+import PayComp from "./componentProgresifitas/PayComp"
+import Sof from "./componentProgresifitas/Sof"
+
+export default function TabProgresifitas({ dataSend }) {
+  return (
+    <div className="card">
+      <TabView>
+        <TabPanel id="tab_1" header="Identifikasi">
+          <Identifikasi dataSend={dataSend} />
+        </TabPanel>
+        <TabPanel id="tab_2" header="Pembayaran">
+          <Pembayaran dataSend={dataSend} />
+        </TabPanel>
+        <TabPanel id="tab_3" header="Payment Compliance">
+          <PayComp dataSend={dataSend} />
+        </TabPanel>
+        <TabPanel id="tab_4" header="Strength Of Figure">
+          <div style={{ minHeight: "300px" }}>
+            <Sof dataSend={dataSend} />
+          </div>
+        </TabPanel>
+
+        <TabPanel id="tab_5" header="Jenis/Status WP"></TabPanel>
+
+        <TabPanel id="tab_5" header="Pengampu"></TabPanel>
+        <TabPanel id="tab_6" header="KLU"></TabPanel>
+      </TabView>
+    </div>
+  )
 }

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

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from "react"
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import { Col, Row } from "reactstrap"
+import { format_angka } from "../util"
+import collect from "collect.js"
+
+const Identifikasi = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const refChart = useRef(null)
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranIdentifikasi",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: (data) => {
+        console.log(data)
+        setData(data.data)
+      }
+    })
+  }, [dataSend])
+
+  const optionsChart = (data, title) => {
+    const total_wp = collect(data).sum("y")
+    return {
+      chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: "pie",
+        zoomType: "xy",
+        height: "300"
+      },
+      title: {
+        text: title,
+        style: { fontSize: "10px" }
+      },
+      tooltip: {
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total lokasi Matoa"
+      },
+      accessibility: {
+        point: {
+          valueSuffix: "%"
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: "pointer",
+          dataLabels: {
+            enabled: true,
+            style: { fontSize: "10px" },
+            format: "{point.name}: <br> {point.percentage:.1f} %"
+          }
+        }
+        // series: pie_click
+      },
+      series: [
+        {
+          name: "",
+          data
+        }
+      ]
+    }
+  }
+  return (
+    <>
+      <Row>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, "Identifikasi Lokasi Matoa")} />
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default Identifikasi

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from "react"
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import { Col, Row } from "reactstrap"
+import { format_angka } from "../util"
+const date = new Date()
+const cBulan = date.getMonth() + 1
+
+const PayComp = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const refChart = useRef(null)
+  const [dataC, setDataC] = useState(null)
+  const [dataMin1, setDataMin1] = useState(null)
+  const [dataMin2, setDataMin2] = useState(null)
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranPayComp",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend,
+        tahun: date.getFullYear(),
+        bulan: cBulan
+      },
+      success: (data) => {
+        setDataC(data.dataC)
+        setDataMin1(data.dataMin1)
+        setDataMin2(data.dataMin2)
+      }
+    })
+  }, [dataSend])
+
+  const optionsChart = (data, title, type) => {
+    const total_wp = collect(data).sum("y")
+    return {
+      chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: "pie",
+        zoomType: "xy",
+        height: "300"
+      },
+      title: {
+        text: title,
+        style: { fontSize: "10px" }
+      },
+      tooltip: {
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>Jml NPWP : {point.y} dari " + format_angka(total_wp) + " yang terdapat data penerimaannya"
+      },
+      accessibility: {
+        point: {
+          valueSuffix: "%"
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: "pointer",
+          // colors: warna_garis,
+          dataLabels: {
+            enabled: true,
+            style: { fontSize: "0.7rem" },
+            format: "{point.name}: <br> {point.percentage:.1f} %"
+          }
+          //showInLegend: true
+        }
+        // series: pie_click
+      },
+      series: [
+        {
+          name: type,
+          data
+        }
+      ]
+    }
+  }
+  return (
+    <>
+      <Row>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
+        </Col>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
+        </Col>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default PayComp

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from "react"
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import { Col, Row } from "reactstrap"
+import { format_angka } from "../util"
+const date = new Date()
+const cBulan = date.getMonth() + 1
+
+const Pembayaran = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const refChart = useRef(null)
+  const [dataC, setDataC] = useState(null)
+  const [dataMin1, setDataMin1] = useState(null)
+  const [dataMin2, setDataMin2] = useState(null)
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranPembayaran",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend,
+        tahun: date.getFullYear(),
+        bulan: cBulan
+      },
+      success: (data) => {
+        setDataC(data.dataC)
+        setDataMin1(data.dataMin1)
+        setDataMin2(data.dataMin2)
+      }
+    })
+  }, [dataSend])
+
+  const optionsChart = (data, title, type) => {
+    const total_wp = collect(data).sum("y")
+    return {
+      chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: "pie",
+        zoomType: "xy",
+        height: "300"
+      },
+      title: {
+        text: title,
+        style: { fontSize: "10px" }
+      },
+      tooltip: {
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>Jml NPWP : {point.y} dari " + format_angka(total_wp)
+      },
+      accessibility: {
+        point: {
+          valueSuffix: "%"
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: "pointer",
+          //colors : warna_garis,
+          dataLabels: {
+            enabled: true,
+            style: { fontSize: "10px" },
+            format: "{point.name}: <br> {point.percentage:.1f} %"
+          }
+          // showInLegend: true
+        }
+        // series: pie_click
+      },
+      series: [
+        {
+          name: type,
+          data
+        }
+      ]
+    }
+  }
+  return (
+    <>
+      <Row>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
+        </Col>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
+        </Col>
+        <Col>
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default Pembayaran

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

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useState } from "react"
+import { Col, Row, Table } from "reactstrap"
+import { format_angka } from "../util"
+import collect from "collect.js"
+const date = new Date()
+const cBulan = date.getMonth() + 1
+
+const Sof = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const [data, setData] = useState([])
+  const [total, setTotal] = useState({ totalC: 0, totalP1: 0, totalP2: 0 })
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranSof",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend,
+        tahun: date.getFullYear(),
+        bulan: cBulan
+      },
+      success: (data) => {
+        console.log(data)
+        setData(data.data)
+        setTotal({
+          totalC: collect(data.data).sum("JML_C"),
+          totalP1: collect(data.data).sum("JML_P1"),
+          totalP2: collect(data.data).sum("JML_P2")
+        })
+      }
+    })
+  }, [dataSend])
+
+  return (
+    <>
+      <Row>
+        <Col>
+          <div className="d-flex justify-content-center">
+            <Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
+              <thead className="bg-primary text-white">
+                <tr>
+                  <th class="text-center text-white" rowspan="2">
+                    Lapisan
+                  </th>
+                  <th class="text-center text-white" colspan="2">
+                    s.d Sekarang
+                  </th>
+                  <th class="text-center text-white" colspan="2">
+                    s.d Bulan Lalu
+                  </th>
+                  <th class="text-center text-white" colspan="2">
+                    s.d 2 Bulan Lalu
+                  </th>
+                </tr>
+                <tr>
+                  <th class="text-center text-white">Jml WP</th>
+                  <th class="text-center text-white">%</th>
+                  <th class="text-center text-white">Jml WP</th>
+                  <th class="text-center text-white">%</th>
+                  <th class="text-center text-white">Jml WP</th>
+                  <th class="text-center text-white">%</th>
+                </tr>
+                <tr class="">
+                  <th class="text-center text-white">1</th>
+                  <th class="text-center text-white">2</th>
+                  <th class="text-center text-white">3</th>
+                  <th class="text-center text-white">4</th>
+                  <th class="text-center text-white">5</th>
+                  <th class="text-center text-white">6</th>
+                  <th class="text-center text-white">7</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.map((val, idx) => {
+                  return (
+                    <tr id={idx}>
+                      <td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
+                      <td class="text-center p-1">{val.JML_C}</td>
+                      <td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
+                      <td class="text-center p-1">{val.JML_P1}</td>
+                      <td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
+                      <td class="text-center p-1">{val.JML_P2}</td>
+                      <td class="text-center p-1">{((val.JML_P2 / total.totalP2) * 100).toFixed(2) + "%"}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+              <tfoot>
+                <tr className="font-weight-bold">
+                  <td class="text-center">Total</td>
+                  <td class="text-center">{total.totalC}</td>
+                  <td class="text-center">100%</td>
+                  <td class="text-center">{total.totalP1}</td>
+                  <td class="text-center">100%</td>
+                  <td class="text-center">{total.totalP2}</td>
+                  <td class="text-center">100%</td>
+                </tr>
+              </tfoot>
+            </Table>
+          </div>
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default Sof

app/Views/kewilayahan/kytp/kpdl.js

@@ -1,25 +1,28 @@
 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 { Button, Card, CardBody, CardHeader, 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 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 "primeflex/primeflex.css"
 import TabProgresifitas from "./TabProgresifitas"
+import TabPenugasan from "./TabPenugasan"
 // import 'bootstrap/dist/css/bootstrap.m in.css';
+// let datasend = {}
 
 const Root = () => {
   const base_url = "<?=base_url()?>"
   const refChart1 = useRef(null)
-  const toast = useRef(null);
-  const [active, setActive] = useState('wilayah')
-  const toggle = tab => {
+  const toast = useRef(null)
+  const [active, setActive] = useState("wilayah")
+  const toggle = (tab) => {
     setActive(tab)
   }
 
@@ -45,24 +48,29 @@ const Root = () => {
   const [arSelected, setArSelected] = useState([])
   const [zpSelected, setZpSelected] = useState([])
 
+  const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [] })
   const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
 
   useEffect(() => {
-
     jQuery.ajax({
-      url: base_url + 'kewilayahan/ref/propinsi', method: "GET", dataType: "json", success: ((data) => {
+      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) => {
+      url: base_url + "kewilayahan/ref/zpkanwil",
+      method: "GET",
+      dataType: "json",
+      success: (data) => {
         setKanwil(data)
-      })
+      }
     })
   }, [])
 
-
   useEffect(() => {
     setKota({})
     setKec([])
@@ -73,13 +81,13 @@ const Root = () => {
     if (propSelected && !isObjEmpty(propSelected)) {
       const prop = propSelected.value
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/kota',
+        url: base_url + "kewilayahan/ref/kota",
         method: "GET",
         dataType: "json",
         data: { prop },
-        success: ((data) => {
+        success: (data) => {
           setKota(data)
-        })
+        }
       })
     }
   }, [propSelected])
@@ -92,15 +100,14 @@ const Root = () => {
     if (kotaSelected && !isObjEmpty(kotaSelected)) {
       const kota = kotaSelected.value
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/kecamatan',
+        url: base_url + "kewilayahan/ref/kecamatan",
         method: "GET",
         dataType: "json",
         data: { kota },
-        success: ((data) => {
+        success: (data) => {
           setKec(data)
-        })
+        }
       })
-
     }
   }, [kotaSelected])
 
@@ -109,18 +116,17 @@ const Root = () => {
     setKelSelected([])
     console.log({ kecSelected })
     if (kecSelected.length && !isObjEmpty(kecSelected)) {
-      const kec = collect(kecSelected).pluck('value').all()
+      const kec = collect(kecSelected).pluck("value").all()
       console.log({ kec })
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/kelurahan',
+        url: base_url + "kewilayahan/ref/kelurahan",
         method: "GET",
         dataType: "json",
         data: { kec },
-        success: ((data) => {
+        success: (data) => {
           setKel(data)
-        })
+        }
       })
-
     }
   }, [kecSelected])
 
@@ -136,13 +142,13 @@ const Root = () => {
     if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
       const kanwil = kanwilSelected.value
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/zpkpp',
+        url: base_url + "kewilayahan/ref/zpkpp",
         method: "GET",
         dataType: "json",
         data: { kanwil },
-        success: ((data) => {
+        success: (data) => {
           setKpp(data)
-        })
+        }
       })
     }
   }, [kanwilSelected])
@@ -155,15 +161,15 @@ const Root = () => {
     setArSelected([])
     setZpSelected([])
     if (kppSelected && !isObjEmpty(kppSelected)) {
-      const kpp = collect(kppSelected).pluck('value').all()
+      const kpp = collect(kppSelected).pluck("value").all()
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/zpseksi',
+        url: base_url + "kewilayahan/ref/zpseksi",
         method: "GET",
         dataType: "json",
         data: { kpp },
-        success: ((data) => {
+        success: (data) => {
           setSeksi(data)
-        })
+        }
       })
     }
   }, [kppSelected])
@@ -174,17 +180,17 @@ const Root = () => {
     setArSelected([])
     setZpSelected([])
     if (seksiSelected && !isObjEmpty(seksiSelected)) {
-      const kpp = collect(kppSelected).pluck('value').all()
-      const seksi = collect(seksiSelected).pluck('value').all()
+      const kpp = collect(kppSelected).pluck("value").all()
+      const seksi = collect(seksiSelected).pluck("value").all()
 
       jQuery.ajax({
-        url: base_url + 'kewilayahan/ref/zpar',
+        url: base_url + "kewilayahan/ref/zpar",
         method: "GET",
         dataType: "json",
         data: { kpp, seksi },
-        success: ((data) => {
+        success: (data) => {
           setAr(data)
-        })
+        }
       })
     }
   }, [seksiSelected])
@@ -193,69 +199,51 @@ const Root = () => {
     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()
+      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',
+        url: base_url + "kewilayahan/ref/zpzp",
         method: "GET",
         dataType: "json",
         data: { kpp, seksi, ar },
-        success: ((data) => {
+        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,
-    }
+    const adm4_pcode = collect(kelSelected).pluck("value").all()
+    const id_poly_zona = collect(zpSelected).pluck("value").all()
 
     switch (opsiWilZona) {
-      case 'wilayah':
+      case "wilayah":
         if (adm4_pcode.length) {
-          datasend.adm4_pcode = adm4_pcode
+          setDataSend({ opsiWilZona: "wilayah", adm4_pcode, id_poly_zona: [] })
         } else {
-          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' });
+          toast.current.show({ severity: "info", summary: "Info", detail: "Kelurahan harus dipilih" })
         }
-        break;
-      case 'zona':
+        break
+      case "zona":
         if (id_poly_zona.length) {
-
-          datasend.id_poly_zona = id_poly_zona
+          setDataSend({ opsiWilZona: "zona", adm4_pcode: [], id_poly_zona })
         } else {
-          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' });
-
+          toast.current.show({ severity: "info", summary: "Info", detail: "Zona harus dipilih" })
         }
-        break;
+        break
       default:
-        break;
+        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: '.',
+        decimalPoint: ",",
+        thousandsSep: ".",
         numericSymbols: ["rb", "jt", "M", "T", "P", "E"]
       },
 
@@ -264,37 +252,37 @@ const Root = () => {
       }
     })
     jQuery.ajax({
-      url: base_url + 'kewilayahan/kytp/graph_matoa',
+      url: base_url + "kewilayahan/kytp/graph_matoa",
       dataType: "json",
       type: "POST",
+      data: { ...dataSend },
       success: (data) => {
         setDataGraphMatoa(data)
       }
     })
-
-
-  }, [])
+  }, [dataSend])
 
   const optionsGraphMatoaAgg = {
     chart: {
-      zoomType: 'xy',
-      height: '320',
+      zoomType: "xy",
+      height: "320"
     },
     title: {
-      text: 'Poi Google dan Matoa',
+      text: "Poi Google dan Matoa"
       // align: 'center'
     },
 
-    xAxis: [{
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-      crosshair: true
-    }],
+    xAxis: [
+      {
+        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        crosshair: true
+      }
+    ],
     yAxis: [
       {
         gridLineWidth: 0,
         title: {
-          text: '',
+          text: "",
           style: {
             color: Highcharts.getOptions().colors[0]
           }
@@ -315,19 +303,18 @@ const Root = () => {
           }
         },
         title: {
-          text: 'NPWP Work True',
+          text: "NPWP Work True",
           style: {
             color: Highcharts.getOptions().colors[1]
           }
         },
         opposite: true,
         visible: false
-
       },
       {
         gridLineWidth: 0,
         title: {
-          text: 'Rupiah',
+          text: "Rupiah",
           style: {
             color: Highcharts.getOptions().colors[2]
           }
@@ -344,7 +331,7 @@ const Root = () => {
       {
         gridLineWidth: 0,
         title: {
-          text: '',
+          text: "",
           style: {
             color: "#FF0000"
           }
@@ -362,294 +349,316 @@ const Root = () => {
       shared: true
     },
     legend: {
-      layout: 'horizontal',
-      align: 'center',
+      layout: "horizontal",
+      align: "center",
       //x: 80,
-      verticalAlign: 'top',
+      verticalAlign: "top",
       //y: 55,
       //floating: true,
       backgroundColor:
         Highcharts.defaultOptions.legend.backgroundColor || // theme
-        'rgba(255,255,255,0.25)'
+        "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;
+    series: [
+      {
+        color: "#FF0000",
+        name: "Jml PoI",
+        type: "column",
+        yAxis: 3,
+        data: dataGraphMatoa.poi_agg,
+        marker: {
+          enabled: true
         },
-        shared: false
+        tooltip: {
+          valueSuffix: " PoI"
+        }
       },
-      visible: true,
-      color: "#8000ff"
-    }],
+      {
+        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} />
-  </>
+  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>
+                  </Row>
+                  <Row className="mt-2">
+                    <Col sm="12">
+                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
+                    </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>
+                  </Row>
+                  <Row className="mt-2">
+                    <Col sm="12">
+                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
+                    </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>
+            <CardHeader className="d-flex justify-content-center">
+              <CardTitle tag={"h1"} className="font-weight-bold">
+                Statistik Progresifitas Hasil Kegiatan Matoa
+              </CardTitle>
+            </CardHeader>
+            <CardBody>
+              <TabProgresifitas dataSend={dataSend} />
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm="12">
+          <Card>
+            <CardBody>
+              <TabPenugasan dataSend={dataSend} />
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+      <Toast ref={toast} />
+    </>
+  )
 }
 
 const container = document.getElementById("app")

package.json

@@ -7,6 +7,7 @@
     "highcharts-react-official": "^3.2.1",
     "jquery": "^3.7.1",
     "popper": "^1.0.1",
+    "primeflex": "^3.3.1",
     "primereact": "^10.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

webpack.config.js

@@ -9,7 +9,9 @@ module.exports = {
     path: path.resolve("./app/Views/kewilayahan/dist"),
     filename: "[name].js"
   },
-
+  optimization: {
+    minimize: false
+  },
   module: {
     rules: [
       {

yarn.lock

@@ -4453,6 +4453,11 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha512-s/46sYeylUfHNjI+sA/78FAHlmIuKqI9wNnzEOGehAlUUYeObv5C2mOinXBjyUyWmJ2SfcS2/ydApH4hTF4WXQ==
 
+primeflex@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68"
+  integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==
+
 primereact@^10.8.2:
   version "10.8.2"
   resolved "https://registry.yarnpkg.com/primereact/-/primereact-10.8.2.tgz#6cd56c65f95a79aeaaa11c1efa1a1da797021e45"