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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 321
      src/views/Dashboard/DashboardBOD.js
  2. 54
      src/views/SimproV2/ResourceWorker/DialogForm.js

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

@ -318,11 +318,12 @@ const DashboardBOD = () => {
tableData.push({ tableData.push({
"id": item.id, "id": item.id,
"last_gantt_id": item.lastGanttId?.last_gantt_id, "last_gantt_id": item.lastGanttId?.last_gantt_id,
"kode_sortname": item.kode_sortname?.kode_sortname ? item.kode_sortname : "-",
"project_name": item.nama, "project_name": item.nama,
"project_manager": item.pm?.name, "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') : '-'}`, "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}`, "manpower": `${item.manPowers}/${total_manpowers}`,
"project_budget": item.rencana_biaya ? toRupiah(item.rencana_biaya) : '-' , "project_budget": item.rencana_biaya ? toRupiah(item.rencana_biaya) : '-',
"invoice": item.invoice?.invoiced ? toRupiah(item.invoice.invoiced) : '-', "invoice": item.invoice?.invoiced ? toRupiah(item.invoice.invoiced) : '-',
"cash_in": item.invoice?.paid ? toRupiah(item.invoice.paid) : '-', "cash_in": item.invoice?.paid ? toRupiah(item.invoice.paid) : '-',
"outstanding_balance": outstanding_balance, "outstanding_balance": outstanding_balance,
@ -344,6 +345,7 @@ const DashboardBOD = () => {
isReady={READY_TABLE_DETAIL_EXPENDITURE} isReady={READY_TABLE_DETAIL_EXPENDITURE}
title="Detail Project Expenditure" title="Detail Project Expenditure"
tableHeader={[ tableHeader={[
{ title: "Project Code", key: "kode_sortname" },
{ title: "Project Name", key: "project_name" }, { title: "Project Name", key: "project_name" },
{ title: "Project Manager", key: "project_manager" }, { title: "Project Manager", key: "project_manager" },
{ title: "Planned Interval", key: "planned_interval" }, { title: "Planned Interval", key: "planned_interval" },
@ -366,7 +368,7 @@ const DashboardBOD = () => {
const FloatingFilter = () => { const FloatingFilter = () => {
return ( return (
<div style={{position: 'absolute', float: 'right'}}> <div style={{ position: 'absolute', float: 'right' }}>
<Icon icon="ion:filter" width={30} height={30} color="#FFFFFF" /> <Icon icon="ion:filter" width={30} height={30} color="#FFFFFF" />
</div> </div>
) )
@ -403,9 +405,9 @@ const DashboardBOD = () => {
<div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}> <div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>
{READY_PROJECT_EXPENDITURE ? {READY_PROJECT_EXPENDITURE ?
PROJECT_EXPENDITURE ? PROJECT_EXPENDITURE ?
<Bar <Bar
options={{ options={{
indexAxis: 'y', indexAxis: 'y',
scales: { scales: {
x: { x: {
ticks: { ticks: {
@ -415,51 +417,51 @@ const DashboardBOD = () => {
} }
} }
}, },
elements: { elements: {
bar: { bar: {
borderWidth: 2, borderWidth: 2,
},
}, },
}, responsive: true,
responsive: true, maintainAspectRatio: false,
maintainAspectRatio: false, plugins: {
plugins: { legend: {
legend: { display: false,
display: false, position: 'right',
position: 'right', labels: {
labels: { boxWidth: 10
boxWidth: 10 }
},
datalabels: {
color: '#FFFFFF',
formatter: function (value, context) {
return value ? toRupiah(value, { useUnit: 'jt' }) : 0
}
} }
}, },
datalabels: { }}
color: '#FFFFFF', data={{
formatter: function(value, context) { labels: ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'],
return value ? toRupiah(value, { useUnit: 'jt' }) : 0 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'], <NoDataChart />
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 />
: :
<ContentLoader <ContentLoader
speed={2} speed={2}
@ -491,7 +493,7 @@ const DashboardBOD = () => {
title="Project By Financial Health" title="Project By Financial Health"
subtitle="Amount of project grouped by financial health." subtitle="Amount of project grouped by financial health."
chartType="pie" chartType="pie"
chartData={ PROJECT_BY_FINANCIAL_HEALTH ? { chartData={PROJECT_BY_FINANCIAL_HEALTH ? {
labels: ["Cost Overrun", "Early Warning", "On Budget"], labels: ["Cost Overrun", "Early Warning", "On Budget"],
datasets: [ datasets: [
{ {
@ -517,7 +519,7 @@ const DashboardBOD = () => {
title="Project By Schedule Health" title="Project By Schedule Health"
subtitle="Amount of project grouped by Schedule health." subtitle="Amount of project grouped by Schedule health."
chartType="pie" chartType="pie"
chartData={ PROJECT_BY_SCHEDULE_HEALTH ? { chartData={PROJECT_BY_SCHEDULE_HEALTH ? {
labels: ["Behind Schedule", "Early Warning", "On Schedule"], labels: ["Behind Schedule", "Early Warning", "On Schedule"],
datasets: [ 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: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.name) : [], labels: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.name) : [],
datasets: [ datasets: [
@ -618,13 +620,13 @@ const DashboardBOD = () => {
}, },
datalabels: { datalabels: {
color: '#FFFFFF', color: '#FFFFFF',
formatter: function(value, context) { formatter: function (value, context) {
return value ? toRupiah(value, {useUnit: 'jt'}) : 0 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: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.name) : [], labels: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.name) : [],
datasets: [ datasets: [
@ -656,46 +658,46 @@ const DashboardBOD = () => {
<div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}> <div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>
{READY_PROJECT_BY_PHASE ? {READY_PROJECT_BY_PHASE ?
PROJECT_BY_PHASE && PROJECT_BY_PHASE.length > 0 ? PROJECT_BY_PHASE && PROJECT_BY_PHASE.length > 0 ?
<Bar <Bar
options={{ options={{
indexAxis: 'y', indexAxis: 'y',
elements: { elements: {
bar: { bar: {
borderWidth: 2, borderWidth: 2,
}, },
},
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}, },
datalabels: { responsive: true,
color: '#FFFFFF' maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
datalabels: {
color: '#FFFFFF'
}
} }
} }}
}} data={{
data={{ // labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"],
// labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"], labels: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.name) : [],
labels: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.name) : [], datasets: [
datasets: [ {
{ label: "",
label: "", // data: [3, 1, 2, 3, 7],
// data: [3, 1, 2, 3, 7], // borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
// borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"], // backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
// backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"], data: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.totalProject) : [],
data: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.totalProject) : [], borderColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [],
borderColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [], backgroundColor: 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,
borderWidth: 2, borderRadius: 5,
borderRadius: 5, borderSkipped: false
borderSkipped: false },
}, ],
], }}
}} />
/> :
: <NoDataChart />
<NoDataChart />
: :
<ContentLoader <ContentLoader
speed={2} speed={2}
@ -729,77 +731,84 @@ const DashboardBOD = () => {
</div> </div>
</div> </div>
<div style={{ position: 'relative', height: '20vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}> <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 ? PROJECT_INVOICE_VS_CASH_IN ?
<Bar <Bar
options={{ options={{
elements: { elements: {
bar: { bar: {
borderWidth: 2, borderWidth: 2,
},
}, },
}, indexAxis: 'x',
indexAxis: 'x', responsive: true,
responsive: true, maintainAspectRatio: false,
maintainAspectRatio: false, scales: {
scales: { x: {
x: { ticks: {
ticks: { font: {
font: { size: 9,
size: 9, },
}, }
} },
} y: {
}, ticks: {
plugins: { callback: function (value) {
legend: { return toRupiah(value, { useUnit: 'jt' });
display: true, }
position: 'right', }
labels: { },
boxWidth: 10
}
}, },
datalabels: { plugins: {
color: '#FFFFFF', legend: {
// rotation: -90 display: true,
formatter: function(value, context) { position: 'right',
return value ? toRupiah(value, {useUnit: 'jt'}) : 0 labels: {
boxWidth: 10
}
},
datalabels: {
color: '#FFFFFF',
// rotation: -90
formatter: function (value, context) {
return value ? toRupiah(value, { useUnit: 'jt' }) : 0
}
} }
} }
} }}
}} data={{
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: [["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) : [],
labels: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.project) : [], datasets: [
datasets: [ {
{ label: "Invoiced",
label: "Invoiced", // data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
// 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) : [],
data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.invoiced) : [], borderColor: '#A36A16',
borderColor: '#A36A16', backgroundColor: '#A36A16',
backgroundColor: '#A36A16', // borderWidth: 2,
// borderWidth: 2, borderRadius: 5,
borderRadius: 5, borderSkipped: false
borderSkipped: false },
}, {
{ label: "Cash In",
label: "Cash In", // data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
// 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) : [],
data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.paid) : [], borderColor: '#4C4747',
borderColor: '#4C4747', backgroundColor: '#4C4747',
backgroundColor: '#4C4747', // borderWidth: 2,
// borderWidth: 2, borderRadius: 5,
borderRadius: 5, borderSkipped: false
borderSkipped: false }
} ],
], }}
}} />
/> :
: <NoDataChart />
<NoDataChart />
: :
<ContentLoaderChart type="vertical-bar" /> <ContentLoaderChart type="vertical-bar" />
} }
</div> </div>
</div> </div>
</Col> </Col>
@ -813,7 +822,7 @@ const DashboardBOD = () => {
mode={healthPerDivisionMode} mode={healthPerDivisionMode}
changeMode={(mode) => setHealthPerDivisionMode(mode)} changeMode={(mode) => setHealthPerDivisionMode(mode)}
chartType="vertical-bar" 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: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'], // labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels: 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 'antd/dist/antd.css';
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
import { ROLE_SEARCH } from '../../../const/ApiConst' import { ROLE_SEARCH } from '../../../const/ApiConst'
import { useTranslation } from 'react-i18next';
const { Option } = Select const { Option } = Select
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
@ -41,6 +42,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
const [divisionId, setDivisionId] = useState('') const [divisionId, setDivisionId] = useState('')
const [statusResource, setStatusResource] = useState('active') const [statusResource, setStatusResource] = useState('active')
const [statusRestriction, setStatusRestriction] = useState(false) const [statusRestriction, setStatusRestriction] = useState(false)
const { t } = useTranslation()
useEffect(() => { useEffect(() => {
if (typeDialog === "Edit" || typeDialog === "Set") { if (typeDialog === "Edit" || typeDialog === "Set") {
console.log("cel data Edit", dataEdit) console.log("cel data Edit", dataEdit)
@ -61,6 +63,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
setRoleId(dataEdit.role_id) setRoleId(dataEdit.role_id)
setDivisionId(dataEdit.divisi_id) setDivisionId(dataEdit.divisi_id)
setAddress(dataEdit.address) setAddress(dataEdit.address)
setStatusRestriction(dataEdit.status_boundary)
} else { } else {
setId(0) setId(0)
setResourceName('') setResourceName('')
@ -80,6 +83,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
setDivisionId('') setDivisionId('')
setAddress('') setAddress('')
setStatusResource('active') setStatusResource('active')
setStatusRestriction(false)
} }
}, [dataEdit, openDialog]) }, [dataEdit, openDialog])
@ -201,28 +205,28 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Form> <Form>
<Row> <Row>
<Col md={12}> <Col md={12}>
<span style={{ color: "red" }}>*</span> Wajib diisi. <span style={{ color: "red" }}>*</span>{t('required')}.
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <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.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> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Resource Name <span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">{t('nameHR')}<span style={{ color: "red" }}>*</span></Label>
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} /> <Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={t('inputName')} />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <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%' }}> <Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
<Option value={'employee'}>Employee</Option> <Option value={'employee'}>Employee</Option>
<Option value={'subcon'}>Subcon</Option> <Option value={'subcon'}>Subcon</Option>
@ -234,7 +238,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Phone No.</Label> <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> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -242,13 +246,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Email</Label> <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> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Gender</Label> <Label className="capitalize">{t('gender')}</Label>
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}> <Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}>
<Option value="Male">Male</Option> <Option value="Male">Male</Option>
<Option value="Female">Female</Option> <Option value="Female">Female</Option>
{/* <Option value="Other">Other</Option> */} {/* <Option value="Other">Other</Option> */}
@ -259,30 +263,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Birth Place</Label> <Label className="capitalize">{t('birthPlace')}</Label>
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> <Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={t('inputBrithPlace')} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Birth Date</Label> <Label className="capitalize">{t('birthDate')}</Label>
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} /> <DatePicker style={{ width: "100%" }} value={birthDate} placeholder={t('inputBrithDate')} onChange={(date, dateString) => setBirthDate(date)} />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Role <span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">{t('roles')} <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}> <Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}>
{setupSelectRole()} {setupSelectRole()}
</Select> </Select>
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Division <span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">{t('division')} <span style={{ color: "red" }}>*</span></Label>
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}> <Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder={t('selectDivision')} style={{ width: '100%' }}>
{setupSelectDivisi()} {setupSelectDivisi()}
</Select> </Select>
</FormGroup> </FormGroup>
@ -291,14 +295,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
<Row> <Row>
<Col md={6}> <Col md={6}>
<Label className="capitalize">Status Resource</Label> <Label className="capitalize">Status</Label>
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}> <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)}>
<Option value={'active'}>Active</Option> <Option value={'active'}>Active</Option>
<Option value={'inactive'}>Inactive</Option> <Option value={'inactive'}>Inactive</Option>
</Select> </Select>
</Col> </Col>
<Col md={6}> <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)}> <Select style={{ width: "100%" }} defaultValue={statusRestriction} onChange={(e) => setStatusRestriction(e)}>
<Option value={true}>Ya</Option> <Option value={true}>Ya</Option>
<Option value={false}>Tidak</Option> <Option value={false}>Tidak</Option>
@ -306,8 +310,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Address</Label> <Label className="capitalize">{t('address')}</Label>
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." /> <Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder={t('inputAddress')} />
</FormGroup> </FormGroup>
</Col> </Col>
@ -342,7 +346,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <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...`} /> <Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} />
</FormGroup> </FormGroup>
</Col> </Col>
@ -357,13 +361,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
return ( return (
<> <>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> <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> <ModalBody>
{typeDialog !== "Set" ? renderForm() : renderForm2()} {typeDialog !== "Set" ? renderForm() : renderForm2()}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} <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> </ModalFooter>
</Modal> </Modal>
</> </>

Write Preview
Loading…
Cancel
Save