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

update filter by year

pull/1/head
farhantock 9 months ago
parent
4e32763360
commit
bc22c05179
1 changed files with 80 additions and 47 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. 127
      src/views/Dashboard/DashboardBOD.js

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

@ -13,7 +13,7 @@ import toRupiah from '@develoka/angka-rupiah-js';
import Icon from '@iconify/react';
import { HealthByBudget, HealthBySchedule } from './Components';
import { Link } from 'react-router-dom';
import { Card, CardBody, CardHeader, Input } from "reactstrap";
const DashboardBOD = (props) => {
let role_id = '', user_id = '', isLogin = '', token = '', company_id = 0, all_project = '';
if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
@ -40,7 +40,6 @@ const DashboardBOD = (props) => {
}
}
const [openDetailedView, setOpenDetailedView] = useState(false)
const [filterYear, setFilterYear] = useState(moment().format('YYYY'));
const [healthPerDivisionMode, setHealthPerDivisionMode] = useState('schedule'); // schedule / budget
const [READY_PROJECT_EXPENDITURE, SET_READY_PROJECT_EXPENDITURE] = useState(false);
const [READY_PROJECT_BY_PHASE, SET_READY_PROJECT_BY_PHASE] = useState(false);
@ -67,6 +66,12 @@ const DashboardBOD = (props) => {
const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false);
const [DATA_DETAIL_EXPENDITURE, SET_DATA_DETAIL_EXPENDITURE] = useState([]);
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 6 }, (_, index) => currentYear - index);
const storedYear = localStorage.getItem('selectedYear');
const initialYear = storedYear ? storedYear : currentYear.toString();
const [searchColumn, setSearchColumn] = useState(initialYear);
useEffect(() => {
getCompanyCashFlow(); // expenditure
@ -82,13 +87,14 @@ const DashboardBOD = (props) => {
getProjectScheduleHealthPerDivision(); // project by schedule health per division
getTotalProjectPerDivision(); // project by division
getTotalProjectValuePerDivision(); // project value by division
}, [])
localStorage.setItem('selectedYear', searchColumn);
}, [searchColumn])
// project expenditure
const getCompanyCashFlow = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project Expenditure.";
@ -111,34 +117,34 @@ const DashboardBOD = (props) => {
SET_READY_PROJECT_EXPENDITURE(true);
}
// Project Expenditure Color
// Project Expenditure Color
const getCompanyExpenditureColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure-color/${company_id}`
const getCompanyExpenditureColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure-color/${company_id}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
SET_PROJECT_EXPENDITURE_COLOR(result.data.data)
}
SET_PROJECT_EXPENDITURE_COLOR(result.data.data)
}
const getCompanyFinancialHealthColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${company_id}`
const getCompanyFinancialHealthColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${company_id}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
SET_PROJECT_FINANCIAL_HEALTH_COLOR(result.data.data)
}
SET_PROJECT_FINANCIAL_HEALTH_COLOR(result.data.data)
}
const getCompanyScheduleHealthColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-schedule-health-color/${company_id}`
const getCompanyScheduleHealthColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-schedule-health-color/${company_id}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
SET_PROJECT_SCHEDULE_HEALTH_COLOR(result.data.data)
}
SET_PROJECT_SCHEDULE_HEALTH_COLOR(result.data.data)
}
const getCompanyInvoiceColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-invoice-color/${company_id}`
const getCompanyInvoiceColor = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-invoice-color/${company_id}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
SET_PROJECT_INVOICE_COLOR(result.data.data)
}
SET_PROJECT_INVOICE_COLOR(result.data.data)
}
const getInvoiceOutstanding = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project Invoice vs Cash In.";
@ -161,7 +167,7 @@ const DashboardBOD = (props) => {
}
const getProjectPerScheduleHealth = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Schedule Health.";
@ -185,7 +191,7 @@ const DashboardBOD = (props) => {
}
const getProjectPerBudgetHealth = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Budget Health.";
@ -208,7 +214,7 @@ const DashboardBOD = (props) => {
}
const getProjectBudgetHealthPerDivision = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Schedule Health per Division.";
@ -232,7 +238,7 @@ const DashboardBOD = (props) => {
}
const getProjectScheduleHealthPerDivision = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Schedule Health.";
@ -255,7 +261,7 @@ const DashboardBOD = (props) => {
}
const getProjectPerPhase = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Phase.";
@ -280,7 +286,7 @@ const DashboardBOD = (props) => {
}
const getTotalProjectPerDivision = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project by Division.";
@ -305,7 +311,7 @@ const DashboardBOD = (props) => {
}
const getTotalProjectValuePerDivision = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Project Value by Division";
@ -334,7 +340,7 @@ const DashboardBOD = (props) => {
return;
}
setOpenDetailedView(true);
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
const content = "Get Detail Expenditure";
@ -453,6 +459,33 @@ const DashboardBOD = (props) => {
<div style={{ marginLeft: -25, marginRight: -25 }}>
{/* <FloatingFilter /> */}
<NotificationContainer />
<Row>
<Col span={24} style={{ backgroundColor: '#fff', height: '8vh', display: 'flex', justifyContent: 'space-between' }}>
<div style={{ marginTop: '7px', marginLeft: '10px' }}>
<h4>Dashboard</h4>
</div>
<div style={{ display: 'flex', marginRight: '15px' }}>
<div style={{ marginTop: '11px', marginRight: '5px' }}>
<p>Search by Years</p>
</div>
<div>
<Input
type="select"
value={searchColumn}
style={{ width: '100px', marginTop: '7px', cursor: 'pointer' }}
onChange={(e) => setSearchColumn(e.target.value)}
name="select"
>
{years.map((year) => (
<option key={year} value={year.toString()}>
{year}
</option>
))}
</Input>
</div>
</div>
</Col>
</Row>
<Row>
<Col span={12}>
<Row>
@ -535,18 +568,18 @@ const DashboardBOD = (props) => {
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0,
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_paid_invoice ? PROJECT_EXPENDITURE.total_paid_invoice : 0
],
borderColor: [
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
borderColor: [
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747'
],
],
backgroundColor: [
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16',
PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747'
],
],
borderRadius: 5,
borderSkipped: false
}
@ -947,11 +980,11 @@ const DashboardBOD = (props) => {
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.overrun) : []
,
borderColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
backgroundColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false
@ -963,11 +996,11 @@ const DashboardBOD = (props) => {
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.warning) : []
,
borderColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
backgroundColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false
@ -979,11 +1012,11 @@ const DashboardBOD = (props) => {
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData['on-budget']) : []
,
borderColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B',
backgroundColor: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B',
PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
: PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false

Write Preview
Loading…
Cancel
Save