+++

src/assets/Images.js

@@ -51,7 +51,10 @@ const Images = {
     camera: require('./camera.svg'),
     meeting: require('./meeting.jpg'),
     triputraBlack: require('./triputra-black.jpg'),
-    delete: require('./delete.svg')
+    delete: require('./delete.svg'),
+    dotDone: require('./dot-done.svg'),
+    dotOverdue: require('./dot-overdue.svg'),
+    dotOpen: require('./dot-open.svg'),
 
 }
 

src/assets/dot-done.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd" transform="translate(-7 -7)">
+        <path d="M0 0H24V24H0z"/>
+        <circle cx="12" cy="12" r="4.5" fill="#69D56E" stroke="#4CAF51"/>
+    </g>
+</svg>

src/assets/dot-open.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd" transform="translate(-7 -7)">
+        <path d="M0 0H24V24H0z"/>
+        <circle cx="12" cy="12" r="4.5" fill="#D8D8D8" stroke="#B1B1B1"/>
+    </g>
+</svg>

src/assets/dot-overdue.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd" transform="translate(-7 -7)">
+        <path d="M0 0H24V24H0z"/>
+        <circle cx="12" cy="12" r="4.5" fill="#F65A4C" stroke="#CF392C"/>
+    </g>
+</svg>

src/container/BudgetTahunan.js

@@ -752,7 +752,7 @@ export default class BudgetTahunan extends Component {
                 {this.state.visibleBudgetTahunan && (
                     <div>
                         <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
-                            <Typography style={{ fontSize: '16px', color: 'white' }}>Master Budget Submission & CAT Submission</Typography>
+                            <Typography style={{ fontSize: '16px', color: 'white' }}>Master Budget & CAT Submission</Typography>
                         </div>
                         <div style={{ padding: 20, width: '100%' }}>
                             <Paper style={{ paddingTop: 10 }}>
@@ -890,27 +890,27 @@ export default class BudgetTahunan extends Component {
                                     </div>
                                     {this.state.isApprover === true ?
                                         this.state.lastStatus === 'WAITING FOR REVIEW' ?
-                                            <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                            <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                 <span>{this.state.lastStatus}</span>
                                             </div> : this.state.lastStatus === 'WAITING FOR YOUR APPROVAL' ?
-                                                <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                                <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                     <span>{this.state.lastStatus}</span>
                                                 </div> : null
                                         :
                                         this.state.lastStatus === 'SUBMITTED' ?
-                                            <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                            <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                 <span>{this.state.lastStatus}</span>
                                             </div> :
                                             this.state.lastStatus === 'WAITING FOR APPROVAL' ?
-                                                <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                                <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                     <span>{`${this.state.lastStatus} - ${this.state.pic}`}</span>
                                                 </div> :
                                                 this.state.lastStatus === 'REVISION' ?
-                                                    <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                                    <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                         <span>NEED REVISION</span>
                                                     </div> :
                                                     this.state.lastStatus === 'APPROVED' ?
-                                                        <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center' }}>
+                                                        <div style={{ width: '100%', padding: '10px 20px', backgroundColor: 'yellow', textAlign: 'center', marginTop: 20 }}>
                                                             <span>APPROVED</span>
                                                         </div> : null
                                     }