Added image handling for messaging BOD-187

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

@@ -7,12 +7,13 @@ import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
+import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
 import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
 import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
 import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
@@ -23,6 +24,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 // /node_modules/react-resizable/css/styles.css
 import "./dashboard-grid.styles.css";
 import "./dashboard-grid.styles.scss";
+
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
 const mapStateToProps = createStructuredSelector({
@@ -91,13 +93,15 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         <Menu.Item
           key={key}
           value={key}
-          disabled={existingLayoutKeys.includes(key)}
-        >
+          disabled={existingLayoutKeys.includes(key)}>
           {componentList[key].label}
         </Menu.Item>
       ))}
     </Menu>
   );
+  console.log("Dashboard Data:", data);
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <div>
@@ -105,13 +109,12 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         <Button>{t("dashboard.actions.addcomponent")}</Button>
       </Dropdown>
       <ResponsiveReactGridLayout
-        className="layout"
+        className='layout'
         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
+        width='100%'
         onLayoutChange={handleLayoutChange}
-        onBreakpointChange={onBreakpointChange}
-      >
+        onBreakpointChange={onBreakpointChange}>
         {state.layout.map((item, index) => {
           const TheComponent = componentList[item.i].component;
           return (
@@ -130,8 +133,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
                   onClick={() => handleRemoveComponent(item.i)}
                 />
                 <TheComponent
-                  className="dashboard-card"
-                  size="small"
+                  className='dashboard-card'
+                  size='small'
                   style={{ height: "100%", width: "100%" }}
                 />
               </LoadingSkeleton>