UI Updates & Bill Entering

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

@@ -1,11 +1,13 @@
 import { CalendarOutlined } from "@ant-design/icons";
-import { Col, Row, Statistic } from "antd";
+import { Card, Col, Row, Statistic } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
 import * as Util from "./scoreboard-targets-table.util";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
 const rowGutter = [16, 16];
 const statSpans = { xs: 24, sm: 6 };
 
-export function ScoreboardTargetsTable({ bodyshop }) {
+export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Card
+      title={t("scoreboard.labels.targets")}
+      extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
+    >
       <Row gutter={rowGutter}>
         <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
           <Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
               <Statistic
                 title={t("scoreboard.labels.dailytarget")}
                 value={bodyshop.scoreboard_target.dailyBodyTarget}
-                prefix='B'
+                prefix="B"
               />
             </Col>
             <Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
             <Col {...statSpans}>
               <Statistic
                 value={bodyshop.scoreboard_target.dailyPaintTarget}
-                prefix='P'
+                prefix="P"
               />
             </Col>
             <Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
           </Row>
         </Col>
       </Row>
-    </div>
+    </Card>
   );
 }
 export default connect(