diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js
index c13daa3..5552366 100644
--- a/src/const/ApiConst.js
+++ b/src/const/ApiConst.js
@@ -727,6 +727,11 @@ export const HIERARCHY_FTTH_DELETE = (id) => {
 export const HIERARCHY_FTTH_TREE = (id) => {
   return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/tree/${id}`;
 };
+
+export const HIERARCHY_FTTH_COUNT_TREE = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/count-tree/${id}`;
+};
+
 export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`;
 
 export const IMAGE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/upload`;
diff --git a/src/views/SimproV2/CreatedProyek/.DialogHierarchy.js.swp b/src/views/SimproV2/CreatedProyek/.DialogHierarchy.js.swp
deleted file mode 100644
index 426e022..0000000
Binary files a/src/views/SimproV2/CreatedProyek/.DialogHierarchy.js.swp and /dev/null differ
diff --git a/src/views/SimproV2/CreatedProyek/DialogGantt.js b/src/views/SimproV2/CreatedProyek/DialogGantt.js
index 27e0380..738a075 100644
--- a/src/views/SimproV2/CreatedProyek/DialogGantt.js
+++ b/src/views/SimproV2/CreatedProyek/DialogGantt.js
@@ -1,19 +1,19 @@
 import React, { useEffect, useState, useMemo } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Col, Row, Breadcrumb, BreadcrumbItem } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip, Spin } from 'antd';
+import { Select, Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
-import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
+import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH } from '../../../const/ApiConst';
 import axios from "../../../const/interceptorApi"
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogForm from './DialogFormGantt';
 import DialogUserGantt from './DialogUserGantt';
-
 import { Link } from 'react-router-dom';
 
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id }) => {
+const { Option } = Select
+const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id, dataViewStartDate }) => {
   if (role_id && user_id && token && isLogin) {
     role_id = role_id;
     user_id = user_id;
@@ -38,10 +38,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
   const [alertDelete, setAlertDelete] = useState(false)
   const [idDelete, setIdDelete] = useState(0)
   const [idGantt, setIdGantt] = useState(0)
-  const [humanResource, setHumanResource] = useState([])
   const [dataEdit, setDataEdit] = useState([])
   const [typeDialog, setTypeDialog] = useState('')
   const [loading, setLoading] = useState(true);
+  const [searchGantt, setSearchGantt] = useState(null);
 
   useEffect(() => {
     if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
@@ -51,33 +51,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     if (!openDialog) {
       setDataGantt([]);
     }
-  }, [hierarchyId, idTask, openDialog])
-
-  const getDataHumanResource = async () => {
-    const result = await axios
-      .get(USER_LIST, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.status == 200) {
-      setTransferUser(result.data.data);
-    } else {
-
-    }
-  }
-
-  const setTransferUser = (data) => {
-    const finalData = []
-    data.map((val, index) => {
-      let data = {
-        key: val.id,
-        title: val.name
-      }
-      finalData.push(data)
-    });
-    setHumanResource(finalData)
-  }
-
+  }, [hierarchyId, idTask, openDialog, searchGantt])
 
   const getdataGantt = async () => {
     let payload;
@@ -85,7 +59,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       payload = {
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
-          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
+          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" },
+          { "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" }
         ],
         "orders": { "columns": ["name_version"], "ascending": true }
       }
@@ -93,7 +68,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       payload = {
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
-          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
+          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" },
+          { "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" }
         ],
         "orders": { "columns": ["name_version"], "ascending": true },
       }
@@ -168,6 +144,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
                 token: token,
                 role_id: role_id,
                 user_id: user_id,
+                dataViewStartDate: dataViewStartDate
               }
             }}>
               <Tooltip title="Gantt">
@@ -262,17 +239,36 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
-          {hierarchyName ?
+          {hierarchyName ? (
             <Breadcrumb>
               <BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem>
               <BreadcrumbItem active>{hierarchyName}</BreadcrumbItem>
             </Breadcrumb>
-            :
-            <div>Gantt Project {proyekName} </div>
-          }
-          {!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
-          </>
+          ) : (
+            <div>Gantt Project {proyekName}</div>
+          )}
+          <Select
+            placeholder='Search Gantt Name'
+            showSearch
+            filterOption={(inputValue, option) =>
+              option.children.toLowerCase().includes(inputValue.toLowerCase())
+            }
+            onChange={(val) => setSearchGantt(val)}
+            style={{ width: 200 }}
+          >
+            {dataGantt.map((res) => (
+              <Option key={res.id} value={res.id}>
+                {res.name_version}
+              </Option>
+            ))}
+          </Select>
+
+          {!hierarchyId && (
+            <Button onClick={handleOpenDialogForm} size='sm' color="primary">
+              <i className='fa fa-plus'></i>
+            </Button>
           )}
+
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>
@@ -281,10 +277,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
             </Spin>
           </div>
         </ModalBody>
-        {/* <ModalFooter>
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-        </ModalFooter> */}
-      </Modal>
+      </Modal >
+
       <NotificationContainer />
       <SweetAlert
         show={alertDelete}
diff --git a/src/views/SimproV2/CreatedProyek/DialogHierarchy.js b/src/views/SimproV2/CreatedProyek/DialogHierarchy.js
index 2bb089d..563d14d 100644
--- a/src/views/SimproV2/CreatedProyek/DialogHierarchy.js
+++ b/src/views/SimproV2/CreatedProyek/DialogHierarchy.js
@@ -5,7 +5,7 @@ import { Space, Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
-import { HIERARCHY_FTTH_DELETE, HIERARCHY_FTTH_TREE, VERSION_GANTT_SEARCH, HIERARCHY_FTTH_ADD, USER_LIST } from '../../../const/ApiConst';
+import { HIERARCHY_FTTH_DELETE, HIERARCHY_FTTH_TREE, HIERARCHY_FTTH_COUNT_TREE, HIERARCHY_FTTH_ADD, USER_LIST } from '../../../const/ApiConst';
 import axios from "../../../const/interceptorApi"
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogUserGantt from './DialogUserGantt';
@@ -13,11 +13,8 @@ import DialogForm from './DialogFormHierarchy'
 import DialogFormGantt from './DialogFormGantt';
 import DialogGantt from './DialogGantt';
 import { useTranslation } from 'react-i18next';
-import { async } from '@dabeng/react-orgchart';
-import { Link } from 'react-router-dom';
-import { use } from 'i18next';
 import _ from 'lodash';
-const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
+const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, dataViewStartDate }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -98,6 +95,22 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     setOpenDialogFormGantt(true)
   }
 
+  const handleHitungProgress = async (id) => {
+    const url = HIERARCHY_FTTH_COUNT_TREE(id)
+    const result = await axios
+      .get(url, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      setLoading(false);
+    } else {
+      setLoading(false);
+      NotificationManager.error(`Data gagal dihitung silahkan coba lagi!`, 'Failed!!');
+    }
+  }
+
+
   const handleViewGant = (id, name) => {
     setParentId(id)
     setParentName(name)
@@ -196,11 +209,14 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
             <Tooltip title="Tambah Data">
               <Button size={"sm"} color='success' onClick={() => handleAddWithParent(text.id)}><i className="fa fa-plus"></i></Button>
             </Tooltip>{" "}
+            <Tooltip title="Hitung Progress">
+              <Button size={"sm"} color='warning' onClick={() => handleHitungProgress(text.id)}><i className="fa fa-calculator"></i></Button>
+            </Tooltip>{" "}
             <Tooltip title="Tambah Gantt">
               <Button size={"sm"} color='primary' onClick={() => handleAddGant(text.id)}><i className="fa fa-gears"></i></Button>
             </Tooltip>{" "}
             {text.dataGantt && (<Tooltip title="Detail Gantt">
-              <Button size={"sm"} color='info' onClick={() => handleViewGant(text.id, text.name)}><i className="fa fa-info"></i></Button>
+              <Button size={"sm"} color='info' style={{ color: "#FFFFFF" }} onClick={() => handleViewGant(text.id, text.name)}><i className="fa fa-eye"></i></Button>
             </Tooltip>)}
           </>
         ,
@@ -320,6 +336,7 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
         hierarchyName={parentName}
         idTask={idTask}
         openDialogHierarchy={openDialog}
+        dataViewStartDate={dataViewStartDate}
       />
       <DialogFormGantt
         idTask={idTask}
diff --git a/src/views/SimproV2/CreatedProyek/DialogInitDocument.js b/src/views/SimproV2/CreatedProyek/DialogInitDocument.js
index 34ab19f..038708e 100644
--- a/src/views/SimproV2/CreatedProyek/DialogInitDocument.js
+++ b/src/views/SimproV2/CreatedProyek/DialogInitDocument.js
@@ -150,11 +150,11 @@ const DialogInitialDocument = ({ openDialog, closeDialog, toggleDialog, idTypePr
         render: (text, record) =>
           <>
             <Tooltip title="Delete Activity">
-              <Button size="small" size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+              <Button size="small" color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
             </Tooltip>{" "}<Tooltip title="Add Activity">
-              <Button size="small" size={"sm"} color='primary' onClick={() => handleAddWithParent(text.id)}><i className="fa fa-plus"></i></Button>
+              <Button size="small" color='primary' onClick={() => handleAddWithParent(text.id)}><i className="fa fa-plus"></i></Button>
             </Tooltip>{" "}<Tooltip title="Edit Activity">
-              <Button size="small" size={"sm"} color='warning' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
+              <Button size="small" color='warning' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
             </Tooltip>
           </>
         ,