add table expenditure and link to dashboard-project

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(<td><a href={URL}>{item[key]}</a></td>)
+            }
+            else {
                 row.push(<td>{item[key]}</td>)
-            // }
+            }
         })
         return row;
     }
@@ -85,7 +89,7 @@ const BottomModal = ({title, tableHeader, tableData, closeModal}) => {
                 No Data Available
             </div>
         )
-    }, [tableData])
+    }, [tableData, isReady])
 
     return (
         <Resizable
@@ -162,7 +166,7 @@ const BottomModal = ({title, tableHeader, tableData, closeModal}) => {
                 </Row>
                 <Card style={{ margin: 10 }}>
                     <CardBody style={{ margin: 0, padding: 0, borderRadius: 5, backgroundColor: '#EEEEEE', overflowY: 'auto', height: resizableHeight === 300 ? 240 : 540 }}>
-                        {RenderTable}
+                        {isReady ? RenderTable : <div style={{flex: 1, textAlign: 'center', marginTop: 50}}>Loading data...</div>}
                     </CardBody>
                 </Card>
             </div>

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 (
 				<BottomModal
+					isReady={READY_TABLE_DETAIL_EXPENDITURE}
 					title="Detail Project Expenditure"
 					tableHeader={[
 						{ title: "Project Name", key: "project_name" },
@@ -286,44 +341,7 @@ const DashboardBOD = () => {
 						{ title: "Outstanding Balance", key: "outstanding_balance" },
 						{ title: "Progress", key: "progress" },
 					]}
-					tableData={[
+					tableData={DATA_DETAIL_EXPENDITURE}
-						{
-							"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 %"
-						}
-					]}
 					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 = () => {
 										<div style={{ color: '#888888', fontSize: 12 }}>Total Project Expenditure from on-going project.</div>
 									</div>
 									{PROJECT_EXPENDITURE ?
-										<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={() => setOpenDetailedView(!openDetailedView)}>
+										<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={handleGetDetailExpenditure}>
-											<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>Detailed View</div>
+											<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>
+												Detailed View
+											</div>
 										</div>
 										:
 										<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>