bodyshop/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

import { Card, Input, Space, Table, Typography } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../../utils/sorters";
import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
import Dinero from "dinero.js";
import DashboardRefreshRequired from "../refresh-required.component";

export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [costingData, setcostingData] = useState(null);
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
    sortedInfo: {},
  });

  useEffect(() => {
    async function getCostingData() {
      if (data && data.monthly_sales) {
        setLoading(true);
        const response = await axios.post("/job/costingmulti", {
          jobids: data.monthly_sales.map((x) => x.id),
        });
        setcostingData(response.data);
        setLoading(false);
      }
    }

    getCostingData();
  }, [data]);

  if (!data) return null;
  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };
  const columns = [
    {
      title: t("bodyshop.fields.responsibilitycenter"),
      dataIndex: "cost_center",
      key: "cost_center",
      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
      sortOrder:
        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
    },
    {
      title: t("jobs.labels.sales"),
      dataIndex: "sales",
      key: "sales",
      sorter: (a, b) =>
        parseFloat(a.sales.substring(1)) - parseFloat(b.sales.substring(1)),
      sortOrder:
        state.sortedInfo.columnKey === "sales" && state.sortedInfo.order,
    },

    {
      title: t("jobs.labels.costs"),
      dataIndex: "costs",
      key: "costs",
      sorter: (a, b) =>
        parseFloat(a.costs.substring(1)) - parseFloat(b.costs.substring(1)),
      sortOrder:
        state.sortedInfo.columnKey === "costs" && state.sortedInfo.order,
    },

    {
      title: t("jobs.labels.gpdollars"),
      dataIndex: "gpdollars",
      key: "gpdollars",
      sorter: (a, b) =>
        parseFloat(a.gpdollars.substring(1)) -
        parseFloat(b.gpdollars.substring(1)),

      sortOrder:
        state.sortedInfo.columnKey === "gpdollars" && state.sortedInfo.order,
    },
    {
      title: t("jobs.labels.gppercent"),
      dataIndex: "gppercent",
      key: "gppercent",
      sorter: (a, b) =>
        parseFloat(a.gppercent.slice(0, -1) || 0) -
        parseFloat(b.gppercent.slice(0, -1) || 0),
      sortOrder:
        state.sortedInfo.columnKey === "gppercent" && state.sortedInfo.order,
    },
  ];
  const filteredData =
    searchText === ""
      ? (costingData && costingData.allCostCenterData) || []
      : costingData.allCostCenterData.filter((d) =>
          (d.cost_center || "")
            .toString()
            .toLowerCase()
            .includes(searchText.toLowerCase())
        );

  return (
    <Card
      title={t("dashboard.titles.monthlyjobcosting")}
      extra={
        <Space wrap>
          <Input.Search
            placeholder={t("general.labels.search")}
            value={searchText}
            onChange={(e) => {
              e.preventDefault();
              setSearchText(e.target.value);
            }}
          />
        </Space>
      }
      {...cardProps}
    >
      <LoadingSkeleton loading={loading}>
        <div style={{ height: "100%" }}>
          <Table
            onChange={handleTableChange}
            pagination={{ position: "top", defaultPageSize: 50 }}
            columns={columns}
            scroll={{ x: true, y: "calc(100% - 4em)" }}
            rowKey="id"
            style={{ height: "100%" }}
            dataSource={filteredData}
            summary={() => (
              <Table.Summary.Row>
                <Table.Summary.Cell>
                  <Typography.Title level={4}>
                    {t("general.labels.totals")}
                  </Typography.Title>
                </Table.Summary.Cell>
                <Table.Summary.Cell>
                  {Dinero(
                    costingData &&
                      costingData.allSummaryData &&
                      costingData.allSummaryData.totalSales
                  ).toFormat()}
                </Table.Summary.Cell>
                <Table.Summary.Cell>
                  {Dinero(
                    costingData &&
                      costingData.allSummaryData &&
                      costingData.allSummaryData.totalCost
                  ).toFormat()}
                </Table.Summary.Cell>
                <Table.Summary.Cell>
                  {Dinero(
                    costingData &&
                      costingData.allSummaryData &&
                      costingData.allSummaryData.gpdollars
                  ).toFormat()}
                </Table.Summary.Cell>
                <Table.Summary.Cell></Table.Summary.Cell>
              </Table.Summary.Row>
            )}
          />
        </div>
      </LoadingSkeleton>
    </Card>
  );
}