|
|
@ -15,7 +15,7 @@ import { HealthByBudget, HealthBySchedule } from './Components'; |
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
import { Card, CardBody, CardHeader, Input } from "reactstrap"; |
|
|
|
import { Card, CardBody, CardHeader, Input } from "reactstrap"; |
|
|
|
const DashboardBOD = (props) => { |
|
|
|
const DashboardBOD = (props) => { |
|
|
|
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name='', hierarchy=[], user_name=''; |
|
|
|
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) { |
|
|
|
if (props && props.role_id && props.user_id) { |
|
|
|
role_id = props.role_id; |
|
|
|
role_id = props.role_id; |
|
|
|
user_id = props.user_id; |
|
|
|
user_id = props.user_id; |
|
|
@ -61,13 +61,6 @@ const DashboardBOD = (props) => { |
|
|
|
|
|
|
|
|
|
|
|
const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false); |
|
|
|
const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false); |
|
|
|
const [DATA_DETAIL_EXPENDITURE, SET_DATA_DETAIL_EXPENDITURE] = useState([]); |
|
|
|
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(() => { |
|
|
|
useEffect(() => { |
|
|
|
getCompanyCashFlow(); // expenditure
|
|
|
|
getCompanyCashFlow(); // expenditure
|
|
|
|
getCompanyExpenditureColor(); // expenditure Color
|
|
|
|
getCompanyExpenditureColor(); // expenditure Color
|
|
|
@ -82,14 +75,13 @@ const DashboardBOD = (props) => { |
|
|
|
getProjectScheduleHealthPerDivision(); // project by schedule health per division
|
|
|
|
getProjectScheduleHealthPerDivision(); // project by schedule health per division
|
|
|
|
getTotalProjectPerDivision(); // project by division
|
|
|
|
getTotalProjectPerDivision(); // project by division
|
|
|
|
getTotalProjectValuePerDivision(); // project value by division
|
|
|
|
getTotalProjectValuePerDivision(); // project value by division
|
|
|
|
localStorage.setItem('selectedYear', searchColumn); |
|
|
|
}, []) |
|
|
|
}, [searchColumn]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// project expenditure
|
|
|
|
// project expenditure
|
|
|
|
const getCompanyCashFlow = async () => { |
|
|
|
const getCompanyCashFlow = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project Expenditure."; |
|
|
|
const content = "Get Project Expenditure."; |
|
|
|
|
|
|
|
|
|
|
@ -115,31 +107,31 @@ const DashboardBOD = (props) => { |
|
|
|
// Project Expenditure Color
|
|
|
|
// Project Expenditure Color
|
|
|
|
|
|
|
|
|
|
|
|
const getCompanyExpenditureColor = async () => { |
|
|
|
const getCompanyExpenditureColor = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure-color/${company_id}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure-color/${company_id}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
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 getCompanyFinancialHealthColor = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${company_id}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${company_id}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
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 getCompanyScheduleHealthColor = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-schedule-health-color/${company_id}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-schedule-health-color/${company_id}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
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 getCompanyInvoiceColor = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-invoice-color/${company_id}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-invoice-color/${company_id}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
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 getInvoiceOutstanding = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project Invoice vs Cash In."; |
|
|
|
const content = "Get Project Invoice vs Cash In."; |
|
|
|
|
|
|
|
|
|
|
@ -162,7 +154,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getProjectPerScheduleHealth = async () => { |
|
|
|
const getProjectPerScheduleHealth = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Schedule Health."; |
|
|
|
const content = "Get Project by Schedule Health."; |
|
|
|
|
|
|
|
|
|
|
@ -186,7 +178,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getProjectPerBudgetHealth = async () => { |
|
|
|
const getProjectPerBudgetHealth = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Budget Health."; |
|
|
|
const content = "Get Project by Budget Health."; |
|
|
|
|
|
|
|
|
|
|
@ -209,7 +201,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getProjectBudgetHealthPerDivision = async () => { |
|
|
|
const getProjectBudgetHealthPerDivision = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Schedule Health per Division."; |
|
|
|
const content = "Get Project by Schedule Health per Division."; |
|
|
|
|
|
|
|
|
|
|
@ -233,7 +225,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getProjectScheduleHealthPerDivision = async () => { |
|
|
|
const getProjectScheduleHealthPerDivision = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Schedule Health."; |
|
|
|
const content = "Get Project by Schedule Health."; |
|
|
|
|
|
|
|
|
|
|
@ -256,7 +248,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getProjectPerPhase = async () => { |
|
|
|
const getProjectPerPhase = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Phase."; |
|
|
|
const content = "Get Project by Phase."; |
|
|
|
|
|
|
|
|
|
|
@ -281,7 +273,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getTotalProjectPerDivision = async () => { |
|
|
|
const getTotalProjectPerDivision = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project by Division."; |
|
|
|
const content = "Get Project by Division."; |
|
|
|
|
|
|
|
|
|
|
@ -306,7 +298,7 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const getTotalProjectValuePerDivision = async () => { |
|
|
|
const getTotalProjectValuePerDivision = async () => { |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Project Value by Division"; |
|
|
|
const content = "Get Project Value by Division"; |
|
|
|
|
|
|
|
|
|
|
@ -335,7 +327,7 @@ const DashboardBOD = (props) => { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
setOpenDetailedView(true); |
|
|
|
setOpenDetailedView(true); |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${searchColumn}/${company_id}/${all_project}/${hierarchy}` |
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${company_id}/${all_project}/${hierarchy}/${role_name}` |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
const content = "Get Detail Expenditure"; |
|
|
|
const content = "Get Detail Expenditure"; |
|
|
|
|
|
|
|
|
|
|
@ -454,33 +446,6 @@ const DashboardBOD = (props) => { |
|
|
|
<div style={{ marginLeft: -25, marginRight: -25 }}> |
|
|
|
<div style={{ marginLeft: -25, marginRight: -25 }}> |
|
|
|
{/* <FloatingFilter /> */} |
|
|
|
{/* <FloatingFilter /> */} |
|
|
|
<NotificationContainer /> |
|
|
|
<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> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Col span={12}> |
|
|
|
<Row> |
|
|
|
<Row> |
|
|
|