diff --git a/src/views/SimproV2/CreatedProyek/index.js b/src/views/SimproV2/CreatedProyek/index.js
index 61d686d..90502ec 100644
--- a/src/views/SimproV2/CreatedProyek/index.js
+++ b/src/views/SimproV2/CreatedProyek/index.js
@@ -1,1486 +1,1503 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { Card, CardBody, CardHeader, Col, Row, Input } from "reactstrap";
-import axios from "../../../const/interceptorApi";
-import jsPDF from "jspdf";
-import autoTable from "jspdf-autotable";
-import * as XLSX from "xlsx";
-import SweetAlert from "react-bootstrap-sweetalert";
-import DialogForm from "./DialogForm";
-import DialogFormProyek from "./DialogFormProyek";
-import { FileExcelOutlined, FilePdfOutlined } from "@ant-design/icons";
-import {
-	NotificationContainer,
-	NotificationManager,
-} from "react-notifications";
-import {
-	Pagination,
-	Table,
-	Button,
-	Tooltip,
-	Popover,
-	Skeleton,
-	Divider,
-} from "antd";
-import {
-	PROJECT_APPROVAL_ADD,
-	PROJECT_APPROVAL_EDIT,
-	PROJECT_PARTICIPANT_ADD,
-	PROJECT_PARTICIPANT_EDIT,
-	PROJECT_MILESTONE_ADD,
-	PROJECT_MILESTONE_EDIT,
-	PROJECT_PARTICIPANT_DELETE_BY_PROYEK,
-	PROJECT_MILESTONE_DELETE_BY_PROYEK,
-	PROJECT_APPROVAL_DELETE_BY_PROYEK,
-	USER_LIST,
-	TYPE_PROYEK,
-	PROYEK_ADD,
-	PROYEK_SEARCH,
-	PROYEK_EDIT,
-	PROYEK_DELETE,
-	TOOLS_RESOURCE_SEARCH,
-	MATERIAL_RESOURCE_SEARCH,
-	USER_SEARCH,
-	PROJECT_CHARTER_SEARCH,
-	HIERARCHY_FTTH_SEARCH,
-	TOOLS_RESOURCE_LIST,
-	MATERIAL_RESOURCE_LIST,
-	PROYEK_GET_ID,
-	PROJECT_MILESTONE_SEARCH,
-	PROJECT_PARTICIPANT_SEARCH,
-	PROJECT_APPROVAL_SEARCH,
-	CHECKLIST_K3_LIST,
-	VERSION_GANTT_SEARCH,
-	PHASE_PROYEK,
-	DIVISI_LIST,
-  BASE_OSPRO
-} from "../../../const/ApiConst";
-import {
-	formatNumber,
-	formatRupiah,
-	formatThousand,
-	renderFormatRupiah,
-} from "../../../const/CustomFunc";
-import moment from "moment";
-// import DialogFormResource from './DialogFormResource';
-import DialogFormMaterial from "./DataRequestMaterial";
-import DialogTableTools from "./DialogTableTools";
-import DialogDocument from "./DialogDocument";
-import DialogInitDocument from "./DialogInitDocument";
-import DialogGantt from "./DialogGantt";
-import DialogHierarchy from "./DialogHierarchy";
-// import DialogAsignHr from './AsignHrProject';
-import AssignHrProject from "./AsignHrProject";
-import AssignK3Project from "./AssignK3Project";
-import ViewProject from "./ViewProject";
-import { Icon } from "@iconify/react";
-// import { Link } from 'react-router-dom';
-// import SubProyekComp from './SubProyekComp';
-import { Link, useHistory } from "react-router-dom";
-
-const url = "";
-const proyek_id = localStorage.getItem("proyek_id");
-const role_id = localStorage.getItem("role_id");
-const format = "DD-MM-YYYY";
-
-const CreatedProyek = ({ params, ...props }) => {
-  const history = useHistory();
-	const token = localStorage.getItem("token");
-	const HEADER = {
-		headers: {
-			"Content-Type": "application/json",
-			Authorization: `Bearer ${token}`,
-		},
-	};
-
-	const [idTask, setidTask] = 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 [openDialogMaterial, setOpenDialogMaterial] = useState(false);
-	const [openDialogTools, setOpenDialogTools] = useState(false);
-	const [openDialogGantt, setOpenDialogGantt] = useState(false);
-	const [openDialogHierarchy, setOpenDialogHierarchy] = useState(false);
-	const [openDialogAsignHR, setOpenDialogAsignHR] = useState(false);
-	const [openDialogAssignK3, setOpenDialogAssignK3] = useState(false);
-	const [dataK3, setDataK3] = useState([]); // transfer list
-	const [idDelete, setIdDelete] = useState(0);
-	const [alertDelete, setAlertDelete] = useState(false);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
-	const [dataExport, setDataExport] = useState([]);
-	const [userProyek, setUserProyek] = useState([]);
-	const [materialProyek, setMaterialProyek] = useState([]);
-	const [dataCharter, setDataCharter] = useState(null);
-	const [dataView, setDataView] = useState([]);
-	const [materialResource, setMaterialResource] = useState([]);
-	const [toolsResource, setToolsResource] = useState([]);
-	const [dataTypeProyek, setDataTypeProyek] = useState([]);
-	const [dataPhaseProject, setDataPhaseProject] = useState([]);
-	const [dataDivisions, setDataDivisions] = useState([]);
-	const [dataPm, setDataPM] = useState([]);
-	const [openDialogDoc, setOpenDialogDoc] = useState(false);
-	const [proyekName, setProyekName] = useState("");
-	const [openDialogProyek, setOpenDialogProyek] = useState(false);
-	// project charter
-	const [projectCharter, setProjectCharter] = useState(null);
-	const [projectParticipant, setProjectParticipant] = useState(null);
-	const [projectMilestone, setProjectMilestone] = useState(null);
-	const [projectApproval, setProjectApproval] = useState(null);
-
-	const [loadVersionGantt, setLoadVersionGantt] = useState(false);
-	const [loadHierarchy, setLoadHierarchy] = useState(false);
-	const [dataVersionGantt, setDataVersionGantt] = useState([]);
-	const [dataHierarchy, setDataHierarchy] = useState([]);
-	const [dataDetail, setDataDetail] = useState(null);
-
-	const pageName = params.name;
-  
-  useEffect(() => {
-    if (openDialogMaterial) {
-      getDataMaterialResource();
-    }
-  }, [openDialogMaterial]);
-
-  useEffect(() => {
-    if (openDialogTools) {
-      getDataToolsResource();
-    }
-  }, [openDialogTools]);
-
-  useEffect(() => {
-    if (openDialogAssignK3) {
-      getDataK3();
-    }
-  }, [openDialogAssignK3]);
-
-  useEffect(() => {
-    if (openDialogProyek) {
-      handleGetTipeProject();
-      handleGetPhaseProject();
-      handleGetDivisions();
-      handleGetDataPm();
-    }
-  }, [openDialogProyek])
-
-	useEffect(() => {
-		getDataProyek();
-	}, [search, rowsPerPage, currentPage]);
-
-	useEffect(() => {
-		if (dataExport.length > 0) {
-			exportExcel();
-		}
-	}, [dataExport]);
-
-	useEffect(() => {
-		if (!openDialog) {
-			setidTask(0);
-		}
-	}, [openDialogDoc]);
-
-	const handleSearch = (e) => {
-		const value = e.target.value;
-		setSearch(value);
-		setCurrentPage(1);
-	};
-
-	const handleGetTipeProject = async () => {
-		const result = await axios
-			.get(TYPE_PROYEK, HEADER)
-			.then((res) => res)
-			.catch((err) => err.response);
-		if (result && result.data && result.data.code === 200) {
-			setDataTypeProyek(result.data.data);
-		} else {
-		}
-	};
-
-	const handleGetPhaseProject = async () => {
-		const result = await axios
-			.get(PHASE_PROYEK, HEADER)
-			.then((res) => res)
-			.catch((err) => err.response);
-		if (result && result.data && result.data.code === 200) {
-			setDataPhaseProject(result.data.data);
-		}
-	};
-
-	const handleGetDivisions = async () => {
-		const result = await axios
-			.get(DIVISI_LIST, HEADER)
-			.then((res) => res)
-			.catch((err) => err.response);
-		if (result && result.data && result.data.code === 200) {
-			setDataDivisions(result.data.data);
-		}
-	};
-
-	const handleGetDataPm = async () => {
-		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);
-		} else {
-		}
-	};
-
-	const getDataProyek = async () => {
-		let start = 0;
-
-		if (currentPage !== 1 && currentPage > 1) {
-			start = currentPage * rowsPerPage - rowsPerPage;
-		}
-
-		const payload = {
-			columns: [
-				{
-					name: "nama",
-					logic_operator: "ilike",
-					value: search,
-					operator: "AND",
-				},
-			],
-			joins: [
-				{
-					name: "m_users",
-					column_join: "pm_id",
-					column_results: ["name", "username"],
-				},
-				{
-					name: "m_type_proyek",
-					column_join: "type_proyek_id",
-					column_results: ["name", "description"],
-				},
-				// { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }
-			],
-			orders: { columns: ["id"], ascending: false },
-			paging: { start: start, length: rowsPerPage },
-		};
-
-		if (parseInt(role_id) !== 1) {
-			payload["columns"] = [
-				{ name: "id", logic_operator: "=", value: proyek_id, operator: "AND" },
-			];
-		}
-
-
-		const result = await axios
-			.post(PROYEK_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data || [];
-
-			setDatatable(dataRes);
-			setTotalPage(result.data.totalRecord);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getDataMaterialResource = async () => {
-		const result = await axios
-			.get(MATERIAL_RESOURCE_LIST, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data || [];
-			setMaterialResource(dataRes);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getdataGantt = async (idTask) => {
-		setLoadVersionGantt(true);
-		const payload = {
-			columns: [
-				{
-					name: "proyek_id",
-					logic_operator: "=",
-					value: idTask,
-					operator: "AND",
-				},
-			],
-		};
-		const result = await axios
-			.post(VERSION_GANTT_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.status == 200) {
-			setDataVersionGantt(result.data.data);
-			setLoadVersionGantt(false);
-		} else {
-			NotificationManager.error(
-				`Data gantt project gagal terload silahkan coba lagi!`,
-				"Failed!!"
-			);
-		}
-	};
-
-	const getDataToolsResource = async () => {
-		const result = await axios
-			.get(TOOLS_RESOURCE_LIST, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data || [];
-			setToolsResource(dataRes);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getDataK3 = async () => {
-		const result = await axios
-			.get(CHECKLIST_K3_LIST, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data || [];
-			const finalData = [];
-			if (dataRes.length > 0) {
-				dataRes.map((val, index) => {
-					let data = {
-						key: val.id,
-						title: val.name,
-					};
-					finalData.push(data);
-				});
-			}
-			setDataK3(finalData);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const handleOpenDialog = (id) => {
-		setOpenDialog(true);
-		setidTask(id);
-	};
-
-	const handleOpenDialogProyek = (id) => {
-		setOpenDialogProyek(true);
-		setidTask(id);
-	};
-
-	const handleOpenDialogGantt = (data) => {
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogGantt(true);
-	};
-
-	const handleOpenDialogHierarchy = (data) => {
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogHierarchy(true);
-	};
-
-	const toggleDialogGantt = () => {
-		setOpenDialogGantt(!openDialogGantt);
-	};
-
-	const closeDialogGantt = () => {
-		setOpenDialogGantt(false);
-	};
-
-	const toggleDialogHierarchy = () => {
-		setOpenDialogHierarchy(!openDialogHierarchy);
-	};
-
-	const closeDialogHierarchy = () => {
-		setOpenDialogHierarchy(false);
-	};
-
-	const handleOpenDialogMaterial = (data) => {
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogMaterial(true);
-	};
-
-	const handleOpenAsignHr = (data) => {
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogAsignHR(true);
-	};
-
-	const handleOpenAssignK3 = (data) => {
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogAssignK3(true);
-	};
-
-	const handleOpenDialogTools = (data) => {
-		setOpenDialogTools(true);
-		setidTask(data.id);
-		setProyekName(data.nama);
-		setUserProyek(data.user_proyeks);
-	};
-
-	const handleOpenDialogViewDetail = async (data) => {
-		setidTask(data.id);
-		// setDataView(data)
-		await getDataProject(data.id);
-		await getProjectMilestone(data.id);
-		await getProjectParticipant(data.id);
-		await getProjectApproval(data.id);
-		// await getDataProjectCharter(data.id);
-		setOpenDialogViewDetail(true);
-	};
-
-  const getProjectDetail = async (id) => {
-      const URL = `${BASE_OSPRO}/api/project/detail/${id}`;
-      const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
-      if (!result) {
-          NotificationManager.error(`Could not connect to internet.`, "Failed");
-          return;
-      }
-
-      if (result.status !== 200) {
-          NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed");
-          return;
-      }
-      else if (result.status == 200 && result.data.data) {
-          history.push(`/dashboard-project/${id}/${result.data.gantt.last_gantt_id}/1`);
-      }
-  }
-
-  const handleSCurve = async (data) => {
-	  getProjectDetail(data.id)
-  };
-
-	const getDataProject = async (proyek_id) => {
-		const url = PROYEK_GET_ID(proyek_id);
-		const result = await axios
-			.get(url, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data;
-			setProjectCharter(dataRes);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getProjectMilestone = async (id) => {
-		const payload = {
-			columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
-			joins: [],
-			orders: { columns: ["id"], ascending: true },
-			paging: { start: 0, length: -1 },
-		};
-		// const url = PROJECT_MI(proyek_id)
-		const result = await axios
-			.post(PROJECT_MILESTONE_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data;
-			setProjectMilestone(dataRes);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getProjectParticipant = async (id) => {
-		const payload = {
-			columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
-			joins: [],
-			orders: { columns: ["id"], ascending: true },
-			paging: { start: 0, length: -1 },
-		};
-		// const url = PROJECT_MI(proyek_id)
-		const result = await axios
-			.post(PROJECT_PARTICIPANT_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data;
-			setProjectParticipant(dataRes);
-
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const getProjectApproval = async (id) => {
-		const payload = {
-			columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
-			joins: [],
-			orders: { columns: ["id"], ascending: true },
-			paging: { start: 0, length: -1 },
-		};
-		// const url = PROJECT_MI(proyek_id)
-		const result = await axios
-			.post(PROJECT_APPROVAL_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code == 200) {
-			let dataRes = result.data.data;
-			setProjectApproval(dataRes);
-		} else {
-			NotificationManager.error("Gagal Mengambil Data!!", "Failed");
-		}
-	};
-
-	const handleCloseDialog = (type, payload) => {
-		if (type === "add") saveProyek(payload);
-
-		if (type === "edit") editProyek(payload);
-		setidTask(0);
-		setOpenDialog(false);
-	};
-
-	const handleCloseDialogProyek = (type, payload) => {
-		if (type === "add") saveProyek(payload);
-
-		if (type === "edit") editProyek(payload);
-		setidTask(0);
-		setOpenDialogProyek(false);
-	};
-
-	const handleCloseDialogView = () => {
-		setProjectApproval(null);
-		setProjectParticipant(null);
-		setProjectMilestone(null);
-		setProjectCharter(null);
-		setOpenDialogViewDetail(false);
-	};
-
-	const toggleAddDialog = () => setOpenDialog(!openDialog);
-	const toggleAddDialogProyek = () => setOpenDialogProyek(!openDialogProyek);
-	const toggleAddDialogView = () => {
-		if (openDialogViewDetail) {
-			setProjectApproval(null);
-			setProjectParticipant(null);
-			setProjectMilestone(null);
-			setProjectCharter(null);
-		}
-		setOpenDialogViewDetail(!openDialogViewDetail);
-	};
-
-	const onConfirmDelete = async () => {
-		let urlDel = PROYEK_DELETE(idDelete);
-		const result = await axios
-			.delete(urlDel, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-		if (result && result.data && result.data.code === 200) {
-			getDataProyek();
-			setIdDelete(0);
-			setAlertDelete(false);
-			NotificationManager.success(`Data proyek berhasil dihapus`, "Success!!");
-		} else {
-			setIdDelete(0);
-			setAlertDelete(false);
-			NotificationManager.error(`Data proyek gagal dihapus`, "Failed!!");
-		}
-	};
-
-	const saveProyek = async (data) => {
-		const formData = data;
-
-		const result = await axios
-			.post(PROYEK_ADD, formData, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-		if (result && result.data && result.data.code === 200) {
-			const { participants, milestones, approval } = data.projectCharter;
-			const resultParticipant = await saveParticipant(
-				result.data.data_result.id,
-				participants
-			);
-			const resultMilestone = await saveMilestone(
-				result.data.data_result.id,
-				milestones
-			);
-			const resultApproval = await saveApproval(
-				result.data.data_result.id,
-				approval
-			);
-			if (
-				resultParticipant === "berhasil" &&
-				resultMilestone === "berhasil" &&
-				resultApproval === "berhasil"
-			) {
-				// getDataProyek();
-				NotificationManager.success(
-					`Data proyek berhasil ditambah`,
-					"Success!!"
-				);
-			} else {
-				NotificationManager.success(`${result.data.message}`, "Success!!");
-			}
-
-			getDataProyek();
-		} else {
-			NotificationManager.error(`${result.data.message}`, "Failed!!");
-		}
-	};
-
-	const saveParticipant = async (id, data) => {
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				tittle: res.title,
-				name: res.name,
-			};
-			return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		const result = arr.map((res) => res.data.code == 200);
-		if (result.length > 0) {
-			return "gagal";
-		}
-
-		return "berhasil";
-	};
-
-	const saveMilestone = async (id, data) => {
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				status: res.status,
-				due_date: res.due,
-				deadline: res.deadline,
-			};
-			return axios.post(PROJECT_MILESTONE_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		const result = arr.map((res) => res.data.code !== 200);
-		if (result.length > 0) {
-			return "gagal";
-		}
-
-		return "berhasil";
-	};
-
-	const saveApproval = async (id, data) => {
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				tittle: res.title,
-				name: res.name,
-				date_approval: res.date,
-			};
-			return axios.post(PROJECT_APPROVAL_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		const result = arr.map((res) => res.data.code !== 200);
-		if (result.length > 0) {
-			return "gagal";
-		}
-
-		return "berhasil";
-	};
-
-	const editProyek = async (data) => {
-		const { participants, milestones, approval } = data.projectCharter;
-		let urlEdit = PROYEK_EDIT(data.id);
-		const formData = data;
-
-		const result = await axios
-			.put(urlEdit, formData, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-		const resultParticipant = await editParticipant(data.id, participants);
-		const resultMilestone = await editMilestone(data.id, milestones);
-		const resultApproval = await editApproval(data.id, approval);
-		if (result && result.status === 200) {
-			getDataProyek();
-			NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!");
-		} else {
-			NotificationManager.error(`${result.data.message}`, "Failed!!");
-		}
-	};
-
-	const editParticipant = async (id, data) => {
-		await axios.delete(PROJECT_PARTICIPANT_DELETE_BY_PROYEK(id), HEADER);
-		// if (restDelete){
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				tittle: res.tittle ? res.tittle : res.title,
-				name: res.name,
-			};
-			return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		const result = arr.map((res) => res.data.code !== 200);
-		if (result.length > 0) {
-			return "gagal";
-		}
-
-		return "berhasil";
-	};
-
-	const editMilestone = async (id, data) => {
-		await axios.delete(PROJECT_MILESTONE_DELETE_BY_PROYEK(id), HEADER);
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				status: res.status,
-				due_date: res.due_date ? res.due_date : res.due,
-				deadline: res.deadline,
-			};
-			return axios.post(PROJECT_MILESTONE_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		const result = arr.map((res) => res.data.code !== 200);
-		if (result.length > 0) {
-			return "gagal";
-		}
-		return "berhasil";
-	};
-
-	const editApproval = async (id, data) => {
-		await axios.delete(PROJECT_APPROVAL_DELETE_BY_PROYEK(id), HEADER);
-		const request = data.map((res) => {
-			const payload = {
-				proyek_id: parseInt(id),
-				tittle: res.tittle ? res.tittle : res.title,
-				name: res.name,
-				date_approval: res.date ? res.date : res.date_approval,
-			};
-			return axios.post(PROJECT_APPROVAL_ADD, payload, HEADER);
-		});
-		const arr = await Promise.all(request)
-			.then((values) => values)
-			.catch((err) => err.response);
-		// if(arr)
-
-		// const result = arr.map(res => res.data.code !== 200)
-		// if (result.length > 0) {
-		//   return "gagal"
-		// }
-		// return "berhasil"
-	};
-
-	const handleDelete = async (id) => {
-		await setAlertDelete(true);
-		await setIdDelete(id);
-	};
-
-	const onShowSizeChange = (current, pageSize) => {
-		setRowsPerPage(pageSize);
-	};
-
-	const onPagination = (current, pageSize) => {
-		setCurrentPage(current);
-	};
-
-	const handleExportExcel = async () => {
-		const payload = {
-			paging: { start: 0, length: -1 },
-			joins: [],
-			orders: { columns: ["id"], ascending: false },
-		};
-
-		if (parseInt(role_id) !== 1) {
-			payload["columns"] = [
-				{ name: "id", logic_operator: "=", value: proyek_id, operator: "AND" },
-			];
-		}
-
-		const result = await axios
-			.post(PROYEK_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-
-
-		if (result && result.data && result.data.code == 200) {
-			let resData = result.data.data;
-			const excelData = [];
-			resData.map((n, index) => {
-				let dataRow = {
-					Sortname: n.kode_sortname ? n.kode_sortname : "",
-					"Nama Project": n.nama ? n.nama : "",
-					"Tanggal Mulai": n.mulai_proyek
-						? moment(n.mulai_proyek).format(format)
-						: "-",
-					"Tanggal Selesai": n.akhir_proyek
-						? moment(n.akhir_proyek).format(format)
-						: "-",
-					"Area Kerja": n.area_kerja ? n.area_kerja : "",
-					Perusahaan: n.company ? n.company : "",
-					Keterangan: n.keterangan ? n.keterangan : "",
-					"Dianggap sukses ketika": n.considered_success_when
-						? n.considered_success_when
-						: "",
-					"Tujuan Proyek": n.project_objectives ? n.project_objectives : "",
-					"Resiko potensial": n.potential_risk ? n.potential_risk : "",
-					"Rencana Biaya": n.rencana_biaya
-						? formatThousand(n.rencana_biaya)
-						: "-",
-					"Testing Environment": n.testing_environment
-						? n.testing_environment
-						: "-",
-				};
-				excelData.push(dataRow);
-			});
-			await setDataExport(excelData);
-		} else {
-			NotificationManager.error("Gagal Export Data!!", "Failed");
-		}
-	};
-
-	const handleExportPdf = async () => {
-		const doc = new jsPDF();
-
-		const headers = [
-			["Project Name", "Budget", "Project Type", "PM", "Time Project"],
-		];
-		const payload = {
-			columns: [
-				{
-					name: "nama",
-					logic_operator: "ilike",
-					value: search,
-					operator: "AND",
-				},
-			],
-			joins: [
-				{
-					name: "m_users",
-					column_join: "pm_id",
-					column_results: ["name", "username"],
-				},
-				{
-					name: "m_type_proyek",
-					column_join: "type_proyek_id",
-					column_results: ["name", "description"],
-				},
-				// { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }
-			],
-      orders: { columns: ["id"], ascending: false },
-		};
-
-		const result = await axios
-			.post(PROYEK_SEARCH, payload, HEADER)
-			.then((res) => res)
-			.catch((error) => error.response);
-		if (result && result.data && result.data.code == 200) {
-			let resData = result.data.data;
-			const data = resData.map((elt) => [
-				elt.nama,
-				`Rp. ${formatThousand(elt.rencana_biaya)}`,
-				elt.join_second_name,
-				elt.join_first_name,
-				`${moment(elt.mulai_proyek).format(format)} - ${moment(
-					elt.akhir_proyek
-				).format(format)}`,
-			]);
-			// Or use javascript directly:
-			doc.text(4, 15, "Project Charter");
-			autoTable(doc, {
-				startY: 20,
-				margin: { horizontal: 4 },
-				styles: { overflow: "linebreak", columnWidth: "auto", fontSize: 8 },
-				columnStyles: { text: { columnWidth: "auto" } },
-				head: headers,
-				body: data,
-			});
-		}
-		doc.save("Project.pdf");
-		// const unit = "pt";
-		// const size = "A4"; // Use A1, A2, A3 or A4
-		// const orientation = "portrait"; // portrait or landscape
-
-		// const marginLeft = 40;
-		// const doc = new jsPDF(orientation, unit, size);
-
-		// doc.setFontSize(15);
-		// const dataPeople = [
-		//   { name: "Keanu Reeves", profession: "Actor" },
-		//   { name: "Lionel Messi", profession: "Football Player" },
-		//   { name: "Cristiano Ronaldo", profession: "Football Player" },
-		//   { name: "Jack Nicklaus", profession: "Golf Player" },
-		// ];
-		// const title = "My Awesome Report";
-		// const headers = [["NAME", "PROFESSION"]];
-
-		// const data = dataPeople.map((elt) => [elt.name, elt.profession]);
-
-		// let content = {
-		//   startY: 50,
-		//   head: headers,
-		//   body: data,
-		// };
-
-		// doc.text(title, marginLeft, 40);
-		// doc.autoTable(content);
-		// doc.save("report.pdf");
-	};
-
-	const exportExcel = () => {
-		const dataExcel = dataExport || [];
-		const fileName = `Data ${pageName}.xlsx`;
-		const ws = XLSX.utils.json_to_sheet(dataExcel);
-		const wb = XLSX.utils.book_new();
-		XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
-
-		XLSX.writeFile(wb, fileName);
-		setDataExport([]);
-	};
-
-	const cancelDelete = () => {
-		setAlertDelete(false);
-		setIdDelete(0);
-	};
-
-	const handleOpenDokumen = async (data) => {
-		await setidTask(data.id);
-		setProyekName(data.nama);
-		setOpenDialogDoc(true);
-	};
-
-	const popupMenu = (text, record) => {
-		return (
-			<div>
-				<div
-					className="menu-list"
-					onClick={() => handleOpenDialogViewDetail(text)}
-				>
-					<span className="menu-icon">
-						<i className="fa fa-eye"></i>
-					</span>
-					<span className="menu-text">Project Charter</span>
-				</div>
-				<div className="menu-list" onClick={() => handleOpenDokumen(text)}>
-					<span className="menu-icon">
-						<i className="fa fa-file"></i>
-					</span>
-					<span className="menu-text">Project Documents</span>
-				</div>
-				<div className="menu-list" onClick={() => handleOpenAsignHr(text)}>
-					<span className="menu-icon">
-						<i className="fa fa-users"></i>
-					</span>
-					<span className="menu-text">Assign Human Resource</span>
-				</div>
-				<div className="menu-list" onClick={() => handleOpenAssignK3(text)}>
-					<span className="menu-icon">
-						<i className="fa fa-plus-circle"></i>
-					</span>
-					<span className="menu-text">Assign Checklist K3</span>
-				</div>
-				{/* <div
-					className="menu-list"
-					onClick={() => handleOpenDialogMaterial(text)}
-				>
-					<span className="menu-icon">
-						<i className="fa fa-cube"></i>
-					</span>
-					<span className="menu-text">Request Material Resource</span>
-				</div> */}
-				{/* <div className="menu-list" onClick={() => handleOpenDialogTools(text)}>
-					<span className="menu-icon">
-						<i className="fa fa-cog"></i>
-					</span>
-					<span className="menu-text">Request Tools</span>
-				</div> */}
-				{/* <Link to={`/project-charter/${text.id}/gantt`}> */}
-				<div className="menu-list" onClick={() => handleOpenDialogGantt(text)}>
-					<span className="menu-icon">
-						<i className="fa fa-bars"></i>
-					</span>
-					<span className="menu-text">Gantt</span>
-				</div>
-          <div className="menu-list" onClick={() => handleSCurve(text)}>
-            <span className="menu-icon">
-              <i className="fa fa-line-chart"></i>
-            </span>
-            <span className="menu-text">S Curve</span>
-          </div>
-				{/* </Link> */}
-				<div
-					className="menu-list"
-					onClick={() => handleOpenDialogProyek(text.id)}
-				>
-					<span className="menu-icon">
-						<i className="fa fa-edit"></i>
-					</span>
-					<span className="menu-text">Edit Project</span>
-				</div>
-				<div className="menu-list" onClick={() => handleDelete(text.id)}>
-					<span className="menu-icon">
-						<i className="fa fa-trash"></i>
-					</span>
-					<span className="menu-text">Delete Project</span>
-				</div>
-			</div>
-		);
-	};
-
-	const popupMenuGantt = (text, record) => {
-		return (
-			<div>
-				{text.type_proyek_id !== 9 && loadVersionGantt && (
-					<div className="menu-list">
-						<Skeleton active />
-					</div>
-				)}
-
-				{(!loadVersionGantt && text.type_proyek_id !== 9) && (
-					<>
-						{dataVersionGantt.slice(0, 8).map((res) => (
-							<Link to={`/projects/${res.id}/${text.id}/gantt`}>
-								<div className="menu-list">
-									<span className="menu-icon">
-										<i className="fa fa-file"></i>
-									</span>
-									<span className="menu-text">{res.name_version}</span>
-								</div>
-							</Link>
-						))}
-						{dataVersionGantt.length > 0 && (
-							<div
-								style={{
-									marginLeft: 15,
-									marginBottom: 5,
-									borderBottom: 1,
-									borderColor: "#e6e6e6",
-									borderWidth: 1,
-									borderBottomStyle: "solid",
-								}}
-							></div>
-						)}
-					</>
-				)}
-				{text.type_proyek_id == 9 ?
-					<div
-						className="menu-list"
-						onClick={() => handleOpenDialogHierarchy(text)}
-					>
-						<span className="menu-icon">
-							<i className="fa fa-bars"></i>
-						</span>
-						<span className="menu-text">More Hierarchy Menu ...</span>
-					</div> :
-					<div
-						className="menu-list"
-						onClick={() => handleOpenDialogGantt(text)}
-					>
-						<span className="menu-icon">
-							<i className="fa fa-bars"></i>
-						</span>
-						<span className="menu-text">More Gantt Menu ...</span>
-					</div>}
-			</div>
-		);
-	};
-
-	const RenderTable = useMemo(() => {
-		const columns = [
-			{
-				title: "Action",
-				dataIndex: "",
-				key: "x",
-				render: (text, record) => (
-					<>
-						<Popover
-							placement="rightTop"
-							title={text.nama}
-							content={popupMenu(text, record)}
-							trigger="click"
-						>
-							<Button size="small" type="link" style={{ color: "green" }}>
-								<i className="fa fa-ellipsis-v"></i>
-							</Button>
-						</Popover>
-						<Popover
-							placement="rightTop"
-							title={text.nama}
-							content={popupMenuGantt(text, record)}
-							trigger="click"
-						>
-							{
-								text.type_proyek_id == 9 ?
-									<Button
-										size="small"
-										type="link"
-										style={{ color: "green" }}
-									>
-										<i className="fa fa-bars"></i>
-									</Button> :
-									<Button
-										onClick={() => getdataGantt(text.id)}
-										size="small"
-										type="link"
-										style={{ color: "green" }}
-									>
-										<i className="fa fa-bars"></i>
-									</Button>
-							}
-						</Popover>
-					</>
-				),
-			},
-			{ title: "Project Name", dataIndex: "nama", key: "nama" },
-			{
-				title: "Budget",
-				dataIndex: "rencana_biaya",
-				key: "rencana_biaya",
-				// render: (text, record) => { return renderFormatRupiah(text, "Rp") }
-				render: (text, record) => {
-					return record.currency_symbol
-						? `${record.currency_symbol} ${formatThousand(text)}`
-						: `${formatThousand(text)}`;
-				},
-			},
-			{
-				title: "Project Type",
-				dataIndex: "color_progress",
-				key: "color_progress",
-				render: (text, record) => (
-					<>{record.join_second_name ? record.join_second_name : "-"}</>
-				),
-			},
-			{
-				title: "PM",
-				dataIndex: "pic",
-				key: "pic",
-				render: (text, record) => (
-					<>{record.join_first_name ? record.join_first_name : "-"}</>
-				),
-			},
-			{
-				title: "Time Project",
-				dataIndex: "akhir_proyek",
-				key: "akhir_proyek",
-				render: (text, record) => (
-					<>
-						{moment(record.mulai_proyek).format(format)} -{" "}
-						{moment(record.akhir_proyek).format(format)}
-					</>
-				),
-			},
-		];
-
-		return (
-			<Table
-				size="small"
-				columns={columns}
-				dataSource={dataTable}
-				pagination={false}
-				rowKey={"id"}
-			/>
-		);
-	}, [dataTable, dataVersionGantt, loadVersionGantt]);
-
-	const handleCloseDialogDoc = () => {
-		setOpenDialogDoc(false);
-		setidTask(0);
-	};
-
-	const handleCloseDialogAsignHr = () => {
-		setidTask(0);
-		setOpenDialogAsignHR(false);
-	};
-
-	const handleCloseDialogAssignK3 = (status) => {
-		if (status == "success") {
-			NotificationManager.success(
-				`Assign K3 to Project berhasil disimpan!`,
-				"Success!!"
-			);
-		} else if (status == "failed") {
-			NotificationManager.error(
-				`Assign K3 to Project gagal disimpan!`,
-				"Failed!!"
-			);
-		}
-		setidTask(0);
-		setOpenDialogAssignK3(false);
-	};
-
-	const RenderDialogForm = useMemo(
-		() => (
-			<DialogForm
-				openDialog={openDialog}
-				closeDialog={handleCloseDialog}
-				toggleDialog={() => toggleAddDialog}
-				idTask={idTask}
-				dataTypeProyek={dataTypeProyek}
-				dataPhaseProject={dataPhaseProject}
-				dataPM={dataPm}
-			/>
-		),
-		[openDialog]
-	);
-
-	const RenderDialogFormProyek = useMemo(
-		() => (
-			<DialogFormProyek
-				openDialog={openDialogProyek}
-				closeDialog={handleCloseDialogProyek}
-				toggleDialog={() => toggleAddDialogProyek}
-				idTask={idTask}
-				dataTypeProyek={dataTypeProyek}
-				dataPhaseProject={dataPhaseProject}
-				dataDivisions={dataDivisions}
-				dataPM={dataPm}
-			/>
-		),
-		[openDialogProyek, dataPm, dataDivisions, dataPhaseProject, dataTypeProyek, idTask]
-	);
-
-	const RenderDialogFormMaterial = useMemo(
-		() => (
-			<DialogFormMaterial
-				openDialog={openDialogMaterial}
-				closeDialog={() => setOpenDialogMaterial(false)}
-				toggleDialog={() => setOpenDialogMaterial(!openDialogMaterial)}
-				idTask={idTask}
-				userProyek={userProyek}
-				materialProyek={materialProyek}
-				materialResource={materialResource}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogMaterial, proyekName, materialResource, materialProyek, userProyek, idTask]
-	);
-
-	const RenderDialogTableTools = useMemo(
-		() => (
-			<DialogTableTools
-				openDialog={openDialogTools}
-				closeDialog={() => setOpenDialogTools(false)}
-				toggleDialog={() => setOpenDialogTools(!openDialogTools)}
-				idTask={idTask}
-				toolsResource={toolsResource}
-				userProyek={userProyek}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogTools, proyekName, userProyek, toolsResource, idTask]
-	);
-
-	// DialogAsignHr
-	const RenderDialogAsignHr = useMemo(
-		() => (
-			<AssignHrProject
-				openDialog={openDialogAsignHR}
-				closeDialog={() => setOpenDialogAsignHR(false)}
-				toggleDialog={() => setOpenDialogAsignHR(!openDialogAsignHR)}
-				handleClose={handleCloseDialogAsignHr}
-				idTask={idTask}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogAsignHR]
-	);
-
-	// DialogAssignK3
-	const RenderDialogAssignK3 = useMemo(
-		() => (
-			<AssignK3Project
-				openDialog={openDialogAssignK3}
-				closeDialog={handleCloseDialogAssignK3}
-				toggleDialog={() => {
-					if (openDialogAssignK3) {
-						setidTask(0);
-					}
-					setOpenDialogAssignK3(!openDialogAssignK3);
-				}}
-				idTask={idTask}
-				proyekName={proyekName}
-				dataK3={dataK3}
-			/>
-		),
-		[openDialogAssignK3, dataK3]
-	);
-
-	const RenderDialogDoc = useMemo(
-		() => (
-			<DialogDocument
-				openDialog={openDialogDoc}
-				closeDialog={() => setOpenDialogDoc(false)}
-				toggleDialog={() => setOpenDialogDoc(!openDialogDoc)}
-				handleClose={handleCloseDialogDoc}
-				idTask={idTask}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogDoc]
-	);
-
-	const ViewProyek = useMemo(
-		() => (
-			<ViewProject
-				openDialog={openDialogViewDetail}
-				closeDialog={handleCloseDialogView}
-				toggleDialog={toggleAddDialogView}
-				projectCharter={projectCharter}
-				projectParticipant={projectParticipant}
-				projectMilestone={projectMilestone}
-				projectApproval={projectApproval}
-			/>
-		),
-		[openDialogViewDetail]
-	);
-
-	const renderDialogGantt = useMemo(
-		() => (
-			<DialogGantt
-				openDialog={openDialogGantt}
-				closeDialog={closeDialogGantt}
-				toggleDialog={toggleDialogGantt}
-				idTask={idTask}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogGantt]
-	);
-
-	const renderDialogHierarchy = useMemo(
-		() => (
-			<DialogHierarchy
-				openDialog={openDialogHierarchy}
-				closeDialog={closeDialogHierarchy}
-				toggleDialog={toggleDialogHierarchy}
-				idTask={idTask}
-				proyekName={proyekName}
-			/>
-		),
-		[openDialogHierarchy]
-	);
-
-	return (
-		<div>
-			<NotificationContainer />
-			<SweetAlert
-				show={alertDelete}
-				warning
-				showCancel
-				confirmBtnText="Delete"
-				confirmBtnBsStyle="danger"
-				title={`Are you sure?`}
-				onConfirm={onConfirmDelete}
-				onCancel={() => cancelDelete()}
-				focusCancelBtn
-			>
-				Delete this data
-			</SweetAlert>
-			{ViewProyek}
-			{RenderDialogForm}
-			{RenderDialogFormProyek}
-			{RenderDialogFormMaterial}
-			{RenderDialogTableTools}
-			{RenderDialogDoc}
-			{renderDialogGantt}
-			{renderDialogHierarchy}
-			{RenderDialogAsignHr}
-			{RenderDialogAssignK3}
-			<Card>
-				<CardHeader
-					style={{ display: "flex", justifyContent: "space-between" }}
-				>
-					<h4 className="capitalize">Project Information</h4>
-					<Row>
-						<Col>
-							<Input
-								onChange={handleSearch}
-								value={search}
-								type="text"
-								name="search"
-								id="search"
-								placeholder={`Search Project Name`}
-								style={{ width: 200 }}
-							/>
-						</Col>
-						<Col>
-							<Tooltip title="Add Project">
-								<Button
-									style={{ background: "#4caf50", color: "#fff" }}
-									onClick={() => handleOpenDialogProyek(0)}
-								>
-									<i className="fa fa-plus"></i>
-								</Button>
-							</Tooltip>
-							<Tooltip title="Export Excel">
-								<Popover
-									// content={<a onClick={hide}>Close</a>}
-									title="Export"
-									trigger="click"
-									placement="leftBottom"
-									content={
-										<>
-											<Button
-												icon={<FileExcelOutlined />}
-												type="link"
-												block
-												onClick={() => handleExportExcel()}
-											>
-												Export to Excel
-											</Button>
-											<br />
-											<Button
-												icon={<FilePdfOutlined />}
-												type="link"
-												block
-												onClick={() => handleExportPdf()}
-											>
-												Export to PDF
-											</Button>
-										</>
-									}
-								// visible={visible}
-								// onVisibleChange={handleVisibleChange}
-								>
-									<Button
-										style={{ marginLeft: "5px" }}
-									// onClick={() => handleExportExcel()}
-									>
-										<i className="fa fa-print"></i>
-									</Button>
-								</Popover>
-							</Tooltip>
-						</Col>
-					</Row>
-				</CardHeader>
-				<CardBody>
-					{RenderTable}
-					<Pagination
-						style={{ marginTop: "25px" }}
-						showSizeChanger
-						onShowSizeChange={onShowSizeChange}
-						onChange={onPagination}
-						pageSizeOptions={["10", "25", "50"]}
-						total={totalPage}
-						pageSize={rowsPerPage}
-						current={currentPage}
-					/>
-				</CardBody>
-			</Card>
-		</div>
-	);
-};
-
-export default CreatedProyek;
+import React, { useState, useEffect, useMemo } from "react";
+import { Card, CardBody, CardHeader, Col, Row, Input } from "reactstrap";
+import axios from "../../../const/interceptorApi";
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+import * as XLSX from "xlsx";
+import SweetAlert from "react-bootstrap-sweetalert";
+import DialogForm from "./DialogForm";
+import DialogFormProyek from "./DialogFormProyek";
+import { FileExcelOutlined, FilePdfOutlined } from "@ant-design/icons";
+import {
+  NotificationContainer,
+  NotificationManager,
+} from "react-notifications";
+import {
+  Pagination,
+  Table,
+  Button,
+  Tooltip,
+  Popover,
+  Skeleton,
+  Divider,
+} from "antd";
+import {
+  PROJECT_APPROVAL_ADD,
+  PROJECT_APPROVAL_EDIT,
+  PROJECT_PARTICIPANT_ADD,
+  PROJECT_PARTICIPANT_EDIT,
+  PROJECT_MILESTONE_ADD,
+  PROJECT_MILESTONE_EDIT,
+  PROJECT_PARTICIPANT_DELETE_BY_PROYEK,
+  PROJECT_MILESTONE_DELETE_BY_PROYEK,
+  PROJECT_APPROVAL_DELETE_BY_PROYEK,
+  USER_LIST,
+  TYPE_PROYEK,
+  PROYEK_ADD,
+  PROYEK_SEARCH,
+  PROYEK_EDIT,
+  PROYEK_DELETE,
+  TOOLS_RESOURCE_SEARCH,
+  MATERIAL_RESOURCE_SEARCH,
+  USER_SEARCH,
+  PROJECT_CHARTER_SEARCH,
+  HIERARCHY_FTTH_SEARCH,
+  TOOLS_RESOURCE_LIST,
+  MATERIAL_RESOURCE_LIST,
+  PROYEK_GET_ID,
+  PROJECT_MILESTONE_SEARCH,
+  PROJECT_PARTICIPANT_SEARCH,
+  PROJECT_APPROVAL_SEARCH,
+  CHECKLIST_K3_LIST,
+  VERSION_GANTT_SEARCH,
+  PHASE_PROYEK,
+  DIVISI_LIST,
+  BASE_OSPRO,
+} from "../../../const/ApiConst";
+import {
+  formatNumber,
+  formatRupiah,
+  formatThousand,
+  renderFormatRupiah,
+} from "../../../const/CustomFunc";
+import moment from "moment";
+// import DialogFormResource from './DialogFormResource';
+import DialogFormMaterial from "./DataRequestMaterial";
+import DialogTableTools from "./DialogTableTools";
+import DialogDocument from "./DialogDocument";
+import DialogInitDocument from "./DialogInitDocument";
+import DialogGantt from "./DialogGantt";
+import DialogHierarchy from "./DialogHierarchy";
+// import DialogAsignHr from './AsignHrProject';
+import AssignHrProject from "./AsignHrProject";
+import AssignK3Project from "./AssignK3Project";
+import ViewProject from "./ViewProject";
+import { Icon } from "@iconify/react";
+// import { Link } from 'react-router-dom';
+// import SubProyekComp from './SubProyekComp';
+import { Link, useHistory } from "react-router-dom";
+
+const url = "";
+const proyek_id = localStorage.getItem("proyek_id");
+const role_id = localStorage.getItem("role_id");
+const format = "DD-MM-YYYY";
+
+const CreatedProyek = ({ params, ...props }) => {
+  const history = useHistory();
+  const token = localStorage.getItem("token");
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
+  const [idTask, setidTask] = 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 [openDialogMaterial, setOpenDialogMaterial] = useState(false);
+  const [openDialogTools, setOpenDialogTools] = useState(false);
+  const [openDialogGantt, setOpenDialogGantt] = useState(false);
+  const [openDialogHierarchy, setOpenDialogHierarchy] = useState(false);
+  const [openDialogAsignHR, setOpenDialogAsignHR] = useState(false);
+  const [openDialogAssignK3, setOpenDialogAssignK3] = useState(false);
+  const [dataK3, setDataK3] = useState([]); // transfer list
+  const [idDelete, setIdDelete] = useState(0);
+  const [alertDelete, setAlertDelete] = useState(false);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [dataExport, setDataExport] = useState([]);
+  const [userProyek, setUserProyek] = useState([]);
+  const [materialProyek, setMaterialProyek] = useState([]);
+  const [dataCharter, setDataCharter] = useState(null);
+  const [dataView, setDataView] = useState([]);
+  const [materialResource, setMaterialResource] = useState([]);
+  const [toolsResource, setToolsResource] = useState([]);
+  const [dataTypeProyek, setDataTypeProyek] = useState([]);
+  const [dataPhaseProject, setDataPhaseProject] = useState([]);
+  const [dataDivisions, setDataDivisions] = useState([]);
+  const [dataPm, setDataPM] = useState([]);
+  const [openDialogDoc, setOpenDialogDoc] = useState(false);
+  const [proyekName, setProyekName] = useState("");
+  const [openDialogProyek, setOpenDialogProyek] = useState(false);
+  // project charter
+  const [projectCharter, setProjectCharter] = useState(null);
+  const [projectParticipant, setProjectParticipant] = useState(null);
+  const [projectMilestone, setProjectMilestone] = useState(null);
+  const [projectApproval, setProjectApproval] = useState(null);
+
+  const [loadVersionGantt, setLoadVersionGantt] = useState(false);
+  const [loadHierarchy, setLoadHierarchy] = useState(false);
+  const [dataVersionGantt, setDataVersionGantt] = useState([]);
+  const [dataHierarchy, setDataHierarchy] = useState([]);
+  const [dataDetail, setDataDetail] = useState(null);
+
+  const pageName = params.name;
+
+  useEffect(() => {
+    if (openDialogMaterial) {
+      getDataMaterialResource();
+    }
+  }, [openDialogMaterial]);
+
+  useEffect(() => {
+    if (openDialogTools) {
+      getDataToolsResource();
+    }
+  }, [openDialogTools]);
+
+  useEffect(() => {
+    if (openDialogAssignK3) {
+      getDataK3();
+    }
+  }, [openDialogAssignK3]);
+
+  useEffect(() => {
+    if (openDialogProyek) {
+      handleGetTipeProject();
+      handleGetPhaseProject();
+      handleGetDivisions();
+      handleGetDataPm();
+    }
+  }, [openDialogProyek]);
+
+  useEffect(() => {
+    getDataProyek();
+  }, [search, rowsPerPage, currentPage]);
+
+  useEffect(() => {
+    if (dataExport.length > 0) {
+      exportExcel();
+    }
+  }, [dataExport]);
+
+  useEffect(() => {
+    if (!openDialog) {
+      setidTask(0);
+    }
+  }, [openDialogDoc]);
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearch(value);
+    setCurrentPage(1);
+  };
+
+  const handleGetTipeProject = async () => {
+    const result = await axios
+      .get(TYPE_PROYEK, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (result && result.data && result.data.code === 200) {
+      setDataTypeProyek(result.data.data);
+    } else {
+    }
+  };
+
+  const handleGetPhaseProject = async () => {
+    const result = await axios
+      .get(PHASE_PROYEK, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (result && result.data && result.data.code === 200) {
+      setDataPhaseProject(result.data.data);
+    }
+  };
+
+  const handleGetDivisions = async () => {
+    const result = await axios
+      .get(DIVISI_LIST, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (result && result.data && result.data.code === 200) {
+      setDataDivisions(result.data.data);
+    }
+  };
+
+  const handleGetDataPm = async () => {
+    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);
+    } else {
+    }
+  };
+
+  const getDataProyek = async () => {
+    let start = 0;
+
+    if (currentPage !== 1 && currentPage > 1) {
+      start = currentPage * rowsPerPage - rowsPerPage;
+    }
+
+    const payload = {
+      columns: [
+        {
+          name: "nama",
+          logic_operator: "ilike",
+          value: search,
+          operator: "AND",
+        },
+      ],
+      joins: [
+        {
+          name: "m_users",
+          column_join: "pm_id",
+          column_results: ["name", "username", "role_id"],
+        },
+        {
+          name: "m_type_proyek",
+          column_join: "type_proyek_id",
+          column_results: ["name", "description"],
+        },
+        // { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: start, length: rowsPerPage },
+    };
+
+    if (parseInt(role_id) !== 1) {
+      payload["columns"] = [
+        { name: "id", logic_operator: "=", value: proyek_id, operator: "AND" },
+      ];
+    }
+
+    const result = await axios
+      .post(PROYEK_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.join_first_role_id === parseInt(role_id)
+      );
+      setDatatable(filteredData);
+      setTotalPage(result.data.totalRecord);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getDataMaterialResource = async () => {
+    const result = await axios
+      .get(MATERIAL_RESOURCE_LIST, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setMaterialResource(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getdataGantt = async (idTask) => {
+    setLoadVersionGantt(true);
+    const payload = {
+      columns: [
+        {
+          name: "proyek_id",
+          logic_operator: "=",
+          value: idTask,
+          operator: "AND",
+        },
+      ],
+    };
+    const result = await axios
+      .post(VERSION_GANTT_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      setDataVersionGantt(result.data.data);
+      setLoadVersionGantt(false);
+    } else {
+      NotificationManager.error(
+        `Data gantt project gagal terload silahkan coba lagi!`,
+        "Failed!!"
+      );
+    }
+  };
+
+  const getDataToolsResource = async () => {
+    const result = await axios
+      .get(TOOLS_RESOURCE_LIST, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setToolsResource(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getDataK3 = async () => {
+    const result = await axios
+      .get(CHECKLIST_K3_LIST, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      const finalData = [];
+      if (dataRes.length > 0) {
+        dataRes.map((val, index) => {
+          let data = {
+            key: val.id,
+            title: val.name,
+          };
+          finalData.push(data);
+        });
+      }
+      setDataK3(finalData);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const handleOpenDialog = (id) => {
+    setOpenDialog(true);
+    setidTask(id);
+  };
+
+  const handleOpenDialogProyek = (id) => {
+    setOpenDialogProyek(true);
+    setidTask(id);
+  };
+
+  const handleOpenDialogGantt = (data) => {
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogGantt(true);
+  };
+
+  const handleOpenDialogHierarchy = (data) => {
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogHierarchy(true);
+  };
+
+  const toggleDialogGantt = () => {
+    setOpenDialogGantt(!openDialogGantt);
+  };
+
+  const closeDialogGantt = () => {
+    setOpenDialogGantt(false);
+  };
+
+  const toggleDialogHierarchy = () => {
+    setOpenDialogHierarchy(!openDialogHierarchy);
+  };
+
+  const closeDialogHierarchy = () => {
+    setOpenDialogHierarchy(false);
+  };
+
+  const handleOpenDialogMaterial = (data) => {
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogMaterial(true);
+  };
+
+  const handleOpenAsignHr = (data) => {
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogAsignHR(true);
+  };
+
+  const handleOpenAssignK3 = (data) => {
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogAssignK3(true);
+  };
+
+  const handleOpenDialogTools = (data) => {
+    setOpenDialogTools(true);
+    setidTask(data.id);
+    setProyekName(data.nama);
+    setUserProyek(data.user_proyeks);
+  };
+
+  const handleOpenDialogViewDetail = async (data) => {
+    setidTask(data.id);
+    // setDataView(data)
+    await getDataProject(data.id);
+    await getProjectMilestone(data.id);
+    await getProjectParticipant(data.id);
+    await getProjectApproval(data.id);
+    // await getDataProjectCharter(data.id);
+    setOpenDialogViewDetail(true);
+  };
+
+  const getProjectDetail = async (id) => {
+    const URL = `${BASE_OSPRO}/api/project/detail/${id}`;
+    const result = await axios
+      .get(URL, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get project detail failed, ${result.data.message}`,
+        "Failed"
+      );
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      history.push(
+        `/dashboard-project/${id}/${result.data.gantt.last_gantt_id}/1`
+      );
+    }
+  };
+
+  const handleSCurve = async (data) => {
+    getProjectDetail(data.id);
+  };
+
+  const getDataProject = async (proyek_id) => {
+    const url = PROYEK_GET_ID(proyek_id);
+    const result = await axios
+      .get(url, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data;
+      setProjectCharter(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getProjectMilestone = async (id) => {
+    const payload = {
+      columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
+      joins: [],
+      orders: { columns: ["id"], ascending: true },
+      paging: { start: 0, length: -1 },
+    };
+    // const url = PROJECT_MI(proyek_id)
+    const result = await axios
+      .post(PROJECT_MILESTONE_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data;
+      setProjectMilestone(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getProjectParticipant = async (id) => {
+    const payload = {
+      columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
+      joins: [],
+      orders: { columns: ["id"], ascending: true },
+      paging: { start: 0, length: -1 },
+    };
+    // const url = PROJECT_MI(proyek_id)
+    const result = await axios
+      .post(PROJECT_PARTICIPANT_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data;
+      setProjectParticipant(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const getProjectApproval = async (id) => {
+    const payload = {
+      columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
+      joins: [],
+      orders: { columns: ["id"], ascending: true },
+      paging: { start: 0, length: -1 },
+    };
+    // const url = PROJECT_MI(proyek_id)
+    const result = await axios
+      .post(PROJECT_APPROVAL_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data;
+      setProjectApproval(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  const handleCloseDialog = (type, payload) => {
+    if (type === "add") saveProyek(payload);
+
+    if (type === "edit") editProyek(payload);
+    setidTask(0);
+    setOpenDialog(false);
+  };
+
+  const handleCloseDialogProyek = (type, payload) => {
+    if (type === "add") saveProyek(payload);
+
+    if (type === "edit") editProyek(payload);
+    setidTask(0);
+    setOpenDialogProyek(false);
+  };
+
+  const handleCloseDialogView = () => {
+    setProjectApproval(null);
+    setProjectParticipant(null);
+    setProjectMilestone(null);
+    setProjectCharter(null);
+    setOpenDialogViewDetail(false);
+  };
+
+  const toggleAddDialog = () => setOpenDialog(!openDialog);
+  const toggleAddDialogProyek = () => setOpenDialogProyek(!openDialogProyek);
+  const toggleAddDialogView = () => {
+    if (openDialogViewDetail) {
+      setProjectApproval(null);
+      setProjectParticipant(null);
+      setProjectMilestone(null);
+      setProjectCharter(null);
+    }
+    setOpenDialogViewDetail(!openDialogViewDetail);
+  };
+
+  const onConfirmDelete = async () => {
+    let urlDel = PROYEK_DELETE(idDelete);
+    const result = await axios
+      .delete(urlDel, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getDataProyek();
+      setIdDelete(0);
+      setAlertDelete(false);
+      NotificationManager.success(`Data proyek berhasil dihapus`, "Success!!");
+    } else {
+      setIdDelete(0);
+      setAlertDelete(false);
+      NotificationManager.error(`Data proyek gagal dihapus`, "Failed!!");
+    }
+  };
+
+  const saveProyek = async (data) => {
+    const formData = data;
+
+    const result = await axios
+      .post(PROYEK_ADD, formData, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+    if (result && result.data && result.data.code === 200) {
+      const { participants, milestones, approval } = data.projectCharter;
+      const resultParticipant = await saveParticipant(
+        result.data.data_result.id,
+        participants
+      );
+      const resultMilestone = await saveMilestone(
+        result.data.data_result.id,
+        milestones
+      );
+      const resultApproval = await saveApproval(
+        result.data.data_result.id,
+        approval
+      );
+      if (
+        resultParticipant === "berhasil" &&
+        resultMilestone === "berhasil" &&
+        resultApproval === "berhasil"
+      ) {
+        // getDataProyek();
+        NotificationManager.success(
+          `Data proyek berhasil ditambah`,
+          "Success!!"
+        );
+      } else {
+        NotificationManager.success(`${result.data.message}`, "Success!!");
+      }
+
+      getDataProyek();
+    } else {
+      NotificationManager.error(`${result.data.message}`, "Failed!!");
+    }
+  };
+
+  const saveParticipant = async (id, data) => {
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        tittle: res.title,
+        name: res.name,
+      };
+      return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    const result = arr.map((res) => res.data.code == 200);
+    if (result.length > 0) {
+      return "gagal";
+    }
+
+    return "berhasil";
+  };
+
+  const saveMilestone = async (id, data) => {
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        status: res.status,
+        due_date: res.due,
+        deadline: res.deadline,
+      };
+      return axios.post(PROJECT_MILESTONE_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    const result = arr.map((res) => res.data.code !== 200);
+    if (result.length > 0) {
+      return "gagal";
+    }
+
+    return "berhasil";
+  };
+
+  const saveApproval = async (id, data) => {
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        tittle: res.title,
+        name: res.name,
+        date_approval: res.date,
+      };
+      return axios.post(PROJECT_APPROVAL_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    const result = arr.map((res) => res.data.code !== 200);
+    if (result.length > 0) {
+      return "gagal";
+    }
+
+    return "berhasil";
+  };
+
+  const editProyek = async (data) => {
+    const { participants, milestones, approval } = data.projectCharter;
+    let urlEdit = PROYEK_EDIT(data.id);
+    const formData = data;
+
+    const result = await axios
+      .put(urlEdit, formData, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+    const resultParticipant = await editParticipant(data.id, participants);
+    const resultMilestone = await editMilestone(data.id, milestones);
+    const resultApproval = await editApproval(data.id, approval);
+    if (result && result.status === 200) {
+      getDataProyek();
+      NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!");
+    } else {
+      NotificationManager.error(`${result.data.message}`, "Failed!!");
+    }
+  };
+
+  const editParticipant = async (id, data) => {
+    await axios.delete(PROJECT_PARTICIPANT_DELETE_BY_PROYEK(id), HEADER);
+    // if (restDelete){
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        tittle: res.tittle ? res.tittle : res.title,
+        name: res.name,
+      };
+      return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    const result = arr.map((res) => res.data.code !== 200);
+    if (result.length > 0) {
+      return "gagal";
+    }
+
+    return "berhasil";
+  };
+
+  const editMilestone = async (id, data) => {
+    await axios.delete(PROJECT_MILESTONE_DELETE_BY_PROYEK(id), HEADER);
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        status: res.status,
+        due_date: res.due_date ? res.due_date : res.due,
+        deadline: res.deadline,
+      };
+      return axios.post(PROJECT_MILESTONE_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    const result = arr.map((res) => res.data.code !== 200);
+    if (result.length > 0) {
+      return "gagal";
+    }
+    return "berhasil";
+  };
+
+  const editApproval = async (id, data) => {
+    await axios.delete(PROJECT_APPROVAL_DELETE_BY_PROYEK(id), HEADER);
+    const request = data.map((res) => {
+      const payload = {
+        proyek_id: parseInt(id),
+        tittle: res.tittle ? res.tittle : res.title,
+        name: res.name,
+        date_approval: res.date ? res.date : res.date_approval,
+      };
+      return axios.post(PROJECT_APPROVAL_ADD, payload, HEADER);
+    });
+    const arr = await Promise.all(request)
+      .then((values) => values)
+      .catch((err) => err.response);
+    // if(arr)
+
+    // const result = arr.map(res => res.data.code !== 200)
+    // if (result.length > 0) {
+    //   return "gagal"
+    // }
+    // return "berhasil"
+  };
+
+  const handleDelete = async (id) => {
+    await setAlertDelete(true);
+    await setIdDelete(id);
+  };
+
+  const onShowSizeChange = (current, pageSize) => {
+    setRowsPerPage(pageSize);
+  };
+
+  const onPagination = (current, pageSize) => {
+    setCurrentPage(current);
+  };
+
+  const handleExportExcel = async () => {
+    const payload = {
+      paging: { start: 0, length: -1 },
+      joins: [],
+      orders: { columns: ["id"], ascending: false },
+    };
+
+    if (parseInt(role_id) !== 1) {
+      payload["columns"] = [
+        { name: "id", logic_operator: "=", value: proyek_id, operator: "AND" },
+      ];
+    }
+
+    const result = await axios
+      .post(PROYEK_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let resData = result.data.data;
+      const excelData = [];
+      resData.map((n, index) => {
+        let dataRow = {
+          Sortname: n.kode_sortname ? n.kode_sortname : "",
+          "Nama Project": n.nama ? n.nama : "",
+          "Tanggal Mulai": n.mulai_proyek
+            ? moment(n.mulai_proyek).format(format)
+            : "-",
+          "Tanggal Selesai": n.akhir_proyek
+            ? moment(n.akhir_proyek).format(format)
+            : "-",
+          "Area Kerja": n.area_kerja ? n.area_kerja : "",
+          Perusahaan: n.company ? n.company : "",
+          Keterangan: n.keterangan ? n.keterangan : "",
+          "Dianggap sukses ketika": n.considered_success_when
+            ? n.considered_success_when
+            : "",
+          "Tujuan Proyek": n.project_objectives ? n.project_objectives : "",
+          "Resiko potensial": n.potential_risk ? n.potential_risk : "",
+          "Rencana Biaya": n.rencana_biaya
+            ? formatThousand(n.rencana_biaya)
+            : "-",
+          "Testing Environment": n.testing_environment
+            ? n.testing_environment
+            : "-",
+        };
+        excelData.push(dataRow);
+      });
+      await setDataExport(excelData);
+    } else {
+      NotificationManager.error("Gagal Export Data!!", "Failed");
+    }
+  };
+
+  const handleExportPdf = async () => {
+    const doc = new jsPDF();
+
+    const headers = [
+      ["Project Name", "Budget", "Project Type", "PM", "Time Project"],
+    ];
+    const payload = {
+      columns: [
+        {
+          name: "nama",
+          logic_operator: "ilike",
+          value: search,
+          operator: "AND",
+        },
+      ],
+      joins: [
+        {
+          name: "m_users",
+          column_join: "pm_id",
+          column_results: ["name", "username"],
+        },
+        {
+          name: "m_type_proyek",
+          column_join: "type_proyek_id",
+          column_results: ["name", "description"],
+        },
+        // { "name": "subproyeks.m_subproyek", "column_join": "parent_id", "column_results": ["nama", "biaya", "color_progress", "jumlah_pekerja", "pic", "mulai_proyek", "akhir_proyek", "biaya_actual", "persentase_progress_plan", "persentase_progress_actual"] }
+      ],
+      orders: { columns: ["id"], ascending: false },
+    };
+
+    const result = await axios
+      .post(PROYEK_SEARCH, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+    if (result && result.data && result.data.code == 200) {
+      let resData = result.data.data;
+      const data = resData.map((elt) => [
+        elt.nama,
+        `Rp. ${formatThousand(elt.rencana_biaya)}`,
+        elt.join_second_name,
+        elt.join_first_name,
+        `${moment(elt.mulai_proyek).format(format)} - ${moment(
+          elt.akhir_proyek
+        ).format(format)}`,
+      ]);
+      // Or use javascript directly:
+      doc.text(4, 15, "Project Charter");
+      autoTable(doc, {
+        startY: 20,
+        margin: { horizontal: 4 },
+        styles: { overflow: "linebreak", columnWidth: "auto", fontSize: 8 },
+        columnStyles: { text: { columnWidth: "auto" } },
+        head: headers,
+        body: data,
+      });
+    }
+    doc.save("Project.pdf");
+    // const unit = "pt";
+    // const size = "A4"; // Use A1, A2, A3 or A4
+    // const orientation = "portrait"; // portrait or landscape
+
+    // const marginLeft = 40;
+    // const doc = new jsPDF(orientation, unit, size);
+
+    // doc.setFontSize(15);
+    // const dataPeople = [
+    //   { name: "Keanu Reeves", profession: "Actor" },
+    //   { name: "Lionel Messi", profession: "Football Player" },
+    //   { name: "Cristiano Ronaldo", profession: "Football Player" },
+    //   { name: "Jack Nicklaus", profession: "Golf Player" },
+    // ];
+    // const title = "My Awesome Report";
+    // const headers = [["NAME", "PROFESSION"]];
+
+    // const data = dataPeople.map((elt) => [elt.name, elt.profession]);
+
+    // let content = {
+    //   startY: 50,
+    //   head: headers,
+    //   body: data,
+    // };
+
+    // doc.text(title, marginLeft, 40);
+    // doc.autoTable(content);
+    // doc.save("report.pdf");
+  };
+
+  const exportExcel = () => {
+    const dataExcel = dataExport || [];
+    const fileName = `Data ${pageName}.xlsx`;
+    const ws = XLSX.utils.json_to_sheet(dataExcel);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+
+    XLSX.writeFile(wb, fileName);
+    setDataExport([]);
+  };
+
+  const cancelDelete = () => {
+    setAlertDelete(false);
+    setIdDelete(0);
+  };
+
+  const handleOpenDokumen = async (data) => {
+    await setidTask(data.id);
+    setProyekName(data.nama);
+    setOpenDialogDoc(true);
+  };
+
+  const popupMenu = (text, record) => {
+    return (
+      <div>
+        <div
+          className="menu-list"
+          onClick={() => handleOpenDialogViewDetail(text)}
+        >
+          <span className="menu-icon">
+            <i className="fa fa-eye"></i>
+          </span>
+          <span className="menu-text">Project Charter</span>
+        </div>
+        <div className="menu-list" onClick={() => handleOpenDokumen(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-file"></i>
+          </span>
+          <span className="menu-text">Project Documents</span>
+        </div>
+        <div className="menu-list" onClick={() => handleOpenAsignHr(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-users"></i>
+          </span>
+          <span className="menu-text">Assign Human Resource</span>
+        </div>
+        <div className="menu-list" onClick={() => handleOpenAssignK3(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-plus-circle"></i>
+          </span>
+          <span className="menu-text">Assign Checklist K3</span>
+        </div>
+        {/* <div
+					className="menu-list"
+					onClick={() => handleOpenDialogMaterial(text)}
+				>
+					<span className="menu-icon">
+						<i className="fa fa-cube"></i>
+					</span>
+					<span className="menu-text">Request Material Resource</span>
+				</div> */}
+        {/* <div className="menu-list" onClick={() => handleOpenDialogTools(text)}>
+					<span className="menu-icon">
+						<i className="fa fa-cog"></i>
+					</span>
+					<span className="menu-text">Request Tools</span>
+				</div> */}
+        {/* <Link to={`/project-charter/${text.id}/gantt`}> */}
+        <div className="menu-list" onClick={() => handleOpenDialogGantt(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-bars"></i>
+          </span>
+          <span className="menu-text">Gantt</span>
+        </div>
+        <div className="menu-list" onClick={() => handleSCurve(text)}>
+          <span className="menu-icon">
+            <i className="fa fa-line-chart"></i>
+          </span>
+          <span className="menu-text">S Curve</span>
+        </div>
+        {/* </Link> */}
+        <div
+          className="menu-list"
+          onClick={() => handleOpenDialogProyek(text.id)}
+        >
+          <span className="menu-icon">
+            <i className="fa fa-edit"></i>
+          </span>
+          <span className="menu-text">Edit Project</span>
+        </div>
+        <div className="menu-list" onClick={() => handleDelete(text.id)}>
+          <span className="menu-icon">
+            <i className="fa fa-trash"></i>
+          </span>
+          <span className="menu-text">Delete Project</span>
+        </div>
+      </div>
+    );
+  };
+
+  const popupMenuGantt = (text, record) => {
+    return (
+      <div>
+        {text.type_proyek_id !== 9 && loadVersionGantt && (
+          <div className="menu-list">
+            <Skeleton active />
+          </div>
+        )}
+
+        {!loadVersionGantt && text.type_proyek_id !== 9 && (
+          <>
+            {dataVersionGantt.slice(0, 8).map((res) => (
+              <Link to={`/projects/${res.id}/${text.id}/gantt`}>
+                <div className="menu-list">
+                  <span className="menu-icon">
+                    <i className="fa fa-file"></i>
+                  </span>
+                  <span className="menu-text">{res.name_version}</span>
+                </div>
+              </Link>
+            ))}
+            {dataVersionGantt.length > 0 && (
+              <div
+                style={{
+                  marginLeft: 15,
+                  marginBottom: 5,
+                  borderBottom: 1,
+                  borderColor: "#e6e6e6",
+                  borderWidth: 1,
+                  borderBottomStyle: "solid",
+                }}
+              ></div>
+            )}
+          </>
+        )}
+        {text.type_proyek_id == 9 ? (
+          <div
+            className="menu-list"
+            onClick={() => handleOpenDialogHierarchy(text)}
+          >
+            <span className="menu-icon">
+              <i className="fa fa-bars"></i>
+            </span>
+            <span className="menu-text">More Hierarchy Menu ...</span>
+          </div>
+        ) : (
+          <div
+            className="menu-list"
+            onClick={() => handleOpenDialogGantt(text)}
+          >
+            <span className="menu-icon">
+              <i className="fa fa-bars"></i>
+            </span>
+            <span className="menu-text">More Gantt Menu ...</span>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const RenderTable = useMemo(() => {
+    const columns = [
+      {
+        title: "Action",
+        dataIndex: "",
+        key: "x",
+        render: (text, record) => (
+          <>
+            <Popover
+              placement="rightTop"
+              title={text.nama}
+              content={popupMenu(text, record)}
+              trigger="click"
+            >
+              <Button size="small" type="link" style={{ color: "green" }}>
+                <i className="fa fa-ellipsis-v"></i>
+              </Button>
+            </Popover>
+            <Popover
+              placement="rightTop"
+              title={text.nama}
+              content={popupMenuGantt(text, record)}
+              trigger="click"
+            >
+              {text.type_proyek_id == 9 ? (
+                <Button size="small" type="link" style={{ color: "green" }}>
+                  <i className="fa fa-bars"></i>
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => getdataGantt(text.id)}
+                  size="small"
+                  type="link"
+                  style={{ color: "green" }}
+                >
+                  <i className="fa fa-bars"></i>
+                </Button>
+              )}
+            </Popover>
+          </>
+        ),
+      },
+      { title: "Project Name", dataIndex: "nama", key: "nama" },
+      {
+        title: "Budget",
+        dataIndex: "rencana_biaya",
+        key: "rencana_biaya",
+        // render: (text, record) => { return renderFormatRupiah(text, "Rp") }
+        render: (text, record) => {
+          return record.currency_symbol
+            ? `${record.currency_symbol} ${formatThousand(text)}`
+            : `${formatThousand(text)}`;
+        },
+      },
+      {
+        title: "Project Type",
+        dataIndex: "color_progress",
+        key: "color_progress",
+        render: (text, record) => (
+          <>{record.join_second_name ? record.join_second_name : "-"}</>
+        ),
+      },
+      {
+        title: "PM",
+        dataIndex: "pic",
+        key: "pic",
+        render: (text, record) => (
+          <>{record.join_first_name ? record.join_first_name : "-"}</>
+        ),
+      },
+      {
+        title: "Time Project",
+        dataIndex: "akhir_proyek",
+        key: "akhir_proyek",
+        render: (text, record) => (
+          <>
+            {moment(record.mulai_proyek).format(format)} -{" "}
+            {moment(record.akhir_proyek).format(format)}
+          </>
+        ),
+      },
+    ];
+
+    return (
+      <Table
+        size="small"
+        columns={columns}
+        dataSource={dataTable}
+        pagination={false}
+        rowKey={"id"}
+      />
+    );
+  }, [dataTable, dataVersionGantt, loadVersionGantt]);
+
+  const handleCloseDialogDoc = () => {
+    setOpenDialogDoc(false);
+    setidTask(0);
+  };
+
+  const handleCloseDialogAsignHr = () => {
+    setidTask(0);
+    setOpenDialogAsignHR(false);
+  };
+
+  const handleCloseDialogAssignK3 = (status) => {
+    if (status == "success") {
+      NotificationManager.success(
+        `Assign K3 to Project berhasil disimpan!`,
+        "Success!!"
+      );
+    } else if (status == "failed") {
+      NotificationManager.error(
+        `Assign K3 to Project gagal disimpan!`,
+        "Failed!!"
+      );
+    }
+    setidTask(0);
+    setOpenDialogAssignK3(false);
+  };
+
+  const RenderDialogForm = useMemo(
+    () => (
+      <DialogForm
+        openDialog={openDialog}
+        closeDialog={handleCloseDialog}
+        toggleDialog={() => toggleAddDialog}
+        idTask={idTask}
+        dataTypeProyek={dataTypeProyek}
+        dataPhaseProject={dataPhaseProject}
+        dataPM={dataPm}
+      />
+    ),
+    [openDialog]
+  );
+
+  const RenderDialogFormProyek = useMemo(
+    () => (
+      <DialogFormProyek
+        openDialog={openDialogProyek}
+        closeDialog={handleCloseDialogProyek}
+        toggleDialog={() => toggleAddDialogProyek}
+        idTask={idTask}
+        dataTypeProyek={dataTypeProyek}
+        dataPhaseProject={dataPhaseProject}
+        dataDivisions={dataDivisions}
+        dataPM={dataPm}
+      />
+    ),
+    [
+      openDialogProyek,
+      dataPm,
+      dataDivisions,
+      dataPhaseProject,
+      dataTypeProyek,
+      idTask,
+    ]
+  );
+
+  const RenderDialogFormMaterial = useMemo(
+    () => (
+      <DialogFormMaterial
+        openDialog={openDialogMaterial}
+        closeDialog={() => setOpenDialogMaterial(false)}
+        toggleDialog={() => setOpenDialogMaterial(!openDialogMaterial)}
+        idTask={idTask}
+        userProyek={userProyek}
+        materialProyek={materialProyek}
+        materialResource={materialResource}
+        proyekName={proyekName}
+      />
+    ),
+    [
+      openDialogMaterial,
+      proyekName,
+      materialResource,
+      materialProyek,
+      userProyek,
+      idTask,
+    ]
+  );
+
+  const RenderDialogTableTools = useMemo(
+    () => (
+      <DialogTableTools
+        openDialog={openDialogTools}
+        closeDialog={() => setOpenDialogTools(false)}
+        toggleDialog={() => setOpenDialogTools(!openDialogTools)}
+        idTask={idTask}
+        toolsResource={toolsResource}
+        userProyek={userProyek}
+        proyekName={proyekName}
+      />
+    ),
+    [openDialogTools, proyekName, userProyek, toolsResource, idTask]
+  );
+
+  // DialogAsignHr
+  const RenderDialogAsignHr = useMemo(
+    () => (
+      <AssignHrProject
+        openDialog={openDialogAsignHR}
+        closeDialog={() => setOpenDialogAsignHR(false)}
+        toggleDialog={() => setOpenDialogAsignHR(!openDialogAsignHR)}
+        handleClose={handleCloseDialogAsignHr}
+        idTask={idTask}
+        proyekName={proyekName}
+      />
+    ),
+    [openDialogAsignHR]
+  );
+
+  // DialogAssignK3
+  const RenderDialogAssignK3 = useMemo(
+    () => (
+      <AssignK3Project
+        openDialog={openDialogAssignK3}
+        closeDialog={handleCloseDialogAssignK3}
+        toggleDialog={() => {
+          if (openDialogAssignK3) {
+            setidTask(0);
+          }
+          setOpenDialogAssignK3(!openDialogAssignK3);
+        }}
+        idTask={idTask}
+        proyekName={proyekName}
+        dataK3={dataK3}
+      />
+    ),
+    [openDialogAssignK3, dataK3]
+  );
+
+  const RenderDialogDoc = useMemo(
+    () => (
+      <DialogDocument
+        openDialog={openDialogDoc}
+        closeDialog={() => setOpenDialogDoc(false)}
+        toggleDialog={() => setOpenDialogDoc(!openDialogDoc)}
+        handleClose={handleCloseDialogDoc}
+        idTask={idTask}
+        proyekName={proyekName}
+      />
+    ),
+    [openDialogDoc]
+  );
+
+  const ViewProyek = useMemo(
+    () => (
+      <ViewProject
+        openDialog={openDialogViewDetail}
+        closeDialog={handleCloseDialogView}
+        toggleDialog={toggleAddDialogView}
+        projectCharter={projectCharter}
+        projectParticipant={projectParticipant}
+        projectMilestone={projectMilestone}
+        projectApproval={projectApproval}
+      />
+    ),
+    [openDialogViewDetail]
+  );
+
+  const renderDialogGantt = useMemo(
+    () => (
+      <DialogGantt
+        openDialog={openDialogGantt}
+        closeDialog={closeDialogGantt}
+        toggleDialog={toggleDialogGantt}
+        idTask={idTask}
+        proyekName={proyekName}
+      />
+    ),
+    [openDialogGantt]
+  );
+
+  const renderDialogHierarchy = useMemo(
+    () => (
+      <DialogHierarchy
+        openDialog={openDialogHierarchy}
+        closeDialog={closeDialogHierarchy}
+        toggleDialog={toggleDialogHierarchy}
+        idTask={idTask}
+        proyekName={proyekName}
+      />
+    ),
+    [openDialogHierarchy]
+  );
+
+  return (
+    <div>
+      <NotificationContainer />
+      <SweetAlert
+        show={alertDelete}
+        warning
+        showCancel
+        confirmBtnText="Delete"
+        confirmBtnBsStyle="danger"
+        title={`Are you sure?`}
+        onConfirm={onConfirmDelete}
+        onCancel={() => cancelDelete()}
+        focusCancelBtn
+      >
+        Delete this data
+      </SweetAlert>
+      {ViewProyek}
+      {RenderDialogForm}
+      {RenderDialogFormProyek}
+      {RenderDialogFormMaterial}
+      {RenderDialogTableTools}
+      {RenderDialogDoc}
+      {renderDialogGantt}
+      {renderDialogHierarchy}
+      {RenderDialogAsignHr}
+      {RenderDialogAssignK3}
+      <Card>
+        <CardHeader
+          style={{ display: "flex", justifyContent: "space-between" }}
+        >
+          <h4 className="capitalize">Project Information</h4>
+          <Row>
+            <Col>
+              <Input
+                onChange={handleSearch}
+                value={search}
+                type="text"
+                name="search"
+                id="search"
+                placeholder={`Search Project Name`}
+                style={{ width: 200 }}
+              />
+            </Col>
+            <Col>
+              <Tooltip title="Add Project">
+                <Button
+                  style={{ background: "#4caf50", color: "#fff" }}
+                  onClick={() => handleOpenDialogProyek(0)}
+                >
+                  <i className="fa fa-plus"></i>
+                </Button>
+              </Tooltip>
+              <Tooltip title="Export Excel">
+                <Popover
+                  // content={<a onClick={hide}>Close</a>}
+                  title="Export"
+                  trigger="click"
+                  placement="leftBottom"
+                  content={
+                    <>
+                      <Button
+                        icon={<FileExcelOutlined />}
+                        type="link"
+                        block
+                        onClick={() => handleExportExcel()}
+                      >
+                        Export to Excel
+                      </Button>
+                      <br />
+                      <Button
+                        icon={<FilePdfOutlined />}
+                        type="link"
+                        block
+                        onClick={() => handleExportPdf()}
+                      >
+                        Export to PDF
+                      </Button>
+                    </>
+                  }
+                  // visible={visible}
+                  // onVisibleChange={handleVisibleChange}
+                >
+                  <Button
+                    style={{ marginLeft: "5px" }}
+                    // onClick={() => handleExportExcel()}
+                  >
+                    <i className="fa fa-print"></i>
+                  </Button>
+                </Popover>
+              </Tooltip>
+            </Col>
+          </Row>
+        </CardHeader>
+        <CardBody>
+          {RenderTable}
+          <Pagination
+            style={{ marginTop: "25px" }}
+            showSizeChanger
+            onShowSizeChange={onShowSizeChange}
+            onChange={onPagination}
+            pageSizeOptions={["10", "25", "50"]}
+            total={totalPage}
+            pageSize={rowsPerPage}
+            current={currentPage}
+          />
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default CreatedProyek;