From 17e768db37d4625e80fe83fa939ccda27febc678 Mon Sep 17 00:00:00 2001
From: wahyuun <wahyumind01@gmail.com>
Date: Wed, 27 Sep 2023 14:49:43 +0700
Subject: [PATCH] update styling & export PDF

---
 .../SimproV2/CreatedProyek/ViewProject.js     | 69 ++++++++++---------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/views/SimproV2/CreatedProyek/ViewProject.js b/src/views/SimproV2/CreatedProyek/ViewProject.js
index 9ad4b67..2d38445 100644
--- a/src/views/SimproV2/CreatedProyek/ViewProject.js
+++ b/src/views/SimproV2/CreatedProyek/ViewProject.js
@@ -93,7 +93,7 @@ const createMarkup = (element) => {
       setProyekName(projectCharter.nama);
       setDescription(projectCharter.keterangan);
       setKodeShortname(projectCharter.kode_sortname);
-      setLokasiKantor(projectCharter.lokasi_kantor);
+      setLokasiKantor(projectCharter.area_kerja);
       setDurasiProyek(projectCharter.durasi_proyek);
       setMulaiProyek(projectCharter.mulai_proyek);
       setValueProyek(projectCharter.value_proyek);
@@ -171,12 +171,11 @@ const createMarkup = (element) => {
       setAssignHR(assignHR)
     }
   }, [assignHR]);
-
   const handleExportPdf = async () => {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'px',
-      format: [1130, 1000]
+      format: [1106, 1000]
     });
 
     doc.html(reportTemplateRef.current, {
@@ -212,8 +211,8 @@ const createMarkup = (element) => {
         const K3Number = number[index];
           return(
             <tr key={index}>
-            <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ K3Number }</p></td>
-            <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
+            <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ K3Number }</p></td>
+            <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
           </tr>
           )
         })
@@ -231,10 +230,10 @@ const createMarkup = (element) => {
         const ChecklistNumber = number[index];
           return(
             <tr key={index}>
-              <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ ChecklistNumber }</p></td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.item ? val.item : "-"}</p></td>
-              <td style={tdStyle} className='plr-10'>
-              <p style={pStyle}>
+              <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ ChecklistNumber }</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.item ? val.item : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'>
+              <p style={{ ...pStyle, fontWeight:'normal' }}>
                 {val.status_exist === true ? "Tersedia" : "Tidak tersedia"}
               </p>
               </td>
@@ -254,11 +253,11 @@ const createMarkup = (element) => {
           return(
             <tr key={index}>
               <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
-                <p style={pStyle}>
+                <p style={{ ...pStyle, fontWeight:'normal' }}>
                   {val.level_issue ? val.level_issue : "-"}
                 </p>
               </td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ? val.description : "-"}</p></td>
             </tr>
           )
         })
@@ -275,12 +274,12 @@ const createMarkup = (element) => {
           return(
             <tr key={index}>
               <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
-                <p style={pStyle}>
+                <p style={{ ...pStyle, fontWeight:'normal' }}>
                   {val.level_risk ? val.level_risk : "-"}
                 </p>
               </td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ? val.description : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
             </tr>
           )
         })
@@ -328,13 +327,13 @@ const createMarkup = (element) => {
           return (
             <tr key={index}>
               <td style={tdStyle}>
-                <p style={{ ...pStyle, textAlign:'center' }}>{milestoneLetter}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', textAlign:'center' }}>{milestoneLetter}</p>
               </td>
               <td className='plr-10' style={tdStyle}>
-                <p style={{ ...pStyle, color: '#000000' }}>{val.status}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>{val.status}</p>
               </td>
               <td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
-                <p>&nbsp;{moment(val.deadline).format(formatDate)}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>&nbsp;{moment(val.deadline).format(formatDate)}</p>
               </td>
             </tr>
           );
@@ -391,9 +390,16 @@ const createMarkup = (element) => {
     padding: '0',
   };
 
+    const paddingTable = {
+    paddingTop:"20px",
+    paddingLeft: "30px",
+    paddingRight: "30px"
+  }
+
   const renderForm = () => {
     return (
-      <div id="pdf-content">
+      <div id="pdf-content" style={ paddingTable }>
+        <h3>Project Charter</h3>
         <table style={tableStyle} className="a">
           <tbody>
             <tr>
@@ -406,7 +412,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Nama Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{proyekName ?? '-'}</p>
+                <p className="capitalize" style={{ ...pStyle, fontWeight: 'normal' }}>{proyekName ?? '-'}</p>
               </td>
             </tr>
             <tr>
@@ -414,7 +420,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Project description</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{description ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>{description ?? '-'}</p>
               </td>
             </tr>
             <tr>
@@ -462,7 +468,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Anggaran Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{currency}. {formatThousand(budget)}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>{currency}. {formatThousand(budget)}</p>
               </td>
             </tr>
             <tr>
@@ -506,7 +512,7 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td style={tdStyle}>
-                <p style={{ fontStyle: 'italic' }}>{objectives ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(objectives ?? '-')}></p>
               </td>
             </tr>
           </tbody>
@@ -645,7 +651,7 @@ const createMarkup = (element) => {
               </th>
             </tr>
             <tr>
-            <p dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
+            <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
             </tr>
           </tbody>
         </table>
@@ -659,7 +665,7 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <th>
-                <p style={pStyle}>{projectSuccess ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(projectSuccess ?? '-')}></p>
               </th>
             </tr>
           </tbody>
@@ -674,7 +680,7 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td>
-              <p dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
+              <p style={{ ...pStyle, fontWeight:'normal' }} dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
               </td>
             </tr>
           </tbody>
@@ -741,15 +747,10 @@ const createMarkup = (element) => {
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <div>
-              Project
-            </div>
-            <div>
-              <Tooltip title={t('Export PDF')}>
-                  <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i></Button>
-              </Tooltip>
-            </div>
+          <div>
+            <Tooltip title={t('Export PDF')}>
+                <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i> Export PDF</Button>
+            </Tooltip>
           </div>
         </ModalHeader>
         <ModalBody>