diff --git a/app/Controllers/Kewilayahan/Kytp.php b/app/Controllers/Kewilayahan/Kytp.php
index 04213e8b..625d9b53 100644
--- a/app/Controllers/Kewilayahan/Kytp.php
+++ b/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;
 
@@ -100,7 +103,7 @@ class Kytp extends Controller
 
     public function sebaranPengampu()
     {
-
+        ini_set('max_input_vars', 3000);
         $sebaran                = new Pengampu;
         $dataReturn['assign']   = $sebaran->data($this->request, 'assign');
         $dataReturn['unassign'] = $sebaran->data($this->request, 'unassign');
@@ -108,9 +111,72 @@ class Kytp extends Controller
         return $this->respond($dataReturn, 200);
     }
 
-    private function get_poi_agg()
+    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->getPost('bulan') ?? 'semua';
+        $dataReturn['kpdl'] = $sebaran->dataKpdl($this->request, $bulan);
+
+        $dataReturn['categories'] = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
+        if ($bulan == 'semua') {
+            $dataReturn['categories'] = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
+        } else {
+            $dataReturn['categories'] = $sebaran->generateSeries($bulan);
+        }
+
+        $arr_data_akum_dikenali = array();
+        $nilai_akum             = 0;
+        foreach ($dataReturn['kpdl'] as $data) {
+            $nilai_akum += $data;
+            array_push($arr_data_akum_dikenali, $nilai_akum);
+        }
+        $c_arr                       = count($arr_data_akum_dikenali) - 1;
+        $arr_data_akum_dikenali_temp = $arr_data_akum_dikenali;
+        for ($i = $c_arr; $i > 0; $i--) {
+            if ($arr_data_akum_dikenali[$i] == $arr_data_akum_dikenali[$i - 1]) {
+                $arr_data_akum_dikenali_temp[$i] = 0;
+            } else {
+                break;
+            }
+        }
+        $dataReturn['akum'] = $arr_data_akum_dikenali_temp;
+
+        return $this->respond($dataReturn, 200);
+    }
+
+    public function getBulan()
+    {
+        $bulan = ['semua', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        return $this->respond($bulan, 200);
+
+    }
+
+    private function get_poi_agg()
+    {
+        ini_set('max_input_vars', 3000);
         $opsiWilZona  = $this->request->getPost('opsiWilZona') ?? null;
         $adm4_pcode   = $this->request->getPost('adm4_pcode') ?? [];
         $id_poly_zona = $this->request->getPost('id_poly_zona') ?? [];
diff --git a/app/Controllers/Kewilayahan/Ref.php b/app/Controllers/Kewilayahan/Ref.php
index e9025233..168c4a06 100644
--- a/app/Controllers/Kewilayahan/Ref.php
+++ b/app/Controllers/Kewilayahan/Ref.php
@@ -133,4 +133,4 @@ class Ref extends Controller
         return array_change_key_case($arr, CASE_LOWER);
     }
 
-}
\ No newline at end of file
+}
diff --git a/app/Controllers/Kewilayahan/Sebaran/Pengampu.php b/app/Controllers/Kewilayahan/Sebaran/Pengampu.php
index 6fa40300..4f78de5f 100644
--- a/app/Controllers/Kewilayahan/Sebaran/Pengampu.php
+++ b/app/Controllers/Kewilayahan/Sebaran/Pengampu.php
@@ -6,22 +6,22 @@ class Pengampu extends \App\Controllers\Kewilayahan\Kytp
 {
     protected function data($request, $jenis)
     {
+        ini_set('max_input_vars', 3000);
         $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("NM_KPP_ADM, count(1) JML", false)
-            ->groupBy("NM_KPP_ADM")->orderBy("JML", 'desc');
-        $kolom = "JNS_WP_MFWP";
+        $npwp = $db->table('KPDL_MV_LOKASI_SUBJEK')->select("NM_KANTOR_PENGAMPU, count(1) JML", false)
+            ->groupBy("NM_KANTOR_PENGAMPU")->orderBy("JML", 'desc');
 
         switch ($jenis) {
             case 'assign':
 
                 break;
             case 'unassign':
-                $npwp = $npwp->where("NIP_AR_PENGAMPU", "NPWP TIDAK DITEMUKAN");
+                $npwp = $npwp->where("NM_KANTOR_PENGAMPU", "NPWP TIDAK DITEMUKAN");
                 break;
             default:
 
@@ -42,7 +42,7 @@ class Pengampu extends \App\Controllers\Kewilayahan\Kytp
 
         foreach ($data as $b) {
 
-            array_push($ret, ['name' => $b->NM_KPP_ADM,
+            array_push($ret, ['name' => $b->NM_KANTOR_PENGAMPU,
                 // 'color'                  => ,
                 'y'                      => floatval($b->JML),
             ]
diff --git a/app/Views/kewilayahan/dist/kpdl.js b/app/Views/kewilayahan/dist/kpdl.js
index f689e8cc..135d83fb 100644
--- a/app/Views/kewilayahan/dist/kpdl.js
+++ b/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
 }) {
@@ -62459,30 +62649,323 @@ function TabProgresifitas({
     header: "Pengampu"
   }, /*#__PURE__*/react.createElement(componentProgresifitas_Pengampu, {
     dataSend: dataSend
+  })), /*#__PURE__*/react.createElement(TabPanel, {
+    id: "tab_5",
+    header: "SPT Tahunan"
+  }, /*#__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");
+  const [bulan, setBulan] = (0,react.useState)([]);
+  (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]);
+  (0,react.useEffect)(() => {
+    jquery_default().get({
+      url: base_url + "kewilayahan/kytp/getBulan",
+      dataType: "json",
+      type: "GET",
+      success: data => {
+        setBulan(data);
+      }
+    });
+  }, []);
+  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);
+    setSelectedBulan(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-between "
+  }, /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("span", {
+    className: "mr-2"
+  }, "Bulan :"), bulan.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("div", null, /*#__PURE__*/react.createElement("span", null, "Bulan terpilih : "), /*#__PURE__*/react.createElement("span", null, selectedBulan))))), /*#__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", {
-    className: "card"
-  }, /*#__PURE__*/react.createElement(TabView, null, /*#__PURE__*/react.createElement(TabPanel, {
+}) => {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(es_Card, null, /*#__PURE__*/react.createElement(es_CardBody, {
+    className: ""
+  }, /*#__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)"
-  }), /*#__PURE__*/react.createElement(TabPanel, {
+    header: "Identifikasi Lapangan (KPDL/MATOA)"
+  }, /*#__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
 
 
@@ -62623,11 +63106,11 @@ const Root = () => {
     }
   }, [kecSelected]);
   (0,react.useEffect)(() => {
-    setKpp([]);
+    setKpp(null);
     setSeksi([]);
     setAr([]);
     setZp([]);
-    setKppSelected([]);
+    setKppSelected(null);
     setSeksiSelected([]);
     setArSelected([]);
     setZpSelected([]);
@@ -62654,7 +63137,8 @@ const Root = () => {
     setArSelected([]);
     setZpSelected([]);
     if (kppSelected && !isObjEmpty(kppSelected)) {
-      const kpp = dist_default()(kppSelected).pluck("value").all();
+      // const kpp = collect(kppSelected).pluck("value").all()
+      const kpp = [kppSelected.value];
       jquery_default().ajax({
         url: base_url + "kewilayahan/ref/zpseksi",
         method: "GET",
@@ -62674,7 +63158,7 @@ const Root = () => {
     setArSelected([]);
     setZpSelected([]);
     if (seksiSelected && !isObjEmpty(seksiSelected)) {
-      const kpp = dist_default()(kppSelected).pluck("value").all();
+      const kpp = [kppSelected.value];
       const seksi = dist_default()(seksiSelected).pluck("value").all();
       jquery_default().ajax({
         url: base_url + "kewilayahan/ref/zpar",
@@ -62694,7 +63178,7 @@ const Root = () => {
     setZp([]);
     setZpSelected([]);
     if (arSelected && !isObjEmpty(arSelected)) {
-      const kpp = dist_default()(kppSelected).pluck("value").all();
+      const kpp = kppSelected.value;
       const seksi = dist_default()(seksiSelected).pluck("value").all();
       const ar = dist_default()(arSelected).pluck("value").all();
       jquery_default().ajax({
@@ -63020,8 +63504,9 @@ const Root = () => {
     onChange: e => {
       setKanwilSelected(e);
     },
-    classNamePrefix: "select",
-    defaultValue: kanwilSelected,
+    classNamePrefix: "select"
+    // defaultValue={kanwilSelected}
+    ,
     value: kanwilSelected,
     isClearable: false,
     options: kanwil
@@ -63030,20 +63515,18 @@ const Root = () => {
   }, /*#__PURE__*/react.createElement(es_Label, {
     className: "form-label",
     for: "Pilih KPP"
-  }, "KPP"), /*#__PURE__*/react.createElement(je, {
-    className: "me-1 w-full",
-    hasSelectAll: true,
-    debounceDuration: 300,
-    options: kpp,
-    value: kppSelected,
+  }, "KPP"), /*#__PURE__*/react.createElement(StateManagedSelect$1, {
+    placeholder: "Pilih KPP",
+    className: "basic-single w-100",
     onChange: e => {
       setKppSelected(e);
     },
-    labelledBy: "Pilih KPP",
-    overrideStrings: {
-      allItemsAreSelected: "Semua dipilih",
-      selectSomeItems: "Pilih KPP"
-    }
+    classNamePrefix: "select"
+    // defaultValue={kanwilSelected}
+    ,
+    value: kppSelected,
+    isClearable: false,
+    options: kpp
   })), /*#__PURE__*/react.createElement(es_Col, {
     md: "2"
   }, /*#__PURE__*/react.createElement(es_Label, {
@@ -63130,9 +63613,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
   }));
 };
diff --git a/app/Views/kewilayahan/kytp/TabPenugasan.js b/app/Views/kewilayahan/kytp/TabPenugasan.js
index 88b0349a..dbff21a8 100644
--- a/app/Views/kewilayahan/kytp/TabPenugasan.js
+++ b/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>
-        <TabPanel id="tab_1" header="Identifikasi Lapangan (KPDL)"></TabPanel>
-        <TabPanel id="tab_2" header="Aktifitas pasca identifikasi"></TabPanel>
-        <TabPanel id="tab_3" header="Hasil"></TabPanel>
-      </TabView>
-    </div>
+    <>
+      <Card>
+        <CardBody className="">
+          <TabView className="p-1" pt={{ panelContainer: { className: "p-1" } }}>
+            <TabPanel className="p-" id="tab_1" header="Identifikasi Lapangan (KPDL/MATOA)">
+              <ChartKpdl dataSend={dataSend} />
+            </TabPanel>
+            <TabPanel id="tab_2" header="Aktifitas pasca identifikasi"></TabPanel>
+            <TabPanel id="tab_3" header="Hasil"></TabPanel>
+          </TabView>
+        </CardBody>
+      </Card>
+    </>
   )
 }
+
+export default TabPenugasan
diff --git a/app/Views/kewilayahan/kytp/TabProgresifitas.js b/app/Views/kewilayahan/kytp/TabProgresifitas.js
index 164c9396..1a98433a 100644
--- a/app/Views/kewilayahan/kytp/TabProgresifitas.js
+++ b/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 (
@@ -37,7 +39,12 @@ export default function TabProgresifitas({ dataSend }) {
         <TabPanel id="tab_5" header="Pengampu">
           <Pengampu dataSend={dataSend} />
         </TabPanel>
-        <TabPanel id="tab_6" header="KLU"></TabPanel>
+        <TabPanel id="tab_5" header="SPT Tahunan">
+          <SPTTahunan dataSend={dataSend} />
+        </TabPanel>
+        <TabPanel id="tab_6" header="KLU">
+          <KLU dataSend={dataSend} />
+        </TabPanel>
       </TabView>
     </div>
   )
diff --git a/app/Views/kewilayahan/kytp/componentProgresifitas/PayComp.js b/app/Views/kewilayahan/kytp/componentProgresifitas/PayComp.js
index b14a541f..4edf9267 100644
--- a/app/Views/kewilayahan/kytp/componentProgresifitas/PayComp.js
+++ b/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>
diff --git a/app/Views/kewilayahan/kytp/componentProgresifitas/Pembayaran.js b/app/Views/kewilayahan/kytp/componentProgresifitas/Pembayaran.js
index 7480e6d1..5f309d95 100644
--- a/app/Views/kewilayahan/kytp/componentProgresifitas/Pembayaran.js
+++ b/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>
diff --git a/app/Views/kewilayahan/kytp/componentProgresifitas/Pengampu.js b/app/Views/kewilayahan/kytp/componentProgresifitas/Pengampu.js
index 63574d91..5dd6abc2 100644
--- a/app/Views/kewilayahan/kytp/componentProgresifitas/Pengampu.js
+++ b/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: {
diff --git a/app/Views/kewilayahan/kytp/kpdl.js b/app/Views/kewilayahan/kytp/kpdl.js
index 898e7caf..663f24d5 100644
--- a/app/Views/kewilayahan/kytp/kpdl.js
+++ b/app/Views/kewilayahan/kytp/kpdl.js
@@ -131,11 +131,11 @@ const Root = () => {
   }, [kecSelected])
 
   useEffect(() => {
-    setKpp([])
+    setKpp(null)
     setSeksi([])
     setAr([])
     setZp([])
-    setKppSelected([])
+    setKppSelected(null)
     setSeksiSelected([])
     setArSelected([])
     setZpSelected([])
@@ -161,7 +161,8 @@ const Root = () => {
     setArSelected([])
     setZpSelected([])
     if (kppSelected && !isObjEmpty(kppSelected)) {
-      const kpp = collect(kppSelected).pluck("value").all()
+      // const kpp = collect(kppSelected).pluck("value").all()
+      const kpp = [kppSelected.value]
       jQuery.ajax({
         url: base_url + "kewilayahan/ref/zpseksi",
         method: "GET",
@@ -180,7 +181,7 @@ const Root = () => {
     setArSelected([])
     setZpSelected([])
     if (seksiSelected && !isObjEmpty(seksiSelected)) {
-      const kpp = collect(kppSelected).pluck("value").all()
+      const kpp = [kppSelected.value]
       const seksi = collect(seksiSelected).pluck("value").all()
 
       jQuery.ajax({
@@ -199,7 +200,7 @@ const Root = () => {
     setZp([])
     setZpSelected([])
     if (arSelected && !isObjEmpty(arSelected)) {
-      const kpp = collect(kppSelected).pluck("value").all()
+      const kpp = kppSelected.value
       const seksi = collect(seksiSelected).pluck("value").all()
       const ar = collect(arSelected).pluck("value").all()
       jQuery.ajax({
@@ -535,7 +536,7 @@ const Root = () => {
                           setKanwilSelected(e)
                         }}
                         classNamePrefix="select"
-                        defaultValue={kanwilSelected}
+                        // defaultValue={kanwilSelected}
                         value={kanwilSelected}
                         isClearable={false}
                         options={kanwil}
@@ -545,7 +546,19 @@ const Root = () => {
                       <Label className="form-label" for="Pilih KPP">
                         KPP
                       </Label>
-                      <MultiSelect
+                      <Select
+                        placeholder="Pilih KPP"
+                        className="basic-single w-100"
+                        onChange={(e) => {
+                          setKppSelected(e)
+                        }}
+                        classNamePrefix="select"
+                        // defaultValue={kanwilSelected}
+                        value={kppSelected}
+                        isClearable={false}
+                        options={kpp}
+                      />
+                      {/* <MultiSelect
                         className="me-1 w-full"
                         hasSelectAll={true}
                         debounceDuration={300}
@@ -556,7 +569,7 @@ const Root = () => {
                         }}
                         labelledBy="Pilih KPP"
                         overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih KPP" }}
-                      />
+                      /> */}
                     </Col>
                     <Col md="2">
                       <Label className="form-label" for="Pilih Seksi">
@@ -649,11 +662,7 @@ const Root = () => {
       </Row>
       <Row>
         <Col sm="12">
-          <Card>
-            <CardBody>
-              <TabPenugasan dataSend={dataSend} />
-            </CardBody>
-          </Card>
+          <TabPenugasan dataSend={dataSend} />
         </Col>
       </Row>
       <Toast ref={toast} />
diff --git a/app/Views/kewilayahan/kytp/kpdl.php b/app/Views/kewilayahan/kytp/kpdl.php
index 699c620a..08c86ef8 100644
--- a/app/Views/kewilayahan/kytp/kpdl.php
+++ b/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>
diff --git a/app/Views/kewilayahan/kytp/readme.txt b/app/Views/kewilayahan/kytp/readme.txt
index 65ecc262..500a640c 100644
--- a/app/Views/kewilayahan/kytp/readme.txt
+++ b/app/Views/kewilayahan/kytp/readme.txt
@@ -13,3 +13,8 @@ jalankan perintah : npx webpack
 untuk dev : npx webpack --watch
 
 config ada webapack.config.js 
+
+
+dalam membentuk table yang harus diperhatikan adalah tabel zona pengawasan (KPDL_ZP_NAS_DIFF) : 
+    - pastikan tidak ada polygon yang saling crossing / intersect karena  dapat menyebabkan data KPDL terduplikasi atas beberapa zona pengawasan!!!!!
+    - untuk itu atas polygon yang intersect harus dinormalisasi terlebih dahulu.!!!!