IO-306 Furhter dashboard development

bodyshop_translations.babel

@@ -10532,6 +10532,27 @@
                             <folder_node>
                                 <name>errors</name>
                                 <children>
+                                    <concept_node>
+                                        <name>refreshrequired</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>updatinglayout</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx

@@ -32,13 +32,9 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
     return {
       name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
       value: laborData[key].getAmount() / 100,
-      // color: pieColor(i.status),
+      color: pieColor(key.toUpperCase()),
     };
   });
-  console.log(
-    "🚀  ~ file: monthly-parts-sales.component.jsx  ~ line 34  ~ chartData",
-    chartData
-  );
 
   return (
     <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
@@ -72,36 +68,56 @@ export const DashboardMonthlyRevenueGraphGql = `
 
 `;
 
+const pieColor = (type) => {
+  if (type === "LAA") return "lightgreen";
+  else if (type === "LAB") return "dodgerblue";
+  else if (type === "LAD") return "aliceblue";
+  else if (type === "LAE") return "seafoam";
+  else if (type === "LAG") return "chartreuse";
+  else if (type === "LAF") return "magenta";
+  else if (type === "LAM") return "gold";
+  else if (type === "LAR") return "crimson";
+  else if (type === "LAU") return "slategray";
+  else if (type === "LA1") return "slategray";
+  else if (type === "LA2") return "slategray";
+  else if (type === "LA3") return "slategray";
+  else if (type === "LA4") return "slategray";
+  return "slategray";
+};
+
 const renderActiveShape = (props) => {
-  const RADIAN = Math.PI / 180;
+  //const RADIAN = Math.PI / 180;
   const {
     cx,
     cy,
-    midAngle,
+    //midAngle,
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
     fill,
     payload,
-    percent,
+    //  percent,
     value,
   } = props;
-  const sin = Math.sin(-RADIAN * midAngle);
+  // const sin = Math.sin(-RADIAN * midAngle);
-  const cos = Math.cos(-RADIAN * midAngle);
+  // const cos = Math.cos(-RADIAN * midAngle);
-  const sx = cx + (outerRadius + 10) * cos;
+  // // const sx = cx + (outerRadius + 10) * cos;
-  const sy = cy + (outerRadius + 10) * sin;
+  // const sy = cy + (outerRadius + 10) * sin;
-  const mx = cx + (outerRadius + 30) * cos;
+  // const mx = cx + (outerRadius + 30) * cos;
-  const my = cy + (outerRadius + 30) * sin;
+  // const my = cy + (outerRadius + 30) * sin;
-  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  // //const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-  const ey = my;
+  // const ey = my;
-  const textAnchor = cos >= 0 ? "start" : "end";
+  //const textAnchor = cos >= 0 ? "start" : "end";
 
   return (
     <g>
-      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
         {payload.name}
       </text>
+      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
       <Sector
         cx={cx}
         cy={cy}
@@ -120,29 +136,28 @@ const renderActiveShape = (props) => {
         outerRadius={outerRadius + 10}
         fill={fill}
       />
-      <path
-        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
-        stroke={fill}
-        fill="none"
-      />
-
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        textAnchor={textAnchor}
-        fill="#333"
-      >
-        {payload.name}
-      </text>
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        dy={18}
-        textAnchor={textAnchor}
-        fill="#999"
-      >
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
     </g>
   );
 };
+// <path
+//   d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
+//   stroke={fill}
+//   fill="none"
+// />;
+// <text
+//   x={ex + (cos >= 0 ? 1 : -1) * 12}
+//   y={ey}
+//   textAnchor={textAnchor}
+//   fill="#333"
+// >
+//   {payload.name}
+// </text>
+// <text
+//   x={ex + (cos >= 0 ? 1 : -1) * 12}
+//   y={ey}
+//   dy={18}
+//   textAnchor={textAnchor}
+//   fill="#999"
+// >
+//   {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+// </text>

client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx

@@ -29,13 +29,9 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
     return {
       name: t(`joblines.fields.part_types.${key.toUpperCase()}`),
       value: partData[key].getAmount() / 100,
-      // color: pieColor(i.status),
+      color: pieColor(key.toUpperCase()),
     };
   });
-  console.log(
-    "🚀  ~ file: monthly-parts-sales.component.jsx  ~ line 34  ~ chartData",
-    chartData
-  );
 
   return (
     <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
@@ -68,37 +64,55 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
 export const DashboardMonthlyRevenueGraphGql = `
 
 `;
+const pieColor = (type) => {
+  if (type === "PAA") return "darkgreen";
+  else if (type === "PAC") return "green";
+  else if (type === "PAE") return "gold";
+  else if (type === "PAG") return "seafoam";
+  else if (type === "PAL") return "chartreuse";
+  else if (type === "PAM") return "magenta";
+  else if (type === "PAN") return "crimson";
+  else if (type === "PAO") return "gold";
+  else if (type === "PAP") return "crimson";
+  else if (type === "PAR") return "indigo";
+  else if (type === "PAS") return "dodgerblue";
+  else if (type === "PASL") return "dodgerblue";
+  return "slategray";
+};
 
 const renderActiveShape = (props) => {
-  const RADIAN = Math.PI / 180;
+  // const RADIAN = Math.PI / 180;
   const {
     cx,
     cy,
-    midAngle,
+    //  midAngle,
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
     fill,
     payload,
-    percent,
+    //   percent,
     value,
   } = props;
-  const sin = Math.sin(-RADIAN * midAngle);
+  // const sin = Math.sin(-RADIAN * midAngle);
-  const cos = Math.cos(-RADIAN * midAngle);
+  // const cos = Math.cos(-RADIAN * midAngle);
-  const sx = cx + (outerRadius + 10) * cos;
+  // const sx = cx + (outerRadius + 10) * cos;
-  const sy = cy + (outerRadius + 10) * sin;
+  //const sy = cy + (outerRadius + 10) * sin;
-  const mx = cx + (outerRadius + 30) * cos;
+  // const mx = cx + (outerRadius + 30) * cos;
-  const my = cy + (outerRadius + 30) * sin;
+  //const my = cy + (outerRadius + 30) * sin;
-  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  // const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-  const ey = my;
+  // const ey = my;
-  const textAnchor = cos >= 0 ? "start" : "end";
+  // const textAnchor = cos >= 0 ? "start" : "end";
 
   return (
     <g>
-      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
         {payload.name}
       </text>
+      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
       <Sector
         cx={cx}
         cy={cy}
@@ -117,29 +131,6 @@ const renderActiveShape = (props) => {
         outerRadius={outerRadius + 10}
         fill={fill}
       />
-      <path
-        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
-        stroke={fill}
-        fill="none"
-      />
-
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        textAnchor={textAnchor}
-        fill="#333"
-      >
-        {payload.name}
-      </text>
-      <text
-        x={ex + (cos >= 0 ? 1 : -1) * 12}
-        y={ey}
-        dy={18}
-        textAnchor={textAnchor}
-        fill="#999"
-      >
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
     </g>
   );
 };

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -69,8 +69,8 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
               type="monotone"
               name="Accumulated Sales"
               dataKey="accSales"
-              fill="#8884d8"
+              fill="#3CB371"
-              stroke="#8884d8"
+              stroke="#3CB371"
             />
             <Bar
               name="Daily Sales"

client/src/components/dashboard-components/refresh-required.component.jsx

@@ -1,8 +1,8 @@
-import { Card, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-
+import { Card } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+
 export default function DashboardRefreshRequired(props) {
   const { t } = useTranslation();
 
@@ -11,14 +11,14 @@ export default function DashboardRefreshRequired(props) {
       <div
         style={{
           display: "flex",
+          flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
+          textOverflow: "ellipsis",
         }}
       >
-        <SyncOutlined />
+        <SyncOutlined style={{ fontSize: "300%", margin: "1rem" }} />
-        <Typography.Title level={4}>
+        <div>{t("dashboard.errors.refreshrequired")}</div>
-          {t("dashboard.errors.refreshrequired")}
-        </Typography.Title>
       </div>
     </Card>
   );

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -198,15 +198,19 @@ const componentList = {
     label: "Production Dollars",
     component: DashboardTotalProductionDollars,
     gqlFragment: null,
-    w: 2,
+    w: 1,
     h: 1,
+    minW: 2,
+    minH: 1,
   },
   ProductionHours: {
     label: "Production Hours",
     component: DashboardTotalProductionHours,
     gqlFragment: DashboardTotalProductionHoursGql,
-    w: 2,
+    w: 3,
     h: 1,
+    minW: 3,
+    minH: 1,
   },
   ProjectedMonthlySales: {
     label: "Projected Monthly Sales",
@@ -214,6 +218,8 @@ const componentList = {
     gqlFragment: DashboardProjectedMonthlySalesGql,
     w: 2,
     h: 1,
+    minW: 2,
+    minH: 1,
   },
   MonthlyRevenueGraph: {
     label: "Monthly Sales Graph",
@@ -254,12 +260,15 @@ const componentList = {
 };
 
 const createDashboardQuery = (state) => {
-  const componentBasedAdditions = state.layout
+  const componentBasedAdditions =
-    .map((item, index) => componentList[item.i].gqlFragment || "")
+    state &&
-    .join("");
+    Array.isArray(state.layout) &&
+    state.layout
+      .map((item, index) => componentList[item.i].gqlFragment || "")
+      .join("");
   return gql`
     query QUERY_DASHBOARD_DETAILS {
-         ${componentBasedAdditions}
+         ${componentBasedAdditions || ""}
       monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
         .startOf("month")
         .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()

client/src/graphql/appointments.queries.js

@@ -228,7 +228,6 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
       where: { scheduled_completion: { _gte: $start, _lte: $end } }
     ) {
       id
-
       ro_number
       scheduled_completion
       labhrs: joblines_aggregate(
@@ -250,15 +249,9 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
         }
       }
     }
-    arrJobs: jobs(
+    arrJobs: jobs(where: { scheduled_in: { _gte: $start, _lte: $end } }) {
-      where: {
-        scheduled_in: { _gte: $start, _lte: $end }
-        removed: { _eq: false }
-      }
-    ) {
       id
       scheduled_in
-
       ro_number
       labhrs: joblines_aggregate(
         where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }

client/src/translations/en_us/common.json

@@ -668,6 +668,7 @@
 				"addcomponent": "Add Component"
 			},
 			"errors": {
+				"refreshrequired": "You must refresh the dashboard data to see this component.",
 				"updatinglayout": "Error saving updated layout {{message}}"
 			},
 			"labels": {

client/src/translations/es/common.json

@@ -668,6 +668,7 @@
 				"addcomponent": ""
 			},
 			"errors": {
+				"refreshrequired": "",
 				"updatinglayout": ""
 			},
 			"labels": {

client/src/translations/fr/common.json

@@ -668,6 +668,7 @@
 				"addcomponent": ""
 			},
 			"errors": {
+				"refreshrequired": "",
 				"updatinglayout": ""
 			},
 			"labels": {