IO-1933 Added statistics on tech page

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

@@ -241,9 +241,11 @@ export default function ScoreboardTimeTickets() {
       );
 
     ret.totalEffieciencyOverPeriod =
-      (totalActualAndProductive.totalOverPeriod /
-        totalActualAndProductive.actualTotalOverPeriod) *
-      100;
+      totalActualAndProductive.actualTotalOverPeriod
+        ? (totalActualAndProductive.totalOverPeriod /
+            totalActualAndProductive.actualTotalOverPeriod) *
+          100
+        : 0;
 
     roundObject(ret);
     roundObject(totals);

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

@@ -116,7 +116,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
             <Col span={12}>
               <Statistic
                 title={t("scoreboard.labels.efficiencyoverperiod")}
-                value={`${data.totalEffieciencyOverPeriod}%`}
+                value={`${data.totalEffieciencyOverPeriod || 0}%`}
               />
             </Col>
           </Row>

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

@@ -0,0 +1,136 @@
+import { Card, Col, Space, Statistic, Typography } from "antd";
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+import moment from "moment";
+import { useQuery } from "@apollo/client";
+import { QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE } from "../../graphql/timetickets.queries";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { connect } from "react-redux";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useMemo } from "react";
+
+const { Title } = Typography;
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+const TechJobStatistics = ({ technician }) => {
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+
+  const startDate = start
+    ? moment(start)
+    : moment().startOf("week").subtract(7, "days");
+  const endDate = end ? moment(end) : moment().endOf("week");
+
+  const { loading, error, data } = useQuery(
+    QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE,
+    {
+      variables: {
+        start: startDate.format("YYYY-MM-DD"),
+        end: endDate.format("YYYY-MM-DD"),
+        fixedStart: moment().startOf("month").format("YYYY-MM-DD"),
+        fixedEnd: moment().endOf("month").format("YYYY-MM-DD"),
+        employeeid: technician.id,
+      },
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+    }
+  );
+
+  const totals = useMemo(() => {
+    if (data && data.timetickets && data.fixedperiod) {
+      const week = data.timetickets.reduce(
+        (acc, val) => {
+          acc.productivehrs = acc.productivehrs + val.productivehrs;
+          acc.actualhrs = acc.actualhrs + val.actualhrs;
+          return acc;
+        },
+        { productivehrs: 0, actualhrs: 0 }
+      );
+
+      const month = data.fixedperiod.reduce(
+        (acc, val) => {
+          acc.productivehrs = acc.productivehrs + val.productivehrs;
+          acc.actualhrs = acc.actualhrs + val.actualhrs;
+          return acc;
+        },
+        { productivehrs: 0, actualhrs: 0 }
+      );
+
+      return {
+        week,
+        month,
+      };
+    }
+
+    return {
+      week: { productivehrs: 0, actualhrs: 0 },
+      month: { productivehrs: 0, actualhrs: 0 },
+    };
+  }, [data]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Card title="Productive Hours Statistics">
+      <Space size={100}>
+        <Col>
+          <Title level={5}>This Week</Title>
+          <Space size={20}>
+            <Statistic
+              title="Productive Hours"
+              value={totals.week.productivehrs.toFixed(2)}
+            />
+            <Statistic
+              title="Actual Hours"
+              value={totals.week.actualhrs.toFixed(2)}
+            />
+            <Statistic
+              title="Efficiency %"
+              value={
+                totals.week.actualhrs
+                  ? `${(
+                      (totals.week.productivehrs / totals.week.actualhrs) *
+                      100
+                    ).toFixed(2)}%`
+                  : "0%"
+              }
+            />
+          </Space>
+        </Col>
+        <Col>
+          <Title level={5}>This Month</Title>
+          <Space size={20}>
+            <Statistic
+              title="Productive Hours"
+              value={totals.month.productivehrs.toFixed(2)}
+            />
+            <Statistic
+              title="Actual Hours"
+              value={totals.month.actualhrs.toFixed(2)}
+            />
+            <Statistic
+              title="Efficiency %"
+              value={
+                totals.month.actualhrs
+                  ? `${(
+                      (totals.month.productivehrs / totals.month.actualhrs) *
+                      100
+                    ).toFixed(2)}%`
+                  : "0%"
+              }
+            />
+          </Space>
+        </Col>
+      </Space>
+    </Card>
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TechJobStatistics);