admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

Browse Source
This commit is contained in:
Dave
2026-02-26 15:56:57 -05:00
parent 226cc801ae
commit fd6f46e39d
99 changed files with 807 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx
View File

@@ -1,4 +1,5 @@
import { Card, Table, Tag } from "antd";
import { Card, Tag } from "antd";
import ResponsiveTable from "../../responsive-table/responsive-table.component";
import axios from "axios";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
@@ -182,10 +183,11 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
</div>
</Card>
<Card style={{ marginTop: "5px" }} type="inner" title={t("job_lifecycle.titles.top_durations")}>
<Table
<ResponsiveTable
size="small"
pagination={false}
columns={columns}
mobileColumnKeys={["status", "humanReadable", "averageHumanReadable", "statusCount"]}
rowKey={(record) => record.status}
dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}
/>

28
client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
View File

@@ -1,4 +1,5 @@
import { Card, Input, Space, Table, Typography } from "antd";
import { Card, Input, Space, Typography } from "antd";
import ResponsiveTable from "../../responsive-table/responsive-table.component";
import axios from "axios";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
@@ -104,30 +105,31 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
>
<LoadingSkeleton loading={loading}>
<div style={{ height: "100%" }}>
<Table
<ResponsiveTable
onChange={handleTableChange}
pagination={{ placement: "top", defaultPageSize: pageLimit }}
columns={columns}
mobileColumnKeys={["cost_center", "sales", "costs", "gpdollars"]}
scroll={{ x: true, y: "calc(100% - 4em)" }}
rowKey="id"
style={{ height: "100%" }}
dataSource={filteredData}
summary={() => (
<Table.Summary.Row>
<Table.Summary.Cell>
<ResponsiveTable.Summary.Row>
<ResponsiveTable.Summary.Cell>
<Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
</Table.Summary.Cell>
<Table.Summary.Cell>
</ResponsiveTable.Summary.Cell>
<ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalSales).toFormat()}
</Table.Summary.Cell>
<Table.Summary.Cell>
</ResponsiveTable.Summary.Cell>
<ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalCost).toFormat()}
</Table.Summary.Cell>
<Table.Summary.Cell>
</ResponsiveTable.Summary.Cell>
<ResponsiveTable.Summary.Cell>
{Dinero(costingData?.allSummaryData && costingData.allSummaryData.gpdollars).toFormat()}
</Table.Summary.Cell>
<Table.Summary.Cell></Table.Summary.Cell>
</Table.Summary.Row>
</ResponsiveTable.Summary.Cell>
<ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
</ResponsiveTable.Summary.Row>
)}
/>
</div>

6
client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx
View File

@@ -1,5 +1,6 @@
import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import { Card, Space, Switch, Tooltip, Typography } from "antd";
import ResponsiveTable from "../../responsive-table/responsive-table.component";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -359,10 +360,11 @@ export default function DashboardScheduledDeliveryToday({ data, ...cardProps })
{...cardProps}
>
<div style={{ height: "100%" }}>
<Table
<ResponsiveTable
onChange={handleTableChange}
pagination={false}
columns={isTvModeScheduledDelivery ? tvColumns : columns}
mobileColumnKeys={["ro_number", "owner", "status", "vehicle"]}
scroll={{ x: true, y: "calc(100% - 2em)" }}
rowKey="id"
style={{ height: "85%" }}

6
client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
View File

@@ -1,5 +1,6 @@
import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import { Card, Space, Switch, Tooltip, Typography } from "antd";
import ResponsiveTable from "../../responsive-table/responsive-table.component";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -364,10 +365,11 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
{...cardProps}
>
<div style={{ height: "100%" }}>
<Table
<ResponsiveTable
onChange={handleTableChange}
pagination={false}
columns={isTvModeScheduledIn ? tvColumns : columns}
mobileColumnKeys={["ro_number", "owner", "vehicle", "start"]}
scroll={{ x: true, y: "calc(100% - 2em)" }}
rowKey="id"
style={{ height: "85%" }}

6
client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
View File

@@ -1,5 +1,6 @@
import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import { Card, Space, Switch, Tooltip, Typography } from "antd";
import ResponsiveTable from "../../responsive-table/responsive-table.component";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -359,10 +360,11 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
{...cardProps}
>
<div style={{ height: "100%" }}>
<Table
<ResponsiveTable
onChange={handleTableChange}
pagination={false}
columns={isTvModeScheduledOut ? tvColumns : columns}
mobileColumnKeys={["ro_number", "owner", "status", "vehicle"]}
scroll={{ x: true, y: "calc(100% - 2em)" }}
rowKey="id"
style={{ height: "85%" }}