engineN/app/Views/kewilayahan/kytp/componentProgresifitas/Sof.js

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