identifikasi lapangan

app/Controllers/Kewilayahan/Kytp.php

@@ -2,11 +2,14 @@
 namespace App\Controllers\Kewilayahan;
 
 use App\Controllers\Kewilayahan\Sebaran\Identifikasi;
+use App\Controllers\Kewilayahan\Sebaran\IdentifikasiLapangan;
 use App\Controllers\Kewilayahan\Sebaran\JenisStatus;
+use App\Controllers\Kewilayahan\Sebaran\KLU;
 use App\Controllers\Kewilayahan\Sebaran\PayComp;
 use App\Controllers\Kewilayahan\Sebaran\Pembayaran;
 use App\Controllers\Kewilayahan\Sebaran\Pengampu;
 use App\Controllers\Kewilayahan\Sebaran\Sof;
+use App\Controllers\Kewilayahan\Sebaran\SPTTAhunan;
 use CodeIgniter\API\ResponseTrait;
 use CodeIgniter\Controller;
 
@@ -108,6 +111,40 @@ class Kytp extends Controller
         return $this->respond($dataReturn, 200);
     }
 
+    public function sebaranSPTTahunan()
+    {
+
+        $sebaran            = new SPTTAhunan;
+        $tahun              = $this->request->getGet('tahun') ?? date('Y');
+        $dataReturn['data'] = $sebaran->data($this->request, $tahun);
+
+        return $this->respond($dataReturn, 200);
+    }
+
+    public function sebaranKLU()
+    {
+
+        $sebaran                        = new KLU;
+        $tahun                          = $this->request->getGet('tahun') ?? date('Y');
+        $dataReturn['dataKluTerdaftar'] = $sebaran->data($this->request, 'dataKluTerdaftar');
+        $dataReturn['dataKluYgBayar']   = $sebaran->data($this->request, 'dataKluYgBayar');
+        $dataReturn['dataRupiahBayar']  = $sebaran->data($this->request, 'dataRupiahBayar');
+
+        return $this->respond($dataReturn, 200);
+    }
+
+    public function identifikasiLapangan()
+    {
+
+        $sebaran                  = new IdentifikasiLapangan;
+        $bulan                    = $this->request->getGet('bulan') ?? 'semua';
+        $dataReturn['akum']       = $sebaran->dataAgg($this->request, $bulan);
+        $dataReturn['kpdl']       = $sebaran->dataKpdl($this->request, $bulan);
+        $dataReturn['categories'] = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
+
+        return $this->respond($dataReturn, 200);
+    }
+
     private function get_poi_agg()
     {
         ini_set('max_input_vars', 3000);

app/Controllers/Kewilayahan/Sebaran/IdentifikasiLapangan.php

@@ -6,18 +6,16 @@ use App\Libraries\KpdlLibrary;
 class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
 
 {
-
+    protected function dataAgg($request, $bulan)
-    protected function dataKpdl($request, $bulan)
     {
         $opsiWilZona  = $request->getPost('opsiWilZona');
         $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
         $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
 
-        $db          = \Config\Database::connect();
+        $db = \Config\Database::connect();
-        $KpdlLibrary = new KpdlLibrary;
         if ($bulan == 'semua') {
 
-            $npwp = $db->table('KPDL_MV_JML_KPDL A')
+            $npwp = $db->table('KPDL_MV_JML_KPDL_AGG A')
                 ->select('BULAN, SUM(JML) JML')
                 ->where("TAHUN =" . date('Y'))
                 ->where('BULAN <=', date('m'))
@@ -34,59 +32,51 @@ class IdentifikasiLapangan extends \App\Controllers\Kewilayahan\Kytp
             $npwp = $npwp->getCompiledSelect();
 
             $data = $db->table('BULAN A')
-                ->select("A.KODE as BULAN, C.JML")
+                ->select("A.KODE AS BULAN, C.JML")
                 ->join("(" . $npwp . ") C", 'A.KODE = C.BULAN', 'left')
                 ->orderBy('BULAN');
 
+            $KpdlLibrary = new KpdlLibrary;
+
             return $KpdlLibrary->single_array($data->get()->getResult(), 'JML');
 
-        } else {
+        }
-            $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
+    }
-            $generateTgl = "SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
-                                FROM
-                                dual
-                                CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1)";
 
-            $data = $db->table('KPDL_MV_LOKASI_SUBJEK B')
+    protected function dataKpdl($request, $bulan)
-                ->select("TO_CHAR(CREATION_DATE,'DD') as TGL, COUNT(1) JML")
+    {
-                ->where("to_char(CREATION_DATE,'YYYY') = ", date('Y'))
+        $opsiWilZona  = $request->getPost('opsiWilZona');
-                ->where("to_char(CREATION_DATE,'MM') = " . $bulan)
+        $adm4_pcode   = $request->getPost('adm4_pcode') ?? [];
-                ->groupBy("TO_CHAR(CREATION_DATE,'DD')");
+        $id_poly_zona = $request->getPost('id_poly_zona') ?? [];
+
+        $db = \Config\Database::connect();
+        if ($bulan == 'semua') {
+
+            $npwp = $db->table('KPDL_MV_JML_KPDL A')
+                ->select('BULAN, SUM(JML) JML')
+                ->where("TAHUN =" . date('Y'))
+                ->where('BULAN <=', date('m'))
+                ->groupBy('BULAN');
 
             if ($opsiWilZona == 'wilayah') {
-                $data = $data->whereIn('ADM4_PCODE', $adm4_pcode);
+                $npwp = $npwp->whereIn('ADM4_PCODE', $adm4_pcode);
             }
 
             if ($opsiWilZona == 'zona') {
-                $data = $data->whereIn('ID_POLY_ZONA', $id_poly_zona);
+                $npwp = $npwp->whereIn('ID_POLY_ZONA', $id_poly_zona);
             }
-            $data = $data->getCompiledSelect();
 
-            $dataRet = $db->newQuery()
+            $npwp = $npwp->getCompiledSelect();
-                ->select("A.TGL, B.JML")
-                ->from("(" . $generateTgl . ") A")
-                ->join("(" . $data . ") B", "A.TGL = B.TGL", 'left')
-                ->orderBy("TGL");
 
-            return $KpdlLibrary->single_array($dataRet->get()->getResult(), 'JML');
+            $data = $db->table('BULAN A')
-        }
+                ->select("A.KODE as BULAN, C.JML")
-    }
+                ->join("(" . $npwp . ") C", 'A.KODE = C.BULAN', 'left')
+                ->orderBy('BULAN');
+
+            $KpdlLibrary = new KpdlLibrary;
+
+            return $KpdlLibrary->single_array($data->get()->getResult(), 'JML');
 
-    protected function generateSeries($bulan)
-    {
-        $db          = \Config\Database::connect();
-        $tgl_format  = date('Y') . '-' . $bulan . '-' . '01';
-        $generateTgl = $db->query("SELECT TO_CHAR(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD')) - level + 1,'DD') AS TGL
-                    FROM
-                    dual
-                    CONNECT BY LEVEL <= (trunc(LAST_DAY(to_date('" . $tgl_format . "','YYYY-MM-DD'))) - to_date('" . $tgl_format . "','YYYY-MM-DD')  + 1) ORDER BY TGL");
-
-        $data     = $generateTgl->getResult();
-        $data_arr = [];
-        foreach ($data as $row) {
-            array_push($data_arr, $row->TGL);
         }
-        return $data_arr;
     }
-
 }

app/Views/kewilayahan/dist/kpdl.js

@@ -61860,15 +61860,21 @@ const Pembayaran = ({
       }]
     };
   };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     ref: refChart,
     highcharts: (highcharts_default()),
     options: optionsChart(dataC, "s.d. bulan ini", "C")
-  })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     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()), {
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     ref: refChart2,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")
@@ -62036,15 +62042,21 @@ const PayComp = ({
       }]
     };
   };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     ref: refChart,
     highcharts: (highcharts_default()),
     options: optionsChart(dataC, "s.d. bulan ini", "C")
-  })), /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     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()), {
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "4"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
     ref: refChart2,
     highcharts: (highcharts_default()),
     options: optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")
@@ -62372,7 +62384,7 @@ const Pengampu = ({
         }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP"
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total lokasi KPDL"
       },
       accessibility: {
         point: {
@@ -62414,6 +62426,182 @@ const Pengampu = ({
   }))));
 };
 /* harmony default export */ const componentProgresifitas_Pengampu = (Pengampu);
+;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
+
+
+
+
+
+
+const SPTTahunan = ({
+  dataSend
+}) => {
+  const base_url = "<?=base_url()?>";
+  const refChart = (0,react.useRef)(null);
+  const [data, setData] = (0,react.useState)(null);
+  (0,react.useEffect)(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranSPTTahunan",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: data => {
+        setData(data.data);
+      }
+    });
+  }, [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 yang ada"
+      },
+      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, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart,
+    highcharts: (highcharts_default()),
+    options: optionsChart(data, "SPT Tahunan")
+  }))));
+};
+/* harmony default export */ const componentProgresifitas_SPTTahunan = (SPTTahunan);
+;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/componentProgresifitas/KLU.js
+
+
+
+
+
+
+const KLU = ({
+  dataSend
+}) => {
+  const base_url = "<?=base_url()?>";
+  const refChart = (0,react.useRef)(null);
+  const refChart1 = (0,react.useRef)(null);
+  const refChart2 = (0,react.useRef)(null);
+  const [dataKluTerdaftar, setDataKluTerdaftar] = (0,react.useState)(null);
+  const [dataKluYgBayar, setDataKluYgbayar] = (0,react.useState)(null);
+  const [dataRupiahBayar, setDataRupiahBayar] = (0,react.useState)(null);
+  (0,react.useEffect)(() => {
+    jQuery.get({
+      url: base_url + "kewilayahan/kytp/sebaranKLU",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend
+      },
+      success: resp => {
+        setDataKluTerdaftar(resp.dataKluTerdaftar);
+        setDataKluYgbayar(resp.dataKluYgBayar);
+        setDataRupiahBayar(resp.dataRupiahBayar);
+      }
+    });
+  }, [dataSend]);
+  const optionsChart = (data, title, attribute1) => {
+    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 " + attribute1
+      },
+      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(dataKluTerdaftar, "KLU Terdaftar", "NPWP")
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "6"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart1,
+    highcharts: (highcharts_default()),
+    options: optionsChart(dataKluYgBayar, "KLU Yang Bayar", "NPWP")
+  })), /*#__PURE__*/react.createElement(es_Col, {
+    md: "12"
+  }, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart2,
+    highcharts: (highcharts_default()),
+    options: optionsChart(dataRupiahBayar, "Dominasi KLU berdarkan Jumlah Bayar", "Keseluruhan Pembayaran")
+  }))));
+};
+/* harmony default export */ const componentProgresifitas_KLU = (KLU);
 ;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/TabProgresifitas.js
 
 
@@ -62424,6 +62612,8 @@ const Pengampu = ({
 
 
 
+
+
 function TabProgresifitas({
   dataSend
 }) {
@@ -62462,32 +62652,314 @@ function TabProgresifitas({
   })), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_5",
     header: "SPT Tahunan"
-  }, /*#__PURE__*/react.createElement(componentProgresifitas_Pengampu, {
+  }, /*#__PURE__*/react.createElement(componentProgresifitas_SPTTahunan, {
     dataSend: dataSend
   })), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_6",
     header: "KLU"
-  })));
+  }, /*#__PURE__*/react.createElement(componentProgresifitas_KLU, {
+    dataSend: dataSend
+  }))));
+}
+;// CONCATENATED MODULE: ./node_modules/primereact/badge/badge.esm.js
+'use client';
+
+
+
+
+
+
+function badge_esm_typeof(o) {
+  "@babel/helpers - typeof";
+
+  return badge_esm_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, badge_esm_typeof(o);
+}
+
+function badge_esm_toPrimitive(input, hint) {
+  if (badge_esm_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (badge_esm_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function badge_esm_toPropertyKey(arg) {
+  var key = badge_esm_toPrimitive(arg, "string");
+  return badge_esm_typeof(key) === "symbol" ? key : String(key);
+}
+
+function badge_esm_defineProperty(obj, key, value) {
+  key = badge_esm_toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
 }
+
+var badge_esm_classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return utils_esm_classNames('p-badge p-component', badge_esm_defineProperty({
+      'p-badge-no-gutter': utils_esm_ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+      'p-badge-dot': utils_esm_ObjectUtils.isEmpty(props.value),
+      'p-badge-lg': props.size === 'large',
+      'p-badge-xl': props.size === 'xlarge'
+    }, "p-badge-".concat(props.severity), props.severity !== null));
+  }
+};
+var badge_esm_styles = "\n@layer primereact {\n    .p-badge {\n        display: inline-block;\n        border-radius: 10px;\n        text-align: center;\n        padding: 0 .5rem;\n    }\n    \n    .p-overlay-badge {\n        position: relative;\n    }\n    \n    .p-overlay-badge .p-badge {\n        position: absolute;\n        top: 0;\n        right: 0;\n        transform: translate(50%,-50%);\n        transform-origin: 100% 0;\n        margin: 0;\n    }\n    \n    .p-badge-dot {\n        width: .5rem;\n        min-width: .5rem;\n        height: .5rem;\n        border-radius: 50%;\n        padding: 0;\n    }\n    \n    .p-badge-no-gutter {\n        padding: 0;\n        border-radius: 50%;\n    }\n}\n";
+var badge_esm_BadgeBase = ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'Badge',
+    __parentMetadata: null,
+    value: null,
+    severity: null,
+    size: null,
+    style: null,
+    className: null,
+    children: undefined
+  },
+  css: {
+    classes: badge_esm_classes,
+    styles: badge_esm_styles
+  }
+});
+
+function badge_esm_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function badge_esm_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? badge_esm_ownKeys(Object(t), !0).forEach(function (r) { badge_esm_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : badge_esm_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var badge_esm_Badge = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = react.useContext(PrimeReactContext);
+  var props = badge_esm_BadgeBase.getProps(inProps, context);
+  var _BadgeBase$setMetaDat = badge_esm_BadgeBase.setMetaData(badge_esm_objectSpread({
+      props: props
+    }, props.__parentMetadata)),
+    ptm = _BadgeBase$setMetaDat.ptm,
+    cx = _BadgeBase$setMetaDat.cx,
+    isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
+  useHandleStyle(badge_esm_BadgeBase.css.styles, isUnstyled, {
+    name: 'badge'
+  });
+  var elementRef = react.useRef(null);
+  react.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      getElement: function getElement() {
+        return elementRef.current;
+      }
+    };
+  });
+  var rootProps = mergeProps({
+    ref: elementRef,
+    style: props.style,
+    className: utils_esm_classNames(props.className, cx('root'))
+  }, badge_esm_BadgeBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/react.createElement("span", rootProps, props.value);
+}));
+badge_esm_Badge.displayName = 'Badge';
+
+
+
+;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/componentProgresifitas/ChartKPDL.js
+
+
+
+
+
+
+
+
+
+
+
+const ChartKpdl = ({
+  dataSend
+}) => {
+  const base_url = "<?=base_url()?>";
+  const refChart = (0,react.useRef)(null);
+  const [data, setData] = (0,react.useState)({
+    kpdl: [],
+    akum: [],
+    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+  });
+  const [selectedBulan, setSelectedBulan] = (0,react.useState)("semua");
+  (0,react.useEffect)(() => {
+    jquery_default().get({
+      url: base_url + "kewilayahan/kytp/identifikasiLapangan",
+      dataType: "json",
+      type: "POST",
+      data: {
+        ...dataSend,
+        bulan: selectedBulan
+      },
+      success: data => {
+        setData(data);
+      }
+    });
+  }, [dataSend, selectedBulan]);
+  const optionsChart1 = () => {
+    return {
+      chart: {
+        zoomType: "xy",
+        height: "320pt"
+      },
+      title: {
+        text: "",
+        align: "left"
+      },
+      subtitle: {
+        align: "left"
+      },
+      xAxis: [{
+        categories: data.categories,
+        crosshair: true
+      }],
+      yAxis: [{
+        labels: {
+          style: {
+            color: highcharts_default().getOptions().colors[2]
+          }
+        },
+        title: {
+          text: "Lokasi KPDL",
+          style: {
+            color: highcharts_default().getOptions().colors[2]
+          }
+        },
+        opposite: true
+      }, {
+        title: {
+          text: "Lokasi KPDL s.d.",
+          style: {
+            color: highcharts_default().getOptions().colors[0]
+          }
+        },
+        labels: {
+          style: {
+            color: highcharts_default().getOptions().colors[0]
+          }
+        },
+        opposite: true
+      }],
+      tooltip: {
+        shared: true
+      },
+      legend: {
+        layout: "horizontal",
+        align: "center",
+        verticalAlign: "top",
+        backgroundColor: (highcharts_default()).defaultOptions.legend.backgroundColor ||
+        // theme
+        "rgba(255,255,255,0.25)"
+      },
+      //   plotOptions: {
+      //     // series: hijau_klik_series
+      //   },
+      series: [{
+        name: "Lokasi KPDL",
+        type: "column",
+        yAxis: 0,
+        color: highcharts_default().getOptions().colors[2],
+        data: data.kpdl,
+        marker: {
+          enabled: true
+        },
+        tooltip: {
+          valueSuffix: " Kpdl"
+        }
+      }, {
+        name: "Lokasi KPDL akumulasi",
+        type: "spline",
+        yAxis: 1,
+        data: data.akum,
+        marker: {
+          enabled: true
+        },
+        tooltip: {
+          valueSuffix: " data"
+        },
+        visible: false
+      }]
+    };
+  };
+  const refBulanOnClick = e => {
+    const kodeBulan = e.target.dataset.value;
+    console.log(kodeBulan);
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, {
+    md: "12"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "d-flex justify-content-start "
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-2"
+  }, "Bulan :"), /*#__PURE__*/react.createElement(badge_esm_Badge, {
+    value: "semua",
+    id: "semua",
+    severity: "warning",
+    className: "ref_bulan_a cursor-pointer mr-10",
+    onClick: e => refBulanOnClick(e)
+  }), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((val, idx) => {
+    return /*#__PURE__*/react.createElement(badge_esm_Badge, {
+      id: idx,
+      "data-value": val,
+      severity: "warning",
+      value: val,
+      className: "ref_bulan_a cursor-pointer mr-10",
+      onClick: e => refBulanOnClick(e)
+    });
+  })))), /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, null, /*#__PURE__*/react.createElement((highcharts_react_min_default()), {
+    ref: refChart,
+    highcharts: (highcharts_default()),
+    options: optionsChart1()
+  }))));
+};
+/* harmony default export */ const ChartKPDL = (ChartKpdl);
 ;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/TabPenugasan.js
 
 
-function TabPenugasan({
+
+
+const TabPenugasan = ({
   dataSend
-}) {
+}) => {
-  return /*#__PURE__*/react.createElement("div", {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Card, null, /*#__PURE__*/react.createElement(es_CardBody, {
-    className: "card"
+    className: ""
-  }, /*#__PURE__*/react.createElement(TabView, null, /*#__PURE__*/react.createElement(TabPanel, {
+  }, /*#__PURE__*/react.createElement(TabView, {
+    className: "p-1",
+    pt: {
+      panelContainer: {
+        className: "p-1"
+      }
+    }
+  }, /*#__PURE__*/react.createElement(TabPanel, {
+    className: "p-",
     id: "tab_1",
-    header: "Identifikasi Lapangan (KPDL)"
+    header: "Identifikasi Lapangan (KPDL/MATOA)"
-  }), /*#__PURE__*/react.createElement(TabPanel, {
+  }, /*#__PURE__*/react.createElement(ChartKPDL, {
+    dataSend: dataSend
+  })), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_2",
     header: "Aktifitas pasca identifikasi"
   }), /*#__PURE__*/react.createElement(TabPanel, {
     id: "tab_3",
     header: "Hasil"
-  })));
+  })))));
-}
+};
+/* harmony default export */ const kytp_TabPenugasan = (TabPenugasan);
 ;// CONCATENATED MODULE: ./app/Views/kewilayahan/kytp/kpdl.js
 
 
@@ -63135,9 +63607,9 @@ const Root = () => {
     dataSend: dataSend
   }))))), /*#__PURE__*/react.createElement(es_Row, null, /*#__PURE__*/react.createElement(es_Col, {
     sm: "12"
-  }, /*#__PURE__*/react.createElement(es_Card, null, /*#__PURE__*/react.createElement(es_CardBody, null, /*#__PURE__*/react.createElement(TabPenugasan, {
+  }, /*#__PURE__*/react.createElement(kytp_TabPenugasan, {
     dataSend: dataSend
-  }))))), /*#__PURE__*/react.createElement(Toast, {
+  }))), /*#__PURE__*/react.createElement(Toast, {
     ref: toast
   }));
 };

app/Views/kewilayahan/kytp/TabPenugasan.js

@@ -1,14 +1,24 @@
 import React, { useState } from "react"
 import { TabView, TabPanel } from "primereact/tabview"
+import { Card, CardBody } from "reactstrap"
+import ChartKpdl from "./componentProgresifitas/ChartKPDL"
 
-export default function TabPenugasan({ dataSend }) {
+const TabPenugasan = ({ dataSend }) => {
   return (
-    <div className="card">
+    <>
-      <TabView>
+      <Card>
-        <TabPanel id="tab_1" header="Identifikasi Lapangan (KPDL)"></TabPanel>
+        <CardBody className="">
-        <TabPanel id="tab_2" header="Aktifitas pasca identifikasi"></TabPanel>
+          <TabView className="p-1" pt={{ panelContainer: { className: "p-1" } }}>
-        <TabPanel id="tab_3" header="Hasil"></TabPanel>
+            <TabPanel className="p-" id="tab_1" header="Identifikasi Lapangan (KPDL/MATOA)">
-      </TabView>
+              <ChartKpdl dataSend={dataSend} />
-    </div>
+            </TabPanel>
+            <TabPanel id="tab_2" header="Aktifitas pasca identifikasi"></TabPanel>
+            <TabPanel id="tab_3" header="Hasil"></TabPanel>
+          </TabView>
+        </CardBody>
+      </Card>
+    </>
   )
 }
+
+export default TabPenugasan

app/Views/kewilayahan/kytp/TabProgresifitas.js

@@ -7,6 +7,8 @@ import PayComp from "./componentProgresifitas/PayComp"
 import Sof from "./componentProgresifitas/Sof"
 import JenisStatusWp from "./componentProgresifitas/JenisStatusWp"
 import Pengampu from "./componentProgresifitas/Pengampu"
+import SPTTahunan from "./componentProgresifitas/SPTTahunan"
+import KLU from "./componentProgresifitas/KLU"
 
 export default function TabProgresifitas({ dataSend }) {
   return (
@@ -38,9 +40,11 @@ export default function TabProgresifitas({ dataSend }) {
           <Pengampu dataSend={dataSend} />
         </TabPanel>
         <TabPanel id="tab_5" header="SPT Tahunan">
-          <Pengampu dataSend={dataSend} />
+          <SPTTahunan dataSend={dataSend} />
+        </TabPanel>
+        <TabPanel id="tab_6" header="KLU">
+          <KLU dataSend={dataSend} />
         </TabPanel>
-        <TabPanel id="tab_6" header="KLU"></TabPanel>
       </TabView>
     </div>
   )

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

@@ -82,13 +82,13 @@ const PayComp = ({ dataSend }) => {
   return (
     <>
       <Row>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
         </Col>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
         </Col>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
         </Col>
       </Row>

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

@@ -82,13 +82,13 @@ const Pembayaran = ({ dataSend }) => {
   return (
     <>
       <Row>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, "s.d. bulan ini", "C")} />
         </Col>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, "s.d. bulan lalu", "Min1")} />
         </Col>
-        <Col>
+        <Col md="4">
           <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, "s.d. 2 bulan yang lalu", "Min2")} />
         </Col>
       </Row>

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

@@ -44,7 +44,7 @@ const Pengampu = ({ dataSend }) => {
         style: { fontSize: "10px" }
       },
       tooltip: {
-        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total NPWP"
+        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total lokasi KPDL"
       },
       accessibility: {
         point: {

app/Views/kewilayahan/kytp/kpdl.js

@@ -662,11 +662,7 @@ const Root = () => {
       </Row>
       <Row>
         <Col sm="12">
-          <Card>
+          <TabPenugasan dataSend={dataSend} />
-            <CardBody>
-              <TabPenugasan dataSend={dataSend} />
-            </CardBody>
-          </Card>
         </Col>
       </Row>
       <Toast ref={toast} />

app/Views/kewilayahan/kytp/kpdl.php

@@ -1,5 +1,9 @@
 
-
+<style>
+    .highcharts-credits{
+        visibility: hidden;
+    }
+</style>
 <div class="main-content">
     <div class="container-fluid">
         <div id="app"></div>