Label Updates in Shop Config IO-700

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

@@ -823,7 +823,10 @@ export default function ShopInfoComponent({ form, saveLoading }) {
         >
           <ShopInfoResponsibilityCenterComponent form={form} />
         </Collapse.Panel>
-        <Collapse.Panel key="intake" header={t("bodyshop.labels.intake")}>
+        <Collapse.Panel
+          key="checklists"
+          header={t("bodyshop.labels.checklists")}
+        >
           <ShopInfoIntakeChecklistComponent form={form} />
         </Collapse.Panel>
         <Collapse.Panel

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

@@ -1,11 +1,20 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Form, Input, Select, Switch } from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Switch,
+  Typography,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ConfigFormTypes from "../config-form-components/config-form-types";
 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 {
@@ -19,13 +28,16 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
   const TemplateListGenerated = TemplateList();
   return (
     <div>
+      <Typography.Title level={4}>
+        {t("bodyshop.labels.intakechecklist")}
+      </Typography.Title>
       <Form.List name={["intakechecklist", "form"]}>
         {(fields, { add, remove, move }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                  <div className="imex-flex-row">
+                  <LayoutFormRow grow>
                     <Form.Item
                       className="imex-flex-row__margin"
                       label={t("jobs.fields.intake.name")}
@@ -95,7 +107,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                         },
                       ]}
                     >
-                      <Input />
+                      <InputNumber />
                     </Form.Item>
                     <Form.Item
                       className="imex-flex-row__margin"
@@ -109,7 +121,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                         },
                       ]}
                     >
-                      <Input />
+                      <InputNumber />
                     </Form.Item>
                     <DeleteFilled
                       onClick={() => {
@@ -121,7 +133,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                       index={index}
                       total={fields.length}
                     />
-                  </div>
+                  </LayoutFormRow>
                 </Form.Item>
               ))}
               <Form.Item>
@@ -164,14 +176,16 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
           </Select>
         </Form.Item>
       </SelectorDiv>
-
+      <Typography.Title level={4}>
+        {t("bodyshop.labels.deliverchecklist")}
+      </Typography.Title>
       <Form.List name={["deliverchecklist", "form"]}>
         {(fields, { add, remove, move }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                  <div className="imex-flex-row">
+                  <LayoutFormRow grow>
                     <Form.Item
                       className="imex-flex-row__margin"
                       label={t("jobs.fields.intake.name")}
@@ -232,7 +246,34 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                     >
                       <Switch />
                     </Form.Item>
-
+                    <Form.Item
+                      className="imex-flex-row__margin"
+                      label={t("jobs.fields.intake.min")}
+                      key={`${index}mind`}
+                      name={[field.name, "min"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item
+                      className="imex-flex-row__margin"
+                      label={t("jobs.fields.intake.max")}
+                      key={`${index}maxd`}
+                      name={[field.name, "max"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <InputNumber />
+                    </Form.Item>
                     <DeleteFilled
                       onClick={() => {
                         remove(field.name);
@@ -243,7 +284,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                       index={index}
                       total={fields.length}
                     />
-                  </div>
+                  </LayoutFormRow>
                 </Form.Item>
               ))}
               <Form.Item>