- Clean up Card Settings

- Code refactor for maintainability
- Allow users to adjust the order of the statistics via drag and drop

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

client/src/App/ProductFruitsWrapper.jsx

@@ -27,6 +27,6 @@ ProductFruitsWrapper.propTypes = {
   currentUser: PropTypes.shape({
     authorized: PropTypes.bool,
     email: PropTypes.string
-  }).isRequired,
-  workspaceCode: PropTypes.string.isRequired
+  }),
+  workspaceCode: PropTypes.string
 };

client/src/components/production-board-kanban/defaultKanbanSettings.js

@@ -0,0 +1,42 @@
+const statisticsItems = [
+  { id: 0, name: "totalHrs", label: "total_hours_in_production" },
+  { id: 1, name: "totalAmountInProduction", label: "total_amount_in_production" },
+  { id: 2, name: "totalLAB", label: "total_lab_in_production" },
+  { id: 3, name: "totalLAR", label: "total_lar_in_production" },
+  { id: 4, name: "jobsInProduction", label: "jobs_in_production" },
+  { id: 5, name: "totalHrsOnBoard", label: "total_hours_on_board" },
+  { id: 6, name: "totalAmountOnBoard", label: "total_amount_on_board" },
+  { id: 7, name: "totalLABOnBoard", label: "total_lab_on_board" },
+  { id: 8, name: "totalLAROnBoard", label: "total_lar_on_board" },
+  { id: 9, name: "jobsOnBoard", label: "total_jobs_on_board" }
+];
+
+const defaultKanbanSettings = {
+  ats: true,
+  clm_no: true,
+  compact: false,
+  ownr_nm: true,
+  sublets: true,
+  ins_co_nm: true,
+  production_note: true,
+  employeeassignments: true,
+  scheduled_completion: true,
+  cardcolor: false,
+  orientation: false,
+  cardSize: "small",
+  model_info: true,
+  kiosk: false,
+  totalHrs: true,
+  totalAmountInProduction: false,
+  totalLAB: true,
+  totalLAR: true,
+  jobsInProduction: true,
+  totalHrsOnBoard: false,
+  totalLABOnBoard: false,
+  totalLAROnBoard: false,
+  jobsOnBoard: false,
+  totalAmountOnBoard: true,
+  statisticsOrder: statisticsItems.map((item) => item.id)
+};
+
+export { defaultKanbanSettings, statisticsItems };

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

@@ -21,6 +21,7 @@ import { createBoardData } from "./production-board-kanban.utils.js";
 import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
+import { defaultKanbanSettings } from "./defaultKanbanSettings.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -179,32 +180,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
     () =>
       associationSettings?.kanban_settings && Object.keys(associationSettings.kanban_settings).length > 0
         ? associationSettings.kanban_settings
-        : {
-            ats: true,
-            clm_no: true,
-            compact: false,
-            ownr_nm: true,
-            sublets: true,
-            ins_co_nm: true,
-            production_note: true,
-            employeeassignments: true,
-            scheduled_completion: true,
-            cardcolor: false,
-            orientation: false,
-            cardSize: "small",
-            model_info: true,
-            kiosk: false,
-            totalHrs: true,
-            totalAmountInProduction: false,
-            totalLAB: true,
-            totalLAR: true,
-            jobsInProduction: true,
-            totalHrsOnBoard: false,
-            totalLABOnBoard: false,
-            totalLAROnBoard: false,
-            jobsOnBoard: false,
-            totalAmountOnBoard: true
-          },
+        : defaultKanbanSettings,
     [associationSettings]
   );
 

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

@@ -1,15 +1,132 @@
-// ProductionBoardKanbanSettings.jsx
 import { useMutation } from "@apollo/client";
-import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row } from "antd";
+import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row, Tabs } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
+import { DragDropContext, Draggable, Droppable } from "./trello-board/dnd/lib";
+import { statisticsItems } from "./defaultKanbanSettings.js";
+
+const LayoutSettings = ({ t }) => (
+  <Card title={t("production.settings.layout")} style={{ minWidth: "50vw", marginTop: 10 }}>
+    <Row gutter={[16, 16]}>
+      {[
+        {
+          name: "orientation",
+          label: t("production.labels.orientation"),
+          options: [t("production.labels.vertical"), t("production.labels.horizontal")]
+        },
+        {
+          name: "cardSize",
+          label: t("production.labels.card_size"),
+          options: [t("production.options.small"), t("production.options.medium"), t("production.options.large")]
+        },
+        {
+          name: "compact",
+          label: t("production.labels.compact"),
+          options: [t("production.labels.tall"), t("production.labels.wide")]
+        },
+        {
+          name: "cardcolor",
+          label: t("production.labels.cardcolor"),
+          options: [t("production.labels.on"), t("production.labels.off")]
+        },
+        {
+          name: "kiosk",
+          label: t("production.labels.kiosk_mode"),
+          options: [t("production.labels.on"), t("production.labels.off")]
+        }
+      ].map(({ name, label, options }) => (
+        <Col span={4} key={name}>
+          <Form.Item name={name} label={label}>
+            <Radio.Group>
+              {options.map((option, idx) => (
+                <Radio.Button key={idx} value={idx === 0}>
+                  {option}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </Form.Item>
+        </Col>
+      ))}
+    </Row>
+  </Card>
+);
+
+const InformationSettings = ({ t }) => (
+  <Card title={t("production.settings.information")} style={{ minWidth: "50vw", marginTop: 10 }}>
+    <Row gutter={[16, 16]}>
+      {[
+        "model_info",
+        "ownr_nm",
+        "clm_no",
+        "ins_co_nm",
+        "employeeassignments",
+        "actual_in",
+        "scheduled_completion",
+        "ats",
+        "production_note",
+        "sublets",
+        "partsstatus"
+      ].map((item) => (
+        <Col span={4} key={item}>
+          <Form.Item name={item} valuePropName="checked">
+            <Checkbox>{t(`production.labels.${item}`)}</Checkbox>
+          </Form.Item>
+        </Col>
+      ))}
+    </Row>
+  </Card>
+);
+
+const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
+  const onDragEnd = (result) => {
+    if (!result.destination) return;
+    const newOrder = Array.from(statisticsOrder);
+    const [movedItem] = newOrder.splice(result.source.index, 1);
+    newOrder.splice(result.destination.index, 0, movedItem);
+    setStatisticsOrder(newOrder);
+    setHasChanges(true);
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable direction="horizontal" droppableId="statistics">
+        {(provided) => (
+          <div
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}
+          >
+            {statisticsOrder.map((itemId, index) => {
+              const item = statisticsItems.find((stat) => stat.id === itemId);
+              return (
+                <Draggable key={itemId} draggableId={itemId.toString()} index={index}>
+                  {(provided) => (
+                    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                      <Card styles={{ body: { padding: "5px" } }} style={{ marginBottom: 8, flex: "0 1 auto" }}>
+                        <Form.Item style={{ marginBottom: 0 }} name={item.name} valuePropName="checked">
+                          <Checkbox>{t(`production.settings.statistics.${item.label}`)}</Checkbox>
+                        </Form.Item>
+                      </Card>
+                    </div>
+                  )}
+                </Draggable>
+              );
+            })}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
 
 export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
+  const [statisticsOrder, setStatisticsOrder] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
 
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
   const { t } = useTranslation();
@@ -17,6 +134,9 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   useEffect(() => {
     if (associationSettings?.kanban_settings) {
       form.setFieldsValue(associationSettings.kanban_settings);
+      if (associationSettings.kanban_settings.statisticsOrder) {
+        setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder);
+      }
     }
   }, [form, associationSettings]);
 
@@ -27,7 +147,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     const result = await updateKbSettings({
       variables: {
         id: associationSettings?.id,
-        ks: { ...values }
+        ks: { ...values, statisticsOrder }
       }
     });
 
@@ -48,103 +168,36 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
   const handleValuesChange = () => setHasChanges(true);
 
-  const cardStyle = { minWidth: "50vw", marginTop: 10 };
-
-  const renderCheckboxItem = (name, labelKey) => (
-    <Col span={4} key={name}>
-      <Form.Item name={name} valuePropName="checked">
-        <Checkbox>{t(labelKey)}</Checkbox>
-      </Form.Item>
-    </Col>
-  );
-
-  const renderCardSettings = () => (
-    <>
-      <Card title={t("production.settings.layout")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          <Col span={4}>
-            <Form.Item name="orientation" label={t("production.labels.orientation")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.vertical")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.horizontal")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="cardSize" label={t("production.labels.card_size")}>
-              <Radio.Group>
-                <Radio.Button value="small">{t("production.options.small")}</Radio.Button>
-                <Radio.Button value="medium">{t("production.options.medium")}</Radio.Button>
-                <Radio.Button value="large">{t("production.options.large")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="compact" label={t("production.labels.compact")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.tall")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.wide")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="cardcolor" label={t("production.labels.cardcolor")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="kiosk" label={t("production.labels.kiosk_mode")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-        </Row>
-      </Card>
-      <Card title={t("production.settings.information")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          {[
-            "model_info",
-            "ownr_nm",
-            "clm_no",
-            "ins_co_nm",
-            "employeeassignments",
-            "actual_in",
-            "scheduled_completion",
-            "ats",
-            "production_note",
-            "sublets",
-            "partsstatus"
-          ].map((item) => renderCheckboxItem(item, `production.labels.${item}`))}
-        </Row>
-      </Card>
-      <Card title={t("production.settings.statistics_title")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          {[
-            { name: "totalHrs", label: "total_hours_in_production" },
-            { name: "totalLAB", label: "total_lab_in_production" },
-            { name: "totalLAR", label: "total_lar_in_production" },
-            { name: "totalAmountInProduction", label: "total_amount_in_production" },
-            { name: "jobsInProduction", label: "jobs_in_production" },
-            { name: "totalHrsOnBoard", label: "total_hours_on_board" },
-            { name: "totalLABOnBoard", label: "total_lab_on_board" },
-            { name: "totalLAROnBoard", label: "total_lar_on_board" },
-            { name: "jobsOnBoard", label: "total_jobs_on_board" },
-            { name: "totalAmountOnBoard", label: "total_amount_on_board" }
-          ].map((item) => renderCheckboxItem(item.name, `production.settings.statistics.${item.label}`))}
-        </Row>
-      </Card>
-    </>
-  );
-
   const overlay = (
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-        {renderCardSettings()}
+        <Tabs
+          defaultActiveKey="1"
+          items={[
+            {
+              key: "1",
+              label: t("production.settings.layout"),
+              children: <LayoutSettings t={t} />
+            },
+            {
+              key: "2",
+              label: t("production.settings.information"),
+              children: <InformationSettings t={t} />
+            },
+            {
+              key: "3",
+              label: t("production.settings.statistics_title"),
+              children: (
+                <StatisticsSettings
+                  t={t}
+                  statisticsOrder={statisticsOrder}
+                  setStatisticsOrder={setStatisticsOrder}
+                  setHasChanges={setHasChanges}
+                />
+              )
+            }
+          ]}
+        />
         <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
           <Col span={8}>
             <Button block onClick={() => setOpen(false)}>

client/src/components/production-board-kanban/production-board-kanban.statistics.jsx

@@ -1,6 +1,27 @@
 import React, { useMemo } from "react";
-import { Statistic, Card } from "antd";
+import { Card, Statistic } from "antd";
 import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+import { statisticsItems } from "./defaultKanbanSettings.js";
+
+export const StatisticType = {
+  HOURS: "hours",
+  AMOUNT: "amount",
+  JOBS: "jobs"
+};
+
+const mergeStatistics = (items, values) => {
+  const valuesMap = values.reduce((acc, value) => {
+    acc[value.id] = value;
+    return acc;
+  }, {});
+
+  return items.map((item) => ({
+    ...item,
+    value: valuesMap[item.id]?.value,
+    type: valuesMap[item.id]?.type
+  }));
+};
 
 const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
   const { t } = useTranslation();
@@ -30,10 +51,10 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
   };
 
   const formatValue = (value, type) => {
-    if (type === "Jobs") {
+    if (type === StatisticType.JOBS) {
       return value.toFixed(0);
     }
-    if (type === "Hrs") {
+    if (type === StatisticType.HOURS) {
       return value.toFixed(2);
     }
     return value;
@@ -102,44 +123,100 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
     return parseFloat(total.toFixed(2));
   }, [reducerData, cardSettings.totalAmountOnBoard]);
 
-  const statistics = [
-    { value: totalHrs, title: t("total_hours_in_production"), suffix: t("production.statistics.hours") },
-    {
-      value: totalAmountInProduction,
-      title: t("total_amount_in_production"),
-      prefix: t("production.statistics.currency_symbol")
-    },
-    { value: totalLAB, title: t("total_lab_in_production"), suffix: t("production.statistics.hours") },
-    { value: totalLAR, title: t("total_lar_in_production"), suffix: t("production.statistics.hours") },
-    { value: jobsInProduction, title: t("jobs_in_production"), suffix: "Jobs" },
-    { value: totalHrsOnBoard, title: t("total_hours_on_board"), suffix: t("production.statistics.hours") },
-    {
-      value: totalAmountOnBoard,
-      title: t("total_amount_on_board"),
-      prefix: t("production.statistics.currency_symbol")
-    },
-    { value: totalLABOnBoard, title: t("total_lab_on_board"), suffix: t("production.statistics.hours") },
-    { value: totalLAROnBoard, title: t("total_lar_on_board"), suffix: t("production.statistics.hours") },
-    { value: jobsOnBoard, title: t("total_jobs_on_board"), suffix: "Jobs" }
-  ];
+  const statistics = useMemo(
+    () =>
+      mergeStatistics(statisticsItems, [
+        { id: 0, value: totalHrs, type: StatisticType.HOURS },
+        { id: 1, value: totalAmountInProduction, type: StatisticType.AMOUNT },
+        { id: 2, value: totalLAB, type: StatisticType.HOURS },
+        { id: 3, value: totalLAR, type: StatisticType.HOURS },
+        { id: 4, value: jobsInProduction, type: StatisticType.JOBS },
+        { id: 5, value: totalHrsOnBoard, type: StatisticType.HOURS },
+        { id: 6, value: totalAmountOnBoard, type: StatisticType.AMOUNT },
+        { id: 7, value: totalLABOnBoard, type: StatisticType.HOURS },
+        { id: 8, value: totalLAROnBoard, type: StatisticType.HOURS },
+        { id: 9, value: jobsOnBoard, type: StatisticType.JOBS }
+      ]),
+    [
+      totalHrs,
+      totalAmountInProduction,
+      totalLAB,
+      totalLAR,
+      jobsInProduction,
+      totalHrsOnBoard,
+      totalAmountOnBoard,
+      totalLABOnBoard,
+      totalLAROnBoard,
+      jobsOnBoard
+    ]
+  );
+
+  const sortedStatistics = useMemo(() => {
+    const sorted = [];
+    cardSettings.statisticsOrder.forEach((orderId) => {
+      const value = statistics.find((stat) => stat.id === orderId);
+      if (value.value !== null) {
+        sorted.push(value);
+      }
+    });
+
+    return sorted;
+  }, [statistics, cardSettings.statisticsOrder]);
 
   return (
     <div style={{ display: "flex", gap: "5px", flexWrap: "wrap", marginBottom: "5px" }}>
-      {statistics.map(
-        (stat, index) =>
-          stat.value !== null && (
-            <Card key={index}>
-              <Statistic
-                title={t(`production.statistics.${stat.title}`)}
-                value={formatValue(stat.value, stat.suffix)}
-                prefix={stat.prefix}
-                suffix={stat.suffix}
-              />
-            </Card>
-          )
-      )}
+      {sortedStatistics.map((stat) => (
+        <Card styles={{ body: { padding: "8px" } }} key={stat.id}>
+          <Statistic
+            title={t(`production.statistics.${stat.label}`)}
+            value={formatValue(stat.value, stat.type)}
+            prefix={stat.type === StatisticType.AMOUNT ? t("production.statistics.currency_symbol") : undefined}
+            suffix={
+              stat.type === StatisticType.HOURS
+                ? t("production.statistics.hours")
+                : stat.type === StatisticType.JOBS
+                  ? t("production.statistics.jobs")
+                  : undefined
+            }
+          />
+        </Card>
+      ))}
     </div>
   );
 };
 
+ProductionStatistics.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      labhrs: PropTypes.object,
+      larhrs: PropTypes.object,
+      job_totals: PropTypes.object
+    })
+  ).isRequired,
+  cardSettings: PropTypes.shape({
+    totalHrs: PropTypes.bool,
+    totalLAB: PropTypes.bool,
+    totalLAR: PropTypes.bool,
+    jobsInProduction: PropTypes.bool,
+    totalAmountInProduction: PropTypes.bool,
+    totalHrsOnBoard: PropTypes.bool,
+    totalLABOnBoard: PropTypes.bool,
+    totalLAROnBoard: PropTypes.bool,
+    jobsOnBoard: PropTypes.bool,
+    totalAmountOnBoard: PropTypes.bool,
+    statisticsOrder: PropTypes.arrayOf(PropTypes.number)
+  }).isRequired,
+  reducerData: PropTypes.shape({
+    lanes: PropTypes.arrayOf(
+      PropTypes.shape({
+        cards: PropTypes.arrayOf(
+          PropTypes.shape({
+            metadata: PropTypes.object
+          })
+        ).isRequired
+      })
+    ).isRequired
+  })
+};
+
 export default ProductionStatistics;

client/src/translations/es/common.json

@@ -2832,7 +2832,8 @@
         "total_amount_on_board": "",
         "total_jobs_on_board": "",
         "hours": "",
-        "currency_symbol": ""
+        "currency_symbol": "",
+        "jobs": ""
       }
     },
 		"profile": {