Merge branch 'staging' of https://git.oslog.id/ordo/adw-frontend into Dev-Farhan

src/routes.js

@@ -54,7 +54,7 @@ const routes = [
 	{ path: '/', exact: true, name: 'Home' },
 	// { path: '/dashboard', name: 'Dashboard', component: Dashboard},
 	{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
-	{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID', name: 'DashboardCustomer', component: DashboardCustomer },
+	// { path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID', name: 'DashboardCustomer', component: DashboardCustomer },
 	{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID/:SCURVE', name: 'DashboardCustomer', component: DashboardCustomer },
 	{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID', exact: true, name: 'Dashboard Project', component: DashboardProject },
 	{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:SCURVE', exact: true, name: 'Dashboard Project', component: DashboardProject },

src/views/Dashboard/DashboardBOD.js

@@ -13,8 +13,21 @@ import toRupiah from '@develoka/angka-rupiah-js';
 import Icon from '@iconify/react';
 import { HealthByBudget, HealthBySchedule } from './Components';
 
-const DashboardBOD = () => {
-	const token = localStorage.getItem("token")
+const DashboardBOD = (props) => {
+  let role_id = '', user_id='',isLogin='',token='';
+  if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+    role_id = props.location.state.role_id;
+    user_id = props.location.state.user_id;
+    token = props.location.state.token;
+    isLogin = props.location.state.isLogin;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    user_id = localStorage.getItem("user_id");
+    token = localStorage.getItem("token");
+    isLogin = localStorage.getItem("isLogin");
+    console.error('undefined in props.location.state');
+  }
 	const HEADER = {
 		headers: {
 			"Content-Type": "application/json",

src/views/Dashboard/DashboardCustomer.js

@@ -25,8 +25,21 @@ const center = {
     lng: 106.816666
 }
 
-const DashboardCustomer = () => {
-	const token = localStorage.getItem("token")
+const DashboardCustomer = (props) => {
+  let role_id = '', user_id='',isLogin='',token='';
+  if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+    role_id = props.location.state.role_id;
+    user_id = props.location.state.user_id;
+    token = props.location.state.token;
+    isLogin = props.location.state.isLogin;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    user_id = localStorage.getItem("user_id");
+    token = localStorage.getItem("token");
+    isLogin = localStorage.getItem("isLogin");
+    console.error('Undefined in props.location.state');
+  }
 	const HEADER = {
 		headers: {
 			"Content-Type": "application/json",
@@ -34,8 +47,7 @@ const DashboardCustomer = () => {
 		}
 	}
     const { PROJECT_ID, GANTT_ID, SCURVE } = 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()
+    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()
     const [projectName, setProjectName] = useState("");
     const [projectManagerName, setProjectManagerName] = useState('');
     const [customerName, setCustomerName] = useState("");
@@ -101,8 +113,11 @@ const DashboardCustomer = () => {
 
     const getProjectDetail = async () => {
         setIsReadyProjectDetail(false);
-        const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
-        const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
+        let URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
+        URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}/${GANTT_ID}/1`
+      const result = await axios.get(URL, HEADER)
+        .then(res => res)
+        .catch(err => err.response)
         console.log('getProjectDetail', result);
         if (!result) {
             NotificationManager.error(`Could not connect to internet.`, "Failed");
@@ -195,7 +210,9 @@ const DashboardCustomer = () => {
         const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
         const payload = {
             "id": PROJECT_ID.toString(),
-            "till_date": moment(new Date()).format('YYYY-MM-DD')
+            "till_date": moment(new Date()).format('YYYY-MM-DD'),
+            'gantt': GANTT_ID.toString(),
+            'scurve': SCURVE ? SCURVE.toString() : null
         }
         const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
         console.log('getOverdueActivities', result);

src/views/Dashboard/DashboardProject.js

@@ -124,12 +124,11 @@ const DashboardProject = () => {
   const [dataGanttParents, setDataGanttParents] = useState({});
   const [isReadyGanttParents, setIsReadyGanttParents] = useState(false);
   const [calculationStatus, setCalculationStatus] = useState(false);
-  const [isHierarchy, setIsHierarchy] = useState(false);
+  const [isHierarchy, setIsHierarchy] = useState(null);
   let history = useHistory();
 
   useEffect(() => {
     getProjectDetail();
-    getSCurve();
     getOverdueActivities();
     getReportDistribution();
     getComments();
@@ -140,6 +139,17 @@ const DashboardProject = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (isHierarchy != null) {
+      getSCurve();
+    }
+    window.addEventListener("message", handleIframeMessage);
+
+    return () => {
+      window.removeEventListener("message", handleIframeMessage);
+    };
+  }, [isHierarchy]);
+
   useEffect(() => {
     if (activeTabIdx === 1) {
       initMap();
@@ -187,6 +197,8 @@ const DashboardProject = () => {
       setDataGantt(response);
       if (response.data.data.hierarchy_ftth_id) {
         setIsHierarchy(true);
+      } else {
+        setIsHierarchy(false);
       }
       setIsReadyGantt(true);
     } catch (error) {
@@ -313,12 +325,14 @@ const DashboardProject = () => {
       );
       setPlannedFinish(
         SCURVE
-          ? result.data.data.akhir_proyek
+          ? result.data.data.type_proyek_id === 9
             ? result.data.data.akhir_proyek
-            : null
+              ? result.data.data.akhir_proyek
+              : null
           : result.data.data.header?.planned_end
-            ? result.data.data.header?.planned_end
-            : null
+        : result.data.data.header?.planned_end
+          ? result.data.data.header?.planned_end
+          : null
       );
       setActualStart(
         result.data.data.header?.start_date
@@ -709,7 +723,7 @@ const DashboardProject = () => {
 
       // Send the URL back to the iframe
       event.source.postMessage(
-        { action: "sendUrl", url: childUrl },
+        { action: "sendUrl", url: childUrl, isHierarchy: isHierarchy },
         event.origin
       );
     }

src/views/Pages/Login/Login.js

@@ -133,7 +133,7 @@ class Login extends Component {
 		}
 	}
 
-	getDataMenu = async (token, role_id) => {
+	getDataMenu = async (token, role_id, user_id) => {
 		const config = {
 			headers:
 			{
@@ -157,15 +157,28 @@ class Login extends Component {
 				this.props.history.push("/dashboard-customer/58/63");
 			}
 			else {
-				this.props.history.push("/dashboard");
+				this.props.history.push({
+					pathname: "/dashboard",
+					state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+				});
 			}
 			if (this.state.defaultPage) {
-				this.props.history.push(this.state.defaultPage);
+				if (role_id === 44) {
+					this.props.history.push({
+						pathname: this.state.defaultPage,
+						state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+					});
+				} else {
+					this.props.history.push(this.state.defaultPage);
+				}
 			} else if (role_id == 28) {
 				this.props.history.push("/dashboard-customer/58/63");
 			}
 			else {
-				this.props.history.push("/dashboard");
+				this.props.history.push({
+					pathname: "/dashboard",
+					state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+				});
 			}
 		} else {
 			NotificationManager.error('Login Failed', 'Failed');
@@ -209,7 +222,7 @@ class Login extends Component {
 		if (doLogin && doLogin.data && doLogin.data.code === 200) {
 			const { access_token, data_user } = doLogin.data.data
 			this.getDataRole(access_token, data_user.role_id)
-			this.getDataMenu(access_token, data_user.role_id)
+			this.getDataMenu(access_token, data_user.role_id, data_user.id)
 			window.localStorage.setItem('isLogin', true);
 			window.localStorage.setItem('token', access_token);
 			window.localStorage.setItem('user_id', data_user.id);

src/views/SimproV2/CreatedProyek/AsignCustProject.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import {
@@ -25,9 +25,11 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 	const [alertDelete, setAlertDelete] = useState(false)
 	const [idDelete, setIdDelete] = useState(0)
 	const [openDialogFormTools, setOpenDialogFormTools] = useState(false)
+  const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		if (idTask > 0) {
+    if (idTask > 0) {
+      setLoading(true);
 			getDataAssignHr();
 		}
 	}, [openDialog]);
@@ -63,8 +65,10 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 		if (result && result.data && result.data.code == 200) {
 			let dataRes = result.data.data || []
       const filteredData = dataRes.filter(item => item.is_customer === true);
-			setdataUserToProject(filteredData);
+      setdataUserToProject(filteredData);
+      setLoading(false);
 		} else {
+      setLoading(false);
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
 	}
@@ -185,8 +189,10 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 
 					<div>Assign Customer - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
 				</ModalHeader>
-				<ModalBody>
-					{renderForm()}
+        <ModalBody>
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
 				</ModalBody>
 			</Modal>
 			<FormAsignCust

src/views/SimproV2/CreatedProyek/AsignHrProject.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst';
@@ -25,16 +25,18 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 	const [openDialogFormTools, setOpenDialogFormTools] = useState(false)
 	const [dataEdit, setDataEdit] = useState(null)
 	const [listUser, setListUser] = useState([])
-	const [listRole, setListRole] = useState([])
+  const [listRole, setListRole] = useState([])
+  const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
 		if (idTask > 0) {
+      setLoading(true);
 			getDataAssignHr();
 		}
 	}, [openDialog]);
 
 	useEffect(() => {
-		if (openDialog) {
+    if (openDialog) {
 			getDataProjectRole();
 			getDataUser();
 		}
@@ -70,9 +72,10 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 
 		if (result && result.data && result.data.code == 200) {
 			let dataRes = result.data.data || []
-
-			setdataUserToProject(dataRes);
+      setdataUserToProject(dataRes);
+      setLoading(false);
 		} else {
+      setLoading(false);
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
 	}
@@ -158,7 +161,7 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 	}
 
 	const handleOpenDialogFormTools = () => {
-		setOpenDialogFormTools(true)
+    setOpenDialogFormTools(true)
 	}
 
 	const handleCancel = () => {
@@ -280,8 +283,10 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 
 					<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
 				</ModalHeader>
-				<ModalBody>
-					{renderForm()}
+        <ModalBody>
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
 				</ModalBody>
 				{/* <ModalFooter>
 		  <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button>

src/views/SimproV2/CreatedProyek/AssignK3Project.js

@@ -3,11 +3,14 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import { PROJECT_TO_CHECKLIST_K3_ADDS, PROJECT_TO_CHECKLIST_K3_SEARCH } from '../../../const/ApiConst';
-import { Transfer } from 'antd';
+import { Transfer, Spin } from 'antd';
 import 'antd/dist/antd.css';
+import { NotificationManager } from 'react-notifications';
 
 const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3, proyekName }) => {
   const token = localStorage.getItem("token")
+  const [loading, setLoading] = useState(true);
+
   const HEADER = {
     headers: {
       "Content-Type": "application/json",
@@ -30,7 +33,8 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
   }, [openDialog])
 
   useEffect(() => {
-    if(idTask && idTask > 0){
+    if (idTask && idTask > 0) {
+        setLoading(true);
         getK3toProject()
     }
   }, [idTask])
@@ -56,8 +60,10 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
             });
         }
         setTargetKeys(newTargetKeys)
+        setLoading(false);
     }else{
-        
+      setLoading(false);
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
 
@@ -126,7 +132,9 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
       <Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>Assign K3 to Project {proyekName !== '' ? `- ${proyekName}` : ''}</ModalHeader>
         <ModalBody>
-          {renderForm()}
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}

src/views/SimproV2/CreatedProyek/DialogDocument.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip, Popover } from 'antd';
+import { Table, Tooltip, Popover, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -33,9 +33,11 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   const [idDelete, setIdDelete] = useState(0)
   const [dataEdit, setDataEdit] = useState(null)
   const [parentIdNewFolder, setParentIdNewFolder] = useState(0)
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (idTask > 0) {
+      setLoading(true);
       getDataDocument();
     }
   }, [idTask, openDialog])
@@ -61,7 +63,9 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
       .catch((error) => error.response);
     if (result && result.data && result.data.code == 200) {
       setDataDocument(result.data.data);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed');
     }
   }
@@ -279,9 +283,11 @@ 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>
+          <Spin tip="Loading..." spinning={loading}>
+            <div style={{ width: '100%', overflow: "auto" }}>
+              {RenderTable}
+            </div>
+          </Spin>
         </ModalBody>
         {/* <ModalFooter>
           <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>

src/views/SimproV2/CreatedProyek/DialogGantt.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem} from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -13,8 +13,20 @@ import DialogUserGantt from './DialogUserGantt';
 
 import { Link } from 'react-router-dom';
 
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => {
-  const token = localStorage.getItem("token")
+const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id }) => {
+  if (role_id && user_id && token && isLogin) {
+    role_id = role_id;
+    user_id = user_id;
+    token = token;
+    isLogin = isLogin;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    user_id = localStorage.getItem("user_id");
+    token = localStorage.getItem("token");
+    isLogin = localStorage.getItem("isLogin");
+    console.error('Undefined in props.location.state');
+  }
   const HEADER = {
     headers: {
       "Content-Type": "application/json",
@@ -31,9 +43,11 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
   const [humanResource, setHumanResource] = useState([])
   const [dataEdit, setDataEdit] = useState([])
   const [typeDialog, setTypeDialog] = useState('')
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
+      setLoading(true);
       getdataGantt();
     }
     if (!openDialog) {
@@ -92,8 +106,13 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       .catch((error) => error.response);
 
     if (result && result.status == 200) {
-      setDataGantt(result.data.data);
+      const sortedData = result.data.data.sort((a, b) => {
+        return a.name_version.toLowerCase().localeCompare(b.name_version.toLowerCase());
+      });
+      setDataGantt(sortedData);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
     }
   }
@@ -144,7 +163,15 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
               </Tooltip>{" "}
             </Link>
 
-            <Link to={`/projects/${text.id}/${idTask}/gantt`}>
+            <Link to={{
+              pathname: `/projects/${text.id}/${idTask}/gantt`,
+              state: {
+                isLogin: isLogin,
+                token: token,
+                role_id: role_id,
+                user_id: user_id,
+              }
+              }}>
               <Tooltip title="Gantt">
                 <Button size={"sm"} color='primary'><i className="fa fa-gears"></i></Button>
               </Tooltip></Link>{" "}
@@ -251,7 +278,9 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>
-            {RenderTable}
+            <Spin tip="Loading..." spinning={loading}>
+              {RenderTable}
+            </Spin>
           </div>
         </ModalBody>
         {/* <ModalFooter>

src/views/SimproV2/CreatedProyek/DialogHierarchy.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Space, Table, Tooltip } from 'antd';
+import { Space, Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -41,8 +41,10 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
   const [idGantt, setIdGantt] = useState(0)
   const [humanResource, setHumanResource] = useState([])
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     if (idTask > 0) {
+      setLoading(true);
       getdataHierarchy();
     }
   }, [saveHierarchy, idTask, openDialog, closeDialog, openDialogFormGantt])
@@ -157,7 +159,9 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     if (result && result.status == 200) {
       const sortedData = _.orderBy(result.data.data, ['name'], ['asc']);
       setDataHierarchy(sortedData);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
     }
   }
@@ -285,9 +289,11 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
           </Tooltip>
         </ModalHeader>
         <ModalBody>
-          <div style={{ width: '100%', overflow: "auto" }}>
-            {RenderTable}
-          </div>
+          <Spin tip="Loading..." spinning={loading}>
+            <div style={{ width: '100%', overflow: "auto" }}>
+              {RenderTable}
+            </div>
+          </Spin>
         </ModalBody>
         {/* <ModalFooter>
           <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,7 +1,21 @@
 import React, {useState, useEffect} from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap';
-import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
-import { Button } from 'reactstrap';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Card,
+  CardHeader,
+  CardBody,
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  Row,
+  Col,
+  Button
+} from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import {
   NotificationManager,
@@ -9,7 +23,7 @@ import {
 import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-import { Select, Table, Tooltip } from 'antd';
+import { Select, Table, Tooltip, Spin } from 'antd';
 import DialogFormAnalysis from './DialogFormAnalysis';
 import moment from "moment";
 const { Option } = Select
@@ -21,12 +35,15 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   const [openDialogFormAnalysis, setOpenDialogFormAnalysis] = useState(false);
   const [dataDetail, setDataDetail] = useState(null);
   const [avgActivityHr, setAvgActivityHr] = useState(0);
+  const [sumVolPlan, setSumVolPlan] = useState(0);
+  const [sumVolAct, setSumVolAct] = useState(0);
   const [avgActivity, setAvgActivity] = useState(0);
   const [dataTable, setDatatable] = useState([]);
   const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
   const [hrList, setHrList] = useState([]);
   const [groupedActivity, setGroupedActivity] = useState([]);
   const [selectedHr, setSelectedHr] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const toggle = (tab) => {
     if (activeTab !== tab) {
@@ -57,7 +74,57 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
   const columns = [
     {title: "Gantt", dataIndex: "name_version", key: "name_version"},
-    {title: "Assign HR", dataIndex: "user_name", key: "user_name"},
+    {title: "Baseline Start", dataIndex: "planned_start", key: "planned_start",
+      render: (text, record) => (
+          <>
+            {record.planned_start ? moment(record.planned_start).format("DD-MM-YY") : ''}
+          </>
+        ),
+    },
+    {title: "Baseline Finish", dataIndex: "planned_end", key: "planned_end",
+      render: (text, record) => (
+          <>
+            {record.planned_end ? moment(record.planned_end).format("DD-MM-YY") : ''}
+          </>
+        ),
+    },
+    {title: "Early Start", dataIndex: "start_date", key: "start_date",
+      render: (text, record) => (
+          <>
+            {moment(record.start_date).format("DD-MM-YY")}
+          </>
+        ),
+    },
+    {title: "Early Finish", dataIndex: "end_date", key: "end_date",
+      render: (text, record) => (
+          <>
+            {moment(record.end_date).format("DD-MM-YY")}
+          </>
+        ),
+    },
+    {title: "Actual Start", dataIndex: "actual_start", key: "actual_start",
+      render: (text, record) => (
+          <>
+            {record.actual_start ? moment(record.actual_start).format("DD-MM-YY") : ""}
+          </>
+        ),
+    },
+    {title: "Actual Finish", dataIndex: "actual_end", key: "actual_end",
+      render: (text, record) => (
+          <>
+            {record.actual_end ? moment(record.actual_end).format("DD-MM-YY") : ""}
+          </>
+        ),
+    },
+    {title: "Assign HR", dataIndex: "user_name", key: "user_name", width: "8%",
+        ellipsis:{
+          showTitle: true
+        },
+        render: (text) =>
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+    },
     {title: "Volume Plan", dataIndex: "qty_planning", key: "qty_planning",
     render: (text, record) =>
           <>
@@ -81,7 +148,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
         );
       },
     },
-    {title: "Progress Actual (%)", dataIndex: "persentase_progress", key: "persentase_progress"},
+    {title: "Progress Actual (%)", dataIndex: "persentase_progress", key: "persentase_progress", width: "8%"},
     {
       title: 'Action',
       dataIndex: '',
@@ -100,17 +167,45 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   const columnActivityToHr = [
     {title: "Activity", dataIndex: "join_second_name", key: "join_second_name"},
     {title: "Gantt", dataIndex: "join_fourth_name_version", key: "join_fourth_name_version"},
-    {title: "Start Date", dataIndex: "start_date", key: "start_date",
+    {title: "Baseline Start", dataIndex: "join_second_planned_start", key: "join_second_planned_start",
+      render: (text, record) => (
+          <>
+            {moment(record.join_second_planned_start).format("DD-MM-YY")}
+          </>
+        ),
+    },
+    {title: "Baseline Finish", dataIndex: "join_second_planned_end", key: "join_second_planned_end",
       render: (text, record) => (
           <>
-            {moment(record.start_date).format("DD-MM-YYYY")}
+            {moment(record.join_second_planned_end).format("DD-MM-YY")}
           </>
         ),
     },
-    {title: "End Date", dataIndex: "end_date", key: "end_date",
+    {title: "Early Start", dataIndex: "join_second_start_date", key: "join_second_start_date",
       render: (text, record) => (
           <>
-            {moment(record.end_date).format("DD-MM-YYYY")}
+            {moment(record.join_second_start_date).format("DD-MM-YY")}
+          </>
+        ),
+    },
+    {title: "Early Finish", dataIndex: "join_second_end_date", key: "join_second_end_date",
+      render: (text, record) => (
+          <>
+            {moment(record.join_second_end_date).format("DD-MM-YY")}
+          </>
+        ),
+    },
+    {title: "Actual Start", dataIndex: "join_second_actual_start", key: "join_second_actual_start",
+      render: (text, record) => (
+          <>
+            {record.join_second_actual_start ? moment(record.join_second_actual_start).format("DD-MM-YY") : ""}
+          </>
+        ),
+    },
+    {title: "Actual Finish", dataIndex: "join_second_actual_end", key: "join_second_actual_end",
+      render: (text, record) => (
+          <>
+            {record.join_second_actual_end ? moment(record.join_second_actual_end).format("DD-MM-YY") : ""}
           </>
         ),
     },
@@ -155,12 +250,14 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
   useEffect(() => {
     if (search) {
+      setLoading(true);
       getDataActivity()
     }
   }, [search]);
 
   useEffect(() => {
     if (selectedHr) {
+      setLoading(true);
       getDataActivityToHr()
     }
   }, [selectedHr]);
@@ -279,7 +376,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
         {
           name: "m_activity",
           column_join: "activity_id",
-          column_results: ["name", "persentase_progress", "start_date", "end_date", "duration"]
+          column_results: ["name", "persentase_progress", "actual_start", "actual_end", "planned_start", "planned_end", "start_date", "end_date", "duration"]
         },
         {
           name1: "m_activity",
@@ -318,7 +415,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       });
       setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -352,8 +451,12 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
   const getDataActivity = async () => {
     setAvgActivity(0);
+    setSumVolPlan(0);
+    setSumVolAct(0);
     setDatatable([]);
     let sum = 0;
+    let sumPlan = 0;
+    let sumAct = 0;
     const payload = {
       columns: [
         {
@@ -383,10 +486,16 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
       dataRes.forEach(element => {
           element.persentase_progress ? sum += parseInt(element.persentase_progress) : sum += 0;
+          element.qty_planning ? sumPlan += parseInt(element.qty_planning) : sumPlan += 0;
+          element.qty ? sumAct += parseInt(element.qty) : sumAct += 0;
       });
       setAvgActivity(sum / dataRes.length);
+      setSumVolPlan(sumPlan);
+      setSumVolAct(sumAct);
       setDatatable(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -434,21 +543,25 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       </Col>
                     </Row>
                   </CardHeader>
-                  <CardBody>
+                  <CardBody style={{ width: '100%' }}>
                     <div style={{ textAlign: 'center' }}>
                       <h1>
                         {
-                          search && avgActivity ? `Activity ${search} adalah ${avgActivity.toFixed(2)} %` : null
+                          search ? `Activity ${search}, Total Plan = ${sumVolPlan ? sumVolPlan.toFixed(0) : 0} dan Total Actual = ${sumVolAct ? sumVolAct.toFixed(0) : 0}` : null
                         }
                       </h1>
                     </div>
-                      <Table
-                        size="small"
-                        columns={columns}
-                        dataSource={dataTable}
-                        pagination={false}
-                        rowKey={"id"}
-                      />
+                    <div style={{ width: '100%', overflowX: 'auto' }}>
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columns}
+                          dataSource={dataTable}
+                          pagination={false}
+                          rowKey="id"
+                        />
+                      </Spin>
+                    </div>
                   </CardBody>
                 </Card>
               </TabPane>
@@ -467,14 +580,18 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       </Col>
                     </Row>
                   </CardHeader>
-                  <CardBody>
-                      <Table
-                        size="small"
-                        columns={columnActivityToHr}
-                        dataSource={dataTableActivityToHr}
-                        pagination={false}
-                        rowKey={"id"}
-                      />
+                  <CardBody style={{ width: '100%' }}>
+                    <div style={{ width: '100%', overflowX: 'auto' }}>
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columnActivityToHr}
+                          dataSource={dataTableActivityToHr}
+                          pagination={false}
+                          rowKey={"id"}
+                        />
+                      </Spin>
+                    </div>
                   </CardBody>
                 </Card>
               </TabPane>

src/views/SimproV2/CreatedProyek/index.js

@@ -89,19 +89,29 @@ import AssignK3Project from "./AssignK3Project";
 import ViewProject from "./ViewProject";
 import ReportAnalysis from "./ReportAnalysis";
 import { Icon } from "@iconify/react";
-// import { Link } from 'react-router-dom';
 // import SubProyekComp from './SubProyekComp';
-import { Link, useHistory } from "react-router-dom";
+import { Link, useHistory, withRouter } from "react-router-dom";
 
 const url = "";
-const proyek_id = localStorage.getItem("proyek_id");
-const role_id = localStorage.getItem("role_id");
-const user_id = localStorage.getItem("user_id");
 const format = "DD-MM-YYYY";
 
 const CreatedProyek = ({ params, ...props }) => {
+  let role_id = '', user_id='',proyek_id='',isLogin='',token='';
+  if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+    role_id = props.location.state.role_id;
+    user_id = props.location.state.user_id;
+    token = props.location.state.token;
+    isLogin = props.location.state.isLogin;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    proyek_id = localStorage.getItem("proyek_id");
+    user_id = localStorage.getItem("user_id");
+    token = localStorage.getItem("token");
+    isLogin = localStorage.getItem("isLogin");
+    console.error('Undefined in props.location.state');
+  }
   const history = useHistory();
-  const token = localStorage.getItem("token");
   const HEADER = {
     headers: {
       "Content-Type": "application/json",
@@ -200,7 +210,7 @@ const CreatedProyek = ({ params, ...props }) => {
   }, [openDialogProyek]);
 
   useEffect(() => {
-    role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
+    parseInt(role_id) !== 44 ? getDataProyek() : getDataProyekByCustomer();
   }, [search, rowsPerPage, currentPage]);
 
   useEffect(() => {
@@ -266,8 +276,8 @@ const CreatedProyek = ({ params, ...props }) => {
     }
   };
 
-  const handleDashboard = async (text) => {
-    const URL = `${BASE_OSPRO}/api/project/detail/${text.id}`;
+  const handleDashboard = async (id) => {
+    const URL = `${BASE_OSPRO}/api/project/detail/${id}`;
     const result = await axios
       .get(URL, HEADER)
       .then((res) => res)
@@ -284,9 +294,10 @@ const CreatedProyek = ({ params, ...props }) => {
       );
       return;
     } else if (result.status == 200 && result.data.data) {
-      history.push(
-        `dashboard-customer/${text.id}/${result.data.gantt}/1`
-      );
+      history.push({
+        pathname: `/dashboard-customer/${id}/${result.data.gantt}/1`,
+        state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+      });
     }
   };
 
@@ -527,6 +538,7 @@ const CreatedProyek = ({ params, ...props }) => {
   };
 
   const handleOpenDialogViewDetail = async (data) => {
+    setLoading(true);
     setidTask(data.id);
     // setDataView(data)
     await getDataProject(data.id);
@@ -598,6 +610,10 @@ const CreatedProyek = ({ params, ...props }) => {
     getProjectDetail(data.id);
   };
 
+  const handleDashboardCustomer = async (data) => {
+    handleDashboard(data.id);
+  };
+
   const handleOpenReport = async (data) => {
     setOpenDialogRA(true);
     setProjectId(data.id);
@@ -696,7 +712,10 @@ const CreatedProyek = ({ params, ...props }) => {
       .then((res) => res)
       .catch((err) => err.response);
     if (result && result.data && result.data.code === 200) {
+      setLoading(false)
       setProjectImage(result.data.data);
+    }else{
+      setLoading(false)
     }
   }
 
@@ -888,7 +907,7 @@ const CreatedProyek = ({ params, ...props }) => {
       .catch((error) => error.response);
 
     if (result && result.data && result.data.code === 200) {
-      role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
+      parseInt(role_id) !== 44 ? getDataProyek() : getDataProyekByCustomer();
       getProjectImage(idDelete);
       deleteImage(idDelete);
       setIdDelete(0);
@@ -959,7 +978,7 @@ const CreatedProyek = ({ params, ...props }) => {
         NotificationManager.success(`${result.data.message}`, "Success!!");
       }
 
-      role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
+      parseInt(role_id) !== 44 ? getDataProyek() : getDataProyekByCustomer();
     } else {
       NotificationManager.error(`${result.data.message}`, "Failed!!");
     }
@@ -1138,7 +1157,7 @@ const CreatedProyek = ({ params, ...props }) => {
       );
     }
     if (result && result.status === 200) {
-      role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
+      parseInt(role_id) !== 44 ? getDataProyek() : getDataProyekByCustomer();
       NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!");
     } else {
       NotificationManager.error(`${result.data.message}`, "Failed!!");
@@ -1612,12 +1631,12 @@ const CreatedProyek = ({ params, ...props }) => {
         dataIndex: "",
         key: "x",
         render: (text, record) =>
-          role_id == "44" ? (
+        parseInt(role_id) == 44 ? (
             <>
               <Tooltip title="Dashboard Project">
                 <Button
                   size="small"
-                  onClick={() => handleDashboard(text)}
+                  onClick={() => handleDashboardCustomer(text)}
                   type="link"
                   style={{ color: "green" }}
                 >
@@ -1926,6 +1945,10 @@ const CreatedProyek = ({ params, ...props }) => {
         closeDialog={closeDialogGantt}
         toggleDialog={toggleDialogGantt}
         idTask={idTask}
+        role_id={role_id}
+        user_id={user_id}
+        token={token}
+        isLogin={isLogin}
         proyekName={proyekName}
       />
     ),
@@ -1991,7 +2014,7 @@ const CreatedProyek = ({ params, ...props }) => {
               />
             </Col>
             <Col>
-              {role_id == "44" ? null : ( // role kustomer
+              {parseInt(role_id) == 44 ? null : ( // role kustomer
                 <Tooltip title="Add Project">
                   <Button
                     style={{ background: "#4caf50", color: "#fff" }}
@@ -2062,5 +2085,4 @@ const CreatedProyek = ({ params, ...props }) => {
     </div>
   );
 };
-
-export default CreatedProyek;
+export default withRouter(CreatedProyek);

src/views/SimproV2/Gantt/GanttFrame.js

@@ -1,14 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, withRouter } from 'react-router-dom';
 import { BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
 
 const GanttFrame = React.memo((props) => {
+  let role_id = '', user_id='',proyek_id='',isLogin='',token='';
+  if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+    role_id = props.location.state.role_id;
+    user_id = props.location.state.user_id;
+    isLogin = props.location.state.isLogin;
+    token = props.location.state.token;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    proyek_id = localStorage.getItem("proyek_id");
+    user_id = localStorage.getItem("user_id");
+    isLogin = localStorage.getItem("isLogin");
+    token = localStorage.getItem("token");
+    console.error('Undefined in props.location.state');
+  }
   const history = useHistory();
-  const { versionGanttId, idProject, token, ro, timestamp } = props;
+  const { versionGanttId, idProject, ro, timestamp } = props;
   const iframeSrc = `https://adw-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}&timestamp=${timestamp}`;
 
 
-
   const [batchEntityData, setBatchEntityData] = useState(null);
 
   useEffect(() => {
@@ -46,4 +60,4 @@ const GanttFrame = React.memo((props) => {
   );
 });
 
-export default GanttFrame;
+export default withRouter(GanttFrame);

src/views/SimproV2/Gantt/index.js

@@ -11,18 +11,30 @@ import { Fab, Action } from "react-tiny-fab";
 import "react-tiny-fab/dist/styles.css";
 import { useHistory } from "react-router-dom";
 import GanttFrame from "./GanttFrame";
-const token = localStorage.getItem("token");
-const userId = parseInt(localStorage.getItem("user_id"));
-const HEADER = {
-  headers: {
-    "Content-Type": "application/json",
-    Authorization: `Bearer ${token}`,
-  },
-};
 
 let roCount = 0;
 
 const Gantt = (props) => {
+  let role_id = '', userId='',isLogin='',token='';
+  if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+    role_id = props.location.state.role_id;
+    userId = props.location.state.user_id;
+    token = props.location.state.token;
+    isLogin = props.location.state.isLogin;
+    console.log('props.location.state success');
+  } else {
+    role_id = localStorage.getItem("role_id");
+    userId = localStorage.getItem("user_id");
+    token = localStorage.getItem("token");
+    isLogin = localStorage.getItem("isLogin");
+    console.error('Undefined in props.location.state');
+  }
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
   const versionGanttId = props.match.params ? props.match.params.id : 0;
   const idProject = props.match.params.project ? props.match.params.project : 0;
   const timestamp = props.match.params.timestamp

src/views/SimproV2/ResourceWorker/index.js

@@ -8,7 +8,7 @@ import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import { DownloadOutlined } from '@ant-design/icons';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Table, Button, Tooltip } from 'antd';
+import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
 import {
   PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
 } from '../../../const/ApiConst';
@@ -18,6 +18,7 @@ const proyek_id = localStorage.getItem('proyek_id');
 const role_id = localStorage.getItem('role_id');
 const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
+
 const config = {
   headers:
   {
@@ -55,12 +56,15 @@ const ResourceWorker = ({ params }) => {
   const [typeDialogShift, setTypeDialogShift] = useState('Save')
   const pageName = params.name;
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     getRoleList()
     getDivisiList()
   }, [])
 
   useEffect(() => {
+    setLoading(true);
     getDataUser()
   }, [search, rowsPerPage, currentPage])
 
@@ -218,7 +222,9 @@ const ResourceWorker = ({ params }) => {
     if (result && result.data && result.data.code == 200) {
       setDatatable(result.data.data);
       setTotalPage(result.data.totalRecord);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
@@ -583,7 +589,9 @@ const ResourceWorker = ({ params }) => {
           </Row>
         </CardHeader>
         <CardBody>
-          {RenderTable}
+          <Spin tip="Loading..." spinning={loading}>
+            {RenderTable}
+          </Spin>
           <Pagination
             style={{ marginTop: "25px" }}
             showSizeChanger