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

feature/IO-3532-parts-queue-ui-adjustments

Browse Source
This commit is contained in:
Dave
2026-02-02 16:14:44 -05:00
parent cadcfc9b0d
commit 1f726aca4d
2 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/components/job-parts-queue-count/job-parts-queue-count.component.jsx
View File

@@ -3,14 +3,11 @@ import { Tooltip } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
const mapDispatchToProps = () => ({});
const colorMap = {
gray: { bg: "#fafafa", border: "#d9d9d9", text: "#000000" },
@@ -21,8 +18,9 @@ const colorMap = {
orange: { bg: "#fff7e6", border: "#ffd591", text: "#d46b08" }
};
function CompactTag({ color = "gray", children }) {
function CompactTag({ color = "gray", children, tooltip = "" }) {
const colors = colorMap[color] || colorMap.gray;
return (
<span
style={{
@@ -36,12 +34,11 @@ function CompactTag({ color = "gray", children }) {
border: `1px solid ${colors.border}`,
borderRadius: "2px",
color: colors.text,
//width: "100%",
minWidth: "24px",
textAlign: "center"
}}
>
{children}
<Tooltip title={tooltip}>{children}</Tooltip>
</span>
);
}
@@ -49,15 +46,20 @@ function CompactTag({ color = "gray", children }) {
export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);
export function JobPartsQueueCount({ bodyshop, parts }) {
const { t } = useTranslation();
const partsStatus = useMemo(() => {
if (!parts) return null;
const statusKeys = ["default_bo", "default_ordered", "default_received", "default_returned"];
return parts.reduce(
(acc, val) => {
if (val.part_type === "PAS" || val.part_type === "PASL") return acc;
acc.total = acc.total + val.count;
acc[val.status] = acc[val.status] + val.count;
acc.total += val.count;
// NOTE: if val.status is null, object key becomes "null"
acc[val.status] = (acc[val.status] ?? 0) + val.count;
return acc;
},
{
@@ -68,28 +70,38 @@ export function JobPartsQueueCount({ bodyshop, parts }) {
);
}, [bodyshop, parts]);
if (!parts) return null;
return (
<div style={{ display: "flex", gap: 2 }}>
<Tooltip title="Total">
<CompactTag color="gray">{partsStatus.total}</CompactTag>
</Tooltip>
<Tooltip title={t("dashboard.errors.status_normal")}>
<CompactTag color="gold">{partsStatus["null"]}</CompactTag>
</Tooltip>
if (!parts || !partsStatus) return null;
<Tooltip title={bodyshop.md_order_statuses.default_bo}>
<CompactTag color="red">{partsStatus[bodyshop.md_order_statuses.default_bo]}</CompactTag>
</Tooltip>
<Tooltip title={bodyshop.md_order_statuses.default_ordered}>
<CompactTag color="blue">{partsStatus[bodyshop.md_order_statuses.default_ordered]}</CompactTag>
</Tooltip>
<Tooltip title={bodyshop.md_order_statuses.default_received}>
<CompactTag color="green">{partsStatus[bodyshop.md_order_statuses.default_received]}</CompactTag>
</Tooltip>
<Tooltip title={bodyshop.md_order_statuses.default_returned}>
<CompactTag color="orange">{partsStatus[bodyshop.md_order_statuses.default_returned]}</CompactTag>
</Tooltip>
return (
<div
style={{
display: "inline-flex", // ✅ shrink-wraps, fixes the “extra box” to the right
gap: 2,
alignItems: "center",
whiteSpace: "nowrap"
}}
>
<CompactTag tooltip="Total" color="gray">
{partsStatus.total}
</CompactTag>
<CompactTag tooltip="No Status" color="gold">
{partsStatus["null"]}
</CompactTag>
<CompactTag tooltip={bodyshop.md_order_statuses.default_bo} color="red">
{partsStatus[bodyshop.md_order_statuses.default_bo]}
</CompactTag>
<CompactTag tooltip={bodyshop.md_order_statuses.default_ordered} color="blue">
{partsStatus[bodyshop.md_order_statuses.default_ordered]}
</CompactTag>
<CompactTag tooltip={bodyshop.md_order_statuses.default_received} color="green">
{partsStatus[bodyshop.md_order_statuses.default_received]}
</CompactTag>
<CompactTag tooltip={bodyshop.md_order_statuses.default_returned} color="orange">
{partsStatus[bodyshop.md_order_statuses.default_returned]}
</CompactTag>
</div>
);
}

2
client/src/components/job-parts-received/job-parts-received.component.jsx
View File

@@ -83,7 +83,7 @@ export function JobPartsReceived({
trigger={["click"]}
placement={popoverPlacement}
content={
<div onClick={stop} style={{ minWidth: 260 }}>
<div onClick={stop}>
<JobPartsQueueCount parts={parts} />
</div>
}