diff --git a/src/views/SimproV2/CreatedProyek/AsignCustProject.js b/src/views/SimproV2/CreatedProyek/AsignCustProject.js
new file mode 100644
index 0000000..d845546
--- /dev/null
+++ b/src/views/SimproV2/CreatedProyek/AsignCustProject.js
@@ -0,0 +1,294 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form } from 'reactstrap';
+import { Table, Tooltip } from 'antd';
+import 'antd/dist/antd.css';
+import moment from 'moment';
+import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst';
+import axios from "../../../const/interceptorApi"
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import FormAsignCust from './DialogAssignCust';
+import { formatThousand } from '../../../const/CustomFunc';
+
+const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsResource, proyekName }) => {
+	const token = localStorage.getItem("token")
+	const HEADER = {
+		headers: {
+			"Content-Type": "application/json",
+			"Authorization": `Bearer ${token}`
+		}
+	}
+	const [dataUserToProject, setdataUserToProject] = useState([])
+	const [alertDelete, setAlertDelete] = useState(false)
+	const [idDelete, setIdDelete] = useState(0)
+	const [openDialogFormTools, setOpenDialogFormTools] = useState(false)
+	const [dataEdit, setDataEdit] = useState(null)
+	const [listUser, setListUser] = useState([])
+	const [listRole, setListRole] = useState([])
+
+	useEffect(() => {
+		if (idTask > 0) {
+			getDataAssignHr();
+		}
+	}, [openDialog]);
+
+	useEffect(() => {
+		if (openDialog) {
+			getDataProjectRole();
+			getDataUser();
+		}
+	}, [dataUserToProject])
+
+	const getDataAssignHr = async () => {
+		const payload = {
+			"paging": {
+				"start": 0,
+				"length": -1
+			},
+			"columns": [
+				{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" },
+				{ "name": "proyek_id", "logic_operator": "=", "value": idTask }
+			],
+			"joins": [
+				{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] },
+				{ "name": "m_role_proyek", "column_join": "project_role", "column_results": ["name"] },
+			],
+			"orders": {
+				"columns": [
+					"id"
+				],
+				"ascending": false
+			}
+		}
+		const URL = ASSIGN_HR_PROJECT_SEARCH
+		const result = await axios
+			.post(URL, 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.is_customer === true);
+			setdataUserToProject(filteredData);
+		} else {
+			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+		}
+	}
+
+	const getDataUser = async () => {
+		const HEADER_ADW = {
+			headers: {
+				"Authorization": `${TOKEN_ADW}`
+			}
+		}
+		const result = await axios
+			.get(USER_LIST, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+		if (result && result.data && result.data.data.length != 0) {
+			let dataRes = result.data.data
+			setListUser(dataRes)
+		}
+	}
+
+	const getDataProjectRole = async () => {
+		const payload = {
+			"paging": {
+				"start": 0,
+				"length": -1
+			},
+			"columns": [
+				{ "name": "created_by", "logic_operator": "ilike", "value": "" },
+			],
+			"joins": [],
+			"orders": {
+				"columns": [
+					"id"
+				],
+				"ascending": false
+			}
+		}
+
+		const result = await axios
+			.post(PROJECT_ROLE_SEARCH, payload, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code == 200) {
+			let dataRes = result.data.data || []
+			setListRole(dataRes);
+		} else {
+		}
+	}
+
+	const handleDelete = (id) => {
+		setIdDelete(id)
+		setAlertDelete(true)
+	}
+
+	const cancelDelete = () => {
+		setAlertDelete(false)
+		setIdDelete(0)
+	}
+
+	const onConfirmDelete = async () => {
+		let urlDel = ASSIGN_HR_PROJECT_DELETE(idDelete)
+		const result = await axios.delete(urlDel, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code === 200) {
+			getDataAssignHr()
+			setIdDelete(0)
+			setAlertDelete(false)
+			NotificationManager.success(`Data assign human resource berhasil dihapus`, 'Success!!');
+		} else {
+			setIdDelete(0)
+			setAlertDelete(false)
+			NotificationManager.error(`Data assign human resource gagal dihapus`, 'Failed!!');
+		}
+	}
+
+
+	const handleOpenDialogFormTools = () => {
+		setOpenDialogFormTools(true)
+	}
+
+	const handleCancel = () => {
+		closeDialog('cancel', 'none')
+	}
+
+
+	const RenderTable = useMemo(() => {
+		const columns = [
+			{
+				title: 'Action',
+				dataIndex: '',
+				key: 'x',
+				className: "nowrap",
+				render: (text, record) => <><Tooltip title="Delete Request Resource">
+					<Button  size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+				</Tooltip>{" "}</>,
+			},
+			{ title: 'Name Human Resource', dataIndex: 'join_first_name', key: 'join_first_name', className: "nowrap" },
+			{ title: 'Role Human Resource', dataIndex: 'join_second_name', key: 'join_second_name', className: "nowrap" },
+			{ title: 'Percentage Available User', dataIndex: 'max_used', key: 'max_used', className: "nowrap", render: (text, record) => record.max_used ? formatThousand(record.max_used) : '-' },
+			{ title: 'Standard Rate', dataIndex: 'standart_rate', key: 'standart_rate', className: "nowrap", render: (text, record) => record.standart_rate ? formatThousand(record.standart_rate) : '-' },
+			{ title: 'UOM Standard Rate', dataIndex: 'uom_standart_rate', key: 'uom_standart_rate', className: "nowrap" },
+			{ title: 'Overtime Rate', dataIndex: 'overtime_rate', key: 'overtime_rate', className: "nowrap", render: (text, record) => record.overtime_rate ? formatThousand(record.overtime_rate) : '-' },
+			{ title: 'UOM Overtime Rate', dataIndex: 'uom_overtime_rate', key: 'uom_overtime_rate', className: "nowrap" },
+
+		];
+
+		return (
+			<Table
+				size="small"
+				columns={columns}
+				dataSource={dataUserToProject}
+				pagination={{ position: ["bottomLeft"] }}
+			/>
+		)
+	}, [dataUserToProject])
+
+	const renderForm = () => {
+		return (
+			<div style={{"overflowX":"scroll"}}>
+				{RenderTable}
+			</div>
+		)
+	}
+
+	const handleCloseDialogFormTools = (type, data) => {
+		if(type=="add"){
+			addDataAssignHr(data);
+		}else if(type=="edit"){
+			editDataAssignHr(data);
+		}else{
+			setDataEdit(null)
+			setOpenDialogFormTools(false)
+		}
+	}
+
+	const addDataAssignHr = async (payload) => {
+		const result = await axios
+			.post(ASSIGN_HR_PROJECT_ADD, payload, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code == 200) {
+			getDataAssignHr();
+			NotificationManager.success('assign human resource berhasil!!', 'Success');
+			setDataEdit(null)
+			setOpenDialogFormTools(false)
+		} else {
+			NotificationManager.error('assign human resource gagal!!', 'Failed');
+		}
+	}
+
+	const editDataAssignHr  = async (payload) => {
+		let url = ASSIGN_HR_PROJECT_EDIT(payload.id)
+		const result = await axios
+			.put(url, payload, HEADER)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code == 200) {
+			getDataAssignHr();
+			NotificationManager.success('assign human resource berhasil diedit!!', 'Success');
+			setDataEdit(null)
+			setOpenDialogFormTools(false)
+		} else {
+			NotificationManager.error('assign human resource gagal diedit!!', 'Failed');
+		}
+	}
+
+	const toogleDialogFormTools = () => {
+		if (openDialogFormTools) {
+			setDataEdit(null)
+		}
+		setOpenDialogFormTools(!openDialogFormTools)
+	}
+
+
+	return (
+		<>
+			<NotificationContainer />
+			<SweetAlert
+				show={alertDelete}
+				warning
+				showCancel
+				confirmBtnText="Delete"
+				confirmBtnBsStyle="danger"
+				title={`Are you sure?`}
+				onConfirm={onConfirmDelete}
+				onCancel={() => cancelDelete()}
+				focusCancelBtn
+			>
+				Delete this data
+			</SweetAlert>
+			<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
+				<ModalHeader className="capitalize withBtn" toggle={closeDialog}>
+
+					<div>Assign Customer - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+				</ModalHeader>
+				<ModalBody>
+					{renderForm()}
+				</ModalBody>
+			</Modal>
+			<FormAsignCust
+				openDialog={openDialogFormTools}
+				closeDialog={handleCloseDialogFormTools}
+				toggleDialog={toogleDialogFormTools}
+				idTask={idTask}
+				dataEdit={dataEdit}
+				dataHr={listUser}
+				dataRole={listRole}
+				dataCurrentHr={dataUserToProject}
+			/>
+		</>
+	)
+
+}
+
+export default AssignHrProject;
diff --git a/src/views/SimproV2/CreatedProyek/DialogAssignCust.js b/src/views/SimproV2/CreatedProyek/DialogAssignCust.js
new file mode 100644
index 0000000..1bc885b
--- /dev/null
+++ b/src/views/SimproV2/CreatedProyek/DialogAssignCust.js
@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form } from 'reactstrap';
+import axios from "../../../const/interceptorApi";
+import { USER_VERSION_GANTT_ADDS, USER_VERSION_GANTT_SEARCH, USER_LIST} from '../../../const/ApiConst';
+import { Transfer } from 'antd';
+import 'antd/dist/antd.css';
+
+const role_id = localStorage.getItem('role_id');
+const DialogAssignCust = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
+  const token = localStorage.getItem("token")
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  }
+  const [id, setId] = useState(0)
+  const [targetKeys, setTargetKeys] = useState([])
+  const [assignCustomer, setAssignCustomer] = useState([])
+
+
+  const handleCLearData = () => {
+    setId(0)
+    setTargetKeys([])
+  }
+
+  useEffect(() => {
+    if(!openDialog){
+        handleCLearData()
+    } else {
+        getDataAssignCustomer();
+    }
+  }, [openDialog])
+
+  useEffect(() => {
+    if(idGantt && idGantt > 0){
+        getUserGantt()
+    }
+  }, [idGantt])
+
+  const getDataAssignCustomer = async () => {
+    const result = await axios
+      .get(USER_LIST, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      let dataRes = result.data.data;
+      const filteredData = dataRes.filter(item => item.role_id === 44);
+      setTransferUser(filteredData);
+    } else {
+
+    }
+  }
+
+  const setTransferUser = (data) => {
+    const finalData = []
+    data.map((val, index) => {
+      let data = {
+        key: val.id,
+        title: val.name
+      }
+      finalData.push(data)
+    });
+    setAssignCustomer(finalData)
+  }
+
+  const getUserGantt = async () => {
+    const payload = {
+        "columns": [
+            { "name": "version_gantt_id", "logic_operator": "=", "value": idGantt, "operator": "AND" }
+        ]
+    }
+    const result = await axios
+      .post(USER_VERSION_GANTT_SEARCH, payload, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if(result && result.status==200){
+      console.log("cek resource get user gantt",result.data.data)
+      setUserGantt(result.data.data);
+    }else{
+
+    }
+  }
+
+  const setUserGantt = (data) => {
+    let newTargetKeys = []
+    data.map((val,index)=> {
+        newTargetKeys.push(val.user_id)
+    });
+    setTargetKeys(newTargetKeys)
+  }
+
+  const handleSave = async () => {
+    await saveVersionGantt()
+    handleCLearData()
+  }
+
+  const saveVersionGantt= async () => {
+
+    const formData = {
+        user_id:targetKeys,
+        version_gantt_id:idGantt
+    }
+
+    const result = await axios
+      .post(USER_VERSION_GANTT_ADDS, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+
+    if(result && result.status==200){
+      closeDialog('success')
+    }else{
+      closeDialog('failed')
+    }
+  }
+
+  const handleCancel = () => {
+    closeDialog('cancel')
+    handleCLearData()
+  }
+
+  const handleChange = targetKeys => {
+    setTargetKeys(targetKeys)
+  };
+
+  const renderForm = () => {
+    return (
+      <div style={{
+        alignContent: "center",
+        justifyContent: "center !imporant",
+        paddingLeft: 20,
+        paddingRight: 20,
+        overflow: "auto"
+      }}>
+        <Transfer
+            showSearch
+            titles={['Available Customer', 'Granted to']}
+            dataSource={assignCustomer}
+            targetKeys={targetKeys}
+            onChange={handleChange}
+            render={item => item.title}
+            listStyle={{
+              width: 250,
+              height: 300,
+            }}
+        />
+      </div>
+    )
+  }
+
+
+  return (
+    <>
+      <Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize" toggle={closeDialog}>Add Customer</ModalHeader>
+        <ModalBody>
+          {renderForm()}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+
+}
+
+export default DialogAssignCust;