From 59a34369e5f150e14f414bcf899d66e13edea017 Mon Sep 17 00:00:00 2001
From: wahyu <ssjrama@gmail.com>
Date: Wed, 13 Sep 2023 11:24:43 +0700
Subject: [PATCH] endfile fix

---
 src/views/SimproV2/CreatedProyek/index.js | 3056 +++++++++++----------
 1 file changed, 1530 insertions(+), 1526 deletions(-)

diff --git a/src/views/SimproV2/CreatedProyek/index.js b/src/views/SimproV2/CreatedProyek/index.js
index a15ddea..21bfe1d 100644
--- a/src/views/SimproV2/CreatedProyek/index.js
+++ b/src/views/SimproV2/CreatedProyek/index.js
@@ -1,1526 +1,1530 @@
-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,
-	Spin,
-} 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 [loading, setLoading] = useState(true);
-
-	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 handleDashboard = async (text) => {
-		const URL = `${BASE_OSPRO}/api/project/detail/${text.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-customer/${text.id}/${result.data.gantt.last_gantt_id}/1`);
-		}
-	}
-
-	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",
-				},
-			],
-			select: ["id", "nama", "rencana_biaya", "type_proyek_id", "currency_symbol", "mulai_proyek", "akhir_proyek"],
-			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);
-			setLoading(false);
-		} else {
-			setLoading(false);
-			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 = {
-			select: ["id", "name_version"],
-			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) => (
-					role_id == "44" 
-					?
-					<>
-						<Tooltip title="Dashboard Project">
-							<Button size="small" onClick={() => handleDashboard(text)} type="link" style={{ color: "green" }}>
-								<i className="fa fa-line-chart"></i>
-							</Button>
-						</Tooltip>
-					</>
-					:
-					<>
-						<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>
-							{
-								role_id == "44" // role kustomer
-									?
-									null
-									:
-									<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>
-					<Spin tip="Loading..." spinning={loading}>
-						{RenderTable}
-					</Spin>
-					
-					<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,
+	Spin,
+} 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 [loading, setLoading] = useState(true);
+
+	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 handleDashboard = async (text) => {
+		const URL = `${BASE_OSPRO}/api/project/detail/${text.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-customer/${text.id}/${result.data.gantt.last_gantt_id}/1`);
+		}
+	}
+
+	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",
+				},
+			],
+			select: ["id", "nama", "rencana_biaya", "type_proyek_id", "currency_symbol", "mulai_proyek", "akhir_proyek"],
+			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);
+			setLoading(false);
+		} else {
+			setLoading(false);
+			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 = {
+			select: ["id", "name_version"],
+			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`}> */}
+				{
+				text.type_proyek_id != 9 ?
+				<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>
+					: null
+				}
+          <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) => (
+					role_id == "44"
+					?
+					<>
+						<Tooltip title="Dashboard Project">
+							<Button size="small" onClick={() => handleDashboard(text)} type="link" style={{ color: "green" }}>
+								<i className="fa fa-line-chart"></i>
+							</Button>
+						</Tooltip>
+					</>
+					:
+					<>
+						<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>
+							{
+								role_id == "44" // role kustomer
+									?
+									null
+									:
+									<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>
+					<Spin tip="Loading..." spinning={loading}>
+						{RenderTable}
+					</Spin>
+
+					<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;