diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 8515a48..39797b4 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -31,7 +31,7 @@ const DashboardBOD = () => { const [READY_PROJECT_VALUE_PER_DIVISION, SET_READY_PROJECT_VALUE_PER_DIVISION] = useState(false); const [READY_PROJECT_INVOICE_VS_CASH_IN, SET_READY_PROJECT_INVOICE_VS_CASH_IN] = useState(false); 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_BY_PHASE, SET_PROJECT_BY_PHASE] = useState(null); const [PROJECT_BY_FINANCIAL_HEALTH, SET_PROJECT_BY_FINANCIAL_HEALTH] = useState(null); @@ -64,7 +64,7 @@ const DashboardBOD = () => { const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow` const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) const content = "Get Project Expenditure."; - + if (!result) { NotificationManager.error(`${content} Could not connect to internet.`, "Failed"); SET_READY_PROJECT_EXPENDITURE(true); @@ -253,7 +253,7 @@ const DashboardBOD = () => { const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division` const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) const content = "Get Project Value by Division"; - + if (!result) { NotificationManager.error(`${content} Could not connect to internet.`, "Failed"); SET_READY_PROJECT_VALUE_PER_DIVISION(true); @@ -282,7 +282,7 @@ const DashboardBOD = () => { const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure` const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) const content = "Get Detail Expenditure"; - + if (!result) { NotificationManager.error(`${content} Could not connect to internet.`, "Failed"); SET_READY_TABLE_DETAIL_EXPENDITURE(true); @@ -314,15 +314,16 @@ const DashboardBOD = () => { else { outstanding_balance = '-'; } - + tableData.push({ "id": item.id, "last_gantt_id": item.lastGanttId?.last_gantt_id, + "kode_sortname": item.kode_sortname?.kode_sortname ? item.kode_sortname : "-", "project_name": item.nama, "project_manager": item.pm?.name, "planned_interval": `${item.mulai_proyek ? moment(item.mulai_proyek).format('DD/MM/YYYY') : '-'} - ${item.akhir_proyek ? moment(item.akhir_proyek).format('DD/MM/YYYY') : '-'}`, - "manpower": `${item.manPowers}/${total_manpowers}`, - "project_budget": item.rencana_biaya ? toRupiah(item.rencana_biaya) : '-' , + "manpower": `${item.manPowers}/${total_manpowers}`, + "project_budget": item.rencana_biaya ? toRupiah(item.rencana_biaya) : '-', "invoice": item.invoice?.invoiced ? toRupiah(item.invoice.invoiced) : '-', "cash_in": item.invoice?.paid ? toRupiah(item.invoice.paid) : '-', "outstanding_balance": outstanding_balance, @@ -344,6 +345,7 @@ const DashboardBOD = () => { isReady={READY_TABLE_DETAIL_EXPENDITURE} title="Detail Project Expenditure" tableHeader={[ + { title: "Project Code", key: "kode_sortname" }, { title: "Project Name", key: "project_name" }, { title: "Project Manager", key: "project_manager" }, { title: "Planned Interval", key: "planned_interval" }, @@ -366,14 +368,14 @@ const DashboardBOD = () => { const FloatingFilter = () => { return ( -
+
) } return ( - +
{/* */} @@ -398,14 +400,14 @@ const DashboardBOD = () => {
Detailed View
} - +
{READY_PROJECT_EXPENDITURE ? PROJECT_EXPENDITURE ? - { } } }, - elements: { - bar: { - borderWidth: 2, + elements: { + bar: { + borderWidth: 2, + }, }, - }, - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - position: 'right', - labels: { - boxWidth: 10 + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + position: 'right', + labels: { + boxWidth: 10 + } + }, + datalabels: { + color: '#FFFFFF', + formatter: function (value, context) { + return value ? toRupiah(value, { useUnit: 'jt' }) : 0 + } } }, - datalabels: { - color: '#FFFFFF', - formatter: function(value, context) { - return value ? toRupiah(value, { useUnit: 'jt' }) : 0 + }} + data={{ + labels: ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'], + datasets: [ + { + label: '', + // data: [COMPANY_CASHFLOW_TOTAL_BUDGET, COMPANY_CASHFLOW_EXPENDITURE, COMPANY_CASHFLOW_INVOICE, COMPANY_CASHFLOW_CASH_IN], + data: [ + PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_budget ? PROJECT_EXPENDITURE.total_budget : 0, + PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_expenditure ? PROJECT_EXPENDITURE.total_expenditure : 0, + PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_invoice ? 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'], + borderRadius: 5, + borderSkipped: false } - } - }, - }} - data={{ - labels: ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'], - datasets: [ - { - label: '', - // data: [COMPANY_CASHFLOW_TOTAL_BUDGET, COMPANY_CASHFLOW_EXPENDITURE, COMPANY_CASHFLOW_INVOICE, COMPANY_CASHFLOW_CASH_IN], - data: [ - PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_budget ? PROJECT_EXPENDITURE.total_budget : 0, - PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_expenditure ? PROJECT_EXPENDITURE.total_expenditure : 0, - PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_invoice ? 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'], - borderRadius: 5, - borderSkipped: false - } - ], - }} - /> - : - + ], + }} + /> + : + : { */} - - + + } @@ -491,7 +493,7 @@ const DashboardBOD = () => { title="Project By Financial Health" subtitle="Amount of project grouped by financial health." chartType="pie" - chartData={ PROJECT_BY_FINANCIAL_HEALTH ? { + chartData={PROJECT_BY_FINANCIAL_HEALTH ? { labels: ["Cost Overrun", "Early Warning", "On Budget"], datasets: [ { @@ -517,7 +519,7 @@ const DashboardBOD = () => { title="Project By Schedule Health" subtitle="Amount of project grouped by Schedule health." chartType="pie" - chartData={ PROJECT_BY_SCHEDULE_HEALTH ? { + chartData={PROJECT_BY_SCHEDULE_HEALTH ? { labels: ["Behind Schedule", "Early Warning", "On Schedule"], datasets: [ { @@ -572,7 +574,7 @@ const DashboardBOD = () => { } } }} - chartData={ PROJECT_PER_DIVISION ? { + chartData={PROJECT_PER_DIVISION ? { // labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'], labels: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.name) : [], datasets: [ @@ -618,13 +620,13 @@ const DashboardBOD = () => { }, datalabels: { color: '#FFFFFF', - formatter: function(value, context) { - return value ? toRupiah(value, {useUnit: 'jt'}) : 0 + formatter: function (value, context) { + return value ? toRupiah(value, { useUnit: 'jt' }) : 0 } } } }} - chartData={ PROJECT_VALUE_PER_DIVISION ? { + chartData={PROJECT_VALUE_PER_DIVISION ? { // labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'], labels: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.name) : [], datasets: [ @@ -656,46 +658,46 @@ const DashboardBOD = () => {
{READY_PROJECT_BY_PHASE ? PROJECT_BY_PHASE && PROJECT_BY_PHASE.length > 0 ? - item.name) : [], - 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) : [], - borderWidth: 2, - borderRadius: 5, - borderSkipped: false - }, - ], - }} - /> - : - + }} + data={{ + // labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"], + labels: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.name) : [], + 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) : [], + borderWidth: 2, + borderRadius: 5, + borderSkipped: false + }, + ], + }} + /> + : + : { */} - - + + } @@ -729,77 +731,84 @@ const DashboardBOD = () => {
- { READY_PROJECT_INVOICE_VS_CASH_IN ? + {READY_PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN ? - item.project) : [], - 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) => item.invoiced) : [], - borderColor: '#A36A16', - backgroundColor: '#A36A16', - // borderWidth: 2, - 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, - borderRadius: 5, - borderSkipped: false - } - ], - }} - /> - : - + }} + 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) : [], + 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) => item.invoiced) : [], + borderColor: '#A36A16', + backgroundColor: '#A36A16', + // borderWidth: 2, + 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, + borderRadius: 5, + borderSkipped: false + } + ], + }} + /> + : + : - } + }
@@ -813,7 +822,7 @@ const DashboardBOD = () => { mode={healthPerDivisionMode} changeMode={(mode) => setHealthPerDivisionMode(mode)} chartType="vertical-bar" - chartData={ PROJECT_SCHEDULE_HEALTH_PER_DIVISION || PROJECT_BUDGET_HEALTH_PER_DIVISION ? { + chartData={PROJECT_SCHEDULE_HEALTH_PER_DIVISION || PROJECT_BUDGET_HEALTH_PER_DIVISION ? { // labels: ['Telecommunication Solution Service', 'Telecommunication Solution Product', 'Energy Solution', 'Constructions'], // labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'], labels: diff --git a/src/views/SimproV2/ResourceWorker/DialogForm.js b/src/views/SimproV2/ResourceWorker/DialogForm.js index e198a02..d2d9591 100644 --- a/src/views/SimproV2/ResourceWorker/DialogForm.js +++ b/src/views/SimproV2/ResourceWorker/DialogForm.js @@ -8,6 +8,7 @@ import moment from 'moment'; import 'antd/dist/antd.css'; import { formatRupiah, formatNumber } from '../../../const/CustomFunc' import { ROLE_SEARCH } from '../../../const/ApiConst' +import { useTranslation } from 'react-i18next'; const { Option } = Select const token = window.localStorage.getItem('token'); @@ -41,6 +42,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi const [divisionId, setDivisionId] = useState('') const [statusResource, setStatusResource] = useState('active') const [statusRestriction, setStatusRestriction] = useState(false) + const { t } = useTranslation() useEffect(() => { if (typeDialog === "Edit" || typeDialog === "Set") { console.log("cel data Edit", dataEdit) @@ -61,6 +63,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi setRoleId(dataEdit.role_id) setDivisionId(dataEdit.divisi_id) setAddress(dataEdit.address) + setStatusRestriction(dataEdit.status_boundary) } else { setId(0) setResourceName('') @@ -80,6 +83,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi setDivisionId('') setAddress('') setStatusResource('active') + setStatusRestriction(false) } }, [dataEdit, openDialog]) @@ -201,28 +205,28 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
- * Wajib diisi. + *{t('required')}. - + {/* setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */} - setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" /> + setKtpNumber(e.target.value)} placeholder={t('inputNik')} maxLength="16" /> - - setResourceName(e.target.value)} placeholder={`Input resource name...`} /> + + setResourceName(e.target.value)} placeholder={t('inputName')} /> - + setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" /> + setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" /> @@ -242,13 +246,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi - setEmail(e.target.value)} placeholder={`Input email...`} /> + setEmail(e.target.value)} placeholder={t('inputEmail')} /> - - setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}> {/* */} @@ -259,30 +263,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi - - setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> + + setBirthPlace(e.target.value)} placeholder={t('inputBrithPlace')} /> - - setBirthDate(date)} /> + + setBirthDate(date)} /> - - setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}> {setupSelectRole()} - - setDivisionId(val)} placeholder={t('selectDivision')} style={{ width: '100%' }}> {setupSelectDivisi()} @@ -291,14 +295,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi - + - + setAddress(e.target.value)} placeholder="Input address..." /> + + setAddress(e.target.value)} placeholder={t('inputAddress')} /> @@ -342,7 +346,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi - + setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> @@ -357,13 +361,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi return ( <> - {typeDialog == "Save" ? `Add` : "Edit"} Human Resource + {typeDialog == "Save" ? `Add` : "Edit"} {t('hr')} {typeDialog !== "Set" ? renderForm() : renderForm2()} {' '} - +