From 1f3f820af67b724f1d4ea359558f53fbbfbb8315 Mon Sep 17 00:00:00 2001 From: wahyuun Date: Tue, 5 Sep 2023 16:59:34 +0700 Subject: [PATCH] update project charter --- .../SimproV2/CreatedProyek/ViewProject.js | 986 +++++++++++++----- src/views/SimproV2/CreatedProyek/index.js | 113 +- 2 files changed, 820 insertions(+), 279 deletions(-) diff --git a/src/views/SimproV2/CreatedProyek/ViewProject.js b/src/views/SimproV2/CreatedProyek/ViewProject.js index 580b34e..d31f48f 100644 --- a/src/views/SimproV2/CreatedProyek/ViewProject.js +++ b/src/views/SimproV2/CreatedProyek/ViewProject.js @@ -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( - - {val.tittle ? val.tittle : val.title} - {val.name} - - ) - }) - ) - }else{ - return (

) - } - } - - const RenderMilestone = () => { - if(milestone && milestone.length > 0) { - let milestoneSorted = sortBy(milestone, { - prop: "deadline", - desc: false, - }); - return ( - milestoneSorted.map((val, index) => { - return( - - {val.status} - {/* {moment(val.due_date).format(formatDate)} */} - {moment(val.deadline).format(formatDate)} - - ) - }) - ) - }else{ - return (

) - } - } - - const RenderApproval = () => { - if(approval && approval.length > 0){ - return ( - approval.map((val, index) => { - return( - - { (val.tittle ? val.tittle : val.title) +": "+val.name}

{"signature..............."} - {index==0 ? moment(val.date_approval).format(formatDate) : ""} - - ) - }) - ) - }else{ - return (

) - } - } - - - const renderForm = () => { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Project name: - -
{proyekName}
-
- Project description: - -
{description}
-
- Project objectives: - -
{objectives}
-
- Project is considered successful when: - -
{projectSuccess}
-
- Project participants: - - - - - - - - - - - -
Title:Name:
-
- Budget: - -
{currency} {formatThousand(budget)}
-
- Testing Environment: - -
-
- Milestones: - - - - - - {/* */} - - - - - - -
Status:Due:Deadline:
-
- Potential risks: - -
-
- Approval: - - - - - - - - - - - -
Title and name:Date:
-
-
- ) - } - - return ( - <> - - Project - - {renderForm()} - - - - - - - ) - -} - -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( + + {val.tittle ? val.tittle : val.title} + : + {val.name} + + ) + }) + ) + }else{ + return (

) + } + } + + const RenderK3Project = () => { + if (K3Search && K3Search.length > 0) { + const number = "123456789"; + return ( + K3Search.map((val, index) => { + const K3Number = number[index]; + return( + +

{ K3Number }

+

{val.checklist_k3_name ? val.checklist_k3_name : val.checklist_k3_name}

+ + ) + }) + ) + }else{ + return (

) + } + } + + const RenderAssignHR = () => { + if (HR && HR.length > 0) { + return ( + HR.map((val, index) => { + return( + + +

{val.join_first_name ? val.join_first_name : val.join_first_name}

+ + +

{val.join_second_name ? val.join_second_name : val.join_second_name}

+ + +

{val.join_second_description ? val.join_second_description : val.join_second_description}

+ + + ) + }) + ) + }else{ + return (

) + } + } + + 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 ( + + +

{milestoneLetter}

+ + +

{val.status}

+ + +

 {moment(val.deadline).format(formatDate)}

+ + + ); + }) + ); + } else { + return (

); + } + } + + + const RenderApproval = () => { + if(approval && approval.length > 0){ + return ( + approval.map((val, index) => { + return( + + { (val.tittle ? val.tittle : val.title) +": "+val.name}

{"signature..............."} + {index==0 ? moment(val.date_approval).format(formatDate) : ""} + + ) + }) + ) + }else{ + return (

) + } + } + + 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 ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

1.0 Identifikasi PROYEK

+
+

Nama Proyek

+ 		+

{proyekName ?? '-'}

+
+

Project description

+ 		+

{description ?? '-'}

+
+

Nomor Proyek

+ 		+

 {shortname ?? '-'}

+
+

Lokasi Proyek

+ 		+

 {lokasi ?? '-' }

+
+

Durasi Proyek

+ 		+

 {durasi ?? '-'}

+
+

Tanggal Mulai Proyek

+ 		+

 {moment(mulaiProyek).format(formatDate) ?? "-"}

+
+

Nilai Kontrak Proyek

+ 		+

 

+
+

Anggaran Proyek

+ 		+

{currency}. {formatThousand(budget)}

+
+

Sponsor Proyek

+ 		+

Adalah Divisi yang memiliki akun atas proyek ini berikut nama GM nya

+ 		+

 

+
+

Project Manager

+ 		+

 {PM}

+
+

Sumber Daya Manusia Untuk Proyek

+ 		+ +
+

 

+ + + + + + + + + +
+

2.0 OBJEKTIF PROYEK (TUJUAN)

+
+

{objectives}

+
+

 

+ + + + + + + + + +
+

3.0 RUANG LINGKUP PROYEK

+
+
    +
  • Jasa
    • +
  • Material
    • +
  • Implementasi
    • +
  • dll
    • +
+
+

 

+ + + + + + + + + + + < RenderAssignHR/> + +
+

4.0 ANGGOTA PROYEK

+
+

Nama

+ 		+

Posisi

+ 		+

Tugas dan Tanggung Jawab

+
+

 

+ + + + + + + + + +
+

5.0 STRUKTUR ORGANISASI

+
+

 

+
+

 

+ + + + + + + + + + + + +
+

6.0 TARGET UTAMA & MILESTONE PENCAPAIAN

+
+

Item

+ 		+

Event Besar / Milestone

+ 		+

Tanggal

+
+

 

+ + + + + + + + + + + + + + + + + + + + + + +
+

7.0 ISU & HAMBATAN UTAMA

+
+

Tingkat Kepelikan Isu

+ 		+

Penjelasan

+
+

 

+ 		+

 

+
+

 

+ 		+

 

+
+

 

+ 		+

 

+
+

*Skala 1 ke 7 (1 = kecil, 7 = besar)

+

 

+ + + + + + + + + +
+

8.0 RESIKO

+
+

+
+

*Skala 1 ke 7 (1 = kecil, 7 = besar)

+

 

+ + + + + + + + + +
+

9.0 KONSEKUENSI DARI KETERLAMBATAN

+
+

Adalah dampak dari jika terjadi keterlambatan atas implementasi proyek.

+

Sampaikan berapa besar kerugian jika dikenakan dengan denda maksimal.

+

Apa dampak pada potensi repeat order untuk proyek berikutnya.

+
+

 

+ + + + + + + + + +
+

10.0 KRITERIA SUSKSES DARI PROYEK (HARUS TERUKUR)

+
+

Waktu

+

Biaya

+

Benefit bagi customer: misalkan bisa memberikan layanan publik sebelum hari raya

+

Zero accident Report: (tidak adanya kejadian yang memberikan dampak negative kepada Kesehatan tim dan warga sekitar)

+
+

 

+ + + + + + + + + +
+

11.0 ASUMSI (SUMBERDAYA UTAMA)

+
+

+ 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. +

+
+

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

12.0 CHECK LIST KESIAPAN PROYEK** item utama yang paling kritikal

+
+

NO

+ 		+

ITEM

+ 		+

KETERSEDIAAN

+
+

1

+ 		+

Gudang regional

+ 		+

 

+
+

2

+ 		+

Kantor regional

+ 		+

 

+
+

3

+ 		+

Tim yang bersertifikasi

+ 		+

 

+
+

4

+ 		+

Alat Perlindungan Diri (Helm, Safety Harness, Dll)

+ 		+

 

+
+

 

+ 		+

.....

+ 		+

 

+
+

 

+ 		+

Item di atas hanyalah contoh saja

+ 		+

 

+
+

 

+ + + + + + + + + + + +
+

13.0 KESEHATAN & KESELAMATAN KERJA (K3)

+
+

NO

+ 		+

ITEM

+
+

 

+ + + + + + + + + +
+

13.0 KOMITMEN DISEPAKATI OLEH

+
+
+ ) + } + + return ( + <> + + Project + + {renderForm()} + + + + + + + ) + +} + +export default ViewProject; diff --git a/src/views/SimproV2/CreatedProyek/index.js b/src/views/SimproV2/CreatedProyek/index.js index a26c26c..6a5c10f 100644 --- a/src/views/SimproV2/CreatedProyek/index.js +++ b/src/views/SimproV2/CreatedProyek/index.js @@ -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]