Browse Source

show Code Project and update default value form

pull/2/head
farhan048 2 years ago
parent
commit
0e09ac0e8a
  1. 35
      src/views/Dashboard/DashboardBOD.js
  2. 54
      src/views/SimproV2/ResourceWorker/DialogForm.js

35
src/views/Dashboard/DashboardBOD.js

@ -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>
) )
@ -432,7 +434,7 @@ 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
} }
} }
@ -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: [
@ -729,7 +731,7 @@ 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={{
@ -748,8 +750,15 @@ const DashboardBOD = () => {
size: 9, size: 9,
}, },
} }
},
y: {
ticks: {
callback: function (value) {
return toRupiah(value, { useUnit: 'jt' });
}
} }
}, },
},
plugins: { plugins: {
legend: { legend: {
display: true, display: true,
@ -761,8 +770,8 @@ const DashboardBOD = () => {
datalabels: { datalabels: {
color: '#FFFFFF', color: '#FFFFFF',
// rotation: -90 // rotation: -90
formatter: function(value, context) { formatter: function (value, context) {
return value ? toRupiah(value, {useUnit: 'jt'}) : 0 return value ? toRupiah(value, { useUnit: 'jt' }) : 0
} }
} }
} }
@ -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

@ -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>
</> </>

Loading…
Cancel
Save