report analysis hr detail

src/views/SimproV2/CreatedProyek/DialogFormAnalysis.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { Button } from "reactstrap";
+import "antd/dist/antd.css";
+
+const DialogFormAnalysis = ({
+	openDialog,
+	closeDialog,
+	toggleDialog,
+}) => {
+	const token = localStorage.getItem("token");
+	const HEADER = {
+		headers: {
+			"Content-Type": "application/json",
+			Authorization: `Bearer ${token}`,
+		},
+	};
+
+	const handleCLearData = () => {
+
+	};
+
+	const handleCancel = () => {
+		closeDialog("cancel", "none");
+		handleCLearData();
+	};
+
+	return (
+		<>
+			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+				<ModalHeader className="capitalize" toggle={closeDialog}>
+          Detail Report Analysis
+				</ModalHeader>
+				<ModalBody>
+          <div>
+            <h1>
+              Test
+            </h1>
+          </div>
+        </ModalBody>
+				<ModalFooter>
+					<Button
+						className="capitalize"
+						color="secondary"
+						onClick={() => handleCancel()}
+					>
+						Cancel
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default DialogFormAnalysis;

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -9,13 +9,17 @@ import {
 import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-import { Select, Table } from 'antd';
+import { Select, Table, Tooltip } from 'antd';
+import DialogFormAnalysis from './DialogFormAnalysis';
 const { Option } = Select
 
 const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => {
   const token = localStorage.getItem("token");
   const [activeTab, setActiveTab] = useState('1');
   const [search, setSearch] = useState('');
+  const [openDialogFormAnalysis, setOpenDialogFormAnalysis] = useState(false);
+  const [dataDetail, setDataDetail] = useState(null);
+  const [avgActivityHr, setAvgActivityHr] = useState(0);
   const [avgActivity, setAvgActivity] = useState(0);
   const [dataTable, setDatatable] = useState([]);
   const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
@@ -26,6 +30,20 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     if (activeTab !== tab) {
       setActiveTab(tab);
     }
+    switch (tab) {
+      case '1':
+        setAvgActivityHr(0);
+        setSelectedHr(null);
+        setDataTableActivityToHr([]);
+        break;
+      case '2':
+        setAvgActivity(0);
+        setSearch('');
+        setDatatable([])
+        break;
+      default:
+        break;
+    }
   };
 
   const HEADER = {
@@ -48,7 +66,20 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     {title: "Report Date", dataIndex: "report_date", key: "report_date"},
     {title: "Volume Actual", dataIndex: "qty", key: "qty"},
     {title: "Volume Planned", dataIndex: "join_first_qty_planning", key: "join_first_qty_planning"},
-    {title: "Description", dataIndex: "description", key: "description"}
+    {title: "Description", dataIndex: "description", key: "description"},
+    {
+        title: 'Action',
+        dataIndex: '',
+        key: 'id',
+        className: "nowrap",
+        render: (text, record) =>
+          <>
+            <Tooltip title="Detail Activity">
+              <Button size={"sm"} color='primary' onClick={() => handleDetail(text)}><i className="fa fa-eye"></i></Button>
+            </Tooltip>{" "}
+          </>
+        ,
+      },
   ]
 
   useEffect(() => {
@@ -72,6 +103,29 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     setSearch(value);
   };
 
+  const handleDetail = (data) => {
+    setOpenDialogFormAnalysis(true);
+    setDataDetail(data);
+  }
+
+  const closeDialogForm = (status) => {
+    if (status == "Save") {
+      // getdataGantt()
+      NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
+    }else if (status == "Edit") {
+      // getdataGantt()
+      NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!');
+    }else if (status == "failed") {
+      NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
+    }
+    setDataDetail(null)
+    setOpenDialogFormAnalysis(false)
+  }
+
+  const toggleDialogForm = () => {
+    setOpenDialogFormAnalysis(!openDialogFormAnalysis)
+  }
+
   const getDataHr = async () => {
     const result = await axios
       .get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER)
@@ -86,7 +140,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     }
   }
   const getDataActivityToHr = async () => {
-    setAvgActivity(0);
+    setAvgActivityHr(0);
     let sum = 0;
     const payload = {
       columns: [
@@ -135,7 +189,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       dataRes.forEach(element => {
           element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
       });
-      setAvgActivity(sum / dataRes.length);
+      setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
     } else {
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
@@ -184,7 +238,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
+        <ModalHeader className="capitalize" toggle={closeDialog}>Report Analysis</ModalHeader>
         <ModalBody>
           <div>
             <Nav tabs>
@@ -252,7 +306,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       <Col>
                         <Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
                           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                        } style={{ width: '100%' }}>
+                        } style={{ width: 200 }}>
                             {hrList && hrList.map(res => (
                             <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
                             ))}
@@ -261,13 +315,6 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                     </Row>
                   </CardHeader>
                   <CardBody>
-                    <div style={{ textAlign: 'center' }}>
-                      <h1>
-                        {
-                          selectedHr && avgActivity ? `Activity user ini adalah ${avgActivity.toFixed(2)} %` : null
-                        }
-                      </h1>
-                    </div>
                       <Table
                         size="small"
                         columns={columnActivityToHr}
@@ -285,6 +332,12 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
           <Button color="primary" onClick={closeDialog}>Close</Button>
         </ModalFooter>
       </Modal>
+      <DialogFormAnalysis
+        openDialog={openDialogFormAnalysis}
+        toggleDialog={toggleDialogForm}
+        closeDialog={closeDialogForm}
+        dataDetail={dataDetail}
+      />
     </>
   )