IO-1911 Add target to tt scoreboard.

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

@@ -6,7 +6,9 @@ import {
   Bar,
   CartesianGrid,
   ComposedChart,
+  LabelList,
   Legend,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -48,13 +50,15 @@ export function ScoreboardTicketsBar({ data, bodyshop }) {
           <YAxis strokeWidth={graphProps.strokeWidth} />
           <Tooltip />
           <Legend />
-          {/* <Area
-            type="monotone"
-            name="Accumulated Hours"
-            dataKey="accHrs"
-            fill="lightgreen"
-            stroke="green"
-          /> */}
+          <ReferenceLine
+            y={
+              bodyshop.scoreboard_target.dailyBodyTarget +
+              bodyshop.scoreboard_target.dailyPaintTarget
+            }
+            label="Daily Target"
+            stroke="red"
+            strokeDasharray="3 3"
+          />
           {data &&
             data.employees.map((e, idx) => (
               <Bar
@@ -64,16 +68,10 @@ export function ScoreboardTicketsBar({ data, bodyshop }) {
                 stackId="productive"
                 // barSize={20}
                 fill={data.colors[idx]}
-              />
+              >
+                <LabelList position="top" />
+              </Bar>
             ))}
-
-          {/* <Line
-            name="Target Hours"
-            type="monotone"
-            dataKey="accTargetHrs"
-            stroke="#ff7300"
-            strokeWidth={graphProps.strokeWidth}
-          /> */}
         </ComposedChart>
       </ResponsiveContainer>
     </Card>

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

@@ -19,7 +19,7 @@ export default connect(
 
 export function ScoreboardTicketsStats({ data, bodyshop }) {
   const { t } = useTranslation();
-
+  console.log(data);
   const columns = [
     {
       title: t("employees.fields.employee_number"),
@@ -97,6 +97,14 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
               />
             </Col>
           </Row>
+          <Row gutter={[16, 16]}>
+            <Col span={12}>
+              <Statistic
+                title={t("scoreboard.labels.totaloverperiod")}
+                value={data.totalOverPeriod.toFixed(1)}
+              />
+            </Col>
+          </Row>
           <Typography.Text type="secondary">
             {t("scoreboard.labels.calendarperiod")}
           </Typography.Text>

client/src/graphql/timetickets.queries.js

@@ -60,7 +60,7 @@ export const QUERY_TIME_TICKETS_IN_RANGE = gql`
 `;
 
 export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
-  query QUERY_TIME_TICKETS_IN_RANGE(
+  query QUERY_TIME_TICKETS_IN_RANGE_SB(
     $start: date!
     $end: date!
     $fixedStart: date!

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

@@ -1,4 +1,4 @@
-import Icon, { BarsOutlined } from "@ant-design/icons";
+import Icon, { FieldTimeOutlined } from "@ant-design/icons";
 import { Tabs } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -70,7 +70,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
           <Tabs.TabPane
             tab={
               <span>
-                <BarsOutlined />
+                <FieldTimeOutlined />
                 {t("scoreboard.labels.timetickets")}
               </span>
             }