update project charter

src/views/SimproV2/CreatedProyek/ViewProject.js

@@ -1,271 +1,715 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button } from 'reactstrap';
+import { Button } from 'reactstrap';
-import moment from 'moment';
+import moment from 'moment';
-import 'antd/dist/antd.css';
+import 'antd/dist/antd.css';
-import _ from 'underscore'
+import _ from 'underscore'
-import './style.css'
+import './style.css'
-import { formatThousand, sortBy } from '../../../const/CustomFunc';
+import { formatThousand, sortBy } from '../../../const/CustomFunc';
-
+
-const createMarkup = (element) => {
+const createMarkup = (element) => {
-  return {__html: element};
+  return {__html: element};
-}
+}
-
+
-const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval }) => {
+  const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval, projectManager, projectK3, assignHR }) => {
-  
+  const [proyekName, setProyekName] = useState("")
-  const [proyekName, setProyekName] = useState("")
+  const [description, setDescription] = useState("")
-  const [description, setDescription] = useState("")
+  const [shortname, setKodeShortname] = useState("")
-  const [objectives, setObjective] = useState("")
+  const [lokasi, setLokasiKantor] = useState("")
-  const [projectSuccess, setProjectSuccess] = useState("")
+  const [durasi, setDurasiProyek] = useState("")
-  const [participants, setParticipants] = useState("")
+  const [mulaiProyek, setMulaiProyek] = useState("")
-  const [budget, setBudget] = useState("")
+  const [objectives, setObjective] = useState("")
-  const [currency, setCurrency] = useState("")
+  const [projectSuccess, setProjectSuccess] = useState("")
-  const [testing, setTesting] = useState("")
+  const [participants, setParticipants] = useState("")
-  const [milestone, setMilestone] = useState("")
+  const [budget, setBudget] = useState("")
-  const [potentialRisks, setPotentialRisks] = useState("")
+  const [currency, setCurrency] = useState("")
-  const [approval, setApproval] = useState("")
+  const [testing, setTesting] = useState("")
-  const formatDate = "DD-MM-YYYY";
+  const [milestone, setMilestone] = useState("")
-  useEffect(() => {
+  const [potentialRisks, setPotentialRisks] = useState("")
-    if(!openDialog){
+  const [approval, setApproval] = useState("")
-      setProyekName("")
+  const [PM, setDataPM] = useState("")
-      setDescription("")
+  const [K3Search, setDataK3Search] = useState("")
-      setObjective("")
+  const [HR, setAssignHR] = useState("")
-      setProjectSuccess("")
+  const formatDate = "DD-MM-YYYY";
-      setParticipants([])
+  useEffect(() => {
-      setBudget("")
+    if(!openDialog){
-      setCurrency("")
+      setProyekName("")
-      setTesting("")
+      setDescription("")
-      setMilestone([])
+      setKodeShortname("")
-      setPotentialRisks("")
+      setLokasiKantor("")
-      setApproval([])
+      setDurasiProyek("")
-    }
+      setMulaiProyek("")
-  }, [openDialog]);
+      setObjective("")
-
+      setProjectSuccess("")
-  useEffect(() => {
+      setParticipants([])
-    if(projectCharter && projectCharter!={}){
+      setDataK3Search([])
-      setProyekName(projectCharter.nama);
+      setAssignHR([])
-      setDescription(projectCharter.keterangan);
+      setBudget("")
-      setObjective(projectCharter.project_objectives);
+      setCurrency("")
-      setProjectSuccess(projectCharter.considered_success_when);
+      setTesting("")
-      setBudget(projectCharter.rencana_biaya);
+      setMilestone([])
-      setPotentialRisks(projectCharter.potential_risk);
+      setPotentialRisks("")
-      setTesting(projectCharter.testing_environment);
+      setApproval([])
-      setCurrency(projectCharter.currency_symbol);
+    }
-    }
+  }, [openDialog]);
-  }, [projectCharter]);
+
-
+  useEffect(() => {
-  useEffect(() => {
+    if(projectCharter && projectCharter!={}){
-    if(projectParticipant && projectParticipant.length > 0){
+      setProyekName(projectCharter.nama);
-      setParticipants(projectParticipant)
+      setDescription(projectCharter.keterangan);
-    }
+      setKodeShortname(projectCharter.kode_sortname);
-  }, [projectParticipant]);
+      setLokasiKantor(projectCharter.lokasi_kantor);
-
+      setDurasiProyek(projectCharter.durasi_proyek);
-  useEffect(() => {
+      setMulaiProyek(projectCharter.mulai_proyek);
-    if(projectMilestone && projectMilestone.length > 0){
+      setObjective(projectCharter.project_objectives);
-      setMilestone(projectMilestone)
+      setProjectSuccess(projectCharter.considered_success_when);
-    }
+      setBudget(projectCharter.rencana_biaya);
-  }, [projectMilestone]);
+      setPotentialRisks(projectCharter.potential_risk);
-
+      setTesting(projectCharter.testing_environment);
-  useEffect(() => {
+      setCurrency(projectCharter.currency_symbol);
-    if(projectApproval && projectApproval.length > 0){
+    }
-      console.log("cek projectApproval", projectApproval)
+  }, [projectCharter]);
-      setApproval(projectApproval)
+
-    }
+  useEffect(() => {
-  }, [projectApproval]);
+    if(projectParticipant && projectParticipant.length > 0){
-  
+      setParticipants(projectParticipant)
-  const RenderParticipant = () => {
+    }
-    if(participants && participants.length > 0){
+  }, [projectParticipant]);
-      return (
+
-        participants.map((val, index) => {
+  useEffect(() => {
-          return(
+    if(projectMilestone && projectMilestone.length > 0){
-          <tr key={index}>
+      setMilestone(projectMilestone)
-            <td className='plr-10'>{val.tittle ? val.tittle : val.title}</td>
+    }
-            <td className='plr-10'>{val.name}</td>
+  }, [projectMilestone]);
-          </tr>
+
-          )
+  useEffect(() => {
-        })
+    if(projectApproval && projectApproval.length > 0){
-      )
+      console.log("cek projectApproval", projectApproval)
-    }else{
+      setApproval(projectApproval)
-      return (<tr><td><br></br></td></tr>)
+    }
-    }
+  }, [projectApproval]);
-  }
+
-
+  useEffect(() => {
-  const RenderMilestone = () => {
+    if(projectManager && projectManager.length > 0){
-    if(milestone && milestone.length > 0) {
+      console.log("cek data PM", projectManager)
-      let milestoneSorted = sortBy(milestone, {
+      setDataPM(projectManager)
-        prop: "deadline",
+    }
-        desc: false,
+  }, [projectManager]);
-      });
+
-      return (
+  useEffect(() => {
-        milestoneSorted.map((val, index) => {
+    if(projectK3 && projectK3.length > 0){
-          return(
+      setDataK3Search(projectK3)
-          <tr key={index}>
+    }
-            <td className='plr-10'>{val.status}</td>
+  }, [projectK3]);
-            {/* <td className='plr-10'>{moment(val.due_date).format(formatDate)}</td> */}
+
-            <td className='plr-10'>{moment(val.deadline).format(formatDate)}</td>
+  useEffect(() => {
-          </tr>
+    if(assignHR && assignHR.length > 0){
-          )
+      setAssignHR(assignHR)
-        })
+    }
-      )
+  }, [assignHR]);
-    }else{
+
-      return (<tr><td><br></br></td></tr>)
+  const RenderParticipant = () => {
-    }
+    if(participants && participants.length > 0){
-  }
+      return (
-
+        participants.map((val, index) => {
-  const RenderApproval = () => {
+          return(
-    if(approval && approval.length > 0){
+          <tr key={index}>
-      return (
+            <td style={{ fontWeight: 'bold' }} className='plr-10'>{val.tittle ? val.tittle : val.title}</td>
-        approval.map((val, index) => {
+            <td style={{ fontWeight: 'bold' }} className='plr-10'>:</td>
-          return(
+            <td className='plr-10'>{val.name}</td>
-          <tr key={index}>
+          </tr>
-            <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>)
-      )
+    }
-    }else{
+  }
-      return (<tr><td><br></br></td></tr>)
+
-    }
+  const RenderK3Project = () => {
-  }
+    if (K3Search && K3Search.length > 0) {
-  
+      const number = "123456789";
-  
+      return (
-  const renderForm = () => {
+        K3Search.map((val, index) => {
-    return (
+        const K3Number = number[index];
-      <div>
+          return(
-          <table className='table-charter'>
+            <tr key={index}>
-            <thead>
+              <td style={tdStyle}><p style={pStyle}>{ K3Number }</p></td>
-            <tr className='tr-charter'>
+            <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : val.checklist_k3_name}</p></td>
-              <td className='td-charter td-key plr-10'>
+          </tr>
-                Project name:
+          )
-              </td>
+        })
-              <td className='td-charter td-value plr-10'>
+      )
-                <div>{proyekName}</div>
+    }else{
-              </td>
+      return (<tr><td><br></br></td></tr>)
-            </tr>
+    }
-            <tr className='tr-charter'>
+  }
-              <td className='td-charter td-key plr-10'>
+
-                Project description: 
+  const RenderAssignHR = () => {
-              </td>
+    if (HR && HR.length > 0) {
-              <td className='td-charter td-value plr-10'>
+      return (
-                <div>{description}</div>
+        HR.map((val, index) => {
-              </td>
+          return(
-            </tr>
+          <tr key={index}>
-            <tr className='tr-charter'>
+              <td style={tdStyle} className='plr-10'>
-              <td className='td-charter td-key plr-10'>
+                <p>{val.join_first_name ? val.join_first_name : val.join_first_name}</p>
-                Project objectives: 
+              </td>
-              </td>
+              <td style={tdStyle} className='plr-10'>
-              <td className='td-charter td-value plr-10'>
+                <p>{val.join_second_name ? val.join_second_name : val.join_second_name}</p>
-                <div>{objectives}</div>
+              </td>
-              </td>
+              <td style={tdStyle} className='plr-10'>
-            </tr>
+                <p>{val.join_second_description ? val.join_second_description : val.join_second_description}</p>
-            <tr className='tr-charter'>
+              </td>
-              <td className='td-charter td-key plr-10'>
+          </tr>
-                Project is considered successful when: 
+          )
-              </td>
+        })
-              <td className='td-charter td-value plr-10'>
+      )
-                <div>{projectSuccess}</div>
+    }else{
-              </td>
+      return (<tr><td><br></br></td></tr>)
-            </tr>
+    }
-            <tr className='tr-charter'>
+  }
-              <td className='td-charter td-key plr-10'>
+
-                Project participants: 
+  const RenderMilestone = () => {
-              </td>
+    if (milestone && milestone.length > 0) {
-              <td className='td-charter td-value no-mp'>
+      let milestoneSorted = sortBy(milestone, {
-                <table className="table-participant" style={{width:"100%"}}>
+        prop: "deadline",
-                  <thead className='border-bottom'>
+        desc: false,
-                    <tr>
+      });
-                      <th className='plr-10'>Title:</th>
+      const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-                      <th className='plr-10'>Name:</th>
+      return (
-                    </tr>
+        milestoneSorted.map((val, index) => {
-                  </thead>
+          const milestoneLetter = alphabet[index];
-                  <tbody>
+
-                  <RenderParticipant />
+          return (
-                  </tbody>
+            <tr key={index}>
-                </table>
+              <td style={tdStyle}>
-              </td>
+                <p style={{ ...pStyle, textAlign:'center' }}>{milestoneLetter}</p>
-            </tr>
+              </td>
-            <tr className='tr-charter'>
+              <td className='plr-10' style={tdStyle}>
-              <td className='td-charter td-key plr-10'>
+                <p style={{ ...pStyle, color: '#000000' }}>{val.status}</p>
-                Budget: 
+              </td>
-              </td>
+              <td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
-              <td className='td-charter td-value plr-10'>
+                <p>&nbsp;{moment(val.deadline).format(formatDate)}</p>
-              <div>{currency} {formatThousand(budget)}</div>
+              </td>
-              </td>
+            </tr>
-            </tr>
+          );
-            <tr className='tr-charter'>
+        })
-              <td className='td-charter td-key plr-10'>
+      );
-                Testing Environment: 
+    } else {
-              </td>
+      return (<tr><td><br></br></td></tr>);
-              <td className='td-charter td-value plr-10'>
+    }
-                <div dangerouslySetInnerHTML={createMarkup(testing)}></div>
+  }
-              </td>
+
-            </tr>
+
-            <tr className='tr-charter'>
+  const RenderApproval = () => {
-              <td className='td-charter td-key plr-10'>
+    if(approval && approval.length > 0){
-                Milestones: 
+      return (
-              </td>
+        approval.map((val, index) => {
-              <td className='td-charter td-value no-mp'>
+          return(
-                <table className="table-participant" style={{width:"100%"}}>
+          <tr key={index}>
-                  <thead className='border-bottom'>
+            <td className='plr-10'>{ (val.tittle ? val.tittle : val.title) +": "+val.name}<br></br>{"signature..............."}</td>
-                    <tr>
+            <td className='plr-10'>{index==0 ? moment(val.date_approval).format(formatDate) : ""}</td>
-                      <th className='plr-10'>Status:</th>
+          </tr>
-                      {/* <th className='plr-10'>Due:</th> */}
+          )
-                      <th className='plr-10'>Deadline:</th>
+        })
-                    </tr>
+      )
-                  </thead>
+    }else{
-                  <tbody>
+      return (<tr><td><br></br></td></tr>)
-                  <RenderMilestone />
+    }
-                  </tbody>
+  }
-                </table>
+
-              </td>
+  const tableStyle = {
-            </tr>
+    border: '1px solid black',
-            <tr className='tr-charter'>
+    borderSpacing: '0px',
-              <td className='td-charter td-key plr-10'>
+    width: '100%'
-                Potential risks: 
+  };
-              </td>
+
-              <td className='td-charter td-value plr-10'>
+  const thStyle = {
-              <div dangerouslySetInnerHTML={createMarkup(potentialRisks)}></div>
+    border: '1px solid black',
-              </td>
+    padding: '2pt',
-            </tr>
+    backgroundColor: '#F2F2F2',
-            <tr className='tr-charter'>
+  };
-              <td className='td-charter td-key plr-10'>
+
-                Approval: 
+  const tdStyle = {
-              </td>
+    border: '1px solid black',
-              <td className='td-charter td-value no-mp'>
+  };
-                <table className="table-participant" style={{width:"100%"}}>
+  const pStyle = {
-                  <thead className='border-bottom'>
+    marginLeft: '5pt',
-                    <tr>
+    marginTop: '2pt',
-                      <th className='plr-10'>Title and name:</th>
+    marginBottom: '2pt',
-                      <th className='plr-10'>Date:</th>
+    fontFamily: 'Arial',
-                    </tr>
+    fontSize: '10pt',
-                  </thead>
+    fontWeight: 'bold',
-                  <tbody>
+  };
-                  <RenderApproval />
+
-                  </tbody>
+  const italicStyle = {
-                </table>
+    fontStyle: 'italic'
-              </td>
+  };
-            </tr>
+  const boldStyle = {
-            </thead>
+      fontWeight: 'bold',
-          </table>
+      fontVariant: 'small-caps',
-      </div>
+  };
-    )
+
-  }
+  const emptyCellStyle = {
-
+    padding: '0',
-  return (
+  };
-    <>
+
-      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+  const redStyle = {
-        <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
+    fontFamily: 'Arial',
-        <ModalBody>
+    fontSize: '10pt',
-          {renderForm()}
+    color: '#FF0000',
-        </ModalBody>
+  };
-        <ModalFooter>
+  const boldItalicStyle = {
-          <Button color="primary" onClick={closeDialog}>Close</Button>
+    ...pStyle,
-        </ModalFooter>
+    fontWeight: 'bold',
-      </Modal>
+    fontStyle: 'italic',
-    </>
+  };
-  )
+
-
+  const renderForm = () => {
-}
+    return (
-
+      <div>
-export default ViewProject;
+        <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;

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;
+      const {kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol} = result.data.data;
-      setProjectCharter(dataRes);
+      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]