feature/IO-3587-Commision-Cut - rebuild from master-AIO

client/src/components/shop-teams/shop-employee-teams.form.component.jsx

@@ -1,6 +1,6 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation, useQuery } from "@apollo/client/react";
-import { Button, Card, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch, Tag, Typography } from "antd";
 
 import querystring from "query-string";
 import { useEffect } from "react";
@@ -26,10 +26,59 @@ import { useNotification } from "../../contexts/Notifications/notificationContex
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+const mapDispatchToProps = () => ({});
+
+const LABOR_TYPES = ["LAA", "LAB", "LAD", "LAE", "LAF", "LAG", "LAM", "LAR", "LAS", "LAU", "LA1", "LA2", "LA3", "LA4"];
+
+const PAYOUT_METHOD_OPTIONS = [
+  { labelKey: "employee_teams.options.hourly", value: "hourly" },
+  { labelKey: "employee_teams.options.commission_percentage", value: "commission" }
+];
+
+const TEAM_MEMBER_PRIMARY_FIELD_COLS = {
+  employee: { xs: 24, lg: 13, xxl: 14 },
+  allocation: { xs: 24, sm: 12, lg: 4, xxl: 4 },
+  payoutMethod: { xs: 24, sm: 12, lg: 7, xxl: 6 }
+};
+
+const TEAM_MEMBER_RATE_FIELD_COLS = { xs: 24, sm: 12, md: 8, lg: 6, xxl: 4 };
+
+const normalizeTeamMember = (teamMember = {}) => ({
+  ...teamMember,
+  payout_method: teamMember.payout_method || "hourly",
+  labor_rates: teamMember.labor_rates || {},
+  commission_rates: teamMember.commission_rates || {}
 });
 
+const normalizeEmployeeTeam = (employeeTeam = {}) => ({
+  ...employeeTeam,
+  employee_team_members: (employeeTeam.employee_team_members || []).map(normalizeTeamMember)
+});
+
+const getSplitTotal = (teamMembers = []) =>
+  teamMembers.reduce((sum, member) => sum + Number(member?.percentage || 0), 0);
+
+const hasExactSplitTotal = (teamMembers = []) => Math.abs(getSplitTotal(teamMembers) - 100) < 0.00001;
+
+const getPayoutMethodTagColor = (payoutMethod) => (payoutMethod === "commission" ? "gold" : "blue");
+
+const getEmployeeDisplayName = (employees = [], employeeId) => {
+  const employee = employees.find((currentEmployee) => currentEmployee.id === employeeId);
+  if (!employee) return null;
+
+  const fullName = [employee.first_name, employee.last_name].filter(Boolean).join(" ").trim();
+  return fullName || employee.employee_number || null;
+};
+
+const formatAllocationPercentage = (percentage) => {
+  if (percentage === null || percentage === undefined || percentage === "") return null;
+
+  const numericValue = Number(percentage);
+  if (!Number.isFinite(numericValue)) return null;
+
+  return `${numericValue.toFixed(2).replace(/\.?0+$/, "")}%`;
+};
+
 export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -45,38 +94,100 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
   });
 
   useEffect(() => {
-    if (data?.employee_teams_by_pk) form.setFieldsValue(data.employee_teams_by_pk);
-    else {
+    if (data?.employee_teams_by_pk) {
+      form.setFieldsValue(normalizeEmployeeTeam(data.employee_teams_by_pk));
+    } else {
       form.resetFields();
     }
   }, [form, data, search.employeeTeamId]);
 
   const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM);
   const [insertEmployeeTeam] = useMutation(INSERT_EMPLOYEE_TEAM);
+  const payoutMethodOptions = PAYOUT_METHOD_OPTIONS.map(({ labelKey, value }) => ({
+    label: t(labelKey),
+    value
+  }));
+  const teamName = Form.useWatch("name", form);
+  const teamMembers = Form.useWatch(["employee_team_members"], form) || [];
+  const teamCardTitle = teamName?.trim() || t("employee_teams.fields.name");
+
+  const getTeamMemberTitle = (teamMember = {}) => {
+    const employeeName =
+      getEmployeeDisplayName(bodyshop.employees, teamMember.employeeid) || t("employee_teams.fields.employeeid");
+    const allocation = formatAllocationPercentage(teamMember.percentage);
+    const payoutMethod =
+      teamMember.payout_method === "commission"
+        ? t("employee_teams.options.commission")
+        : t("employee_teams.options.hourly");
+
+    return (
+      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+        <Typography.Text strong>{employeeName}</Typography.Text>
+        <Tag bordered={false} color="geekblue">
+          {`${t("employee_teams.fields.allocation")}: ${allocation || "--"}`}
+        </Tag>
+        <Tag bordered={false} color={getPayoutMethodTagColor(teamMember.payout_method)}>
+          {payoutMethod}
+        </Tag>
+      </div>
+    );
+  };
+
+  const handleFinish = async ({ employee_team_members = [], ...values }) => {
+    const normalizedTeamMembers = employee_team_members.map((teamMember) => {
+      const nextTeamMember = normalizeTeamMember({ ...teamMember });
+      delete nextTeamMember.__typename;
+      return nextTeamMember;
+    });
+
+    if (normalizedTeamMembers.length === 0) {
+      notification.error({
+        title: t("employee_teams.errors.minimum_one_member")
+      });
+      return;
+    }
+
+    const employeeIds = normalizedTeamMembers.map((teamMember) => teamMember.employeeid).filter(Boolean);
+    const duplicateEmployeeIds = employeeIds.filter((employeeId, index) => employeeIds.indexOf(employeeId) !== index);
+
+    if (duplicateEmployeeIds.length > 0) {
+      notification.error({
+        title: t("employee_teams.errors.duplicate_member")
+      });
+      return;
+    }
+
+    if (!hasExactSplitTotal(normalizedTeamMembers)) {
+      notification.error({
+        title: t("employee_teams.errors.allocation_total_exact")
+      });
+      return;
+    }
 
-  const handleFinish = async ({ employee_team_members, ...values }) => {
     if (search.employeeTeamId && search.employeeTeamId !== "new") {
-      //Update a record.
       logImEXEvent("shop_employee_update");
 
       const result = await updateEmployeeTeam({
         variables: {
           employeeTeamId: search.employeeTeamId,
           employeeTeam: values,
-          teamMemberUpdates: employee_team_members
-            .filter((e) => e.id)
-            .map((e) => {
-              delete e.__typename;
-              return { where: { id: { _eq: e.id } }, _set: e };
-            }),
-          teamMemberInserts: employee_team_members
-            .filter((e) => e.id === null || e.id === undefined)
-            .map((e) => ({ ...e, teamid: search.employeeTeamId })),
-          teamMemberDeletes: data.employee_teams_by_pk.employee_team_members.filter(
-            (e) => !employee_team_members.find((etm) => etm.id === e.id)
-          )
+          teamMemberUpdates: normalizedTeamMembers
+            .filter((teamMember) => teamMember.id)
+            .map((teamMember) => ({
+              where: { id: { _eq: teamMember.id } },
+              _set: teamMember
+            })),
+          teamMemberInserts: normalizedTeamMembers
+            .filter((teamMember) => teamMember.id === null || teamMember.id === undefined)
+            .map((teamMember) => ({ ...teamMember, teamid: search.employeeTeamId })),
+          teamMemberDeletes: data.employee_teams_by_pk.employee_team_members
+            .filter(
+              (teamMember) => !normalizedTeamMembers.find((currentTeamMember) => currentTeamMember.id === teamMember.id)
+            )
+            .map((teamMember) => teamMember.id)
         }
       });
+
       if (!result.errors) {
         notification.success({
           title: t("employees.successes.save")
@@ -89,20 +200,19 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
         });
       }
     } else {
-      //New record, insert it.
       logImEXEvent("shop_employee_insert");
 
       insertEmployeeTeam({
         variables: {
           employeeTeam: {
             ...values,
-            employee_team_members: { data: employee_team_members },
+            employee_team_members: { data: normalizedTeamMembers },
             bodyshopid: bodyshop.id
           }
         },
         refetchQueries: ["QUERY_TEAMS"]
-      }).then((r) => {
-        search.employeeTeamId = r.data.insert_employee_teams_one.id;
+      }).then((response) => {
+        search.employeeTeamId = response.data.insert_employee_teams_one.id;
         history({ search: querystring.stringify(search) });
         notification.success({
           title: t("employees.successes.save")
@@ -116,6 +226,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
 
   return (
     <Card
+      title={teamCardTitle}
       extra={
         <Button type="primary" onClick={() => form.submit()}>
           {t("general.actions.save")}
@@ -130,7 +241,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
             rules={[
               {
                 required: true
-                //message: t("general.validation.required"),
               }
             ]}
           >
@@ -145,7 +255,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
             rules={[
               {
                 required: true
-                //message: t("general.validation.required"),
               }
             ]}
           >
@@ -156,243 +265,149 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                    <Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
-                      <Input type="hidden" />
-                    </Form.Item>
-                    <LayoutFormRow grow>
-                      <Form.Item
-                        label={t("employee_teams.fields.employeeid")}
-                        key={`${index}`}
-                        name={[field.name, "employeeid"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <EmployeeSearchSelectComponent options={bodyshop.employees} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("employee_teams.fields.percentage")}
-                        key={`${index}`}
-                        name={[field.name, "percentage"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <InputNumber min={0} max={100} precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAA")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAA"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAB")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAB"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAD")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAD"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAE")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAE"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const teamMember = normalizeTeamMember(teamMembers[field.name]);
 
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAF")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAF"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
+                  return (
+                    <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                      <Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
+                        <Input type="hidden" />
                       </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAG")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAG"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                      <LayoutFormRow
+                        grow
+                        title={getTeamMemberTitle(teamMember)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAM")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAM"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAR")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAR"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAS")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAS"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LAU")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LAU"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LA1")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LA1"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LA2")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LA2"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LA3")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LA3"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.lbr_types.LA4")}
-                        key={`${index}`}
-                        name={[field.name, "labor_rates", "LA4"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <CurrencyInput />
-                      </Form.Item>
-                      <Space align="center">
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <div>
+                          <Row gutter={[16, 0]}>
+                            <Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.employee}>
+                              <Form.Item
+                                label={t("employee_teams.fields.employeeid")}
+                                key={`${index}`}
+                                name={[field.name, "employeeid"]}
+                                rules={[
+                                  {
+                                    required: true
+                                  }
+                                ]}
+                              >
+                                <EmployeeSearchSelectComponent options={bodyshop.employees} />
+                              </Form.Item>
+                            </Col>
+                            <Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.allocation}>
+                              <Form.Item
+                                label={t("employee_teams.fields.allocation_percentage")}
+                                key={`${index}`}
+                                name={[field.name, "percentage"]}
+                                rules={[
+                                  {
+                                    required: true
+                                  }
+                                ]}
+                              >
+                                <InputNumber min={0} max={100} precision={2} />
+                              </Form.Item>
+                            </Col>
+                            <Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.payoutMethod}>
+                              <Form.Item
+                                label={t("employee_teams.fields.payout_method")}
+                                key={`${index}-payout-method`}
+                                name={[field.name, "payout_method"]}
+                                initialValue="hourly"
+                                rules={[
+                                  {
+                                    required: true
+                                  }
+                                ]}
+                              >
+                                <Select options={payoutMethodOptions} />
+                              </Form.Item>
+                            </Col>
+                          </Row>
+                          <Form.Item noStyle dependencies={[["employee_team_members", field.name, "payout_method"]]}>
+                            {() => {
+                              const payoutMethod =
+                                form.getFieldValue(["employee_team_members", field.name, "payout_method"]) || "hourly";
+                              const fieldName = payoutMethod === "commission" ? "commission_rates" : "labor_rates";
+
+                              return (
+                                <Row gutter={[16, 0]}>
+                                  {LABOR_TYPES.map((laborType) => (
+                                    <Col {...TEAM_MEMBER_RATE_FIELD_COLS} key={`${index}-${fieldName}-${laborType}`}>
+                                      <Form.Item
+                                        label={
+                                          t(`joblines.fields.lbr_types.${laborType}`)
+                                        }
+                                        name={[field.name, fieldName, laborType]}
+                                        rules={[
+                                          {
+                                            required: true
+                                          }
+                                        ]}
+                                      >
+                                        {payoutMethod === "commission" ? (
+                                          <InputNumber min={0} max={100} precision={2} />
+                                        ) : (
+                                          <CurrencyInput />
+                                        )}
+                                      </Form.Item>
+                                    </Col>
+                                  ))}
+                                </Row>
+                              );
+                            }}
+                          </Form.Item>
+                        </div>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
                     onClick={() => {
-                      add();
+                      add({
+                        percentage: 0,
+                        payout_method: "hourly",
+                        labor_rates: {},
+                        commission_rates: {}
+                      });
                     }}
                     style={{ width: "100%" }}
                   >
                     {t("employee_teams.actions.newmember")}
                   </Button>
                 </Form.Item>
+                <Form.Item noStyle shouldUpdate>
+                  {() => {
+                    const teamMembers = form.getFieldValue(["employee_team_members"]) || [];
+                    const splitTotal = getSplitTotal(teamMembers);
+
+                    return (
+                      <Typography.Text type={hasExactSplitTotal(teamMembers) ? undefined : "danger"}>
+                        {t("employee_teams.labels.allocation_total", {
+                          total: splitTotal.toFixed(2)
+                        })}
+                      </Typography.Text>
+                    );
+                  }}
+                </Form.Item>
               </div>
             );
           }}