Fix progress bar when there is no progress

src/views/Dashboard/Components/index.js

@@ -64,8 +64,13 @@ export const ProgressPlanningBar = ({progress}) => {
             )
         }
     }
-    else {
+    else { 
-        return null;
+      return (
+          <div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}>
+              <div style={{ backgroundColor: '#0000cc', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div>
+              <span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Planning : 0%</span>
+          </div>
+      )
     }
 }
 
@@ -88,7 +93,12 @@ export const ProgressActualBar = ({progress}) => {
         }
     }
     else {
-        return null;
+        return (
+          <div style={{backgroundColor: '#DDDDDD', color: '#FFFFFF', borderRadius: 10, marginBottom: 10}}>
+              <div style={{ backgroundColor: '#006600', width: `0%`, padding: 5, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 0 < 100 ? 0 : 10, borderBottomRightRadius: 0 < 100 ? 0 : 10, textAlign: 'center', fontWeight: 500, height: 30 }}></div>
+              <span style={{textAlign: 'center', width: '100%', float: 'left', marginTop: -25, color: '#4e4c4c', fontWeight: 500}}>Actual : 0%</span>
+          </div>
+      )
     }
 }
 
@@ -163,4 +173,4 @@ export const PopupContent = (item) => {
             <td><b>${item.report_notes}</b></td>
         </tr>
     `;
-}
+}