diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js
index 760e08f..42cb383 100644
--- a/src/views/Dashboard/DashboardProject.js
+++ b/src/views/Dashboard/DashboardProject.js
@@ -20,10 +20,10 @@ const { TextArea } = Input;
 
 const styles = {
     cardContainer: { backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10 },
-	cardHeaderContainer: { display: 'flex', flexDirection: 'row', marginBottom: 10 },
-	cardChartContainer: { position: 'relative', height: '21vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' },
-	cardTitle: { color: '#444444', fontSize: 16, fontWeight: 'bold' },
-	cardSubtitle: { color: '#888888', fontSize: 12 }
+    cardHeaderContainer: { display: 'flex', flexDirection: 'row', marginBottom: 10 },
+    cardChartContainer: { position: 'relative', height: '21vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' },
+    cardTitle: { color: '#444444', fontSize: 16, fontWeight: 'bold' },
+    cardSubtitle: { color: '#888888', fontSize: 12 }
 }
 
 const center = {
@@ -32,13 +32,13 @@ const center = {
 }
 
 const DashboardProject = () => {
-	const token = localStorage.getItem("token")
-	const HEADER = {
-		headers: {
-			"Content-Type": "application/json",
-			"Authorization": `Bearer ${token}`
-		}
-	}
+    const token = localStorage.getItem("token")
+    const HEADER = {
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        }
+    }
     const { PROJECT_ID, GANTT_ID } = useParams();
     const URL_GANTT = `https://adw-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
     const mapRef = useRef()
@@ -80,7 +80,7 @@ const DashboardProject = () => {
     const [healthBySchedule, setHealthBySchedule] = useState('-')
     const [healthByBudget, setHealthByBudget] = useState('-')
     const [reportDistribution, setReportDistribution] = useState([]);
-	let history = useHistory();
+    let history = useHistory();
 
 
     useEffect(() => {
@@ -101,17 +101,17 @@ const DashboardProject = () => {
     }, [activeTabIdx]);
 
     useEffect(() => {
-		let deviation = 0;
-		if(plannedCost && totalCost){
-			deviation = plannedCost - totalCost;
-		}
-		setRemToComplete(deviation.toString())
+        let deviation = 0;
+        if (plannedCost && totalCost) {
+            deviation = plannedCost - totalCost;
+        }
+        setRemToComplete(deviation.toString())
 
     }, [plannedCost, totalCost]);
 
-	const  handleRedirect = () => {
-		history.push("/projects/"+GANTT_ID+"/"+PROJECT_ID+"/gantt");
-	}
+    const handleRedirect = () => {
+        history.push("/projects/" + GANTT_ID + "/" + PROJECT_ID + "/gantt");
+    }
 
     const getProjectDetail = async () => {
         setIsReadyProjectDetail(false);
@@ -121,17 +121,17 @@ const DashboardProject = () => {
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadyProjectDetail(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed");
             setIsReadyProjectDetail(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
             console.log(result.data.data);
-			// setComments(result.data.data);
+            // setComments(result.data.data);
             setProjectName(result.data.data.nama ? result.data.data.nama : '-');
             setProjectManagerName(result.data.data.projectManager ? result.data.data.projectManager : '-');
             setCustomerName(result.data.data.company ? result.data.data.company : '-')
@@ -145,7 +145,7 @@ const DashboardProject = () => {
             if (result.data.data.kode_sortname && result.data.data.kode_sortname !== '') {
                 getIntegrationInvoice(result.data.data.kode_sortname)
             }
-		}
+        }
     }
 
     const getSCurve = async () => {
@@ -157,18 +157,17 @@ const DashboardProject = () => {
             // "end_date": moment(new Date()).format('YYYY-MM-DD')
         }
         const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
-        console.log('getSCurve', result);
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadySCurve(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get S Curve failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get S Curve failed, ${result.data.message}`, "Failed");
             setIsReadySCurve(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
             let selisihProgress = 0;
             let planningProgress = 0;
@@ -184,11 +183,11 @@ const DashboardProject = () => {
                 setCostDeviation(result.data.data[0].data.budget_control.cost_deviation?.toString())
             }
             if (result.data.data.length > 0 && result.data.data[0].data?.percentagePlan && result.data.data[0].data?.percentagePlan.length > 0) {
-                planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length-1];
+                planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length - 1];
                 setPlanningProgress(planningProgress);
             }
             if (result.data.data.length > 0 && result.data.data[0].data?.percentageReal && result.data.data[0].data?.percentageReal.length > 0) {
-                actualProgress = result.data.data[0].data?.percentageReal[result.data.data[0].data?.percentageReal.length-1];
+                actualProgress = result.data.data[0].data?.percentageReal[result.data.data[0].data?.percentageReal.length - 1];
                 setActualProgress(actualProgress);
             }
 
@@ -202,7 +201,7 @@ const DashboardProject = () => {
 
             setHealthBySchedule(statusHealthBySchedule)
             setIsReadySCurve(true);
-		}
+        }
     }
 
     const getOverdueActivities = async () => {
@@ -217,21 +216,21 @@ const DashboardProject = () => {
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadyOverdueActivities(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get Overdue Activities failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get Overdue Activities failed, ${result.data.message}`, "Failed");
             setIsReadyOverdueActivities(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
             if (result.data.data.overdueActivities) {
                 setOverdueActivities(result.data.data.overdueActivities)
             }
             setHealthByBudget(result.data.data.budget_health)
             setIsReadyOverdueActivities(true);
-		}
+        }
     }
 
     const getIntegrationInvoice = async (kode_sortname) => {
@@ -245,16 +244,15 @@ const DashboardProject = () => {
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadyIntegrationInvoice(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get integration invoice failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get integration invoice failed, ${result.data.message}`, "Failed");
             setIsReadyIntegrationInvoice(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
-            // console.log()
             if (result.data.data.data) {
                 let total_invoice = result.data.data.data.total_invoice_amount;
                 let cash_in = result.data.data.data.total_invoice_paid_amount;
@@ -262,12 +260,12 @@ const DashboardProject = () => {
                 let outstanding_balance = total_invoice - cash_in;
                 setTotalInvoice(total_invoice ? total_invoice.toString() : null);
                 setCashIn(cash_in ? cash_in.toString() : null)
-				total_cost = total_cost.toString().split('.')[0]
-                setTotalCost(total_cost? total_cost.toString() : null)
+                total_cost = total_cost.toString().split('.')[0]
+                setTotalCost(total_cost ? total_cost.toString() : null)
                 setOutstandingBalance(outstanding_balance ? outstanding_balance.toString() : null);
             }
             setIsReadyIntegrationInvoice(true);
-		}
+        }
     }
 
     const getReportDistribution = async () => {
@@ -283,66 +281,66 @@ const DashboardProject = () => {
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadyReportDistribution(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get report distribution failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get report distribution failed, ${result.data.message}`, "Failed");
             setIsReadyReportDistribution(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
             setReportDistribution(result.data.data);
             setIsReadyReportDistribution(true);
-		}
+        }
     }
 
     const getComments = async () => {
         setIsReadyComments(false);
         const URL = `${BASE_OSPRO}/api/project-comment/search`;
         const payload = {
-			columns: [
-				{
-					name: "project_id",
-					logic_operator: "=",
-					value: PROJECT_ID.toString(),
-					operator: "AND",
-				},
+            columns: [
+                {
+                    name: "project_id",
+                    logic_operator: "=",
+                    value: PROJECT_ID.toString(),
+                    operator: "AND",
+                },
+                {
+                    name: "gantt_id",
+                    logic_operator: "=",
+                    value: GANTT_ID.toString(),
+                    operator: "AND",
+                }
+            ],
+            joins: [
                 {
-					name: "gantt_id",
-					logic_operator: "=",
-					value: GANTT_ID.toString(),
-					operator: "AND",
-				}
-			],
-			joins: [
-				{
-					name: "m_users",
-					column_join: "sender_id",
-					column_results: ["name", "username"],
-				}
-			],
-			orders: { columns: ["created_at"], ascending: false },
-			paging: { start: 0, length: -1 },
-		};
+                    name: "m_users",
+                    column_join: "sender_id",
+                    column_results: ["name", "username"],
+                }
+            ],
+            orders: { columns: ["created_at"], ascending: false },
+            paging: { start: 0, length: -1 },
+        };
 
         const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
         console.log('getComments', result);
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsReadyComments(true);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Get comments failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Get comments failed, ${result.data.message}`, "Failed");
             setIsReadyComments(true);
-			return;
-		}
+            return;
+        }
         else if (result.status == 200 && result.data.data) {
-			setComments(result.data.data);
+            setComments(result.data.data);
             setIsReadyComments(true);
-		}
+        }
     }
 
     const handleSendComment = async () => {
@@ -365,14 +363,14 @@ const DashboardProject = () => {
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
             setIsSendingComment(false);
-			return;
+            return;
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
+            NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
             setIsSendingComment(false);
-			return;
-		}
+            return;
+        }
         else if (result.status === 200) {
             NotificationManager.success(`Post comment success`, "Success");
             resetInputComment();
@@ -392,7 +390,7 @@ const DashboardProject = () => {
         });
 
         setMymap(mymap);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(mymap);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(mymap);
     }
 
     useEffect(() => {
@@ -406,36 +404,36 @@ const DashboardProject = () => {
     }, [mymap, reportDistribution])
 
     const RenderGantt = useMemo(() => (
-		<iframe
-			id="frame-gantt"
-			src={URL_GANTT}
-			style={{
-				width: '100%',
-				height: '100%',
-			}}
-			scrolling="no"
-			frameBorder="0"
-			allow="fullscreen"
-		></iframe>
-	), [activeTabIdx])
+        <iframe
+            id="frame-gantt"
+            src={URL_GANTT}
+            style={{
+                width: '100%',
+                height: '100%',
+            }}
+            scrolling="no"
+            frameBorder="0"
+            allow="fullscreen"
+        ></iframe>
+    ), [activeTabIdx])
 
 
     const RenderComments = useMemo(() => {
         return (
             <>
-            <div style={{padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
-                <TextArea value={comment} onChange={(e) => setComment(e.target.value)} rows={3} placeholder="Write comment here" disabled={isSendingComment} />
-                <div style={{float: 'right', marginTop: -40, marginRight: 10}}>
-                    <Button title='Send' type="primary" shape="circle" icon={<SendOutlined />} size={20} onClick={handleSendComment} disabled={isSendingComment} />
+                <div style={{ padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2 }}>
+                    <TextArea value={comment} onChange={(e) => setComment(e.target.value)} rows={3} placeholder="Write comment here" disabled={isSendingComment} />
+                    <div style={{ float: 'right', marginTop: -40, marginRight: 10 }}>
+                        <Button title='Send' type="primary" shape="circle" icon={<SendOutlined />} size={20} onClick={handleSendComment} disabled={isSendingComment} />
+                    </div>
+                </div>
+                <div>
+                    {!isReadyComments && <ListLoader />}
+                    {isReadyComments && comments && comments.length < 1 && <div style={{ flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50 }}>No comments found.</div>}
+                    {comments && comments.length > 0 && comments.map((item, idx) =>
+                        <Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
+                    )}
                 </div>
-            </div>
-            <div>
-                {!isReadyComments && <ListLoader />}
-                {isReadyComments && comments && comments.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No comments found.</div>}
-                {comments && comments.length > 0 && comments.map((item, idx) =>
-                    <Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
-                )}
-            </div>
             </>
         )
     }, [comment, comments, isSendingComment, isReadyComments])
@@ -444,7 +442,7 @@ const DashboardProject = () => {
         return (
             <div>
                 {!isReadyOverdueActivities && <ListLoader />}
-                {isReadyOverdueActivities && overdueActivities && overdueActivities.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No overdue activity found.</div>}
+                {isReadyOverdueActivities && overdueActivities && overdueActivities.length < 1 && <div style={{ flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50 }}>No overdue activity found.</div>}
                 {isReadyOverdueActivities && overdueActivities && overdueActivities.length > 0 && overdueActivities.map((item, idx) => {
                     let end_date = null;
                     let today = null;
@@ -462,58 +460,58 @@ const DashboardProject = () => {
         )
     }, [overdueActivities, isReadyOverdueActivities])
 
-	return (
-		<div style={{ marginLeft: -25, marginRight: -25 }}>
+    return (
+        <div style={{ marginLeft: -25, marginRight: -25 }}>
             <NotificationContainer />
-			<Fab
-				icon={<i className="fa fa-bars"/>}
-				alwaysShowTitle={true}
-			>
-				<Action
-					text="Gantt Chart"
-					onClick={() => handleRedirect()}
-				>
-					<i className="fa fa-gears" />
-				</Action>
-			</Fab>
-			<Row>
-				<Col span={18}>
-					<Row>
+            <Fab
+                icon={<i className="fa fa-bars" />}
+                alwaysShowTitle={true}
+            >
+                <Action
+                    text="Gantt Chart"
+                    onClick={() => handleRedirect()}
+                >
+                    <i className="fa fa-gears" />
+                </Action>
+            </Fab>
+            <Row>
+                <Col span={18}>
+                    <Row>
                         <Col span={8}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2}}>
+                            <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2 }}>
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
-                                        <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project</div>
-                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? projectName : <SingleTextLoader />}</div>
+                                        <div style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>Project</div>
+                                        <div style={{ fontSize: 14 }}>{isReadyProjectDetail ? projectName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
-                                        <i className="fa fa-check-square" style={{fontSize: 28}}></i>
+                                        <i className="fa fa-check-square" style={{ fontSize: 28 }}></i>
                                     </div>
                                 </div>
                             </div>
                         </Col>
                         <Col span={8}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2}}>
+                            <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2 }}>
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
-                                        <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project Manager</div>
-                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? projectManagerName : <SingleTextLoader />}</div>
+                                        <div style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>Project Manager</div>
+                                        <div style={{ fontSize: 14 }}>{isReadyProjectDetail ? projectManagerName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
-                                        <i className="fa fa-user" style={{fontSize: 28}}></i>
+                                        <i className="fa fa-user" style={{ fontSize: 28 }}></i>
                                     </div>
                                 </div>
                             </div>
                         </Col>
                         <Col span={8}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2}}>
+                            <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2 }}>
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
-                                        <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Customer</div>
-                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? customerName : <SingleTextLoader />}</div>
+                                        <div style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>Customer</div>
+                                        <div style={{ fontSize: 14 }}>{isReadyProjectDetail ? customerName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
-                                        <i className="fa fa-home" style={{fontSize: 28}}></i>
+                                        <i className="fa fa-home" style={{ fontSize: 28 }}></i>
                                     </div>
                                 </div>
                             </div>
@@ -521,15 +519,15 @@ const DashboardProject = () => {
                     </Row>
                     <Row>
                         <Col span={8}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2}}>
+                            <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2 }}>
                                 <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 10 }}>
                                     <div>
-                                        <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Schedule</div>
+                                        <div style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>Schedule</div>
                                     </div>
                                     <div>
                                         <Row>
-                                            <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Start</Col>
-                                            <Col span={12} style={{fontSize: 11}}>
+                                            <Col span={12} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Planned Start</Col>
+                                            <Col span={12} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail ?
                                                     plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -537,8 +535,8 @@ const DashboardProject = () => {
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Actual Start</Col>
-                                            <Col span={12} style={{fontSize: 11}}>
+                                            <Col span={12} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Actual Start</Col>
+                                            <Col span={12} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail ?
                                                     actualStart ? moment(actualStart).format('D MMMM YYYY') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -546,8 +544,8 @@ const DashboardProject = () => {
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Finish</Col>
-                                            <Col span={12} style={{fontSize: 11}}>
+                                            <Col span={12} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Planned Finish</Col>
+                                            <Col span={12} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail ?
                                                     plannedFinish ? moment(plannedFinish).format('D MMMM YYYY') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -555,8 +553,8 @@ const DashboardProject = () => {
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Estimated Finish</Col>
-                                            <Col span={12} style={{fontSize: 11}}>
+                                            <Col span={12} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Estimated Finish</Col>
+                                            <Col span={12} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail ?
                                                     estimatedFinish ? moment(estimatedFinish).format('D MMMM YYYY') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -568,22 +566,22 @@ const DashboardProject = () => {
                             </div>
                         </Col>
                         <Col span={16}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2}}>
+                            <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 10, margin: 2 }}>
                                 <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 10 }}>
                                     <div>
-                                        <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Financials</div>
+                                        <div style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 10 }}>Financials</div>
                                     </div>
                                     <div>
                                         <Row>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Current Budget</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Current Budget</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail ?
-                                                    plannedCost ? renderFormatRupiah(plannedCost , 'Rp.') : '-'
+                                                    plannedCost ? renderFormatRupiah(plannedCost, 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
                                             </Col>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Add Cost to Complete</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Add Cost to Complete</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadySCurve ?
                                                     addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -591,40 +589,43 @@ const DashboardProject = () => {
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Actual to Date</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Actual to Date</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadyIntegrationInvoice ?
                                                     totalCost ? renderFormatRupiah(totalCost, 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
                                             </Col>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Est. at Completion</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Est. at Completion</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadySCurve ?
-														plannedCost > bcwp ? renderFormatRupiah(plannedCost, 'Rp.') : renderFormatRupiah(bcwp, 'Rp.')
+                                                    plannedCost !== null && bcwp !== null ?
+                                                        plannedCost > bcwp ? renderFormatRupiah(plannedCost, 'Rp.') : renderFormatRupiah(bcwp, 'Rp.')
+                                                        : '-'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
+
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>BCWP (cost vs perform)</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>BCWP (cost vs perform)</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadySCurve ?
                                                     bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
                                             </Col>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Cost Deviation</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Cost Deviation</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail && isReadyIntegrationInvoice ?
-														totalCost > plannedCost ? renderFormatRupiah( (totalCost-plannedCost).toString(), 'Rp.') : 'Rp. 0'
+                                                    totalCost > plannedCost ? renderFormatRupiah((totalCost - plannedCost).toString(), 'Rp.') : 'Rp. 0'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
                                             </Col>
                                         </Row>
                                         <Row>
-                                            <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Rem. to Complete</Col>
-                                            <Col span={5} style={{fontSize: 11}}>
+                                            <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Rem. to Complete</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
                                                 {isReadyProjectDetail && isReadyIntegrationInvoice ?
                                                     remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
@@ -636,128 +637,128 @@ const DashboardProject = () => {
                             </div>
                         </Col>
                     </Row>
-                    <div style={{margin: 2, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD'}}>
+                    <div style={{ margin: 2, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD' }}>
                         <Row>
                             <Col span={12}>
-                                <div style={{backgroundColor: activeTabIdx === 0 ? '#FFFFFF' : '#D9D9D9', padding: 8, fontWeight: 'bold', cursor: 'pointer', color: activeTabIdx === 0 ? '#000000' : '#4E4C4C'}} onClick={() => setActiveTabIdx(0)}>S Curve</div>
+                                <div style={{ backgroundColor: activeTabIdx === 0 ? '#FFFFFF' : '#D9D9D9', padding: 8, fontWeight: 'bold', cursor: 'pointer', color: activeTabIdx === 0 ? '#000000' : '#4E4C4C' }} onClick={() => setActiveTabIdx(0)}>S Curve</div>
                             </Col>
                             <Col span={12}>
-                                <div style={{backgroundColor: activeTabIdx === 1 ? '#FFFFFF' : '#D9D9D9', padding: 8, fontWeight: 'bold', cursor: 'pointer', color: activeTabIdx === 1 ? '#000000' : '#4E4C4C'}} onClick={() => setActiveTabIdx(1)}>Maps</div>
+                                <div style={{ backgroundColor: activeTabIdx === 1 ? '#FFFFFF' : '#D9D9D9', padding: 8, fontWeight: 'bold', cursor: 'pointer', color: activeTabIdx === 1 ? '#000000' : '#4E4C4C' }} onClick={() => setActiveTabIdx(1)}>Maps</div>
                             </Col>
                         </Row>
                         <Row>
                             <Col span={24}>
-                                <div style={{maxHeight: '55vh'}}>
+                                <div style={{ maxHeight: '55vh' }}>
                                     {/* { activeTabIdx === 0 && <div style={{height: '52vh', width: '100%'}}>{RenderGantt}</div> }
                                     { activeTabIdx === 1  && <div id="map-area" style={{height: '52vh'}} ref={mapRef}></div> } */}
-                                    <div style={{height: '56vh', width: '100%', display: activeTabIdx === 0 ? 'block' : 'none'}}>{RenderGantt}</div>
-                                    { activeTabIdx === 1  && <div id="map-area" style={{height: '56vh'}} ref={mapRef}></div> }
+                                    <div style={{ height: '56vh', width: '100%', display: activeTabIdx === 0 ? 'block' : 'none' }}>{RenderGantt}</div>
+                                    {activeTabIdx === 1 && <div id="map-area" style={{ height: '56vh' }} ref={mapRef}></div>}
                                 </div>
                             </Col>
                         </Row>
                     </div>
-				</Col>
-				<Col span={6}>
-                    <div style={{margin: 2}}>
-                    <Row>
-                        <Col span={24}>
-                            <div style={{backgroundColor: '#222222', padding: 10, marginBottom: 5}}>
-                                <div style={{color: '#FFFFFF', textAlign: 'center', marginBottom: 10, fontWeight: 'bold'}}>Progress</div>
-                                {isReadySCurve ?
-                                    <ProgressPlanningBar progress={planningProgress} />
-                                    :
-                                    <SingleTextLoader width={"100%"} height={30} />
-                                }
-                                <div style={{marginTop: 10, marginBottom: 10}}></div>
-                                {isReadySCurve ?
-                                    <ProgressActualBar progress={actualProgress} />
-                                    :
-                                    <SingleTextLoader width={"100%"} height={30} />
-                                }
-                            </div>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={12}>
-                            <div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2}}>
-                                <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Budget</div>
-                                {isReadyOverdueActivities ? <HealthByBudget status={healthByBudget} /> : <SingleTextLoader width={"100%"} height={30} /> }
-                            </div>
-                        </Col>
-                        <Col span={12}>
-                            <div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginLeft: 2}}>
-                                <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
-                                {isReadySCurve ? <HealthBySchedule status={healthBySchedule} /> : <SingleTextLoader width={"100%"} height={30} /> }
-                            </div>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={24}>
-                            <div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2}}>
-                                {/* <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
+                </Col>
+                <Col span={6}>
+                    <div style={{ margin: 2 }}>
+                        <Row>
+                            <Col span={24}>
+                                <div style={{ backgroundColor: '#222222', padding: 10, marginBottom: 5 }}>
+                                    <div style={{ color: '#FFFFFF', textAlign: 'center', marginBottom: 10, fontWeight: 'bold' }}>Progress</div>
+                                    {isReadySCurve ?
+                                        <ProgressPlanningBar progress={planningProgress} />
+                                        :
+                                        <SingleTextLoader width={"100%"} height={30} />
+                                    }
+                                    <div style={{ marginTop: 10, marginBottom: 10 }}></div>
+                                    {isReadySCurve ?
+                                        <ProgressActualBar progress={actualProgress} />
+                                        :
+                                        <SingleTextLoader width={"100%"} height={30} />
+                                    }
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col span={12}>
+                                <div style={{ backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2 }}>
+                                    <div style={{ color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12 }}>Health By Budget</div>
+                                    {isReadyOverdueActivities ? <HealthByBudget status={healthByBudget} /> : <SingleTextLoader width={"100%"} height={30} />}
+                                </div>
+                            </Col>
+                            <Col span={12}>
+                                <div style={{ backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginLeft: 2 }}>
+                                    <div style={{ color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12 }}>Health By Schedule</div>
+                                    {isReadySCurve ? <HealthBySchedule status={healthBySchedule} /> : <SingleTextLoader width={"100%"} height={30} />}
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col span={24}>
+                                <div style={{ backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2 }}>
+                                    {/* <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
                                 <div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
                                     <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>On Budget</div>
                                 </div> */}
-                                <Row>
-                                    <Col span={12}>Total Invoice</Col>
-                                    <Col span={12} style={{textAlign: 'right'}}>
-                                        {isReadyIntegrationInvoice ?
-                                            totalInvoice ? renderFormatRupiah(totalInvoice, 'Rp.') : '-'
-                                            : <SingleTextLoader width={100} height={10} />
-                                        }
-                                    </Col>
-                                </Row>
-                                <Row>
-                                    <Col span={12}>Cash In</Col>
-                                    <Col span={12} style={{textAlign: 'right'}}>
-                                        {isReadyIntegrationInvoice ?
-                                            cashIn ? renderFormatRupiah(cashIn, 'Rp.') : '-'
-                                            : <SingleTextLoader width={100} height={10} />
-                                        }
-                                    </Col>
-                                </Row>
-                                <Row>
-                                    <Col span={24}><hr style={{margin: 2}}/></Col>
-                                </Row>
-                                <Row>
-                                    <Col span={12}>Outstanding Balance</Col>
-                                    <Col span={12} style={{textAlign: 'right', color: '#E80053', fontWeight: 500}}>
-                                        {isReadyIntegrationInvoice ?
-                                            outstandingBalance ? renderFormatRupiah(outstandingBalance, 'Rp.') : '-'
-                                            : <SingleTextLoader width={100} height={10} />
-                                        }
-                                    </Col>
-                                </Row>
-                            </div>
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col span={24}>
-                            <div style={{border: 'solid', borderWidth: 1, borderColor: '#DDDDDD'}}>
-                                {/* <div style={{display: 'flex', alignItems: 'center'}}>
+                                    <Row>
+                                        <Col span={12}>Total Invoice</Col>
+                                        <Col span={12} style={{ textAlign: 'right' }}>
+                                            {isReadyIntegrationInvoice ?
+                                                totalInvoice ? renderFormatRupiah(totalInvoice, 'Rp.') : '-'
+                                                : <SingleTextLoader width={100} height={10} />
+                                            }
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col span={12}>Cash In</Col>
+                                        <Col span={12} style={{ textAlign: 'right' }}>
+                                            {isReadyIntegrationInvoice ?
+                                                cashIn ? renderFormatRupiah(cashIn, 'Rp.') : '-'
+                                                : <SingleTextLoader width={100} height={10} />
+                                            }
+                                        </Col>
+                                    </Row>
+                                    <Row>
+                                        <Col span={24}><hr style={{ margin: 2 }} /></Col>
+                                    </Row>
+                                    <Row>
+                                        <Col span={12}>Outstanding Balance</Col>
+                                        <Col span={12} style={{ textAlign: 'right', color: '#E80053', fontWeight: 500 }}>
+                                            {isReadyIntegrationInvoice ?
+                                                outstandingBalance ? renderFormatRupiah(outstandingBalance, 'Rp.') : '-'
+                                                : <SingleTextLoader width={100} height={10} />
+                                            }
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col span={24}>
+                                <div style={{ border: 'solid', borderWidth: 1, borderColor: '#DDDDDD' }}>
+                                    {/* <div style={{display: 'flex', alignItems: 'center'}}>
                                     <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 0 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 0 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2}} onClick={() => setActiveTabCommentIdx(0)}>Behind Task</div>
                                     <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 1 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 1 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2, fontSize: 12}} onClick={() => setActiveTabCommentIdx(1)}>Comment From Customer</div>
                                 </div> */}
-                                <Row style={{alignItems: 'center', marginBottom: 5}}>
-                                    <Col span={12}>
-                                        <div style={{backgroundColor: activeTabCommentIdx === 0 ? '#FFFFFF' : '#D9D9D9', fontWeight: 500, textAlign: 'center', fontSize: 12, padding: 2, cursor: 'pointer', color: activeTabCommentIdx === 0 ? '#000000' : '#4E4C4C'}} onClick={() => setActiveTabCommentIdx(0)}>Behind Task</div>
-                                    </Col>
-                                    <Col span={12}>
-                                        <div style={{backgroundColor: activeTabCommentIdx === 1 ? '#FFFFFF' : '#D9D9D9', fontWeight: 500, textAlign: 'center', fontSize: 12, padding: 2, cursor: 'pointer', color: activeTabCommentIdx === 1 ? '#000000' : '#4E4C4C'}} onClick={() => setActiveTabCommentIdx(1)}>Comment From Customer</div>
-                                    </Col>
-                                </Row>
-                                <div className='custom-scroll' style={{maxHeight: '37vh', overflow: 'auto'}}>
-                                    {activeTabCommentIdx === 0 && RenderBehindTasks}
-                                    {activeTabCommentIdx === 1 && RenderComments}
+                                    <Row style={{ alignItems: 'center', marginBottom: 5 }}>
+                                        <Col span={12}>
+                                            <div style={{ backgroundColor: activeTabCommentIdx === 0 ? '#FFFFFF' : '#D9D9D9', fontWeight: 500, textAlign: 'center', fontSize: 12, padding: 2, cursor: 'pointer', color: activeTabCommentIdx === 0 ? '#000000' : '#4E4C4C' }} onClick={() => setActiveTabCommentIdx(0)}>Behind Task</div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div style={{ backgroundColor: activeTabCommentIdx === 1 ? '#FFFFFF' : '#D9D9D9', fontWeight: 500, textAlign: 'center', fontSize: 12, padding: 2, cursor: 'pointer', color: activeTabCommentIdx === 1 ? '#000000' : '#4E4C4C' }} onClick={() => setActiveTabCommentIdx(1)}>Comment From Customer</div>
+                                        </Col>
+                                    </Row>
+                                    <div className='custom-scroll' style={{ maxHeight: '37vh', overflow: 'auto' }}>
+                                        {activeTabCommentIdx === 0 && RenderBehindTasks}
+                                        {activeTabCommentIdx === 1 && RenderComments}
+                                    </div>
                                 </div>
-                            </div>
-                        </Col>
-                    </Row>
+                            </Col>
+                        </Row>
                     </div>
-				</Col>
-			</Row>
-		</div>
-	);
+                </Col>
+            </Row>
+        </div>
+    );
 }
 
 export default DashboardProject;
diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js
index 58526be..cb1034c 100644
--- a/src/views/Pages/Login/Login.js
+++ b/src/views/Pages/Login/Login.js
@@ -5,7 +5,7 @@ import "slick-carousel/slick/slick-theme.css";
 import Slider from "react-slick";
 import { Spin } from 'antd';
 import { Checkbox } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons';
+import { LoadingOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import {
 	Button,
 	Card,
@@ -64,11 +64,19 @@ class Login extends Component {
 			validate: {
 				emailState: '',
 			},
-			loader: false
+			loader: false,
+			type: 'password'
 		}
 		this.handleChange = this.handleChange.bind(this);
+		this.showHide = this.showHide.bind(this);
+	}
+	showHide(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			type: this.state.type === 'input' ? 'password' : 'input'
+		})
 	}
-
 	validateEmail(e) {
 		const emailRex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 		const { validate } = this.state
@@ -151,7 +159,7 @@ class Login extends Component {
 		const doLogin = await axios.post(USER_LOGIN_V2, formData)
 			.then(response => response)
 			.catch(error => {
-				this.setState({loader: false});
+				this.setState({ loader: false });
 			});
 
 		if (doLogin && doLogin.data && doLogin.data.code === 200) {
@@ -163,8 +171,10 @@ class Login extends Component {
 			window.localStorage.setItem('user_name', data_user.name);
 			window.localStorage.setItem('role_id', data_user.role_id);
 		} else {
-			NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
-			this.setState({loader: false});
+			console.log("kode : ", doLogin.data.code);
+			// NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
+			NotificationManager.error(doLogin.data.message, 'Login Failed!');
+			this.setState({ loader: false });
 		}
 
 	}
@@ -211,7 +221,7 @@ class Login extends Component {
 	}
 
 	getLoginLogo = () => {
-		return <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div>
+		return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_login_adw} /></div>
 	}
 
 	getLoginSlider = () => {
@@ -232,7 +242,7 @@ class Login extends Component {
 	}
 
 	onChecked = (e) => {
-		this.setState({remember:e.target.checked})
+		this.setState({ remember: e.target.checked })
 	};
 
 	render() {
@@ -251,7 +261,7 @@ class Login extends Component {
 					</Alert>
 					<Row className="justify-content-center">
 						<Col md="7">
-							{ this.getLoginSlider() }
+							{this.getLoginSlider()}
 						</Col>
 						<Col md="5">
 							<div style={{
@@ -261,7 +271,7 @@ class Login extends Component {
 									<Card className="p-4">
 										<CardBody>
 											<Form onSubmit={this.submitForm}>
-												{ this.getLoginLogo() }
+												{this.getLoginLogo()}
 												<p className="text-muted">Sign In to your account</p>
 												<InputGroup className="mb-3">
 													<InputGroupAddon addonType="prepend">
@@ -286,15 +296,23 @@ class Login extends Component {
 															<i className="icon-lock"></i>
 														</InputGroupText>
 													</InputGroupAddon>
-
 													<Input
-														type="password"
+														type={this.state.type}
 														name="password"
 														id="examplePassword"
 														placeholder="********"
 														value={password}
 														onChange={(e) => this.setState({ password: e.target.value })}
 													/>
+													<InputGroupAddon addonType="prepend">
+														<InputGroupText
+															onClick={this.showHide}
+														>
+															{this.state.type === 'input' ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+
+														</InputGroupText>
+													</InputGroupAddon>
+													<span className="password__show" ></span>
 												</InputGroup>
 												<Row>
 													<Col xs="8">
diff --git a/src/views/SimproV2/CreatedProyek/DialogDocument.js b/src/views/SimproV2/CreatedProyek/DialogDocument.js
index 2bcc494..12a160c 100644
--- a/src/views/SimproV2/CreatedProyek/DialogDocument.js
+++ b/src/views/SimproV2/CreatedProyek/DialogDocument.js
@@ -35,18 +35,18 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   const [parentIdNewFolder, setParentIdNewFolder] = useState(0)
 
   useEffect(() => {
-    if(idTask > 0){
+    if (idTask > 0) {
       getDataDocument();
     }
-  },[idTask, openDialog])
+  }, [idTask, openDialog])
 
   useEffect(() => {
-    if(!openDialog){
+    if (!openDialog) {
       setDataDocument([]);
-    }else{
+    } else {
 
     }
-  },[openDialog])
+  }, [openDialog])
 
 
 
@@ -114,12 +114,12 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   const renderShowDokumen = (file) => {
     let arrayFile = file.split(".")
     let length = arrayFile.length
-    length = length-1
+    length = length - 1
     const fileExt = arrayFile[length];
-    if(fileExt=="pdf" || fileExt=="png" || fileExt=="jpg" || fileExt=="jpeg" || fileExt=="gif"){
-      return(
+    if (fileExt == "pdf" || fileExt == "png" || fileExt == "jpg" || fileExt == "jpeg" || fileExt == "gif") {
+      return (
         <Tooltip title="View Document">
-          <Button size="small" size={"sm"} color='info' style={{color: "#FFFFFF"}} onClick={() => handleShow(file)}><i className="fa fa-eye"></i></Button>
+          <Button size={"sm"} color='info' style={{ color: "#FFFFFF" }} onClick={() => handleShow(file)}><i className="fa fa-eye"></i></Button>
         </Tooltip>
       )
     }
@@ -130,31 +130,31 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
         title: 'Action',
         dataIndex: '',
         key: 'id',
-        className:"nowrap",
-        render: (text, record) => 
-        <>
-          {!record.isDir && <Tooltip title="Delete Document">
-            <Button size="small" size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-          </Tooltip>}{" "}
-          {record.isDir && <Tooltip title="Delete Folder">
-            <Button size="small" size={"sm"} color='danger' onClick={() => handleDeleteFolder(text.id)}><i className="fa fa-trash"></i></Button>
-          </Tooltip>}{" "}
-          {!record.isDir && <Tooltip title="Download Document">
-            <Button size="small" size={"sm"} color='primary' onClick={() => handleDownload(text.id)}><i className="fa fa-download"></i></Button>
-          </Tooltip>}{" "}
-          {record.isDir && <Tooltip title="New Folder">
-            <Button size="sm" color="success" onClick={() => handleNewFolderParent(record.id)}><i className="fa fa-folder"></i></Button>
-          </Tooltip>}{" "}
-          {record.isDir && <Tooltip title="New File">
-            <Button size="sm" color="primary" onClick={() => handleNewFileParent(record.id)}><i className="fa fa-file"></i></Button>
-          </Tooltip>}{" "}
-          {text.file ? renderShowDokumen(text.file): ""}
-        </>
+        className: "nowrap",
+        render: (text, record) =>
+          <>
+            {!record.isDir && <Tooltip title="Delete Document">
+              <Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+            </Tooltip>}{" "}
+            {record.isDir && <Tooltip title="Delete Folder">
+              <Button size={"sm"} color='danger' onClick={() => handleDeleteFolder(text.id)}><i className="fa fa-trash"></i></Button>
+            </Tooltip>}{" "}
+            {!record.isDir && <Tooltip title="Download Document">
+              <Button size={"sm"} color='primary' onClick={() => handleDownload(text.id)}><i className="fa fa-download"></i></Button>
+            </Tooltip>}{" "}
+            {record.isDir && <Tooltip title="New Folder">
+              <Button size="sm" color="success" onClick={() => handleNewFolderParent(record.id)}><i className="fa fa-folder"></i></Button>
+            </Tooltip>}{" "}
+            {record.isDir && <Tooltip title="New File">
+              <Button size="sm" color="primary" onClick={() => handleNewFileParent(record.id)}><i className="fa fa-file"></i></Button>
+            </Tooltip>}{" "}
+            {text.file ? renderShowDokumen(text.file) : ""}
+          </>
         ,
       },
       { title: 'Document Name', dataIndex: 'name_folder', key: 'name_folder', render: (text, record) => record.isDir ? record.name_folder : record.file },
       { title: 'Type', dataIndex: 'isDir', key: 'isDir', render: (text, record) => record.isDir ? 'Folder' : 'File' },
-      { title: 'Upload Date', dataIndex: 'created_at', key: 'created_at', render:(text, record) => (<div style={{whiteSpace:"nowrap"}}>{ text ? moment(text).format("D-M-YYYY") : "-"}</div>) }
+      { title: 'Upload Date', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) }
     ];
 
     return (
@@ -163,13 +163,13 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
         columns={columns}
         rowKey={"id"}
         dataSource={dataDocument}
-        pagination={{position:["bottomLeft"]}}
+        pagination={{ position: ["bottomLeft"] }}
       />
     )
   }, [dataDocument])
 
   const closeDialogReq = (type) => {
-    if(type=="upload"){
+    if (type == "upload") {
       getDataDocument();
     }
     setOpenDialogReq(false);
@@ -230,13 +230,13 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   }
 
   const closeDialogNewFolder = (type) => {
-    if(type=="upload"){
+    if (type == "upload") {
       getDataDocument();
     }
     setOpenDialogNewFolder(false);
     setParentIdNewFolder(0);
   }
-  
+
   const toggleDialogNewFolder = () => {
     setOpenDialogNewFolder(!openDialogNewFolder)
   }
@@ -244,8 +244,8 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{width:"100%"}}>
-          <div>Project Documents - {proyekName} </div> 
+        <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+          <div>Project Documents - {proyekName} </div>
           {/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-plus'></i></Button> */}
           {/* <Popover placement="bottom" title="Add" content={popupAddDoc()} trigger="click">
             <Button size='sm' color="primary"><i className='fa fa-plus'></i></Button>
@@ -254,7 +254,7 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
             <Tooltip title="New Folder">
               <Button size="sm" color="success" onClick={handleNewFolderWOParent}><i className="fa fa-folder"></i></Button>
             </Tooltip>
-            <span style={{marginLeft: 5, marginRight: 5}}></span>
+            <span style={{ marginLeft: 5, marginRight: 5 }}></span>
             <Tooltip title="New File">
               <Button size="sm" color="primary" onClick={handleNewFileWOParent}><i className="fa fa-file"></i></Button>
             </Tooltip>
@@ -262,8 +262,8 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
           {/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-folder'></i></Button> */}
         </ModalHeader>
         <ModalBody>
-          <div style={{ width:'100%', overflow:"auto"}}>
-          {RenderTable}
+          <div style={{ width: '100%', overflow: "auto" }}>
+            {RenderTable}
           </div>
         </ModalBody>
         {/* <ModalFooter>
@@ -299,7 +299,7 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
         Delete this folder
       </SweetAlert>
 
-      <DialogRequest 
+      <DialogRequest
         openDialog={openDialogReq}
         closeDialog={closeDialogReq}
         toggleDialog={toggleDialogReq}