IO-1454 Production List Visual Indicators.

bodyshop_translations.babel

@@ -7120,6 +7120,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>color</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>default_arrived</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -7456,6 +7477,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>production_colors</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>production_statuses</name>
                                                 <definition_loaded>false</definition_loaded>

client/src/App/App.styles.scss

@@ -128,3 +128,9 @@
 .react-kanban-column {
   background-color: #ddd !important;
 }
+
+.production-list-table {
+  td.ant-table-column-sort {
+    background: unset;
+  }
+}

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -6,7 +6,6 @@ import {
   InputNumber,
   Row,
   Select,
-  Space,
   Switch,
 } from "antd";
 import React from "react";

client/src/components/production-list-table/production-list-table.component.jsx

@@ -165,7 +165,6 @@ export function ProductionListTable({
   // };
 
   if (!!!columns) return <div>No columns found.</div>;
-  console.log(data);
 
   const totalHrs = data
     .reduce(
@@ -218,8 +217,25 @@ export function ProductionListTable({
         handleSelector=".prod-header-dropdown"
       >
         <Table
+          sticky
           pagination={false}
           size="small"
+          className="production-list-table"
+          onRow={(record, index) => {
+            if (!bodyshop.md_ro_statuses.production_colors) return null;
+
+            const color = bodyshop.md_ro_statuses.production_colors.find(
+              (x) => x.status === record.status
+            );
+
+            if (!color) return null;
+
+            return {
+              style: {
+                backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
+              },
+            };
+          }}
           components={{
             header: {
               cell: ResizeableTitle,

client/src/components/shop-info/shop-info.rostatus.component.jsx

@@ -1,8 +1,12 @@
-import { Form, Select } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Form, Select, Space } from "antd";
 import React, { useState } from "react";
+import { ChromePicker } from "react-color";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
     width: 200px;
@@ -257,6 +261,95 @@ export default function ShopInfoROStatusComponent({ form }) {
           </Select>
         </Form.Item>
       </LayoutFormRow>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.fields.statuses.production_colors")}
+      >
+        <Form.List name={["md_ro_statuses", "production_colors"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                <LayoutFormRow>
+                  {fields.map((field, index) => (
+                    <Form.Item key={field.key}>
+                      <Space direction="vertical">
+                        <div style={{ display: "flex" }}>
+                          <Form.Item
+                            style={{ flex: 1 }}
+                            label={t("jobs.fields.status")}
+                            key={`${index}status`}
+                            name={[field.name, "status"]}
+                            rules={[
+                              {
+                                required: true,
+                                //message: t("general.validation.required"),
+                              },
+                            ]}
+                          >
+                            <Select>
+                              {options.map((item, idx) => (
+                                <Select.Option key={idx} value={item}>
+                                  {item}
+                                </Select.Option>
+                              ))}
+                            </Select>
+                          </Form.Item>
+                          <DeleteFilled
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                        </div>
+                        <Form.Item
+                          label={t("bodyshop.fields.statuses.color")}
+                          key={`${index}color`}
+                          name={[field.name, "color"]}
+                          rules={[
+                            {
+                              required: true,
+                              //message: t("general.validation.required"),
+                            },
+                          ]}
+                        >
+                          <ColorPicker />
+                        </Form.Item>
+                      </Space>
+                    </Form.Item>
+                  ))}
+                </LayoutFormRow>
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("general.actions.add")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
     </SelectorDiv>
   );
 }
+
+const ColorPicker = ({ value, onChange, style, ...restProps }) => {
+  const handleChange = (color) => {
+    console.log(
+      "🚀  ~ file: shop-info.rostatus.component.jsx  ~ line 345  ~ color",
+      color
+    );
+    if (onChange) onChange(color.rgb);
+  };
+  return (
+    <ChromePicker
+      {...restProps}
+      color={value}
+      onChangeComplete={handleChange}
+    />
+  );
+};

client/src/translations/en_us/common.json

@@ -450,6 +450,7 @@
 				"status": "Status Label",
 				"statuses": {
 					"active_statuses": "Active Statuses (Filtering for Active Jobs throughout system)",
+					"color": "Color",
 					"default_arrived": "Default Arrived Status (Transition to Production)",
 					"default_bo": "Default Backordered Status",
 					"default_canceled": "Default Canceled Status",
@@ -466,6 +467,7 @@
 					"open_statuses": "Open Statuses",
 					"post_production_statuses": "Post-Production Statuses",
 					"pre_production_statuses": "Pre-Production Statuses",
+					"production_colors": "Production Status Colors",
 					"production_statuses": "Production Statuses"
 				},
 				"target_touchtime": "Target Touch Time",

client/src/translations/es/common.json

@@ -450,6 +450,7 @@
 				"status": "",
 				"statuses": {
 					"active_statuses": "",
+					"color": "",
 					"default_arrived": "",
 					"default_bo": "",
 					"default_canceled": "",
@@ -466,6 +467,7 @@
 					"open_statuses": "",
 					"post_production_statuses": "",
 					"pre_production_statuses": "",
+					"production_colors": "",
 					"production_statuses": ""
 				},
 				"target_touchtime": "",

client/src/translations/fr/common.json

@@ -450,6 +450,7 @@
 				"status": "",
 				"statuses": {
 					"active_statuses": "",
+					"color": "",
 					"default_arrived": "",
 					"default_bo": "",
 					"default_canceled": "",
@@ -466,6 +467,7 @@
 					"open_statuses": "",
 					"post_production_statuses": "",
 					"pre_production_statuses": "",
+					"production_colors": "",
 					"production_statuses": ""
 				},
 				"target_touchtime": "",