Updates

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/bill-form/bill-form.component.jsx

@@ -1,17 +1,7 @@
 import Icon, {UploadOutlined} from "@ant-design/icons";
 import {useApolloClient} from "@apollo/client";
 import {useTreatments} from "@splitsoftware/splitio-react";
-import {
+import {Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload,} from "antd";
-  Alert,
-  Divider,
-  Form,
-  Input,
-  Select,
-  Space,
-  Statistic,
-  Switch,
-  Upload,
-} from "antd";
 import dayjs from "../../utils/day";
 import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";

client/src/components/schedule-calendar-wrapper/schedule-calendar-util.js

@@ -14,10 +14,10 @@ export function getRange(dateParam, viewParam) {
     start = dayjs(date).startOf("week");
     end = dayjs(date).endOf("week");
   }
-  //if view is month: from dayjs(date).startOf('month').subtract(7, 'days') to dayjs(date).endOf('month').add(7, 'days'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
+  //if view is month: from dayjs(date).startOf('month').subtract(7, 'day') to dayjs(date).endOf('month').add(7, 'day'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
   else if (view === "month") {
-    start = dayjs(date).startOf("month").subtract(7, "days");
+    start = dayjs(date).startOf("month").subtract(7, "day");
-    end = dayjs(date).endOf("month").add(7, "days");
+    end = dayjs(date).endOf("month").add(7, "day");
   }
   // if view is agenda: from dayjs(date).startOf('day') to dayjs(date).endOf('day').add(1, 'month');
   else if (view === "agenda") {

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -201,7 +201,7 @@ export function ScheduleJobModalComponent({
           {() => {
             const values = form.getFieldsValue();
             if (values.start) {
-              calculateScheduleLoad(dayjs(values.start).add(3, "days"));
+              calculateScheduleLoad(dayjs(values.start).add(3, "day"));
             }
             return (
               <div className="schedule-job-modal">

client/src/components/schedule-verify-integrity/schedule-verify-integrity.component.jsx

@@ -27,7 +27,7 @@ export function ScheduleVerifyIntegrity({ currentUser }) {
       data: { arrJobs, compJobs, prodJobs },
     } = await client.query({
       query: QUERY_SCHEDULE_LOAD_DATA,
-      variables: { start: dayjs(), end: dayjs().add(180, "days") },
+      variables: { start: dayjs(), end: dayjs().add(180, "day") },
     });
 
     //check that the leaving jobs are either in the arriving list, or in production.

client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.targets-table.component.jsx

@@ -17,7 +17,7 @@ const mapDispatchToProps = (dispatch) => ({
 const rowGutter = [16, 16];
 const statSpans = { xs: 24, sm: 3 };
 
-export function ScoreboardTimeticketsTargetsTable({ bodyshop }) {
+export function ScoreboardTimeTicketsTargetsTable({ bodyshop }) {
   const { t } = useTranslation();
 
   return (
@@ -282,4 +282,4 @@ export function ScoreboardTimeticketsTargetsTable({ bodyshop }) {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ScoreboardTimeticketsTargetsTable);
+)(ScoreboardTimeTicketsTargetsTable);

client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx

@@ -17,7 +17,7 @@ export default function ScoreboardTimeTickets() {
   const { start, end } = searchParams;
   const startDate = start
     ? dayjs(start)
-    : dayjs().startOf("week").subtract(7, "days");
+    : dayjs().startOf("week").subtract(7, "day");
   const endDate = end ? dayjs(end) : dayjs().endOf("week");
 
   const fixedPeriods = useMemo(() => {

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx

@@ -16,7 +16,9 @@ const mapStateToProps = createStructuredSelector({
 
 export function TechClockInComponent({ form, bodyshop, technician }) {
   const { t } = useTranslation();
+
   const emps = bodyshop.employees.filter((e) => e.id === technician.id)[0];
+
   return (
     <div>
       <LayoutFormRow grow noDivider>

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx

@@ -46,6 +46,16 @@ export function TechClockInContainer({
     (e) => e.id === (technician && technician.id)
   )[0];
 
+  const TechForm = () =>  {
+    if (technician) {
+      return <Form form={form} layout="vertical" onFinish={handleFinish} >
+        <TechClockInComponent form={form} />
+      </Form>
+    } else {
+      return <div />
+    }
+  }
+
   const handleFinish = async (values) => {
     setLoading(true);
     const theTime = (await axios.post("/utils/time")).data;
@@ -146,9 +156,7 @@ export function TechClockInContainer({
         </Space>
       }
     >
-      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <TechForm />
-        <TechClockInComponent form={form} />
-      </Form>
     </Card>
   );
 }

client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx

@@ -26,21 +26,21 @@ export function TechClockedInList({ technician }) {
         QUERY_ACTIVE_TIME_TICKETS,
         {
             variables: {
-        employeeId: technician.id,
+                employeeId: technician?.id,
             },
             fetchPolicy: "network-only",
             nextFetchPolicy: "network-only",
+            skip: !technician,
         }
     );
 
     const {t} = useTranslation();
-
     if (loading) return <LoadingSpinner/>;
     if (error) return <AlertComponent message={error.message} type="error"/>;
 
     return (
         <div>
-      {data.timetickets.length > 0 ? (
+            {data?.timetickets?.length > 0 ? (
                 <div>
                     <Typography.Title level={2}>
                         {t("timetickets.labels.alreadyclockedon")}
@@ -97,4 +97,5 @@ export function TechClockedInList({ technician }) {
         </div>
     );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(TechClockedInList);

client/src/components/tech-job-statistics/tech-job-statistics.component.jsx

@@ -30,8 +30,9 @@ const TechJobStatistics = ({ technician }) => {
         end: endDate.format("YYYY-MM-DD"),
         fixedStart: dayjs().startOf("month").format("YYYY-MM-DD"),
         fixedEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
-        employeeid: technician.id,
+        employeeid: technician?.id,
       },
+        skip: !technician,
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
     }

client/src/components/tech-login/tech-login.component.jsx

@@ -33,7 +33,8 @@ export function TechLogin({
   const navigate = useNavigate();
 
   const handleFinish = (values) => {
-    techLoginStart(values);
+    // Remap these because EmployeeID form name has previously been used in the project
+    techLoginStart({pin: values.pin, employeeid: values.techEmployeeId});
   };
 
   useEffect(() => {
@@ -49,7 +50,8 @@ export function TechLogin({
       >
         <Form.Item
           label={t("tech.fields.employeeid")}
-          name="employeeid"
+          name="techEmployeeId"
+
           rules={[
             {
               required: true,

client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx

@@ -37,7 +37,7 @@ export default function TimeTicketsDatesSelector() {
   return (
     <DatePicker.RangePicker
       defaultValue={[
-        start ? dayjs(start) : dayjs().startOf("week").subtract(7, "days"),
+        start ? dayjs(start) : dayjs().startOf("week").subtract(7, "day"),
         end ? dayjs(end) : dayjs().endOf("week"),
       ]}
       format="MM/DD/YYYY"

client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx

@@ -23,7 +23,7 @@ export default function TimeTicketsAttendanceTable() {
         variables: {
           start: start
             ? start
-            : dayjs().startOf("week").subtract(7, "days").format("YYYY-MM-DD"),
+            : dayjs().startOf("week").subtract(7, "day").format("YYYY-MM-DD"),
           end: end ? end : dayjs().endOf("week").format("YYYY-MM-DD"),
         },
       },

client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx

@@ -22,7 +22,7 @@ export default function TimeTicketsPayrollTable() {
         variables: {
           start: start
             ? start
-            : dayjs().startOf("week").subtract(7, "days").format("YYYY-MM-DD"),
+            : dayjs().startOf("week").subtract(7, "day").format("YYYY-MM-DD"),
           end: end ? end : dayjs().endOf("week").format("YYYY-MM-DD"),
         },
       },

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -18,20 +18,36 @@ import {
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
+/**
+ * Mapping state to props
+ */
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
+/**
+ * Mapping dispatch to props
+ */
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
+/**
+ * ScoreboardContainer component
+ * @param {Object} props - The props that were defined by the caller of this component.
+ * @param {Function} props.setBreadcrumbs - Function to set breadcrumbs.
+ * @param {Function} props.setSelectedHeader - Function to set selected header.
+ */
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
   const searchParams = queryString.parse(useLocation().search);
   const { tab } = searchParams;
   const history = useNavigate();
+
+  /**
+   * useEffect hook to set document title, selected header and breadcrumbs
+   */
   useEffect(() => {
     document.title = t("titles.scoreboard");
     setSelectedHeader("scoreboard");
@@ -43,6 +59,9 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
     ]);
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
+  /**
+   * Render the component
+   */
   return (
     <FeatureWrapper featureName="scoreboard">
       <RbacWrapper action="scoreboard:view">
@@ -97,6 +116,10 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
     </FeatureWrapper>
   );
 }
+
+/**
+ * Connecting the component to Redux store
+ */
 export default connect(
   mapStateToProps,
   mapDispatchToProps

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -37,7 +37,7 @@ export function TimeTicketsContainer({
 
   const startDate = start
       ? dayjs(start)
-      : dayjs().startOf("week").subtract(7, "days");
+      : dayjs().startOf("week").subtract(7, "day");
   const endDate = end ? dayjs(end) : dayjs().endOf("week");
 
   const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {

client/src/redux/application/application.sagas.js

@@ -209,9 +209,9 @@ export function* calculateScheduleLoad({ payload: end }) {
 
     const range = Math.round(dayjs.duration(end.diff(today)).asDays()) + 1;
     for (var day = 0; day < range; day++) {
-      const current = dayjs(today).add(day, "days").format("yyyy-MM-DD");
+      const current = dayjs(today).add(day, "day").format("yyyy-MM-DD");
       const prev = dayjs(today)
-        .add(day - 1, "days")
+        .add(day - 1, "day")
         .format("yyyy-MM-DD");
       if (!!!load[current]) {
         load[current] = {};

client/src/utils/DatePickerRanges.js

@@ -1,10 +1,10 @@
 import dayjs from "./day";
 const range = {
   Today: [dayjs(), dayjs()],
-  "Last 14 days": [dayjs().subtract(14, "days"), dayjs()],
+  "Last 14 days": [dayjs().subtract(14, "day"), dayjs()],
-  "Last 7 days": [dayjs().subtract(7, "days"), dayjs()],
+  "Last 7 days": [dayjs().subtract(7, "day"), dayjs()],
-  "Next 7 days": [dayjs(), dayjs().add(7, "days")],
+  "Next 7 days": [dayjs(), dayjs().add(7, "day")],
-  "Next 14 days": [dayjs(), dayjs().add(14, "days")],
+  "Next 14 days": [dayjs(), dayjs().add(14, "day")],
   "Last Month": [
     dayjs().startOf("month").subtract(1, "month"),
     dayjs().startOf("month").subtract(1, "month").endOf("month"),
@@ -15,13 +15,13 @@ const range = {
     dayjs().startOf("month").add(1, "month").endOf("month"),
   ],
   "Last Quarter": [
-    dayjs().startOf("quarter").subtract(1, "quarters"),
+    dayjs().startOf("quarter").subtract(1, "quarter"),
     dayjs().startOf("quarter").subtract(1, "day"),
   ],
   "This Quarter": [
     dayjs().startOf("quarter"),
     dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day"),
   ],
-  "Last 90 Days": [dayjs().add(-90, "days"), dayjs()],
+  "Last 90 Days": [dayjs().add(-90, "day"), dayjs()],
 };
 export default range;

client/src/utils/day.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+
 import dayjsBusinessDays from "dayjs-business-days2";
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
 import updateLocale from 'dayjs/plugin/updateLocale';
@@ -30,6 +31,7 @@ import isYesterday from 'dayjs/plugin/isYesterday';
 import objectSupport from 'dayjs/plugin/objectSupport';
 import toArray from 'dayjs/plugin/toArray';
 import toObject from 'dayjs/plugin/toObject';
+
 // import badMutable from 'dayjs/plugin/badMutable';
 // import preParsePostFormat from 'dayjs/plugin/preParsePostFormat';
 
@@ -42,7 +44,6 @@ dayjs.extend(isYesterday);
 dayjs.extend(isTomorrow);
 dayjs.extend(isToday);
 dayjs.extend(localeData);
-dayjs.extend(relativeTime);
 dayjs.extend(quarterOfYear);
 dayjs.extend(localizedFormat);
 // dayjs.extend(preParsePostFormat); // TODO: This should not be needed
@@ -57,6 +58,7 @@ dayjs.extend(calendar);
 dayjs.extend(arraySupport);
 dayjs.extend(advancedFormat);
 dayjs.extend(duration);
+dayjs.extend(relativeTime);
 dayjs.extend(pluralGetSet);
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);