engineN/app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Pegawai.js

import React, { useEffect, useMemo, useRef, useState } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap'
import collect from 'collect.js'
import { Toast } from 'primereact/toast'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import jquery from 'jquery'
import { isObjEmpty, titleCase } from '../../kytp/util'
import { useSelector } from 'react-redux'
const date = new Date()

const Pegawai = () => {
  const base_url = '/engineN/'
  const toast = useRef(null)

  const refChart1 = useRef()
  const refChart2 = useRef()
  const refChart3 = useRef()
  //   const refChart4 = useRef()

  const [data, setData] = useState([])
  const [isLoading, setIsLoading] = useState()
  const rowVirtualizerInstanceRef = useRef(null)
  const [sorting, setSorting] = useState([{ id: 'TOTAL', desc: true }])
  const storeKpdl = useSelector((state) => state.kpdl)
  useEffect(() => {
    if (data.length) {
      try {
        //scroll to the top of the table when the sorting changes
        rowVirtualizerInstanceRef.current?.scrollToIndex(0)
      } catch (e) {
        // console.log(e)
      }
    }
  }, [sorting])

  useEffect(() => {
    const sharedData = storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar
    const data2 = []
    sharedData.map((val, _idx) => {
      val.subRows.map((val2, _idx2) => {
        val2.subRows.map((val3, _idx3) => {
          data2.push(...val3.subRows)
        })
      })
    })
    setData(data2)
    setIsLoading(false)
  }, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar])

  const columns = useMemo(
    () => [
      {
        accessorKey: 'LABEL',
        header: 'Unit/Pegawai',
        size: 200,
        Cell: ({ cell }) => {
          const rowData = cell.row.original
          return cell.getValue() + ' - ' + rowData.NAMA_KANTOR + ' - ' + rowData.NAMA_UNIT_ES4
        },
        mantineTableBodyCellProps: ({ cell }) => {
          // const rowObject = cell.row.original
          // if (!cell.row.getCanExpand()) {
          //   if (rowObject.ISEXIST_INWAS === 'FALSE') {
          //     return { style: { color: 'red' } }
          //   }
          //   if (rowObject.NAMA_JABATAN === 'Kepala Seksi') {
          //     return { style: { color: 'blue' } }
          //   }
          // }
        }
      },
      {
        accessorKey: 'BLN_1',
        header: 'Jan',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_2',
        header: 'Feb',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_3',
        header: 'Mar',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_4',
        header: 'Apr',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_5',
        header: 'Mei',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID'),
        footer: (
          <span className="pe-1 right">
            {Number(data.reduce((acc, row) => acc + row.BLN_5, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_6',
        header: 'Jun',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_7',
        header: 'Jul',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_8',
        header: 'Agu',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_9',
        header: 'Sep',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_10',
        header: 'Okt',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_11',
        header: 'Nov',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'BLN_12',
        header: 'Des',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'TOTAL',
        header: 'Total',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      }
    ],
    []
  )
  const table = useMantineReactTable({
    columns,
    data, //10,000 rows
    enableBottomToolbar: false,
    enableGlobalFilterModes: true,
    enableRowVirtualization: true,
    mantineTableContainerProps: { sx: { maxHeight: '600px' } },
    onSortingChange: setSorting,
    state: { isLoading, sorting },
    rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
    mantineTopToolbarProps: { allowFullScreen: false },
    enableFullScreenToggle: false,
    enablePagination: false,
    mantineTableBodyCellProps: ({ cell }) => ({
      className: 'text-xs py-1',
      sx: {
        fontWeight: cell.row.depth === 0 ? '600' : 'inherit'
      }
    }),
    mantineTableBodyProps: { className: 'mb-3' },
    mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' },
    renderBottomToolbar: false,
    mantineTableProps: {
      highlightOnHover: false,
      withColumnBorders: true
    },
    rowVirtualizerInstanceRef,
    enableRowNumbers: true,
    displayColumnDefOptions: {
      'mrt-row-numbers': {
        mantineTableBodyCellProps: {
          align: 'center'
        },
        size: 80
      }
    }
  })
  return (
    <>
      <Row style={{ minHeight: '200px' }}>
        <Col>
          <MantineReactTable table={table} />
        </Col>
      </Row>
    </>
  )
}

export default Pegawai