jenis status wp

app/Controllers/Kewilayahan/Kytp.php

@@ -2,6 +2,7 @@
 namespace App\Controllers\Kewilayahan;
 
 use App\Controllers\Kewilayahan\Sebaran\Identifikasi;
+use App\Controllers\Kewilayahan\Sebaran\JenisStatus;
 use App\Controllers\Kewilayahan\Sebaran\PayComp;
 use App\Controllers\Kewilayahan\Sebaran\Pembayaran;
 use App\Controllers\Kewilayahan\Sebaran\Sof;
@@ -86,6 +87,16 @@ class Kytp extends Controller
         return $this->respond($dataReturn, 200);
     }
 
+    public function sebaranJenisStatusWp()
+    {
+
+        $sebaran                  = new JenisStatus;
+        $dataReturn['dataJenis']  = $sebaran->data($this->request, 'jenis');
+        $dataReturn['dataStatus'] = $sebaran->data($this->request, 'status');
+
+        return $this->respond($dataReturn, 200);
+    }
+
     private function get_poi_agg()
     {
 

app/Controllers/Kewilayahan/Sebaran/JenisStatus.php

@@ -0,0 +1,55 @@
+<?php
+namespace App\Controllers\Kewilayahan\Sebaran;
+
+class JenisStatus extends \App\Controllers\Kewilayahan\Kytp
+
+{
+    protected function data($request, $jenisOrStatus)
+    {
+        $opsiWilZona  = $request->getPost('opsiWilZona');
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+
+        $db = \Config\Database::connect();
+
+        $kolom = "JNS_WP_MFWP";
+        switch ($jenisOrStatus) {
+            case 'jenis':
+                $kolom = "JNS_WP_MFWP";
+                break;
+            case 'status':
+                $kolom = "STATUS_WP_MFWP";
+                break;
+            default:
+
+                break;
+        }
+
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select($kolom . ", count(1) JML", false)
+            ->where($kolom . " IS NOT NULL")
+            ->groupBy($kolom);
+
+        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->{$kolom},
+                // 'color'                  => ,
+                'y'                      => floatval($b->JML),
+            ]
+            );
+        }
+
+        return $ret;
+    }
+}

app/Views/kewilayahan/dist/kpdl.js

@@ -3855,7 +3855,7 @@ module.exports = function zip(array) {
 
 /***/ }),
 
-/***/ 32:
+/***/ 8032:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -60878,7 +60878,7 @@ var update = injectStylesIntoStyleTag_default()(theme/* default */.A, theme_opti
        /* harmony default export */ const bootstrap4_light_blue_theme = (theme/* default */.A && theme/* default */.A.locals ? theme/* default */.A.locals : undefined);
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/primeflex/primeflex.css
-var primeflex = __webpack_require__(32);
+var primeflex = __webpack_require__(8032);
 ;// CONCATENATED MODULE: ./node_modules/primeflex/primeflex.css
 
       
@@ -61791,6 +61791,8 @@ const Pembayaran = ({
 }) => {
   const base_url = "<?=base_url()?>";
   const refChart = (0,react.useRef)(null);
+  const refChart1 = (0,react.useRef)(null);
+  const refChart2 = (0,react.useRef)(null);
   const [dataC, setDataC] = (0,react.useState)(null);
   const [dataMin1, setDataMin1] = (0,react.useState)(null);
   const [dataMin2, setDataMin2] = (0,react.useState)(null);
@@ -61863,11 +61865,11 @@ const Pembayaran = ({
     highcharts: (highcharts_default()),
     options: optionsChart(dataC, "s.d. bulan ini", "C")
   })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
-    ref: refChart,
+    ref: refChart1,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin1, "s.d. bulan lalu", "Min1")
   })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
-    ref: refChart,
+    ref: refChart2,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")
   }))));
@@ -61965,6 +61967,8 @@ const PayComp = ({
 }) => {
   const base_url = "<?=base_url()?>";
   const refChart = (0,react.useRef)(null);
+  const refChart1 = (0,react.useRef)(null);
+  const refChart2 = (0,react.useRef)(null);
   const [dataC, setDataC] = (0,react.useState)(null);
   const [dataMin1, setDataMin1] = (0,react.useState)(null);
   const [dataMin2, setDataMin2] = (0,react.useState)(null);
@@ -62037,11 +62041,11 @@ const PayComp = ({
     highcharts: (highcharts_default()),
     options: optionsChart(dataC, "s.d. bulan ini", "C")
   })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
-    ref: refChart,
+    ref: refChart1,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin1, "s.d. bulan lalu", "Min1")
   })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
-    ref: refChart,
+    ref: refChart2,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")
   }))));
@@ -62232,6 +62236,95 @@ const Sof = ({
   }, "100%"))))))));
 };
 /* harmony default export */ const componentProgresifitas_Sof = (Sof);
+;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/componentProgresifitas/JenisStatusWp.js
+
+
+
+
+
+
+const JenisStatusWp = ({
+  dataSend
+}) => {
+  const base_url = "<?=base_url()?>";
+  const refChart = (0,react.useRef)(null);
+  const refChart2 = (0,react.useRef)(null);
+  const [dataJenis, setDataJenis] = (0,react.useState)(null);
+  const [dataStatus, setDataStatus] = (0,react.useState)(null);
+  (0,react.useEffect)(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranJenisStatusWp",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: data => {
+        setDataJenis(data.dataJenis);
+        setDataStatus(data.dataStatus);
+      }
+    });
+  }, [dataSend]);
+  const optionsChart = (data, title) => {
+    const total_wp = dist_default()(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 NPWP"
+      },
+      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 /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, {
+    md: "6"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart,
+    highcharts: (highcharts_default()),
+    options: optionsChart(dataJenis, "Jenis WP")
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "6"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart2,
+    highcharts: (highcharts_default()),
+    options: optionsChart(dataStatus, "Status WP")
+  }))));
+};
+/* harmony default export */ const componentProgresifitas_JenisStatusWp = (JenisStatusWp);
 ;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/TabProgresifitas.js
 
 
@@ -62240,6 +62333,7 @@ const Sof = ({
 
 
 
+
 function TabProgresifitas({
   dataSend
 }) {
@@ -62263,16 +62357,14 @@ function TabProgresifitas({
   })), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_4",
     header: "Strength Of Figure"
-  }, /*#__PURE__*/react.createElement("div", {
+  }, /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(componentProgresifitas_Sof, {
-    style: {
-      minHeight: "300px"
-    }
-  }, /*#__PURE__*/react.createElement(componentProgresifitas_Sof, {
     dataSend: dataSend
   }))), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_5",
     header: "Jenis/Status WP"
-  }), /*#__PURE__*/react.createElement(TabPanel, {
+  }, /*#__PURE__*/react.createElement(componentProgresifitas_JenisStatusWp, {
+    dataSend: dataSend
+  })), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_5",
     header: "Pengampu"
   }), /*#__PURE__*/react.createElement(TabPanel, {

app/Views/kewilayahan/kytp/TabProgresifitas.js

@@ -5,6 +5,7 @@ import Pembayaran from "./componentProgresifitas/Pembayaran"
 import Identifikasi from "./componentProgresifitas/Identifikasi"
 import PayComp from "./componentProgresifitas/PayComp"
 import Sof from "./componentProgresifitas/Sof"
+import JenisStatusWp from "./componentProgresifitas/JenisStatusWp"
 
 export default function TabProgresifitas({ dataSend }) {
   return (
@@ -13,19 +14,24 @@ export default function TabProgresifitas({ dataSend }) {
         <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" }}>
+          <div>
             <Sof dataSend={dataSend} />
           </div>
         </TabPanel>
 
-        <TabPanel id="tab_5" header="Jenis/Status WP"></TabPanel>
+        <TabPanel id="tab_5" header="Jenis/Status WP">
+          <JenisStatusWp dataSend={dataSend} />
+        </TabPanel>
 
         <TabPanel id="tab_5" header="Pengampu"></TabPanel>
         <TabPanel id="tab_6" header="KLU"></TabPanel>

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

@@ -0,0 +1,88 @@
+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 JenisStatusWp = ({ dataSend }) => {
+  const base_url = "<?=base_url()?>"
+
+  const refChart = useRef(null)
+  const refChart2 = useRef(null)
+  const [dataJenis, setDataJenis] = useState(null)
+  const [dataStatus, setDataStatus] = useState(null)
+
+  useEffect(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranJenisStatusWp",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: (data) => {
+        setDataJenis(data.dataJenis)
+        setDataStatus(data.dataStatus)
+      }
+    })
+  }, [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 NPWP"
+      },
+      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 md="6">
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataJenis, "Jenis WP")} />
+        </Col>
+        <Col md="6">
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataStatus, "Status WP")} />
+        </Col>
+      </Row>
+    </>
+  )
+}
+
+export default JenisStatusWp

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

@@ -10,6 +10,8 @@ const PayComp = ({ dataSend }) => {
   const base_url = "<?=base_url()?>"
 
   const refChart = useRef(null)
+  const refChart1 = useRef(null)
+  const refChart2 = useRef(null)
   const [dataC, setDataC] = useState(null)
   const [dataMin1, setDataMin1] = useState(null)
   const [dataMin2, setDataMin2] = useState(null)
@@ -84,10 +86,10 @@ const PayComp = ({ dataSend }) => {
           <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")} />
+          <HighchartsReact ref={refChart1} 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")} />
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
         </Col>
       </Row>
     </>

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

@@ -10,6 +10,8 @@ const Pembayaran = ({ dataSend }) => {
   const base_url = "<?=base_url()?>"
 
   const refChart = useRef(null)
+  const refChart1 = useRef(null)
+  const refChart2 = useRef(null)
   const [dataC, setDataC] = useState(null)
   const [dataMin1, setDataMin1] = useState(null)
   const [dataMin2, setDataMin2] = useState(null)
@@ -84,10 +86,10 @@ const Pembayaran = ({ dataSend }) => {
           <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")} />
+          <HighchartsReact ref={refChart1} 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")} />
+          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
         </Col>
       </Row>
     </>