Added tech routing paths and basic structure of landing page + sign in + reducers BOD-95

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

@@ -1,9 +1,9 @@
+import { Card, Statistic } from "antd";
+import moment from "moment";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { Statistic, Card } from "antd";
-import moment from "moment";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -12,25 +12,21 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScoreboardDayStats({ bodyshop, date, entries }) {
-  const {
-    lastNumberWorkingDays,
-    dailyPaintTarget,
-    dailyBodyTarget,
-  } = bodyshop.scoreboard_target;
+  const { dailyPaintTarget, dailyBodyTarget } = bodyshop.scoreboard_target;
 
-  let totalHrs = 0;
+  //let totalHrs = 0;
   const paintHrs = entries.reduce((acc, value) => {
-    totalHrs = +value.painthrs;
+    // totalHrs = +value.painthrs;
     return acc + value.painthrs;
   }, 0);
 
   const bodyHrs = entries.reduce((acc, value) => {
-    totalHrs = +value.bodyhrs;
+    //totalHrs = +value.bodyhrs;
     return acc + value.bodyhrs;
   }, 0);
 
   return (
-    <div className="imex-flex-row__margin">
+    <div className='imex-flex-row__margin'>
       <Card title={moment(date).format("D - ddd")}>
         <Statistic
           valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}

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

@@ -5,7 +5,7 @@ import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.com
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
 
 export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
-  const { loading, error, data } = scoreboardSubscription;
+  const { data } = scoreboardSubscription;
 
   const scoreBoardlist = (data && data.scoreboard) || [];
   console.log("ScoreboardDisplayComponent -> scoreBoardlist", scoreBoardlist);

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

@@ -1,11 +1,11 @@
+import { CalendarOutlined } from "@ant-design/icons";
+import { 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 * as Util from "./scoreboard-targets-table.util";
-import { Row, Col, Card, Statistic } from "antd";
-import { CalendarOutlined } from "@ant-design/icons";
-import { useTranslation } from "react-i18next";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -35,7 +35,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 +70,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
             <Col {...statSpans}>
               <Statistic
                 value={bodyshop.scoreboard_target.dailyPaintTarget}
-                prefix="P"
+                prefix='P'
               />
             </Col>
             <Col {...statSpans}>

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -1,5 +1,4 @@
-import moment from "moment";
-import momentbd from "moment-business-days";
+import moment from "moment-business-days";
 
 moment.updateLocale("ca", {
   workingWeekdays: [1, 2, 3, 4, 5],

client/src/components/tech-header/tech-header.component.jsx

@@ -0,0 +1,29 @@
+import { Layout, Typography } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { useTranslation } from "react-i18next";
+const { Header } = Layout;
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TechHeader({ technician }) {
+  const { t } = useTranslation();
+  return (
+    <Header style={{ textAlign: "center" }}>
+      <Typography.Title style={{ color: "#fff" }}>
+        {!!technician
+          ? t("tech.labels.loggedin", { name: technician.name })
+          : t("tech.labels.notloggedin")}
+      </Typography.Title>
+    </Header>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TechHeader);

client/src/components/tech-login/tech-login.component.jsx

@@ -0,0 +1,59 @@
+import { Button, Form, Input } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { loginStart } from "../../redux/tech/tech.actions";
+import {
+  selectLoginError,
+  selectTechnician,
+} from "../../redux/tech/tech.selectors";
+import "./tech-login.styles.scss";
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+  loginError: selectLoginError,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  loginStart: (user) => dispatch(loginStart(user)),
+});
+
+export function TechLogin({ technician, loginError, loginStart }) {
+  const { t } = useTranslation();
+  const handleFinish = (values) => {
+    loginStart(values);
+  };
+  return (
+    <div className='tech-login-container'>
+      <Form onFinish={handleFinish}>
+        <Form.Item
+          label={t("tech.fields.username")}
+          name='date'
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input size='large' />
+        </Form.Item>
+        <Form.Item
+          label={t("tech.fields.password")}
+          name='date'
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input.Password size='large' />
+          <Button htmlType='submit' className='login-btn'>
+            {t("general.actions.login")}
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(TechLogin);

client/src/components/tech-login/tech-login.styles.scss

@@ -0,0 +1,16 @@
+.tech-login-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 2rem;
+  form {
+    width: 75vw;
+    max-width: 30rem;
+  }
+  .login-btn {
+    margin: 1.5rem 0rem;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+}

client/src/components/tech-sider/tech-sider.component.jsx

@@ -0,0 +1,67 @@
+import Icon, { SearchOutlined } from "@ant-design/icons";
+import { Layout, Menu } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FiLogIn, FiLogOut } from "react-icons/fi";
+import { MdTimer, MdTimerOff } from "react-icons/md";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+const { Sider } = Layout;
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function TechSider({ technician }) {
+  const [collapsed, setCollapsed] = useState(true);
+  const { t } = useTranslation();
+  const onCollapse = (collapsed) => {
+    setCollapsed(collapsed);
+  };
+
+  return (
+    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
+      <Menu theme='dark' defaultSelectedKeys={["1"]} mode='inline'>
+        <Menu.Item
+          key='1'
+          disabled={!!technician}
+          icon={<Icon component={FiLogIn} />}>
+          <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
+        </Menu.Item>
+        <Menu.Item key='2' disabled={!!!technician} icon={<SearchOutlined />}>
+          <Link to={`/tech/lookup`}>{t("menus.tech.joblookup")}</Link>
+        </Menu.Item>
+        <Menu.Item
+          key='3'
+          disabled={!!!technician}
+          icon={<Icon component={MdTimer} />}>
+          <Link to={`/tech/clockin`}>{t("menus.tech.clockin")}</Link>
+        </Menu.Item>{" "}
+        <Menu.Item
+          key='4'
+          disabled={!!!technician}
+          icon={<Icon component={MdTimerOff} />}>
+          <Link to={`/tech/clockout`}>{t("menus.tech.clockout")}</Link>
+        </Menu.Item>
+        <Menu.Item key='5' disabled={!!!technician} icon={<SearchOutlined />}>
+          <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
+        </Menu.Item>
+        <Menu.Item key='6' disabled={!!!technician} icon={<SearchOutlined />}>
+          <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
+        </Menu.Item>
+        <Menu.Item
+          key='7'
+          disabled={!!!technician}
+          icon={<Icon component={FiLogOut} />}>
+          <Link to={`/tech/logout`}>{t("menus.tech.logout")}</Link>
+        </Menu.Item>
+      </Menu>
+    </Sider>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(TechSider);