+++

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
                                     }

src/container/DocumentManagement/CreateManagementDoc.js

@@ -44,7 +44,7 @@ export default class CreateManagementDoc extends Component {
             messageAlert: '',
             fileType: '',
             konfirmasi: false,
-            docId:'',
+            docId: '',
             sizeUpload: "1",
             disabledPeriode: false
         }
@@ -59,7 +59,7 @@ export default class CreateManagementDoc extends Component {
         console.log(this.props.name)
     }
 
-    getFileSize(){
+    getFileSize() {
         let body = {
             group: 'MAX_FILE_SIZE',
             company_id: 0,
@@ -69,7 +69,7 @@ export default class CreateManagementDoc extends Component {
             console.log(response);
             if (response.data) {
                 if (response.data.status === "success") {
-                    if(response.data.data.length == 0){
+                    if (response.data.data.length == 0) {
                         this.setState({
                             sizeUpload: "1"
                         })
@@ -184,7 +184,7 @@ export default class CreateManagementDoc extends Component {
         })
     }
 
-    getMonth(){
+    getMonth() {
         api.create().getMonthTransaction().then(response => {
             let dateNow = new Date
             // let bulan = format(dateNow, 'MMMM')
@@ -226,8 +226,12 @@ export default class CreateManagementDoc extends Component {
         let fileObj = event
         let length = event.name.split(".").length
         let fileType = event.name.split(".")[length - 1]
+        console.log(fileType)
+        if (fileType === 'zip') {
+            this.setState({ file: event, fileType: String(fileType) })
+        } else {
             ExcelRenderer(fileObj, (err, resp) => {
-            // console.log(fileType)
+                console.log(fileType)
                 if (err) {
                     console.log(err);
                 }
@@ -236,9 +240,10 @@ export default class CreateManagementDoc extends Component {
                 }
             })
         }
+    }
 
     validasi() {
-        if (this.state.disabledPeriode === true){
+        if (this.state.disabledPeriode === true) {
             if (R.isNil(this.state.getPerusahaan)) {
                 this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
             } else if (R.isNil(this.state.getDocument)) {
@@ -254,11 +259,11 @@ export default class CreateManagementDoc extends Component {
                 formData.append("extension", this.state.fileType);
                 formData.append("documentPeriode", null);
                 formData.append("documentMonth", null);
-                this.setState({ formData }, ()=> {
+                this.setState({ formData }, () => {
                     this.props.createDocument(this.state.formData, this.props.setting_id, this.props.name)
                 })
                 var object = {};
-                formData.forEach(function(value, key){
+                formData.forEach(function (value, key) {
                     object[key] = value;
                 });
                 var json = JSON.stringify(object);
@@ -286,15 +291,15 @@ export default class CreateManagementDoc extends Component {
                 formData.append("extension", this.state.fileType);
                 formData.append("documentPeriode", this.state.periode.periode);
                 formData.append("documentMonth", this.state.monthId.month_id);
-                this.setState({ formData }, ()=> {
+                this.setState({ formData }, () => {
                     this.props.createDocument(this.state.formData, this.props.setting_id, this.props.name)
                 })
             }
         }
     }
 
-    deleteFile(e){
-        this.setState({ file: null})
+    deleteFile(e) {
+        this.setState({ file: null })
     }
 
     closeAlert() {
@@ -391,7 +396,7 @@ export default class CreateManagementDoc extends Component {
                                 </div>
                                 // )}
                                 // {String(this.props.name).includes('Manual Book TIA') ? false : (
-                        : true }
+                                : true}
                             {this.state.disabledPeriode === false ?
                                 <div className="column-2">
                                     <div style={{ padding: 10, borderRadius: 5 }}>
@@ -421,7 +426,7 @@ export default class CreateManagementDoc extends Component {
                                 type={this.state.uploadStatus}
                                 percentage={this.state.percentage}
                                 result={this.state.result}
-                            acceptedFiles={["xls", "xlsx", "pdf", "PDF", "docx", "doc", "pptx", "ppt", "ods", "odf" ]}
+                                acceptedFiles={["xls", "xlsx", "pdf", "PDF", "docx", "doc", "pptx", "ppt", "ods", "odf", "zip"]}
                                 intent={"management"}
                                 onHandle={(dt) => {
                                     this.fileHandler(dt)

src/container/HomePage.js

 import React, { Component } from 'react';
-import { Typography, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
+import { Typography, MuiThemeProvider, createMuiTheme, Paper } from '@material-ui/core';
 import MUIDataTable from "mui-datatables";
 import Images from '../assets/Images';
 import DonutChart from 'react-d3-donut';
@@ -15,7 +15,13 @@ class HomePage extends Component {
         super(props)
         this.state = {
             userData: null,
-            listDashboard: []
+            listDashboard: [],
+            listMasterBudget: [
+                { nama: 'Triputra Agro Persada', status: 'complete' },
+                { nama: 'Puninar Infinite Raya', status: 'complete' },
+                { nama: 'Dharma Group', status: 'overdue' },
+                { nama: 'Daya Group', status: 'open' },
+            ]
         }
     }
 
@@ -30,7 +36,15 @@ class HomePage extends Component {
                 }
             }
         })
-        this.getDashboard()
+        api.create().checkApprover().then(response => {
+            console.log(response);
+            if (response.data.data.is_approver === true) {
+                this.setState({ isApprover: true }, () =>
+                    this.getDashboard())
+            } else {
+                this.setState({ isApprover: false })
+            }
+        })
     }
 
     componentDidUpdate() {
@@ -133,6 +147,8 @@ class HomePage extends Component {
         }]
         return (
             <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
+                {this.state.isApprover === true ?
+                    <div>
                         <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                             <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
                         </div>
@@ -279,11 +295,41 @@ class HomePage extends Component {
                                         </div>
                                     </div>
                                 </div>
-
-
                             </div>
                         </div>
-
+                    </div>
+                    :
+                    <div>
+                        <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                            <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
+                        </div>
+                        <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                            <div style={{ display: 'flex' }}>
+                                <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Task That Must be Done</Typography>
+                            </div>
+                        </div>
+                        <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                            <Paper style={{ width: 400, padding: 20, borderRadius: 10 }}>
+                                <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>Master Budget - Oct 2020 (1/4)</Typography>
+                                {this.state.listMasterBudget.map((item, index) => {
+                                    return (
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
+                                            <div style={{ display: 'flex' }}>
+                                                <img src={item.status === "overdue" ? Images.dotOverdue : item.status === "open" ? Images.dotOpen : Images.dotDone} />
+                                                <Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.nama}</Typography>
+                                            </div>
+                                            {item.status === 'overdue' && (
+                                                <div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
+                                                    <Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
+                                                </div>
+                                            )}
+                                        </div>
+                                    )
+                                })}
+                            </Paper>
+                        </div>
+                    </div>
+                }
             </div>
         );
     }