ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

show Code Project and update default value form

pull/2/head
farhan048 2 years ago
parent
dd6bb267e9
commit
0e09ac0e8a
2 changed files with 205 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 343
      src/views/Dashboard/DashboardBOD.js
  2. 54
      src/views/SimproV2/ResourceWorker/DialogForm.js

343
src/views/Dashboard/DashboardBOD.js
Unescape View File

@ -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 (
<div style={{position: 'absolute', float: 'right'}}>
<div style={{ position: 'absolute', float: 'right' }}>
<Icon icon="ion:filter" width={30} height={30} color="#FFFFFF" />
</div>
)
}
return (
<div style={{ marginLeft: -25, marginRight: -25 }}>
{/* <FloatingFilter /> */}
<NotificationContainer />
@ -398,14 +400,14 @@ const DashboardBOD = () => {
<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>Detailed View</div>
</div>
}
</div>
<div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>
{READY_PROJECT_EXPENDITURE ?
PROJECT_EXPENDITURE ?
<Bar
options={{
indexAxis: 'y',
<Bar
options={{
indexAxis: 'y',
scales: {
x: {
ticks: {
@ -415,51 +417,51 @@ const DashboardBOD = () => {
}
}
},
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
}
],
}}
/>
:
<NoDataChart />
],
}}
/>
:
<NoDataChart />
:
<ContentLoader
speed={2}
@ -473,8 +475,8 @@ const DashboardBOD = () => {
<rect x="0" y="23" rx="5" ry="5" width="75%" height="18" />
<rect x="0" y="47" rx="5" ry="5" width="100%" height="18" />
<rect x="0" y="70" rx="5" ry="5" width="45%" height="18" /> */}
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" />
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" />
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" />
</ContentLoader>
}
@ -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 = () => {
<div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>
{READY_PROJECT_BY_PHASE ?
PROJECT_BY_PHASE && PROJECT_BY_PHASE.length > 0 ?
<Bar
options={{
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
},
},
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
<Bar
options={{
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
},
},
datalabels: {
color: '#FFFFFF'
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
datalabels: {
color: '#FFFFFF'
}
}
}
}}
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
},
],
}}
/>
:
<NoDataChart />
}}
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
},
],
}}
/>
:
<NoDataChart />
:
<ContentLoader
speed={2}
@ -709,8 +711,8 @@ const DashboardBOD = () => {
<rect x="0" y="23" rx="5" ry="5" width="75%" height="18" />
<rect x="0" y="47" rx="5" ry="5" width="100%" height="18" />
<rect x="0" y="70" rx="5" ry="5" width="45%" height="18" /> */}
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" />
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" />
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" />
</ContentLoader>
}
@ -729,77 +731,84 @@ const DashboardBOD = () => {
</div>
</div>
<div style={{ position: 'relative', height: '20vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>
{ READY_PROJECT_INVOICE_VS_CASH_IN ?
{READY_PROJECT_INVOICE_VS_CASH_IN ?
PROJECT_INVOICE_VS_CASH_IN ?
<Bar
options={{
elements: {
bar: {
borderWidth: 2,
<Bar
options={{
elements: {
bar: {
borderWidth: 2,
},
},
},
indexAxis: 'x',
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
ticks: {
font: {
size: 9,
},
}
}
},
plugins: {
legend: {
display: true,
position: 'right',
labels: {
boxWidth: 10
}
indexAxis: 'x',
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
ticks: {
font: {
size: 9,
},
}
},
y: {
ticks: {
callback: function (value) {
return toRupiah(value, { useUnit: 'jt' });
}
}
},
},
datalabels: {
color: '#FFFFFF',
// rotation: -90
formatter: function(value, context) {
return value ? toRupiah(value, {useUnit: 'jt'}) : 0
plugins: {
legend: {
display: true,
position: 'right',
labels: {
boxWidth: 10
}
},
datalabels: {
color: '#FFFFFF',
// rotation: -90
formatter: function (value, context) {
return value ? toRupiah(value, { useUnit: 'jt' }) : 0
}
}
}
}
}}
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
}
],
}}
/>
:
<NoDataChart />
}}
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
}
],
}}
/>
:
<NoDataChart />
:
<ContentLoaderChart type="vertical-bar" />
}
}
</div>
</div>
</Col>
@ -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:

54
src/views/SimproV2/ResourceWorker/DialogForm.js
Unescape View File

@ -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
<Form>
<Row>
<Col md={12}>
<span style={{ color: "red" }}>*</span> Wajib diisi.
<span style={{ color: "red" }}>*</span>{t('required')}.
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">NIK (KTP / ID Card) <span style={{ color: "red" }}>*</span></Label>
<Label className="capitalize">{t('nik')} <span style={{ color: "red" }}>*</span></Label>
{/* <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input NIK (KTP)...`} maxLength="16" /> */}
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" />
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={t('inputNik')} maxLength="16" />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Resource Name <span style={{ color: "red" }}>*</span></Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} />
<Label className="capitalize">{t('nameHR')}<span style={{ color: "red" }}>*</span></Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={t('inputName')} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Employee Type <span style={{ color: "red" }}>*</span></Label>
<Label className="capitalize">{t('employeeType')} <span style={{ color: "red" }}>*</span></Label>
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option>
@ -234,7 +238,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Col md={6}>
<FormGroup>
<Label className="capitalize">Phone No.</Label>
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={`Input phone number...`} maxLength="15" />
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" />
</FormGroup>
</Col>
</Row>
@ -242,13 +246,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Col md={6}>
<FormGroup>
<Label className="capitalize">Email</Label>
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} />
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Gender</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}>
<Label className="capitalize">{t('gender')}</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}>
<Option value="Male">Male</Option>
<Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */}
@ -259,30 +263,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Place</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} />
<Label className="capitalize">{t('birthPlace')}</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={t('inputBrithPlace')} />
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Birth Date</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} />
<Label className="capitalize">{t('birthDate')}</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} placeholder={t('inputBrithDate')} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Role <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}>
<Label className="capitalize">{t('roles')} <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}>
{setupSelectRole()}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Division <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}>
<Label className="capitalize">{t('division')} <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder={t('selectDivision')} style={{ width: '100%' }}>
{setupSelectDivisi()}
</Select>
</FormGroup>
@ -291,14 +295,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row>
<Col md={6}>
<Label className="capitalize">Status Resource</Label>
<Label className="capitalize">Status</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option>
</Select>
</Col>
<Col md={6}>
<Label className="capitalize">Pembatasan wilayah kerja</Label>
<Label className="capitalize">{t('restrictions')}</Label>
<Select style={{ width: "100%" }} defaultValue={statusRestriction} onChange={(e) => setStatusRestriction(e)}>
<Option value={true}>Ya</Option>
<Option value={false}>Tidak</Option>
@ -306,8 +310,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Address</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." />
<Label className="capitalize">{t('address')}</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder={t('inputAddress')} />
</FormGroup>
</Col>
@ -342,7 +346,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col>
<Col md={6}>
<FormGroup>
<Label className="capitalize">Retry Password</Label>
<Label className="capitalize">{t('retryPassword')}</Label>
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup>
</Col>
@ -357,13 +361,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('hr')}</ModalHeader>
<ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
</ModalFooter>
</Modal>
</>

Write Preview
Loading…
Cancel
Save