ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update from adw

pull/1/head
farhantock 10 months ago
parent
4b22ba52c4
commit
33e3e36706
1 changed files with 145 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 218
      src/views/Dashboard/DashboardProject.js

218
src/views/Dashboard/DashboardProject.js
Unescape View File

@ -30,7 +30,9 @@ import {
} from "./Components"; } from "./Components";
import { Fab, Action } from "react-tiny-fab"; import { Fab, Action } from "react-tiny-fab";
import "react-tiny-fab/dist/styles.css"; import "react-tiny-fab/dist/styles.css";
import { useHistory, useLocation, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import { Icon } from '@iconify/react';
import arrowLeft from '@iconify/icons-ion/ios-arrow-back';
const { TextArea } = Input; const { TextArea } = Input;
@ -64,8 +66,7 @@ const center = {
}; };
const DashboardProject = (props) => { const DashboardProject = (props) => {
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = '';
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name='', hierarchy=[], user_name='';
if (props && props.role_id && props.user_id) { if (props && props.role_id && props.user_id) {
role_id = props.role_id; role_id = props.role_id;
user_id = props.user_id; user_id = props.user_id;
@ -78,7 +79,6 @@ const DashboardProject = (props) => {
hierarchy = props.hierarchy; hierarchy = props.hierarchy;
user_name = props.user_name; user_name = props.user_name;
} }
const HEADER = { const HEADER = {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@ -87,7 +87,7 @@ const DashboardProject = (props) => {
}; };
const { PROJECT_ID, GANTT_ID, SCURVE } = useParams(); const { PROJECT_ID, GANTT_ID, SCURVE } = useParams();
const URL_GANTT = `https://project-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1&role_name=${role_name}&company_id=${company_id}`; const URL_GANTT = `https://project-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1&role_name=${role_name}&company_id=${company_id}`;
// const URL_GANTT = `http://localhost:8444/generic-ospro-gantt/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1&role_name=${role_name}&company_id=${company_id}`; // const URL_GANTT = `http://localhost:8444/generic-ospro-gantt/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1&role_name=${role_name}&company_id=${company_id}`;
const mapRef = useRef(); const mapRef = useRef();
const [projectName, setProjectName] = useState(""); const [projectName, setProjectName] = useState("");
const [projectManagerName, setProjectManagerName] = useState(""); const [projectManagerName, setProjectManagerName] = useState("");
@ -140,6 +140,8 @@ const DashboardProject = (props) => {
const [isReadyGanttParents, setIsReadyGanttParents] = useState(false); const [isReadyGanttParents, setIsReadyGanttParents] = useState(false);
const [calculationStatus, setCalculationStatus] = useState(false); const [calculationStatus, setCalculationStatus] = useState(false);
const [isHierarchy, setIsHierarchy] = useState(null); const [isHierarchy, setIsHierarchy] = useState(null);
const [dataOverdue, setDataOverdue] = useState(null);
const [projectType, setProjectType] = useState(null);
let history = useHistory(); let history = useHistory();
useEffect(() => { useEffect(() => {
@ -150,6 +152,7 @@ const DashboardProject = (props) => {
getGantt(); getGantt();
getGanttParents(); getGanttParents();
return () => { return () => {
console.log("unmount RenderMap");
}; };
}, []); }, []);
@ -158,9 +161,10 @@ const DashboardProject = (props) => {
getSCurve(); getSCurve();
} }
window.addEventListener("message", handleIframeMessage); window.addEventListener("message", handleIframeMessage);
window.addEventListener('message', handleGetOverdue);
return () => { return () => {
window.removeEventListener("message", handleIframeMessage); window.removeEventListener("message", handleIframeMessage);
window.removeEventListener("message", handleGetOverdue);
}; };
}, [isHierarchy]); }, [isHierarchy]);
@ -183,8 +187,13 @@ const DashboardProject = (props) => {
useEffect(() => { useEffect(() => {
let deviation = 0; let deviation = 0;
if (plannedCost && totalCost) { // Convert plannedCost and totalCost to numbers
deviation = plannedCost - totalCost; const plannedCostNumber = parseFloat(plannedCost);
const totalCostNumber = parseFloat(totalCost);
// Check if conversion is successful
if (!isNaN(plannedCostNumber) && !isNaN(totalCostNumber)) {
deviation = plannedCostNumber - totalCostNumber;
} }
setRemToComplete(deviation.toString()); setRemToComplete(deviation.toString());
}, [plannedCost, totalCost]); }, [plannedCost, totalCost]);
@ -199,6 +208,7 @@ const DashboardProject = (props) => {
const response = await axios.get(url, HEADER); const response = await axios.get(url, HEADER);
setManPower(response.data.totalRecord); setManPower(response.data.totalRecord);
} catch (error) { } catch (error) {
console.error("Failed to get manpower:", error);
} }
}; };
@ -215,6 +225,7 @@ const DashboardProject = (props) => {
} }
setIsReadyGantt(true); setIsReadyGantt(true);
} catch (error) { } catch (error) {
console.error("Failed to get gantt data:", error);
setIsReadyGantt(true); setIsReadyGantt(true);
} }
}; };
@ -227,6 +238,7 @@ const DashboardProject = (props) => {
setDataGanttParents(response); setDataGanttParents(response);
setIsReadyGanttParents(true); setIsReadyGanttParents(true);
} catch (error) { } catch (error) {
console.error("Failed to get gantt data:", error);
setIsReadyGanttParents(true); setIsReadyGanttParents(true);
} }
}; };
@ -244,6 +256,7 @@ const DashboardProject = (props) => {
setAssignedHrCount(assignedList.length); setAssignedHrCount(assignedList.length);
setAssignedHr(assignedList); setAssignedHr(assignedList);
} catch (error) { } catch (error) {
console.error("Failed to get assigned HR:", error);
} }
}; };
@ -300,6 +313,7 @@ const DashboardProject = (props) => {
.get(URL, HEADER) .get(URL, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("getProjectDetail", result);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyProjectDetail(true); setIsReadyProjectDetail(true);
@ -314,6 +328,8 @@ const DashboardProject = (props) => {
setIsReadyProjectDetail(true); setIsReadyProjectDetail(true);
return; return;
} else if (result.status == 200 && result.data.data) { } else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
// setComments(result.data.data);
setProjectName(result.data.data.nama ? result.data.data.nama : "-"); setProjectName(result.data.data.nama ? result.data.data.nama : "-");
setProjectManagerName( setProjectManagerName(
result.data.data.projectManager ? result.data.data.projectManager : "-" result.data.data.projectManager ? result.data.data.projectManager : "-"
@ -341,6 +357,7 @@ const DashboardProject = (props) => {
? result.data.data.header?.planned_end ? result.data.data.header?.planned_end
: null : null
); );
setProjectType(result.data.data.type_proyek_id);
setActualStart( setActualStart(
result.data.data.header?.start_date result.data.data.header?.start_date
? result.data.data.header.start_date ? result.data.data.header.start_date
@ -408,6 +425,7 @@ const DashboardProject = (props) => {
let selisihProgress = 0; let selisihProgress = 0;
let planningProgress = 0; let planningProgress = 0;
let actualProgress = 0; let actualProgress = 0;
console.log("test flow ", result.data.data);
let statusHealthBySchedule = "on-schedule"; let statusHealthBySchedule = "on-schedule";
if ( if (
result.data.data.length > 0 && result.data.data.length > 0 &&
@ -431,21 +449,13 @@ const DashboardProject = (props) => {
result.data.data[0].data.budget_control.cost_deviation?.toString() result.data.data[0].data.budget_control.cost_deviation?.toString()
); );
} }
let now = new Date().toISOString().slice(0, 10);
let dates = result.data.data[0].data?.date;
let n = dates.findIndex(
(element) => new Date(now) < new Date(element[0])
);
if (n < 0) {
n = dates.length - 1;
}
if ( if (
result.data.data.length > 0 && result.data.data.length > 0 &&
result.data.data[0].data?.percentagePlan && result.data.data[0].data?.percentagePlan &&
result.data.data[0].data?.percentagePlan.length > 0 result.data.data[0].data?.percentagePlan.length > 0
) { ) {
planningProgress = result.data.data[0].data?.percentagePlan[n]; planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length - 1];
setPlanningProgress(planningProgress); setPlanningProgress(Math.ceil(planningProgress));
} }
if ( if (
result.data.data.length > 0 && result.data.data.length > 0 &&
@ -484,6 +494,7 @@ const DashboardProject = (props) => {
.post(URL, payload, HEADER) .post(URL, payload, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("getOverdueActivities", result);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyOverdueActivities(true); setIsReadyOverdueActivities(true);
@ -520,6 +531,7 @@ const DashboardProject = (props) => {
.post(URL, payload, HEADER) .post(URL, payload, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("getIntegrationInvoice", result);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyIntegrationInvoice(true); setIsReadyIntegrationInvoice(true);
@ -566,6 +578,7 @@ const DashboardProject = (props) => {
.post(URL, payload, HEADER) .post(URL, payload, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("getReportDistribution", result);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyReportDistribution(true); setIsReadyReportDistribution(true);
@ -618,6 +631,7 @@ const DashboardProject = (props) => {
.post(URL, payload, HEADER) .post(URL, payload, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("getComments", result);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyComments(true); setIsReadyComments(true);
@ -638,6 +652,7 @@ const DashboardProject = (props) => {
}; };
const handleSendComment = async () => { const handleSendComment = async () => {
// console.log('handleSendComment', comment);
setIsSendingComment(true); setIsSendingComment(true);
if (comment === "") { if (comment === "") {
NotificationManager.error( NotificationManager.error(
@ -684,6 +699,10 @@ const DashboardProject = (props) => {
setIsSendingComment(false); setIsSendingComment(false);
}; };
const handleBack = async () => {
window.parent.location.reload();
};
const initMap = () => { const initMap = () => {
let mymap = L.map("map-area", { let mymap = L.map("map-area", {
center: center, center: center,
@ -731,6 +750,12 @@ const DashboardProject = (props) => {
} }
}; };
const handleGetOverdue = (event) => {
if (event.data.type === 'dataOverdueUpdate') {
setDataOverdue(event.data.dataOverdue);
}
}
const RenderGantt = useMemo( const RenderGantt = useMemo(
() => ( () => (
<iframe <iframe
@ -804,53 +829,82 @@ const DashboardProject = (props) => {
}, [comment, comments, isSendingComment, isReadyComments]); }, [comment, comments, isSendingComment, isReadyComments]);
const RenderBehindTasks = useMemo(() => { const RenderBehindTasks = useMemo(() => {
return ( return SCURVE ?
<div> (
{!isReadyOverdueActivities && <ListLoader />} <div>
{isReadyOverdueActivities && {!isReadyOverdueActivities && <ListLoader />}
overdueActivities && {isReadyOverdueActivities &&
overdueActivities.length < 1 && ( overdueActivities &&
<div overdueActivities.length < 1 && (
style={{ <div
flex: 1, style={{
textAlign: "center", flex: 1,
color: "#E80053", textAlign: "center",
marginTop: 50, color: "#E80053",
marginBottom: 50, marginTop: 50,
}} marginBottom: 50,
> }}
No overdue activity found. >
</div> No overdue activity found.
)} </div>
{isReadyOverdueActivities && )}
overdueActivities && {isReadyOverdueActivities &&
overdueActivities.length > 0 && overdueActivities &&
overdueActivities.map((item, idx) => { overdueActivities.length > 0 &&
let end_date; overdueActivities.map((item, idx) => {
let planned_end; let end_date;
let diffDays = 0; let planned_end;
let message = ""; let diffDays = 0;
if (item.end_date && item.end_date !== null) { let message = "";
end_date = moment(item.end_date); if (item.end_date && item.end_date !== null) {
planned_end = moment(item.planned_end); end_date = moment(item.end_date);
diffDays = end_date.diff(planned_end, "days"); planned_end = moment(item.planned_end);
if (isNaN(diffDays)) { diffDays = end_date.diff(planned_end, "days");
return null; if (isNaN(diffDays)) {
} else {
if (diffDays > 0) {
message = `Overdue by ${diffDays + 1} days`;
} else {
return null; return null;
} else {
if (diffDays > 0) {
message = `Overdue by ${diffDays + 1} days`;
} else {
return null;
}
} }
} }
} return (
return ( <BehindTaskItem key={idx} name={item.name + ' - ' + item.name_version} message={message} scurve={SCURVE} proyek_id={PROJECT_ID} gantt_id={item.version_gantt_id} />
<BehindTaskItem key={idx} name={item.name} message={message} /> );
); })}
})} </div>
</div> )
); :
}, [overdueActivities, isReadyOverdueActivities]); (
<div>
{!dataOverdue && <ListLoader />}
{dataOverdue &&
dataOverdue.length < 1 && (
<div
style={{
flex: 1,
textAlign: "center",
color: "#E80053",
marginTop: 50,
marginBottom: 50,
}}
>
No overdue activity found.
</div>
)}
{dataOverdue &&
dataOverdue.length > 0 &&
dataOverdue.map((item, idx) => {
let message = `Overdue by ${item.overdue} days`;
return (
<BehindTaskItem key={idx} name={item.text} message={message} />
);
})}
</div>
);
}, [dataOverdue, isReadyOverdueActivities, overdueActivities]);
return ( return (
<div style={{ marginLeft: -25, marginRight: -25 }}> <div style={{ marginLeft: -25, marginRight: -25 }}>
@ -858,7 +912,23 @@ const DashboardProject = (props) => {
<Row> <Row>
<Col span={18}> <Col span={18}>
<Row> <Row>
<Col span={8}> {
!SCURVE ?
<Col span={2}>
<Button
style={{
height: "100%",
width: "100%",
fontSize: "18px"
}}
onClick={handleBack}
type="primary"
>
<Icon icon={arrowLeft} style={{ fontSize: "20px" }} /> Back
</Button>
</Col> : null
}
<Col span={!SCURVE ? 6 : 8}>
<div <div
style={{ style={{
border: "solid", border: "solid",
@ -1026,7 +1096,7 @@ const DashboardProject = (props) => {
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={SCURVE ? 8 : 10}> <Col span={SCURVE ? 8 : projectType != 9 ? 8 : 10}>
<div <div
style={{ style={{
border: "solid", border: "solid",
@ -1151,7 +1221,7 @@ const DashboardProject = (props) => {
</div> </div>
</div> </div>
</Col> </Col>
{SCURVE ? ( {SCURVE || projectType != 9 ? (
<Col span={16}> <Col span={16}>
<div <div
style={{ style={{
@ -1290,15 +1360,17 @@ const DashboardProject = (props) => {
BCWP (cost vs perform) BCWP (cost vs perform)
</Col> </Col>
<Col span={5} style={{ fontSize: 11 }}> <Col span={5} style={{ fontSize: 11 }}>
{isReadySCurve ? ( {isReadySCurve ?
bcwp ? ( (
renderFormatRupiah(bcwp, "Rp.") planningProgress > 100 || actualProgress > 100
) : ( ?
"-" renderFormatRupiah(((parseInt(plannedCost) * parseFloat((actualProgress / planningProgress) * 100).toFixed(0)) / 100).toString(), "Rp.")
:
renderFormatRupiah(((parseInt(plannedCost) * parseInt(actualProgress)) / 100).toString(), "Rp.")
) )
) : ( : (
<SingleTextLoader width={100} height={10} /> "-"
)} )}
</Col> </Col>
<Col <Col
span={7} span={7}

Write Preview
Loading…
Cancel
Save