- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-board-kanban-card/production-board-card.styles.scss

@@ -1,8 +1,10 @@
 .imex-kanban-card {
   padding: 0px !important;
+
   .ant-card-body {
     padding: 0.8rem;
   }
+
   .ant-card-head {
     padding: 0rem 0.8rem;
   }

client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx

@@ -1,51 +1,51 @@
-import { Col, List, Space, Typography } from "antd";
+import {Col, List, Space, Typography} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
 
-const CardColorLegend = ({ bodyshop }) => {
-  const { t } = useTranslation();
-  const data = bodyshop.ssbuckets.map((bucket) => {
-    let color = { r: 255, g: 255, b: 255 };
+const CardColorLegend = ({bodyshop}) => {
+    const {t} = useTranslation();
+    const data = bodyshop.ssbuckets.map((bucket) => {
+        let color = {r: 255, g: 255, b: 255};
 
-    if (bucket.color) {
-      color = bucket.color;
+        if (bucket.color) {
+            color = bucket.color;
 
-      if (bucket.color.rgb) {
-        color = bucket.color.rgb;
-      }
-    }
+            if (bucket.color.rgb) {
+                color = bucket.color.rgb;
+            }
+        }
 
-    return {
-      label: bucket.label,
-      color,
-    };
-  });
+        return {
+            label: bucket.label,
+            color,
+        };
+    });
 
-  return (
-    <Col>
-      <Typography>{t("production.labels.legend")}</Typography>
-      <List
-        grid={{
-          gutter: 16,
-        }}
-        dataSource={data}
-        renderItem={(item) => (
-          <List.Item>
-            <Space>
-              <div
-                style={{
-                  width: "1.5rem",
-                  aspectRatio: "1/1",
-                  backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`,
+    return (
+        <Col>
+            <Typography>{t("production.labels.legend")}</Typography>
+            <List
+                grid={{
+                    gutter: 16,
                 }}
-              ></div>
-              <div>{item.label}</div>
-            </Space>
-          </List.Item>
-        )}
-      />
-    </Col>
-  );
+                dataSource={data}
+                renderItem={(item) => (
+                    <List.Item>
+                        <Space>
+                            <div
+                                style={{
+                                    width: "1.5rem",
+                                    aspectRatio: "1/1",
+                                    backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`,
+                                }}
+                            ></div>
+                            <div>{item.label}</div>
+                        </Space>
+                    </List.Item>
+                )}
+            />
+        </Col>
+    );
 };
 
 export default CardColorLegend;

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -1,17 +1,12 @@
-import {
-  CalendarOutlined,
-  EyeFilled,
-  DownloadOutlined,
-  PauseCircleOutlined,
-  BranchesOutlined,
-} from "@ant-design/icons";
-import { Card, Col, Row, Space, Tooltip } from "antd";
+import {BranchesOutlined, CalendarOutlined, DownloadOutlined, EyeFilled, PauseCircleOutlined,} from "@ant-design/icons";
+import {Card, Col, Row, Space, Tooltip} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import {useTranslation} from "react-i18next";
+import {Link} from "react-router-dom";
+import {DateTimeFormatter} from "../../utils/DateFormatter";
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
-import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
+import ProductionListColumnProductionNote
+    from "../production-list-columns/production-list-columns.productionnote.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 import "./production-board-card.styles.scss";
 import dayjs from "../../utils/day";
@@ -19,178 +14,178 @@ import OwnerNameDisplay from "../owner-name-display/owner-name-display.component
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 
 const cardColor = (ssbuckets, totalHrs) => {
-  const bucket = ssbuckets.filter(
-    (bucket) =>
-      bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
-  )[0];
+    const bucket = ssbuckets.filter(
+        (bucket) =>
+            bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
+    )[0];
 
-  let color = { r: 255, g: 255, b: 255 };
+    let color = {r: 255, g: 255, b: 255};
 
-  if (bucket && bucket.color) {
-    color = bucket.color;
+    if (bucket && bucket.color) {
+        color = bucket.color;
 
-    if (bucket.color.rgb) {
-      color = bucket.color.rgb;
+        if (bucket.color.rgb) {
+            color = bucket.color.rgb;
+        }
     }
-  }
 
-  return color;
+    return color;
 };
 
 function getContrastYIQ(bgColor) {
-  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
+    const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
 
-  return yiq >= 128 ? "black" : "white";
+    return yiq >= 128 ? "black" : "white";
 }
 
 export default function ProductionBoardCard(
-  technician,
-  card,
-  bodyshop,
-  cardSettings
+    technician,
+    card,
+    bodyshop,
+    cardSettings
 ) {
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
-  let employee_body, employee_prep, employee_refinish, employee_csr;
-  if (card.employee_body) {
-    employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
-  }
-  if (card.employee_prep) {
-    employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
-  }
-  if (card.employee_refinish) {
-    employee_refinish = bodyshop.employees.find(
-      (e) => e.id === card.employee_refinish
-    );
-  }
-  if (card.employee_csr) {
-    employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
-  }
-  // if (card.employee_csr) {
-  //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
-  // }
+    let employee_body, employee_prep, employee_refinish, employee_csr;
+    if (card.employee_body) {
+        employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
+    }
+    if (card.employee_prep) {
+        employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
+    }
+    if (card.employee_refinish) {
+        employee_refinish = bodyshop.employees.find(
+            (e) => e.id === card.employee_refinish
+        );
+    }
+    if (card.employee_csr) {
+        employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+    }
+    // if (card.employee_csr) {
+    //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+    // }
 
-  const pastDueAlert =
-    !!card.scheduled_completion &&
-    ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") &&
-      "production-completion-past") ||
-      (dayjs()
-        .add(1, "day")
-        .isSame(dayjs(card.scheduled_completion), "day") &&
-        "production-completion-soon"));
+    const pastDueAlert =
+        !!card.scheduled_completion &&
+        ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") &&
+                "production-completion-past") ||
+            (dayjs()
+                    .add(1, "day")
+                    .isSame(dayjs(card.scheduled_completion), "day") &&
+                "production-completion-soon"));
 
-  const totalHrs =
-    card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
-  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
+    const totalHrs =
+        card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
+    const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
 
-  return (
-    <Card
-      className="react-kanban-card imex-kanban-card"
-      size="small"
-      style={{
-        backgroundColor:
-          cardSettings &&
-          cardSettings.cardcolor &&
-          `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color:
-          cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
-      }}
-      title={
-        <Space>
-          <ProductionAlert record={card} key="alert" />
-          {card.suspended && (
-            <PauseCircleOutlined style={{ color: "orangered" }} />
-          )}
-          {card.iouparent && (
-            <Tooltip title={t("jobs.labels.iou")}>
-              <BranchesOutlined style={{ color: "orangered" }} />
-            </Tooltip>
-          )}
-          <span style={{ fontWeight: "bolder" }}>
+    return (
+        <Card
+            className="react-kanban-card imex-kanban-card"
+            size="small"
+            style={{
+                backgroundColor:
+                    cardSettings &&
+                    cardSettings.cardcolor &&
+                    `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
+                color:
+                    cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
+            }}
+            title={
+                <Space>
+                    <ProductionAlert record={card} key="alert"/>
+                    {card.suspended && (
+                        <PauseCircleOutlined style={{color: "orangered"}}/>
+                    )}
+                    {card.iouparent && (
+                        <Tooltip title={t("jobs.labels.iou")}>
+                            <BranchesOutlined style={{color: "orangered"}}/>
+                        </Tooltip>
+                    )}
+                    <span style={{fontWeight: "bolder"}}>
             <Link
-              to={
-                technician
-                  ? `/tech/joblookup?selected=${card.id}`
-                  : `/manage/jobs/${card.id}`
-              }
+                to={
+                    technician
+                        ? `/tech/joblookup?selected=${card.id}`
+                        : `/manage/jobs/${card.id}`
+                }
             >
               {card.ro_number || t("general.labels.na")}
             </Link>
           </span>
-        </Space>
-      }
-      extra={
-        <Link to={{ search: `?selected=${card.id}` }}>
-          <EyeFilled />
-        </Link>
-      }
-    >
-      <Row>
-        {cardSettings && cardSettings.ownr_nm && (
-          <Col span={24}>
-            {cardSettings && cardSettings.compact ? (
-              <div className="ellipses">{`${card.ownr_ln || ""} ${
-                card.ownr_co_nm || ""
-              }`}</div>
-            ) : (
-              <div className="ellipses">
-                <OwnerNameDisplay ownerObject={card} />
-              </div>
-            )}
-          </Col>
-        )}
-        <Col span={24}>
-          <div className="ellipses">{`${card.v_model_yr || ""} ${
-            card.v_make_desc || ""
-          } ${card.v_model_desc || ""}`}</div>
-        </Col>
-        {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-            <div className="ellipses">{card.ins_co_nm || ""}</div>
-          </Col>
-        )}
-        {cardSettings && cardSettings.clm_no && card.clm_no && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-            <div className="ellipses">{card.clm_no || ""}</div>
-          </Col>
-        )}
-
-        {cardSettings && cardSettings.employeeassignments && (
-          <Col span={24}>
+                </Space>
+            }
+            extra={
+                <Link to={{search: `?selected=${card.id}`}}>
+                    <EyeFilled/>
+                </Link>
+            }
+        >
             <Row>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
-                employee_body
-                  ? `${employee_body.first_name.substr(
-                      0,
-                      3
-                    )} ${employee_body.last_name.charAt(0)}`
-                  : ""
-              } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
-                employee_prep
-                  ? `${employee_prep.first_name.substr(
-                      0,
-                      3
-                    )} ${employee_prep.last_name.charAt(0)}`
-                  : ""
-              }`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
-                employee_refinish
-                  ? `${employee_refinish.first_name.substr(
-                      0,
-                      3
-                    )} ${employee_refinish.last_name.charAt(0)}`
-                  : ""
-              } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
-              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
-                employee_csr
-                  ? `${employee_csr.first_name} ${employee_csr.last_name}`
-                  : ""
-              }`}</Col>
-            </Row>
-          </Col>
-        )}
-        {/* {cardSettings && cardSettings.laborhrs && (
+                {cardSettings && cardSettings.ownr_nm && (
+                    <Col span={24}>
+                        {cardSettings && cardSettings.compact ? (
+                            <div className="ellipses">{`${card.ownr_ln || ""} ${
+                                card.ownr_co_nm || ""
+                            }`}</div>
+                        ) : (
+                            <div className="ellipses">
+                                <OwnerNameDisplay ownerObject={card}/>
+                            </div>
+                        )}
+                    </Col>
+                )}
+                <Col span={24}>
+                    <div className="ellipses">{`${card.v_model_yr || ""} ${
+                        card.v_make_desc || ""
+                    } ${card.v_model_desc || ""}`}</div>
+                </Col>
+                {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
+                    <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+                        <div className="ellipses">{card.ins_co_nm || ""}</div>
+                    </Col>
+                )}
+                {cardSettings && cardSettings.clm_no && card.clm_no && (
+                    <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+                        <div className="ellipses">{card.clm_no || ""}</div>
+                    </Col>
+                )}
+
+                {cardSettings && cardSettings.employeeassignments && (
+                    <Col span={24}>
+                        <Row>
+                            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+                                employee_body
+                                    ? `${employee_body.first_name.substr(
+                                        0,
+                                        3
+                                    )} ${employee_body.last_name.charAt(0)}`
+                                    : ""
+                            } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+                            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
+                                employee_prep
+                                    ? `${employee_prep.first_name.substr(
+                                        0,
+                                        3
+                                    )} ${employee_prep.last_name.charAt(0)}`
+                                    : ""
+                            }`}</Col>
+                            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+                                employee_refinish
+                                    ? `${employee_refinish.first_name.substr(
+                                        0,
+                                        3
+                                    )} ${employee_refinish.last_name.charAt(0)}`
+                                    : ""
+                            } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+                            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
+                                employee_csr
+                                    ? `${employee_csr.first_name} ${employee_csr.last_name}`
+                                    : ""
+                            }`}</Col>
+                        </Row>
+                    </Col>
+                )}
+                {/* {cardSettings && cardSettings.laborhrs && (
           <Col span={24}>
             <Row>
               <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
@@ -202,53 +197,53 @@ export default function ProductionBoardCard(
             </Row>
           </Col>
         )} */}
-        {cardSettings && cardSettings.actual_in && card.actual_in && (
-          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-            <Space>
-              <DownloadOutlined />
-              <DateTimeFormatter format="MM/DD">
-                {card.actual_in}
-              </DateTimeFormatter>
-            </Space>
-          </Col>
-        )}
-        {cardSettings &&
-          cardSettings.scheduled_completion &&
-          card.scheduled_completion && (
-            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-              <Space className={pastDueAlert}>
-                <CalendarOutlined />
-                <DateTimeFormatter format="MM/DD">
-                  {card.scheduled_completion}
-                </DateTimeFormatter>
-              </Space>
-            </Col>
-          )}
-        {cardSettings && cardSettings.ats && card.alt_transport && (
-          <Col span={12}>
-            <div>{card.alt_transport || ""}</div>
-          </Col>
-        )}
-        {cardSettings && cardSettings.sublets && (
-          <Col span={12}>
-            <ProductionSubletsManageComponent
-              subletJobLines={card.subletLines}
-            />
-          </Col>
-        )}
-        {cardSettings && cardSettings.production_note && (
-          <Col span={24}>
-            {cardSettings && cardSettings.production_note && (
-              <ProductionListColumnProductionNote record={card} />
-            )}
-          </Col>
-        )}
-        {cardSettings && cardSettings.partsstatus && (
-          <Col span={24}>
-            <JobPartsQueueCount parts={card.joblines_status} />
-          </Col>
-        )}
-      </Row>
-    </Card>
-  );
+                {cardSettings && cardSettings.actual_in && card.actual_in && (
+                    <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+                        <Space>
+                            <DownloadOutlined/>
+                            <DateTimeFormatter format="MM/DD">
+                                {card.actual_in}
+                            </DateTimeFormatter>
+                        </Space>
+                    </Col>
+                )}
+                {cardSettings &&
+                    cardSettings.scheduled_completion &&
+                    card.scheduled_completion && (
+                        <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+                            <Space className={pastDueAlert}>
+                                <CalendarOutlined/>
+                                <DateTimeFormatter format="MM/DD">
+                                    {card.scheduled_completion}
+                                </DateTimeFormatter>
+                            </Space>
+                        </Col>
+                    )}
+                {cardSettings && cardSettings.ats && card.alt_transport && (
+                    <Col span={12}>
+                        <div>{card.alt_transport || ""}</div>
+                    </Col>
+                )}
+                {cardSettings && cardSettings.sublets && (
+                    <Col span={12}>
+                        <ProductionSubletsManageComponent
+                            subletJobLines={card.subletLines}
+                        />
+                    </Col>
+                )}
+                {cardSettings && cardSettings.production_note && (
+                    <Col span={24}>
+                        {cardSettings && cardSettings.production_note && (
+                            <ProductionListColumnProductionNote record={card}/>
+                        )}
+                    </Col>
+                )}
+                {cardSettings && cardSettings.partsstatus && (
+                    <Col span={24}>
+                        <JobPartsQueueCount parts={card.joblines_status}/>
+                    </Col>
+                )}
+            </Row>
+        </Card>
+    );
 }