Merge branch 'staging' of https://git.oslog.id/ordo/adw-frontend

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -0,0 +1,284 @@
+import React, {useState, useEffect} from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap';
+import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
+import { Button } from 'reactstrap';
+import axios from "../../../const/interceptorApi";
+import {
+  NotificationManager,
+} from "react-notifications";
+import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
+import 'antd/dist/antd.css';
+import './style.css'
+import { Select, Table } from 'antd';
+const { Option } = Select
+
+const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => {
+  const token = localStorage.getItem("token");
+  const [activeTab, setActiveTab] = useState('1');
+  const [search, setSearch] = useState('');
+  const [avgActivity, setAvgActivity] = useState(0);
+  const [dataTable, setDatatable] = useState([]);
+  const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
+  const [hrList, setHrList] = useState([]);
+  const [selectedHr, setSelectedHr] = useState(null);
+
+  const toggle = (tab) => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
+  const columns = [
+    {title: "Activity Name", dataIndex: "name", key: "name"}
+  ]
+
+  const columnActivityToHr = [
+    {title: "Activity", dataIndex: "join_third_name", key: "join_third_name"},
+    {title: "Human Resource", dataIndex: "join_second_name", key: "join_second_name"},
+    {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"}
+  ]
+
+  useEffect(() => {
+    if (search) {
+      getDataActivity()
+    }
+  }, [search]);
+
+  useEffect(() => {
+    if (selectedHr) {
+      getDataActivityToHr()
+    }
+  }, [selectedHr]);
+
+  useEffect(() => {
+    getDataHr()
+  }, []);
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearch(value);
+  };
+
+  const getDataHr = async () => {
+    const result = await axios
+      .get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setHrList(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  }
+  const getDataActivityToHr = async () => {
+    setAvgActivity(0);
+    let sum = 0;
+    const payload = {
+      columns: [
+        {
+          name: "user_id",
+          logic_operator: "=",
+          value: selectedHr,
+          operator: "AND",
+        },
+        {
+          name: "proyek_id",
+          logic_operator: "=",
+          value: projectId,
+          table_name: "m_activity",
+          operator: "AND",
+        }
+      ],
+      joins: [
+        {
+          name: "assign_material_to_activity",
+          column_join: "assign_material_id",
+          column_results: ["qty_planning"]
+        },
+        {
+          name: "m_users",
+          column_join: "user_id",
+          column_results: ["name"]
+        },
+        {
+          name: "m_activity",
+          column_join: "activity_id",
+          column_results: ["name", "persentase_progress"]
+        }
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      dataRes.forEach(element => {
+          element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
+      });
+      setAvgActivity(sum / dataRes.length);
+      setDataTableActivityToHr(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getDataActivity = async () => {
+    setAvgActivity(0);
+    let sum = 0;
+    const payload = {
+      columns: [
+        {
+          name: "name",
+          logic_operator: "ilike",
+          value: search,
+          operator: "AND",
+        },
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(`${BASE_SIMPRO_LUMEN}/activity/search`, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+
+      dataRes.forEach(element => {
+          element.persentase_progress ? sum += parseInt(element.persentase_progress) : sum += 0;
+      });
+      setAvgActivity(sum / dataRes.length);
+      setDatatable(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+  return (
+    <>
+      <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
+        <ModalBody>
+          <div>
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  className={activeTab === '1' ? "active" : null}
+                  onClick={() => {
+                    toggle('1');
+                  }}
+                >
+                  Activity
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  className={activeTab === '2' ? "active" : null}
+                  onClick={() => {
+                    toggle('2');
+                  }}
+                >
+                  Human Resource
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={activeTab}>
+              <TabPane tabId="1">
+                <Card>
+                  <CardHeader>
+                    <Row>
+                      <Col>
+                        <Input
+                          onChange={handleSearch}
+                          value={search}
+                          type="text"
+                          name="search"
+                          id="search"
+                          placeholder={`Search Activity Name`}
+                          style={{ width: 200 }}
+                        />
+                      </Col>
+                    </Row>
+                  </CardHeader>
+                  <CardBody>
+                    <div style={{ textAlign: 'center' }}>
+                      <h1>
+                        {
+                          search && avgActivity ? `Activity ${search} adalah ${avgActivity.toFixed(2)} %` : null
+                        }
+                      </h1>
+                    </div>
+                      <Table
+                        size="small"
+                        columns={columns}
+                        dataSource={dataTable}
+                        pagination={false}
+                        rowKey={"id"}
+                      />
+                  </CardBody>
+                </Card>
+              </TabPane>
+              <TabPane tabId="2">
+                <Card>
+                  <CardHeader>
+                    <Row>
+                      <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%' }}>
+                            {hrList && hrList.map(res => (
+                            <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
+                            ))}
+                        </Select>
+                      </Col>
+                    </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}
+                        dataSource={dataTableActivityToHr}
+                        pagination={false}
+                        rowKey={"id"}
+                      />
+                  </CardBody>
+                </Card>
+              </TabPane>
+            </TabContent>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={closeDialog}>Close</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+
+}
+
+export default ReportAnalysis;

src/views/SimproV2/CreatedProyek/index.js

@@ -87,6 +87,7 @@ import AssignHrProject from "./AsignHrProject";
 import AssignCustProject from "./AsignCustProject";
 import AssignK3Project from "./AssignK3Project";
 import ViewProject from "./ViewProject";
+import ReportAnalysis from "./ReportAnalysis";
 import { Icon } from "@iconify/react";
 // import { Link } from 'react-router-dom';
 // import SubProyekComp from './SubProyekComp';
@@ -116,12 +117,14 @@ const CreatedProyek = ({ params, ...props }) => {
   };
 
   const [idTask, setidTask] = useState(0);
+  const [projectId, setProjectId] = useState(0);
   const [dataTable, setDatatable] = useState([]);
   const [search, setSearch] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPage, setTotalPage] = useState(0);
   const [openDialog, setOpenDialog] = useState(false);
   const [openDialogViewDetail, setOpenDialogViewDetail] = useState(false);
+  const [openDialogRA, setOpenDialogRA] = useState(false);
   const [openDialogMaterial, setOpenDialogMaterial] = useState(false);
   const [openDialogTools, setOpenDialogTools] = useState(false);
   const [openDialogGantt, setOpenDialogGantt] = useState(false);
@@ -593,6 +596,13 @@ const CreatedProyek = ({ params, ...props }) => {
     getProjectDetail(data.id);
   };
 
+  const handleOpenReport = async (data) => {
+    setOpenDialogRA(true);
+    setProjectId(data.id);
+  }
+  const handleCloseReport = async (data) => {
+    setOpenDialogRA(false);
+  }
   const getDataProject = async (proyek_id) => {
     const url = PROYEK_GET_ID(proyek_id);
     const result = await axios
@@ -851,6 +861,7 @@ const CreatedProyek = ({ params, ...props }) => {
 
   const toggleAddDialog = () => setOpenDialog(!openDialog);
   const toggleAddDialogProyek = () => setOpenDialogProyek(!openDialogProyek);
+  const toggleAddDialogRA = () => setOpenDialogRA(!openDialogRA);
   const toggleAddDialogView = () => {
     if (openDialogViewDetail) {
       setProjectApproval(null);
@@ -1506,6 +1517,12 @@ const CreatedProyek = ({ params, ...props }) => {
           </span>
           <span className="menu-text">S Curve</span>
         </div>
+        <div className="menu-list" onClick={() => handleOpenReport(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-pie-chart"></i>
+          </span>
+          <span className="menu-text">Report Analysis</span>
+        </div>
         {/* </Link> */}
         <div
           className="menu-list"
@@ -1889,7 +1906,17 @@ const CreatedProyek = ({ params, ...props }) => {
     ),
     [openDialogViewDetail]
   );
-
+  const renderReportAnalysis = useMemo(
+    () => (
+      <ReportAnalysis
+        openDialog={openDialogRA}
+        closeDialog={handleCloseReport}
+        toggleDialog={toggleAddDialogRA}
+        projectId={projectId}
+      />
+    ),
+    [openDialogRA]
+  );
   const renderDialogGantt = useMemo(
     () => (
       <DialogGantt
@@ -1933,6 +1960,7 @@ const CreatedProyek = ({ params, ...props }) => {
         Delete this data
       </SweetAlert>
       {ViewProyek}
+      {renderReportAnalysis}
       {RenderDialogForm}
       {RenderDialogFormProyek}
       {RenderDialogFormMaterial}