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

add table expenditure and link to dashboard-project

pull/2/head
ardhi 2 years ago
parent
4c3deeb1e0
commit
b1ec521b88
2 changed files with 70 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/BottomModal/BottomModal.js
  2. 102
      src/views/Dashboard/DashboardBOD.js

14
src/components/BottomModal/BottomModal.js
Unescape View File

@ -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>

102
src/views/Dashboard/DashboardBOD.js
Unescape View File

@ -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={[
{
"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 = () => {
<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={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>Detailed View</div>
<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>
:
<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

Write Preview
Loading…
Cancel
Save