From bc22c05179a727636912e904181b978cf7497d6e Mon Sep 17 00:00:00 2001 From: farhantock Date: Wed, 3 Jan 2024 19:54:07 +0700 Subject: [PATCH] update filter by year --- src/views/Dashboard/DashboardBOD.js | 127 ++++++++++++++++++---------- 1 file changed, 80 insertions(+), 47 deletions(-) diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 46175ac..4d1982e 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 = '', 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) => {
{/* */} + + +
+

Dashboard

+
+
+
+

Search by Years

+
+
+ setSearchColumn(e.target.value)} + name="select" + > + {years.map((year) => ( + + ))} + +
+
+ + @@ -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