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

import { Alert, Col, Form, Radio, Row, Skeleton, Space, Spin, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
import JobSearchSelectComponent from "../job-search-select/job-search-select.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketTaskModalComponent);

export function TimeTicketTaskModalComponent({ bodyshop, form, loading, completedTasks, unassignedHours }) {
  const { t } = useTranslation();

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xl={12} lg={24}>
          <Form.Item
            name="jobid"
            label={t("timetickets.fields.ro_number")}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <JobSearchSelectComponent convertedOnly={true} notExported={true} />
          </Form.Item>
          <Space wrap>
            <Form.Item name="task" label={t("timetickets.labels.task")}>
              {loading ? (
                <Spin />
              ) : (
                <Radio.Group
                  optionType="button"
                  options={bodyshop.md_tasks_presets.presets.map((preset) => ({
                    value: preset.name,
                    label: preset.name,
                    disabled: completedTasks.map((task) => task.name).includes(preset.name)
                  }))}
                />
              )}
            </Form.Item>
            <Form.Item dependencies={["task"]}>
              {() => {
                const { task } = form.getFieldsValue();
                const theTaskPreset = bodyshop.md_tasks_presets?.presets?.find((tp) => tp.name === task);

                if (!task) return null;
                return (
                  <table className="task-tickets-table">
                    <tbody>
                      <tr>
                        <td>{t("bodyshop.fields.md_tasks_presets.percent")}</td>
                        <td>{`${theTaskPreset.percent || 0}%`}</td>
                      </tr>
                      <tr>
                        <td>{t("bodyshop.fields.md_tasks_presets.hourstype")}</td>
                        <td>{theTaskPreset.hourstype.join(", ")}</td>
                      </tr>
                      <tr>
                        <td>{t("bodyshop.fields.md_tasks_presets.nextstatus")}</td>
                        <td>{theTaskPreset.nextstatus}</td>
                      </tr>
                    </tbody>
                  </table>
                );
              }}
            </Form.Item>
          </Space>
        </Col>
        <Col xl={12} lg={24}>
          {loading ? (
            <Skeleton />
          ) : (
            <Form.List name="timetickets">
              {(fields) => {
                return (
                  <>
                    <Typography.Title level={4}>{t("timetickets.labels.claimtaskpreview")}</Typography.Title>
                    <table className="task-tickets-table">
                      <thead>
                        <tr>
                          <th>{t("timetickets.fields.employee")}</th>
                          <th>{t("timetickets.fields.cost_center")}</th>
                          <th>{t("timetickets.fields.ciecacode")}</th>
                          <th>{t("timetickets.fields.productivehrs")}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {fields.map((field, index) => (
                          <tr key={field.key}>
                            <td>
                              <Form.Item key={`${index}employeeid`} name={[field.name, "employeeid"]}>
                                <ReadOnlyFormItemComponent type="employee" />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item key={`${index}cost_center`} name={[field.name, "cost_center"]}>
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item key={`${index}ciecacode`} name={[field.name, "ciecacode"]}>
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item key={`${index}productivehrs`} name={[field.name, "productivehrs"]}>
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    <Alert type="success" message={t("timetickets.labels.payrollclaimedtasks")} />
                  </>
                );
              }}
            </Form.List>
          )}
          {unassignedHours > 0 && (
            <Alert
              type="error"
              message={t("timetickets.validation.unassignedlines", {
                unassignedHours: unassignedHours
              })}
            />
          )}
        </Col>
      </Row>

      {bodyshop?.md_tasks_presets?.use_approvals && (
        <Col xl={12} lg={24}>
          <Alert message={t("tt_approvals.labels.approval_queue_in_use")} type="warning" />
        </Col>
      )}
    </div>
  );
}