engineN/app/Views/kewilayahan/kytp/componentPenugasanAktifitas/PenugasanKpdl.js

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Col, Row } from 'reactstrap'
import { Badge } from 'primereact/badge'
import { Button as ButtonP } from 'primereact/button'
import { format_angka } from '../util'
import collect from 'collect.js'
import jquery from 'jquery'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'

import { Sidebar } from 'primereact/sidebar'
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import { Text } from '@mantine/core'

import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
import dayjs from 'dayjs'
var relativeTime = require('dayjs/plugin/relativeTime')
const fetchSize = 101

const PenugasanKpdl = ({ dataSend }) => {
  const base_url = '<?=base_url()?>'

  const refChart = useRef(null)
  const [data, setData] = useState({
    kpdl: [],
    akum: [],
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  })

  const [selectedBulan, setSelectedBulan] = useState('')
  const [selectedBulanText, setSelectedBulanText] = useState('semua')
  const [bulan, setBulan] = useState([])

  const [visibleSidebar, setVisibleSidebar] = useState(false)
  const [query, setQuery] = useState(null)

  useEffect(() => {
    if (selectedBulan != '') {
      jquery.get({
        url: base_url + 'kewilayahan/kytp/identifikasiLapangan',
        dataType: 'json',
        type: 'POST',
        data: {
          ...dataSend,
          bulan: selectedBulan
        },
        success: (data) => {
          setData(data)
        }
      })
    }
  }, [dataSend, selectedBulan])

  useEffect(() => {
    jquery.get({
      url: base_url + 'kewilayahan/kytp/getBulan',
      dataType: 'json',
      type: 'GET',
      success: (data) => {
        setBulan(data)
        setSelectedBulan(data[0].value)
      }
    })
  }, [])

  const optionsChart1 = () => {
    return {
      chart: {
        zoomType: 'xy',
        height: '320pt'
      },
      title: {
        text: '',
        align: 'left'
      },
      subtitle: {
        align: 'left'
      },
      xAxis: [
        {
          categories: data.categories,
          crosshair: true
        }
      ],

      yAxis: [
        {
          labels: {
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          title: {
            text: 'Lokasi KPDL',
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          opposite: true
        },
        {
          title: {
            text: 'Lokasi KPDL s.d.',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          labels: {
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          opposite: true
        }
      ],

      tooltip: {
        shared: true
      },
      legend: {
        layout: 'horizontal',
        align: 'center',

        verticalAlign: 'top',
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || // theme
          'rgba(255,255,255,0.25)'
      },
      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function () {
                // console.log(this)
                if (this.series.userOptions.seriesType === 'kpdl_tunggal') {
                  setQuery(this.index + 1)
                  setVisibleSidebar(true)
                } else {
                  return
                }
              }
            }
          }
        }
      },
      series: [
        {
          name: 'Lokasi KPDL',
          seriesType: 'kpdl_tunggal',
          type: 'column',
          yAxis: 0,
          color: Highcharts.getOptions().colors[2],
          data: data.kpdl,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: ' Kpdl'
          }
        },

        {
          name: 'Lokasi KPDL akumulasi',
          seriesType: 'kpdl_akumulasi',
          type: 'spline',
          yAxis: 1,
          data: data.akum,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: ' data'
          },
          visible: false
        }
      ]
    }
  }

  const refBulanOnClick = (e) => {
    const kodeBulan = e.target.dataset.value
    const labelBulan = e.target.dataset.label
    setSelectedBulan(kodeBulan)
    setSelectedBulanText(labelBulan)
  }

  const TableDetailGraph = ({ dataSend, query }) => {
    const tableContainerRef = useRef(null)
    const rowVirtualizerInstanceRef = useRef(null)
    const [columnFilters, setColumnFilters] = useState([])
    const [globalFilter, setGlobalFilter] = useState()
    const [sorting, setSorting] = useState([])
    const base_url = '<?=base_url()?>'
    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
      queryKey: ['table-data', columnFilters, globalFilter, sorting],

      queryFn: async ({ pageParam = 0 }) => {
        const url = new URL(base_url + 'kewilayahan/identaktifitashasil/identifikasilapangan/detail')
        url.searchParams.set('start', `${pageParam * fetchSize}`)
        url.searchParams.set('size', `${fetchSize}`)
        url.searchParams.set('filters', JSON.stringify(columnFilters ?? []))
        url.searchParams.set('globalFilter', globalFilter ?? '')
        url.searchParams.set('sorting', JSON.stringify(sorting ?? []))

        const response = await fetch(url.href, {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            query,
            selectedBulan,
            ...dataSend
          })
        })

        const json = await response.json()
        return json
      },
      getNextPageParam: (_lastGroup, groups) => groups.length,
      keepPreviousData: true,
      refetchOnWindowFocus: false
    })

    const flatData = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data])
    const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
    const totalFetched = flatData.length

    const fetchMoreOnBottomReached = useCallback(
      (containerRefElement) => {
        if (containerRefElement) {
          const { scrollHeight, scrollTop, clientHeight } = containerRefElement
          //once the user has scrolled within 400px of the bottom of the table, fetch more data if we can
          if (scrollHeight - scrollTop - clientHeight < 400 && !isFetching && totalFetched < totalDBRowCount) {
            fetchNextPage()
          }
        }
      },

      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
    )

    const columns = [
      {
        accessorKey: 'NAMA',
        header: 'Nama'
      },

      {
        accessorKey: 'MERK_USAHA',
        header: 'Merk Usaha'
      },
      {
        accessorKey: 'NO_IDENTITAS',
        header: 'No Identitas'
      },
      {
        accessorKey: 'NPWP',
        header: 'NPWP',
        enableClickToCopy: true,
        size: 150
      },
      {
        accessorKey: 'ALAMAT',
        header: 'Alamat'
      },
      {
        accessorKey: 'KELURAHAN',
        header: 'Wil. Adm.',
        Cell: (data) => {
          const dataRow = data.row.original
          return `${dataRow.KELURAHAN} ${dataRow.KECAMATAN} ${dataRow.KABUPATEN} ${dataRow.PROVINSI}`
        }
      },
      {
        accessorKey: 'STATUS_WP_MFWP',
        header: 'Status WP'
      },
      {
        accessorKey: 'JNS_WP_MFWP',
        header: 'Jenis WP'
      },
      {
        accessorKey: 'NM_KANTOR_PENGAMPU',
        header: 'KPP Terdaftar'
      },
      {
        accessorKey: 'NM_AR_PENGAMPU',
        header: 'AR Pengampu'
      },
      {
        accessorKey: 'JUMLAH_PEMBAYARAN_THN_TERAKHIR',
        header: 'Rp',
        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
        mantineTableHeadCellProps: {
          align: 'right'
        },
        mantineTableBodyCellProps: {
          align: 'right'
        },
        size: 100
      },
      {
        accessorKey: 'KETERANGAN',
        header: 'SPT'
      },
      {
        accessorKey: 'SUM_NILAI',
        header: 'NILAI DATA',
        Cell: ({ cell }) => parseFloat(cell.getValue()).toLocaleString('id-ID'),
        mantineTableHeadCellProps: {
          align: 'right'
        },
        mantineTableBodyCellProps: {
          align: 'right'
        }
      },
      {
        accessorKey: 'NM_KPP_ZONA',
        header: 'KPP Lokasi'
      },
      {
        accessorKey: 'NM_AR_ZONA',
        header: 'AR Wilayah',
        filter: false
      },
      {
        accessorKey: 'NM_PEREKAM',
        header: 'Perekam'
      },
      {
        accessorKey: 'CREATION_DATE',
        header: 'Tgl Rekam',
        Cell: ({ cell }) => {
          return dayjs(cell.getValue()).format('YYYY-MM-DD HH:mm:ss')
        }
      }
    ]

    useEffect(() => {
      if (rowVirtualizerInstanceRef.current) {
        try {
          rowVirtualizerInstanceRef.current.scrollToIndex(0)
        } catch (e) {
          console.error(e)
        }
      }
    }, [sorting, columnFilters, globalFilter])

    //a check on mount to see if the table is already scrolled to the bottom and immediately needs to fetch more data

    useEffect(() => {
      fetchMoreOnBottomReached(tableContainerRef.current)
    }, [fetchMoreOnBottomReached])

    const table1 = useMantineReactTable({
      columns,
      data: flatData,
      enablePagination: false,
      enableRowNumbers: true,
      enableRowVirtualization: true, //optional, but recommended if it is likely going to be more than 100 rows
      manualFiltering: true,
      manualSorting: true,
      mantineTableContainerProps: {
        ref: tableContainerRef, //get access to the table container element
        sx: { maxHeight: '600px' }, //give the table a max height
        onScroll: (
          event //add an event listener to the table container element
        ) => fetchMoreOnBottomReached(event.target)
      },
      mantineToolbarAlertBannerProps: {
        color: 'red',
        children: 'Error loading data'
      },
      onColumnFiltersChange: setColumnFilters,
      onGlobalFilterChange: setGlobalFilter,
      onSortingChange: setSorting,
      renderBottomToolbarCustomActions: () => (
        <Text className="text-sm">
          Fetched {totalFetched} of {totalDBRowCount} total rows.
        </Text>
      ),
      state: {
        columnFilters,
        globalFilter,
        isLoading,
        showAlertBanner: isError,
        showProgressBars: isFetching,
        sorting
      },
      rowVirtualizerInstanceRef, //get access to the virtualizer instance
      rowVirtualizerProps: { overscan: 10 },
      mantineTableBodyCellProps: { className: 'p-1 text-xs' }
    })

    return <MantineReactTable table={table1} />
  }

  const queryClient = new QueryClient()

  return (
    <>
      <Row>
        <Col md="12">
          <div className="d-flex justify-content-between border-bottom-1 pb-2">
            <div>
              <span className="mr-2"> Bulan : </span>
              {bulan.map((val, idx) => {
                return (
                  <Badge
                    key={idx}
                    id={idx}
                    data-value={val.value}
                    data-label={val.label}
                    severity="warning"
                    value={val.label}
                    className="ref_bulan_a cursor-pointer mr-10"
                    onClick={(e) => refBulanOnClick(e)}
                  >
                    {' '}
                  </Badge>
                )
              })}
            </div>
            <div>
              <span>Bulan terpilih: </span>
              <span> {selectedBulanText} </span>
            </div>
          </div>
        </Col>
      </Row>
      <Row>
        <Col>
          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} />
        </Col>
      </Row>
      <Row>
        <Col>
          <Sidebar
            header={
              <>
                <h4>Detail Data </h4>
              </>
            }
            visible={visibleSidebar}
            position="bottom"
            onHide={() => setVisibleSidebar(false)}
            style={{ height: 'calc(100vh - 100px)' }}
            blockScroll
            pt={{ header: { className: 'p-1' }, closeButton: { style: { width: '2rem', height: '1rem' } } }}
          >
            <Row>
              <Col>
                <QueryClientProvider client={queryClient}>
                  <TableDetailGraph dataSend={dataSend} query={query} />
                </QueryClientProvider>
              </Col>
            </Row>
          </Sidebar>
        </Col>
      </Row>
    </>
  )
}

export default PenugasanKpdl