Minor fixed + refactored job details screens based on review.

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

@@ -38,7 +38,6 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function DashboardGridComponent({ currentUser, bodyshop }) {
   const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
-  console.log("DashboardGridComponent -> data", data)
   const { t } = useTranslation();
   const [state, setState] = useState({
     layout: bodyshop.associations[0].user.dashboardlayout || [
@@ -70,7 +69,6 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     const idxToRemove = state.layout.findIndex((i) => i.i === key);
     const newLayout = state.layout;
     newLayout.splice(idxToRemove, 1);
-    console.log(newLayout);
     handleLayoutChange(newLayout);
   };
 
@@ -100,14 +98,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>
   );
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <div>
@@ -115,12 +114,13 @@ 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 (
@@ -139,8 +139,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>