Merged in feature/IO-3554-Form-Row-Layout (pull request #3059)

feature/feature/IO-3554-Form-Row-Layout - Fix Monthly Job Costing (Dashboard)
This commit is contained in:
Dave Richer
2026-02-27 18:09:12 +00:00

View File

@@ -1,4 +1,4 @@
import { Card, Input, Space, Table, Typography } from "antd"; import { Card, Input, Space, Typography } from "antd";
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
import Dinero from "dinero.js"; import Dinero from "dinero.js";
import DashboardRefreshRequired from "../refresh-required.component"; import DashboardRefreshRequired from "../refresh-required.component";
import { pageLimit } from "../../../utils/config"; import { pageLimit } from "../../../utils/config";
import ResponsiveTable from "../../responsive-table/responsive-table.component.jsx";
export default function DashboardMonthlyJobCosting({ data, ...cardProps }) { export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -103,31 +104,33 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
{...cardProps} {...cardProps}
> >
<LoadingSkeleton loading={loading}> <LoadingSkeleton loading={loading}>
<div style={{ height: "100%" }}> <div style={{ height: "100%", minHeight: 0, width: "100%", overflow: "auto" }}>
<Table <ResponsiveTable
size="small"
tableLayout="fixed"
onChange={handleTableChange} onChange={handleTableChange}
pagination={{ placement: "top", defaultPageSize: pageLimit }} pagination={{ placement: "top", defaultPageSize: pageLimit }}
columns={columns} columns={columns}
scroll={{ x: true, y: "calc(100% - 4em)" }} scroll={{ x: "max-content" }}
rowKey="id" rowKey="id"
style={{ height: "100%" }} style={{ width: "100%" }}
dataSource={filteredData} dataSource={filteredData}
summary={() => ( summary={() => (
<Table.Summary.Row> <ResponsiveTable.Summary.Row>
<Table.Summary.Cell> <ResponsiveTable.Summary.Cell>
<Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title> <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
</Table.Summary.Cell> </ResponsiveTable.Summary.Cell>
<Table.Summary.Cell> <ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalSales).toFormat()} {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalSales).toFormat()}
</Table.Summary.Cell> </ResponsiveTable.Summary.Cell>
<Table.Summary.Cell> <ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalCost).toFormat()} {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalCost).toFormat()}
</Table.Summary.Cell> </ResponsiveTable.Summary.Cell>
<Table.Summary.Cell> <ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.gpdollars).toFormat()} {Dinero(costingData?.allSummaryData && costingData.allSummaryData.gpdollars).toFormat()}
</Table.Summary.Cell> </ResponsiveTable.Summary.Cell>
<Table.Summary.Cell></Table.Summary.Cell> <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
</Table.Summary.Row> </ResponsiveTable.Summary.Row>
)} )}
/> />
</div> </div>