Merge branch 'staging' of https://git.oslog.id/ibnu/generic-ospro-frontend into dev-wahyun

src/views/Master/MasterRoles/DialogMenuRoles.js

@@ -4,10 +4,19 @@ import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import 'antd/dist/antd.css';
 import axios from 'axios';
 import { MENU_SEARCH } from '../../../const/ApiConst.js';
-import { withTranslation, WithTranslation } from 'react-i18next';
-const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
 
-class DialogMenuRoles extends Component {
+const token = window.localStorage.getItem('token');
+
+
+const config = {
+  headers:
+  {
+    Authorization: `Bearer ${token}`,
+    "Content-type": `application/json`
+  }
+};
+
+export default class DialogMenuRoles extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -16,24 +25,39 @@ class DialogMenuRoles extends Component {
       description: "",
       openDialog: false,
       isParentClick: false,
+      menu: [],
       stateMenu: [],
-      menu:[],
+      stateRead: [],
+      stateCreate: [],
+      stateUpdate: [],
+      stateDelete: [],
+      stateReadAll: false,
+      stateCreateAll: false,
+      stateUpdateAll: false,
+      stateDeleteAll: false,
       allChecked: true,
-      company_id: props.company_id || null,
-      role_name: props.role_name || '',
-      token: props.token || '',
-      config: {
-        headers: {
-          Authorization: `Bearer ${props.token || ''}`,
-          "Content-type": "application/json",
-        }
-      }
     }
   }
-
   async componentDidMount() {
-    this.getAllMenu()
     this.props.showDialog(this.showDialog);
+    this.getAllMenu();
+  }
+
+  async componentDidUpdate() {
+    if (this.state.isParentClick === true) {
+      const { idRoles } = this.props
+      this.setStateMenu(true);
+      this.setStateRead(true);
+      this.setStateUpdate(true);
+      this.setStateCreate(true);
+      this.setStateDelete(true);
+      this.setState({ isParentClick: false, id: idRoles });
+    }
+  }
+
+
+  showDialog = () => {
+    this.setState({ isParentClick: true });
   }
 
   getAllMenu = async () => {
@@ -42,30 +66,30 @@ class DialogMenuRoles extends Component {
       "columns": [
         { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
       ],
-      "joins": [],
+      "joins": [
+        { "name": "t_roles_menu", "column_join": "id", "column_results": ["create", "update", "delete", "read"] }
+      ],
       "orders": { "columns": ["id"], "ascending": false }
     }
+
+
+
     const result = await axios
-      .post(MENU_SEARCH, payload, this.state.config)
+      .post(MENU_SEARCH, payload, config)
       .then(res => res)
       .catch((error) => error.response);
+
+    // console.log('78', result);
     if (result && result.data && result.data.code == 200) {
-      this.setState({ menu: result.data.data });
+      this.setState({ menu: result.data.data }, () => {
+        this.setStateMenu(false);
+      });
+    } else {
     }
-  }
 
-  async componentDidUpdate() {
-    if (this.state.isParentClick === true) {
-      const { idRoles } = this.props
-      this.setStateMenu(true);
-      this.setState({ isParentClick: false, id: idRoles });
-    }
   }
 
 
-  showDialog = () => {
-    this.setState({ isParentClick: true });
-  }
 
   setStateMenu = edit => {
     const stateMenu = [];
@@ -81,11 +105,69 @@ class DialogMenuRoles extends Component {
     })
   }
 
+  setStateRead = edit => {
+    const stateRead = [];
+    this.state.menu.map((val) => {
+      stateRead.push(false);
+    })
+    this.setState({ stateRead: [] }, () => {
+      this.setState({ stateRead: stateRead }, () => {
+        if (edit) {
+          this.checkReadRoles();
+        }
+      })
+    })
+  }
+
+  setStateCreate = edit => {
+    const stateCreate = [];
+    this.state.menu.map((val) => {
+      stateCreate.push(false);
+    })
+    this.setState({ stateCreate: [] }, () => {
+      this.setState({ stateCreate: stateCreate }, () => {
+        if (edit) {
+          this.checkCreateRoles();
+        }
+      })
+    })
+  }
+
+  setStateUpdate = edit => {
+    const stateUpdate = [];
+    this.state.menu.map((val) => {
+      stateUpdate.push(false);
+    })
+    this.setState({ stateUpdate: [] }, () => {
+      this.setState({ stateUpdate: stateUpdate }, () => {
+        if (edit) {
+          this.checkUpdateRoles();
+        }
+      })
+    })
+  }
+
+  setStateDelete = edit => {
+    const stateDelete = [];
+    this.state.menu.map((val) => {
+      stateDelete.push(false);
+    })
+    this.setState({ stateDelete: [] }, () => {
+      this.setState({ stateDelete: stateDelete }, () => {
+        if (edit) {
+          this.checkDeleteRoles();
+        }
+      })
+    })
+  }
+
   checkMenuRoles = () => {
     let copyStateMenu = [...this.state.stateMenu];
+
     this.props.menuRoles.map((val, indexMenu) => {
       let index = this.getIndexDataMenu(val.menu_id);
-      if (index >= 0) {
+
+      if (index >= 0 || val.read === true || val.create === true || val.update === true || val.delete === true) {
         copyStateMenu[index] = true;
       }
     })
@@ -99,15 +181,125 @@ class DialogMenuRoles extends Component {
     })
   }
 
+  checkReadRoles = () => {
+    let copyStateRead = [...this.state.stateRead];
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.read === true) {
+        copyStateRead[index] = true;
+      } else {
+        copyStateRead[index] = false;
+      }
+    })
+
+    this.setState({ stateRead: [] }, () => {
+      let check = copyStateRead.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateRead: copyStateRead, })
+      } else {
+        this.setState({ allChecked: false, stateRead: copyStateRead, })
+      }
+    })
+  }
+
+  checkCreateRoles = () => {
+    let copyStateCreate = [...this.state.stateCreate];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.create === true) {
+        copyStateCreate[index] = true;
+      } else {
+        copyStateCreate[index] = false;
+      }
+    })
+
+    this.setState({ stateCreate: [] }, () => {
+      let check = copyStateCreate.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateCreate: copyStateCreate, })
+      } else {
+        this.setState({ allChecked: false, stateCreate: copyStateCreate, })
+      }
+    })
+  }
+
+  checkUpdateRoles = () => {
+    let copyStateUpdate = [...this.state.stateUpdate];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.update === true) {
+        copyStateUpdate[index] = true;
+      } else {
+        copyStateUpdate[index] = false;
+      }
+    })
+
+    this.setState({ stateUpdate: [] }, () => {
+      let check = copyStateUpdate.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateUpdate: copyStateUpdate, })
+      } else {
+        this.setState({ allChecked: false, stateUpdate: copyStateUpdate, })
+      }
+    })
+  }
+
+  checkDeleteRoles = () => {
+    let copyStateDelete = [...this.state.stateDelete];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.delete === true) {
+        copyStateDelete[index] = true;
+      } else {
+        copyStateDelete[index] = false;
+      }
+    })
+
+    this.setState({ stateDelete: [] }, () => {
+      let check = copyStateDelete.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateDelete: copyStateDelete, })
+      } else {
+        this.setState({ allChecked: false, stateDelete: copyStateDelete, })
+      }
+    })
+  }
 
   getIndexDataMenu = (id) => {
     let index = this.state.menu.findIndex(obj => obj.id === id);
     return index
   }
 
+  getIndexDataCreate = (id) => {
+    let index = this.state.stateCreate.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataDelete = (id) => {
+    let index = this.state.stateDelete.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataRead = (id) => {
+    let index = this.state.stateRead.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataUpdate = (id) => {
+    let index = this.state.stateUpdate.findIndex(obj => obj.id === id);
+    return index
+  }
+
   handleSave = () => {
     const {
       stateMenu,
+      stateCreate,
+      stateDelete,
+      stateRead,
+      stateUpdate,
       menu,
       id
     } = this.state
@@ -118,11 +310,19 @@ class DialogMenuRoles extends Component {
       let data = {
         roles_id: id,
         menu_id: val.id,
-        checked: stateMenu[index]
+        read: stateRead[index],
+        create: stateCreate[index],
+        update: stateUpdate[index],
+        delete: stateDelete[index],
+        checked: stateMenu[index],
+
       }
       arrayData.push(data);
+
+
     })
-    this.props.closeDialog('save', arrayData);
+    console.log('arrayData', arrayData);
+    // this.props.closeDialog('save', arrayData);
     this.setState({ id: 0 });
   }
 
@@ -133,23 +333,146 @@ class DialogMenuRoles extends Component {
   handleChangeCheckbox = (checked, index) => {
     let copyStateMenu = [...this.state.stateMenu];
     copyStateMenu[index] = checked;
+
     this.setState({ stateMenu: copyStateMenu })
   }
 
+  handleChangeCheckboxRead = (checked, index) => {
+    let copyStateRead = [...this.state.stateRead];
+    copyStateRead[index] = checked;
+
+    this.setState({ stateRead: copyStateRead })
+  }
+
+  handleChangeCheckboxCreate = (checked, index) => {
+    let copyStateCreate = [...this.state.stateCreate];
+    copyStateCreate[index] = checked;
+
+    this.setState({ stateCreate: copyStateCreate })
+  }
+
+  handleChangeCheckboxEdit = (checked, index) => {
+    let copyStateEdit = [...this.state.stateUpdate];
+    copyStateEdit[index] = checked;
+
+    this.setState({ stateUpdate: copyStateEdit })
+  }
+
+  handleChangeCheckboxDelete = (checked, index) => {
+    let copyStateDelete = [...this.state.stateDelete];
+    copyStateDelete[index] = checked;
+
+    this.setState({ stateDelete: copyStateDelete })
+  }
+
+  handleChangeCheckboxReadAll = (checked) => {
+    let copyStateRead = [...this.state.stateRead];
+    copyStateRead.map((val, index) => {
+      copyStateRead[index] = checked;
+    })
+    this.setState({ stateRead: copyStateRead })
+  }
+
+  handleChangeCheckboxCreateAll = (checked, index) => {
+    let copyStateCreate = [...this.state.stateCreate];
+    copyStateCreate.map((val, index) => {
+      copyStateCreate[index] = checked;
+    })
+    this.setState({ stateCreate: copyStateCreate })
+  }
+
+  handleChangeCheckboxEditAll = (checked, index) => {
+    let copyStateEdit = [...this.state.stateUpdate];
+    copyStateEdit.map((val, index) => {
+      copyStateEdit[index] = checked;
+    })
+    this.setState({ stateUpdate: copyStateEdit })
+  }
+
+  handleChangeCheckboxDeleteAll = (checked, index) => {
+    let copyStateDelete = [...this.state.stateDelete];
+    copyStateDelete.map((val, index) => {
+      copyStateDelete[index] = checked;
+    })
+    this.setState({ stateDelete: copyStateDelete })
+  }
+
+  // renderForm = () => {
+  //   const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state
+  //   console.log('menu', menu);
+  //   return (
+  //     menu.map((val, index) => {
+
+  //       return (
+  //         <tr key={index}>
+  //           <td>{val.name}</td>
+  //           <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxRead(e.target.checked, index)} defaultChecked={stateRead[index]} /></td>
+  //           <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreate(e.target.checked, index)} defaultChecked={stateCreate[index]} /></td>
+  //           <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEdit(e.target.checked, index)} defaultChecked={stateUpdate[index]} /></td>
+  //           <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, index)} defaultChecked={stateDelete[index]} /></td>
+  //         </tr>
+  //       )
+  //     })
+  //   )
+
+  // }
+
   renderForm = () => {
-    const { menu, stateMenu } = this.state
+    const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state;
-    return (
+
-      menu.map((val, index) => {
+    const getChildren = (parentId) => {
+      return menu.filter(item => item.parent_id === parentId);
+    };
+
+    // Function to render menu items
+    const renderMenu = (parentId, depth = 0) => {
+      const children = getChildren(parentId);
+
+      return children.map((menuItem, index) => {
+        const paddingLeft = depth * 20;
+        const fontWeight = menuItem.parent_id === null ? 'bold' : 'normal';
+
         return (
-          <tr key={index}>
+          <React.Fragment key={index}>
-            <td>{val.name}</td>
+            <tr >
-            <td><input type="checkbox" onClick={(e) => this.handleChangeCheckbox(e.target.checked, index)} defaultChecked={stateMenu[index]} /></td>
+              <td style={{ paddingLeft: paddingLeft }}>{menuItem.name}</td>
-          </tr>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxRead(e.target.checked, index)} defaultChecked={stateRead[index]} /></td>
-        )
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreate(e.target.checked, index)} defaultChecked={stateCreate[index]} /></td>
-      })
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEdit(e.target.checked, index)} defaultChecked={stateUpdate[index]} /></td>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, index)} defaultChecked={stateDelete[index]} /></td>
+            </tr>
+            {renderMenu(menuItem.id, depth + 1)} {/* Recursively render children */}
+          </React.Fragment>
+        );
+      });
+    };
+
+    // Render top-level menu items (parents)
+    return (
+      <React.Fragment>
+        {this.renderAll()} {/* Render the "All" row */}
+        {renderMenu(null)} {/* Render the menu items */}
+      </React.Fragment>
+    );
+  };
+
+
+  renderAll = () => {
+
+    return (
+      <tr>
+        <td>All</td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxReadAll(e.target.checked)} defaultChecked={this.state.stateReadAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreateAll(e.target.checked)} defaultChecked={this.state.stateCreateAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEditAll(e.target.checked)} defaultChecked={this.state.stateUpdateAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDeleteAll(e.target.checked)} defaultChecked={this.state.stateDeleteAll} /></td>
+      </tr>
     )
   }
 
+
+
+
   checkArray = (val) => {
     return val === false;
   }
@@ -157,6 +480,7 @@ class DialogMenuRoles extends Component {
   handleAllChecked = (checked) => {
     this.setState({ allChecked: !this.state.allChecked });
     if (checked === true) {
+
       let check = this.state.stateMenu.some(this.checkArray);
 
       if (check) {
@@ -172,6 +496,7 @@ class DialogMenuRoles extends Component {
 
 
     } else {
+
       const stateMenu = [];
       this.state.menu.map((val) => {
         stateMenu.push(false);
@@ -185,8 +510,8 @@ class DialogMenuRoles extends Component {
 
   render() {
     return (
-      <Modal scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
+      <Modal size="xl" scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.closeDialog}>{this.props.t('menuRoles')}</ModalHeader>
+        <ModalHeader toggle={this.props.closeDialog}>Roles Menu</ModalHeader>
         <ModalBody>
           <Form>
             <Table>
@@ -194,26 +519,31 @@ class DialogMenuRoles extends Component {
                 <tr>
                   <th>Menu</th>
                   <th>
-                    T/F
+                    View
+                  </th>
+                  <th>
+                    Create
+                  </th>
+                  <th>
+                    Edite
                   </th>
+                  <th>
+                    Delete
+                  </th>
+
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td>All</td>
-                  <td><input type="checkbox" onChange={(e) => this.handleAllChecked(e.target.checked)} checked={this.state.allChecked} /></td>
-                </tr>
                 {this.renderForm()}
               </tbody>
             </Table>
           </Form>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={() => this.handleSave()}>{this.props.t('save')}</Button>{' '}
+          <Button id="roleSaveButton" className="roleSaveButton" name="roleSaveButton" color="primary" onClick={() => this.handleSave()}>Save</Button>{' '}
-          <Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button>
+          <Button id="roleCancelButton" className="roleCancelButton" name="roleCancelButton" color="secondary" onClick={() => this.handleCancel()}>Cancel</Button>
         </ModalFooter>
       </Modal>
     )
   }
 }
-export default withTranslation()(DialogMenuRoles);

src/views/Master/MasterRoles/index.js

@@ -307,7 +307,7 @@ class index extends Component {
 			"columns": [
 				{ "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" }
 			],
-			"joins": [],
+			"joins": [{ "name": "m_menu", "column_join": "menu_id", "column_results": ["parent_id", "name"] }],
 			"orders": { "columns": ["id"], "ascending": false }
 		}
 
@@ -476,7 +476,7 @@ class index extends Component {
 					dataHs={this.state.dataIdHo}
 					company_id={this.state.company_id}
 					role_name={this.state.role_name}
-          token={this.state.token}
+					token={this.state.token}
 				/>
 				<DialogMenuRoles
 					openDialog={dialogMenuForm}
@@ -484,9 +484,10 @@ class index extends Component {
 					idRoles={this.state.idRoles}
 					showDialog={showDialog => this.showMenuRolesDialog = showDialog}
 					menuRoles={this.state.menuRoles}
-          company_id={this.state.company_id}
+					company_id={this.state.company_id}
 					role_name={this.state.role_name}
-          token={this.state.token}
+					role_id={this.state.role_id}
+					token={this.state.token}
 				/>
 				<Card>
 					<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Modal,
   ModalHeader,
@@ -73,67 +73,76 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   };
 
   const columns = [
-    {title: "Gantt", dataIndex: "name_version", key: "name_version"},
+    { title: "Gantt", dataIndex: "name_version", key: "name_version" },
-    {title: "Baseline Start", dataIndex: "planned_start", key: "planned_start",
+    {
+      title: "Baseline Start", dataIndex: "planned_start", key: "planned_start",
       render: (text, record) => (
-          <>
+        <>
-            {record.planned_start ? moment(record.planned_start).format("DD-MM-YY") : ''}
+          {record.planned_start ? moment(record.planned_start).format("DD-MM-YY") : ''}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Baseline Finish", dataIndex: "planned_end", key: "planned_end",
+    {
+      title: "Baseline Finish", dataIndex: "planned_end", key: "planned_end",
       render: (text, record) => (
-          <>
+        <>
-            {record.planned_end ? moment(record.planned_end).format("DD-MM-YY") : ''}
+          {record.planned_end ? moment(record.planned_end).format("DD-MM-YY") : ''}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Early Start", dataIndex: "start_date", key: "start_date",
+    {
+      title: "Early Start", dataIndex: "start_date", key: "start_date",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.start_date).format("DD-MM-YY")}
+          {moment(record.start_date).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Early Finish", dataIndex: "end_date", key: "end_date",
+    {
+      title: "Early Finish", dataIndex: "end_date", key: "end_date",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.end_date).format("DD-MM-YY")}
+          {moment(record.end_date).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Actual Start", dataIndex: "actual_start", key: "actual_start",
+    {
+      title: "Actual Start", dataIndex: "actual_start", key: "actual_start",
       render: (text, record) => (
-          <>
+        <>
-            {record.actual_start ? moment(record.actual_start).format("DD-MM-YY") : ""}
+          {record.actual_start ? moment(record.actual_start).format("DD-MM-YY") : ""}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Actual Finish", dataIndex: "actual_end", key: "actual_end",
+    {
+      title: "Actual Finish", dataIndex: "actual_end", key: "actual_end",
       render: (text, record) => (
-          <>
+        <>
-            {record.actual_end ? moment(record.actual_end).format("DD-MM-YY") : ""}
+          {record.actual_end ? moment(record.actual_end).format("DD-MM-YY") : ""}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Assign HR", dataIndex: "user_name", key: "user_name", width: "8%",
+    {
-        ellipsis:{
+      title: "Assign HR", dataIndex: "user_name", key: "user_name", width: "8%",
-          showTitle: true
+      ellipsis: {
-        },
+        showTitle: true
-        render: (text) =>
+      },
-          <Tooltip placement="topLeft" title={text}>
+      render: (text) =>
-            {text}
+        <Tooltip placement="topLeft" title={text}>
-          </Tooltip>
+          {text}
+        </Tooltip>
     },
-    {title: "Volume Plan", dataIndex: "qty_planning", key: "qty_planning",
+    {
-    render: (text, record) =>
+      title: "Volume Plan", dataIndex: "qty_planning", key: "qty_planning",
-          <>
+      render: (text, record) =>
-            {text ? text : 0}
+        <>
-          </>
+          {text ? text : 0}
+        </>
     },
-    {title: "Volume Actual", dataIndex: "qty", key: "qty"},
+    { title: "Volume Actual", dataIndex: "qty", key: "qty" },
-    {title: "Progress Plan (%)", dataIndex: "persentase_progress", key: "persentase_progress",
+    {
-        render: (text, record) => {
+      title: "Progress Plan (%)", dataIndex: "persentase_progress", key: "persentase_progress",
+      render: (text, record) => {
         const startDate = moment(record.start_date);
         const duration = record.duration;
 
@@ -148,7 +157,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
         );
       },
     },
-    {title: "Progress Actual (%)", dataIndex: "persentase_progress", key: "persentase_progress", width: "8%"},
+    { title: "Progress Actual (%)", dataIndex: "persentase_progress", key: "persentase_progress", width: "8%" },
     {
       title: 'Action',
       dataIndex: '',
@@ -165,59 +174,67 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   ]
 
   const columnActivityToHr = [
-    {title: "Activity", dataIndex: "join_second_name", key: "join_second_name"},
+    { title: "Activity", dataIndex: "join_second_name", key: "join_second_name" },
-    {title: "Gantt", dataIndex: "join_fourth_name_version", key: "join_fourth_name_version"},
+    { title: "Gantt", dataIndex: "join_fourth_name_version", key: "join_fourth_name_version" },
-    {title: "Baseline Start", dataIndex: "join_second_planned_start", key: "join_second_planned_start",
+    {
+      title: "Baseline Start", dataIndex: "join_second_planned_start", key: "join_second_planned_start",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.join_second_planned_start).format("DD-MM-YY")}
+          {moment(record.join_second_planned_start).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Baseline Finish", dataIndex: "join_second_planned_end", key: "join_second_planned_end",
+    {
+      title: "Baseline Finish", dataIndex: "join_second_planned_end", key: "join_second_planned_end",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.join_second_planned_end).format("DD-MM-YY")}
+          {moment(record.join_second_planned_end).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Early Start", dataIndex: "join_second_start_date", key: "join_second_start_date",
+    {
+      title: "Early Start", dataIndex: "join_second_start_date", key: "join_second_start_date",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.join_second_start_date).format("DD-MM-YY")}
+          {moment(record.join_second_start_date).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Early Finish", dataIndex: "join_second_end_date", key: "join_second_end_date",
+    {
+      title: "Early Finish", dataIndex: "join_second_end_date", key: "join_second_end_date",
       render: (text, record) => (
-          <>
+        <>
-            {moment(record.join_second_end_date).format("DD-MM-YY")}
+          {moment(record.join_second_end_date).format("DD-MM-YY")}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Actual Start", dataIndex: "join_second_actual_start", key: "join_second_actual_start",
+    {
+      title: "Actual Start", dataIndex: "join_second_actual_start", key: "join_second_actual_start",
       render: (text, record) => (
-          <>
+        <>
-            {record.join_second_actual_start ? moment(record.join_second_actual_start).format("DD-MM-YY") : ""}
+          {record.join_second_actual_start ? moment(record.join_second_actual_start).format("DD-MM-YY") : ""}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Actual Finish", dataIndex: "join_second_actual_end", key: "join_second_actual_end",
+    {
+      title: "Actual Finish", dataIndex: "join_second_actual_end", key: "join_second_actual_end",
       render: (text, record) => (
-          <>
+        <>
-            {record.join_second_actual_end ? moment(record.join_second_actual_end).format("DD-MM-YY") : ""}
+          {record.join_second_actual_end ? moment(record.join_second_actual_end).format("DD-MM-YY") : ""}
-          </>
+        </>
-        ),
+      ),
     },
-    {title: "Volume Plan", dataIndex: "join_third_qty_planning", key: "join_third_qty_planning",
+    {
-    render: (text, record) =>
+      title: "Volume Plan", dataIndex: "join_third_qty_planning", key: "join_third_qty_planning",
-          <>
+      render: (text, record) =>
-            {text ? text : 0}
+        <>
-          </>
+          {text ? text : 0}
+        </>
     },
-    {title: "Volume Actual", dataIndex: "volume_actual", key: "volume_actual"},
+    { title: "Volume Actual", dataIndex: "volume_actual", key: "volume_actual" },
-    {title: "Progress Plan (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress",
+    {
-        render: (text, record) => {
+      title: "Progress Plan (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress",
+      render: (text, record) => {
         const startDate = moment(record.join_second_start_date);
         const duration = record.join_second_duration;
 
@@ -232,20 +249,20 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
         );
       },
     },
-    {title: "Progress Actual (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress"},
+    { title: "Progress Actual (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress" },
     {
-        title: 'Action',
+      title: 'Action',
-        dataIndex: '',
+      dataIndex: '',
-        key: 'id',
+      key: 'id',
-        className: "nowrap",
+      className: "nowrap",
-        render: (text, record) =>
+      render: (text, record) =>
-          <>
+        <>
-            <Tooltip title="Detail Activity">
+          <Tooltip title="Detail Activity">
-              <Button size={"sm"} color='primary' onClick={() => handleDetail(text)}><i className="fa fa-eye"></i></Button>
+            <Button size={"sm"} color='primary' onClick={() => handleDetail(text)}><i className="fa fa-eye"></i></Button>
-            </Tooltip>{" "}
+          </Tooltip>{" "}
-          </>
+        </>
-        ,
+      ,
-      },
+    },
   ]
 
   useEffect(() => {
@@ -297,10 +314,10 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     if (status == "Save") {
       // getdataGantt()
       NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
-    }else if (status == "Edit") {
+    } else if (status == "Edit") {
       // getdataGantt()
       NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!');
-    }else if (status == "failed") {
+    } else if (status == "failed") {
       NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
     }
     setDataDetail(null)
@@ -338,7 +355,21 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
     if (result && result.data && result.data.code == 200) {
       let dataRes = result.data.data || [];
-      setHrList(dataRes);
+      let groupedData = {};
+
+      dataRes.forEach(data => {
+        if (groupedData[data.join_first_name]) {
+          groupedData[data.join_first_name].join_first_id = Math.min(groupedData[data.join_first_name].join_first_id, data.join_first_id);
+        } else {
+          groupedData[data.join_first_name] = {
+            join_first_id: data.join_first_id,
+            join_first_name: data.join_first_name
+          };
+        }
+      });
+      let dataFiltered = Object.values(groupedData);
+
+      setHrList(dataFiltered);
     } else {
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
@@ -382,21 +413,21 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
           name1: "m_activity",
           name: "assign_material_to_activity",
           column_join: "id",
-          column_self:"activity_id",
+          column_self: "activity_id",
-          column_results: ["id", "qty_planning"]
+          column_results: ["qty_planning"]
         },
         {
           name1: "m_activity",
           name: "m_version_gantt",
           column_join: "version_gantt_id",
-          column_self:"id",
+          column_self: "id",
           column_results: ["name_version"]
         },
         {
           name1: "m_activity",
           name: "report_activity_material",
           column_join: "id",
-          column_self:"activity_id",
+          column_self: "activity_id",
         },
       ],
       orders: { columns: ["id"], ascending: false },
@@ -411,7 +442,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     if (result && result.data && result.data.code == 200) {
       let dataRes = result.data.data || [];
       dataRes.forEach(element => {
-          element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
+        element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
       });
       setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
@@ -485,9 +516,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       let dataRes = result.data.data || [];
 
       dataRes.forEach(element => {
-          element.persentase_progress ? sum += parseInt(element.persentase_progress) : sum += 0;
+        element.persentase_progress ? sum += parseInt(element.persentase_progress) : sum += 0;
-          element.qty_planning ? sumPlan += parseInt(element.qty_planning) : sumPlan += 0;
+        element.qty_planning ? sumPlan += parseInt(element.qty_planning) : sumPlan += 0;
-          element.qty ? sumAct += parseInt(element.qty) : sumAct += 0;
+        element.qty ? sumAct += parseInt(element.qty) : sumAct += 0;
       });
       setAvgActivity(sum / dataRes.length);
       setSumVolPlan(sumPlan);
@@ -536,9 +567,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                         <Select showSearch value={search} onChange={(val) => setSearch(val)} placeholder="Select Activity" filterOption={(input, option) =>
                           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         } style={{ width: 200 }}>
-                            {groupedActivity && groupedActivity.map((res, index) => (
+                          {groupedActivity && groupedActivity.map((res, index) => (
                             <Option key={index} value={res.name}>{`${res.name}`}</Option>
-                            ))}
+                          ))}
                         </Select>
                       </Col>
                     </Row>
@@ -573,9 +604,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                         <Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
                           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         } style={{ width: 200 }}>
-                            {hrList && hrList.map(res => (
+                          {hrList && hrList.map(res => (
                             <Option key={res.join_first_id} value={res.join_first_id}>{`${res.join_first_name}`}</Option>
-                            ))}
+                          ))}
                         </Select>
                       </Col>
                     </Row>