diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js
index 5552366..f3cf52d 100644
--- a/src/const/ApiConst.js
+++ b/src/const/ApiConst.js
@@ -456,6 +456,42 @@ export const PROJECT_PHASE_DELETE = (id) => {
};
export const PHASE_PROYEK = `${BASE_SIMPRO_LUMEN}/project-phase/list`;
+export const PROJECT_EXPENDITURE_ADD = `${BASE_SIMPRO_LUMEN}/project-expenditure/add`;
+export const PROJECT_EXPENDITURE_SEARCH = `${BASE_SIMPRO_LUMEN}/project-expenditure/search`;
+export const PROJECT_EXPENDITURE_EDIT = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-expenditure/update/${id}`;
+};
+export const PROJECT_EXPENDITURE_DELETE = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-expenditure/delete/${id}`;
+};
+
+export const PROJECT_FINANCIAL_HEALTH_ADD = `${BASE_SIMPRO_LUMEN}/project-financial-health/add`;
+export const PROJECT_FINANCIAL_HEALTH_SEARCH = `${BASE_SIMPRO_LUMEN}/project-financial-health/search`;
+export const PROJECT_FINANCIAL_HEALTH_EDIT = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-financial-health/update/${id}`;
+};
+export const PROJECT_FINANCIAL_HEALTH_DELETE = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-financial-health/delete/${id}`;
+};
+
+export const PROJECT_SCHEDULE_HEALTH_ADD = `${BASE_SIMPRO_LUMEN}/project-schedule-health/add`;
+export const PROJECT_SCHEDULE_HEALTH_SEARCH = `${BASE_SIMPRO_LUMEN}/project-schedule-health/search`;
+export const PROJECT_SCHEDULE_HEALTH_EDIT = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-schedule-health/update/${id}`;
+};
+export const PROJECT_SCHEDULE_HEALTH_DELETE = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-schedule-health/delete/${id}`;
+};
+
+export const PROJECT_INVOICE_ADD = `${BASE_SIMPRO_LUMEN}/project-invoice/add`;
+export const PROJECT_INVOICE_SEARCH = `${BASE_SIMPRO_LUMEN}/project-invoice/search`;
+export const PROJECT_INVOICE_EDIT = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-invoice/update/${id}`;
+};
+export const PROJECT_INVOICE_DELETE = (id) => {
+ return `${BASE_SIMPRO_LUMEN}/project-invoice/delete/${id}`;
+};
+
export const PROJECT_CHARTER_ADD = `${BASE_SIMPRO_LUMEN}/project-charter/add`;
export const PROJECT_CHARTER_SEARCH = `${BASE_SIMPRO_LUMEN}/project-charter/search`;
export const PROJECT_CHARTER_EDIT = (id) => {
diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js
index b84d1e6..46175ac 100644
--- a/src/views/Dashboard/DashboardBOD.js
+++ b/src/views/Dashboard/DashboardBOD.js
@@ -52,6 +52,10 @@ const DashboardBOD = (props) => {
const [READY_PROJECT_SCHEDULE_BUDGET_HEALTH_PER_DIVISION, SET_READY_PROJECT_SCHEDULE_BUDGET_HEALTH_PER_DIVISION] = useState(false);
const [PROJECT_EXPENDITURE, SET_PROJECT_EXPENDITURE] = useState(null);
+ const [PROJECT_EXPENDITURE_COLOR, SET_PROJECT_EXPENDITURE_COLOR] = useState(null);
+ const [PROJECT_FINANCIAL_HEALTH_COLOR, SET_PROJECT_FINANCIAL_HEALTH_COLOR] = useState(null);
+ const [PROJECT_SCHEDULE_HEALTH_COLOR, SET_PROJECT_SCHEDULE_HEALTH_COLOR] = useState(null);
+ const [PROJECT_INVOICE_COLOR, SET_PROJECT_INVOICE_COLOR] = useState(null);
const [PROJECT_BY_PHASE, SET_PROJECT_BY_PHASE] = useState(null);
const [PROJECT_BY_FINANCIAL_HEALTH, SET_PROJECT_BY_FINANCIAL_HEALTH] = useState(null);
const [PROJECT_BY_SCHEDULE_HEALTH, SET_PROJECT_BY_SCHEDULE_HEALTH] = useState(null);
@@ -66,6 +70,10 @@ const DashboardBOD = (props) => {
useEffect(() => {
getCompanyCashFlow(); // expenditure
+ getCompanyExpenditureColor(); // expenditure Color
+ getCompanyFinancialHealthColor(); // financial health Color
+ getCompanyScheduleHealthColor(); // schedule health Color
+ getCompanyInvoiceColor(); // Project Invoice vs Cash In Color
getProjectPerPhase(); // project by phase
getInvoiceOutstanding(); // project invoice vs cash in
getProjectPerBudgetHealth(); // project by financial health
@@ -103,6 +111,32 @@ const DashboardBOD = (props) => {
SET_READY_PROJECT_EXPENDITURE(true);
}
+ // Project Expenditure Color
+
+ 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)
+ }
+
+ 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)
+ }
+
+ 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)
+ }
+
+ 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)
+ }
+
const getInvoiceOutstanding = async () => {
const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
@@ -501,8 +535,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: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'],
- backgroundColor: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'],
+ 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_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
}
@@ -553,8 +597,16 @@ const DashboardBOD = (props) => {
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : '',
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH['on-budget'] ? PROJECT_BY_FINANCIAL_HEALTH['on-budget'] : ''
].filter(value => value !== null),
- borderColor: ["#E80053", "#FFD600", "#52AC0B",],
- backgroundColor: ["#E80053", "#FFD600", "#52AC0B",],
+ borderColor: [
+ PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
+ PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
+ PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B'
+ ],
+ backgroundColor: [
+ PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053',
+ PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600',
+ 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,
borderSkipped: false
},
@@ -579,8 +631,16 @@ const DashboardBOD = (props) => {
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : '',
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] : ''
],
- borderColor: ["#E80053", "#FFD600", "#52AC0B"],
- backgroundColor: ["#E80053", "#FFD600", "#52AC0B"],
+ borderColor: [
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053',
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600',
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
+ ],
+ backgroundColor: [
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053',
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600',
+ PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B'
+ ],
borderWidth: 2,
borderSkipped: false
},
@@ -740,9 +800,6 @@ const DashboardBOD = (props) => {
datasets: [
{
label: "",
- // data: [3, 1, 2, 3, 7],
- // borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
- // backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
data: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.totalProject) : [],
borderColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [],
backgroundColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [],
@@ -835,27 +892,21 @@ const DashboardBOD = (props) => {
}
}}
data={{
- // labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
- // labels: [["Gedung Tenaga", "Panel Surya"], ["Pembangunan Gedung", "Tower ABC"], ["Tower Jaringan", "Jawa Barat"], ["Tower Jaringan", "Jawa Timur"], ["Tower Jaringan", "Jawa Tengah"], "Tower Jaringan Bali", "Project Tower ABC", ["Tower Jaringan", "DKI Jakarta"], "Tower Jaringan NTT"],
labels: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.project_code) : [],
datasets: [
{
label: "Invoiced",
- // data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => Math.floor(item.invoiced)) : [],
- borderColor: '#A36A16',
- backgroundColor: '#A36A16',
- // borderWidth: 2,
+ borderColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.invoiced && PROJECT_INVOICE_COLOR.invoiced !== "" ? PROJECT_INVOICE_COLOR.invoiced : '#A36A16',
+ backgroundColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.invoiced && PROJECT_INVOICE_COLOR.invoiced !== "" ? PROJECT_INVOICE_COLOR.invoiced : '#A36A16',
borderRadius: 5,
borderSkipped: false
},
{
label: "Cash In",
- // data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.paid) : [],
- borderColor: '#4C4747',
- backgroundColor: '#4C4747',
- // borderWidth: 2,
+ borderColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.paid && PROJECT_INVOICE_COLOR.paid !== "" ? PROJECT_INVOICE_COLOR.paid : '#4C4747',
+ backgroundColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.paid && PROJECT_INVOICE_COLOR.paid !== "" ? PROJECT_INVOICE_COLOR.paid : '#4C4747',
borderRadius: 5,
borderSkipped: false
}
@@ -891,39 +942,48 @@ const DashboardBOD = (props) => {
datasets: [
{
label: healthPerDivisionMode === 'schedule' ? "Behind Schedule" : "Overrun",
- // data: [1, 0, 0, 0],
data: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.behindSchedule) : []
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.overrun) : []
,
- borderColor: '#E80053',
- backgroundColor: '#E80053',
+ 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',
+ 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',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false
},
{
label: healthPerDivisionMode === 'schedule' ? "Early Warning" : "Warning",
- // data: [2, 0, 1, 1],
data: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.warning) : []
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.warning) : []
,
- borderColor: '#FFD600',
- backgroundColor: '#FFD600',
+ 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',
+ 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',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false
},
{
label: healthPerDivisionMode === 'schedule' ? "On Schedule" : "On Budget",
- // data: [4, 2, 3, 1],
data: healthPerDivisionMode === 'schedule' ?
PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.onSchedule) : []
: PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData['on-budget']) : []
,
- borderColor: '#52AC0B',
- backgroundColor: '#52AC0B',
+ 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',
+ 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',
borderWidth: 2,
borderRadius: 5,
borderSkipped: false
diff --git a/src/views/Master/ProjectExpenditure/DialogForm.js b/src/views/Master/ProjectExpenditure/DialogForm.js
new file mode 100644
index 0000000..1bf2886
--- /dev/null
+++ b/src/views/Master/ProjectExpenditure/DialogForm.js
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react'
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+ Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import 'antd/dist/antd.css';
+import { Select } from "antd";
+import InputColor from "./InputColor";
+import "./styles.css";
+import "rc-color-picker/assets/index.css";
+import { useTranslation } from 'react-i18next';
+const company_id = localStorage.getItem("company_id")
+const { Option } = Select;
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
+ const [id, setId] = useState(0)
+ const [projectExpenditure, setProjectExpenditure] = useState('')
+ const [color, setColor] = useState('')
+ const { t } = useTranslation();
+ useEffect(() => {
+ if (typeDialog === "Edit") {
+ setId(dataEdit.id)
+ setProjectExpenditure(dataEdit.name)
+ setColor(dataEdit.color)
+ } else {
+ setId(0)
+ setColor('')
+ setProjectExpenditure('')
+ }
+ }, [dataEdit, openDialog])
+
+ const handleSave = () => {
+ let data = '';
+ if (typeDialog === "Save") {
+ data = {
+ name: projectExpenditure,
+ color,
+ company_id
+ }
+ closeDialog('save', data);
+ } else {
+ data = {
+ id,
+ name: projectExpenditure,
+ color,
+ company_id
+ }
+ closeDialog('edit', data);
+ }
+ setId(0)
+ }
+
+ const handleCancel = () => {
+ closeDialog('cancel', 'none')
+ setId(0)
+ }
+
+ const renderForm = () => {
+ return (
+
+ )
+ }
+
+ return (
+ <>
+
+ {typeDialog == "Save" ? `Add` : "Edit"} data
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ )
+}
+
+export default DialogForm;
diff --git a/src/views/Master/ProjectExpenditure/DialogFormInitial.js b/src/views/Master/ProjectExpenditure/DialogFormInitial.js
new file mode 100644
index 0000000..200ba87
--- /dev/null
+++ b/src/views/Master/ProjectExpenditure/DialogFormInitial.js
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+ Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, idActivity, projectTypeId }) => {
+
+ const [id, setId] = useState(0)
+ const [activity, setActivity] = useState('')
+
+ useEffect(() => {
+ if (typeDialog === "edit") {
+ setId(dataEdit.id)
+ setActivity(dataEdit.name_activity)
+
+ } else {
+ setId(0)
+ setActivity('')
+ }
+ }, [dataEdit, openDialog])
+
+ const handleSave = () => {
+ let data = '';
+
+ if (typeDialog === "add") {
+ data = {
+ name_activity: activity,
+ proyek_type_id: projectTypeId
+ }
+
+ if (idActivity && idActivity > 0) {
+ data['parent_id'] = idActivity
+ }
+
+ closeDialog('save', data);
+ } else {
+ data = {
+ id,
+ name_activity: activity,
+ proyek_type_id: projectTypeId
+ }
+
+ if (idActivity && idActivity > 0) {
+ data['parent_id'] = idActivity
+ }
+
+ closeDialog('edit', data);
+ }
+ setId(0)
+ setActivity('')
+ }
+
+ const handleCancel = () => {
+ closeDialog('cancel', 'none')
+ setId(0)
+ setActivity('')
+ }
+
+ const renderForm = () => {
+ return (
+
+ )
+ }
+
+
+ return (
+ <>
+
+ {typeDialog == "add" ? `Add` : "Edit"} Activity
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ )
+
+}
+
+export default DialogForm;
\ No newline at end of file
diff --git a/src/views/Master/ProjectExpenditure/InputColor.js b/src/views/Master/ProjectExpenditure/InputColor.js
new file mode 100644
index 0000000..ff2f865
--- /dev/null
+++ b/src/views/Master/ProjectExpenditure/InputColor.js
@@ -0,0 +1,46 @@
+import React from "react";
+import Input from "antd/lib/input";
+import Button from "antd/lib/button";
+import Dropdown from "antd/lib/dropdown";
+import { Panel } from 'rc-color-picker'
+import "antd/dist/antd.css";
+import "./styles.css";
+
+export default function InputColor(props) {
+ const { color, onChange } = props;
+
+ const [internalColor, setInternalColor] = React.useState(color);
+
+ const handleChange = (color) => {
+ setInternalColor(color.color);
+
+ if (onChange) {
+ onChange(color);
+ }
+ };
+
+ const overlay = (
+
+ );
+
+ return (
+ <>
+ setInternalColor(e.target.value)}
+ suffix={
+
+
+
+ }
+ />
+
+ );
+}
+
diff --git a/src/views/Master/ProjectExpenditure/index.js b/src/views/Master/ProjectExpenditure/index.js
new file mode 100644
index 0000000..4dde162
--- /dev/null
+++ b/src/views/Master/ProjectExpenditure/index.js
@@ -0,0 +1,392 @@
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import React, { useState, useEffect, useMemo } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import moment from 'moment'
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PROJECT_EXPENDITURE_ADD, PROJECT_EXPENDITURE_EDIT, PROJECT_EXPENDITURE_DELETE, PROJECT_EXPENDITURE_SEARCH } from '../../../const/ApiConst';
+import { Pagination, Button, Tooltip, Table } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+
+const ProjectExpenditure = ({ params, ...props }) => {
+ let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '', company_id = 0, role_name = '';
+ if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
+ role_id = props.location.state.role_id;
+ user_id = props.location.state.user_id;
+ token = props.location.state.token;
+ isLogin = props.location.state.isLogin;
+ role_name = props.location.state.role_name;
+ } else {
+ role_id = localStorage.getItem("role_id");
+ proyek_id = localStorage.getItem("proyek_id");
+ user_id = localStorage.getItem("user_id");
+ token = localStorage.getItem("token");
+ isLogin = localStorage.getItem("isLogin");
+ company_id = localStorage.getItem('company_id');
+ role_name = localStorage.getItem('role_name');
+ }
+
+ const HEADER = {
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ }
+ }
+ const pageName = params.name;
+
+ const [alertDelete, setAlertDelete] = useState(false)
+ const [clickOpenModal, setClickOpenModal] = useState(false)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [dataEdit, setDataEdit] = useState([])
+ const [dataExport, setDataExport] = useState([])
+ const [dataTable, setDatatable] = useState([])
+ const [idDelete, setIdDelete] = useState(0)
+ const [idPhaseProject, setIdPhaseProject] = useState(0)
+ const [openDialog, setOpenDialog] = useState(false)
+ const [openDialogIG, setOpenDialogIG] = useState(false)
+ const [rowsPerPage, setRowsPerPage] = useState(10)
+ const [search, setSearch] = useState('')
+ const [totalPage, setTotalPage] = useState(0)
+ const [typeDialog, setTypeDialog] = useState('Save')
+ const { t } = useTranslation()
+ useEffect(() => {
+ getDataProjectExpenditure()
+ }, [currentPage, rowsPerPage, search])
+
+ useEffect(() => {
+ const cekData = dataExport || []
+ if (cekData.length > 0) {
+ exportExcel()
+ }
+ }, [dataExport])
+
+ const getDataProjectExpenditure = async () => {
+ let start = 0;
+ if (currentPage !== 1 && currentPage > 1) {
+ start = (currentPage * rowsPerPage) - rowsPerPage
+ }
+ const payload = {
+ "columns": [
+ {
+ "name": "name",
+ "logic_operator": "ilike",
+ "value": search,
+ "operator": "AND"
+ }
+ ],
+ "orders": {
+ "ascending": true,
+ "columns": [
+ 'id'
+ ]
+ },
+ "paging": {
+ "length": rowsPerPage,
+ "start": start
+ }
+ }
+ if (role_name !== "Super Admin") {
+ payload.columns.push(
+ { "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+ )
+ } else {
+ payload.columns.push(
+ { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+ )
+ }
+ const result = await axios
+ .post(PROJECT_EXPENDITURE_SEARCH, payload, HEADER)
+ .then((res) => res)
+ .catch((err) => err.response);
+
+ if (result && result.data && result.data.code == 200) {
+ result.data.data.map((res) => {
+ res.key = res.id.toString()
+ });
+ setDatatable(result.data.data);
+ setTotalPage(result.data.totalRecord);
+ } else {
+ NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ }
+ }
+
+ const handleSearch = e => {
+ const value = e.target.value
+ setSearch(value);
+ setCurrentPage(1)
+ };
+ const handleOpenDialog = (type) => {
+ setOpenDialog(true)
+ setTypeDialog(type)
+ }
+
+ const handleExportExcel = async () => {
+ let start = 0;
+
+ if (currentPage !== 1 && currentPage > 1) {
+ start = (currentPage * rowsPerPage) - rowsPerPage
+ }
+
+ const payload = {
+ "columns": [
+ {
+ "name": "name",
+ "logic_operator": "like",
+ "value": search,
+ "operator": "AND"
+ }
+ ],
+ "orders": {
+ "ascending": true,
+ "columns": [
+ 'id'
+ ]
+ },
+ "paging": {
+ "length": rowsPerPage,
+ "start": start
+ }
+ }
+
+ const result = await axios
+ .post(PROJECT_EXPENDITURE_SEARCH, payload, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.data.code == 200) {
+ let resData = result.data.data;
+ const excelData = [];
+ resData.map((val, index) => {
+ let dataRow = {
+ "Nama": val.name,
+ "Color": val.color,
+ }
+ excelData.push(dataRow)
+ })
+ await setDataExport(excelData)
+ } else {
+ NotificationManager.error('Gagal Export Data!!', 'Failed');
+ }
+ }
+
+ const exportExcel = () => {
+ const dataExcel = dataExport || [];
+ const fileName = `Data ${pageName}.xlsx`;
+ const ws = XLSX.utils.json_to_sheet(dataExcel);
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+ XLSX.writeFile(wb, fileName);
+ setDataExport([])
+ }
+
+ const handleEdit = (data) => {
+ setDataEdit(data)
+ handleOpenDialog('Edit');
+ }
+
+ const handleDelete = async (id) => {
+ await setAlertDelete(true)
+ await setIdDelete(id)
+ }
+
+ const handleCloseDialog = (type, data) => {
+ if (type === "save") {
+ saveProjectExpenditure(data);
+ } else if (type === "edit") {
+ editMaterialR(data);
+ }
+ setDataEdit([])
+ setOpenDialog(false)
+ }
+
+ const saveProjectExpenditure = async (data) => {
+ const result = await axios.post(PROJECT_EXPENDITURE_ADD, data, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectExpenditure()
+ NotificationManager.success(`Data project expenditure berhasil ditambah`, 'Success!!');
+ } else {
+ NotificationManager.error(`${result.data.message}`, 'Failed!!');
+ }
+ }
+
+ const editMaterialR = async (data) => {
+ let urlEdit = PROJECT_EXPENDITURE_EDIT(data.id)
+ const result = await axios.put(urlEdit, data, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectExpenditure();
+ NotificationManager.success(`Data project expenditure berhasil diedit`, 'Success!!');
+ } else {
+ NotificationManager.error(`Data project expenditure gagal di edit`, `Failed!!`);
+ }
+ }
+
+ const toggleAddDialog = () => {
+ setOpenDialog(!openDialog)
+ }
+
+ const handleDialogIg = (id) => {
+ setIdPhaseProject(id)
+ setOpenDialogIG(true)
+ }
+
+ const closeDialogIG = () => {
+ setIdPhaseProject(0)
+ setOpenDialogIG(false)
+ }
+
+ const toggleDialogIG = () => {
+ if (openDialogIG) {
+ setIdPhaseProject(0)
+ }
+ setOpenDialogIG(!openDialogIG);
+ }
+
+ const onConfirmDelete = async () => {
+ let url = PROJECT_EXPENDITURE_DELETE(idDelete);
+
+ const result = await axios.delete(url, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectExpenditure()
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.success(`Data project expenditure berhasil dihapus!`, 'Success!!');
+ } else {
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.error(`Data project expenditure gagal dihapus!}`, 'Failed!!');
+ }
+ }
+
+ const cancelDelete = () => {
+ setAlertDelete(false)
+ setIdDelete(0)
+ }
+
+ const onShowSizeChange = (current, pageSize) => {
+ setRowsPerPage(pageSize)
+ }
+
+ const onPagination = (current, pageSize) => {
+ setCurrentPage(current)
+ }
+
+ const dataNotAvailable = () => {
+ if (dataTable.length === 0) {
+ return (
+
+ | {t('noData')} |
+
+ )
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: t('action'),
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ handleDelete(text.id)}>
+
+
+ handleEdit(text)}>
+ {" "}
+ ,
+ },
+ { title: t('Project Expenditure'), dataIndex: 'name', key: 'name', className: "nowrap" },
+ {
+ title: t('color'),
+ dataIndex: 'color',
+ key: 'color',
+ render: (text) => <>
+
+
+
+ ,
+ },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ return (
+
+
+
+ {t('deleteMsg')}
+
+
toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ />
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderTable}
+
+
+
+
+ | {t('noData')} |
+
+ )
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: t('action'),
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ handleDelete(text.id)}>
+
+
+ handleEdit(text)}>
+ {" "}
+ ,
+ },
+ { title: t('Project Financial Health'), dataIndex: 'name', key: 'name', className: "nowrap" },
+ {
+ title: t('color'),
+ dataIndex: 'color',
+ key: 'color',
+ render: (text) => <>
+
+
+
+ ,
+ },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ return (
+
+
+
+ {t('deleteMsg')}
+
+
toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ />
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderTable}
+
+
+
+
+ | {t('noData')} |
+
+ )
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: t('action'),
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ handleDelete(text.id)}>
+
+
+ handleEdit(text)}>
+ {" "}
+ ,
+ },
+ { title: t('Project Invoice'), dataIndex: 'name', key: 'name', className: "nowrap" },
+ {
+ title: t('color'),
+ dataIndex: 'color',
+ key: 'color',
+ render: (text) => <>
+
+
+
+ ,
+ },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ return (
+
+
+
+ {t('deleteMsg')}
+
+
toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ />
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderTable}
+
+
+
+
+ | {t('noData')} |
+
+ )
+ }
+ }
+
+ const renderTable = useMemo(() => {
+ const columns = [
+ {
+ title: t('action'),
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ handleDelete(text.id)}>
+
+
+ handleEdit(text)}>
+ {" "}
+ ,
+ },
+ { title: t('Project Schedule Health'), dataIndex: 'name', key: 'name', className: "nowrap" },
+ {
+ title: t('color'),
+ dataIndex: 'color',
+ key: 'color',
+ render: (text) => <>
+
+
+
+ ,
+ },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ return (
+
+
+
+ {t('deleteMsg')}
+
+
toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ />
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderTable}
+
+
+
+