From 2c760948c5159eae22f40e0756aeb5a8991ac1e8 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Fri, 10 Jun 2022 10:57:51 -0700
Subject: [PATCH] IO-1911 Add target to tt scoreboard.

---
 .../scoreboard-timetickets.bar.component.jsx  | 30 +++++++++----------
 ...scoreboard-timetickets.stats.component.jsx | 10 ++++++-
 client/src/graphql/timetickets.queries.js     |  2 +-
 .../scoreboard/scoreboard.page.container.jsx  |  4 +--
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx
index 063638a47..fbf6da6d2 100644
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx
+++ b/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>
diff --git a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.stats.component.jsx b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.stats.component.jsx
index 6d2183a54..3613ee435 100644
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.stats.component.jsx
+++ b/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>
diff --git a/client/src/graphql/timetickets.queries.js b/client/src/graphql/timetickets.queries.js
index 0a8108571..28df9226d 100644
--- a/client/src/graphql/timetickets.queries.js
+++ b/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!
diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx
index a15ad12ac..ac35b6885 100644
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/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>
             }