|
|
|
@ -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."; |
|
|
|
|
|
|
|
|
@ -133,7 +139,7 @@ const DashboardBOD = (props) => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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) => {
|
|
|
|
|
<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> |
|
|
|
|