IO-2240 total for productive hours in summary

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

@@ -1,5 +1,5 @@
 import { Card, Col, Row, Statistic, Table, Typography } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -62,7 +62,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
       key: "efficiencyoverperiod",
       render: (text, record) =>
         `${(
-          (record.totalOverPeriod / (record.actualTotalOverPeriod || .1)) *
+          (record.totalOverPeriod / (record.actualTotalOverPeriod || 0.1)) *
           100
         ).toFixed(1)} %`,
     },
@@ -74,6 +74,23 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
       })
     : [];
 
+  const totalEffieciencyOverPeriod = useMemo(
+    () =>
+      Object.keys(data?.employees ?? [])
+        .map((key) => {
+          return { employee_number: key, ...data.employees[key] };
+        })
+        .map((e) =>
+          (
+            (e.totalOverPeriod / (e.actualTotalOverPeriod || 0.1)) *
+            100
+          ).toFixed(1)
+        )
+        .reduce((acc, prev) => acc + Number(prev), 0)
+        .toFixed(1),
+    [data]
+  );
+
   return (
     <Card title={t("scoreboard.labels.productivestatistics")}>
       <Row gutter={[16, 16]}>
@@ -113,6 +130,12 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
                 value={data.totalOverPeriod}
               />
             </Col>
+            <Col span={12}>
+              <Statistic
+                title={t("scoreboard.labels.efficiencyoverperiod")}
+                value={`${totalEffieciencyOverPeriod}%`}
+              />
+            </Col>
           </Row>
           <Typography.Text type="secondary">
             {t("scoreboard.labels.calendarperiod")}
@@ -121,7 +144,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
         <Col md={24} lg={20}>
           <Table
             columns={columns}
-            rowKey='employee_number'
+            rowKey="employee_number"
             dataSource={tableData}
             id="employee_number"
             scroll={{ y: "300px" }}