engineN/app/Views/kewilayahan/kytp/kpdl.js

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { Card, CardBody, CardHeader, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
import Select from 'react-select'
import jquery, { data, getJSON } from 'jquery'
import collect from 'collect.js'
import { format_angka, isObjEmpty } from './util'
import { MultiSelect } from 'react-multi-select-component'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Toast } from 'primereact/toast'
import { Button as ButtonP } from 'primereact/button'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
import TabProgresifitas from './TabProgresifitas'
import TabPenugasan from './TabPenugasan'
import NipPerekam from './componentDepan/NipPerekam'
import NipPengampu from './componentDepan/NipPengampu'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { store } from './store/store'
import { setSelectedOpsi } from './store/KpdlStore'
// import 'bootstrap/dist/css/bootstrap.m in.css';
// let datasend = {}

const Root = () => {
  const base_url = '<?=base_url()?>'
  const refChart1 = useRef(null)
  const toast = useRef(null)
  const dispatch = useDispatch()
  const storeKpdl = useSelector((state) => state.kpdl)
  const [dataOpsi, setDataOpsi] = useState({})
  const [active, setActive] = useState('zona')

  const [hiddenGraphMatoa, setHiddenGraphMatoa] = useState(false)

  const toggle = (tab) => {
    setActive(tab)
  }

  const [prop, setProp] = useState({})
  const [kota, setKota] = useState({})
  const [kec, setKec] = useState([])
  const [kel, setKel] = useState([])

  const [propSelected, setPropSelected] = useState({})
  const [kotaSelected, setKotaSelected] = useState({})
  const [kecSelected, setKecSelected] = useState([])
  const [kelSelected, setKelSelected] = useState([])

  const [kanwil, setKanwil] = useState({})
  const [kpp, setKpp] = useState({})
  const [seksi, setSeksi] = useState([])
  const [ar, setAr] = useState([])
  const [zp, setZp] = useState([])

  const [kanwilSelected, setKanwilSelected] = useState({})
  const [kppSelected, setKppSelected] = useState({})
  const [seksiSelected, setSeksiSelected] = useState([])
  const [arSelected, setArSelected] = useState([])
  const [zpSelected, setZpSelected] = useState([])

  const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [], nip_ar_perekam: [], nip_ar_pengampu: [] })
  const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })
  // let session = null
  const [session, setSession] = useState({})
  useEffect(() => {
    // setTimeout(() => {
    jquery.ajax({
      url: base_url + 'kewilayahan/ref/user',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setSession(data)
        if (data.kppadm === '000') {
          toggle('wilayah')
        } else {
          toggle('zona')
        }
      }
    })
    // }, 2000)

    jquery.ajax({
      url: base_url + 'kewilayahan/ref/propinsi',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setProp(data)
      }
    })

    jquery.ajax({
      url: base_url + 'kewilayahan/ref/zpkanwil',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setKanwil(data)
      }
    })

    jquery.getJSON(base_url + 'kewilayahan/ref/opsi').then((response) => {
      setDataOpsi(response)
      dispatch(setSelectedOpsi(response.default))
    })

    let judul = document.getElementById('judul')
    judul.innerHTML = '<h3><b><strong>E-Geospatial Thematic Tax</strong></b></h3>'
  }, [])

  useEffect(() => {
    setKota({})
    setKec([])
    setKel([])
    setKotaSelected({})
    setKecSelected([])
    setKelSelected([])
    if (propSelected && !isObjEmpty(propSelected)) {
      const prop = propSelected.value
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/kota',
        method: 'GET',
        dataType: 'json',
        data: { prop },
        success: (data) => {
          setKota(data)
        }
      })
    }
  }, [propSelected])

  useEffect(() => {
    setKec([])
    setKel([])
    setKecSelected([])
    setKelSelected([])
    if (kotaSelected && !isObjEmpty(kotaSelected)) {
      const kota = kotaSelected.value
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/kecamatan',
        method: 'GET',
        dataType: 'json',
        data: { kota },
        success: (data) => {
          setKec(data)
        }
      })
    }
  }, [kotaSelected])

  useEffect(() => {
    setKel([])
    setKelSelected([])
    if (kecSelected.length && !isObjEmpty(kecSelected)) {
      const kec = collect(kecSelected).pluck('value').all()
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/kelurahan',
        method: 'POST',
        dataType: 'json',
        data: { kec },
        success: (data) => {
          setKel(data)
        }
      })
    }
  }, [kecSelected])

  useEffect(() => {
    setKpp(null)
    setSeksi([])
    setAr([])
    setZp([])
    setKppSelected(null)
    setSeksiSelected([])
    setArSelected([])
    setZpSelected([])
    if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
      const kanwil = kanwilSelected.value
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/zpkpp',
        method: 'POST',
        dataType: 'json',
        data: { kanwil },
        success: (data) => {
          setKpp(data)
        }
      })
    }
  }, [kanwilSelected])

  useEffect(() => {
    setSeksi([])
    setAr([])
    setZp([])
    setSeksiSelected([])
    setArSelected([])
    setZpSelected([])
    if (kppSelected && !isObjEmpty(kppSelected)) {
      const kpp = kppSelected.value
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/zpseksi',
        method: 'POST',
        dataType: 'json',
        data: { kpp },
        success: (data) => {
          setSeksi(data)
        }
      })
    }
  }, [kppSelected])

  useEffect(() => {
    setAr([])
    setZp([])
    setArSelected([])
    setZpSelected([])
    if (seksiSelected && !isObjEmpty(seksiSelected)) {
      const kpp = kppSelected.value
      const seksi = collect(seksiSelected).pluck('value').all()

      jquery.ajax({
        url: base_url + 'kewilayahan/ref/zpar',
        method: 'POST',
        dataType: 'json',
        data: { kpp, seksi },
        success: (data) => {
          setAr(data)
        }
      })
    }
  }, [seksiSelected])

  useEffect(() => {
    setZp([])
    setZpSelected([])
    if (arSelected && !isObjEmpty(arSelected)) {
      const kpp = kppSelected.value
      const seksi = collect(seksiSelected).pluck('value').all()
      const ar = collect(arSelected).pluck('value').all()
      jquery.ajax({
        url: base_url + 'kewilayahan/ref/zpzp',
        method: 'POST',
        dataType: 'json',
        data: { kpp, seksi, ar },
        success: (data) => {
          setZp(data)
        }
      })
    }
  }, [arSelected])

  const buttonProsesOnClick = () => {
    const opsiWilZona = active
    const adm4_pcode = collect(kelSelected).pluck('value').all()
    const id_poly_zona = collect(zpSelected).pluck('value').all()
    const nip_ar_pengampu = collect().pluck('value').all()

    switch (opsiWilZona) {
      case 'wilayah':
        if (adm4_pcode.length) {
          dispatch(setSelectedOpsi(dataOpsi.wilayah))
          setDataSend({ opsiWilZona: dataOpsi.wilayah.key, adm4_pcode, id_poly_zona: [] })
          setHiddenGraphMatoa(false)
        } else {
          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' })
        }
        break
      case 'zona':
        if (id_poly_zona.length) {
          dispatch(setSelectedOpsi(dataOpsi.zona))
          setDataSend({ opsiWilZona: dataOpsi.zona.key, adm4_pcode: [], id_poly_zona })
          setHiddenGraphMatoa(false)
        } else {
          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' })
        }
        break

      default:
        break
    }
  }

  useEffect(() => {}, [storeKpdl.selectedOpsi])

  useEffect(() => {
    Highcharts.setOptions({
      accessibility: false,
      lang: {
        decimalPoint: ',',
        thousandsSep: '.',
        numericSymbols: ['rb', 'jt', 'M', 'T', 'P', 'E']
      },

      tooltip: {
        yDecimals: 2 // If you want to add 2 decimals
      }
    })
    jquery.ajax({
      url: base_url + 'kewilayahan/kytp/graph_matoa',
      dataType: 'json',
      type: 'POST',
      data: { ...dataSend },
      success: (data) => {
        setDataGraphMatoa(data)
      }
    })
  }, [dataSend])

  const optionsGraphMatoaAgg = {
    chart: {
      zoomType: 'xy',
      height: '320'
    },
    title: {
      text: 'Poi Google Vs Matoa',
      style: { fontSize: '14px' }
    },

    xAxis: [
      {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
      }
    ],
    yAxis: [
      {
        gridLineWidth: 0,
        title: {
          text: '',
          style: {
            color: Highcharts.getOptions().colors[0]
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[0]
          }
        },
        visible: false
      },
      {
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        },
        title: {
          text: 'NPWP Work True',
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        },
        opposite: true,
        visible: false
      },
      {
        gridLineWidth: 0,
        title: {
          text: 'Rupiah',
          style: {
            color: Highcharts.getOptions().colors[2]
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[2]
          }
        },
        opposite: true,
        visible: false
      },
      {
        gridLineWidth: 0,
        title: {
          text: '',
          style: {
            color: '#FF0000'
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: '##FF0000'
          }
        },
        opposite: true
      }
    ],
    tooltip: {
      shared: true
    },
    legend: {
      layout: 'horizontal',
      align: 'center',
      //x: 80,
      verticalAlign: 'top',
      //y: 55,
      //floating: true,
      backgroundColor:
        Highcharts.defaultOptions.legend.backgroundColor || // theme
        'rgba(255,255,255,0.25)'
    },
    series: [
      {
        color: '#FF0000',
        name: 'Jml PoI',
        type: 'column',
        yAxis: 3,
        data: dataGraphMatoa.poi_agg,
        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
        },
        visible: true,
        color: '#8000ff'
      }
    ]
  }

  return (
    <>
      <Row>
        <Col sm="12">
          <Card>
            <CardBody>
              <Nav tabs>
                {session.kppadm === '000' ? (
                  <NavItem>
                    <NavLink
                      style={{ cursor: 'pointer' }}
                      active={active === 'wilayah'}
                      onClick={() => {
                        toggle('wilayah')
                      }}
                    >
                      Wilayah Adm.
                    </NavLink>
                  </NavItem>
                ) : null}
                <NavItem>
                  <NavLink
                    style={{ cursor: 'pointer' }}
                    active={active === 'zona'}
                    onClick={() => {
                      toggle('zona')
                    }}
                  >
                    Zona Pengawasan
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ cursor: 'pointer' }}
                    active={active === 'perekam'}
                    onClick={() => {
                      toggle('perekam')
                    }}
                  >
                    Perekam
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ cursor: 'pointer' }}
                    active={active === 'pengampu'}
                    onClick={() => {
                      toggle('pengampu')
                    }}
                  >
                    Pengampu
                  </NavLink>
                </NavItem>
              </Nav>
              <TabContent className="py-3" activeTab={active}>
                <TabPane tabId="wilayah">
                  <Row>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Propinsi
                      </Label>
                      <Select
                        placeholder="Pilih Propinsi"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setPropSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={propSelected}
                        value={propSelected}
                        isClearable={false}
                        options={prop}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Kota/Kab
                      </Label>
                      <Select
                        placeholder="Pilih Kota/Kab"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKotaSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={kotaSelected}
                        value={kotaSelected}
                        isClearable={false}
                        options={kota}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Kecamatan">
                        Kecamatan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={kec}
                        value={kecSelected}
                        onChange={(e) => {
                          setKecSelected(e)
                        }}
                        labelledBy="Pilih Kecamatan"
                        overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Kecamatan' }}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Kelurahan">
                        Kelurahan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={kel}
                        value={kelSelected}
                        onChange={(e) => {
                          setKelSelected(e)
                        }}
                        labelledBy="Pilih Kelurahan"
                        overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Kelurahan' }}
                      />
                    </Col>
                  </Row>
                  <Row className="mt-2">
                    <Col sm="12">
                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tabId="zona">
                  <Row>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Kanwil
                      </Label>
                      <Select
                        placeholder="Pilih Kanwil"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKanwilSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={kanwilSelected}
                        isClearable={false}
                        options={kanwil}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih KPP">
                        KPP
                      </Label>
                      <Select
                        placeholder="Pilih KPP"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKppSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={kppSelected}
                        isClearable={false}
                        options={kpp}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Seksi">
                        Seksi
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={seksi}
                        value={seksiSelected}
                        onChange={(e) => {
                          setSeksiSelected(e)
                        }}
                        labelledBy="Pilih Seksi"
                        overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Seksi' }}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih AR">
                        AR
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={ar}
                        value={arSelected}
                        onChange={(e) => {
                          setArSelected(e)
                        }}
                        labelledBy="Pilih AR"
                        overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih AR' }}
                      />
                    </Col>
                  </Row>
                  <Row className="mt-2">
                    <Col md="3">
                      <Label className="form-label" for="Pilih Zona">
                        Zona Pengawasan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={zp}
                        value={zpSelected}
                        onChange={(e) => {
                          setZpSelected(e)
                        }}
                        labelledBy="Pilih Zona"
                        overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Zona' }}
                      />
                    </Col>
                    <Col md="3" className="pt-4">
                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tabId="perekam">
                  <NipPerekam
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={active}
                    toast={toast}
                    setHiddenGraphMatoa={setHiddenGraphMatoa}
                    dataOpsi={dataOpsi}
                  />
                </TabPane>
                <TabPane tabId="pengampu">
                  <NipPengampu
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={active}
                    toast={toast}
                    setHiddenGraphMatoa={setHiddenGraphMatoa}
                    dataOpsi={dataOpsi}
                  />
                </TabPane>
              </TabContent>
            </CardBody>
          </Card>
        </Col>
      </Row>

      <Row hidden={['pengampu', 'perekam'].includes(storeKpdl.selectedOpsi?.name)}>
        <Col sm="12">
          <Card>
            <CardHeader className="d-flex justify-content-center p-2">
              <CardTitle tag={'h1'} className="font-weight-bold">
                Statistik Penguasaan Wilayah
              </CardTitle>
            </CardHeader>
            <CardBody className="p-1">
              <div id="graph_matoa_agg">
                <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsGraphMatoaAgg} />
              </div>
            </CardBody>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col sm="12">
          <Card>
            <CardHeader className="d-flex justify-content-center p-2">
              <CardTitle tag={'h1'} className="font-weight-bold">
                Statistik Progresifitas & Sebaran Data Hasil Kegiatan Matoa
              </CardTitle>
            </CardHeader>
            <CardBody>
              <TabProgresifitas dataSend={dataSend} />
            </CardBody>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col sm="12">
          <TabPenugasan dataSend={dataSend} />
        </Col>
      </Row>
      <Toast ref={toast} />
    </>
  )
}

const container = document.getElementById('app')
const component = (
  <Provider store={store}>
    <Root />
  </Provider>
)

ReactDOM.render(component, container)