Started modifying chart components. Removed chartjs and added Nivo. Fixed signout functionality.

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

@@ -1,10 +1,9 @@
+import { CalendarFilled, CarFilled, GlobalOutlined, HomeFilled, TeamOutlined } from "@ant-design/icons";
 import { Avatar, Col, Menu, Row } from "antd";
-import {GlobalOutlined, HomeFilled, TeamOutlined, CalendarFilled, CarFilled} from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import UserImage from "../../assets/User.svg";
-import { signOutStart } from "../../redux/user/user.actions";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 
 export default ({
@@ -12,7 +11,8 @@ export default ({
   selectedNavItem,
   logo,
   handleMenuClick,
-  currentUser
+  currentUser,
+  signOutStart
 }) => {
   const { t } = useTranslation();
   //TODO Add
@@ -50,7 +50,7 @@ export default ({
                 </div>
               }
             >
-              <Menu.Item onClick={signOutStart()}>
+              <Menu.Item onClick={() => signOutStart()}>
                 {t("user.actions.signout")}
               </Menu.Item>
               <Menu.Item>
@@ -61,7 +61,7 @@ export default ({
               <Menu.SubMenu
                 title={
                   <span>
-                    <GlobalOutlined/>
+                    <GlobalOutlined />
                     <span>{t("menus.currentuser.languageselector")}</span>
                   </span>
                 }
@@ -111,7 +111,7 @@ export default ({
             <Menu.SubMenu title={t("menus.header.customers")}>
               <Menu.Item key="owners">
                 <Link to="/manage/owners">
-                  <TeamOutlined/>
+                  <TeamOutlined />
                   {t("menus.header.owners")}
                 </Link>
               </Menu.Item>
@@ -148,7 +148,7 @@ export default ({
                 </div>
               }
             >
-              <Menu.Item onClick={signOutStart()}>
+              <Menu.Item onClick={() => signOutStart()}>
                 {t("user.actions.signout")}
               </Menu.Item>
               <Menu.Item>

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -110,6 +110,8 @@ function InvoiceEnterModalContainer({
         });
       })
       .catch(error => {
+        console.log("error", error);
+
         notification["error"]({
           message: t("invoices.errors.creating", {
             message: error.message

client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx

@@ -16,7 +16,6 @@ export default function InvoiceEnterModalLinesComponent({
 
   const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
 
-  console.log("costCenters", responsibilityCenters);
   return (
     <div>
       <Form.List name="invoicelines">
@@ -47,7 +46,6 @@ export default function InvoiceEnterModalLinesComponent({
                               "invoicelines"
                             ]).invoicelines.map((item, idx) => {
                               if (idx === index) {
-                                console.log("opt", opt);
                                 return {
                                   ...item,
                                   joblineid: opt.key.includes("noline")

client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx

@@ -1,41 +1,67 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
-import { Pie } from "react-chartjs-2";
-
+import { Pie } from "@nivo/pie";
 export default function JobDetailCardsPartsComponent({ loading, data }) {
   const { t } = useTranslation();
 
-  const p = {
-    labels: ["Not Ordered", "Ordered", "Received", "Backordered"],
-    datasets: [
-      {
-        data: [5, 15, 10, 2],
-        backgroundColor: [
-          "rgba(255, 99, 132, 0.2)",
-          "rgba(54, 162, 235, 0.2)",
-          "rgba(255, 206, 86, 0.2)",
-          "rgba(75, 192, 192, 0.2)",
-          "rgba(153, 102, 255, 0.2)",
-          "rgba(255, 159, 64, 0.2)"
-        ],
-        borderColor: [
-          "rgba(255, 99, 132, 1)",
-          "rgba(54, 162, 235, 1)",
-          "rgba(255, 206, 86, 1)",
-          "rgba(75, 192, 192, 1)",
-          "rgba(153, 102, 255, 1)",
-          "rgba(255, 159, 64, 1)"
-        ],
-        borderWidth: 1
-      }
-    ]
+  const commonProperties = {
+    width: 225,
+    height: 225,
+    margin: { top: 20, right: 30, bottom: 20, left: 30 },
+    animate: true
   };
 
+  const cdata = [
+    {
+      id: "elixir",
+      label: "elixir",
+      value: 558,
+      color: "hsl(21, 70%, 50%)"
+    },
+    {
+      id: "erlang",
+      label: "erlang",
+      value: 443,
+      color: "hsl(91, 70%, 50%)"
+    },
+    {
+      id: "css",
+      label: "css",
+      value: 161,
+      color: "hsl(271, 70%, 50%)"
+    },
+    {
+      id: "python",
+      label: "python",
+      value: 305,
+      color: "hsl(33, 70%, 50%)"
+    },
+    {
+      id: "php",
+      label: "php",
+      value: 360,
+      color: "hsl(296, 70%, 50%)"
+    }
+  ];
+
   return (
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
-        {data ? <Pie data={p} /> : null}
+        <Pie
+          {...commonProperties}
+          data={cdata}
+          innerRadius={0.5}
+          padAngle={2}
+          cornerRadius={5}
+          enableRadialLabels={false}
+          legends={[
+            {
+              anchor: "bottom",
+              direction: "row"
+            }
+          ]}
+        />
       </CardTemplate>
     </div>
   );

client/src/translations/en_us/common.json

@@ -167,6 +167,7 @@
 				"receive": "Receive Part"
 			},
 			"errors": {
+				"creating": "Error adding invoice.",
 				"invalidro": "Not a valid RO.",
 				"invalidvendor": "Not a valid vendor.",
 				"validation": "Please ensure all fields are entered correctly. "
@@ -182,6 +183,9 @@
 			"labels": {
 				"actions": "Actions",
 				"new": "New Invoice"
+			},
+			"successes": {
+				"creating": "Invoice added successfully."
 			}
 		},
 		"joblines": {

client/src/translations/es/common.json

@@ -167,6 +167,7 @@
 				"receive": ""
 			},
 			"errors": {
+				"creating": "",
 				"invalidro": "",
 				"invalidvendor": "",
 				"validation": ""
@@ -182,6 +183,9 @@
 			"labels": {
 				"actions": "",
 				"new": ""
+			},
+			"successes": {
+				"creating": ""
 			}
 		},
 		"joblines": {

client/src/translations/fr/common.json

@@ -167,6 +167,7 @@
 				"receive": ""
 			},
 			"errors": {
+				"creating": "",
 				"invalidro": "",
 				"invalidvendor": "",
 				"validation": ""
@@ -182,6 +183,9 @@
 			"labels": {
 				"actions": "",
 				"new": ""
+			},
+			"successes": {
+				"creating": ""
 			}
 		},
 		"joblines": {