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

update dashboard

pull/1/head
farhantock 10 months ago
parent
283ef7e22c
commit
4f3834f052
1 changed files with 71 additions and 194 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. 179
      src/views/Dashboard/DashboardProject.js

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

@ -30,12 +30,8 @@ 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, useParams } from "react-router-dom"; import { useHistory, useLocation, 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;
const styles = { const styles = {
cardContainer: { cardContainer: {
backgroundColor: "#F8F8F8", backgroundColor: "#F8F8F8",
@ -59,12 +55,10 @@ const styles = {
cardTitle: { color: "#444444", fontSize: 16, fontWeight: "bold" }, cardTitle: { color: "#444444", fontSize: 16, fontWeight: "bold" },
cardSubtitle: { color: "#888888", fontSize: 12 }, cardSubtitle: { color: "#888888", fontSize: 12 },
}; };
const center = { const center = {
lat: -6.2, lat: -6.2,
lng: 106.816666, lng: 106.816666,
}; };
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) {
@ -86,8 +80,8 @@ 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,10 +134,7 @@ 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(() => {
getProjectDetail(); getProjectDetail();
getOverdueActivities(); getOverdueActivities();
@ -152,28 +143,22 @@ const DashboardProject = (props) => {
getGantt(); getGantt();
getGanttParents(); getGanttParents();
return () => { return () => {
console.log("unmount RenderMap");
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
if (isHierarchy != null) { if (isHierarchy != null) {
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]);
useEffect(() => { useEffect(() => {
if (activeTabIdx === 1) { if (activeTabIdx === 1) {
initMap(); initMap();
} }
}, [activeTabIdx]); }, [activeTabIdx]);
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
await Promise.all([ await Promise.all([
@ -184,34 +169,24 @@ const DashboardProject = (props) => {
} }
fetchData(); fetchData();
}, []); }, []);
useEffect(() => { useEffect(() => {
let deviation = 0; let deviation = 0;
// Convert plannedCost and totalCost to numbers if (plannedCost && totalCost) {
const plannedCostNumber = parseFloat(plannedCost); deviation = plannedCost - totalCost;
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]);
const handleRedirect = () => { const handleRedirect = () => {
history.push("/projects/" + GANTT_ID + "/" + PROJECT_ID + "/gantt"); history.push("/projects/" + GANTT_ID + "/" + PROJECT_ID + "/gantt");
}; };
const getManpower = async () => { const getManpower = async () => {
const url = `${BASE_OSPRO}/api/project/manpower/${PROJECT_ID}`; const url = `${BASE_OSPRO}/api/project/manpower/${PROJECT_ID}`;
try { try {
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);
} }
}; };
const getGantt = async () => { const getGantt = async () => {
setIsReadyGantt(false); setIsReadyGantt(false);
const url = `${BASE_OSPRO}/api/version-gantt/edit/${GANTT_ID}`; const url = `${BASE_OSPRO}/api/version-gantt/edit/${GANTT_ID}`;
@ -225,11 +200,9 @@ const DashboardProject = (props) => {
} }
setIsReadyGantt(true); setIsReadyGantt(true);
} catch (error) { } catch (error) {
console.error("Failed to get gantt data:", error);
setIsReadyGantt(true); setIsReadyGantt(true);
} }
}; };
const getGanttParents = async () => { const getGanttParents = async () => {
setIsReadyGanttParents(false); setIsReadyGanttParents(false);
const url = `${BASE_OSPRO}/api/hierarchy-ftths/tree-gantt/${GANTT_ID}`; const url = `${BASE_OSPRO}/api/hierarchy-ftths/tree-gantt/${GANTT_ID}`;
@ -238,11 +211,9 @@ 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);
} }
}; };
const getAssignedHR = async () => { const getAssignedHR = async () => {
const url = `${BASE_OSPRO}/api/project/manpower/assigned/${GANTT_ID}`; const url = `${BASE_OSPRO}/api/project/manpower/assigned/${GANTT_ID}`;
try { try {
@ -256,10 +227,8 @@ 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);
} }
}; };
const getActualHR = async () => { const getActualHR = async () => {
const dateStart = moment().startOf("day").toDate(); const dateStart = moment().startOf("day").toDate();
const dateEnd = moment().endOf("day").toDate(); const dateEnd = moment().endOf("day").toDate();
@ -299,7 +268,6 @@ const DashboardProject = (props) => {
console.error("Failed to get actual HR:", error); console.error("Failed to get actual HR:", error);
} }
}; };
const getProjectDetail = async () => { const getProjectDetail = async () => {
setIsReadyProjectDetail(false); setIsReadyProjectDetail(false);
let URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`; let URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
@ -313,13 +281,11 @@ 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);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get project detail failed, ${result.data.message}`, `Get project detail failed, ${result.data.message}`,
@ -328,8 +294,6 @@ 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 : "-"
@ -357,7 +321,6 @@ 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
@ -377,7 +340,6 @@ const DashboardProject = (props) => {
? result.data.data.calculation_status ? result.data.data.calculation_status
: false : false
); );
if ( if (
result.data.data.kode_sortname && result.data.data.kode_sortname &&
result.data.data.kode_sortname !== "" result.data.data.kode_sortname !== ""
@ -390,14 +352,12 @@ const DashboardProject = (props) => {
} }
} }
}; };
const getSCurve = async () => { const getSCurve = async () => {
setIsReadySCurve(false); setIsReadySCurve(false);
let URL = `${BASE_OSPRO}/api/project/get-s-curve`; let URL = `${BASE_OSPRO}/api/project/get-s-curve`;
if (SCURVE && SCURVE == "1" && isHierarchy) { if (SCURVE && SCURVE == "1" && isHierarchy) {
URL = `${BASE_OSPRO}/api/project/calculate-s-curve`; URL = `${BASE_OSPRO}/api/project/calculate-s-curve`;
} }
const payload = { const payload = {
project_id: PROJECT_ID.toString(), project_id: PROJECT_ID.toString(),
gantt_id: GANTT_ID.toString(), gantt_id: GANTT_ID.toString(),
@ -413,7 +373,6 @@ const DashboardProject = (props) => {
setIsReadySCurve(true); setIsReadySCurve(true);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get S Curve failed, ${result.data.message}`, `Get S Curve failed, ${result.data.message}`,
@ -425,7 +384,6 @@ 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 &&
@ -449,13 +407,21 @@ 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[result.data.data[0].data?.percentagePlan.length - 1]; planningProgress = result.data.data[0].data?.percentagePlan[n];
setPlanningProgress(Math.ceil(planningProgress)); setPlanningProgress(planningProgress);
} }
if ( if (
result.data.data.length > 0 && result.data.data.length > 0 &&
@ -468,19 +434,16 @@ const DashboardProject = (props) => {
]; ];
setActualProgress(actualProgress); setActualProgress(actualProgress);
} }
selisihProgress = planningProgress - actualProgress; selisihProgress = planningProgress - actualProgress;
if (selisihProgress > 0 && selisihProgress <= 5) { if (selisihProgress > 0 && selisihProgress <= 5) {
statusHealthBySchedule = "warning"; statusHealthBySchedule = "warning";
} else if (selisihProgress > 5) { } else if (selisihProgress > 5) {
statusHealthBySchedule = "danger"; statusHealthBySchedule = "danger";
} }
setHealthBySchedule(statusHealthBySchedule); setHealthBySchedule(statusHealthBySchedule);
setIsReadySCurve(true); setIsReadySCurve(true);
} }
}; };
const getOverdueActivities = async () => { const getOverdueActivities = async () => {
setIsReadyOverdueActivities(false); setIsReadyOverdueActivities(false);
const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`; const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
@ -494,13 +457,11 @@ 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);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get Overdue Activities failed, ${result.data.message}`, `Get Overdue Activities failed, ${result.data.message}`,
@ -516,7 +477,6 @@ const DashboardProject = (props) => {
setIsReadyOverdueActivities(true); setIsReadyOverdueActivities(true);
} }
}; };
const getIntegrationInvoice = async (kode_sortname, id, gantt_id = null) => { const getIntegrationInvoice = async (kode_sortname, id, gantt_id = null) => {
setIsReadyIntegrationInvoice(false); setIsReadyIntegrationInvoice(false);
const URL = `${BASE_OSPRO}/api/project/get-integration-invoice`; const URL = `${BASE_OSPRO}/api/project/get-integration-invoice`;
@ -531,13 +491,11 @@ 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);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get integration invoice failed, ${result.data.message}`, `Get integration invoice failed, ${result.data.message}`,
@ -562,7 +520,6 @@ const DashboardProject = (props) => {
setIsReadyIntegrationInvoice(true); setIsReadyIntegrationInvoice(true);
} }
}; };
const getReportDistribution = async () => { const getReportDistribution = async () => {
setIsReadyReportDistribution(false); setIsReadyReportDistribution(false);
const URL = `${BASE_OSPRO}/api/project/get-report-distribution`; const URL = `${BASE_OSPRO}/api/project/get-report-distribution`;
@ -578,13 +535,11 @@ 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);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get report distribution failed, ${result.data.message}`, `Get report distribution failed, ${result.data.message}`,
@ -597,7 +552,6 @@ const DashboardProject = (props) => {
setIsReadyReportDistribution(true); setIsReadyReportDistribution(true);
} }
}; };
const getComments = async () => { const getComments = async () => {
setIsReadyComments(false); setIsReadyComments(false);
const URL = `${BASE_OSPRO}/api/project-comment/search`; const URL = `${BASE_OSPRO}/api/project-comment/search`;
@ -626,18 +580,15 @@ const DashboardProject = (props) => {
orders: { columns: ["created_at"], ascending: false }, orders: { columns: ["created_at"], ascending: false },
paging: { start: 0, length: -1 }, paging: { start: 0, length: -1 },
}; };
const result = await axios const result = await axios
.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);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Get comments failed, ${result.data.message}`, `Get comments failed, ${result.data.message}`,
@ -650,9 +601,7 @@ const DashboardProject = (props) => {
setIsReadyComments(true); setIsReadyComments(true);
} }
}; };
const handleSendComment = async () => { const handleSendComment = async () => {
// console.log('handleSendComment', comment);
setIsSendingComment(true); setIsSendingComment(true);
if (comment === "") { if (comment === "") {
NotificationManager.error( NotificationManager.error(
@ -673,13 +622,11 @@ 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);
if (!result) { if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed"); NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsSendingComment(false); setIsSendingComment(false);
return; return;
} }
if (result.status !== 200) { if (result.status !== 200) {
NotificationManager.error( NotificationManager.error(
`Post comment failed, ${result.data.message}`, `Post comment failed, ${result.data.message}`,
@ -693,29 +640,21 @@ const DashboardProject = (props) => {
getComments(); getComments();
} }
}; };
const resetInputComment = () => { const resetInputComment = () => {
setComment(""); setComment("");
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,
zoom: 13, zoom: 13,
}); });
setMymap(mymap); setMymap(mymap);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap); }).addTo(mymap);
}; };
useEffect(() => { useEffect(() => {
if (mymap) { if (mymap) {
if (reportDistribution.length > 0) { if (reportDistribution.length > 0) {
@ -727,21 +666,17 @@ const DashboardProject = (props) => {
} }
} }
}, [mymap, reportDistribution]); }, [mymap, reportDistribution]);
useEffect(() => { useEffect(() => {
// Add event listener for receiving messages from the iframe // Add event listener for receiving messages from the iframe
window.addEventListener("message", handleIframeMessage); window.addEventListener("message", handleIframeMessage);
// Clean up the event listener on component unmount // Clean up the event listener on component unmount
return () => { return () => {
window.removeEventListener("message", handleIframeMessage); window.removeEventListener("message", handleIframeMessage);
}; };
}, []); }, []);
const handleIframeMessage = (event) => { const handleIframeMessage = (event) => {
if (event.data && event.data.action === "getUrl") { if (event.data && event.data.action === "getUrl") {
const childUrl = window.location.href; const childUrl = window.location.href;
// Send the URL back to the iframe // Send the URL back to the iframe
event.source.postMessage( event.source.postMessage(
{ action: "sendUrl", url: childUrl, isHierarchy: isHierarchy }, { action: "sendUrl", url: childUrl, isHierarchy: isHierarchy },
@ -749,13 +684,6 @@ const DashboardProject = (props) => {
); );
} }
}; };
const handleGetOverdue = (event) => {
if (event.data.type === 'dataOverdueUpdate') {
setDataOverdue(event.data.dataOverdue);
}
}
const RenderGantt = useMemo( const RenderGantt = useMemo(
() => ( () => (
<iframe <iframe
@ -772,7 +700,6 @@ const DashboardProject = (props) => {
), ),
[activeTabIdx] [activeTabIdx]
); );
const RenderComments = useMemo(() => { const RenderComments = useMemo(() => {
return ( return (
<> <>
@ -827,10 +754,8 @@ const DashboardProject = (props) => {
</> </>
); );
}, [comment, comments, isSendingComment, isReadyComments]); }, [comment, comments, isSendingComment, isReadyComments]);
const RenderBehindTasks = useMemo(() => { const RenderBehindTasks = useMemo(() => {
return SCURVE ? return (
(
<div> <div>
{!isReadyOverdueActivities && <ListLoader />} {!isReadyOverdueActivities && <ListLoader />}
{isReadyOverdueActivities && {isReadyOverdueActivities &&
@ -871,64 +796,19 @@ const DashboardProject = (props) => {
} }
} }
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>
{!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> </div>
); );
}, [dataOverdue, isReadyOverdueActivities, overdueActivities]); }, [overdueActivities, isReadyOverdueActivities]);
return ( return (
<div style={{ marginLeft: -25, marginRight: -25 }}> <div style={{ marginLeft: -25, marginRight: -25 }}>
<NotificationContainer /> <NotificationContainer />
<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",
@ -1096,7 +976,7 @@ const DashboardProject = (props) => {
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={SCURVE ? 8 : projectType != 9 ? 8 : 10}> <Col span={SCURVE ? 8 : 10}>
<div <div
style={{ style={{
border: "solid", border: "solid",
@ -1221,7 +1101,7 @@ const DashboardProject = (props) => {
</div> </div>
</div> </div>
</Col> </Col>
{SCURVE || projectType != 9 ? ( {SCURVE ? (
<Col span={16}> <Col span={16}>
<div <div
style={{ style={{
@ -1360,16 +1240,14 @@ 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 ? (
planningProgress > 100 || actualProgress > 100 renderFormatRupiah(bcwp, "Rp.")
? ) : (
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
@ -1778,5 +1656,4 @@ const DashboardProject = (props) => {
</div> </div>
); );
}; };
export default DashboardProject; export default DashboardProject;
Write Preview
Loading…
Cancel
Save