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

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

@@ -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 = () => ({
+const mapDispatchToProps = () => ({});
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
 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;
+  if (!parts || !partsStatus) 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>
 
-      <Tooltip title={bodyshop.md_order_statuses.default_bo}>
+  return (
-        <CompactTag color="red">{partsStatus[bodyshop.md_order_statuses.default_bo]}</CompactTag>
+    <div
-      </Tooltip>
+      style={{
-      <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
+        display: "inline-flex", // ✅ shrink-wraps, fixes the “extra box” to the right
-        <CompactTag color="blue">{partsStatus[bodyshop.md_order_statuses.default_ordered]}</CompactTag>
+        gap: 2,
-      </Tooltip>
+        alignItems: "center",
-      <Tooltip title={bodyshop.md_order_statuses.default_received}>
+        whiteSpace: "nowrap"
-        <CompactTag color="green">{partsStatus[bodyshop.md_order_statuses.default_received]}</CompactTag>
+      }}
-      </Tooltip>
+    >
-      <Tooltip title={bodyshop.md_order_statuses.default_returned}>
+      <CompactTag tooltip="Total" color="gray">
-        <CompactTag color="orange">{partsStatus[bodyshop.md_order_statuses.default_returned]}</CompactTag>
+        {partsStatus.total}
-      </Tooltip>
+      </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>
   );
 }

client/src/components/job-parts-received/job-parts-received.component.jsx

@@ -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>
       }