diff --git a/app/Views/kewilayahan/dist/kpdl.js b/app/Views/kewilayahan/dist/kpdl.js
index e02f3666..5d392aef 100644
--- a/app/Views/kewilayahan/dist/kpdl.js
+++ b/app/Views/kewilayahan/dist/kpdl.js
@@ -5857,7 +5857,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! highcharts */ \"./node_modules/highcharts/highcharts.js\");\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(highcharts__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! highcharts-react-official */ \"./node_modules/highcharts-react-official/dist/highcharts-react.min.js\");\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Row.js\");\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Col.js\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ \"./app/Views/kewilayahan/kytp/util.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! collect.js */ \"./node_modules/collect.js/dist/index.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(collect_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! primereact/sidebar */ \"./node_modules/primereact/sidebar/sidebar.esm.js\");\n/* harmony import */ var _node_modules_primeflex_primeflex_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../node_modules/primeflex/primeflex.css */ \"./node_modules/primeflex/primeflex.css\");\n/* harmony import */ var mantine_react_table__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! mantine-react-table */ \"./node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js\");\n/* harmony import */ var _mantine_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mantine/core */ \"./node_modules/@mantine/core/esm/Text/Text.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/useInfiniteQuery.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/query-core/build/modern/queryClient.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar relativeTime = __webpack_require__(/*! dayjs/plugin/relativeTime */ \"./node_modules/dayjs/plugin/relativeTime.js\");\nvar customParseFormat = __webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\");\nconst fetchSize = 101;\nconst SPTTahunan = ({\n  dataSend\n}) => {\n  const base_url = '/engineN/';\n  const refChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [data, setData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const [visibleSidebar, setVisibleSidebar] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [query, setQuery] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    jquery__WEBPACK_IMPORTED_MODULE_5___default().get({\n      url: base_url + 'kewilayahan/kytp/sebaranSPTTahunan',\n      dataType: 'json',\n      type: 'POST',\n      data: {\n        ...dataSend\n      },\n      success: data => {\n        setData(data.data);\n      }\n    });\n  }, [dataSend]);\n  const optionsChart = (data, title) => {\n    const total_wp = collect_js__WEBPACK_IMPORTED_MODULE_4___default()(data).sum('y');\n    return {\n      chart: {\n        plotBackgroundColor: null,\n        plotBorderWidth: null,\n        plotShadow: false,\n        type: 'pie',\n        zoomType: 'xy',\n        height: '300'\n      },\n      title: {\n        text: title,\n        style: {\n          fontSize: '10px'\n        }\n      },\n      tooltip: {\n        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + (0,_util__WEBPACK_IMPORTED_MODULE_3__.format_angka)(total_wp) + ' total NPWP yang ada'\n      },\n      accessibility: {\n        point: {\n          valueSuffix: '%'\n        }\n      },\n      plotOptions: {\n        pie: {\n          allowPointSelect: true,\n          cursor: 'pointer',\n          dataLabels: {\n            enabled: true,\n            style: {\n              fontSize: '10px'\n            },\n            format: '{point.name}: <br> {point.percentage:.1f} %'\n          }\n        },\n        series: {\n          cursor: 'pointer',\n          point: {\n            events: {\n              click: function (a) {\n                setQuery(this.key);\n                setVisibleSidebar(true);\n              }\n            }\n          }\n        }\n      },\n      series: [{\n        name: '',\n        data\n      }]\n    };\n  };\n  const TableDetailGraph = ({\n    dataSend,\n    query,\n    tahunBulan\n  }) => {\n    var _data$pages$0$meta$to, _data$pages, _data$pages$, _data$pages$$meta;\n    const tableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const rowVirtualizerInstanceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const [columnFilters, setColumnFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const [globalFilter, setGlobalFilter] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n    const [sorting, setSorting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const base_url = location.protocol + '//' + location.hostname + '/engineN/';\n    const {\n      data,\n      fetchNextPage,\n      isError,\n      isFetching,\n      isLoading\n    } = (0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__.useInfiniteQuery)({\n      queryKey: ['table-data', columnFilters, globalFilter, sorting],\n      queryFn: async ({\n        pageParam = 0\n      }) => {\n        const url = new URL(base_url + 'kewilayahan/sebaran/spttahunan/detail');\n        url.searchParams.set('start', `${pageParam * fetchSize}`);\n        url.searchParams.set('size', `${fetchSize}`);\n        url.searchParams.set('filters', JSON.stringify(columnFilters !== null && columnFilters !== void 0 ? columnFilters : []));\n        url.searchParams.set('globalFilter', globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');\n        url.searchParams.set('sorting', JSON.stringify(sorting !== null && sorting !== void 0 ? sorting : []));\n        const response = await fetch(url.href, {\n          method: 'POST',\n          headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            query,\n            ...dataSend\n          })\n        });\n        const json = await response.json();\n        return json;\n      },\n      getNextPageParam: (_lastGroup, groups) => groups.length,\n      keepPreviousData: true,\n      refetchOnWindowFocus: false\n    });\n    const flatData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n      var _data$pages$flatMap;\n      return (_data$pages$flatMap = data === null || data === void 0 ? void 0 : data.pages.flatMap(page => page.data)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : [];\n    }, [data]);\n    const totalDBRowCount = (_data$pages$0$meta$to = data === null || data === void 0 ? void 0 : (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : (_data$pages$ = _data$pages[0]) === null || _data$pages$ === void 0 ? void 0 : (_data$pages$$meta = _data$pages$.meta) === null || _data$pages$$meta === void 0 ? void 0 : _data$pages$$meta.totalRowCount) !== null && _data$pages$0$meta$to !== void 0 ? _data$pages$0$meta$to : 0;\n    const totalFetched = flatData.length;\n    const fetchMoreOnBottomReached = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(containerRefElement => {\n      if (containerRefElement) {\n        const {\n          scrollHeight,\n          scrollTop,\n          clientHeight\n        } = containerRefElement;\n        //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can\n        if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {\n          fetchNextPage();\n        }\n      }\n    }, [fetchNextPage, isFetching, totalFetched, totalDBRowCount]);\n    const columns = [{\n      accessorKey: 'NPWP',\n      header: 'NPWP',\n      enableClickToCopy: true,\n      size: 150\n    }, {\n      accessorKey: 'NAMA_WP',\n      header: 'Nama'\n    }, {\n      accessorKey: 'ALAMAT_MFWP',\n      header: 'Alamat'\n    }, {\n      accessorKey: 'KELURAHAN_MFWP',\n      header: 'Wil. Adm.',\n      Cell: data => {\n        var _dataRow$KELURAHAN_MF, _dataRow$KECAMATAN_MF, _dataRow$KOTA_MFWP, _dataRow$PROPINSI_MFW;\n        const dataRow = data.row.original;\n        return `${(_dataRow$KELURAHAN_MF = dataRow.KELURAHAN_MFWP) !== null && _dataRow$KELURAHAN_MF !== void 0 ? _dataRow$KELURAHAN_MF : ''} ${(_dataRow$KECAMATAN_MF = dataRow.KECAMATAN_MFWP) !== null && _dataRow$KECAMATAN_MF !== void 0 ? _dataRow$KECAMATAN_MF : ''} ${(_dataRow$KOTA_MFWP = dataRow.KOTA_MFWP) !== null && _dataRow$KOTA_MFWP !== void 0 ? _dataRow$KOTA_MFWP : ''} ${(_dataRow$PROPINSI_MFW = dataRow.PROPINSI_MFWP) !== null && _dataRow$PROPINSI_MFW !== void 0 ? _dataRow$PROPINSI_MFW : ''}`;\n      }\n    }, {\n      accessorKey: 'STATUS_WP_MFWP',\n      header: 'Status WP'\n    }, {\n      accessorKey: 'JNS_WP_MFWP',\n      header: 'Jenis WP'\n    }, {\n      accessorKey: 'NM_KANTOR',\n      header: 'KPP Terdaftar'\n    }, {\n      accessorKey: 'NAMA_AR_MFWP',\n      header: 'AR'\n    }, {\n      accessorKey: 'FLAG_WPS_WPK',\n      header: 'WPS/WPK',\n      size: 100,\n      mantineTableBodyCellProps: {\n        align: 'center'\n      }\n    }, {\n      accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',\n      header: 'Rp',\n      Cell: ({\n        cell\n      }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),\n      mantineTableHeadCellProps: {\n        align: 'right'\n      },\n      mantineTableBodyCellProps: {\n        align: 'right'\n      },\n      size: 100\n    }, {\n      accessorKey: 'KETERANGAN',\n      header: 'SPT'\n    }, {\n      accessorKey: 'TGL_DAFTAR',\n      header: 'Tgl Daftar',\n      Cell: ({\n        cell\n      }) => {\n        return dayjs__WEBPACK_IMPORTED_MODULE_8___default()(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD');\n      }\n    }];\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      if (rowVirtualizerInstanceRef.current) {\n        try {\n          rowVirtualizerInstanceRef.current.scrollToIndex(0);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }, [sorting, columnFilters, globalFilter]);\n\n    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      fetchMoreOnBottomReached(tableContainerRef.current);\n    }, [fetchMoreOnBottomReached]);\n    const table1 = (0,mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.useMantineReactTable)({\n      columns,\n      data: flatData,\n      enablePagination: false,\n      enableRowNumbers: true,\n      enableRowVirtualization: true,\n      //optional, but recommended if it is likely going to be more than 100 rows\n      manualFiltering: true,\n      manualSorting: true,\n      mantineTableContainerProps: {\n        ref: tableContainerRef,\n        //get access to the table container element\n        sx: {\n          maxHeight: '600px'\n        },\n        //give the table a max height\n        onScroll: (event //add an event listener to the table container element\n        ) => fetchMoreOnBottomReached(event.target)\n      },\n      mantineToolbarAlertBannerProps: {\n        color: 'red',\n        children: 'Error loading data'\n      },\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilter,\n      onSortingChange: setSorting,\n      renderBottomToolbarCustomActions: () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mantine_core__WEBPACK_IMPORTED_MODULE_10__.Text, {\n        className: \"text-sm\"\n      }, \"Fetched \", totalFetched, \" of \", totalDBRowCount, \" total rows.\"),\n      state: {\n        columnFilters,\n        globalFilter,\n        isLoading,\n        showAlertBanner: isError,\n        showProgressBars: isFetching,\n        sorting\n      },\n      rowVirtualizerInstanceRef,\n      //get access to the virtualizer instance\n      rowVirtualizerProps: {\n        overscan: 10\n      },\n      mantineTableBodyCellProps: {\n        className: 'p-1 text-xs'\n      },\n      mantineTableBodyProps: {\n        className: 'mb-3'\n      }\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.MantineReactTable, {\n      table: table1\n    });\n  };\n  const queryClient = new _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__.QueryClient();\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default()), {\n    ref: refChart,\n    highcharts: (highcharts__WEBPACK_IMPORTED_MODULE_1___default()),\n    options: optionsChart(data, 'SPT Tahunan')\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    className: \"f-14\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"Berdasarkan kompilasi data KPD Mobile dan pengolahan data-data perpajakan lainnya (KPD Lainnya), daftar Wajib Pajak yang\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"tidak/belum lapor SPT \"), \" agar segera dilakukan \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"aktivitas himbauan\"), \" melalui mekanisme komite kepatuhan (DSP4 dan/atau WRA), oleh:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu WP\"), \" tersebut;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu wilayah\"), \" tersebut dengan mengirimkan LHKPD (data ICALEP) ke unit kerja yang mengadministrasikan kegiatan usaha yang diawasi;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"Input di DRM\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__.Sidebar, {\n    header: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", null, \"Detail Data\")),\n    visible: visibleSidebar,\n    position: \"bottom\",\n    onHide: () => setVisibleSidebar(false),\n    style: {\n      height: 'calc(100vh - 100px)'\n    },\n    blockScroll: true,\n    pt: {\n      header: {\n        className: 'p-1'\n      },\n      closeButton: {\n        style: {\n          width: '2rem',\n          height: '1rem'\n        }\n      }\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__.QueryClientProvider, {\n    client: queryClient\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableDetailGraph, {\n    dataSend: dataSend,\n    query: query\n  }))))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SPTTahunan);\n\n//# sourceURL=webpack://engineN/./app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! highcharts */ \"./node_modules/highcharts/highcharts.js\");\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(highcharts__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! highcharts-react-official */ \"./node_modules/highcharts-react-official/dist/highcharts-react.min.js\");\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Row.js\");\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Col.js\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ \"./app/Views/kewilayahan/kytp/util.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! collect.js */ \"./node_modules/collect.js/dist/index.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(collect_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! primereact/sidebar */ \"./node_modules/primereact/sidebar/sidebar.esm.js\");\n/* harmony import */ var _node_modules_primeflex_primeflex_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../node_modules/primeflex/primeflex.css */ \"./node_modules/primeflex/primeflex.css\");\n/* harmony import */ var mantine_react_table__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! mantine-react-table */ \"./node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js\");\n/* harmony import */ var _mantine_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mantine/core */ \"./node_modules/@mantine/core/esm/Text/Text.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/useInfiniteQuery.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/query-core/build/modern/queryClient.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar relativeTime = __webpack_require__(/*! dayjs/plugin/relativeTime */ \"./node_modules/dayjs/plugin/relativeTime.js\");\nvar customParseFormat = __webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\");\nconst fetchSize = 101;\nconst SPTTahunan = ({\n  dataSend\n}) => {\n  const base_url = '/engineN/';\n  const refChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [data, setData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const [visibleSidebar, setVisibleSidebar] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [query, setQuery] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    jquery__WEBPACK_IMPORTED_MODULE_5___default().get({\n      url: base_url + 'kewilayahan/kytp/sebaranSPTTahunan',\n      dataType: 'json',\n      type: 'POST',\n      data: {\n        ...dataSend\n      },\n      success: data => {\n        setData(data.data);\n      }\n    });\n  }, [dataSend]);\n  const optionsChart = (data, title) => {\n    const total_wp = collect_js__WEBPACK_IMPORTED_MODULE_4___default()(data).sum('y');\n    return {\n      chart: {\n        plotBackgroundColor: null,\n        plotBorderWidth: null,\n        plotShadow: false,\n        type: 'pie',\n        zoomType: 'xy',\n        height: '300'\n      },\n      title: {\n        text: title,\n        style: {\n          fontSize: '10px'\n        }\n      },\n      tooltip: {\n        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + (0,_util__WEBPACK_IMPORTED_MODULE_3__.format_angka)(total_wp) + ' total NPWP yang ada'\n      },\n      accessibility: {\n        point: {\n          valueSuffix: '%'\n        }\n      },\n      plotOptions: {\n        pie: {\n          allowPointSelect: true,\n          cursor: 'pointer',\n          dataLabels: {\n            enabled: true,\n            style: {\n              fontSize: '10px'\n            },\n            format: '{point.name}: <br> {point.percentage:.1f} %'\n          }\n        },\n        series: {\n          cursor: 'pointer',\n          point: {\n            events: {\n              click: function (a) {\n                setQuery(this.key);\n                setVisibleSidebar(true);\n              }\n            }\n          }\n        }\n      },\n      series: [{\n        name: '',\n        data\n      }]\n    };\n  };\n  const TableDetailGraph = ({\n    dataSend,\n    query,\n    tahunBulan\n  }) => {\n    var _data$pages$0$meta$to, _data$pages, _data$pages$, _data$pages$$meta;\n    const tableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const rowVirtualizerInstanceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const [columnFilters, setColumnFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const [globalFilter, setGlobalFilter] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n    const [sorting, setSorting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const base_url = location.protocol + '//' + location.hostname + '/engineN/';\n    const {\n      data,\n      fetchNextPage,\n      isError,\n      isFetching,\n      isLoading\n    } = (0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__.useInfiniteQuery)({\n      queryKey: ['table-data', columnFilters, globalFilter, sorting],\n      queryFn: async ({\n        pageParam = 0\n      }) => {\n        const url = new URL(base_url + 'kewilayahan/sebaran/spttahunan/detail');\n        url.searchParams.set('start', `${pageParam * fetchSize}`);\n        url.searchParams.set('size', `${fetchSize}`);\n        url.searchParams.set('filters', JSON.stringify(columnFilters !== null && columnFilters !== void 0 ? columnFilters : []));\n        url.searchParams.set('globalFilter', globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');\n        url.searchParams.set('sorting', JSON.stringify(sorting !== null && sorting !== void 0 ? sorting : []));\n        const response = await fetch(url.href, {\n          method: 'POST',\n          headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            query,\n            ...dataSend\n          })\n        });\n        const json = await response.json();\n        return json;\n      },\n      getNextPageParam: (_lastGroup, groups) => groups.length,\n      keepPreviousData: true,\n      refetchOnWindowFocus: false\n    });\n    const flatData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n      var _data$pages$flatMap;\n      return (_data$pages$flatMap = data === null || data === void 0 ? void 0 : data.pages.flatMap(page => page.data)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : [];\n    }, [data]);\n    const totalDBRowCount = (_data$pages$0$meta$to = data === null || data === void 0 ? void 0 : (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : (_data$pages$ = _data$pages[0]) === null || _data$pages$ === void 0 ? void 0 : (_data$pages$$meta = _data$pages$.meta) === null || _data$pages$$meta === void 0 ? void 0 : _data$pages$$meta.totalRowCount) !== null && _data$pages$0$meta$to !== void 0 ? _data$pages$0$meta$to : 0;\n    const totalFetched = flatData.length;\n    const fetchMoreOnBottomReached = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(containerRefElement => {\n      if (containerRefElement) {\n        const {\n          scrollHeight,\n          scrollTop,\n          clientHeight\n        } = containerRefElement;\n        //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can\n        if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {\n          fetchNextPage();\n        }\n      }\n    }, [fetchNextPage, isFetching, totalFetched, totalDBRowCount]);\n    const columns = [{\n      accessorKey: 'NPWP',\n      header: 'NPWP',\n      enableClickToCopy: true,\n      size: 150\n    }, {\n      accessorKey: 'NAMA_WP',\n      header: 'Nama'\n    }, {\n      accessorKey: 'ALAMAT_MFWP',\n      header: 'Alamat'\n    }, {\n      accessorKey: 'KELURAHAN_MFWP',\n      header: 'Wil. Adm.',\n      Cell: data => {\n        var _dataRow$KELURAHAN_MF, _dataRow$KECAMATAN_MF, _dataRow$KOTA_MFWP, _dataRow$PROPINSI_MFW;\n        const dataRow = data.row.original;\n        return `${(_dataRow$KELURAHAN_MF = dataRow.KELURAHAN_MFWP) !== null && _dataRow$KELURAHAN_MF !== void 0 ? _dataRow$KELURAHAN_MF : ''} ${(_dataRow$KECAMATAN_MF = dataRow.KECAMATAN_MFWP) !== null && _dataRow$KECAMATAN_MF !== void 0 ? _dataRow$KECAMATAN_MF : ''} ${(_dataRow$KOTA_MFWP = dataRow.KOTA_MFWP) !== null && _dataRow$KOTA_MFWP !== void 0 ? _dataRow$KOTA_MFWP : ''} ${(_dataRow$PROPINSI_MFW = dataRow.PROPINSI_MFWP) !== null && _dataRow$PROPINSI_MFW !== void 0 ? _dataRow$PROPINSI_MFW : ''}`;\n      }\n    }, {\n      accessorKey: 'STATUS_WP_MFWP',\n      header: 'Status WP'\n    }, {\n      accessorKey: 'JNS_WP_MFWP',\n      header: 'Jenis WP'\n    }, {\n      accessorKey: 'NM_KANTOR',\n      header: 'KPP Terdaftar'\n    }, {\n      accessorKey: 'NAMA_AR_MFWP',\n      header: 'AR'\n    }, {\n      accessorKey: 'FLAG_WPS_WPK',\n      header: 'WPS/WPK',\n      size: 100,\n      mantineTableBodyCellProps: {\n        align: 'center'\n      }\n    }, {\n      accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',\n      header: 'Rp',\n      Cell: ({\n        cell\n      }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),\n      mantineTableHeadCellProps: {\n        align: 'right'\n      },\n      mantineTableBodyCellProps: {\n        align: 'right'\n      },\n      size: 100\n    }, {\n      accessorKey: 'KETERANGAN',\n      header: 'SPT'\n    }, {\n      accessorKey: 'TGL_DAFTAR',\n      header: 'Tgl Daftar',\n      Cell: ({\n        cell\n      }) => {\n        return dayjs__WEBPACK_IMPORTED_MODULE_8___default()(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD');\n      }\n    }];\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      if (rowVirtualizerInstanceRef.current) {\n        try {\n          rowVirtualizerInstanceRef.current.scrollToIndex(0);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }, [sorting, columnFilters, globalFilter]);\n\n    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      fetchMoreOnBottomReached(tableContainerRef.current);\n    }, [fetchMoreOnBottomReached]);\n    const table1 = (0,mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.useMantineReactTable)({\n      columns,\n      data: flatData,\n      enablePagination: false,\n      enableRowNumbers: true,\n      enableRowVirtualization: true,\n      //optional, but recommended if it is likely going to be more than 100 rows\n      manualFiltering: true,\n      manualSorting: true,\n      mantineTableContainerProps: {\n        ref: tableContainerRef,\n        //get access to the table container element\n        sx: {\n          maxHeight: '600px'\n        },\n        //give the table a max height\n        onScroll: (event //add an event listener to the table container element\n        ) => fetchMoreOnBottomReached(event.target)\n      },\n      mantineToolbarAlertBannerProps: {\n        color: 'red',\n        children: 'Error loading data'\n      },\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilter,\n      onSortingChange: setSorting,\n      renderBottomToolbarCustomActions: () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mantine_core__WEBPACK_IMPORTED_MODULE_10__.Text, {\n        className: \"text-sm\"\n      }, \"Fetched \", totalFetched, \" of \", totalDBRowCount, \" total rows.\"),\n      state: {\n        columnFilters,\n        globalFilter,\n        isLoading,\n        showAlertBanner: isError,\n        showProgressBars: isFetching,\n        sorting\n      },\n      rowVirtualizerInstanceRef,\n      //get access to the virtualizer instance\n      rowVirtualizerProps: {\n        overscan: 10\n      },\n      mantineTableBodyCellProps: {\n        className: 'p-1 text-xs'\n      },\n      mantineTableBodyProps: {\n        className: 'mb-3'\n      }\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.MantineReactTable, {\n      table: table1\n    });\n  };\n  const queryClient = new _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__.QueryClient();\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default()), {\n    ref: refChart,\n    highcharts: (highcharts__WEBPACK_IMPORTED_MODULE_1___default()),\n    options: optionsChart(data, 'SPT Tahunan Tahun Pajak 2024')\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    className: \"f-14\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"Berdasarkan kompilasi data KPD Mobile dan pengolahan data-data perpajakan lainnya (KPD Lainnya), daftar Wajib Pajak yang\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"tidak/belum lapor SPT \"), \" agar segera dilakukan \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"aktivitas himbauan\"), \" melalui mekanisme komite kepatuhan (DSP4 dan/atau WRA), oleh:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu WP\"), \" tersebut;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu wilayah\"), \" tersebut dengan mengirimkan LHKPD (data ICALEP) ke unit kerja yang mengadministrasikan kegiatan usaha yang diawasi;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"Input di DRM\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__.Sidebar, {\n    header: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", null, \"Detail Data\")),\n    visible: visibleSidebar,\n    position: \"bottom\",\n    onHide: () => setVisibleSidebar(false),\n    style: {\n      height: 'calc(100vh - 100px)'\n    },\n    blockScroll: true,\n    pt: {\n      header: {\n        className: 'p-1'\n      },\n      closeButton: {\n        style: {\n          width: '2rem',\n          height: '1rem'\n        }\n      }\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__.QueryClientProvider, {\n    client: queryClient\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableDetailGraph, {\n    dataSend: dataSend,\n    query: query\n  }))))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SPTTahunan);\n\n//# sourceURL=webpack://engineN/./app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js?");
 
 /***/ }),
 
diff --git a/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js b/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
index 2d9f435d..0093456a 100644
--- a/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
+++ b/app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js
@@ -288,7 +288,7 @@ const SPTTahunan = ({ dataSend }) => {
     <>
       <Row>
         <Col>
-          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, 'SPT Tahunan')} />
+          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(data, 'SPT Tahunan Tahun Pajak 2024')} />
         </Col>
       </Row>
       <Row className="f-14">
diff --git a/public/kpdl/dist/kpdl.js b/public/kpdl/dist/kpdl.js
index e02f3666..5d392aef 100644
--- a/public/kpdl/dist/kpdl.js
+++ b/public/kpdl/dist/kpdl.js
@@ -5857,7 +5857,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! highcharts */ \"./node_modules/highcharts/highcharts.js\");\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(highcharts__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! highcharts-react-official */ \"./node_modules/highcharts-react-official/dist/highcharts-react.min.js\");\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Row.js\");\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Col.js\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ \"./app/Views/kewilayahan/kytp/util.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! collect.js */ \"./node_modules/collect.js/dist/index.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(collect_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! primereact/sidebar */ \"./node_modules/primereact/sidebar/sidebar.esm.js\");\n/* harmony import */ var _node_modules_primeflex_primeflex_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../node_modules/primeflex/primeflex.css */ \"./node_modules/primeflex/primeflex.css\");\n/* harmony import */ var mantine_react_table__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! mantine-react-table */ \"./node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js\");\n/* harmony import */ var _mantine_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mantine/core */ \"./node_modules/@mantine/core/esm/Text/Text.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/useInfiniteQuery.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/query-core/build/modern/queryClient.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar relativeTime = __webpack_require__(/*! dayjs/plugin/relativeTime */ \"./node_modules/dayjs/plugin/relativeTime.js\");\nvar customParseFormat = __webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\");\nconst fetchSize = 101;\nconst SPTTahunan = ({\n  dataSend\n}) => {\n  const base_url = '/engineN/';\n  const refChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [data, setData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const [visibleSidebar, setVisibleSidebar] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [query, setQuery] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    jquery__WEBPACK_IMPORTED_MODULE_5___default().get({\n      url: base_url + 'kewilayahan/kytp/sebaranSPTTahunan',\n      dataType: 'json',\n      type: 'POST',\n      data: {\n        ...dataSend\n      },\n      success: data => {\n        setData(data.data);\n      }\n    });\n  }, [dataSend]);\n  const optionsChart = (data, title) => {\n    const total_wp = collect_js__WEBPACK_IMPORTED_MODULE_4___default()(data).sum('y');\n    return {\n      chart: {\n        plotBackgroundColor: null,\n        plotBorderWidth: null,\n        plotShadow: false,\n        type: 'pie',\n        zoomType: 'xy',\n        height: '300'\n      },\n      title: {\n        text: title,\n        style: {\n          fontSize: '10px'\n        }\n      },\n      tooltip: {\n        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + (0,_util__WEBPACK_IMPORTED_MODULE_3__.format_angka)(total_wp) + ' total NPWP yang ada'\n      },\n      accessibility: {\n        point: {\n          valueSuffix: '%'\n        }\n      },\n      plotOptions: {\n        pie: {\n          allowPointSelect: true,\n          cursor: 'pointer',\n          dataLabels: {\n            enabled: true,\n            style: {\n              fontSize: '10px'\n            },\n            format: '{point.name}: <br> {point.percentage:.1f} %'\n          }\n        },\n        series: {\n          cursor: 'pointer',\n          point: {\n            events: {\n              click: function (a) {\n                setQuery(this.key);\n                setVisibleSidebar(true);\n              }\n            }\n          }\n        }\n      },\n      series: [{\n        name: '',\n        data\n      }]\n    };\n  };\n  const TableDetailGraph = ({\n    dataSend,\n    query,\n    tahunBulan\n  }) => {\n    var _data$pages$0$meta$to, _data$pages, _data$pages$, _data$pages$$meta;\n    const tableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const rowVirtualizerInstanceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const [columnFilters, setColumnFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const [globalFilter, setGlobalFilter] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n    const [sorting, setSorting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const base_url = location.protocol + '//' + location.hostname + '/engineN/';\n    const {\n      data,\n      fetchNextPage,\n      isError,\n      isFetching,\n      isLoading\n    } = (0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__.useInfiniteQuery)({\n      queryKey: ['table-data', columnFilters, globalFilter, sorting],\n      queryFn: async ({\n        pageParam = 0\n      }) => {\n        const url = new URL(base_url + 'kewilayahan/sebaran/spttahunan/detail');\n        url.searchParams.set('start', `${pageParam * fetchSize}`);\n        url.searchParams.set('size', `${fetchSize}`);\n        url.searchParams.set('filters', JSON.stringify(columnFilters !== null && columnFilters !== void 0 ? columnFilters : []));\n        url.searchParams.set('globalFilter', globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');\n        url.searchParams.set('sorting', JSON.stringify(sorting !== null && sorting !== void 0 ? sorting : []));\n        const response = await fetch(url.href, {\n          method: 'POST',\n          headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            query,\n            ...dataSend\n          })\n        });\n        const json = await response.json();\n        return json;\n      },\n      getNextPageParam: (_lastGroup, groups) => groups.length,\n      keepPreviousData: true,\n      refetchOnWindowFocus: false\n    });\n    const flatData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n      var _data$pages$flatMap;\n      return (_data$pages$flatMap = data === null || data === void 0 ? void 0 : data.pages.flatMap(page => page.data)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : [];\n    }, [data]);\n    const totalDBRowCount = (_data$pages$0$meta$to = data === null || data === void 0 ? void 0 : (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : (_data$pages$ = _data$pages[0]) === null || _data$pages$ === void 0 ? void 0 : (_data$pages$$meta = _data$pages$.meta) === null || _data$pages$$meta === void 0 ? void 0 : _data$pages$$meta.totalRowCount) !== null && _data$pages$0$meta$to !== void 0 ? _data$pages$0$meta$to : 0;\n    const totalFetched = flatData.length;\n    const fetchMoreOnBottomReached = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(containerRefElement => {\n      if (containerRefElement) {\n        const {\n          scrollHeight,\n          scrollTop,\n          clientHeight\n        } = containerRefElement;\n        //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can\n        if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {\n          fetchNextPage();\n        }\n      }\n    }, [fetchNextPage, isFetching, totalFetched, totalDBRowCount]);\n    const columns = [{\n      accessorKey: 'NPWP',\n      header: 'NPWP',\n      enableClickToCopy: true,\n      size: 150\n    }, {\n      accessorKey: 'NAMA_WP',\n      header: 'Nama'\n    }, {\n      accessorKey: 'ALAMAT_MFWP',\n      header: 'Alamat'\n    }, {\n      accessorKey: 'KELURAHAN_MFWP',\n      header: 'Wil. Adm.',\n      Cell: data => {\n        var _dataRow$KELURAHAN_MF, _dataRow$KECAMATAN_MF, _dataRow$KOTA_MFWP, _dataRow$PROPINSI_MFW;\n        const dataRow = data.row.original;\n        return `${(_dataRow$KELURAHAN_MF = dataRow.KELURAHAN_MFWP) !== null && _dataRow$KELURAHAN_MF !== void 0 ? _dataRow$KELURAHAN_MF : ''} ${(_dataRow$KECAMATAN_MF = dataRow.KECAMATAN_MFWP) !== null && _dataRow$KECAMATAN_MF !== void 0 ? _dataRow$KECAMATAN_MF : ''} ${(_dataRow$KOTA_MFWP = dataRow.KOTA_MFWP) !== null && _dataRow$KOTA_MFWP !== void 0 ? _dataRow$KOTA_MFWP : ''} ${(_dataRow$PROPINSI_MFW = dataRow.PROPINSI_MFWP) !== null && _dataRow$PROPINSI_MFW !== void 0 ? _dataRow$PROPINSI_MFW : ''}`;\n      }\n    }, {\n      accessorKey: 'STATUS_WP_MFWP',\n      header: 'Status WP'\n    }, {\n      accessorKey: 'JNS_WP_MFWP',\n      header: 'Jenis WP'\n    }, {\n      accessorKey: 'NM_KANTOR',\n      header: 'KPP Terdaftar'\n    }, {\n      accessorKey: 'NAMA_AR_MFWP',\n      header: 'AR'\n    }, {\n      accessorKey: 'FLAG_WPS_WPK',\n      header: 'WPS/WPK',\n      size: 100,\n      mantineTableBodyCellProps: {\n        align: 'center'\n      }\n    }, {\n      accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',\n      header: 'Rp',\n      Cell: ({\n        cell\n      }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),\n      mantineTableHeadCellProps: {\n        align: 'right'\n      },\n      mantineTableBodyCellProps: {\n        align: 'right'\n      },\n      size: 100\n    }, {\n      accessorKey: 'KETERANGAN',\n      header: 'SPT'\n    }, {\n      accessorKey: 'TGL_DAFTAR',\n      header: 'Tgl Daftar',\n      Cell: ({\n        cell\n      }) => {\n        return dayjs__WEBPACK_IMPORTED_MODULE_8___default()(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD');\n      }\n    }];\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      if (rowVirtualizerInstanceRef.current) {\n        try {\n          rowVirtualizerInstanceRef.current.scrollToIndex(0);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }, [sorting, columnFilters, globalFilter]);\n\n    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      fetchMoreOnBottomReached(tableContainerRef.current);\n    }, [fetchMoreOnBottomReached]);\n    const table1 = (0,mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.useMantineReactTable)({\n      columns,\n      data: flatData,\n      enablePagination: false,\n      enableRowNumbers: true,\n      enableRowVirtualization: true,\n      //optional, but recommended if it is likely going to be more than 100 rows\n      manualFiltering: true,\n      manualSorting: true,\n      mantineTableContainerProps: {\n        ref: tableContainerRef,\n        //get access to the table container element\n        sx: {\n          maxHeight: '600px'\n        },\n        //give the table a max height\n        onScroll: (event //add an event listener to the table container element\n        ) => fetchMoreOnBottomReached(event.target)\n      },\n      mantineToolbarAlertBannerProps: {\n        color: 'red',\n        children: 'Error loading data'\n      },\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilter,\n      onSortingChange: setSorting,\n      renderBottomToolbarCustomActions: () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mantine_core__WEBPACK_IMPORTED_MODULE_10__.Text, {\n        className: \"text-sm\"\n      }, \"Fetched \", totalFetched, \" of \", totalDBRowCount, \" total rows.\"),\n      state: {\n        columnFilters,\n        globalFilter,\n        isLoading,\n        showAlertBanner: isError,\n        showProgressBars: isFetching,\n        sorting\n      },\n      rowVirtualizerInstanceRef,\n      //get access to the virtualizer instance\n      rowVirtualizerProps: {\n        overscan: 10\n      },\n      mantineTableBodyCellProps: {\n        className: 'p-1 text-xs'\n      },\n      mantineTableBodyProps: {\n        className: 'mb-3'\n      }\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.MantineReactTable, {\n      table: table1\n    });\n  };\n  const queryClient = new _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__.QueryClient();\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default()), {\n    ref: refChart,\n    highcharts: (highcharts__WEBPACK_IMPORTED_MODULE_1___default()),\n    options: optionsChart(data, 'SPT Tahunan')\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    className: \"f-14\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"Berdasarkan kompilasi data KPD Mobile dan pengolahan data-data perpajakan lainnya (KPD Lainnya), daftar Wajib Pajak yang\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"tidak/belum lapor SPT \"), \" agar segera dilakukan \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"aktivitas himbauan\"), \" melalui mekanisme komite kepatuhan (DSP4 dan/atau WRA), oleh:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu WP\"), \" tersebut;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu wilayah\"), \" tersebut dengan mengirimkan LHKPD (data ICALEP) ke unit kerja yang mengadministrasikan kegiatan usaha yang diawasi;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"Input di DRM\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__.Sidebar, {\n    header: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", null, \"Detail Data\")),\n    visible: visibleSidebar,\n    position: \"bottom\",\n    onHide: () => setVisibleSidebar(false),\n    style: {\n      height: 'calc(100vh - 100px)'\n    },\n    blockScroll: true,\n    pt: {\n      header: {\n        className: 'p-1'\n      },\n      closeButton: {\n        style: {\n          width: '2rem',\n          height: '1rem'\n        }\n      }\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__.QueryClientProvider, {\n    client: queryClient\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableDetailGraph, {\n    dataSend: dataSend,\n    query: query\n  }))))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SPTTahunan);\n\n//# sourceURL=webpack://engineN/./app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! highcharts */ \"./node_modules/highcharts/highcharts.js\");\n/* harmony import */ var highcharts__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(highcharts__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! highcharts-react-official */ \"./node_modules/highcharts-react-official/dist/highcharts-react.min.js\");\n/* harmony import */ var highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(highcharts_react_official__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Row.js\");\n/* harmony import */ var reactstrap__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! reactstrap */ \"./node_modules/reactstrap/es/Col.js\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ \"./app/Views/kewilayahan/kytp/util.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! collect.js */ \"./node_modules/collect.js/dist/index.js\");\n/* harmony import */ var collect_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(collect_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! primereact/sidebar */ \"./node_modules/primereact/sidebar/sidebar.esm.js\");\n/* harmony import */ var _node_modules_primeflex_primeflex_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../node_modules/primeflex/primeflex.css */ \"./node_modules/primeflex/primeflex.css\");\n/* harmony import */ var mantine_react_table__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! mantine-react-table */ \"./node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js\");\n/* harmony import */ var _mantine_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mantine/core */ \"./node_modules/@mantine/core/esm/Text/Text.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/useInfiniteQuery.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/query-core/build/modern/queryClient.js\");\n/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @tanstack/react-query */ \"./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\");\n/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_8__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar relativeTime = __webpack_require__(/*! dayjs/plugin/relativeTime */ \"./node_modules/dayjs/plugin/relativeTime.js\");\nvar customParseFormat = __webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\");\nconst fetchSize = 101;\nconst SPTTahunan = ({\n  dataSend\n}) => {\n  const base_url = '/engineN/';\n  const refChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const [data, setData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const [visibleSidebar, setVisibleSidebar] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [query, setQuery] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    jquery__WEBPACK_IMPORTED_MODULE_5___default().get({\n      url: base_url + 'kewilayahan/kytp/sebaranSPTTahunan',\n      dataType: 'json',\n      type: 'POST',\n      data: {\n        ...dataSend\n      },\n      success: data => {\n        setData(data.data);\n      }\n    });\n  }, [dataSend]);\n  const optionsChart = (data, title) => {\n    const total_wp = collect_js__WEBPACK_IMPORTED_MODULE_4___default()(data).sum('y');\n    return {\n      chart: {\n        plotBackgroundColor: null,\n        plotBorderWidth: null,\n        plotShadow: false,\n        type: 'pie',\n        zoomType: 'xy',\n        height: '300'\n      },\n      title: {\n        text: title,\n        style: {\n          fontSize: '10px'\n        }\n      },\n      tooltip: {\n        pointFormat: '<b>{point.percentage:.1f}%</b><br>: {point.y} dari ' + (0,_util__WEBPACK_IMPORTED_MODULE_3__.format_angka)(total_wp) + ' total NPWP yang ada'\n      },\n      accessibility: {\n        point: {\n          valueSuffix: '%'\n        }\n      },\n      plotOptions: {\n        pie: {\n          allowPointSelect: true,\n          cursor: 'pointer',\n          dataLabels: {\n            enabled: true,\n            style: {\n              fontSize: '10px'\n            },\n            format: '{point.name}: <br> {point.percentage:.1f} %'\n          }\n        },\n        series: {\n          cursor: 'pointer',\n          point: {\n            events: {\n              click: function (a) {\n                setQuery(this.key);\n                setVisibleSidebar(true);\n              }\n            }\n          }\n        }\n      },\n      series: [{\n        name: '',\n        data\n      }]\n    };\n  };\n  const TableDetailGraph = ({\n    dataSend,\n    query,\n    tahunBulan\n  }) => {\n    var _data$pages$0$meta$to, _data$pages, _data$pages$, _data$pages$$meta;\n    const tableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const rowVirtualizerInstanceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    const [columnFilters, setColumnFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const [globalFilter, setGlobalFilter] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n    const [sorting, setSorting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n    const base_url = location.protocol + '//' + location.hostname + '/engineN/';\n    const {\n      data,\n      fetchNextPage,\n      isError,\n      isFetching,\n      isLoading\n    } = (0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_9__.useInfiniteQuery)({\n      queryKey: ['table-data', columnFilters, globalFilter, sorting],\n      queryFn: async ({\n        pageParam = 0\n      }) => {\n        const url = new URL(base_url + 'kewilayahan/sebaran/spttahunan/detail');\n        url.searchParams.set('start', `${pageParam * fetchSize}`);\n        url.searchParams.set('size', `${fetchSize}`);\n        url.searchParams.set('filters', JSON.stringify(columnFilters !== null && columnFilters !== void 0 ? columnFilters : []));\n        url.searchParams.set('globalFilter', globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');\n        url.searchParams.set('sorting', JSON.stringify(sorting !== null && sorting !== void 0 ? sorting : []));\n        const response = await fetch(url.href, {\n          method: 'POST',\n          headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            query,\n            ...dataSend\n          })\n        });\n        const json = await response.json();\n        return json;\n      },\n      getNextPageParam: (_lastGroup, groups) => groups.length,\n      keepPreviousData: true,\n      refetchOnWindowFocus: false\n    });\n    const flatData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n      var _data$pages$flatMap;\n      return (_data$pages$flatMap = data === null || data === void 0 ? void 0 : data.pages.flatMap(page => page.data)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : [];\n    }, [data]);\n    const totalDBRowCount = (_data$pages$0$meta$to = data === null || data === void 0 ? void 0 : (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : (_data$pages$ = _data$pages[0]) === null || _data$pages$ === void 0 ? void 0 : (_data$pages$$meta = _data$pages$.meta) === null || _data$pages$$meta === void 0 ? void 0 : _data$pages$$meta.totalRowCount) !== null && _data$pages$0$meta$to !== void 0 ? _data$pages$0$meta$to : 0;\n    const totalFetched = flatData.length;\n    const fetchMoreOnBottomReached = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(containerRefElement => {\n      if (containerRefElement) {\n        const {\n          scrollHeight,\n          scrollTop,\n          clientHeight\n        } = containerRefElement;\n        //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can\n        if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {\n          fetchNextPage();\n        }\n      }\n    }, [fetchNextPage, isFetching, totalFetched, totalDBRowCount]);\n    const columns = [{\n      accessorKey: 'NPWP',\n      header: 'NPWP',\n      enableClickToCopy: true,\n      size: 150\n    }, {\n      accessorKey: 'NAMA_WP',\n      header: 'Nama'\n    }, {\n      accessorKey: 'ALAMAT_MFWP',\n      header: 'Alamat'\n    }, {\n      accessorKey: 'KELURAHAN_MFWP',\n      header: 'Wil. Adm.',\n      Cell: data => {\n        var _dataRow$KELURAHAN_MF, _dataRow$KECAMATAN_MF, _dataRow$KOTA_MFWP, _dataRow$PROPINSI_MFW;\n        const dataRow = data.row.original;\n        return `${(_dataRow$KELURAHAN_MF = dataRow.KELURAHAN_MFWP) !== null && _dataRow$KELURAHAN_MF !== void 0 ? _dataRow$KELURAHAN_MF : ''} ${(_dataRow$KECAMATAN_MF = dataRow.KECAMATAN_MFWP) !== null && _dataRow$KECAMATAN_MF !== void 0 ? _dataRow$KECAMATAN_MF : ''} ${(_dataRow$KOTA_MFWP = dataRow.KOTA_MFWP) !== null && _dataRow$KOTA_MFWP !== void 0 ? _dataRow$KOTA_MFWP : ''} ${(_dataRow$PROPINSI_MFW = dataRow.PROPINSI_MFWP) !== null && _dataRow$PROPINSI_MFW !== void 0 ? _dataRow$PROPINSI_MFW : ''}`;\n      }\n    }, {\n      accessorKey: 'STATUS_WP_MFWP',\n      header: 'Status WP'\n    }, {\n      accessorKey: 'JNS_WP_MFWP',\n      header: 'Jenis WP'\n    }, {\n      accessorKey: 'NM_KANTOR',\n      header: 'KPP Terdaftar'\n    }, {\n      accessorKey: 'NAMA_AR_MFWP',\n      header: 'AR'\n    }, {\n      accessorKey: 'FLAG_WPS_WPK',\n      header: 'WPS/WPK',\n      size: 100,\n      mantineTableBodyCellProps: {\n        align: 'center'\n      }\n    }, {\n      accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',\n      header: 'Rp',\n      Cell: ({\n        cell\n      }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),\n      mantineTableHeadCellProps: {\n        align: 'right'\n      },\n      mantineTableBodyCellProps: {\n        align: 'right'\n      },\n      size: 100\n    }, {\n      accessorKey: 'KETERANGAN',\n      header: 'SPT'\n    }, {\n      accessorKey: 'TGL_DAFTAR',\n      header: 'Tgl Daftar',\n      Cell: ({\n        cell\n      }) => {\n        return dayjs__WEBPACK_IMPORTED_MODULE_8___default()(cell.getValue(), 'DD-MMM-YY').format('YYYY-MM-DD');\n      }\n    }];\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      if (rowVirtualizerInstanceRef.current) {\n        try {\n          rowVirtualizerInstanceRef.current.scrollToIndex(0);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }, [sorting, columnFilters, globalFilter]);\n\n    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n      fetchMoreOnBottomReached(tableContainerRef.current);\n    }, [fetchMoreOnBottomReached]);\n    const table1 = (0,mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.useMantineReactTable)({\n      columns,\n      data: flatData,\n      enablePagination: false,\n      enableRowNumbers: true,\n      enableRowVirtualization: true,\n      //optional, but recommended if it is likely going to be more than 100 rows\n      manualFiltering: true,\n      manualSorting: true,\n      mantineTableContainerProps: {\n        ref: tableContainerRef,\n        //get access to the table container element\n        sx: {\n          maxHeight: '600px'\n        },\n        //give the table a max height\n        onScroll: (event //add an event listener to the table container element\n        ) => fetchMoreOnBottomReached(event.target)\n      },\n      mantineToolbarAlertBannerProps: {\n        color: 'red',\n        children: 'Error loading data'\n      },\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilter,\n      onSortingChange: setSorting,\n      renderBottomToolbarCustomActions: () => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mantine_core__WEBPACK_IMPORTED_MODULE_10__.Text, {\n        className: \"text-sm\"\n      }, \"Fetched \", totalFetched, \" of \", totalDBRowCount, \" total rows.\"),\n      state: {\n        columnFilters,\n        globalFilter,\n        isLoading,\n        showAlertBanner: isError,\n        showProgressBars: isFetching,\n        sorting\n      },\n      rowVirtualizerInstanceRef,\n      //get access to the virtualizer instance\n      rowVirtualizerProps: {\n        overscan: 10\n      },\n      mantineTableBodyCellProps: {\n        className: 'p-1 text-xs'\n      },\n      mantineTableBodyProps: {\n        className: 'mb-3'\n      }\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(mantine_react_table__WEBPACK_IMPORTED_MODULE_7__.MantineReactTable, {\n      table: table1\n    });\n  };\n  const queryClient = new _tanstack_react_query__WEBPACK_IMPORTED_MODULE_11__.QueryClient();\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((highcharts_react_official__WEBPACK_IMPORTED_MODULE_2___default()), {\n    ref: refChart,\n    highcharts: (highcharts__WEBPACK_IMPORTED_MODULE_1___default()),\n    options: optionsChart(data, 'SPT Tahunan Tahun Pajak 2024')\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    className: \"f-14\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"Berdasarkan kompilasi data KPD Mobile dan pengolahan data-data perpajakan lainnya (KPD Lainnya), daftar Wajib Pajak yang\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"tidak/belum lapor SPT \"), \" agar segera dilakukan \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"aktivitas himbauan\"), \" melalui mekanisme komite kepatuhan (DSP4 dan/atau WRA), oleh:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu WP\"), \" tersebut;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"AR yang \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"b\", null, \"mengampu wilayah\"), \" tersebut dengan mengirimkan LHKPD (data ICALEP) ke unit kerja yang mengadministrasikan kegiatan usaha yang diawasi;\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", null, \"Input di DRM\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(primereact_sidebar__WEBPACK_IMPORTED_MODULE_14__.Sidebar, {\n    header: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h4\", null, \"Detail Data\")),\n    visible: visibleSidebar,\n    position: \"bottom\",\n    onHide: () => setVisibleSidebar(false),\n    style: {\n      height: 'calc(100vh - 100px)'\n    },\n    blockScroll: true,\n    pt: {\n      header: {\n        className: 'p-1'\n      },\n      closeButton: {\n        style: {\n          width: '2rem',\n          height: '1rem'\n        }\n      }\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(reactstrap__WEBPACK_IMPORTED_MODULE_13__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tanstack_react_query__WEBPACK_IMPORTED_MODULE_15__.QueryClientProvider, {\n    client: queryClient\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableDetailGraph, {\n    dataSend: dataSend,\n    query: query\n  }))))))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SPTTahunan);\n\n//# sourceURL=webpack://engineN/./app/Views/kewilayahan/kytp/componentProgresifitas/SPTTahunan.js?");
 
 /***/ }),