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

src/const/ApiConst.js

@@ -316,6 +316,7 @@ export const DOCUMENT_DOWNLOAD = (id) => {
 
 export const ROLE_ADD = `${BASE_SIMPRO_LUMEN}/role/add`;
 export const ROLE_SEARCH = `${BASE_SIMPRO_LUMEN}/role/search`;
+export const ROLE_LIST = `${BASE_SIMPRO_LUMEN}/role/list`;
 export const ROLE_EDIT = (id) => {
   return `${BASE_SIMPRO_LUMEN}/role/update/${id}`;
 };
@@ -340,6 +341,7 @@ export const MENU_MANAGEMENT = (id) => {
   return `${BASE_SIMPRO_LUMEN}/menu/management/${id}`;
 };
 export const MENU_SEARCH = `${BASE_SIMPRO_LUMEN}/menu/search`;
+export const MENU_LIST = `${BASE_SIMPRO_LUMEN}/menu/list`;
 export const MENU_EDIT = (id) => {
   return `${BASE_SIMPRO_LUMEN}/menu/update/${id}`;
 };

src/views/Dashboard/DashboardBOD.js

@@ -613,8 +613,8 @@ const DashboardBOD = () => {
 											label: "",
 											// data: [7, 2, 4, 3],
 											data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [],
-											borderColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
-											backgroundColor: ["#023E8A", "#C851B7", "#FD7034", "#3A0CA3", "#A36A16"],
+											borderColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [],
+											backgroundColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [],
 											borderWidth: 2,
 											borderSkipped: false
 										},

src/views/Dashboard/DashboardProject.js

@@ -345,7 +345,11 @@ const DashboardProject = () => {
         result.data.data.kode_sortname &&
         result.data.data.kode_sortname !== ""
       ) {
-        getIntegrationInvoice(result.data.data.kode_sortname);
+        if (SCURVE) {
+          getIntegrationInvoice(result.data.data.kode_sortname, result.data.data.id);
+        } else {
+          getIntegrationInvoice(result.data.data.kode_sortname, result.data.data.id, GANTT_ID);
+        }
       }
     }
   };
@@ -490,12 +494,16 @@ const DashboardProject = () => {
     }
   };
 
-  const getIntegrationInvoice = async (kode_sortname) => {
+  const getIntegrationInvoice = async (kode_sortname, id, gantt_id = null) => {
     setIsReadyIntegrationInvoice(false);
     const URL = `${BASE_OSPRO}/api/project/get-integration-invoice`;
-    const payload = {
+    let payload = {
       search: kode_sortname,
+      id: id
     };
+    if (gantt_id) {
+      payload.gantt_id = gantt_id;
+    }
     const result = await axios
       .post(URL, payload, HEADER)
       .then((res) => res)

src/views/Master/MasterBroadcast/DialogDetail.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { Button, Table, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import Select from 'react-select';
 import axios from 'axios';
-import { BASE_SIMPRO_LUMEN, USER_LIST } from '../../../const/ApiConst';
+import { BASE_SIMPRO_LUMEN, USER_LIST, ROLE_LIST } from '../../../const/ApiConst';
 import { Transfer } from 'antd';
 import { withTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
@@ -43,6 +43,7 @@ class DialogDetail extends Component {
       }, () => {
         this.getDataDetail();
         this.getDataUsers();
+        this.getDataRoles();
         this.setState({ isParentClick: false });
       });
     }
@@ -61,6 +62,18 @@ class DialogDetail extends Component {
     }
   }
 
+  getDataRoles = async () => {
+    const result = await axios
+      .get(ROLE_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data Roles', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataRoles: result.data.data });
+    }
+  }
+
   getDataDetail = async () => {
     countError++;
     let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
@@ -85,6 +98,7 @@ class DialogDetail extends Component {
       if (countError < 6) {
         this.getDataDetail();
         this.getDataUsers();
+        this.getDataRoles();
       }
     }
   }
@@ -97,7 +111,10 @@ class DialogDetail extends Component {
     this.props.closeDialog()
   }
   render() {
+    const dataListDetail = this.state.dataListDetail || [];
     const dataUser = this.state.dataUser || [];
+    const dataRoles = this.state.dataRoles || [];
+
     return (
       <Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
@@ -114,14 +131,42 @@ class DialogDetail extends Component {
               </tr>
             </thead>
             <tbody>
-              {this.state.dataListDetail.map((val, index) => {
-                const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+              {dataListDetail.map((val, index) => {
+                const matchedUserNames = [];
+                const matchedUserNamesNotKoma = [];
+                const matchRolesName = [];
+
+                if (typeof val.send_to_id === 'string' && val.send_to_id.includes(',')) {
+                  const sendToIds = val.send_to_id.split(',').map(id => parseInt(id, 10));
+                  matchedUserNames[index] = sendToIds.map(id => {
+                    const matchedUser = dataUser.find(item => item.id === id);
+                    return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+                  });
+                }
+
+                if (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1) {
+                  const id = parseInt(val.send_to_id, 10);
+                  const matchedUser = dataUser.find(item => item.id === id);
+                  matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+                }
+
+                if (val.send_to_type === 'roles') {
+                  const id = parseInt(val.send_to_id, 10);
+                  const matchedRole = dataRoles.find(item => item.id === id);
+                  matchRolesName[index] = matchedRole ? <div><b>Role </b>{matchedRole.name}</div> : null;
+                }
+
                 return (
                   <tr key={index}>
                     <td>{val.status_send === "" ? "-" : val.status_send}</td>
-                    <td>{val.created_at === "" ? "-" : moment(val.created_date).format("DD-MM-YYYY HH:mm:ss")}</td>
+                    <td>{val.created_at === "" ? "-" : moment(val.created_at).format("DD-MM-YYYY HH:mm:ss")}</td>
                     <td>{val.description === "" ? "-" : val.description}</td>
-                    <td>{ matchedUser ? matchedUser.name : "-" }</td>
+                    <td>
+                      {val.send_to_type === "all" ? "All User" : ""}
+                      {val.send_to_type === "roles" ? matchRolesName[index] : ""}
+                      {typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1 ? matchedUserNamesNotKoma[index] : ""}
+                      {typeof val.send_to_id === 'string' && val.send_to_id.includes(',') ? matchedUserNames[index] : ""}
+                    </td>
                     <td>{val.title_notif === "" ? "-" : val.title_notif}</td>
                     <td>{val.message_notif === "" ? "-" : val.message_notif}</td>
                   </tr>

src/views/Master/MasterBroadcast/index.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from 'axios';
 import moment from 'moment';
-import { USER_LIST, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
+import { USER_LIST, BASE_SIMPRO_LUMEN, ROLE_LIST } from '../../../const/ApiConst';
 import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, DropdownToggle, Input, InputGroup, InputGroupButtonDropdown, Table, Row, Col } from 'reactstrap';
 import { DatePicker, Pagination } from 'antd';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
@@ -92,9 +92,31 @@ class index extends Component {
     console.log('Get Data User', result)
 
     if (result && result.data && result.status == 200) {
-      this.setState({ dataUser: result.data.data }, () => {
+      const dataRes = result.data.data;
+      const finalData = [];
+      if (dataRes.length > 0) {
+        dataRes.map((val, index) => {
+          let data = {
+            id: val.id,
+            name: val.name,
+          };
+          finalData.push(data);
         });
       }
+      this.setState({ dataUser: finalData });
+    }
+  }
+
+  getDataRoles = async () => {
+    const result = await axios
+      .get(ROLE_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data Roles', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataRoles: result.data.data });
+    }
   }
 
   getDataBroadcast = async () => {
@@ -147,6 +169,7 @@ class index extends Component {
       if (result.data.code === 200) {
         this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
         this.getDataUsers()
+        this.getDataRoles()
       } else {
         NotificationManager.error('Failed retreiving data!!', 'Failed');
       }
@@ -326,18 +349,47 @@ class index extends Component {
   handleExportExcel = async () => {
     const dataExcel = this.state.dataTable || [];
     const dataUser = this.state.dataUser || [];
+    const dataRoles = this.state.dataRoles || [];
+
     const dataExport = [];
     dataExcel.map((val) => {
-      const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+      const matchedUserNames = [];
+      const matchedUserNamesNotKoma = [];
+      const matchRolesName = [];
+
+      if (typeof val.send_to_id === 'string' && val.send_to_id.includes(',')) {
+        const sendToIds = val.send_to_id.split(',').map(id => parseInt(id, 10));
+        matchedUserNames[index] = sendToIds.map(id => {
+          const matchedUser = dataUser.find(item => item.id === id);
+          return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+        });
+      }
+
+      if (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1) {
+        const id = parseInt(val.send_to_id, 10);
+        const matchedUser = dataUser.find(item => item.id === id);
+        matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+      }
+
+      if (val.send_to_type === 'roles') {
+        const id = parseInt(val.send_to_id, 10);
+        const matchedRole = dataRoles.find(item => item.id === id);
+        matchRolesName[index] = matchedRole ? <div>{matchedRole.name}</div> : null;
+      }
+
       let row = {
         "Tanggal Broadcast": moment(val.created_at).format("YYYY-MM-DD HH:mm:ss"),
         "Judul": val.title_notif,
-        "Penerima": matchedUser ? matchedUser.name : "-",
+        "Penerima": (val.send_to_type === "all" ? "All User" : "") +
+          (val.send_to_type === "roles" ? (matchRolesName[index] ? 'Role: ' + matchRolesName[index].props.children : "") : "") +
+          (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1 ? (matchedUserNamesNotKoma[index] ? matchedUserNamesNotKoma[index].props.children : "") : "") +
+          (typeof val.send_to_id === 'string' && val.send_to_id.includes(',') ? (matchedUserNames[index] ? matchedUserNames[index].map(item => item.props.children).join("") : "") : ""),
         "Pesan": val.message_notif,
         "Deskripsi": val.description,
         "Status": val.status_send
-      }
+      };
       dataExport.push(row);
+
     });
     const fileName = "Broadcast.xlsx";
     const ws = XLSX.utils.json_to_sheet(dataExport);
@@ -399,11 +451,34 @@ class index extends Component {
     ]
     const dataTable2 = this.state.dataTable || [];
     const dataUser = this.state.dataUser || [];
-
+    const dataRoles = this.state.dataRoles || [];
     return (
       <tbody>
-        {dataTable2.length !== 0 ? dataTable2.map((n) => {
-            const matchedUser = dataUser.find(item => item.id == n.send_to_id);
+        {dataTable2.length !== 0 ? dataTable2.map((n, index) => {
+          const matchedUserNames = [];
+          const matchedUserNamesNotKoma = [];
+          const matchRolesName = [];
+
+          if (typeof n.send_to_id === 'string' && n.send_to_id.includes(',')) {
+            const sendToIds = n.send_to_id.split(',').map(id => parseInt(id, 10));
+            matchedUserNames[index] = sendToIds.map(id => {
+              const matchedUser = dataUser.find(item => item.id === id);
+              return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+            });
+          }
+
+          if (typeof n.send_to_id === 'string' && n.send_to_id.indexOf(',') === -1) {
+            const id = parseInt(n.send_to_id, 10);
+            const matchedUser = dataUser.find(item => item.id === id);
+            matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+          }
+
+          if (n.send_to_type === 'roles') {
+            const id = parseInt(n.send_to_id, 10);
+            const matchedRole = dataRoles.find(item => item.id === id);
+            matchRolesName[index] = matchedRole ? <div><b>Role </b>{matchedRole.name}</div> : null;
+          }
+
           return (
             <tr key={n.id}>
               <td width={93}>
@@ -418,13 +493,19 @@ class index extends Component {
                       Detail
                     </Tooltip>
                   </Col>
-                </Row>                </td>
+                </Row>
+              </td>
               <td>{n.title_notif}</td>
               <td>{n.message_notif !== "" ? n.message_notif : "-"}</td>
               <td>{n.description !== "" ? n.description : "-"}</td>
-                <td>{ matchedUser ? matchedUser.name : "-" }</td>
+              <td>
+                {n.send_to_type === "all" ? "All User" : ""}
+                {n.send_to_type === "roles" ? matchRolesName[index] : ""}
+                {typeof n.send_to_id === 'string' && n.send_to_id.indexOf(',') === -1 ? matchedUserNamesNotKoma[index] : ""}
+                {typeof n.send_to_id === 'string' && n.send_to_id.includes(',') ? matchedUserNames[index] : ""}
+              </td>
               <td>{n.status_send !== "" ? n.status_send : "-"}</td>
-                <td>{n.created_at !== "" ? moment.utc(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
+              <td>{n.created_at !== "" ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
             </tr>
           );
         }) : <tr>

src/views/Master/MasterMenu/index.js

@@ -5,7 +5,7 @@ import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from 'axios';
 import { Button } from 'reactstrap';
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
-import { MENU_ADD, MENU_SEARCH, MENU_EDIT, MENU_DELETE } from '../../../const/ApiConst.js';
+import { MENU_ADD, MENU_SEARCH, MENU_EDIT, MENU_DELETE, MENU_LIST } from '../../../const/ApiConst.js';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { Pagination, Tooltip, Table } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -67,22 +67,20 @@ const Index = ({ params }) => {
   };
 
   const getDataAllMenu = async () => {
-    const payload = {
-      "paging": { "start": 0, "length": -1 },
-      "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
-      ],
-      "joins": [],
-      "orders": { "columns": ["id"], "ascending": false }
-    }
     const result = await axios
-      .post(MENU_SEARCH, payload, config)
+			.get(MENU_LIST, config)
 			.then(res => res)
 			.catch((error) => error.response);
 
     if (result && result.data && result.data.code == 200) {
-      setAllDataMenu(result.data.data);
+      let arr = []
+      let dataRes = result.data.data;
+      for (const v in dataRes) {
+				arr.push(dataRes[v])
+			}
+      setAllDataMenu(arr);
     }else {
+			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
   }
 
@@ -123,6 +121,7 @@ const Index = ({ params }) => {
 
   const handleOpenDialog = async (type) => {
     await setTypeDialog(type)
+    getDataAllMenu();
     setOpenDialog(true)
   }
 

src/views/SimproV2/CreatedProyek/AsignCustProject.js

@@ -32,11 +32,6 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 		}
 	}, [openDialog]);
 
-	useEffect(() => {
-		if (openDialog) {
-		}
-	}, [dataUserToProject])
-
 	const getDataAssignHr = async () => {
 		const payload = {
 			"paging": {
@@ -45,7 +40,8 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 			},
 			"columns": [
 				{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" },
-				{ "name": "proyek_id", "logic_operator": "=", "value": idTask }
+				{ "name": "proyek_id", "logic_operator": "=", "value": idTask },
+				{ "name": "is_customer", "logic_operator": "=", "value": "true" }
 			],
 			"joins": [
 				{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] },
@@ -144,7 +140,9 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 	}
 
   const handleCloseDialogFormTools = (type, data) => {
-    if (type === "add") getDataAssignHr();
+    if (type === "add") {
+      getDataAssignHr()
+    }
     if (type === "success") {
       NotificationManager.success(
         `Assign Customer Project berhasil disimpan!`,

src/views/SimproV2/CreatedProyek/AsignHrProject.js

@@ -48,7 +48,8 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 			},
 			"columns": [
 				{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" },
-				{ "name": "proyek_id", "logic_operator": "=", "value": idTask }
+        { "name": "proyek_id", "logic_operator": "=", "value": idTask },
+        { "name": "is_customer", "logic_operator": "=", "value": "false" }
 			],
 			"joins": [
 				{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] },

src/views/SimproV2/CreatedProyek/DialogAssignCust.js

@@ -3,7 +3,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import {
-  USER_LIST,
+  USER_SEARCH,
   ASSIGN_HR_PROJECT_SEARCH,
   ASSIGN_HR_PROJECT_ADD_MULTIPLE
 } from '../../../const/ApiConst';
@@ -40,8 +40,29 @@ const DialogAssignCust = ({ openDialog, closeDialog, toggleDialog, idTask }) =>
 
 
   const getDataAssignCustomer = async () => {
+    const payload = {
+      "select": [
+        "id",
+        "name",
+        "role_id"
+      ],
+			"paging": {
+				"start": 0,
+				"length": -1
+			},
+			"columns": [
+				{ "name": "role_id", "logic_operator": "=", "value": 44 }
+			],
+			"orders": {
+				"columns": [
+					"id"
+				],
+				"ascending": false
+			}
+    }
+    const URL = USER_SEARCH;
     const result = await axios
-      .get(USER_LIST, HEADER)
+      .post(URL, payload, HEADER)
       .then(res => res)
       .catch((error) => error.response);
 
@@ -99,6 +120,12 @@ const DialogAssignCust = ({ openDialog, closeDialog, toggleDialog, idTask }) =>
 
   const getCustProject = async () => {
     const payload = {
+        "select": [
+        "id",
+        "user_id",
+        "proyek_id",
+        "is_customer"
+        ],
         "columns": [
         { "name": "proyek_id", "logic_operator": "=", "value": idTask },
         {"name": "is_customer", "logic_operator": "=", "value": "true"}

src/views/SimproV2/CreatedProyek/DialogFormProyek.js

@@ -333,15 +333,32 @@ const DialogFormProyek = ({
 	};
 
   const onChangePm = (val) => {
-		let data = [...dataPM];
-		var item = data.find((item) => item.id === val);
-		participants.push({
-			id: lastIdxParticipants + 1,
-			title: "PM",
+    const item = dataPM.find((item) => item.id === val);
+    const existingParticipant = participants.find((participant) => participant.tittle === "PM");
+    if (existingParticipant) {
+      setParticipants((prevParticipants) => {
+        return prevParticipants.map((participant) => {
+          if (participant.tittle === "PM") {
+            return {
+              ...participant,
               name: item.name,
+            };
+          }
+          return participant;
         });
-		setParticipants(participants);
+      });
+    } else {
+      setParticipants((prevParticipants) => [
+        ...prevParticipants,
+        {
+          id: item.id,
+          tittle: "PM",
+          name: item.name,
+        },
+      ]);
       setLastIdxParticipants(lastIdxParticipants + 1);
+    }
+
     setPic(val);
   };
 
@@ -399,7 +416,7 @@ const DialogFormProyek = ({
 	const addParticipant = () => {
 		participants.push({
 			id: lastIdxParticipants + 1,
-			title: "",
+			tittle: "",
 			name: "",
 		});
 		setParticipants(participants);
@@ -439,6 +456,23 @@ const DialogFormProyek = ({
 
 	const handleInputChangeParticipants = (e, index) => {
     const { name, value } = e.target;
+    const existingParticipant = participants.find((participant) => participant.tittle === "PM");
+    if(value.toLowerCase() === "pm" && name === "tittle" && existingParticipant)
+    {
+      alert('PM is already exist!');
+        setParticipants((prevParticipants) =>
+        prevParticipants.map((participant, i) => {
+          if (i === index) {
+            return {
+              ...participant,
+              tittle: "",
+            };
+          }
+          return participant;
+        })
+      );
+      return false;
+    }
 		const newParticipants = [...participants];
 		newParticipants[index][name] = value;
 		setParticipants(newParticipants);
@@ -566,7 +600,7 @@ const DialogFormProyek = ({
 	const addApproval = () => {
 		approval.push({
 			id: lastIdxApproval + 1,
-			title: "",
+			tittle: "",
 			name: "",
 			date: moment(),
 		});
@@ -1321,8 +1355,8 @@ const DialogFormProyek = ({
 						<Col md={4}>
 							<Input
 								type="text"
-								value={item.tittle ? item.tittle : "-"}
-								name="title"
+								value={item.tittle}
+								name="tittle"
 								onChange={(e) => handleInputChangeParticipants(e, index)}
 							/>
 						</Col>
@@ -1421,7 +1455,7 @@ const DialogFormProyek = ({
 						<Col md={3}>
 							<Input
 								type="text"
-								value={item.tittle ? item.tittle : item.title}
+								value={item.tittle ? item.tittle : item.tittle}
 								name="title"
 								onChange={(e) => handleInputChangeApproval(e, index)}
 							/>

src/views/SimproV2/CreatedProyek/DialogGantt.js

@@ -74,14 +74,16 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
           { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
-        ]
+        ],
+        "orders": { "columns": ["name_version"], "ascending": true }
       }
     } else {
       payload = {
         "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
         "columns": [
           { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
-        ]
+        ],
+        "orders": { "columns": ["name_version"], "ascending": true },
       }
     }
     const result = await axios

src/views/SimproV2/CreatedProyek/DialogHierarchy.js

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { async } from '@dabeng/react-orgchart';
 import { Link } from 'react-router-dom';
 import { use } from 'i18next';
+import _ from 'lodash';
 const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
@@ -154,7 +155,8 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
       .catch((error) => error.response);
 
     if (result && result.status == 200) {
-      setDataHierarchy(result.data.data);
+      const sortedData = _.orderBy(result.data.data, ['name'], ['asc']);
+      setDataHierarchy(sortedData);
     } else {
       NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
     }

src/views/SimproV2/CreatedProyek/FormAsignHr.js

@@ -22,7 +22,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
   const [accrue, setAccrue] = useState("")
   const [baseCalender, setBaseCalender] = useState("")
   const [listHr, setListHr] = useState([])
-  const [isCustomer, setIsCustomer] = useState(false)
 
   const handleClearData = () => {
     setUser(null)
@@ -30,7 +29,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
     setProjectRole(null)
     setGroupR("")
     setMaxUsed("")
-    setIsCustomer(false)
     setStandartRate("")
     setUomStandartRate(null)
     setOverTimeRate("")
@@ -69,7 +67,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
         setProjectRole(dataEdit.project_role)
         setGroupR(dataEdit.group_r)
         setMaxUsed(dataEdit.max_used ? formatNumber(dataEdit.max_used.toString()) : '')
-        setIsCustomer(dataEdit.is_customer)
         setStandartRate(dataEdit.standart_rate ? formatNumber(dataEdit.standart_rate.toString()) : '')
         setUomStandartRate(dataEdit.uom_standart_rate)
         setOverTimeRate(dataEdit.overtime_rate ? formatNumber(dataEdit.overtime_rate.toString()) : '')
@@ -94,7 +91,7 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
         proyek_id: idTask,
         user_id:user,
         project_role:projectRole,
-        is_customer: isCustomer,
+        is_customer: false,
         max_used:maxUsed.replaceAll(".", ""),
         standart_rate:standartRate.replaceAll(".", ""),
         uom_standart_rate:uomStandartRate,
@@ -108,7 +105,7 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
         proyek_id: idTask,
         user_id:user,
         project_role:projectRole,
-        is_customer: isCustomer,
+        is_customer: false,
         max_used:maxUsed.replaceAll(".", ""),
         standart_rate:standartRate.replaceAll(".", ""),
         uom_standart_rate:uomStandartRate,
@@ -162,33 +159,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
                 </FormGroup>
               </Col>
           </Row>
-        <Row>
-          <Col>
-            <FormGroup>
-              <Label>Customer</Label>
-              <div>
-                <Select
-                  value={isCustomer}
-                  defaultValue={false}
-                  style={{
-                    width: 235,
-                  }}
-                  onChange={(val) => setIsCustomer(val)}
-                  options={[
-                    {
-                      value: true,
-                      label: 'Yes',
-                    },
-                    {
-                      value: false,
-                      label: 'No',
-                    }
-                  ]}
-                />
-              </div>
-            </FormGroup>
-          </Col>
-        </Row>
           <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
           <FormGroup style={{flexBasis:"49%"}}>
               <Label>Standart Rate</Label>

src/views/SimproV2/CreatedProyek/ViewProject.js

@@ -7,7 +7,7 @@ import _ from 'underscore'
 import './style.css'
 import { formatThousand, sortBy } from '../../../const/CustomFunc';
 import { BASE_OSPRO, PROYEK_SEARCH} from "../../../const/ApiConst";
-import { Tooltip } from 'antd';
+import { Tooltip, Spin } from 'antd';
 import { useTranslation } from 'react-i18next';
 import axios from "../../../const/interceptorApi"
 import autoTable from "jspdf-autotable";
@@ -47,6 +47,7 @@ const createMarkup = (element) => {
   const [HR, setAssignHR] = useState("")
   const formatDate = "DD-MM-YYYY";
   const reportTemplateRef = useRef(null);
+  const [loading, setLoading] = useState(true);
   const { t } = useTranslation();
   const token = localStorage.getItem("token");
 
@@ -85,6 +86,7 @@ const createMarkup = (element) => {
       setMilestone([])
       setPotentialRisks("")
       setApproval([])
+      setLoading(false)
     }
   }, [openDialog]);
 
@@ -93,7 +95,7 @@ const createMarkup = (element) => {
       setProyekName(projectCharter.nama);
       setDescription(projectCharter.keterangan);
       setKodeShortname(projectCharter.kode_sortname);
-      setLokasiKantor(projectCharter.lokasi_kantor);
+      setLokasiKantor(projectCharter.area_kerja);
       setDurasiProyek(projectCharter.durasi_proyek);
       setMulaiProyek(projectCharter.mulai_proyek);
       setValueProyek(projectCharter.value_proyek);
@@ -171,12 +173,11 @@ const createMarkup = (element) => {
       setAssignHR(assignHR)
     }
   }, [assignHR]);
-
   const handleExportPdf = async () => {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'px',
-      format: [1130, 1000]
+      format: [1106, 1000]
     });
 
     doc.html(reportTemplateRef.current, {
@@ -212,14 +213,18 @@ const createMarkup = (element) => {
         const K3Number = number[index];
           return(
             <tr key={index}>
-            <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ K3Number }</p></td>
-            <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
+            <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ K3Number }</p></td>
+            <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.checklist_k3_name ? val.checklist_k3_name : "-"}</p></td>
           </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -231,10 +236,10 @@ const createMarkup = (element) => {
         const ChecklistNumber = number[index];
           return(
             <tr key={index}>
-              <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={pStyle}>{ ChecklistNumber }</p></td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.item ? val.item : "-"}</p></td>
+              <td style={{...tdStyle, width:50, textAlign:'center' }}><p style={{ ...pStyle, fontWeight:'normal' }}>{ ChecklistNumber }</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.item ?? "-"}</p></td>
               <td style={ tdStyle } className='plr-10'>
-              <p style={pStyle}>
+              <p style={{ ...pStyle, fontWeight:'normal' }}>
                 {val.status_exist === true ? "Tersedia" : "Tidak tersedia"}
               </p>
               </td>
@@ -243,7 +248,12 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -254,17 +264,21 @@ const createMarkup = (element) => {
           return(
             <tr key={index}>
               <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
-                <p style={pStyle}>
+                <p style={{ ...pStyle, fontWeight:'normal' }}>
                   {val.level_issue ? val.level_issue : "-"}
                 </p>
               </td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ? val.description : "-"}</p></td>
             </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -275,18 +289,23 @@ const createMarkup = (element) => {
           return(
             <tr key={index}>
               <td style={{ ...tdStyle, width:50, textAlign:'center' }} className='plr-10'>
-                <p style={pStyle}>
-                  {val.level_risk ? val.level_risk : "-"}
+                <p style={{ ...pStyle, fontWeight:'normal' }}>
+                  {val.level_risk ?? "-"}
                 </p>
               </td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.description ? val.description : "-"}</p></td>
-              <td style={tdStyle} className='plr-10'><p style={pStyle}>{val.preventive_risk ? val.preventive_risk : "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.description ?? "-"}</p></td>
+              <td style={ tdStyle } className='plr-10'><p style={{ ...pStyle, fontWeight:'normal' }}>{val.preventive_risk ?? "-"}</p></td>
             </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -297,20 +316,25 @@ const createMarkup = (element) => {
           return(
           <tr key={index}>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_first_name ? val.join_first_name : val.join_first_name}</p>
+                <p>{val.join_first_name ? val.join_first_name : "-"}</p>
               </td>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_second_name ? val.join_second_name : val.join_second_name}</p>
+                <p>{val.join_second_name ? val.join_second_name : "-"}</p>
               </td>
               <td style={tdStyle} className='plr-10'>
-                <p>{val.join_second_description ? val.join_second_description : val.join_second_description}</p>
+                <p>{val.join_second_description ? val.join_second_description : "-"}</p>
               </td>
           </tr>
           )
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign:"center" }}>-</td>
+        </tr>)
     }
   }
 
@@ -328,20 +352,28 @@ const createMarkup = (element) => {
           return (
             <tr key={index}>
               <td style={tdStyle}>
-                <p style={{ ...pStyle, textAlign:'center' }}>{milestoneLetter}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', textAlign:'center' }}>{milestoneLetter}</p>
               </td>
               <td className='plr-10' style={tdStyle}>
-                <p style={{ ...pStyle, color: '#000000' }}>{val.status}</p>
+                <p style={{ ...pStyle, fontWeight:'normal', color: '#000000' }}>{val.status ?? "-"}</p>
               </td>
               <td className='plr-10' style={{ ...tdStyle, textAlign:'center' }}>
-                <p>&nbsp;{moment(val.deadline).format(formatDate)}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal', color: '#000000' }}>
+
+                  &nbsp;{moment(val.deadline).format(formatDate)}
+                </p>
               </td>
             </tr>
           );
         })
       );
     } else {
-      return (<tr><td><br></br></td></tr>);
+      return (
+        <tr>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+          <td style={{ ...tdStyle, textAlign: "center" }}>-</td>
+        </tr>);
     }
   }
 
@@ -359,7 +391,10 @@ const createMarkup = (element) => {
         })
       )
     }else{
-      return (<tr><td><br></br></td></tr>)
+      return (
+        <tr>
+          <td style={{ textAlign:"center" }}>&nbsp;-</td>
+        </tr>)
     }
   }
 
@@ -391,9 +426,16 @@ const createMarkup = (element) => {
     padding: '0',
   };
 
+    const paddingTable = {
+    paddingTop:"20px",
+    paddingLeft: "30px",
+    paddingRight: "30px"
+  }
+
   const renderForm = () => {
     return (
-      <div id="pdf-content">
+      <div id="pdf-content" style={ paddingTable }>
+        <h3>Project Charter</h3>
         <table style={tableStyle} className="a">
           <tbody>
             <tr>
@@ -406,7 +448,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Nama Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{proyekName ?? '-'}</p>
+                <p className="capitalize" style={{ ...pStyle, fontWeight: 'normal' }}>{proyekName ?? '-'}</p>
               </td>
             </tr>
             <tr>
@@ -414,7 +456,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Project description</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{description ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>{description != "" ? description : '-'}</p>
               </td>
             </tr>
             <tr>
@@ -430,7 +472,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Lokasi Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p>&nbsp;{lokasi ?? '-' }</p>
+                <p>&nbsp;{lokasi != "" ? lokasi :'-' }</p>
               </td>
             </tr>
             <tr>
@@ -462,7 +504,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Anggaran Proyek</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>{currency}. {formatThousand(budget)}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>{currency}. {formatThousand(budget)}</p>
               </td>
             </tr>
             <tr>
@@ -483,7 +525,7 @@ const createMarkup = (element) => {
                 <p style={ pStyle }>Project Manager</p>
               </td>
               <td colSpan="2" style={tdStyle}>
-                <p>&nbsp;{PM}</p>
+                <p>&nbsp;{PM ?? "-"}</p>
               </td>
             </tr>
             <tr>
@@ -506,7 +548,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td style={tdStyle}>
-                <p style={{ fontStyle: 'italic' }}>{objectives ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                  {objectives ? (
+                    <span dangerouslySetInnerHTML={createMarkup(objectives)} />
+                  ) : (
+                    '-'
+                  )}
+                </p>
               </td>
             </tr>
           </tbody>
@@ -522,7 +570,11 @@ const createMarkup = (element) => {
             <tr>
               <td style={tdStyle}>
                 <ul>
+                  {scoupeProyek ? (
                     <li style={pStyle}>{ scoupeProyek ?? '-' }</li>
+                  ) : (
+                    "-"
+                  )}
                 </ul>
               </td>
             </tr>
@@ -562,7 +614,7 @@ const createMarkup = (element) => {
               <th style={emptyCellStyle}>
                 <p>&nbsp;
                   {image ? (
-                    <img src={`${BASE_OSPRO}/assets/image/` + image} style={{ width: "50px" }}></img>
+                    <img src={`${BASE_OSPRO}/assets/image/` + image} style={{ maxWidth: "100%" }}></img>
                   ) : (
                     '-'
                   )}
@@ -645,7 +697,13 @@ const createMarkup = (element) => {
               </th>
             </tr>
             <tr>
-            <p dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
+            <p style={{ ...pStyle, fontWeight: 'normal' }}>
+            {lateProyek ? (
+              <span dangerouslySetInnerHTML={createMarkup(lateProyek)} />
+            ) : (
+              "-"
+            )}
+            </p>
             </tr>
           </tbody>
         </table>
@@ -659,7 +717,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <th>
-                <p style={pStyle}>{projectSuccess ?? '-'}</p>
+                <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                  {projectSuccess ? (
+                    <span dangerouslySetInnerHTML={createMarkup(projectSuccess)} />
+                  ) : (
+                    '-'
+                  )}
+                </p>
               </th>
             </tr>
           </tbody>
@@ -674,7 +738,13 @@ const createMarkup = (element) => {
             </tr>
             <tr>
               <td>
-              <p dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
+              <p style={{ ...pStyle, fontWeight: 'normal' }}>
+                {assumtionProyek ? (
+                  <span dangerouslySetInnerHTML={createMarkup(assumtionProyek)} />
+                ) : (
+                  '-'
+                )}
+              </p>
               </td>
             </tr>
           </tbody>
@@ -741,16 +811,11 @@ const createMarkup = (element) => {
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <div>
-              Project
-            </div>
           <div>
             <Tooltip title={t('Export PDF')}>
-                  <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i></Button>
+                <Button style={{ marginLeft: "5px" }} onClick={(e) => handleExportPdf()}><i className="fa fa-print"></i> Export PDF</Button>
             </Tooltip>
           </div>
-          </div>
         </ModalHeader>
         <ModalBody>
           <div ref={reportTemplateRef}>

src/views/SimproV2/CreatedProyek/index.js

@@ -325,7 +325,7 @@ const CreatedProyek = ({ params, ...props }) => {
         },
         // { "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 },
+      orders: { columns: ["nama"], ascending: true },
       paging: { start: start, length: rowsPerPage },
     };
 
@@ -601,8 +601,8 @@ const CreatedProyek = ({ params, ...props }) => {
       .catch((error) => error.response);
 
     if (result && result.data && result.data.code == 200) {
-      const {kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when} = result.data.data;
-      const dataToSend = {kode_sortname, nama, mulai_proyek, rencana_biaya, keterangan, durasi_proyek, project_objectives, potential_risk, currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when};
+      const {value_proyek,area_kerja,scoupe_of_work, kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when} = result.data.data;
+      const dataToSend = {value_proyek,area_kerja,scoupe_of_work, kode_sortname, nama, mulai_proyek, rencana_biaya, keterangan, durasi_proyek, project_objectives, potential_risk, currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when};
       setProjectCharter(dataToSend);
     } else {
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
@@ -956,7 +956,7 @@ const CreatedProyek = ({ params, ...props }) => {
     const request = data.map((res) => {
       const payload = {
         proyek_id: parseInt(id),
-        tittle: res.title,
+        tittle: res.tittle,
         name: res.name,
       };
       return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
@@ -1356,7 +1356,7 @@ const CreatedProyek = ({ params, ...props }) => {
         },
         // { "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 },
+      orders: { columns: ["nama"], ascending: true },
     };
 
     const result = await axios
@@ -1971,7 +1971,7 @@ const CreatedProyek = ({ params, ...props }) => {
                   </Button>
                 </Tooltip>
               )}
-              <Tooltip title="Export Excel">
+              <Tooltip title="Export">
                 <Popover
                   // content={<a onClick={hide}>Close</a>}
                   title="Export"

src/views/SimproV2/Divisi/DialogForm.js

@@ -6,12 +6,16 @@ import {
 import { Select } from 'antd';
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
+import InputColor from "./InputColor";
+import "./styles.css";
+import "rc-color-picker/assets/index.css";
 const { Option } = Select
 const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
 	const [id, setId] = useState(0)
 	const [name, setName] = useState('')
 	const [parent, setParent] = useState(null)
 	const [description, setDescription] = useState('')
+  const [color, setColor] = useState('')
 	const { t } = useTranslation()
 
 	const onChangeParent = (val) => {
@@ -24,8 +28,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 			setDescription(dataEdit.description)
 			setName(dataEdit.name)
       setParent(dataEdit.parent)
+      setColor(dataEdit.color)
 		} else {
 			setId(0)
+      setColor('')
 		}
 	}, [dataEdit, openDialog])
 
@@ -42,23 +48,27 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     if (!err) {
       if (typeDialog === "Save") {
         data = {
-          name: name,
+          name,
           description,
-          parent
+          parent,
+          color
         }
         closeDialog('save', data);
       } else {
         data = {
           id,
-          name: name,
+          name,
           description,
-          parent
+          parent,
+          color
         }
         closeDialog('edit', data);
       }
       setId(0)
       setDescription('')
       setName('')
+      setParent(null)
+      setColor('')
     }
 	}
 	const handleCancel = () => {
@@ -66,6 +76,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 		setId(0)
 		setDescription('')
     setName('')
+    setParent(null)
 	}
 
 	const renderForm = () => {
@@ -112,6 +123,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
 						</FormGroup>
 					</Col>
 				</Row>
+        <Row>
+          <Col md={6}>
+            <FormGroup>
+              <Label className="capitalize">{t('color')}</Label>
+              <InputColor value={color} color={color} onChange={(e) => setColor(e.color)} />
+            </FormGroup>
+          </Col>
+        </Row>
 			</Form>
 		)
 	}

src/views/SimproV2/Divisi/InputColor.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Input from "antd/lib/input";
+import Button from "antd/lib/button";
+import Dropdown from "antd/lib/dropdown";
+import { Panel } from 'rc-color-picker'
+import "antd/dist/antd.css";
+import "./styles.css";
+
+export default function InputColor(props) {
+  const { color, onChange } = props;
+
+  const [internalColor, setInternalColor] = React.useState(color);
+
+  const handleChange = (color) => {
+    setInternalColor(color.color);
+
+    if (onChange) {
+      onChange(color);
+    }
+  };
+
+  const overlay = (
+    <div>
+      <Panel
+        color={internalColor}
+        enableAlpha={false}
+        onChange={handleChange}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      <Input
+        value={internalColor || ""}
+        onChange={(e) => setInternalColor(e.target.value)}
+        suffix={
+          <Dropdown trigger={["click"]} overlay={overlay}>
+            <Button style={{ background: internalColor }}> </Button>
+          </Dropdown>
+        }
+      />
+    </>
+  );
+}
+

src/views/SimproV2/Divisi/index.js

@@ -25,6 +25,7 @@ const config = {
 const column = [
 	{ name: "Nama" },
 	{ name: "Deskripsi" },
+	{ name: "Color" },
 ]
 
 const ProjectType = ({ params }) => {
@@ -72,8 +73,10 @@ const ProjectType = ({ params }) => {
 
 		if (listDivions && listDivions.data && listDivions.data.code == 200) {
 			let arr = []
-			for (const v in listDivions.data.data) {
-				arr.push(listDivions.data.data[v])
+      let dataRes = listDivions.data.data;
+      const filteredData = dataRes.filter(item => item.parent === null);
+      for (const v in filteredData) {
+				arr.push(filteredData[v])
 			}
 			setDataDivisions(arr);
 		} else {
@@ -97,7 +100,7 @@ const ProjectType = ({ params }) => {
 			"orders": {
 				"ascending": true,
 				"columns": [
-					'id'
+					'name'
 				]
 			},
 			"paging": {
@@ -184,6 +187,7 @@ const ProjectType = ({ params }) => {
 
 	const handleOpenDialog = (type) => {
     setOpenDialog(true)
+    getListDivision();
 		setTypeDialog(type)
 	}
 
@@ -348,7 +352,16 @@ const ProjectType = ({ params }) => {
 											</Tooltip>
 										</td>
 										<td>{n.name}</td>
-										<td>{n.description}</td>
+                    <td>{n.description ?? '-'}</td>
+                    {n.color != null ? (
+                      <td>
+                        <Tooltip title={n.color}>
+                          <span className="fa fa-square" style={{ color: n.color }}></span>
+                        </Tooltip>
+                      </td>
+                    ): (
+                      <td><small style={{ color:"grey",fontStyle:"italic" }}>No color set</small></td>
+                     )}
 									</tr>
 								)
 							})}

src/views/SimproV2/Divisi/styles.css

@@ -0,0 +1,41 @@
+.App {
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h2 {
+  margin-top: 40px;
+}
+
+.rc-color-picker-panel {
+  border: 1px solid #ccc;
+}
+.rc-color-picker-panel-inner {
+  border: none;
+  box-shadow: none;
+}
+.rc-color-picker-panel-board-hsv {
+  border-radius: 12px;
+  outline: none;
+}
+.rc-color-picker-panel-board-value {
+  border: none;
+  border-radius: 12px;
+}
+.rc-color-picker-panel-board-saturation {
+  border: none;
+  border-radius: 12px;
+}
+.rc-color-picker-panel-ribbon {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-wrap-preview {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-preview span {
+  border-radius: 12px;
+}
+.rc-color-picker-panel-preview input {
+  border-radius: 12px;
+}
+