IO-950 Time Ticket editing fix.

client/src/components/header/header.component.jsx

@@ -77,121 +77,83 @@ function Header({
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
       >
-        <Menu.Item key="home">
+        <Menu.Item key="home" icon={<HomeFilled />}>
-          <Link to="/manage">
+          <Link to="/manage">{t("menus.header.home")}</Link>
-            <HomeFilled />
-            {t("menus.header.home")}
-          </Link>
         </Menu.Item>
-        <Menu.Item key="schedule">
+        <Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
-          <Link to="/manage/schedule">
+          <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
-            <Icon component={FaCalendarAlt} />
-            {t("menus.header.schedule")}
-          </Link>
         </Menu.Item>
         <Menu.SubMenu
-          title={
+          icon={<Icon component={FaCarCrash} />}
-            <span>
+          title={t("menus.header.jobs")}
-              <Icon component={FaCarCrash} />
-              <span>{t("menus.header.jobs")}</span>
-            </span>
-          }
         >
-          <Menu.Item key="activejobs">
+          <Menu.Item key="activejobs" icon={<FileFilled />}>
-            <FileFilled />
             <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
           </Menu.Item>
-          <Menu.Item key="parts-queue">
+          <Menu.Item key="parts-queue" icon={<ToolFilled />}>
-            <Link to="/manage/partsqueue">
+            <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
-              <ToolFilled /> {t("menus.header.parts-queue")}
-            </Link>
           </Menu.Item>
-          <Menu.Item key="availablejobs">
+          <Menu.Item key="availablejobs" icon={<ImportOutlined />}>
             <Link to="/manage/available">
-              <ImportOutlined /> {t("menus.header.availablejobs")}
+              {t("menus.header.availablejobs")}
             </Link>
           </Menu.Item>
           <Menu.Divider />
-          <Menu.Item key="alljobs">
+          <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
-            <UnorderedListOutlined />
             <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
           </Menu.Item>
           <Menu.Divider />
 
-          <Menu.Item key="productionlist">
+          <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
             <Link to="/manage/production/list">
-              <ScheduleOutlined />
               {t("menus.header.productionlist")}
             </Link>
           </Menu.Item>
-          <Menu.Item key="productionboard">
+          <Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
             <Link to="/manage/production/board">
-              <Icon component={BsKanban} />
               {t("menus.header.productionboard")}
             </Link>
           </Menu.Item>
           <Menu.Divider />
 
-          <Menu.Item key="scoreboard">
+          <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
-            <LineChartOutlined />
             <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          title={
+          icon={<UserOutlined />}
-            <span>
+          title={t("menus.header.customers")}
-              <UserOutlined />
-              <span>{t("menus.header.customers")}</span>
-            </span>
-          }
         >
-          <Menu.Item key="owners">
+          <Menu.Item key="owners" icon={<TeamOutlined />}>
-            <Link to="/manage/owners">
+            <Link to="/manage/owners">{t("menus.header.owners")}</Link>
-              <TeamOutlined />
-              {t("menus.header.owners")}
-            </Link>
           </Menu.Item>
-          <Menu.Item key="vehicles">
+          <Menu.Item key="vehicles" icon={<CarFilled />}>
-            <Link to="/manage/vehicles">
+            <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
-              <CarFilled />
-              {t("menus.header.vehicles")}
-            </Link>
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          title={
+          icon={<CarFilled />}
-            <span>
+          title={t("menus.header.courtesycars")}
-              <CarFilled />
-              <span>{t("menus.header.courtesycars")}</span>
-            </span>
-          }
         >
-          <Menu.Item key="courtesycarsall">
+          <Menu.Item key="courtesycarsall" icon={<CarFilled />}>
             <Link to="/manage/courtesycars">
-              <CarFilled />
               {t("menus.header.courtesycars-all")}
             </Link>
           </Menu.Item>
-          <Menu.Item key="contracts">
+          <Menu.Item key="contracts" icon={<FileFilled />}>
             <Link to="/manage/courtesycars/contracts">
-              <FileFilled />
               {t("menus.header.courtesycars-contracts")}
             </Link>
           </Menu.Item>
-          <Menu.Item key="newcontract">
+          <Menu.Item key="newcontract" icon={<FileAddFilled />}>
             <Link to="/manage/courtesycars/contracts/new">
-              <FileAddFilled />
               {t("menus.header.courtesycars-newcontract")}
             </Link>
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          title={
+          icon={<DollarCircleFilled />}
-            <span>
+          title={t("menus.header.accounting")}
-              <DollarCircleFilled />
-              <span>{t("menus.header.accounting")}</span>
-            </span>
-          }
         >
           <Menu.Item key="bills">
             <Link to="/manage/bills">{t("menus.header.bills")}</Link>

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -37,6 +37,33 @@ export function TimeTicketModalComponent({
 }) {
   const { t } = useTranslation();
 
+  const CostCenterSelect = ({ emps, value, ...props }) => {
+    return (
+      <Select
+        value={value === "timetickets.labels.shift" ? t(value) : value}
+        {...props}
+        disabled={value === "timetickets.labels.shift"}
+      >
+        {emps &&
+          emps.rates.map((item) => (
+            <Select.Option key={item.cost_center}>
+              {item.cost_center}
+            </Select.Option>
+          ))}
+      </Select>
+    );
+  };
+
+  const MemoInput = ({ value, ...props }) => {
+    return (
+      <Input
+        value={value?.startsWith("timetickets.") ? t(value) : value}
+        {...props}
+        disabled={value?.startsWith("timetickets.")}
+      />
+    );
+  };
+
   return (
     <div>
       <LayoutFormRow grow noDivider>
@@ -102,14 +129,7 @@ export function TimeTicketModalComponent({
                   },
                 ]}
               >
-                <Select>
+                <CostCenterSelect emps={emps} />
-                  {emps &&
-                    emps.rates.map((item) => (
-                      <Select.Option key={item.cost_center}>
-                        {item.cost_center}
-                      </Select.Option>
-                    ))}
-                </Select>
               </Form.Item>
             );
           }}
@@ -117,17 +137,23 @@ export function TimeTicketModalComponent({
       </LayoutFormRow>
 
       <LayoutFormRow>
-        <Form.Item
+        <Form.Item shouldUpdate>
-          label={t("timetickets.fields.productivehrs")}
+          {() => (
-          name="productivehrs"
+            <Form.Item
-          rules={[
+              label={t("timetickets.fields.productivehrs")}
-            {
+              name="productivehrs"
-              required: true,
+              rules={[
-              message: t("general.validation.required"),
+                {
-            },
+                  required:
-          ]}
+                    form.getFieldValue("cost_center") !==
-        >
+                    "timetickets.labels.shift",
-          <InputNumber min={0} precision={1} />
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={0} precision={1} />
+            </Form.Item>
+          )}
         </Form.Item>
         <Form.Item label={t("timetickets.fields.actualhrs")} name="actualhrs">
           <InputNumber min={0} precision={1} />
@@ -155,7 +181,7 @@ export function TimeTicketModalComponent({
           />
         </Form.Item>
         <Form.Item label={t("timetickets.fields.memo")} name="memo">
-          <Input />
+          <MemoInput />
         </Form.Item>
         <Form.Item shouldUpdate>
           {() => (

client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

@@ -54,7 +54,7 @@ export function TimeTicketModalContainer({
               emps.length === 1
                 ? emps[0].rates.filter(
                     (r) => r.cost_center === values.cost_center
-                  )[0].rate
+                  )[0]?.rate
                 : null,
           },
         },
@@ -205,7 +205,7 @@ export function TimeTicketModalContainer({
                   timeTicketModal.context.timeticket.jobid ||
                   null,
                 date: timeTicketModal.context.timeticket.date
-                  ? moment(timeTicketModal.context.date)
+                  ? moment(timeTicketModal.context.timeticket.date)
                   : null,
               }
             : { jobid: timeTicketModal.context.jobId || null }