diff --git a/src/containers/DefaultLayout/DefaultLayout.js b/src/containers/DefaultLayout/DefaultLayout.js
index b4d20cd..3cbce9e 100644
--- a/src/containers/DefaultLayout/DefaultLayout.js
+++ b/src/containers/DefaultLayout/DefaultLayout.js
@@ -152,7 +152,7 @@ class DefaultLayout extends Component {
         }
         if (countErr) {
           if (parseInt(countErr) > 2) {
-            this.signOut();
+            // this.signOut();
           } else {
             window.location.reload();
           }
diff --git a/src/services/base.js b/src/services/base.js
new file mode 100644
index 0000000..8166693
--- /dev/null
+++ b/src/services/base.js
@@ -0,0 +1,41 @@
+import axios from 'axios';
+export default class RequestApi {
+    // constructor() {
+    //     this.Request = this.Request.bind(this);
+    // }
+
+    static Request() {
+        // axios.interceptors.request.use(function (config) {
+        //     const token = localStorage.getItem('token')
+        //     config.headers.Authorization = token;
+
+        //     return config;
+        // });
+        const token = localStorage.getItem('token')
+
+        let instance = axios.create({
+            headers: {
+                'Content-Type': 'application/json',
+                "Authorization": `Bearer ${token}`
+            }
+        })
+
+        instance.interceptors.response.use(
+            (response) => response,
+            async (error) => {
+                // const originalRequest = error.config;
+                if (error.response.status === 307 || error.response.status === 403) {
+                    console.log(error.response);
+                }
+
+                return Promise.reject(error);
+            }
+        );
+
+        return instance;
+    }
+
+    static getToken() { }
+}
+export const AXIOS = RequestApi.Request();
+
diff --git a/src/views/Map/Map_16.js b/src/views/Map/Map_16.js
index 1030c72..0319101 100644
--- a/src/views/Map/Map_16.js
+++ b/src/views/Map/Map_16.js
@@ -123,6 +123,7 @@ import * as lodash from 'lodash';
 import { Pie, Line, Bar } from 'react-chartjs-2';
 import numeral from 'numeral';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { AXIOS } from '../../services/base'
 import 'chartjs-plugin-zoom';
 
 const HEADER = {
@@ -547,14 +548,14 @@ const optionsChartKurvaS = {
     enabled: true,
     mode: 'xy',
     limits: {
-      y: {min: 0, max: 100}
+      y: { min: 0, max: 100 }
     }
   },
   pan: {
     enabled: true,
     mode: 'xy',
     limits: {
-      y: {min: 0, max: 100}
+      y: { min: 0, max: 100 }
     }
   }
 }
@@ -779,7 +780,7 @@ class SiopasMap extends Component {
       this.mapOnClick(evt);
     });
     this.setState({ mapProjection: this.olmap.getView().getProjection() }, () => console.log('mapProjection', this.state.mapProjection));
-    
+
     // // set default to check all project
     // if (this.state.projectTree && this.state.projectTree.length > 0) {
     //   let checked = [];
@@ -787,7 +788,7 @@ class SiopasMap extends Component {
     //   console.log('checked', checked);
     //   this.setState({checkedKeysProjectTree: checked});
     // }
-    
+
   }
 
   componentDidUpdate = (prevProps, prevState) => {
@@ -1089,23 +1090,23 @@ class SiopasMap extends Component {
     let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
     let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
 
-     const payload = {
-      "paging": {"start": 0, "length": -1},
+    const payload = {
+      "paging": { "start": 0, "length": -1 },
       "columns": [
         // {"name": "name", "logic_operator": "like", "value": search, "table_name": "m_users"},
-        {"name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd},
+        { "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd },
       ],
       "joins": [{
-          "name":"m_users",
-          "column_join":"user_id",
-          "column_results":[
-            "name",
-            "ktp_number"
-          ]
-       }],
-      "orders": {"columns": ["id"], "ascending": false}
+        "name": "m_users",
+        "column_join": "user_id",
+        "column_results": [
+          "name",
+          "ktp_number"
+        ]
+      }],
+      "orders": { "columns": ["id"], "ascending": false }
     }
-    
+
     const result = await axios
       .post(PRESENCE_SEARCH, payload, HEADER)
       .then(res => res)
@@ -1113,10 +1114,10 @@ class SiopasMap extends Component {
 
     // console.log(result)
 
-    if(result && result.data && result.data.code == 200) {
+    if (result && result.data && result.data.code == 200) {
       let dataRes = result.data.data || []
       this.setState({ presensiData: dataRes }, () => this.getPresensiFeatures())
-    }else{
+    } else {
       NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
@@ -1308,7 +1309,7 @@ class SiopasMap extends Component {
       // };
       // console.log("dataRes2", dataRes2);
       // this.setState({ dataPersentaseProyek: dataRes2 });
-      this.setState({dataCurvaS: dataRes2});
+      this.setState({ dataCurvaS: dataRes2 });
       console.log('dataRes2-----------', dataRes2);
 
       // set status proyek for adw
@@ -1321,7 +1322,7 @@ class SiopasMap extends Component {
             budgetControl.push(item.data.budget_control);
           });
         }
-        this.setState({dataStatusProyekAdw: budgetControl});
+        this.setState({ dataStatusProyekAdw: budgetControl });
       }
     }
     else {
@@ -2145,7 +2146,7 @@ class SiopasMap extends Component {
       console.log('checkedKeysProjectTree', checkedKeysProjectTree);
 
       // first remove projectLayer and its features
-      
+
       // this.removeLayerByName('routeLayer');
       // this.removeLayerByName('projectLayer');
       // this.removeLayerByName('waspangLayer');
@@ -2654,7 +2655,7 @@ class SiopasMap extends Component {
         "coordinates": []
       }
 
-      for (let i=0; i < userRoute.features.length; i++) {
+      for (let i = 0; i < userRoute.features.length; i++) {
         polyline.coordinates.push(userRoute.features[i].geometry.coordinates);
       }
 
@@ -2868,10 +2869,10 @@ class SiopasMap extends Component {
     const { kurvaSWindowMode } = this.state;
     console.log('toggleKurvaSWindowMode', kurvaSWindowMode);
     if (kurvaSWindowMode === 'default') {
-      this.setState({kurvaSWindowMode: 'maximize'}, () => this.renderCarouselKurvaS())
+      this.setState({ kurvaSWindowMode: 'maximize' }, () => this.renderCarouselKurvaS())
     }
     else {
-      this.setState({kurvaSWindowMode: 'default'}, () => this.renderCarouselKurvaS());
+      this.setState({ kurvaSWindowMode: 'default' }, () => this.renderCarouselKurvaS());
     }
   }
 
@@ -2907,7 +2908,7 @@ class SiopasMap extends Component {
       body: JSON.stringify(payload) // body data type must match "Content-Type" header
     }
     try {
-      const result = await fetch(url, config).then(response => response.json()).then(res => res);
+      const result = await AXIOS.post(url, payload).then(response => response.json()).then(res => res);
       return result.data || []
     }
     catch (e) {
@@ -3133,11 +3134,11 @@ class SiopasMap extends Component {
     if (animating) return;
     if ((APP_MODE === 'ADW')) {
       const nextIndex = activeIndex === dataStatusProyekAdw.length - 1 ? 0 : activeIndex + 1;
-      this.setState({activeIndex: nextIndex});
+      this.setState({ activeIndex: nextIndex });
     }
     else {
       const nextIndex = activeIndex === dataStatusProyek.length - 1 ? 0 : activeIndex + 1;
-      this.setState({activeIndex: nextIndex});
+      this.setState({ activeIndex: nextIndex });
     }
   }
 
@@ -3145,14 +3146,14 @@ class SiopasMap extends Component {
     const { animating2, activeIndex2, dataPersentaseProyek } = this.state;
     if (animating2) return;
     const nextIndex = activeIndex2 === dataPersentaseProyek.length - 1 ? 0 : activeIndex2 + 1;
-    this.setState({activeIndex2: nextIndex});
+    this.setState({ activeIndex2: nextIndex });
   }
 
   next3 = () => {
     const { animating3, activeIndex3, dataCostProyek } = this.state;
     if (animating3) return;
     const nextIndex = activeIndex3 === dataCostProyek.length - 1 ? 0 : activeIndex3 + 1;
-    this.setState({activeIndex3: nextIndex});
+    this.setState({ activeIndex3: nextIndex });
   }
 
   previous = () => {
@@ -3160,11 +3161,11 @@ class SiopasMap extends Component {
     if (animating) return;
     if ((APP_MODE === 'ADW')) {
       const nextIndex = activeIndex === 0 ? dataStatusProyekAdw.length - 1 : activeIndex - 1;
-      this.setState({activeIndex: nextIndex});
+      this.setState({ activeIndex: nextIndex });
     }
     else {
       const nextIndex = activeIndex === 0 ? dataStatusProyek.length - 1 : activeIndex - 1;
-      this.setState({activeIndex: nextIndex});
+      this.setState({ activeIndex: nextIndex });
     }
   }
 
@@ -3172,47 +3173,47 @@ class SiopasMap extends Component {
     const { animating2, activeIndex2, dataPersentaseProyek } = this.state;
     if (animating2) return;
     const nextIndex = activeIndex2 === 0 ? dataPersentaseProyek.length - 1 : activeIndex2 - 1;
-    this.setState({activeIndex2: nextIndex});
+    this.setState({ activeIndex2: nextIndex });
   }
 
   previous3 = () => {
     const { animating3, activeIndex3, dataCostProyek } = this.state;
     if (animating3) return;
     const nextIndex = activeIndex3 === 0 ? dataCostProyek.length - 1 : activeIndex3 - 1;
-    this.setState({activeIndex3: nextIndex});
+    this.setState({ activeIndex3: nextIndex });
   }
 
   goToIndex = (newIndex) => {
     const { animating } = this.state;
     if (animating) return;
-    this.setState({activeIndex: newIndex})
+    this.setState({ activeIndex: newIndex })
   }
 
   goToIndex2 = (newIndex) => {
     const { animating2 } = this.state;
     if (animating2) return;
-    this.setState({activeIndex2: newIndex})
+    this.setState({ activeIndex2: newIndex })
   }
 
   goToIndex3 = (newIndex) => {
     const { animating3 } = this.state;
     if (animating3) return;
-    this.setState({activeIndex3: newIndex})
+    this.setState({ activeIndex3: newIndex })
   }
 
   renderRemainingDays = (item) => {
-    const {day_left, percentage} = item;
+    const { day_left, percentage } = item;
     if (day_left > 0 && day_left < 8) {
-      return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>{`${day_left} ${day_left > 1 ? 'days' : 'day'} left`}</Col>
+      return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>{`${day_left} ${day_left > 1 ? 'days' : 'day'} left`}</Col>
     }
     else if (day_left === 0) {
-      return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>Today</Col>
+      return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>Today</Col>
     }
     else if (day_left < 0) {
-      return <Col style={{textAlign: "right", color: "red", fontStyle: "italic"}}>Overdue {day_left} {day_left < -1 ? 'days' : 'day'} </Col>
+      return <Col style={{ textAlign: "right", color: "red", fontStyle: "italic" }}>Overdue {day_left} {day_left < -1 ? 'days' : 'day'} </Col>
     }
     else {
-      return <Col style={{textAlign: "right", color: "grey", fontStyle: "italic"}}>{`${day_left} days left`}</Col>
+      return <Col style={{ textAlign: "right", color: "grey", fontStyle: "italic" }}>{`${day_left} days left`}</Col>
     }
   }
 
@@ -3223,23 +3224,23 @@ class SiopasMap extends Component {
       if (dataStatusProyek.length > 0) {
         return dataStatusProyek.map((item, index) => {
           return (
-            <ListGroup style={{marginBottom: 5}}>
+            <ListGroup style={{ marginBottom: 5 }}>
               {/* <ListGroupItem tag="div" className={`text-center text-bold`} style={{fontSize: 12, backgroundColor: "#f5f5f5"}}></ListGroupItem> */}
               <ListGroupItem className="justify-content-between">
-                  <div style={{textAlign: "center", fontWeight: "bold", fontSize: 12}}>{item.proyek_name}</div>
-                  <Row>
-                    <Col><Badge pill>{ item.count_activity_done }</Badge> / <Badge pill>{ item.count_activity }</Badge> Task <br /></Col>
-                    {this.renderRemainingDays(item)}
-                  </Row>
-                  <Progress value={item.percentage} max={100} animated color={item.percentage === 100 ? 'success' : 'primary'} style={{height: 20}}>{item.percentage}%</Progress>
-                  <div style={{fontSize: 12, color: "grey"}}>Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}</div>
+                <div style={{ textAlign: "center", fontWeight: "bold", fontSize: 12 }}>{item.proyek_name}</div>
+                <Row>
+                  <Col><Badge pill>{item.count_activity_done}</Badge> / <Badge pill>{item.count_activity}</Badge> Task <br /></Col>
+                  {this.renderRemainingDays(item)}
+                </Row>
+                <Progress value={item.percentage} max={100} animated color={item.percentage === 100 ? 'success' : 'primary'} style={{ height: 20 }}>{item.percentage}%</Progress>
+                <div style={{ fontSize: 12, color: "grey" }}>Contract: {item.total_kontrak} {item.total_kontrak > 1 ? "days" : "day"}</div>
               </ListGroupItem>
             </ListGroup>
           )
         })
       }
       else {
-        return <div style={{textAlign: "center", marginTop: 20, color: "red"}}>No Data Found</div>
+        return <div style={{ textAlign: "center", marginTop: 20, color: "red" }}>No Data Found</div>
       }
     }
     else {
@@ -3260,9 +3261,9 @@ class SiopasMap extends Component {
             className="chart-doughnut-carousel"
           >
             <CarouselIndicators items={dataStatusProyekAdw} activeIndex={this.state.activeIndex} onClickHandler={this.goToIndex} />
-              {this.renderTableStatusProyekAdw()}
-            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} style={{color: 'black'}} />
-            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} style={{color: 'black'}} />
+            {this.renderTableStatusProyekAdw()}
+            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} style={{ color: 'black' }} />
+            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} style={{ color: 'black' }} />
           </Carousel>
         )
       }
@@ -3305,8 +3306,8 @@ class SiopasMap extends Component {
         return (
           <CarouselItem
             key={idx}
-            onExiting={() => this.setState({animating: true}) }
-            onExited={() => this.setState({animating: false})}
+            onExiting={() => this.setState({ animating: true })}
+            onExited={() => this.setState({ animating: false })}
           >
             <div className="chart-doughnut-carousel-item">
               <div className="chart-doughnut-caption mb-caption">
@@ -3392,7 +3393,7 @@ class SiopasMap extends Component {
     }
     else {
       return <td className="td-sp td-value-sp text-bold">{potential ? potential.toUpperCase() : '-'}</td>
-    } 
+    }
   }
 
   renderChartStatusProyek = (items) => {
@@ -3402,14 +3403,14 @@ class SiopasMap extends Component {
       return (
         <CarouselItem
           key={idx}
-          onExiting={() => this.setState({animating: true}) }
-          onExited={() => this.setState({animating: false})}
+          onExiting={() => this.setState({ animating: true })}
+          onExited={() => this.setState({ animating: false })}
         >
           <div className="chart-doughnut-carousel-item">
             <div className="chart-doughnut-caption">
               <div className="text-center text-bold">Status Proyek</div>
               <div className="text-center total-luas">
-                 {/* <span className="total-luas-title">Luas coverage: </span>  */}
+                {/* <span className="total-luas-title">Luas coverage: </span>  */}
                 {/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */}
               </div>
             </div>
@@ -3469,7 +3470,7 @@ class SiopasMap extends Component {
         });
 
         console.log('dataChart persentase', dataChart);
-          
+
         return (
           <Carousel
             activeIndex={this.state.activeIndex2}
@@ -3479,7 +3480,7 @@ class SiopasMap extends Component {
             className="chart-doughnut-carousel"
           >
             <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex2} onClickHandler={this.goToIndex2} />
-              {this.renderChartPersentaseProgress(dataChart)}
+            {this.renderChartPersentaseProgress(dataChart)}
             <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous2} />
             <CarouselControl direction="next" directionText="Next" onClickHandler={this.next2} />
           </Carousel>
@@ -3493,7 +3494,7 @@ class SiopasMap extends Component {
       return this.renderEmptyData()
     }
   }
-  
+
   renderChartPersentaseProgress = (items) => {
     if (items.length > 0) {
       return items.map((item, idx) => {
@@ -3502,27 +3503,27 @@ class SiopasMap extends Component {
         return (
           <CarouselItem
             key={idx}
-            onExiting={() => this.setState({animating2: true}) }
-            onExited={() => this.setState({animating2: false})}
+            onExiting={() => this.setState({ animating2: true })}
+            onExited={() => this.setState({ animating2: false })}
           >
             <div className="chart-doughnut-carousel-item">
               <div className="chart-doughnut-caption">
-                <div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div>
+                <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
                 <div className="text-center total-luas">
-                   {/* <span className="total-luas-title">Luas coverage: </span>  */}
+                  {/* <span className="total-luas-title">Luas coverage: </span>  */}
                   {/* { numberWithCommas(item.total_luas_opt) } km<sup>2</sup> */}
                 </div>
               </div>
               <div className="chart-doughnut-chart">
                 {
                   item.labels.length > 0 ?
-                  <Line
-                    options={optionsChartPersentaseProgress}
-                    data={item || defaultPersentaseProyek}
-                    handleClickChart={() => console.log('click persentase linechart')}
-                  />
-                  :
-                  <div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div>
+                    <Line
+                      options={optionsChartPersentaseProgress}
+                      data={item || defaultPersentaseProyek}
+                      handleClickChart={() => console.log('click persentase linechart')}
+                    />
+                    :
+                    <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
                 }
               </div>
             </div>
@@ -3579,7 +3580,7 @@ class SiopasMap extends Component {
         });
 
         // console.log('dataChart', dataChart);
-          
+
         return (
           <Carousel
             activeIndex={this.state.activeIndex3}
@@ -3589,9 +3590,9 @@ class SiopasMap extends Component {
             className="chart-doughnut-carousel"
           >
             <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} />
-              {this.renderChartCostProyek(dataChart)}
-            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{color: 'black'}} />
-            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{color: 'black'}} />
+            {this.renderChartCostProyek(dataChart)}
+            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{ color: 'black' }} />
+            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{ color: 'black' }} />
           </Carousel>
         )
       }
@@ -3610,12 +3611,12 @@ class SiopasMap extends Component {
         return (
           <CarouselItem
             key={idx}
-            onExiting={() => this.setState({animating3: true})}
-            onExited={() => this.setState({animating3: false})}
+            onExiting={() => this.setState({ animating3: true })}
+            onExited={() => this.setState({ animating3: false })}
           >
             <div className="chart-doughnut-carousel-item">
               <div className="chart-doughnut-caption">
-                <div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div>
+                <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
                 {/* <div className="text-center total-luas">
                    <span className="total-luas-title">Luas coverage: </span> 
                   { numberWithCommas(item.total_luas_opt) } km<sup>2</sup>
@@ -3624,13 +3625,13 @@ class SiopasMap extends Component {
               <div className="chart-doughnut-chart">
                 {
                   item.labels.length > 0 ?
-                  <Line
-                    options={optionsChartCostProyek} 
-                    data={item || defaultCostProyek}
-                    handleClickChart={() => console.log('click persentase linechart')}
-                  />
-                  :
-                  <div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div>
+                    <Line
+                      options={optionsChartCostProyek}
+                      data={item || defaultCostProyek}
+                      handleClickChart={() => console.log('click persentase linechart')}
+                    />
+                    :
+                    <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
                 }
                 {/* <div style={{color: 'red', textAlign: 'center'}}>Test</div> */}
               </div>
@@ -3662,7 +3663,7 @@ class SiopasMap extends Component {
             date = date ? moment(date).format('DD MMM YY') : '-'
             bcwp = bcwp ? this.renderFormatRupiah(bcwp.toString(), 'Rp') : '-';
             acwp = acwp ? this.renderFormatRupiah(acwp.toString(), 'Rp') : '-';
-            return [date,bcwp,acwp]
+            return [date, bcwp, acwp]
           }) : [];
           // let valueCostPlaning = dataRes ? dataRes.map(res => res.rencana_biaya) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
           // let valueCostPlanning = dataRes ? dataRes.map(res => parseFloat(res.cal_budget_cost)) : []; // [10, 23, 39, 47, 55, 68, 70, 82, 90, 100]
@@ -3702,19 +3703,19 @@ class SiopasMap extends Component {
         });
 
         // console.log('dataChart', dataChart);
-          
+
         return (
           <Carousel
             activeIndex={this.state.activeIndex3}
             next={this.next3}
             previous={this.previous3}
             interval={false}
-            className={ this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel" : "chart-doughnut-carousel-max"}
+            className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel" : "chart-doughnut-carousel-max"}
           >
             <CarouselIndicators items={dataChart} activeIndex={this.state.activeIndex3} onClickHandler={this.goToIndex3} />
-              {this.renderChartKurvaS(dataChart)}
-            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{color: 'black'}} />
-            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{color: 'black'}} />
+            {this.renderChartKurvaS(dataChart)}
+            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous3} style={{ color: 'black' }} />
+            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next3} style={{ color: 'black' }} />
           </Carousel>
         )
       }
@@ -3733,12 +3734,12 @@ class SiopasMap extends Component {
         return (
           <CarouselItem
             key={idx}
-            onExiting={() => this.setState({animating3: true})}
-            onExited={() => this.setState({animating3: false})}
+            onExiting={() => this.setState({ animating3: true })}
+            onExited={() => this.setState({ animating3: false })}
           >
             <div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-carousel-item" : "chart-doughnut-carousel-item-max"}>
               <div className="chart-doughnut-caption">
-                <div className="text-center text-bold" style={{fontSize: 12}}>{item.proyek_name}</div>
+                <div className="text-center text-bold" style={{ fontSize: 12 }}>{item.proyek_name}</div>
                 {/* <div className="text-center total-luas">
                    <span className="total-luas-title">Luas coverage: </span> 
                   { numberWithCommas(item.total_luas_opt) } km<sup>2</sup>
@@ -3746,37 +3747,37 @@ class SiopasMap extends Component {
               </div>
               {
                 this.state.kurvaSWindowMode === 'default' ?
-                <div className="chart-doughnut-chart">
-                  {
-                    item.labels.length > 0 ?
-                    <Line
-                      options={optionsChartKurvaS}
-                      height={null}
-                      width={null}
-                      data={item || defaultKurvaS}
-                      handleClickChart={() => console.log('click persentase linechart')}
-                      redraw={true}
-                    />
-                    :
-                    <div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div>
-                  }
-                </div>
-                :
-                <div className="chart-doughnut-chart-max">
-                  {
-                    item.labels.length > 0 ?
-                    <Line
-                      options={optionsChartKurvaS}
-                      height={null}
-                      width={null}
-                      data={item || defaultKurvaS}
-                      handleClickChart={() => console.log('click persentase linechart')}
-                      redraw={true}
-                    />
-                    :
-                    <div style={{color: 'red', textAlign: 'center', marginTop: 50}}>No data found</div>
-                  }
-                </div>
+                  <div className="chart-doughnut-chart">
+                    {
+                      item.labels.length > 0 ?
+                        <Line
+                          options={optionsChartKurvaS}
+                          height={null}
+                          width={null}
+                          data={item || defaultKurvaS}
+                          handleClickChart={() => console.log('click persentase linechart')}
+                          redraw={true}
+                        />
+                        :
+                        <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
+                    }
+                  </div>
+                  :
+                  <div className="chart-doughnut-chart-max">
+                    {
+                      item.labels.length > 0 ?
+                        <Line
+                          options={optionsChartKurvaS}
+                          height={null}
+                          width={null}
+                          data={item || defaultKurvaS}
+                          handleClickChart={() => console.log('click persentase linechart')}
+                          redraw={true}
+                        />
+                        :
+                        <div style={{ color: 'red', textAlign: 'center', marginTop: 50 }}>No data found</div>
+                    }
+                  </div>
               }
               {/* <div className={this.state.kurvaSWindowMode === 'default' ? "chart-doughnut-chart" : "chart-doughtnut-chart-max"}>
                 {
@@ -3974,7 +3975,7 @@ class SiopasMap extends Component {
                         checkedKeysAnalisa={this.state.checkedKeysAnalisa}
                         checkedKeysEmployeeDivision={this.state.checkedKeysEmployeeDivision}
                         checkedKeysProjectTree={this.state.checkedKeysProjectTree}
-                        setCheckedKeysProjectTree={(data) => this.setState({checkedKeysProjectTree: data})}
+                        setCheckedKeysProjectTree={(data) => this.setState({ checkedKeysProjectTree: data })}
                         salesGroupTree={this.state.salesGroupTree}
                         employeeDivisionTree={this.state.employeeDivisionTree}
                         setSalesGroupTree={(data) => this.setState({ salesGroupTree: data })}
@@ -4033,7 +4034,7 @@ class SiopasMap extends Component {
                 <Row className='progress-bottom'>
                   <Col md={12} style={{ paddingRight: 0, paddingLeft: 0 }}>
                     {/* <Card className="remove-gap-bs-card" style={{ height: 'calc(100vh - 50px - (100vh / 2))' }}> */}
-                    <Card className="remove-gap-bs-card" style={ this.state.kurvaSWindowMode === 'default' ? {
+                    <Card className="remove-gap-bs-card" style={this.state.kurvaSWindowMode === 'default' ? {
                       height: 'calc(100vh - 50px - (100vh / 2))',
                       top: 0,
                       zIndex: 0
@@ -4043,14 +4044,14 @@ class SiopasMap extends Component {
                       zIndex: 9999
                     }}>
                       <CardHeader className="panel-title">
-                        <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Kurva S</span> 
-                        <div style={{ marginRight: '7px', float: 'right', marginLeft: 'auto', right: 0}}>
-                          <span onClick={() => this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer'}}> { this.state.kurvaSWindowMode === 'default' ? <i className="fa fa-expand"></i> : <i className="fa fa-compress"></i> }</span> 
+                        <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>Kurva S</span>
+                        <div style={{ marginRight: '7px', float: 'right', marginLeft: 'auto', right: 0 }}>
+                          <span onClick={() => this.toggleKurvaSWindowMode()} style={{ marginRight: '15px', cursor: 'pointer' }}> {this.state.kurvaSWindowMode === 'default' ? <i className="fa fa-expand"></i> : <i className="fa fa-compress"></i>}</span>
                           <span onClick={() => this.closeProggressBottom()} style={{ marginRight: '5px', cursor: 'pointer' }}>x</span>
                         </div>
                       </CardHeader>
                       <CardBody className="no-padding">
-                        { this.renderCarouselKurvaS() }
+                        {this.renderCarouselKurvaS()}
                       </CardBody>
                     </Card>
                   </Col>
@@ -4068,14 +4069,14 @@ class SiopasMap extends Component {
                 }}>
                 <Card className="remove-gap-bs-card" style={{ height: 306 }}>
                   <CardHeader className="panel-title">
-                    <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>{(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek' }</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
+                    <span style={{ left: '50', right: '50', marginLeft: 'auto', marginRight: 'auto' }}>{(APP_MODE === 'ADW') ? 'Budget Control This Period' : 'Status Proyek'}</span> <span onClick={this.closeStatusRight} style={{ float: 'right', marginLeft: 'auto', right: 0, cursor: 'pointer' }}>x</span>
                   </CardHeader>
-                  <CardBody className="small-padding" style={{overflow: 'auto'}}>
+                  <CardBody className="small-padding" style={{ overflow: 'auto' }}>
                     {
                       (APP_MODE === 'ADW') ?
-                      this.renderCarouselStatusProyekAdw()
-                      : 
-                      this.renderCarouselStatusProyek()
+                        this.renderCarouselStatusProyekAdw()
+                        :
+                        this.renderCarouselStatusProyek()
                     }
                   </CardBody>
                 </Card>