engineN/app/Views/kewilayahan/monitoringPerubahanPerilaku/componentMonitoring/Kpp.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 Kpp = () => {
  const base_url = '/engineN/'
  const toast = useRef(null)
  const [isLoading, setIsLoading] = useState()
  const rowVirtualizerInstanceRef = useRef(null)

  const [data, setData] = useState([])
  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) => {
      // console.log({ val })
      val.subRows.map((val2, _idx2) => {
        // console.log({ val2 })
        data2.push(val2)
      })
    })
    setData(data2)
    setIsLoading(false)
  }, [storeKpdl.dataMonitoringPerubahanPerilakuPenambahanWpBayar])

  const columns = useMemo(
    () => [
      {
        accessorKey: 'LABEL',
        header: 'Unit/Pegawai',
        size: 200,
        mantineTableBodyCellProps: ({ cell }) => {
          const rowObject = cell.row.original
        }
        // footer: `Total`
      },
      {
        accessorKey: 'BLN_1',
        header: 'Jan',
        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_1, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_2',
        header: 'Feb',
        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_2, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_3',
        header: 'Mar',
        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_3, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_4',
        header: 'Apr',
        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_4, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        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'),
        footer: (
          <span className="pe-1 right">
            {Number(data.reduce((acc, row) => acc + row.BLN_6, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_7',
        header: 'Jul',
        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_7, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_8',
        header: 'Agu',
        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_8, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_9',
        header: 'Sep',
        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_9, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_10',
        header: 'Okt',
        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_10, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_11',
        header: 'Nov',
        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_11, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'BLN_12',
        header: 'Des',
        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_12, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      },
      {
        accessorKey: 'TOTAL',
        header: 'Total',
        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.TOTAL, 0)).toLocaleString('id-ID', {
              maximumFractionDigits: 0
            })}
          </span>
        )
      }
    ],
    []
  )

  const table = useMantineReactTable({
    columns,
    data, //10,000 rows
    enableBottomToolbar: false,
    enableGlobalFilterModes: true,
    enablePagination: false,
    enableRowVirtualization: true,
    mantineTableContainerProps: { sx: { maxHeight: '600px' }, className: 'p-2' },
    onSortingChange: setSorting,
    state: { isLoading, sorting },
    rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
    enableExpanding: true,
    mantineTopToolbarProps: { allowFullScreen: false },
    enableFullScreenToggle: false,
    enablePagination: false,
    mantineTableBodyCellProps: ({ cell }) => ({
      className: 'text-xs py-1',
      sx: {
        backgroundColor: cell.row.depth === 1 ? 'ButtonHighlight' : 'inherit',
        fontWeight: cell.row.depth === 0 ? '600' : 'inherit'
      }
    }),
    mantineTableBodyProps: { className: 'mb-3' },
    mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' },
    // renderBottomToolbar: ({ table }) => (
    //   <div>
    //     <Row className="pl-5 text-xs">
    //       <Col>
    //         <Label>Legenda Tabel :</Label>
    //         <ul>
    //           <li style={{ color: 'blue' }}>Kepala Seksi</li>
    //           <li style={{ color: 'red' }}>Eks Kepala/Anggota Seksi terkait</li>
    //         </ul>
    //       </Col>
    //     </Row>
    //   </div>
    // ),

    // enableStickyFooter: true,
    rowVirtualizerInstanceRef
  })
  return (
    <>
      <Row style={{ minHeight: '200px' }}>
        <Col>
          <MantineReactTable
            table={table}
            mantineTableProps={{
              highlightOnHover: false,
              withColumnBorders: true,
              sx: {
                'tbody > tr > td': {
                  padding: '0.4rem 0.4rem',
                  fontSize: '0.96rem'
                },
                'tfoot > tr > th': {
                  textAlign: 'end',
                  borderBottom: '1px solid #dee2e6',
                  borderRight: '0.0625rem solid #dee2e6',
                  borderTop: 'none',
                  padding: '0.4rem 0.4rem'
                }
              }
            }}
          />
        </Col>
      </Row>
    </>
  )
}

export default Kpp