Browse Source

Fix dashboard customer

pull/2/head
Wahyu Ramadhan 1 year ago
parent
commit
139d6945f3
  1. 1
      src/routes.js
  2. 51
      src/views/Dashboard/DashboardCustomer.js
  3. 2
      src/views/SimproV2/CreatedProyek/index.js

1
src/routes.js

@ -54,6 +54,7 @@ const routes = [
// { path: '/dashboard', name: 'Dashboard', component: Dashboard}, // { path: '/dashboard', name: 'Dashboard', component: Dashboard},
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD }, { 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', exact: true, name: 'Dashboard Project', component: DashboardProject },
{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:SCURVE', exact: true, name: 'Dashboard Project', component: DashboardProject }, { path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:SCURVE', exact: true, name: 'Dashboard Project', component: DashboardProject },
{ path: '/projects', exact: true, name: 'Projects', component: CreatedProyek }, { path: '/projects', exact: true, name: 'Projects', component: CreatedProyek },

51
src/views/Dashboard/DashboardCustomer.js

@ -33,7 +33,7 @@ const DashboardCustomer = () => {
Authorization: `Bearer ${token}` Authorization: `Bearer ${token}`
} }
} }
const { PROJECT_ID, GANTT_ID } = useParams(); 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 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 mapRef = useRef()
const [projectName, setProjectName] = useState(""); const [projectName, setProjectName] = useState("");
@ -61,6 +61,7 @@ const DashboardCustomer = () => {
const [healthBySchedule, setHealthBySchedule] = useState('-'); const [healthBySchedule, setHealthBySchedule] = useState('-');
const [healthByBudget, setHealthByBudget] = useState('-'); const [healthByBudget, setHealthByBudget] = useState('-');
const [reportDistribution, setReportDistribution] = useState([]); const [reportDistribution, setReportDistribution] = useState([]);
const [calculationStatus, setCalculationStatus] = useState(false);
useEffect(() => { useEffect(() => {
getProjectDetail(); getProjectDetail();
@ -79,6 +80,25 @@ const DashboardCustomer = () => {
} }
}, [activeTabIdx]); }, [activeTabIdx]);
useEffect(() => {
// Add event listener for receiving messages from the iframe
window.addEventListener('message', handleIframeMessage);
// Clean up the event listener on component unmount
return () => {
window.removeEventListener('message', handleIframeMessage);
};
}, []);
const handleIframeMessage = (event) => {
if (event.data && event.data.action === 'getUrl') {
const childUrl = window.location.href;
// Send the URL back to the iframe
event.source.postMessage({ action: 'sendUrl', url: childUrl }, event.origin);
}
};
const getProjectDetail = async () => { const getProjectDetail = async () => {
setIsReadyProjectDetail(false); setIsReadyProjectDetail(false);
const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`; const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
@ -106,12 +126,13 @@ const DashboardCustomer = () => {
setActualStart(result.data.data.header?.start_date ? result.data.data.header.start_date : null) setActualStart(result.data.data.header?.start_date ? result.data.data.header.start_date : null)
setEstimatedFinish(result.data.data.header?.end_date ? result.data.data.header.end_date : null) setEstimatedFinish(result.data.data.header?.end_date ? result.data.data.header.end_date : null)
setIsReadyProjectDetail(true); setIsReadyProjectDetail(true);
setCalculationStatus(result.data.data.calculation_status ? result.data.data.calculation_status : false)
} }
} }
const getSCurve = async () => { const getSCurve = async () => {
setIsReadySCurve(false); setIsReadySCurve(false);
const URL = `${BASE_OSPRO}/api/project/get-s-curve`; URL = `${BASE_OSPRO}/api/project/calculate-s-curve`;
const payload = { const payload = {
"project_id": PROJECT_ID.toString(), "project_id": PROJECT_ID.toString(),
"period": "week", "period": "week",
@ -139,6 +160,20 @@ const DashboardCustomer = () => {
let planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length-1]; let planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length-1];
setPlanningProgress(planningProgress); setPlanningProgress(planningProgress);
} }
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 (result.data.data.length > 0 && result.data.data[0].data?.percentagePlan && result.data.data[0].data?.percentagePlan.length > 0) {
if(SCURVE && SCURVE == "1"){
planningProgress = result.data.data[0].data?.percentagePlan[result.data.data[0].data?.percentagePlan.length - 1];
} else {
planningProgress = result.data.data[0].data?.percentagePlan[n];
}
setPlanningProgress(planningProgress);
}
if (result.data.data.length > 0 && result.data.data[0].data?.percentageReal && result.data.data[0].data?.percentageReal.length > 0) { if (result.data.data.length > 0 && result.data.data[0].data?.percentageReal && result.data.data[0].data?.percentageReal.length > 0) {
let actualProgress = result.data.data[0].data?.percentageReal[result.data.data[0].data?.percentageReal.length-1]; let actualProgress = result.data.data[0].data?.percentageReal[result.data.data[0].data?.percentageReal.length-1];
setActualProgress(actualProgress); setActualProgress(actualProgress);
@ -396,7 +431,13 @@ const DashboardCustomer = () => {
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}> <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}> <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
<div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project</div> <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project</div>
<div style={{fontSize: 14}}>{isReadyProjectDetail ? projectName : <SingleTextLoader />}</div> <div style={{fontSize: 14}}>{isReadyProjectDetail
? projectName
? calculationStatus
? projectName + " - S-Curve Ready"
: projectName + " - S-Curve Loading"
: null
: <SingleTextLoader />}</div>
</div> </div>
<div> <div>
<i className="fa fa-check-square" style={{fontSize: 28}}></i> <i className="fa fa-check-square" style={{fontSize: 28}}></i>
@ -492,13 +533,13 @@ const DashboardCustomer = () => {
<div style={{backgroundColor: '#222222', padding: 10, marginBottom: 5}}> <div style={{backgroundColor: '#222222', padding: 10, marginBottom: 5}}>
<div style={{color: '#FFFFFF', textAlign: 'center', marginBottom: 10, fontWeight: 'bold'}}>Progress</div> <div style={{color: '#FFFFFF', textAlign: 'center', marginBottom: 10, fontWeight: 'bold'}}>Progress</div>
{isReadySCurve ? {isReadySCurve ?
<ProgressPlanningBar progress={planningProgress} /> <ProgressPlanningBar progress={planningProgress > 100 ? 100 : planningProgress} />
: :
<SingleTextLoader width={"100%"} height={30} /> <SingleTextLoader width={"100%"} height={30} />
} }
<div style={{marginTop: 10, marginBottom: 10}}></div> <div style={{marginTop: 10, marginBottom: 10}}></div>
{isReadySCurve ? {isReadySCurve ?
<ProgressActualBar progress={actualProgress} /> <ProgressActualBar progress={planningProgress > 100 ? parseFloat(actualProgress / planningProgress * 100).toFixed(2) : actualProgress} />
: :
<SingleTextLoader width={"100%"} height={30} /> <SingleTextLoader width={"100%"} height={30} />
} }

2
src/views/SimproV2/CreatedProyek/index.js

@ -242,7 +242,7 @@ const CreatedProyek = ({ params, ...props }) => {
return; return;
} }
else if (result.status == 200 && result.data.data) { else if (result.status == 200 && result.data.data) {
history.push(`dashboard-customer/${text.id}/${result.data.gantt.last_gantt_id}`); history.push(`dashboard-customer/${text.id}/${result.data.gantt.last_gantt_id}/1`);
} }
} }

Loading…
Cancel
Save