diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 1341c88..64084b4 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -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 = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name='', hierarchy=[], user_name=''; if (props && props.role_id && props.user_id) { @@ -35,7 +35,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); @@ -62,6 +61,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 @@ -77,13 +82,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."; @@ -106,34 +112,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."; @@ -156,7 +162,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."; @@ -180,7 +186,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."; @@ -203,7 +209,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."; @@ -227,7 +233,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."; @@ -250,7 +256,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."; @@ -275,7 +281,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."; @@ -300,7 +306,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"; @@ -329,7 +335,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"; @@ -448,6 +454,33 @@ const DashboardBOD = (props) => {
{/* */} + + +
+

Dashboard

+
+
+
+

Search by Years

+
+
+ setSearchColumn(e.target.value)} + name="select" + > + {years.map((year) => ( + + ))} + +
+
+ +
@@ -530,18 +563,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 } @@ -942,11 +975,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 @@ -958,11 +991,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 @@ -974,11 +1007,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