From b1ec521b888d0dda6cb14405cd0f0eaa12656d8f Mon Sep 17 00:00:00 2001 From: ardhi Date: Tue, 18 Oct 2022 05:13:08 +0700 Subject: [PATCH] add table expenditure and link to dashboard-project --- src/components/BottomModal/BottomModal.js | 14 +-- src/views/Dashboard/DashboardBOD.js | 102 +++++++++++++--------- 2 files changed, 70 insertions(+), 46 deletions(-) diff --git a/src/components/BottomModal/BottomModal.js b/src/components/BottomModal/BottomModal.js index 96dd39c..4531aaa 100644 --- a/src/components/BottomModal/BottomModal.js +++ b/src/components/BottomModal/BottomModal.js @@ -7,7 +7,7 @@ import closeCircleOutline from '@iconify/icons-ion/close-circle-outline'; import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline'; import windowMaximaze from '@iconify/icons-mdi/window-maximize'; -const BottomModal = ({title, tableHeader, tableData, closeModal}) => { +const BottomModal = ({title, tableHeader, tableData, closeModal, isReady}) => { const [tableHeight, setTableHeight] = useState(150) const [resizableWidth, setResizableWidth] = useState("100%") const [resizableHeight, setResizableHeight] = useState(300) @@ -41,9 +41,13 @@ const BottomModal = ({title, tableHeader, tableData, closeModal}) => { let row = []; // looping through its object keys (item is an object) Object.keys(item).map(key => { - // if (key !== 'id') { + if (key === 'project_name') { + let URL = `/#/dashboard-project/${item['id']}/${item['last_gantt_id']}`; + row.push({item[key]}) + } + else { row.push({item[key]}) - // } + } }) return row; } @@ -85,7 +89,7 @@ const BottomModal = ({title, tableHeader, tableData, closeModal}) => { No Data Available ) - }, [tableData]) + }, [tableData, isReady]) return ( { - {RenderTable} + {isReady ? RenderTable :
Loading data...
} diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 2b566b2..08735c7 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -42,6 +42,8 @@ const DashboardBOD = () => { const [PROJECT_SCHEDULE_HEALTH_PER_DIVISION, SET_PROJECT_SCHEDULE_HEALTH_PER_DIVISION] = useState(null); const [PROJECT_BUDGET_HEALTH_PER_DIVISION, SET_PROJECT_BUDGET_HEALTH_PER_DIVISION] = useState(null); + const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false); + const [DATA_DETAIL_EXPENDITURE, SET_DATA_DETAIL_EXPENDITURE] = useState([]); useEffect(() => { getCompanyCashFlow(); // expenditure @@ -246,6 +248,7 @@ const DashboardBOD = () => { } SET_READY_PROJECT_PER_DIVISION(true); } + const getTotalProjectValuePerDivision = async () => { const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division` const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) @@ -269,11 +272,63 @@ const DashboardBOD = () => { SET_READY_PROJECT_VALUE_PER_DIVISION(true); } + const handleGetDetailExpenditure = async () => { + SET_READY_TABLE_DETAIL_EXPENDITURE(false); + if (openDetailedView) { + SET_READY_TABLE_DETAIL_EXPENDITURE(true); + return; + } + setOpenDetailedView(true); + const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + const content = "Get Detail Expenditure"; + + if (!result) { + NotificationManager.error(`${content} Could not connect to internet.`, "Failed"); + SET_READY_TABLE_DETAIL_EXPENDITURE(true); + return; + } + + if (result.status !== 200) { + NotificationManager.error(`${content} ${result.data.message}`, "Failed"); + SET_READY_TABLE_DETAIL_EXPENDITURE(true); + return; + } + + if (result.status == 200 && result.data.data) { + console.log('handleGetDetailExpenditure', result.data.data); + let total_manpowers = result.data.total_manpowers; + if (result.data.data.length > 0) { + let tableData = []; + result.data.data.map((item, idx) => { + let outstanding_balance = item.invoice?.invoiced - item.invoice?.paid; + tableData.push({ + "id": item.id, + "last_gantt_id": item.lastGanttId?.last_gantt_id, + "project_name": item.nama, + "project_manager": item.pm?.name, + "planned_interval": `${item.mulai_proyek ? moment(item.mulai_proyek).format('DD/MM/YYYY') : '-'} - ${item.akhir_proyek ? moment(item.akhir_proyek).format('DD/MM/YYYY') : '-'}`, + "manpower": `${item.manPowers}/${total_manpowers}`, + "project_budget": item.rencana_biaya ? toRupiah(item.rencana_biaya) : '-' , + "invoice": item.invoice?.invoiced ? toRupiah(item.invoice.invoiced) : '-', + "cash_in": item.invoice?.paid ? toRupiah(item.invoice.paid) : '-', + "outstanding_balance": toRupiah(outstanding_balance), + "progress": `${item.scurve?.progress ? item.scurve.progress : 0}%` + }) + }); + console.log('tableData', tableData); + SET_DATA_DETAIL_EXPENDITURE(tableData); + } + } + SET_READY_TABLE_DETAIL_EXPENDITURE(true); + } + const RenderBottomModal = useMemo(() => { if (openDetailedView) { return ( { { title: "Outstanding Balance", key: "outstanding_balance" }, { title: "Progress", key: "progress" }, ]} - tableData={[ - { - "id": 1, - "project_name": "Gedung Tenaga Panel Surya", - "project_manager": "PUTRANTO YUWONO", - "planned_interval": "11/10/2021 - 09/03/2022", - "manpower": "1/9", - "project_budget": "Rp. 84.000.000.000", - "invoice": "Rp.40.000.000.000", - "cash_in": "Rp. 44.000.000.000", - "outstanding_balance": "Rp. 40.000.000.000", - "progress": "50 %" - }, - { - "id": 2, - "project_name": "Pembangunan Gedung Tower", - "project_manager": "PUTRANTO YUWONO", - "planned_interval": "11/10/2021 - 09/03/2022", - "manpower": "1/9", - "project_budget": "Rp. 84.000.000.000", - "invoice": "Rp.40.000.000.000", - "cash_in": "Rp. 44.000.000.000", - "outstanding_balance": "Rp. 40.000.000.000", - "progress": "50 %" - }, - { - "id": 3, - "project_name": "Tower Jaringan Jawa Barat", - "project_manager": "PUTRANTO YUWONO", - "planned_interval": "11/10/2021 - 09/03/2022", - "manpower": "1/9", - "project_budget": "Rp. 84.000.000.000", - "invoice": "Rp.40.000.000.000", - "cash_in": "Rp. 44.000.000.000", - "outstanding_balance": "Rp. 40.000.000.000", - "progress": "50 %" - } - ]} + tableData={DATA_DETAIL_EXPENDITURE} closeModal={() => setOpenDetailedView(false)} /> ) @@ -331,7 +349,7 @@ const DashboardBOD = () => { else { return null; } - }, [openDetailedView]) + }, [openDetailedView, DATA_DETAIL_EXPENDITURE, READY_TABLE_DETAIL_EXPENDITURE]) const FloatingFilter = () => { return ( @@ -357,8 +375,10 @@ const DashboardBOD = () => {
Total Project Expenditure from on-going project.
{PROJECT_EXPENDITURE ? -
setOpenDetailedView(!openDetailedView)}> -
Detailed View
+
+
+ Detailed View +
: