pecintaseni
/
engineN
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

progresifitas

main
pecintaseni 7 months ago
parent
97dc719c50
commit
5e20e2d007
20 changed files with 64189 additions and 427 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      .eslintrc.js
  2. 9
      .prettierrc
  3. 4
      .vscode/extensions.json
  4. 28
      .vscode/settings.json
  5. 62
      app/Controllers/Kewilayahan/Kytp.php
  6. 41
      app/Controllers/Kewilayahan/Sebaran/Identifikasi.php
  7. 49
      app/Controllers/Kewilayahan/Sebaran/PayComp.php
  8. 70
      app/Controllers/Kewilayahan/Sebaran/Pembayaran.php
  9. 61
      app/Controllers/Kewilayahan/Sebaran/Sof.php
  10. 62963
      app/Views/kewilayahan/dist/kpdl.js
  11. 14
      app/Views/kewilayahan/kytp/TabPenugasan.js
  12. 75
      app/Views/kewilayahan/kytp/TabProgresifitas.js
  13. 83
      app/Views/kewilayahan/kytp/componentProgresifitas/Identifikasi.js
  14. 97
      app/Views/kewilayahan/kytp/componentProgresifitas/PayComp.js
  15. 97
      app/Views/kewilayahan/kytp/componentProgresifitas/Pembayaran.js
  16. 109
      app/Views/kewilayahan/kytp/componentProgresifitas/Sof.js
  17. 753
      app/Views/kewilayahan/kytp/kpdl.js
  18. 1
      package.json
  19. 4
      webpack.config.js
  20. 5
      yarn.lock

91
.eslintrc.js
Unescape View File

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

9
.prettierrc
Unescape View File

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

4
.vscode/extensions.json vendored
Unescape View File

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

28
.vscode/settings.json vendored
Unescape View File

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

62
app/Controllers/Kewilayahan/Kytp.php
Unescape View File

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

41
app/Controllers/Kewilayahan/Sebaran/Identifikasi.php
Unescape View File

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

49
app/Controllers/Kewilayahan/Sebaran/PayComp.php
Unescape View File

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

70
app/Controllers/Kewilayahan/Sebaran/Pembayaran.php
Unescape View File

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

61
app/Controllers/Kewilayahan/Sebaran/Sof.php
Unescape View File

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

62963
app/Views/kewilayahan/dist/kpdl.js vendored
View File

File diff suppressed because one or more lines are too long

14
app/Views/kewilayahan/kytp/TabPenugasan.js
Unescape View File

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

75
app/Views/kewilayahan/kytp/TabProgresifitas.js
Unescape View File

@ -1,40 +1,35 @@
import React, { useState } from 'react'; import React, { useState } from "react"
import { TabView, TabPanel } from 'primereact/tabview'; import { TabView, TabPanel } from "primereact/tabview"
export default function TabProgresifitas() { // import Identifikasi from "./componentProgresifitas/Identifikasi"
import Pembayaran from "./componentProgresifitas/Pembayaran"
const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` })) import Identifikasi from "./componentProgresifitas/Identifikasi"
return ( import PayComp from "./componentProgresifitas/PayComp"
<div className="card"> import Sof from "./componentProgresifitas/Sof"
<TabView scrollable onClick={(e) => {
console.log(e) export default function TabProgresifitas({ dataSend }) {
}} > return (
<div className="card">
<TabPanel id="1" header="Identifikasi" > <TabView>
<TabPanel id="tab_1" header="Identifikasi">
</TabPanel> <Identifikasi dataSend={dataSend} />
</TabPanel>
<TabPanel id="2" header="Pembayaran"> <TabPanel id="tab_2" header="Pembayaran">
<Pembayaran dataSend={dataSend} />
</TabPanel> </TabPanel>
<TabPanel id="3" header="Payment Compliant"> <TabPanel id="tab_3" header="Payment Compliance">
<PayComp dataSend={dataSend} />
</TabPanel> </TabPanel>
<TabPanel id="4" header="Strength Of Figure"> <TabPanel id="tab_4" header="Strength Of Figure">
<div style={{ minHeight: "300px" }}>
</TabPanel> <Sof dataSend={dataSend} />
</div>
<TabPanel id="5" header="Jenis/Status WP"> </TabPanel>
</TabPanel> <TabPanel id="tab_5" header="Jenis/Status WP"></TabPanel>
<TabPanel id="5" header="Pengampu"> <TabPanel id="tab_5" header="Pengampu"></TabPanel>
<TabPanel id="tab_6" header="KLU"></TabPanel>
</TabPanel> </TabView>
<TabPanel id="6" header="KLU"> </div>
)
</TabPanel> }
</TabView>
</div>
)
}

83
app/Views/kewilayahan/kytp/componentProgresifitas/Identifikasi.js
Unescape View File

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

97
app/Views/kewilayahan/kytp/componentProgresifitas/PayComp.js
Unescape View File

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

97
app/Views/kewilayahan/kytp/componentProgresifitas/Pembayaran.js
Unescape View File

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

109
app/Views/kewilayahan/kytp/componentProgresifitas/Sof.js
Unescape View File

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

753
app/Views/kewilayahan/kytp/kpdl.js
Unescape View File

@ -1,25 +1,28 @@
import React, { useEffect, useRef, useState } from "react" import React, { useEffect, useRef, useState } from "react"
import ReactDOM from "react-dom" import ReactDOM from "react-dom"
import { Button, Card, CardBody, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap" import { Button, Card, CardBody, CardHeader, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap"
import Select from "react-select" import Select from "react-select"
import jQuery from "jquery" import jQuery from "jquery"
import collect from "collect.js" import collect from "collect.js"
import { format_angka, isObjEmpty } from "./util" import { format_angka, isObjEmpty } from "./util"
import { MultiSelect } from "react-multi-select-component" import { MultiSelect } from "react-multi-select-component"
import Highcharts from 'highcharts' import Highcharts from "highcharts"
import HighchartsReact from 'highcharts-react-official' import HighchartsReact from "highcharts-react-official"
import { Toast } from 'primereact/toast'; import { Toast } from "primereact/toast"
import { Button as ButtonP } from 'primereact/button'; import { Button as ButtonP } from "primereact/button"
import "primereact/resources/themes/bootstrap4-light-blue/theme.css"; import "primereact/resources/themes/bootstrap4-light-blue/theme.css"
import "primeflex/primeflex.css"
import TabProgresifitas from "./TabProgresifitas" import TabProgresifitas from "./TabProgresifitas"
import TabPenugasan from "./TabPenugasan"
// import 'bootstrap/dist/css/bootstrap.m in.css'; // import 'bootstrap/dist/css/bootstrap.m in.css';
// let datasend = {}
const Root = () => { const Root = () => {
const base_url = "<?=base_url()?>" const base_url = "<?=base_url()?>"
const refChart1 = useRef(null) const refChart1 = useRef(null)
const toast = useRef(null); const toast = useRef(null)
const [active, setActive] = useState('wilayah') const [active, setActive] = useState("wilayah")
const toggle = tab => { const toggle = (tab) => {
setActive(tab) setActive(tab)
} }
@ -45,24 +48,29 @@ const Root = () => {
const [arSelected, setArSelected] = useState([]) const [arSelected, setArSelected] = useState([])
const [zpSelected, setZpSelected] = useState([]) const [zpSelected, setZpSelected] = useState([])
const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [] })
const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] }) const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
useEffect(() => { useEffect(() => {
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/propinsi', method: "GET", dataType: "json", success: ((data) => { url: base_url + "kewilayahan/ref/propinsi",
method: "GET",
dataType: "json",
success: (data) => {
setProp(data) setProp(data)
}) }
}) })
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/zpkanwil', method: "GET", dataType: "json", success: ((data) => { url: base_url + "kewilayahan/ref/zpkanwil",
method: "GET",
dataType: "json",
success: (data) => {
setKanwil(data) setKanwil(data)
}) }
}) })
}, []) }, [])
useEffect(() => { useEffect(() => {
setKota({}) setKota({})
setKec([]) setKec([])
@ -73,13 +81,13 @@ const Root = () => {
if (propSelected && !isObjEmpty(propSelected)) { if (propSelected && !isObjEmpty(propSelected)) {
const prop = propSelected.value const prop = propSelected.value
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/kota', url: base_url + "kewilayahan/ref/kota",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { prop }, data: { prop },
success: ((data) => { success: (data) => {
setKota(data) setKota(data)
}) }
}) })
} }
}, [propSelected]) }, [propSelected])
@ -92,15 +100,14 @@ const Root = () => {
if (kotaSelected && !isObjEmpty(kotaSelected)) { if (kotaSelected && !isObjEmpty(kotaSelected)) {
const kota = kotaSelected.value const kota = kotaSelected.value
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/kecamatan', url: base_url + "kewilayahan/ref/kecamatan",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kota }, data: { kota },
success: ((data) => { success: (data) => {
setKec(data) setKec(data)
}) }
}) })
} }
}, [kotaSelected]) }, [kotaSelected])
@ -109,18 +116,17 @@ const Root = () => {
setKelSelected([]) setKelSelected([])
console.log({ kecSelected }) console.log({ kecSelected })
if (kecSelected.length && !isObjEmpty(kecSelected)) { if (kecSelected.length && !isObjEmpty(kecSelected)) {
const kec = collect(kecSelected).pluck('value').all() const kec = collect(kecSelected).pluck("value").all()
console.log({ kec }) console.log({ kec })
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/kelurahan', url: base_url + "kewilayahan/ref/kelurahan",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kec }, data: { kec },
success: ((data) => { success: (data) => {
setKel(data) setKel(data)
}) }
}) })
} }
}, [kecSelected]) }, [kecSelected])
@ -136,13 +142,13 @@ const Root = () => {
if (kanwilSelected && !isObjEmpty(kanwilSelected)) { if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
const kanwil = kanwilSelected.value const kanwil = kanwilSelected.value
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/zpkpp', url: base_url + "kewilayahan/ref/zpkpp",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kanwil }, data: { kanwil },
success: ((data) => { success: (data) => {
setKpp(data) setKpp(data)
}) }
}) })
} }
}, [kanwilSelected]) }, [kanwilSelected])
@ -155,15 +161,15 @@ const Root = () => {
setArSelected([]) setArSelected([])
setZpSelected([]) setZpSelected([])
if (kppSelected && !isObjEmpty(kppSelected)) { if (kppSelected && !isObjEmpty(kppSelected)) {
const kpp = collect(kppSelected).pluck('value').all() const kpp = collect(kppSelected).pluck("value").all()
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/zpseksi', url: base_url + "kewilayahan/ref/zpseksi",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kpp }, data: { kpp },
success: ((data) => { success: (data) => {
setSeksi(data) setSeksi(data)
}) }
}) })
} }
}, [kppSelected]) }, [kppSelected])
@ -174,17 +180,17 @@ const Root = () => {
setArSelected([]) setArSelected([])
setZpSelected([]) setZpSelected([])
if (seksiSelected && !isObjEmpty(seksiSelected)) { if (seksiSelected && !isObjEmpty(seksiSelected)) {
const kpp = collect(kppSelected).pluck('value').all() const kpp = collect(kppSelected).pluck("value").all()
const seksi = collect(seksiSelected).pluck('value').all() const seksi = collect(seksiSelected).pluck("value").all()
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/zpar', url: base_url + "kewilayahan/ref/zpar",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kpp, seksi }, data: { kpp, seksi },
success: ((data) => { success: (data) => {
setAr(data) setAr(data)
}) }
}) })
} }
}, [seksiSelected]) }, [seksiSelected])
@ -193,69 +199,51 @@ const Root = () => {
setZp([]) setZp([])
setZpSelected([]) setZpSelected([])
if (arSelected && !isObjEmpty(arSelected)) { if (arSelected && !isObjEmpty(arSelected)) {
const kpp = collect(kppSelected).pluck('value').all() const kpp = collect(kppSelected).pluck("value").all()
const seksi = collect(seksiSelected).pluck('value').all() const seksi = collect(seksiSelected).pluck("value").all()
const ar = collect(arSelected).pluck('value').all() const ar = collect(arSelected).pluck("value").all()
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/ref/zpzp', url: base_url + "kewilayahan/ref/zpzp",
method: "GET", method: "GET",
dataType: "json", dataType: "json",
data: { kpp, seksi, ar }, data: { kpp, seksi, ar },
success: ((data) => { success: (data) => {
setZp(data) setZp(data)
}) }
}) })
} }
}, [arSelected]) }, [arSelected])
const buttonProsesOnClick = () => { const buttonProsesOnClick = () => {
const opsiWilZona = active const opsiWilZona = active
const adm4_pcode = collect(kelSelected).pluck('value').all() const adm4_pcode = collect(kelSelected).pluck("value").all()
const id_poly_zona = collect(zpSelected).pluck('value').all() const id_poly_zona = collect(zpSelected).pluck("value").all()
let datasend = {
opsiWilZona,
}
switch (opsiWilZona) { switch (opsiWilZona) {
case 'wilayah': case "wilayah":
if (adm4_pcode.length) { if (adm4_pcode.length) {
datasend.adm4_pcode = adm4_pcode setDataSend({ opsiWilZona: "wilayah", adm4_pcode, id_poly_zona: [] })
} else { } else {
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' }); toast.current.show({ severity: "info", summary: "Info", detail: "Kelurahan harus dipilih" })
} }
break; break
case 'zona': case "zona":
if (id_poly_zona.length) { if (id_poly_zona.length) {
setDataSend({ opsiWilZona: "zona", adm4_pcode: [], id_poly_zona })
datasend.id_poly_zona = id_poly_zona
} else { } else {
toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' }); toast.current.show({ severity: "info", summary: "Info", detail: "Zona harus dipilih" })
} }
break; break
default: default:
break; break
} }
jQuery.ajax({
url: base_url + 'kewilayahan/kytp/graph_matoa',
dataType: "json",
type: "POST",
data: datasend,
success: (data) => {
setDataGraphMatoa(data)
}
})
} }
useEffect(() => { useEffect(() => {
Highcharts.setOptions({ Highcharts.setOptions({
lang: { lang: {
decimalPoint: ',', decimalPoint: ",",
thousandsSep: '.', thousandsSep: ".",
numericSymbols: ["rb", "jt", "M", "T", "P", "E"] numericSymbols: ["rb", "jt", "M", "T", "P", "E"]
}, },
@ -264,37 +252,37 @@ const Root = () => {
} }
}) })
jQuery.ajax({ jQuery.ajax({
url: base_url + 'kewilayahan/kytp/graph_matoa', url: base_url + "kewilayahan/kytp/graph_matoa",
dataType: "json", dataType: "json",
type: "POST", type: "POST",
data: { ...dataSend },
success: (data) => { success: (data) => {
setDataGraphMatoa(data) setDataGraphMatoa(data)
} }
}) })
}, [dataSend])
}, [])
const optionsGraphMatoaAgg = { const optionsGraphMatoaAgg = {
chart: { chart: {
zoomType: 'xy', zoomType: "xy",
height: '320', height: "320"
}, },
title: { title: {
text: 'Poi Google dan Matoa', text: "Poi Google dan Matoa"
// align: 'center' // align: 'center'
}, },
xAxis: [{ xAxis: [
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', {
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
crosshair: true crosshair: true
}], }
],
yAxis: [ yAxis: [
{ {
gridLineWidth: 0, gridLineWidth: 0,
title: { title: {
text: '', text: "",
style: { style: {
color: Highcharts.getOptions().colors[0] color: Highcharts.getOptions().colors[0]
} }
@ -315,19 +303,18 @@ const Root = () => {
} }
}, },
title: { title: {
text: 'NPWP Work True', text: "NPWP Work True",
style: { style: {
color: Highcharts.getOptions().colors[1] color: Highcharts.getOptions().colors[1]
} }
}, },
opposite: true, opposite: true,
visible: false visible: false
}, },
{ {
gridLineWidth: 0, gridLineWidth: 0,
title: { title: {
text: 'Rupiah', text: "Rupiah",
style: { style: {
color: Highcharts.getOptions().colors[2] color: Highcharts.getOptions().colors[2]
} }
@ -344,7 +331,7 @@ const Root = () => {
{ {
gridLineWidth: 0, gridLineWidth: 0,
title: { title: {
text: '', text: "",
style: { style: {
color: "#FF0000" color: "#FF0000"
} }
@ -362,297 +349,319 @@ const Root = () => {
shared: true shared: true
}, },
legend: { legend: {
layout: 'horizontal', layout: "horizontal",
align: 'center', align: "center",
//x: 80, //x: 80,
verticalAlign: 'top', verticalAlign: "top",
//y: 55, //y: 55,
//floating: true, //floating: true,
backgroundColor: backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)' "rgba(255,255,255,0.25)"
}, },
series: [{ series: [
color: '#FF0000', {
name: 'Jml PoI', color: "#FF0000",
type: 'column', name: "Jml PoI",
yAxis: 3, type: "column",
data: dataGraphMatoa.poi_agg, yAxis: 3,
marker: { data: dataGraphMatoa.poi_agg,
enabled: true marker: {
}, enabled: true
tooltip: {
valueSuffix: ' PoI'
},
},
{
name: 'Matoa',
type: 'spline',
yAxis: 3,
data: dataGraphMatoa.kpdl_agg,
marker: {
enabled: true
},
tooltip: {
pointFormatter: function () {
const idx = this.index
let pct_coverage;
const jml_poi_agg = dataGraphMatoa.poi_agg
if (jml_poi_agg[idx] && jml_poi_agg[idx] !== 0) {
pct_coverage = format_angka(parseFloat((parseFloat(this.y) / jml_poi_agg[idx] * 100)).toFixed(2)) + '%';
}
let s = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + format_angka(this.y) + ' lokasi kpdl</b> ' + ((pct_coverage) ? '(' + pct_coverage + ')<br>\n' : '<br>')
return s;
}, },
shared: false tooltip: {
valueSuffix: " PoI"
}
}, },
visible: true, {
color: "#8000ff" name: "Matoa",
}], type: "spline",
yAxis: 3,
data: dataGraphMatoa.kpdl_agg,
marker: {
enabled: true
},
tooltip: {
pointFormatter: function () {
const idx = this.index
let pct_coverage
const jml_poi_agg = dataGraphMatoa.poi_agg
if (jml_poi_agg[idx] && jml_poi_agg[idx] !== 0) {
pct_coverage = format_angka(parseFloat((parseFloat(this.y) / jml_poi_agg[idx]) * 100).toFixed(2)) + "%"
}
let s =
'<span style="color:' +
this.color +
'">\u25CF</span> ' +
this.series.name +
": <b>" +
format_angka(this.y) +
" lokasi kpdl</b> " +
(pct_coverage ? "(" + pct_coverage + ")<br>\n" : "<br>")
return s
},
shared: false
},
visible: true,
color: "#8000ff"
}
]
} }
return <> return (
<>
<Row className="text-center"> <Row className="text-center">
<Col > <Col>
<h2>E-Geospatial Thematic Tax</h2> <h2>E-Geospatial Thematic Tax</h2>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col sm="12"> <Col sm="12">
<Card> <Card>
<CardBody> <CardBody>
<Nav tabs > <Nav tabs>
<NavItem > <NavItem>
<NavLink style={{ cursor: "pointer" }} <NavLink
active={active === 'wilayah'} style={{ cursor: "pointer" }}
onClick={() => { active={active === "wilayah"}
toggle('wilayah') onClick={() => {
}} toggle("wilayah")
> }}
Wilayah Adm. >
</NavLink> Wilayah Adm.
</NavItem> </NavLink>
<NavItem > </NavItem>
<NavLink style={{ cursor: "pointer" }} <NavItem>
active={active === 'zona'} <NavLink
onClick={() => { style={{ cursor: "pointer" }}
toggle('zona') active={active === "zona"}
}} onClick={() => {
> toggle("zona")
Zona Pengawasan }}
</NavLink> >
</NavItem> Zona Pengawasan
</Nav> </NavLink>
<TabContent className="py-3" activeTab={active}> </NavItem>
<TabPane tabId="wilayah"> </Nav>
<Row> <TabContent className="py-3" activeTab={active}>
<Col md="3"> <TabPane tabId="wilayah">
<Label className='form-label' for='basicInput'> <Row>
Propinsi <Col md="3">
</Label> <Label className="form-label" for="basicInput">
<Select Propinsi
placeholder="Pilih Propinsi" </Label>
className="basic-single w-100" <Select
onChange={(e) => { placeholder="Pilih Propinsi"
setPropSelected(e) className="basic-single w-100"
}} onChange={(e) => {
classNamePrefix="select" setPropSelected(e)
defaultValue={propSelected} }}
value={propSelected} classNamePrefix="select"
isClearable={false} defaultValue={propSelected}
options={prop} value={propSelected}
/> isClearable={false}
</Col> options={prop}
<Col md="3"> />
<Label className='form-label' for='basicInput'> </Col>
Kota/Kab <Col md="3">
</Label> <Label className="form-label" for="basicInput">
<Select Kota/Kab
placeholder="Pilih Kota/Kab" </Label>
className="basic-single w-100" <Select
onChange={(e) => { placeholder="Pilih Kota/Kab"
setKotaSelected(e) className="basic-single w-100"
}} onChange={(e) => {
classNamePrefix="select" setKotaSelected(e)
defaultValue={kotaSelected} }}
value={kotaSelected} classNamePrefix="select"
isClearable={false} defaultValue={kotaSelected}
options={kota} value={kotaSelected}
/> isClearable={false}
</Col> options={kota}
<Col md="3"> />
<Label className='form-label' for='Pilih Kecamatan'> </Col>
Kecamatan <Col md="3">
</Label> <Label className="form-label" for="Pilih Kecamatan">
<MultiSelect Kecamatan
className="me-1 w-full" </Label>
hasSelectAll={true} <MultiSelect
debounceDuration={300} className="me-1 w-full"
options={kec} hasSelectAll={true}
value={kecSelected} debounceDuration={300}
onChange={(e) => { options={kec}
setKecSelected(e) value={kecSelected}
}} onChange={(e) => {
labelledBy="Pilih Kecamatan" setKecSelected(e)
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kecamatan" }} }}
/> labelledBy="Pilih Kecamatan"
</Col> overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kecamatan" }}
<Col md="3"> />
<Label className='form-label' for='Pilih Kelurahan'> </Col>
Kelurahan <Col md="3">
</Label> <Label className="form-label" for="Pilih Kelurahan">
<MultiSelect Kelurahan
className="me-1 w-full" </Label>
hasSelectAll={true} <MultiSelect
debounceDuration={300} className="me-1 w-full"
options={kel} hasSelectAll={true}
value={kelSelected} debounceDuration={300}
onChange={(e) => { options={kel}
setKelSelected(e) value={kelSelected}
}} onChange={(e) => {
labelledBy="Pilih Kelurahan" setKelSelected(e)
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kelurahan" }} }}
/> labelledBy="Pilih Kelurahan"
</Col> overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kelurahan" }}
<Col md="3"> />
<ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" /> </Col>
</Col> </Row>
</Row> <Row className="mt-2">
<Col sm="12">
</TabPane> <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
<TabPane tabId="zona"> </Col>
<Row> </Row>
<Col md="2"> </TabPane>
<Label className='form-label' for='basicInput'> <TabPane tabId="zona">
Kanwil <Row>
</Label> <Col md="2">
<Select <Label className="form-label" for="basicInput">
placeholder="Pilih Kanwil" Kanwil
className="basic-single w-100" </Label>
onChange={(e) => { <Select
setKanwilSelected(e) placeholder="Pilih Kanwil"
}} className="basic-single w-100"
classNamePrefix="select" onChange={(e) => {
defaultValue={kanwilSelected} setKanwilSelected(e)
value={kanwilSelected} }}
isClearable={false} classNamePrefix="select"
options={kanwil} defaultValue={kanwilSelected}
/> value={kanwilSelected}
</Col> isClearable={false}
<Col md="2"> options={kanwil}
<Label className='form-label' for='Pilih KPP'> />
KPP </Col>
</Label> <Col md="2">
<MultiSelect <Label className="form-label" for="Pilih KPP">
className="me-1 w-full" KPP
hasSelectAll={true} </Label>
debounceDuration={300} <MultiSelect
options={kpp} className="me-1 w-full"
value={kppSelected} hasSelectAll={true}
onChange={(e) => { debounceDuration={300}
setKppSelected(e) options={kpp}
}} value={kppSelected}
labelledBy="Pilih KPP" onChange={(e) => {
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih KPP" }} setKppSelected(e)
/> }}
</Col> labelledBy="Pilih KPP"
<Col md="2"> overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih KPP" }}
<Label className='form-label' for='Pilih Seksi'> />
Seksi </Col>
</Label> <Col md="2">
<MultiSelect <Label className="form-label" for="Pilih Seksi">
className="me-1 w-full" Seksi
hasSelectAll={true} </Label>
debounceDuration={300} <MultiSelect
options={seksi} className="me-1 w-full"
value={seksiSelected} hasSelectAll={true}
onChange={(e) => { debounceDuration={300}
setSeksiSelected(e) options={seksi}
}} value={seksiSelected}
labelledBy="Pilih Seksi" onChange={(e) => {
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }} setSeksiSelected(e)
/> }}
</Col> labelledBy="Pilih Seksi"
<Col md="3"> overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }}
<Label className='form-label' for='Pilih AR'> />
AR </Col>
</Label> <Col md="3">
<MultiSelect <Label className="form-label" for="Pilih AR">
className="me-1 w-full" AR
hasSelectAll={true} </Label>
debounceDuration={300} <MultiSelect
options={ar} className="me-1 w-full"
value={arSelected} hasSelectAll={true}
onChange={(e) => { debounceDuration={300}
setArSelected(e) options={ar}
}} value={arSelected}
labelledBy="Pilih AR" onChange={(e) => {
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }} setArSelected(e)
/> }}
</Col> labelledBy="Pilih AR"
<Col md="3"> overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }}
<Label className='form-label' for='Pilih Zona'> />
Zona Pengawasan </Col>
</Label> <Col md="3">
<MultiSelect <Label className="form-label" for="Pilih Zona">
className="me-1 w-full" Zona Pengawasan
hasSelectAll={true} </Label>
debounceDuration={300} <MultiSelect
options={zp} className="me-1 w-full"
value={zpSelected} hasSelectAll={true}
onChange={(e) => { debounceDuration={300}
setZpSelected(e) options={zp}
}} value={zpSelected}
labelledBy="Pilih Zona" onChange={(e) => {
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Zona" }} setZpSelected(e)
/> }}
</Col> labelledBy="Pilih Zona"
overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Zona" }}
<Col md="2"> />
</Col>
<ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="success" /> </Row>
</Col> <Row className="mt-2">
</Row> <Col sm="12">
</TabPane> <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
</TabContent> </Col>
</Row>
</CardBody> </TabPane>
</Card> </TabContent>
</Col> </CardBody>
</Row> </Card>
</Col>
<Row> </Row>
<Col sm="12">
<Card> <Row>
<CardBody> <Col sm="12">
<div id="graph_matoa_agg"> <Card>
<HighchartsReact <CardBody>
ref={refChart1} <div id="graph_matoa_agg">
highcharts={Highcharts} <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsGraphMatoaAgg} />
options={optionsGraphMatoaAgg} </div>
/> </CardBody>
</div> </Card>
</CardBody> </Col>
</Card> </Row>
</Col> <Row>
</Row> <Col sm="12">
<Row> <Card>
<Col sm="12"> <CardHeader className="d-flex justify-content-center">
<Card> <CardTitle tag={"h1"} className="font-weight-bold">
<CardBody> Statistik Progresifitas Hasil Kegiatan Matoa
<TabProgresifitas /> </CardTitle>
</CardHeader>
</CardBody> <CardBody>
</Card> <TabProgresifitas dataSend={dataSend} />
</Col> </CardBody>
</Row> </Card>
<Toast ref={toast} /> </Col>
</> </Row>
<Row>
<Col sm="12">
<Card>
<CardBody>
<TabPenugasan dataSend={dataSend} />
</CardBody>
</Card>
</Col>
</Row>
<Toast ref={toast} />
</>
)
} }
const container = document.getElementById("app") const container = document.getElementById("app")
const component = <Root /> const component = <Root />
ReactDOM.render(component, container) ReactDOM.render(component, container)

1
package.json
Unescape View File

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

4
webpack.config.js
Unescape View File

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

5
yarn.lock
Unescape View File

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

Write Preview
Loading…
Cancel
Save