diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js index ce3f888..388ca3e 100644 --- a/src/views/Dashboard/DashboardProject.js +++ b/src/views/Dashboard/DashboardProject.js @@ -10,6 +10,7 @@ import { renderFormatRupiah } from '../../const/CustomFunc'; import { BASE_OSPRO } from '../../const/ApiConst'; import { SendOutlined } from '@ant-design/icons'; import { NotificationContainer, NotificationManager } from 'react-notifications'; +import ContentLoader from 'react-content-loader'; const { TextArea } = Input; const styles = { @@ -35,42 +36,51 @@ const DashboardProject = () => { } const { PROJECT_ID, GANTT_ID } = useParams(); // const URL_GANTT = `http://103.73.125.81:8446/index.html?base_url=http://103.73.125.81:8444/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; - const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; - // const URL_GANTT = ''; + // const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`; + const URL_GANTT = ''; const mapRef = useRef() - const [projectName, setProjectName] = useState("Project Tower ABC"); - const [projectManagerName, setProjectManagerName] = useState("John Doe"); - const [customerName, setCustomerName] = useState("Jaya Gedung Group"); - const [plannedStart, setPlannedStart] = useState("2019-03-04") - const [plannedFinish, setPlannedFinish] = useState("2020-05-28") - const [actualStart, setActualStart] = useState("2019-03-04") - const [actualFinish, setActualFinish] = useState("2020-05-28") - const [estimatedFinish, setEstimatedFinish] = useState("2020-05-28") + const [projectName, setProjectName] = useState(""); + const [projectManagerName, setProjectManagerName] = useState(""); + const [customerName, setCustomerName] = useState(""); + const [plannedStart, setPlannedStart] = useState(null) + const [plannedFinish, setPlannedFinish] = useState(null) + const [actualStart, setActualStart] = useState(null) + const [actualFinish, setActualFinish] = useState(null) + const [estimatedFinish, setEstimatedFinish] = useState(null) const [mymap, setMymap] = useState(null); const [activeTabIdx, setActiveTabIdx] = useState(0); const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0); const [planningProgress, setPlanningProgress] = useState(79); const [actualProgress, setActualProgress] = useState(43); - const [currentBudget, setCurrentBudget] = useState("168011727772"); - const [addCostToComplete, setAddCostToComplete] = useState("0"); - const [actualToDate, setactualToDate] = useState("43256751714"); - const [estAtCompletion, setEstAtCompletion] = useState("168011727772"); - const [bcwp, setBcwp] = useState("26658794618"); - const [costDeviation, setCostDeviation] = useState("0"); - const [remToComplete, setRemToComplete] = useState("124754976058"); - const [totalInvoice, setTotalInvoice] = useState("10000000000"); - const [cashIn, setCashIn] = useState("8000000000"); - const [outstandingBalance, setOutstandingBalance] = useState("2000000000"); + const [currentBudget, setCurrentBudget] = useState(null) + const [addCostToComplete, setAddCostToComplete] = useState(null) + const [actualToDate, setActualToDate] = useState(null) + const [estAtCompletion, setEstAtCompletion] = useState(null) + const [bcwp, setBcwp] = useState(null) + const [costDeviation, setCostDeviation] = useState(null) + const [remToComplete, setRemToComplete] = useState(null) + const [totalInvoice, setTotalInvoice] = useState(null) + const [cashIn, setCashIn] = useState(null) + const [outstandingBalance, setOutstandingBalance] = useState(null) const [comment, setComment] = useState(''); const [comments, setComments] = useState([]); const [isReadyComments, setIsReadyComments] = useState(false); const [isSendingComment, setIsSendingComment] = useState(false); - const [behindTasks, setBehindTasks] = useState([]); + + const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false); + const [isReadySCurve, setIsReadySCurve] = useState(false); + const [isReadyOverdueActivities, setIsReadyOverdueActivities] = useState(false); + const [overdueActivities, setOverdueActivities] = useState([]); + + const [healthBySchedule, setHealthBySchedule] = useState('-') + const [healthByBudget, setHealthByBudget] = useState('-') useEffect(() => { // console.log('URL_GANTT', URL_GANTT); + getProjectDetail(); + getSCurve(); + getOverdueActivities(); getComments(); - getBehindTasks(); return () => { console.log('unmount RenderMap'); } @@ -82,6 +92,102 @@ const DashboardProject = () => { } }, [activeTabIdx]); + 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) + console.log('getProjectDetail', result); + if (!result) { + NotificationManager.error(`Could not connect to internet.`, "Failed"); + setIsReadyProjectDetail(true); + return; + } + + if (result.status !== 200) { + NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed"); + setIsReadyProjectDetail(true); + return; + } + 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 : '-'); + setProjectManagerName(result.data.data.projectManager ? result.data.data.projectManager : '-'); + setCustomerName(result.data.data.company ? result.data.data.company : '-') + setPlannedStart(result.data.data?.mulai_proyek ? result.data.data.mulai_proyek : null) + setPlannedFinish(result.data.data?.akhir_proyek ? result.data.data.akhir_proyek : 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) + setIsReadyProjectDetail(true); + } + } + + const getSCurve = async () => { + setIsReadySCurve(false); + const URL = `${BASE_OSPRO}/api/project/get-s-curve`; + const payload = { + "project_id": PROJECT_ID.toString(), + "period": "week", + "end_date": moment(new Date()).format('YYYY-MM-DD') + } + const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) + console.log('getSCurve', result); + if (!result) { + NotificationManager.error(`Could not connect to internet.`, "Failed"); + setIsReadySCurve(true); + return; + } + + if (result.status !== 200) { + NotificationManager.error(`Get S Curve failed, ${result.data.message}`, "Failed"); + setIsReadySCurve(true); + return; + } + else if (result.status == 200 && result.data.data) { + console.log(result.data.data); + if (result.data.data.length > 0 && result.data.data[0].data?.budget_control) { + setCurrentBudget(result.data.data[0].data.budget_control.current_budget?.toString()) + setActualToDate(result.data.data[0].data.budget_control.acwp?.toString()) + setBcwp(result.data.data[0].data.budget_control.current_budget?.toString()) + setRemToComplete(result.data.data[0].data.budget_control.rem_to_complete?.toString()) + setAddCostToComplete(result.data.data[0].data.budget_control.add_cost_to_complete?.toString()) + setEstAtCompletion(result.data.data[0].data.budget_control.estimated_at_completion?.toString()) + setCostDeviation(result.data.data[0].data.budget_control.cost_deviation?.toString()) + } + setIsReadySCurve(true); + } + } + + const getOverdueActivities = async () => { + setIsReadyOverdueActivities(false); + const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`; + const payload = { + "id": PROJECT_ID.toString(), + "till_date": moment(new Date()).format('YYYY-MM-DD') + } + const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) + console.log('getOverdueActivities', result); + if (!result) { + NotificationManager.error(`Could not connect to internet.`, "Failed"); + setIsReadyOverdueActivities(true); + return; + } + + if (result.status !== 200) { + NotificationManager.error(`Get Overdue Activities failed, ${result.data.message}`, "Failed"); + setIsReadyOverdueActivities(true); + return; + } + else if (result.status == 200 && result.data.data) { + console.log(result.data.data); + if (result.data.data.overdueActivities) { + setOverdueActivities(result.data.data.overdueActivities) + } + setHealthByBudget(result.data.data.budget_health) + setIsReadyOverdueActivities(true); + } + } + const getComments = async () => { setIsReadyComments(false); const URL = `${BASE_OSPRO}/api/project-comment/search`; @@ -120,7 +226,7 @@ const DashboardProject = () => { } if (result.status !== 200) { - NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed"); + NotificationManager.error(`Get comments failed, ${result.data.message}`, "Failed"); setIsReadyComments(true); return; } @@ -132,7 +238,7 @@ const DashboardProject = () => { } const handleSendComment = async () => { - console.log('handleSendComment', comment); + // console.log('handleSendComment', comment); setIsSendingComment(true); if (comment === '') { NotificationManager.error("Please leave a comment before you send it.", "Failed"); @@ -171,25 +277,7 @@ const DashboardProject = () => { setIsSendingComment(false); } - const getBehindTasks = () => { - setBehindTasks([ - { - id: 1, - name: "Tom", - message: "Overdue by 5 days", - division: "IT" - }, - { - id: 1, - name: "Jerry", - message: "Overdue by 3 days", - division: "Finance" - } - ]) - } - const initMap = () => { - let mymap = L.map('map-area', { center: center, zoom: 13 @@ -214,6 +302,34 @@ const DashboardProject = () => { > ), [activeTabIdx]) + const SingleTextLoader = ({width, height}) => ( + + + + ) + + const ListLoader = () => ( + //
Loading overdue activities...
+
+ +
+ +
+ +
+ +
+ +
+ ) + const Comment = ({name, comment, created_at}) => (
{name}
@@ -222,11 +338,11 @@ const DashboardProject = () => {
) - const BehindTaskItem = ({name, message, division}) => ( + const BehindTaskItem = ({name, message}) => (
{name}
-
{message}
-
{division}
+
{message}
+ {/*
{division}
*/}
) @@ -240,7 +356,7 @@ const DashboardProject = () => {
- {!isReadyComments &&
Loading comments...
} + {!isReadyComments && } {isReadyComments && comments && comments.length < 1 &&
No comments found.
} {comments && comments.length > 0 && comments.map((item, idx) => @@ -253,13 +369,24 @@ const DashboardProject = () => { const RenderBehindTasks = useMemo(() => { return (
- {behindTasks && behindTasks.length < 1 &&
No behind task found.
} - {behindTasks && behindTasks.length > 0 && behindTasks.map((item, idx) => - - )} + {!isReadyOverdueActivities && } + {isReadyOverdueActivities && overdueActivities && overdueActivities.length < 1 &&
No overdue activitiy found.
} + {isReadyOverdueActivities && overdueActivities && overdueActivities.length > 0 && overdueActivities.map((item, idx) => { + let end_date = null; + let today = null; + let diffDays = 0; + let message = ''; + if (item.end_date && item.end_date !== null) { + end_date = moment(item.end_date); + today = moment(new Date()); + diffDays = today.diff(end_date, 'days'); + message = `Overdue by ${diffDays} days`; + } + return + })}
) - }, [behindTasks]) + }, [overdueActivities, isReadyOverdueActivities]) return (
@@ -272,7 +399,7 @@ const DashboardProject = () => {
Project
-
{projectName}
+
{isReadyProjectDetail ? projectName : }
@@ -285,7 +412,7 @@ const DashboardProject = () => {
Project Manager
-
{projectManagerName}
+
{isReadyProjectDetail ? projectManagerName : }
@@ -298,7 +425,7 @@ const DashboardProject = () => {
Customer
-
{customerName}
+
{isReadyProjectDetail ? customerName : }
@@ -317,19 +444,39 @@ const DashboardProject = () => {
Planned Start - {plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'} + + {isReadyProjectDetail ? + plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-' + : + } + Acutal Start - {plannedStart ? moment(actualStart).format('D MMMM YYYY') : '-'} + + {isReadyProjectDetail ? + actualStart ? moment(actualStart).format('D MMMM YYYY') : '-' + : + } + Planned Finish - {plannedStart ? moment(plannedFinish).format('D MMMM YYYY') : '-'} + + {isReadyProjectDetail ? + plannedFinish ? moment(plannedFinish).format('D MMMM YYYY') : '-' + : + } + Estimated Finish - {plannedStart ? moment(estimatedFinish).format('D MMMM YYYY') : '-'} + + {isReadyProjectDetail ? + estimatedFinish ? moment(estimatedFinish).format('D MMMM YYYY') : '-' + : + } +
@@ -344,25 +491,60 @@ const DashboardProject = () => {
Current Budget - {currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-' } + + {isReadySCurve ? + currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-' + : + } + Add Cost to Complete - {addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-' } + + {isReadySCurve ? + addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-' + : + } + Actual to Date - {actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-' } + + {isReadySCurve ? + actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-' + : + } + Est. at Completion - {estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-' } + + {isReadySCurve ? + estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-' + : + } + BCWP (cost vs perform) - {bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-' } + + {isReadySCurve ? + bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-' + : + } + Cost Deviation - {costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-' } + + {isReadySCurve ? + costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-' + : + } + Rem. to Complete - {remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-' } + + {isReadySCurve ? + remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-' + : + } +
@@ -408,17 +590,17 @@ const DashboardProject = () => {
-
Health By Schedule
-
-
On Budget
+
Health By Budget
+
+
{healthByBudget}
Health By Schedule
-
-
Behind Schedule
+
+
{healthBySchedule}