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

update project charter

pull/2/head
wahyuun 1 year ago
parent
d0b796df77
commit
1f3f820af6
2 changed files with 820 additions and 279 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. 986
      src/views/SimproV2/CreatedProyek/ViewProject.js
  2. 113
      src/views/SimproV2/CreatedProyek/index.js

986
src/views/SimproV2/CreatedProyek/ViewProject.js
Unescape View File

@ -1,271 +1,715 @@
import React, { useEffect, useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button } from 'reactstrap';
import moment from 'moment';
import 'antd/dist/antd.css';
import _ from 'underscore'
import './style.css'
import { formatThousand, sortBy } from '../../../const/CustomFunc';
const createMarkup = (element) => {
return {__html: element};
}
const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval }) => {
const [proyekName, setProyekName] = useState("")
const [description, setDescription] = useState("")
const [objectives, setObjective] = useState("")
const [projectSuccess, setProjectSuccess] = useState("")
const [participants, setParticipants] = useState("")
const [budget, setBudget] = useState("")
const [currency, setCurrency] = useState("")
const [testing, setTesting] = useState("")
const [milestone, setMilestone] = useState("")
const [potentialRisks, setPotentialRisks] = useState("")
const [approval, setApproval] = useState("")
const formatDate = "DD-MM-YYYY";
useEffect(() => {
if(!openDialog){
setProyekName("")
setDescription("")
setObjective("")
setProjectSuccess("")
setParticipants([])
setBudget("")
setCurrency("")
setTesting("")
setMilestone([])
setPotentialRisks("")
setApproval([])
}
}, [openDialog]);
useEffect(() => {
if(projectCharter && projectCharter!={}){
setProyekName(projectCharter.nama);
setDescription(projectCharter.keterangan);
setObjective(projectCharter.project_objectives);
setProjectSuccess(projectCharter.considered_success_when);
setBudget(projectCharter.rencana_biaya);
setPotentialRisks(projectCharter.potential_risk);
setTesting(projectCharter.testing_environment);
setCurrency(projectCharter.currency_symbol);
}
}, [projectCharter]);
useEffect(() => {
if(projectParticipant && projectParticipant.length > 0){
setParticipants(projectParticipant)
}
}, [projectParticipant]);
useEffect(() => {
if(projectMilestone && projectMilestone.length > 0){
setMilestone(projectMilestone)
}
}, [projectMilestone]);
useEffect(() => {
if(projectApproval && projectApproval.length > 0){
console.log("cek projectApproval", projectApproval)
setApproval(projectApproval)
}
}, [projectApproval]);
const RenderParticipant = () => {
if(participants && participants.length > 0){
return (
participants.map((val, index) => {
return(
<tr key={index}>
<td className='plr-10'>{val.tittle ? val.tittle : val.title}</td>
<td className='plr-10'>{val.name}</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const RenderMilestone = () => {
if(milestone && milestone.length > 0) {
let milestoneSorted = sortBy(milestone, {
prop: "deadline",
desc: false,
});
return (
milestoneSorted.map((val, index) => {
return(
<tr key={index}>
<td className='plr-10'>{val.status}</td>
{/* <td className='plr-10'>{moment(val.due_date).format(formatDate)}</td> */}
<td className='plr-10'>{moment(val.deadline).format(formatDate)}</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const RenderApproval = () => {
if(approval && approval.length > 0){
return (
approval.map((val, index) => {
return(
<tr key={index}>
<td className='plr-10'>{ (val.tittle ? val.tittle : val.title) +": "+val.name}<br></br>{"signature..............."}</td>
<td className='plr-10'>{index==0 ? moment(val.date_approval).format(formatDate) : ""}</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const renderForm = () => {
return (
<div>
<table className='table-charter'>
<thead>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Project name:
</td>
<td className='td-charter td-value plr-10'>
<div>{proyekName}</div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Project description:
</td>
<td className='td-charter td-value plr-10'>
<div>{description}</div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Project objectives:
</td>
<td className='td-charter td-value plr-10'>
<div>{objectives}</div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Project is considered successful when:
</td>
<td className='td-charter td-value plr-10'>
<div>{projectSuccess}</div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Project participants:
</td>
<td className='td-charter td-value no-mp'>
<table className="table-participant" style={{width:"100%"}}>
<thead className='border-bottom'>
<tr>
<th className='plr-10'>Title:</th>
<th className='plr-10'>Name:</th>
</tr>
</thead>
<tbody>
<RenderParticipant />
</tbody>
</table>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Budget:
</td>
<td className='td-charter td-value plr-10'>
<div>{currency} {formatThousand(budget)}</div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Testing Environment:
</td>
<td className='td-charter td-value plr-10'>
<div dangerouslySetInnerHTML={createMarkup(testing)}></div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Milestones:
</td>
<td className='td-charter td-value no-mp'>
<table className="table-participant" style={{width:"100%"}}>
<thead className='border-bottom'>
<tr>
<th className='plr-10'>Status:</th>
{/* <th className='plr-10'>Due:</th> */}
<th className='plr-10'>Deadline:</th>
</tr>
</thead>
<tbody>
<RenderMilestone />
</tbody>
</table>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Potential risks:
</td>
<td className='td-charter td-value plr-10'>
<div dangerouslySetInnerHTML={createMarkup(potentialRisks)}></div>
</td>
</tr>
<tr className='tr-charter'>
<td className='td-charter td-key plr-10'>
Approval:
</td>
<td className='td-charter td-value no-mp'>
<table className="table-participant" style={{width:"100%"}}>
<thead className='border-bottom'>
<tr>
<th className='plr-10'>Title and name:</th>
<th className='plr-10'>Date:</th>
</tr>
</thead>
<tbody>
<RenderApproval />
</tbody>
</table>
</td>
</tr>
</thead>
</table>
</div>
)
}
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
<ModalBody>
{renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={closeDialog}>Close</Button>
</ModalFooter>
</Modal>
</>
)
}
export default ViewProject;
import React, { useEffect, useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button } from 'reactstrap';
import moment from 'moment';
import 'antd/dist/antd.css';
import _ from 'underscore'
import './style.css'
import { formatThousand, sortBy } from '../../../const/CustomFunc';
const createMarkup = (element) => {
return {__html: element};
}
const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval, projectManager, projectK3, assignHR }) => {
const [proyekName, setProyekName] = useState("")
const [description, setDescription] = useState("")
const [shortname, setKodeShortname] = useState("")
const [lokasi, setLokasiKantor] = useState("")
const [durasi, setDurasiProyek] = useState("")
const [mulaiProyek, setMulaiProyek] = useState("")
const [objectives, setObjective] = useState("")
const [projectSuccess, setProjectSuccess] = useState("")
const [participants, setParticipants] = useState("")
const [budget, setBudget] = useState("")
const [currency, setCurrency] = useState("")
const [testing, setTesting] = useState("")
const [milestone, setMilestone] = useState("")
const [potentialRisks, setPotentialRisks] = useState("")
const [approval, setApproval] = useState("")
const [PM, setDataPM] = useState("")
const [K3Search, setDataK3Search] = useState("")
const [HR, setAssignHR] = useState("")
const formatDate = "DD-MM-YYYY";
useEffect(() => {
if(!openDialog){
setProyekName("")
setDescription("")
setKodeShortname("")
setLokasiKantor("")
setDurasiProyek("")
setMulaiProyek("")
setObjective("")
setProjectSuccess("")
setParticipants([])
setDataK3Search([])
setAssignHR([])
setBudget("")
setCurrency("")
setTesting("")
setMilestone([])
setPotentialRisks("")
setApproval([])
}
}, [openDialog]);
useEffect(() => {
if(projectCharter && projectCharter!={}){
setProyekName(projectCharter.nama);
setDescription(projectCharter.keterangan);
setKodeShortname(projectCharter.kode_sortname);
setLokasiKantor(projectCharter.lokasi_kantor);
setDurasiProyek(projectCharter.durasi_proyek);
setMulaiProyek(projectCharter.mulai_proyek);
setObjective(projectCharter.project_objectives);
setProjectSuccess(projectCharter.considered_success_when);
setBudget(projectCharter.rencana_biaya);
setPotentialRisks(projectCharter.potential_risk);
setTesting(projectCharter.testing_environment);
setCurrency(projectCharter.currency_symbol);
}
}, [projectCharter]);
useEffect(() => {
if(projectParticipant && projectParticipant.length > 0){
setParticipants(projectParticipant)
}
}, [projectParticipant]);
useEffect(() => {
if(projectMilestone && projectMilestone.length > 0){
setMilestone(projectMilestone)
}
}, [projectMilestone]);
useEffect(() => {
if(projectApproval && projectApproval.length > 0){
console.log("cek projectApproval", projectApproval)
setApproval(projectApproval)
}
}, [projectApproval]);
useEffect(() => {
if(projectManager && projectManager.length > 0){
console.log("cek data PM", projectManager)
setDataPM(projectManager)
}
}, [projectManager]);
useEffect(() => {
if(projectK3 && projectK3.length > 0){
setDataK3Search(projectK3)
}
}, [projectK3]);
useEffect(() => {
if(assignHR && assignHR.length > 0){
setAssignHR(assignHR)
}
}, [assignHR]);
const RenderParticipant = () => {
if(participants && participants.length > 0){
return (
participants.map((val, index) => {
return(
<tr key={index}>
<td style={{ fontWeight: 'bold' }} className='plr-10'>{val.tittle ? val.tittle : val.title}</td>
<td style={{ fontWeight: 'bold' }} className='plr-10'>:</td>
<td className='plr-10'>{val.name}</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const RenderK3Project = () => {
if (K3Search && K3Search.length > 0) {
const number = "123456789";
return (
K3Search.map((val, index) => {
const K3Number = number[index];
return(
<tr key={index}>
<td style={tdStyle}><p style={pStyle}>{ K3Number }</p></td>
<td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : val.checklist_k3_name}</p></td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const RenderAssignHR = () => {
if (HR && HR.length > 0) {
return (
HR.map((val, index) => {
return(
<tr key={index}>
<td style={tdStyle} className='plr-10'>
<p>{val.join_first_name ? val.join_first_name : val.join_first_name}</p>
</td>
<td style={tdStyle} className='plr-10'>
<p>{val.join_second_name ? val.join_second_name : val.join_second_name}</p>
</td>
<td style={tdStyle} className='plr-10'>
<p>{val.join_second_description ? val.join_second_description : val.join_second_description}</p>
</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const RenderMilestone = () => {
if (milestone && milestone.length > 0) {
let milestoneSorted = sortBy(milestone, {
prop: "deadline",
desc: false,
});
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
return (
milestoneSorted.map((val, index) => {
const milestoneLetter = alphabet[index];
return (
<tr key={index}>
<td style={tdStyle}>
<p style={{ ...pStyle, textAlign:'center' }}>{milestoneLetter}</p>
</td>
<td className='plr-10' style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>{val.status}</p>
</td>
<td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
<p>&nbsp;{moment(val.deadline).format(formatDate)}</p>
</td>
</tr>
);
})
);
} else {
return (<tr><td><br></br></td></tr>);
}
}
const RenderApproval = () => {
if(approval && approval.length > 0){
return (
approval.map((val, index) => {
return(
<tr key={index}>
<td className='plr-10'>{ (val.tittle ? val.tittle : val.title) +": "+val.name}<br></br>{"signature..............."}</td>
<td className='plr-10'>{index==0 ? moment(val.date_approval).format(formatDate) : ""}</td>
</tr>
)
})
)
}else{
return (<tr><td><br></br></td></tr>)
}
}
const tableStyle = {
border: '1px solid black',
borderSpacing: '0px',
width: '100%'
};
const thStyle = {
border: '1px solid black',
padding: '2pt',
backgroundColor: '#F2F2F2',
};
const tdStyle = {
border: '1px solid black',
};
const pStyle = {
marginLeft: '5pt',
marginTop: '2pt',
marginBottom: '2pt',
fontFamily: 'Arial',
fontSize: '10pt',
fontWeight: 'bold',
};
const italicStyle = {
fontStyle: 'italic'
};
const boldStyle = {
fontWeight: 'bold',
fontVariant: 'small-caps',
};
const emptyCellStyle = {
padding: '0',
};
const redStyle = {
fontFamily: 'Arial',
fontSize: '10pt',
color: '#FF0000',
};
const boldItalicStyle = {
...pStyle,
fontWeight: 'bold',
fontStyle: 'italic',
};
const renderForm = () => {
return (
<div>
<table style={tableStyle} className="a">
<tbody>
<tr>
<td colSpan="3" bgcolor="#F2F2F2" style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>1.0 Identifikasi PROYEK</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Nama Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{proyekName ?? '-'}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Project description</p>
</td>
<td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{description ?? '-'}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Nomor Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;{shortname ?? '-'}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Lokasi Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;{lokasi ?? '-' }</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Durasi Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;{durasi ?? '-'}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Tanggal Mulai Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;{moment(mulaiProyek).format(formatDate) ?? "-"}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Nilai Kontrak Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Anggaran Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{currency}. {formatThousand(budget)}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Sponsor Proyek</p>
</td>
<td>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>Adalah Divisi yang memiliki akun atas proyek ini berikut nama GM nya</p>
</td>
<td>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Project Manager</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;{PM}</p>
</td>
</tr>
<tr>
<td bgcolor="#D8D8D8" style={tdStyle}>
<p style={ pStyle }>Sumber Daya Manusia Untuk Proyek</p>
</td>
<td>
<span style={{ ...pStyle, fontWeight: 'normal',width:'100%' }}><RenderParticipant /></span>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a0">
<tbody>
<tr>
<td bgcolor="#F2F2F2" style={tdStyle}>
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>2.0 OBJEKTIF PROYEK (TUJUAN)</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={italicStyle}>{objectives}</p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a1">
<tbody>
<tr>
<th style={thStyle}>
<p style={{ ...pStyle, ...boldStyle }}>3.0 RUANG LINGKUP PROYEK</p>
</th>
</tr>
<tr>
<td style={tdStyle}>
<ul>
<li style={pStyle}>Jasa</li>
<li style={pStyle}>Material</li>
<li style={pStyle}>Implementasi</li>
<li style={pStyle}>dll</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a2">
<tbody>
<tr>
<td colSpan="3" style={thStyle}>
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>4.0 ANGGOTA PROYEK</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={pStyle}>Nama</p>
</td>
<td style={tdStyle}>
<p style={pStyle}>Posisi</p>
</td>
<td style={tdStyle}>
<p style={pStyle}>Tugas dan Tanggung Jawab</p>
</td>
</tr>
< RenderAssignHR/>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a3">
<tbody>
<tr>
<th style={thStyle}>
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>5.0 STRUKTUR ORGANISASI</p>
</th>
</tr>
<tr>
<th style={emptyCellStyle}>
<p>&nbsp;</p>
</th>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a4">
<tbody>
<tr>
<th colSpan="3" style={thStyle}>
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>6.0 TARGET UTAMA &amp; MILESTONE PENCAPAIAN</p>
</th>
</tr>
<tr>
<td style={thStyle}>
<p style={{ pStyle, textAlign:'center' }}>Item</p>
</td>
<td style={thStyle}>
<p style={{ pStyle, textAlign:'center' }}>Event Besar / Milestone</p>
</td>
<td style={thStyle}>
<p style={{ pStyle, textAlign:'center' }}>Tanggal</p>
</td>
</tr>
<RenderMilestone />
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a5">
<tbody>
<tr>
<td colSpan="2" style={thStyle}>
<p style={{ ...pStyle, fontVariant: 'small-caps' }}>7.0 ISU &amp; HAMBATAN UTAMA</p>
</td>
</tr>
<tr>
<td style={thStyle}>
<p style={{ ...pStyle, color: '#000000', fontWeight: 'bold', textAlign: 'center' }}>Tingkat Kepelikan Isu</p>
</td>
<td style={thStyle}>
<p style={{ ...pStyle, fontWeight: 'bold', textAlign: 'center' }}>Penjelasan</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
<p>&nbsp;</p>
<table style={tableStyle} className="a6">
<tbody>
<tr>
<td colSpan="3" style={thStyle}>
<p style={pStyle}>8.0 RESIKO </p>
</td>
</tr>
<tr>
<td>
<p dangerouslySetInnerHTML={createMarkup(potentialRisks)}></p>
</td>
</tr>
</tbody>
</table>
<p style={{ ...pStyle, fontSize: '10pt', fontStyle: 'italic' }}>*Skala 1 ke 7 (1 = kecil, 7 = besar)</p>
<p>&nbsp;</p>
<table style={tableStyle} className="a7">
<tbody>
<tr>
<th style={thStyle}>
<p style={pStyle}>9.0 KONSEKUENSI DARI KETERLAMBATAN</p>
</th>
</tr>
<tr>
<th>
<p style={italicStyle}>Adalah dampak dari jika terjadi keterlambatan atas implementasi proyek.</p>
<p style={italicStyle}>Sampaikan berapa besar kerugian jika dikenakan dengan denda maksimal.</p>
<p style={italicStyle}>Apa dampak pada potensi repeat order untuk proyek berikutnya.</p>
</th>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a8">
<tbody>
<tr>
<th style={thStyle}>
<p style={pStyle}>10.0 KRITERIA SUSKSES DARI PROYEK (HARUS TERUKUR)</p>
</th>
</tr>
<tr>
<th>
<p style={pStyle}>Waktu</p>
<p style={pStyle}>Biaya</p>
<p style={pStyle}>Benefit bagi customer: misalkan bisa memberikan layanan publik sebelum hari raya</p>
<p style={redStyle}>Zero accident Report: (tidak adanya kejadian yang memberikan dampak negative kepada Kesehatan tim dan warga sekitar)</p>
</th>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="a9">
<tbody>
<tr>
<th style={thStyle}>
<p style={pStyle}>11.0 ASUMSI (SUMBERDAYA UTAMA)</p>
</th>
</tr>
<tr>
<td>
<p style={pStyle}>
Disebutkan SDM/Tools apa yang bisa dan mandatory diperlukan untuk menunjang lancarnya implementasi, dan jika hal tersebut tidak terpenuhi maka potensi akan terjadinya kondisi yang tidak diinginkan akan menjadi semakin besar. Misalkan; harus tersedia 4 orang drafter yang sudah memahami alur proyek dengan baik.
</p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="aa">
<tbody>
<tr>
<td colSpan="3" style={thStyle}>
<p style={pStyle}><span style={{ fontWeight: 'bold' }}>12.0 CHECK LIST KESIAPAN PROYEK</span><span style={{ fontStyle: 'italic' }}>** item utama yang paling kritikal</span></p>
</td>
</tr>
<tr>
<td style={thStyle}>
<p style={pStyle}><span style={{ fontWeight: 'bold' }}>NO</span></p>
</td>
<td style={thStyle}>
<p style={pStyle}><span style={{ fontWeight: 'bold' }}>ITEM</span></p>
</td>
<td style={thStyle}>
<p style={pStyle}><span style={{ fontWeight: 'bold' }}>KETERSEDIAAN</span></p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={pStyle}>1</p>
</td>
<td style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>Gudang regional</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={pStyle}>2</p>
</td>
<td style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>Kantor regional</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={pStyle}>3</p>
</td>
<td style={tdStyle}>
<p style={{ ...pStyle, color: '#000000' }}>Tim yang bersertifikasi</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p style={{ ...pStyle, color: '#FF0000' }}>4</p>
</td>
<td style={tdStyle}>
<p style={{ ...pStyle, color: '#FF0000' }}>Alat Perlindungan Diri (Helm, Safety Harness, Dll)</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
<td style={tdStyle}>
<p style={pStyle}>.....</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
<td style={tdStyle}>
<p style={{ ...pStyle, fontStyle: 'italic' }}>Item di atas hanyalah contoh saja</p>
</td>
<td style={tdStyle}>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="ab">
<tbody>
<tr>
<td colSpan="3" style={thStyle}>
<p style={pStyle}>13.0 KESEHATAN & KESELAMATAN KERJA (K3)</p>
</td>
</tr>
<tr>
<td style={thStyle}>
<p style={pStyle}>NO</p>
</td>
<td style={thStyle}>
<p style={pStyle}>ITEM</p>
</td>
</tr>
<RenderK3Project/>
</tbody>
</table>
<p>&nbsp;</p>
<table style={tableStyle} className="ac">
<tbody>
<tr>
<th style={thStyle}>
<p style={pStyle}><b>13.0 KOMITMEN DISEPAKATI OLEH</b></p>
</th>
</tr>
<tr>
<RenderApproval/>
</tr>
</tbody>
</table>
</div>
)
}
return (
<>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
<ModalBody>
{renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={closeDialog}>Close</Button>
</ModalFooter>
</Modal>
</>
)
}
export default ViewProject;

113
src/views/SimproV2/CreatedProyek/index.js
Unescape View File

@ -37,6 +37,7 @@ import {
PROYEK_SEARCH,
PROYEK_SEARCH_BY_USER,
PROYEK_EDIT,
ASSIGN_HR_PROJECT_SEARCH,
PROYEK_DELETE,
TOOLS_RESOURCE_SEARCH,
MATERIAL_RESOURCE_SEARCH,
@ -132,6 +133,9 @@ const CreatedProyek = ({ params, ...props }) => {
const [projectParticipant, setProjectParticipant] = useState(null);
const [projectMilestone, setProjectMilestone] = useState(null);
const [projectApproval, setProjectApproval] = useState(null);
const [projectPM, setPM] = useState(null);
const [projectK3Search, setK3Search] = useState(null);
const [projectAssignHR, setProjectAssignHR] = useState(null);
const [loadVersionGantt, setLoadVersionGantt] = useState(false);
const [loadHierarchy, setLoadHierarchy] = useState(false);
@ -222,13 +226,14 @@ const CreatedProyek = ({ params, ...props }) => {
}
};
const handleGetDataPm = async () => {
const handleGetDataPm = async (text) => {
const result = await axios
.get(USER_LIST, HEADER)
.then((res) => res)
.catch((err) => err.response);
if (result && result.data && result.data.code === 200) {
setDataPM(result.data.data);
const dataRes = result.data.data;
setDataPM(dataRes);
} else {
}
};
@ -497,7 +502,10 @@ const CreatedProyek = ({ params, ...props }) => {
await getProjectMilestone(data.id);
await getProjectParticipant(data.id);
await getProjectApproval(data.id);
// await getDataProjectCharter(data.id);
await getK3toProject(data.id);
await getProjectAssignHR(data.id);
// await handleGetDataPm(data.id);
setPM(data.join_first_name);
setOpenDialogViewDetail(true);
};
@ -525,6 +533,32 @@ const CreatedProyek = ({ params, ...props }) => {
}
};
const getK3toProject = async (id) => {
const payload = {
"select": [
"id",
"proyek_id",
"checklist_k3_id"
],
"columns": [
{ "name": "proyek_id", "logic_operator": "=", "value": id, "operator": "AND" }
]
}
const URL = `${BASE_OSPRO}/api/project-to-checklist-k3/search`;
const result = await axios
.post(URL, payload, HEADER)
.then(res => res)
.catch((error) => error.response);
if(result && result.status==200){
console.log("cek get project to checklist k3",result.data.data)
let dataRes = result.data.data;
if (dataRes.length > 0) {
setK3Search(dataRes);
}
}
}
const handleSCurve = async (data) => {
getProjectDetail(data.id);
};
@ -537,8 +571,9 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
setProjectCharter(dataRes);
const {kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol} = result.data.data;
const dataToSend = { kode_sortname, nama, mulai_proyek, rencana_biaya, keterangan, durasi_proyek, project_objectives, potential_risk, currency_symbol };
setProjectCharter(dataToSend);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@ -546,6 +581,13 @@ const CreatedProyek = ({ params, ...props }) => {
const getProjectMilestone = async (id) => {
const payload = {
select: [
'id',
'proyek_id',
'status',
'due_date',
'deadline'
],
columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
joins: [],
orders: { columns: ["id"], ascending: true },
@ -559,7 +601,47 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
setProjectMilestone(dataRes);
const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
setProjectMilestone(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
};
const getProjectAssignHR = async (id) => {
const payload = {
select: [
"id",
"proyek_id",
"user_id",
"project_role"
],
columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
joins: [
{
name: "m_users",
column_join: "user_id",
column_results: ["name"],
},
{
name: "m_role_proyek",
column_join: "project_role",
column_results: ["name", "description"],
}
],
orders: { columns: ["id"], ascending: true },
paging: { start: 0, length: -1 },
};
// const url = PROJECT_MI(proyek_id)
const result = await axios
.post(ASSIGN_HR_PROJECT_SEARCH, payload, HEADER)
.then((res) => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
setProjectAssignHR(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@ -567,6 +649,12 @@ const CreatedProyek = ({ params, ...props }) => {
const getProjectParticipant = async (id) => {
const payload = {
select: [
"id",
"proyek_id",
"tittle",
"name"
],
columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
joins: [],
orders: { columns: ["id"], ascending: true },
@ -580,7 +668,8 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
setProjectParticipant(dataRes);
const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
setProjectParticipant(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@ -601,7 +690,8 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
setProjectApproval(dataRes);
const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
setProjectApproval(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@ -628,6 +718,8 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectParticipant(null);
setProjectMilestone(null);
setProjectCharter(null);
setK3Search(null);
setProjectAssignHR(null);
setOpenDialogViewDetail(false);
};
@ -639,6 +731,8 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectParticipant(null);
setProjectMilestone(null);
setProjectCharter(null);
setK3Search(null);
setProjectAssignHR(null);
}
setOpenDialogViewDetail(!openDialogViewDetail);
};
@ -1462,6 +1556,9 @@ const CreatedProyek = ({ params, ...props }) => {
projectParticipant={projectParticipant}
projectMilestone={projectMilestone}
projectApproval={projectApproval}
projectManager={projectPM}
projectK3={projectK3Search}
assignHR={projectAssignHR}
/>
),
[openDialogViewDetail]

Write Preview
Loading…
Cancel
Save