IO-306 Furhter dashboard development

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
-    .map((item, index) => componentList[item.i].gqlFragment || "")
-    .join("");
+  const componentBasedAdditions =
+    state &&
+    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()