diff --git a/Dockerfile b/Dockerfile
index f6b8ea0..6894b88 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,20 +1,22 @@
-FROM node:12
+# Stage 1
+FROM node:14 as build-stage
+
 WORKDIR /react-docker
-COPY ./package*.json ./
-ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json .
 RUN npm install
-RUN npm i react@16.14.0
-RUN npm i react-scripts
-RUN npm audit fix
+COPY . .
+
+#ARG REACT_APP_API_BASE_URL
+#ENV REACT_APP_API_BASE_URL=$REACT_APP_API_BASE_URL
 
-EXPOSE 8445
+RUN npm run build
 
-# Comment as needed (Production / Dev)
-# [PROD] Use for Production
-# COPY . . # uncomment prod
+# Stage 2
+#FROM nginx:1.17.0-alpine
+FROM nginx:alpine
 
-# [DEV] Live Reload
-RUN mkdir -p /react-docker/src # comment for prod
-RUN mkdir -p /react-docker/public # comment for prod
+COPY --from=build-stage /react-docker/build /usr/share/nginx/html
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
 
-CMD PORT=8445 npm start #--host 0.0.0.0 --port 3000 --disableHostCheck true
+CMD nginx -g 'daemon off;'
diff --git a/docker-compose.yml b/docker-compose.yml
index b5ad061..b95feba 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: "3.3"
 services:
   frontend:
-    container_name: ADW-Frontend
+    container_name: ct-frontend
     tty: true
     build:
       context: .
@@ -11,6 +11,12 @@ services:
       - ./src:/react-docker/src
       - ./public:/react-docker/public
     ports:
-      - 8445:8445
+      - 8455:80
+    networks:
+      - ospro_ct
     environment:
       - CHOKIDAR_USEPOLLING=true
+
+networks:
+  ospro_ct:
+    driver: bridge
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
new file mode 100644
index 0000000..40a878b
--- /dev/null
+++ b/nginx/nginx.conf
@@ -0,0 +1,17 @@
+server {
+
+  listen 80;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+
+}
diff --git a/src/assets/img/OSPRO.png b/src/assets/img/OSPRO.png
new file mode 100644
index 0000000..2a73619
Binary files /dev/null and b/src/assets/img/OSPRO.png differ
diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js
index 4241749..99d1c34 100644
--- a/src/const/ApiConst.js
+++ b/src/const/ApiConst.js
@@ -107,7 +107,7 @@ export const API_DAILY_INFO = `${BASE_URL_GEOHR_API2}/employee.php?act=get_daily
 export const API_DAILY_INFO_DETAIL = (start, length) =>
   `${BASE_URL_GEOHR_API2}/employee.php?act=get_daily_detail&start=${start}&length=${length}&role_name=${roleName}`;
 
-export const APP_MODE = "ADW"; // KIT / ADW / NAWAKARA / IU
+export const APP_MODE = "ADW"; // ADW == Konstruksi
 export const BASE_SIMPRO = "https://oslog.id/simpro-api/v1";
 export const BASE_SIMPRO_V2 = "https://oslog.id/simpro-api/v2";
 export const BASE_SIMPRO_LUMENNIAGA = "https://ospro-api.odm-iu.com/api";
@@ -116,7 +116,7 @@ export const TOKEN_ADW =
   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxMjAyIiwiZXhwIjoxNjkxODMwNDkzfQ.DvBQIOZsdFndWsliPCZT65Y6G5Xx4vWBKz8Rhe7rvRA";
 
 // export let BASE_OSPRO = "https://ospro-api.ospro.id";
-export let BASE_OSPRO = "https://adw-api.ospro.id";
+export let BASE_OSPRO = "https://konstruksi-api.ospro.id";
 // export let BASE_OSPRO = "http://localhost:8444/adw-backend";
 // export let BASE_OSPRO = "http://103.73.125.81:8444"; // ip public adw
 export let BASE_SIMPRO_LUMEN = `${BASE_OSPRO}/api`;
@@ -734,3 +734,28 @@ export const IMAGE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/upload`;
 export const IMAGE_DELETE = (id, category) => {
   return `${BASE_SIMPRO_LUMEN}/image/delete/${id}/${category}`;
 }
+
+
+export const COMPANY_MANAGEMENT_ADD = `${BASE_SIMPRO_LUMEN}/company-management/add`;
+export const COMPANY_MANAGEMENT_SEARCH = `${BASE_SIMPRO_LUMEN}/company-management/search`;
+export const COMPANY_MANAGEMENT_EDIT = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/company-management/update/${id}`;
+};
+export const COMPANY_MANAGEMENT_DELETE = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/company-management/delete/${id}`;
+};
+export const COMPANY_MANAGEMENT_LIST = `${BASE_SIMPRO_LUMEN}/company-management/list`;
+
+
+export const MENU_COMPANY_ADD = `${BASE_SIMPRO_LUMEN}/menu-company/add-multiple`;
+export const MENU_COMPANY_MANAGEMENT = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/menu-company/management/${id}`;
+};
+export const MENU_COMPANY_SEARCH = `${BASE_SIMPRO_LUMEN}/menu-company/search`;
+export const MENU_COMPANY_LIST = `${BASE_SIMPRO_LUMEN}/menu-company/list`;
+export const MENU_COMPANY_EDIT = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/menu-company/update/${id}`;
+};
+export const MENU_COMPANY_DELETE = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/menu-company/delete/${id}`;
+};
diff --git a/src/routes.js b/src/routes.js
index cf1b6e7..d20246d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -50,6 +50,7 @@ const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardPro
 const DashboardProjectCarousell = React.lazy(() => import('./views/Dashboard/DashboardProjectCarousell'));
 const MapMonitoring = React.lazy(() => import('./views/MapMonitoring'));
 const Settings = React.lazy(() => import('./views/SimproV2/Settings'));
+const CompanyManagement = React.lazy(() => import('./views/Master/MasterCompany'))
 const routes = [
 	{ path: '/', exact: true, name: 'Home' },
 	{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
@@ -109,6 +110,7 @@ const routes = [
 	{ path: '/map-monitoring', exact: true, name: 'Map Monitoring', component: MapMonitoring },
 	// { path: '/dashboard-project/:ID/:GANTTID', exact: true, name: 'Dashboard Project', component: DashboardProject },
 	{ path: '/settings', exact: true, name: 'Settings', component: Settings },
+	{ path: '/company-management', exact: true, name: 'Company Management', component: CompanyManagement },
 ];
 
 export default routes;
diff --git a/src/views/Dashboard/DashboardCustomer.js b/src/views/Dashboard/DashboardCustomer.js
index 7d482e8..37d0f0d 100644
--- a/src/views/Dashboard/DashboardCustomer.js
+++ b/src/views/Dashboard/DashboardCustomer.js
@@ -47,7 +47,8 @@ const DashboardCustomer = (props) => {
 		}
 	}
     const { PROJECT_ID, GANTT_ID, SCURVE } = useParams();
-    const URL_GANTT = `https://adw-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;    const mapRef = useRef()
+    const URL_GANTT = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
+    const mapRef = useRef()
     const [projectName, setProjectName] = useState("");
     const [projectManagerName, setProjectManagerName] = useState('');
     const [customerName, setCustomerName] = useState("");
diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js
index 76ad3b6..6f19294 100644
--- a/src/views/Dashboard/DashboardProject.js
+++ b/src/views/Dashboard/DashboardProject.js
@@ -72,7 +72,7 @@ const DashboardProject = () => {
     },
   };
   const { PROJECT_ID, GANTT_ID, SCURVE } = useParams();
-  const URL_GANTT = `https://adw-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
+  const URL_GANTT = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
   const mapRef = useRef();
   const [projectName, setProjectName] = useState("");
   const [projectManagerName, setProjectManagerName] = useState("");
diff --git a/src/views/Dashboard/DashboardProject.js.save b/src/views/Dashboard/DashboardProject.js.save
new file mode 100644
index 0000000..f534d5f
--- /dev/null
+++ b/src/views/Dashboard/DashboardProject.js.save
@@ -0,0 +1,1698 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import axios from "axios";
+import { Row, Col, Button, Input } from "antd";
+import {
+  CardDashboard,
+  CardExpenditure,
+  CardScheduleHealthPerDivision,
+} from "../../components/CardDashboard/CardDashboard";
+import L from "leaflet";
+import { useParams } from "react-router-dom";
+import "../../assets/css/customscroll.css";
+import moment from "moment";
+import { renderFormatRupiah } from "../../const/CustomFunc";
+import { BASE_OSPRO } from "../../const/ApiConst";
+import { SendOutlined } from "@ant-design/icons";
+import {
+  NotificationContainer,
+  NotificationManager,
+} from "react-notifications";
+import ContentLoader from "react-content-loader";
+import {
+  BehindTaskItem,
+  Comment,
+  HealthByBudget,
+  HealthBySchedule,
+  ListLoader,
+  PopupContent,
+  ProgressActualBar,
+  ProgressPlanningBar,
+  SingleTextLoader,
+} from "./Components";
+import { Fab, Action } from "react-tiny-fab";
+import "react-tiny-fab/dist/styles.css";
+import { useHistory } from "react-router-dom";
+
+const { TextArea } = Input;
+
+const styles = {
+  cardContainer: {
+    backgroundColor: "#F8F8F8",
+    margin: 2,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 10,
+  },
+  cardHeaderContainer: {
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: 10,
+  },
+  cardChartContainer: {
+    position: "relative",
+    height: "21vh",
+    margin: "auto",
+    paddingBottom: 10,
+    justifyContent: "center",
+  },
+  cardTitle: { color: "#444444", fontSize: 16, fontWeight: "bold" },
+  cardSubtitle: { color: "#888888", fontSize: 12 },
+};
+
+const center = {
+  lat: -6.2,
+  lng: 106.816666,
+};
+
+const DashboardProject = () => {
+  const token = localStorage.getItem("token");
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+  const { PROJECT_ID, GANTT_ID, SCURVE } = useParams();
+  const URL_GANTT = `https://konstruksi-gantt.ospro.id17/04/2024/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
+  const mapRef = useRef();
+  const [projectName, setProjectName] = useState("");
+  const [projectManagerName, setProjectManagerName] = useState("");
+  const [customerName, setCustomerName] = useState("");
+  const [plannedStart, setPlannedStart] = useState(null);
+  const [plannedFinish, setPlannedFinish] = useState(null);
+  const [plannedCost, setPlannedCost] = useState(null);
+  const [totalCost, setTotalCost] = useState(null);
+  const [actualStart, setActualStart] = useState(null);
+  const [actualFinish, setActualFinish] = useState(null);
+  const [estimatedFinish, setEstimatedFinish] = useState(null);
+  const [mymap, setMymap] = useState(null);
+  const [activeTabIdx, setActiveTabIdx] = useState(0);
+  const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0);
+  const [planningProgress, setPlanningProgress] = useState(0);
+  const [actualProgress, setActualProgress] = useState(0);
+  const [currentBudget, setCurrentBudget] = useState(null);
+  const [addCostToComplete, setAddCostToComplete] = useState(null);
+  const [actualToDate, setActualToDate] = useState(null);
+  const [estAtCompletion, setEstAtCompletion] = useState(null);
+  const [bcwp, setBcwp] = useState(null);
+  const [costDeviation, setCostDeviation] = useState(null);
+  const [remToComplete, setRemToComplete] = useState(0);
+  const [totalInvoice, setTotalInvoice] = useState(null);
+  const [cashIn, setCashIn] = useState(null);
+  const [outstandingBalance, setOutstandingBalance] = useState(null);
+  const [comment, setComment] = useState("");
+  const [comments, setComments] = useState([]);
+  const [isReadyComments, setIsReadyComments] = useState(false);
+  const [isSendingComment, setIsSendingComment] = useState(false);
+  const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false);
+  const [isReadySCurve, setIsReadySCurve] = useState(false);
+  const [isReadyGantt, setIsReadyGantt] = useState(false);
+  const [isReadyOverdueActivities, setIsReadyOverdueActivities] =
+    useState(false);
+  const [isReadyIntegrationInvoice, setIsReadyIntegrationInvoice] =
+    useState(false);
+  const [isReadyReportDistribution, setIsReadyReportDistribution] =
+    useState(false);
+  const [overdueActivities, setOverdueActivities] = useState([]);
+  const [healthBySchedule, setHealthBySchedule] = useState("-");
+  const [healthByBudget, setHealthByBudget] = useState("-");
+  const [reportDistribution, setReportDistribution] = useState([]);
+  const [manPower, setManPower] = useState(0);
+  const [assignedHr, setAssignedHr] = useState([]);
+  const [assignedHrCount, setAssignedHrCount] = useState(0);
+  const [actualHrCount, setActualHrCount] = useState(0);
+  const [dataGantt, setDataGantt] = useState({});
+  const [dataGanttParents, setDataGanttParents] = useState({});
+  const [isReadyGanttParents, setIsReadyGanttParents] = useState(false);
+  const [calculationStatus, setCalculationStatus] = useState(false);
+  const [isHierarchy, setIsHierarchy] = useState(false);
+  let history = useHistory();
+
+  useEffect(() => {
+    getProjectDetail();
+    getSCurve();
+    getOverdueActivities();
+    getReportDistribution();
+    getComments();
+    getGantt();
+    getGanttParents();
+    return () => {
+      console.log("unmount RenderMap");
+    };
+  }, []);
+
+  useEffect(() => {
+    if (activeTabIdx === 1) {
+      initMap();
+    }
+  }, [activeTabIdx]);
+
+  useEffect(() => {
+    async function fetchData() {
+      await Promise.all([
+        getManpower(),
+        getAssignedHR(),
+        ...(assignedHr.length > 0 ? [getActualHR()] : []),
+      ]);
+    }
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    let deviation = 0;
+    if (plannedCost && totalCost) {
+      deviation = plannedCost - totalCost;
+    }
+    setRemToComplete(deviation.toString());
+  }, [plannedCost, totalCost]);
+
+  const handleRedirect = () => {
+    history.push("/projects/" + GANTT_ID + "/" + PROJECT_ID + "/gantt");
+  };
+
+  const getManpower = async () => {
+    const url = `${BASE_OSPRO}/api/project/manpower/${PROJECT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setManPower(response.data.totalRecord);
+    } catch (error) {
+      console.error("Failed to get manpower:", error);
+    }
+  };
+
+  const getGantt = async () => {
+    setIsReadyGantt(false);
+    const url = `${BASE_OSPRO}/api/version-gantt/edit/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setDataGantt(response);
+      if (response.data.data.hierarchy_ftth_id) {
+        setIsHierarchy(true);
+      }
+      setIsReadyGantt(true);
+    } catch (error) {
+      console.error("Failed to get gantt data:", error);
+      setIsReadyGantt(true);
+    }
+  };
+
+  const getGanttParents = async () => {
+    setIsReadyGanttParents(false);
+    const url = `${BASE_OSPRO}/api/hierarchy-ftths/tree-gantt/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setDataGanttParents(response);
+      setIsReadyGanttParents(true);
+    } catch (error) {
+      console.error("Failed to get gantt data:", error);
+      setIsReadyGanttParents(true);
+    }
+  };
+
+  const getAssignedHR = async () => {
+    const url = `${BASE_OSPRO}/api/project/manpower/assigned/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      const today = moment();
+      const assignedList = response.data.data
+        .filter((item) =>
+          today.isBetween(moment(item.start_date), moment(item.end_date))
+        )
+        .map((item) => item.user_id);
+      setAssignedHrCount(assignedList.length);
+      setAssignedHr(assignedList);
+    } catch (error) {
+      console.error("Failed to get assigned HR:", error);
+    }
+  };
+
+  const getActualHR = async () => {
+    const dateStart = moment().startOf("day").toDate();
+    const dateEnd = moment().endOf("day").toDate();
+    try {
+      const payload = {
+        paging: { start: 0, length: -1 },
+        columns: [
+          {
+            name: "name",
+            logic_operator: "ilike",
+            value: "",
+            table_name: "m_users",
+          },
+          {
+            name: "clock_in",
+            logic_operator: "range",
+            value: dateStart,
+            value1: dateEnd,
+          },
+        ],
+        joins: [
+          {
+            name: "m_users",
+            column_join: "user_id",
+            column_results: ["name", "ktp_number"],
+          },
+        ],
+        orders: { columns: ["id"], ascending: false },
+      };
+      const url = `${BASE_OSPRO}/api/presence/search`;
+      const response = await axios.post(url, payload, HEADER);
+      const actualHrCount = response.data.data.filter((item) =>
+        assignedHr.includes(item.user_id)
+      ).length;
+      setActualHrCount(actualHrCount);
+    } catch (error) {
+      console.error("Failed to get actual HR:", error);
+    }
+  };
+
+  const getProjectDetail = async () => {
+    setIsReadyProjectDetail(false);
+    let URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
+    if (GANTT_ID) {
+      URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}/${GANTT_ID}`;
+    }
+    if (SCURVE) {
+      URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}/${GANTT_ID}/${SCURVE}`;
+    }
+    const result = await axios
+      .get(URL, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getProjectDetail", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyProjectDetail(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get project detail failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyProjectDetail(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      console.log(result.data.data);
+      // setComments(result.data.data);
+      setProjectName(result.data.data.nama ? result.data.data.nama : "-");
+      setProjectManagerName(
+        result.data.data.projectManager ? result.data.data.projectManager : "-"
+      );
+      setCustomerName(
+        result.data.data.company ? result.data.data.company : "-"
+      );
+      setPlannedStart(
+        SCURVE
+          ? result.data.data.mulai_proyek
+            ? result.data.data.mulai_proyek
+            : null
+          : result.data.data.header?.planned_start
+            ? result.data.data.header?.planned_start
+            : null
+      );
+      setPlannedFinish(
+        SCURVE
+          ? result.data.data.akhir_proyek
+            ? result.data.data.akhir_proyek
+            : null
+          : result.data.data.header?.planned_end
+            ? result.data.data.header?.planned_end
+            : null
+      );
+      setActualStart(
+        result.data.data.header?.start_date
+          ? result.data.data.header.start_date
+          : null
+      );
+      setEstimatedFinish(
+        result.data.data.header?.end_date
+          ? result.data.data.header.end_date
+          : null
+      );
+      setPlannedCost(
+        result.data.data.rencana_biaya ? result.data.data.rencana_biaya : null
+      );
+      setIsReadyProjectDetail(true);
+      setCalculationStatus(
+        result.data.data.calculation_status
+          ? result.data.data.calculation_status
+          : false
+      );
+
+      if (
+        result.data.data.kode_sortname &&
+        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);
+        }
+      }
+    }
+  };
+
+  const getSCurve = async () => {
+    setIsReadySCurve(false);
+    let URL = `${BASE_OSPRO}/api/project/get-s-curve`;
+    if (SCURVE && SCURVE == "1" && isHierarchy) {
+      URL = `${BASE_OSPRO}/api/project/calculate-s-curve`;
+    }
+
+    const payload = {
+      project_id: PROJECT_ID.toString(),
+      gantt_id: GANTT_ID.toString(),
+      period: "week",
+      // "end_date": moment(new Date()).format('YYYY-MM-DD')
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadySCurve(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get S Curve failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadySCurve(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      let selisihProgress = 0;
+      let planningProgress = 0;
+      let actualProgress = 0;
+      let statusHealthBySchedule = "on-schedule";
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.budget_control
+      ) {
+        setCurrentBudget(
+          result.data.data[0].data.budget_control.current_budget?.toString()
+        );
+        setActualToDate(
+          result.data.data[0].data.budget_control.acwp?.toString()
+        );
+        setBcwp(result.data.data[0].data.budget_control.bcwp?.toString());
+        // setRemToComplete(result.data.data[0].data.budget_control.rem_to_complete?.toString())
+        setAddCostToComplete(
+          result.data.data[0].data.budget_control.add_cost_to_complete?.toString()
+        );
+        setEstAtCompletion(
+          result.data.data[0].data.budget_control.estimated_at_completion?.toString()
+        );
+        setCostDeviation(
+          result.data.data[0].data.budget_control.cost_deviation?.toString()
+        );
+      }
+      let now = new Date().toISOString().slice(0, 10);
+      let dates = result.data.data[0].data?.date;
+      let n = dates.findIndex(
+        (element) => new Date(now) < new Date(element[0])
+      );
+      if (n < 0) {
+        n = dates.length - 1;
+      }
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.percentagePlan &&
+        result.data.data[0].data?.percentagePlan.length > 0
+      ) {
+        if (SCURVE && SCURVE == "1") {
+          planningProgress =
+            result.data.data[0].data?.percentagePlan[
+              result.data.data[0].data?.percentagePlan.length - 1
+            ];
+        } else {
+          planningProgress = result.data.data[0].data?.percentagePlan[n];
+        }
+        setPlanningProgress(planningProgress);
+      }
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.percentageReal &&
+        result.data.data[0].data?.percentageReal.length > 0
+      ) {
+        actualProgress =
+          result.data.data[0].data?.percentageReal[
+            result.data.data[0].data?.percentageReal.length - 1
+          ];
+        setActualProgress(actualProgress);
+      }
+
+      selisihProgress = planningProgress - actualProgress;
+      if (selisihProgress > 0 && selisihProgress <= 5) {
+        statusHealthBySchedule = "warning";
+      } else if (selisihProgress > 5) {
+        statusHealthBySchedule = "danger";
+      }
+
+      setHealthBySchedule(statusHealthBySchedule);
+      setIsReadySCurve(true);
+    }
+  };
+
+  const getOverdueActivities = async () => {
+    setIsReadyOverdueActivities(false);
+    const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
+    const payload = {
+      id: PROJECT_ID.toString(),
+      gantt: GANTT_ID.toString(),
+      scurve: SCURVE ? SCURVE.toString() : null,
+      till_date: moment(new Date()).format("YYYY-MM-DD"),
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getOverdueActivities", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyOverdueActivities(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get Overdue Activities failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyOverdueActivities(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      if (result.data.data.overdueActivities) {
+        setOverdueActivities(result.data.data.overdueActivities);
+      }
+      setHealthByBudget(result.data.data.budget_health);
+      setIsReadyOverdueActivities(true);
+    }
+  };
+
+  const getIntegrationInvoice = async (kode_sortname, id, gantt_id = null) => {
+    setIsReadyIntegrationInvoice(false);
+    const URL = `${BASE_OSPRO}/api/project/get-integration-invoice`;
+    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)
+      .catch((err) => err.response);
+    console.log("getIntegrationInvoice", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyIntegrationInvoice(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get integration invoice failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyIntegrationInvoice(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      if (result.data.data.data) {
+        let total_invoice = result.data.data.data.total_invoice_amount;
+        let cash_in = result.data.data.data.total_invoice_paid_amount;
+        let total_cost = result.data.data.data.total_cost;
+        let outstanding_balance = total_invoice - cash_in;
+        setTotalInvoice(total_invoice ? total_invoice.toString() : null);
+        setCashIn(cash_in ? cash_in.toString() : null);
+        total_cost = total_cost.toString().split(".")[0];
+        setTotalCost(total_cost ? total_cost.toString() : null);
+        setOutstandingBalance(
+          outstanding_balance ? outstanding_balance.toString() : null
+        );
+      }
+      setIsReadyIntegrationInvoice(true);
+    }
+  };
+
+  const getReportDistribution = async () => {
+    setIsReadyReportDistribution(false);
+    const URL = `${BASE_OSPRO}/api/project/get-report-distribution`;
+    const payload = {
+      project_id: PROJECT_ID,
+      start_date: moment()
+        .startOf("month")
+        .subtract(1, "years")
+        .format("YYYY-MM-DD"),
+      end_date: moment(new Date()).subtract(1, "years").format("YYYY-MM-DD"),
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getReportDistribution", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyReportDistribution(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get report distribution failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyReportDistribution(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      setReportDistribution(result.data.data);
+      setIsReadyReportDistribution(true);
+    }
+  };
+
+  const getComments = async () => {
+    setIsReadyComments(false);
+    const URL = `${BASE_OSPRO}/api/project-comment/search`;
+    const payload = {
+      columns: [
+        {
+          name: "project_id",
+          logic_operator: "=",
+          value: PROJECT_ID.toString(),
+          operator: "AND",
+        },
+        {
+          name: "gantt_id",
+          logic_operator: "=",
+          value: GANTT_ID.toString(),
+          operator: "AND",
+        },
+      ],
+      joins: [
+        {
+          name: "m_users",
+          column_join: "sender_id",
+          column_results: ["name", "username"],
+        },
+      ],
+      orders: { columns: ["created_at"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getComments", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyComments(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get comments failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyComments(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      setComments(result.data.data);
+      setIsReadyComments(true);
+    }
+  };
+
+  const handleSendComment = async () => {
+    // console.log('handleSendComment', comment);
+    setIsSendingComment(true);
+    if (comment === "") {
+      NotificationManager.error(
+        "Please leave a comment before you send it.",
+        "Failed"
+      );
+      setIsSendingComment(false);
+      return;
+    }
+    const URL = `${BASE_OSPRO}/api/project-comment/add`;
+    const payload = {
+      sender_id: localStorage.getItem("user_id"),
+      project_id: PROJECT_ID,
+      gantt_id: GANTT_ID,
+      comment: comment,
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsSendingComment(false);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Post comment failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsSendingComment(false);
+      return;
+    } else if (result.status === 200) {
+      NotificationManager.success(`Post comment success`, "Success");
+      resetInputComment();
+      getComments();
+    }
+  };
+
+  const resetInputComment = () => {
+    setComment("");
+    setIsSendingComment(false);
+  };
+
+  const initMap = () => {
+    let mymap = L.map("map-area", {
+      center: center,
+      zoom: 13,
+    });
+
+    setMymap(mymap);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(mymap);
+  };
+
+  useEffect(() => {
+    if (mymap) {
+      if (reportDistribution.length > 0) {
+        reportDistribution.map((item, idx) => {
+          L.marker([item.lat, item.lon])
+            .addTo(mymap)
+            .bindPopup(PopupContent(item));
+        });
+      }
+    }
+  }, [mymap, reportDistribution]);
+
+  useEffect(() => {
+    // Add event listener for receiving messages from the iframe
+    window.addEventListener("message", handleIframeMessage);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener("message", handleIframeMessage);
+    };
+  }, []);
+
+  const handleIframeMessage = (event) => {
+    if (event.data && event.data.action === "getUrl") {
+      const childUrl = window.location.href;
+
+      // Send the URL back to the iframe
+      event.source.postMessage(
+        { action: "sendUrl", url: childUrl },
+        event.origin
+      );
+    }
+  };
+
+  const RenderGantt = useMemo(
+    () => (
+      <iframe
+        id="frame-gantt"
+        src={URL_GANTT}
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+        scrolling="no"
+        frameBorder="0"
+        allow="fullscreen"
+      ></iframe>
+    ),
+    [activeTabIdx]
+  );
+
+  const RenderComments = useMemo(() => {
+    return (
+      <>
+        <div
+          style={{ padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2 }}
+        >
+          <TextArea
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            rows={3}
+            placeholder="Write comment here"
+            disabled={isSendingComment}
+          />
+          <div style={{ float: "right", marginTop: -40, marginRight: 10 }}>
+            <Button
+              title="Send"
+              type="primary"
+              shape="circle"
+              icon={<SendOutlined />}
+              size={20}
+              onClick={handleSendComment}
+              disabled={isSendingComment}
+            />
+          </div>
+        </div>
+        <div>
+          {!isReadyComments && <ListLoader />}
+          {isReadyComments && comments && comments.length < 1 && (
+            <div
+              style={{
+                flex: 1,
+                textAlign: "center",
+                color: "#E80053",
+                marginTop: 50,
+                marginBottom: 50,
+              }}
+            >
+              No comments found.
+            </div>
+          )}
+          {comments &&
+            comments.length > 0 &&
+            comments.map((item, idx) => (
+              <Comment
+                key={idx}
+                name={item.join_first_name}
+                comment={item.comment}
+                created_at={item.created_at}
+              />
+            ))}
+        </div>
+      </>
+    );
+  }, [comment, comments, isSendingComment, isReadyComments]);
+
+  const RenderBehindTasks = useMemo(() => {
+    return (
+      <div>
+        {!isReadyOverdueActivities && <ListLoader />}
+        {isReadyOverdueActivities &&
+          overdueActivities &&
+          overdueActivities.length < 1 && (
+            <div
+              style={{
+                flex: 1,
+                textAlign: "center",
+                color: "#E80053",
+                marginTop: 50,
+                marginBottom: 50,
+              }}
+            >
+              No overdue activity found.
+            </div>
+          )}
+        {isReadyOverdueActivities &&
+          overdueActivities &&
+          overdueActivities.length > 0 &&
+          overdueActivities.map((item, idx) => {
+            let end_date;
+            let planned_end;
+            let diffDays = 0;
+            let message = "";
+            if (item.end_date && item.end_date !== null) {
+              end_date = moment(item.end_date);
+              planned_end = moment(item.planned_end);
+              diffDays = end_date.diff(planned_end, "days");
+              if (isNaN(diffDays)) {
+                return null;
+              } else {
+                if (diffDays > 0) {
+                  message = `Overdue by ${diffDays + 1} days`;
+                } else {
+                  return null;
+                }
+              }
+            }
+            return (
+              <BehindTaskItem key={idx} name={item.name} message={message} />
+            );
+          })}
+      </div>
+    );
+  }, [overdueActivities, isReadyOverdueActivities]);
+
+  return (
+    <div style={{ marginLeft: -25, marginRight: -25 }}>
+      <NotificationContainer />
+      <Row>
+        <Col span={18}>
+          <Row>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Project
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail &&
+                      isReadyGanttParents &&
+                      isReadyGantt ? (
+                        (() => {
+                          let parentNames = "";
+                          for (
+                            let i = dataGanttParents.data.data.length - 1;
+                            i >= 0;
+                            i--
+                          ) {
+                            parentNames += " - ";
+                            parentNames += dataGanttParents.data.data[i].name;
+                          }
+                          return SCURVE && SCURVE == "1"
+                            ? projectName
+                              ? calculationStatus
+                                ? projectName + " - S-Curve Ready"
+                                : projectName + " - S-Curve Loading"
+                              : null
+                            : projectName +
+                                parentNames +
+                                " - " +
+                                dataGantt.data.data.name_version;
+                        })()
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i
+                      className="fa fa-check-square"
+                      style={{ fontSize: 28 }}
+                    ></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Project Manager
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail ? (
+                        projectManagerName
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i className="fa fa-user" style={{ fontSize: 28 }}></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Customer
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail ? (
+                        customerName
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i className="fa fa-home" style={{ fontSize: 28 }}></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Schedule
+                    </div>
+                  </div>
+                  <div>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Planned Start
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedStart ? (
+                            moment(plannedStart).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Actual Start
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          actualStart ? (
+                            moment(actualStart).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Planned Finish
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedFinish ? (
+                            moment(plannedFinish).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Estimated Finish
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          estimatedFinish ? (
+                            moment(estimatedFinish).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={16}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Financials
+                    </div>
+                  </div>
+                  <div>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Current Budget
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedCost ? (
+                            renderFormatRupiah(plannedCost, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Add Cost to Complete
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyGantt ? (
+                          dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              dataGantt.data.data.cost_to_complete.toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Actual to Date
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyIntegrationInvoice ? (
+                          totalCost ? (
+                            renderFormatRupiah(totalCost, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Est. at Completion
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyGantt ? (
+                          dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              (parseInt(plannedCost) + dataGantt.data.data.cost_to_complete).toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            renderFormatRupiah(
+                              parseInt(plannedCost).toString(),
+                              "Rp."
+                            )
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        BCWP (cost vs perform)
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadySCurve ? (
+                          bcwp ? (
+                            renderFormatRupiah(bcwp, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Cost Deviation
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyGantt ? (
+                           dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              (dataGantt.data.data.cost_to_complete).toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "Rp. 0"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Rem. to Complete
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyIntegrationInvoice ? (
+                          remToComplete ? (
+                            renderFormatRupiah(remToComplete, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Committed Cost
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyGantt ? (
+                          dataGantt.data.data.committed_cost ? (
+                            renderFormatRupiah(
+                              dataGantt.data.data.committed_cost.toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+          <div
+            style={{
+              margin: 2,
+              border: "solid",
+              borderWidth: 1,
+              borderColor: "#DDDDDD",
+            }}
+          >
+            <Row>
+              <Col span={12}>
+                <div
+                  style={{
+                    backgroundColor: activeTabIdx === 0 ? "#FFFFFF" : "#D9D9D9",
+                    padding: 8,
+                    fontWeight: "bold",
+                    cursor: "pointer",
+                    color: activeTabIdx === 0 ? "#000000" : "#4E4C4C",
+                  }}
+                  onClick={() => setActiveTabIdx(0)}
+                >
+                  S Curve
+                </div>
+              </Col>
+              <Col span={12}>
+                <div
+                  style={{
+                    backgroundColor: activeTabIdx === 1 ? "#FFFFFF" : "#D9D9D9",
+                    padding: 8,
+                    fontWeight: "bold",
+                    cursor: "pointer",
+                    color: activeTabIdx === 1 ? "#000000" : "#4E4C4C",
+                  }}
+                  onClick={() => setActiveTabIdx(1)}
+                >
+                  Maps
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div style={{ maxHeight: "55vh" }}>
+                  {/* { activeTabIdx === 0 && <div style={{height: '52vh', width: '100%'}}>{RenderGantt}</div> }
+                                    { activeTabIdx === 1  && <div id="map-area" style={{height: '52vh'}} ref={mapRef}></div> } */}
+                  <div
+                    style={{
+                      height: "56vh",
+                      width: "100%",
+                      display: activeTabIdx === 0 ? "block" : "none",
+                    }}
+                  >
+                    {RenderGantt}
+                  </div>
+                  {activeTabIdx === 1 && (
+                    <div
+                      id="map-area"
+                      style={{ height: "56vh" }}
+                      ref={mapRef}
+                    ></div>
+                  )}
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+        <Col span={6}>
+          <div style={{ margin: 2 }}>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    backgroundColor: "#222222",
+                    padding: 10,
+                    marginBottom: 5,
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#FFFFFF",
+                      textAlign: "center",
+                      marginBottom: 10,
+                      fontWeight: "bold",
+                    }}
+                  >
+                    Progress
+                  </div>
+                  {isReadySCurve ? (
+                    <ProgressPlanningBar
+                      progress={planningProgress > 100 ? 100 : planningProgress}
+                    />
+                  ) : (
+                    <SingleTextLoader width={"100%"} height={30} />
+                  )}
+                  <div style={{ marginTop: 10, marginBottom: 10 }}></div>
+                  {isReadySCurve ? (
+                    <ProgressActualBar
+                      progress={
+                        planningProgress > 100
+                          ? parseFloat(
+                              (actualProgress / planningProgress) * 100
+                            ).toFixed(2)
+                          : actualProgress
+                      }
+                    />
+                  ) : (
+                    <SingleTextLoader width={"100%"} height={30} />
+                  )}
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={12}>
+                <div
+                  style={{
+                    background: "#FFF",
+                    padding: 10,
+                    border: "1px solid #DDD",
+                    marginRight: 2,
+                  }}
+                >
+                  {isReadyOverdueActivities && (
+                    <HealthByBudget status={healthByBudget} />
+                  )}
+                  {isReadySCurve && (
+                    <HealthBySchedule status={healthBySchedule} />
+                  )}
+                </div>
+              </Col>
+              <Col span={12}>
+                <Row style={{ height: "50%" }}>
+                  <Col span={24}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Manpower : {manPower}
+                    </div>
+                  </Col>
+                </Row>
+                <Row style={{ height: "50%" }}>
+                  <Col span={12}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Assigned : {assignedHrCount}
+                    </div>
+                  </Col>
+                  <Col span={12}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Actual : {actualHrCount}
+                    </div>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    backgroundColor: "#FFFFFF",
+                    padding: 10,
+                    border: "solid",
+                    borderWidth: 1,
+                    borderColor: "#DDDDDD",
+                    marginBottom: 5,
+                    marginRight: 2,
+                  }}
+                >
+                  {/* <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
+                                <div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
+                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>On Budget</div>
+                                </div> */}
+                  <Row>
+                    <Col span={12}>Total Invoice</Col>
+                    <Col span={12} style={{ textAlign: "right" }}>
+                      {isReadyIntegrationInvoice ? (
+                        totalInvoice ? (
+                          renderFormatRupiah(totalInvoice, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>Cash In</Col>
+                    <Col span={12} style={{ textAlign: "right" }}>
+                      {isReadyIntegrationInvoice ? (
+                        cashIn ? (
+                          renderFormatRupiah(cashIn, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={24}>
+                      <hr style={{ margin: 2 }} />
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>Outstanding Balance</Col>
+                    <Col
+                      span={12}
+                      style={{
+                        textAlign: "right",
+                        color: "#E80053",
+                        fontWeight: 500,
+                      }}
+                    >
+                      {isReadyIntegrationInvoice ? (
+                        outstandingBalance ? (
+                          renderFormatRupiah(outstandingBalance, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    border: "solid",
+                    borderWidth: 1,
+                    borderColor: "#DDDDDD",
+                  }}
+                >
+                  {/* <div style={{display: 'flex', alignItems: 'center'}}>
+                                    <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 0 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 0 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2}} onClick={() => setActiveTabCommentIdx(0)}>Behind Task</div>
+                                    <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 1 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 1 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2, fontSize: 12}} onClick={() => setActiveTabCommentIdx(1)}>Comment From Customer</div>
+                                </div> */}
+                  <Row style={{ alignItems: "center", marginBottom: 5 }}>
+                    <Col span={12}>
+                      <div
+                        style={{
+                          backgroundColor:
+                            activeTabCommentIdx === 0 ? "#FFFFFF" : "#D9D9D9",
+                          fontWeight: 500,
+                          textAlign: "center",
+                          fontSize: 12,
+                          padding: 2,
+                          cursor: "pointer",
+                          color:
+                            activeTabCommentIdx === 0 ? "#000000" : "#4E4C4C",
+                        }}
+                        onClick={() => setActiveTabCommentIdx(0)}
+                      >
+                        Behind Task
+                      </div>
+                    </Col>
+                    <Col span={12}>
+                      <div
+                        style={{
+                          backgroundColor:
+                            activeTabCommentIdx === 1 ? "#FFFFFF" : "#D9D9D9",
+                          fontWeight: 500,
+                          textAlign: "center",
+                          fontSize: 12,
+                          padding: 2,
+                          cursor: "pointer",
+                          color:
+                            activeTabCommentIdx === 1 ? "#000000" : "#4E4C4C",
+                        }}
+                        onClick={() => setActiveTabCommentIdx(1)}
+                      >
+                        Comment From Customer
+                      </div>
+                    </Col>
+                  </Row>
+                  <div
+                    className="custom-scroll"
+                    style={{ maxHeight: "37vh", overflow: "auto" }}
+                  >
+                    {activeTabCommentIdx === 0 && RenderBehindTasks}
+                    {activeTabCommentIdx === 1 && RenderComments}
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default DashboardProject;
diff --git a/src/views/Dashboard/DashboardProject.js.save.1 b/src/views/Dashboard/DashboardProject.js.save.1
new file mode 100644
index 0000000..6db17c7
--- /dev/null
+++ b/src/views/Dashboard/DashboardProject.js.save.1
@@ -0,0 +1,1698 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import axios from "axios";
+import { Row, Col, Button, Input } from "antd";
+import {
+  CardDashboard,
+  CardExpenditure,
+  CardScheduleHealthPerDivision,
+} from "../../components/CardDashboard/CardDashboard";
+import L from "leaflet";
+import { useParams } from "react-router-dom";
+import "../../assets/css/customscroll.css";
+import moment from "moment";
+import { renderFormatRupiah } from "../../const/CustomFunc";
+import { BASE_OSPRO } from "../../const/ApiConst";
+import { SendOutlined } from "@ant-design/icons";
+import {
+  NotificationContainer,
+  NotificationManager,
+} from "react-notifications";
+import ContentLoader from "react-content-loader";
+import {
+  BehindTaskItem,
+  Comment,
+  HealthByBudget,
+  HealthBySchedule,
+  ListLoader,
+  PopupContent,
+  ProgressActualBar,
+  ProgressPlanningBar,
+  SingleTextLoader,
+} from "./Components";
+import { Fab, Action } from "react-tiny-fab";
+import "react-tiny-fab/dist/styles.css";
+import { useHistory } from "react-router-dom";
+
+const { TextArea } = Input;
+
+const styles = {
+  cardContainer: {
+    backgroundColor: "#F8F8F8",
+    margin: 2,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 10,
+  },
+  cardHeaderContainer: {
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: 10,
+  },
+  cardChartContainer: {
+    position: "relative",
+    height: "21vh",
+    margin: "auto",
+    paddingBottom: 10,
+    justifyContent: "center",
+  },
+  cardTitle: { color: "#444444", fontSize: 16, fontWeight: "bold" },
+  cardSubtitle: { color: "#888888", fontSize: 12 },
+};
+
+const center = {
+  lat: -6.2,
+  lng: 106.816666,
+};
+
+const DashboardProject = () => {
+  const token = localStorage.getItem("token");
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  };
+  const { PROJECT_ID, GANTT_ID, SCURVE } = useParams();
+  const URL_GANTT = `17/04/2024https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
+  const mapRef = useRef();
+  const [projectName, setProjectName] = useState("");
+  const [projectManagerName, setProjectManagerName] = useState("");
+  const [customerName, setCustomerName] = useState("");
+  const [plannedStart, setPlannedStart] = useState(null);
+  const [plannedFinish, setPlannedFinish] = useState(null);
+  const [plannedCost, setPlannedCost] = useState(null);
+  const [totalCost, setTotalCost] = useState(null);
+  const [actualStart, setActualStart] = useState(null);
+  const [actualFinish, setActualFinish] = useState(null);
+  const [estimatedFinish, setEstimatedFinish] = useState(null);
+  const [mymap, setMymap] = useState(null);
+  const [activeTabIdx, setActiveTabIdx] = useState(0);
+  const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0);
+  const [planningProgress, setPlanningProgress] = useState(0);
+  const [actualProgress, setActualProgress] = useState(0);
+  const [currentBudget, setCurrentBudget] = useState(null);
+  const [addCostToComplete, setAddCostToComplete] = useState(null);
+  const [actualToDate, setActualToDate] = useState(null);
+  const [estAtCompletion, setEstAtCompletion] = useState(null);
+  const [bcwp, setBcwp] = useState(null);
+  const [costDeviation, setCostDeviation] = useState(null);
+  const [remToComplete, setRemToComplete] = useState(0);
+  const [totalInvoice, setTotalInvoice] = useState(null);
+  const [cashIn, setCashIn] = useState(null);
+  const [outstandingBalance, setOutstandingBalance] = useState(null);
+  const [comment, setComment] = useState("");
+  const [comments, setComments] = useState([]);
+  const [isReadyComments, setIsReadyComments] = useState(false);
+  const [isSendingComment, setIsSendingComment] = useState(false);
+  const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false);
+  const [isReadySCurve, setIsReadySCurve] = useState(false);
+  const [isReadyGantt, setIsReadyGantt] = useState(false);
+  const [isReadyOverdueActivities, setIsReadyOverdueActivities] =
+    useState(false);
+  const [isReadyIntegrationInvoice, setIsReadyIntegrationInvoice] =
+    useState(false);
+  const [isReadyReportDistribution, setIsReadyReportDistribution] =
+    useState(false);
+  const [overdueActivities, setOverdueActivities] = useState([]);
+  const [healthBySchedule, setHealthBySchedule] = useState("-");
+  const [healthByBudget, setHealthByBudget] = useState("-");
+  const [reportDistribution, setReportDistribution] = useState([]);
+  const [manPower, setManPower] = useState(0);
+  const [assignedHr, setAssignedHr] = useState([]);
+  const [assignedHrCount, setAssignedHrCount] = useState(0);
+  const [actualHrCount, setActualHrCount] = useState(0);
+  const [dataGantt, setDataGantt] = useState({});
+  const [dataGanttParents, setDataGanttParents] = useState({});
+  const [isReadyGanttParents, setIsReadyGanttParents] = useState(false);
+  const [calculationStatus, setCalculationStatus] = useState(false);
+  const [isHierarchy, setIsHierarchy] = useState(false);
+  let history = useHistory();
+
+  useEffect(() => {
+    getProjectDetail();
+    getSCurve();
+    getOverdueActivities();
+    getReportDistribution();
+    getComments();
+    getGantt();
+    getGanttParents();
+    return () => {
+      console.log("unmount RenderMap");
+    };
+  }, []);
+
+  useEffect(() => {
+    if (activeTabIdx === 1) {
+      initMap();
+    }
+  }, [activeTabIdx]);
+
+  useEffect(() => {
+    async function fetchData() {
+      await Promise.all([
+        getManpower(),
+        getAssignedHR(),
+        ...(assignedHr.length > 0 ? [getActualHR()] : []),
+      ]);
+    }
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    let deviation = 0;
+    if (plannedCost && totalCost) {
+      deviation = plannedCost - totalCost;
+    }
+    setRemToComplete(deviation.toString());
+  }, [plannedCost, totalCost]);
+
+  const handleRedirect = () => {
+    history.push("/projects/" + GANTT_ID + "/" + PROJECT_ID + "/gantt");
+  };
+
+  const getManpower = async () => {
+    const url = `${BASE_OSPRO}/api/project/manpower/${PROJECT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setManPower(response.data.totalRecord);
+    } catch (error) {
+      console.error("Failed to get manpower:", error);
+    }
+  };
+
+  const getGantt = async () => {
+    setIsReadyGantt(false);
+    const url = `${BASE_OSPRO}/api/version-gantt/edit/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setDataGantt(response);
+      if (response.data.data.hierarchy_ftth_id) {
+        setIsHierarchy(true);
+      }
+      setIsReadyGantt(true);
+    } catch (error) {
+      console.error("Failed to get gantt data:", error);
+      setIsReadyGantt(true);
+    }
+  };
+
+  const getGanttParents = async () => {
+    setIsReadyGanttParents(false);
+    const url = `${BASE_OSPRO}/api/hierarchy-ftths/tree-gantt/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      setDataGanttParents(response);
+      setIsReadyGanttParents(true);
+    } catch (error) {
+      console.error("Failed to get gantt data:", error);
+      setIsReadyGanttParents(true);
+    }
+  };
+
+  const getAssignedHR = async () => {
+    const url = `${BASE_OSPRO}/api/project/manpower/assigned/${GANTT_ID}`;
+    try {
+      const response = await axios.get(url, HEADER);
+      const today = moment();
+      const assignedList = response.data.data
+        .filter((item) =>
+          today.isBetween(moment(item.start_date), moment(item.end_date))
+        )
+        .map((item) => item.user_id);
+      setAssignedHrCount(assignedList.length);
+      setAssignedHr(assignedList);
+    } catch (error) {
+      console.error("Failed to get assigned HR:", error);
+    }
+  };
+
+  const getActualHR = async () => {
+    const dateStart = moment().startOf("day").toDate();
+    const dateEnd = moment().endOf("day").toDate();
+    try {
+      const payload = {
+        paging: { start: 0, length: -1 },
+        columns: [
+          {
+            name: "name",
+            logic_operator: "ilike",
+            value: "",
+            table_name: "m_users",
+          },
+          {
+            name: "clock_in",
+            logic_operator: "range",
+            value: dateStart,
+            value1: dateEnd,
+          },
+        ],
+        joins: [
+          {
+            name: "m_users",
+            column_join: "user_id",
+            column_results: ["name", "ktp_number"],
+          },
+        ],
+        orders: { columns: ["id"], ascending: false },
+      };
+      const url = `${BASE_OSPRO}/api/presence/search`;
+      const response = await axios.post(url, payload, HEADER);
+      const actualHrCount = response.data.data.filter((item) =>
+        assignedHr.includes(item.user_id)
+      ).length;
+      setActualHrCount(actualHrCount);
+    } catch (error) {
+      console.error("Failed to get actual HR:", error);
+    }
+  };
+
+  const getProjectDetail = async () => {
+    setIsReadyProjectDetail(false);
+    let URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
+    if (GANTT_ID) {
+      URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}/${GANTT_ID}`;
+    }
+    if (SCURVE) {
+      URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}/${GANTT_ID}/${SCURVE}`;
+    }
+    const result = await axios
+      .get(URL, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getProjectDetail", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyProjectDetail(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get project detail failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyProjectDetail(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      console.log(result.data.data);
+      // setComments(result.data.data);
+      setProjectName(result.data.data.nama ? result.data.data.nama : "-");
+      setProjectManagerName(
+        result.data.data.projectManager ? result.data.data.projectManager : "-"
+      );
+      setCustomerName(
+        result.data.data.company ? result.data.data.company : "-"
+      );
+      setPlannedStart(
+        SCURVE
+          ? result.data.data.mulai_proyek
+            ? result.data.data.mulai_proyek
+            : null
+          : result.data.data.header?.planned_start
+            ? result.data.data.header?.planned_start
+            : null
+      );
+      setPlannedFinish(
+        SCURVE
+          ? result.data.data.akhir_proyek
+            ? result.data.data.akhir_proyek
+            : null
+          : result.data.data.header?.planned_end
+            ? result.data.data.header?.planned_end
+            : null
+      );
+      setActualStart(
+        result.data.data.header?.start_date
+          ? result.data.data.header.start_date
+          : null
+      );
+      setEstimatedFinish(
+        result.data.data.header?.end_date
+          ? result.data.data.header.end_date
+          : null
+      );
+      setPlannedCost(
+        result.data.data.rencana_biaya ? result.data.data.rencana_biaya : null
+      );
+      setIsReadyProjectDetail(true);
+      setCalculationStatus(
+        result.data.data.calculation_status
+          ? result.data.data.calculation_status
+          : false
+      );
+
+      if (
+        result.data.data.kode_sortname &&
+        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);
+        }
+      }
+    }
+  };
+
+  const getSCurve = async () => {
+    setIsReadySCurve(false);
+    let URL = `${BASE_OSPRO}/api/project/get-s-curve`;
+    if (SCURVE && SCURVE == "1" && isHierarchy) {
+      URL = `${BASE_OSPRO}/api/project/calculate-s-curve`;
+    }
+
+    const payload = {
+      project_id: PROJECT_ID.toString(),
+      gantt_id: GANTT_ID.toString(),
+      period: "week",
+      // "end_date": moment(new Date()).format('YYYY-MM-DD')
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadySCurve(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get S Curve failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadySCurve(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      let selisihProgress = 0;
+      let planningProgress = 0;
+      let actualProgress = 0;
+      let statusHealthBySchedule = "on-schedule";
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.budget_control
+      ) {
+        setCurrentBudget(
+          result.data.data[0].data.budget_control.current_budget?.toString()
+        );
+        setActualToDate(
+          result.data.data[0].data.budget_control.acwp?.toString()
+        );
+        setBcwp(result.data.data[0].data.budget_control.bcwp?.toString());
+        // setRemToComplete(result.data.data[0].data.budget_control.rem_to_complete?.toString())
+        setAddCostToComplete(
+          result.data.data[0].data.budget_control.add_cost_to_complete?.toString()
+        );
+        setEstAtCompletion(
+          result.data.data[0].data.budget_control.estimated_at_completion?.toString()
+        );
+        setCostDeviation(
+          result.data.data[0].data.budget_control.cost_deviation?.toString()
+        );
+      }
+      let now = new Date().toISOString().slice(0, 10);
+      let dates = result.data.data[0].data?.date;
+      let n = dates.findIndex(
+        (element) => new Date(now) < new Date(element[0])
+      );
+      if (n < 0) {
+        n = dates.length - 1;
+      }
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.percentagePlan &&
+        result.data.data[0].data?.percentagePlan.length > 0
+      ) {
+        if (SCURVE && SCURVE == "1") {
+          planningProgress =
+            result.data.data[0].data?.percentagePlan[
+              result.data.data[0].data?.percentagePlan.length - 1
+            ];
+        } else {
+          planningProgress = result.data.data[0].data?.percentagePlan[n];
+        }
+        setPlanningProgress(planningProgress);
+      }
+      if (
+        result.data.data.length > 0 &&
+        result.data.data[0].data?.percentageReal &&
+        result.data.data[0].data?.percentageReal.length > 0
+      ) {
+        actualProgress =
+          result.data.data[0].data?.percentageReal[
+            result.data.data[0].data?.percentageReal.length - 1
+          ];
+        setActualProgress(actualProgress);
+      }
+
+      selisihProgress = planningProgress - actualProgress;
+      if (selisihProgress > 0 && selisihProgress <= 5) {
+        statusHealthBySchedule = "warning";
+      } else if (selisihProgress > 5) {
+        statusHealthBySchedule = "danger";
+      }
+
+      setHealthBySchedule(statusHealthBySchedule);
+      setIsReadySCurve(true);
+    }
+  };
+
+  const getOverdueActivities = async () => {
+    setIsReadyOverdueActivities(false);
+    const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
+    const payload = {
+      id: PROJECT_ID.toString(),
+      gantt: GANTT_ID.toString(),
+      scurve: SCURVE ? SCURVE.toString() : null,
+      till_date: moment(new Date()).format("YYYY-MM-DD"),
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getOverdueActivities", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyOverdueActivities(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get Overdue Activities failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyOverdueActivities(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      if (result.data.data.overdueActivities) {
+        setOverdueActivities(result.data.data.overdueActivities);
+      }
+      setHealthByBudget(result.data.data.budget_health);
+      setIsReadyOverdueActivities(true);
+    }
+  };
+
+  const getIntegrationInvoice = async (kode_sortname, id, gantt_id = null) => {
+    setIsReadyIntegrationInvoice(false);
+    const URL = `${BASE_OSPRO}/api/project/get-integration-invoice`;
+    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)
+      .catch((err) => err.response);
+    console.log("getIntegrationInvoice", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyIntegrationInvoice(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get integration invoice failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyIntegrationInvoice(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      if (result.data.data.data) {
+        let total_invoice = result.data.data.data.total_invoice_amount;
+        let cash_in = result.data.data.data.total_invoice_paid_amount;
+        let total_cost = result.data.data.data.total_cost;
+        let outstanding_balance = total_invoice - cash_in;
+        setTotalInvoice(total_invoice ? total_invoice.toString() : null);
+        setCashIn(cash_in ? cash_in.toString() : null);
+        total_cost = total_cost.toString().split(".")[0];
+        setTotalCost(total_cost ? total_cost.toString() : null);
+        setOutstandingBalance(
+          outstanding_balance ? outstanding_balance.toString() : null
+        );
+      }
+      setIsReadyIntegrationInvoice(true);
+    }
+  };
+
+  const getReportDistribution = async () => {
+    setIsReadyReportDistribution(false);
+    const URL = `${BASE_OSPRO}/api/project/get-report-distribution`;
+    const payload = {
+      project_id: PROJECT_ID,
+      start_date: moment()
+        .startOf("month")
+        .subtract(1, "years")
+        .format("YYYY-MM-DD"),
+      end_date: moment(new Date()).subtract(1, "years").format("YYYY-MM-DD"),
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getReportDistribution", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyReportDistribution(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get report distribution failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyReportDistribution(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      setReportDistribution(result.data.data);
+      setIsReadyReportDistribution(true);
+    }
+  };
+
+  const getComments = async () => {
+    setIsReadyComments(false);
+    const URL = `${BASE_OSPRO}/api/project-comment/search`;
+    const payload = {
+      columns: [
+        {
+          name: "project_id",
+          logic_operator: "=",
+          value: PROJECT_ID.toString(),
+          operator: "AND",
+        },
+        {
+          name: "gantt_id",
+          logic_operator: "=",
+          value: GANTT_ID.toString(),
+          operator: "AND",
+        },
+      ],
+      joins: [
+        {
+          name: "m_users",
+          column_join: "sender_id",
+          column_results: ["name", "username"],
+        },
+      ],
+      orders: { columns: ["created_at"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+    console.log("getComments", result);
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsReadyComments(true);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Get comments failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsReadyComments(true);
+      return;
+    } else if (result.status == 200 && result.data.data) {
+      setComments(result.data.data);
+      setIsReadyComments(true);
+    }
+  };
+
+  const handleSendComment = async () => {
+    // console.log('handleSendComment', comment);
+    setIsSendingComment(true);
+    if (comment === "") {
+      NotificationManager.error(
+        "Please leave a comment before you send it.",
+        "Failed"
+      );
+      setIsSendingComment(false);
+      return;
+    }
+    const URL = `${BASE_OSPRO}/api/project-comment/add`;
+    const payload = {
+      sender_id: localStorage.getItem("user_id"),
+      project_id: PROJECT_ID,
+      gantt_id: GANTT_ID,
+      comment: comment,
+    };
+    const result = await axios
+      .post(URL, payload, HEADER)
+      .then((res) => res)
+      .catch((err) => err.response);
+
+    if (!result) {
+      NotificationManager.error(`Could not connect to internet.`, "Failed");
+      setIsSendingComment(false);
+      return;
+    }
+
+    if (result.status !== 200) {
+      NotificationManager.error(
+        `Post comment failed, ${result.data.message}`,
+        "Failed"
+      );
+      setIsSendingComment(false);
+      return;
+    } else if (result.status === 200) {
+      NotificationManager.success(`Post comment success`, "Success");
+      resetInputComment();
+      getComments();
+    }
+  };
+
+  const resetInputComment = () => {
+    setComment("");
+    setIsSendingComment(false);
+  };
+
+  const initMap = () => {
+    let mymap = L.map("map-area", {
+      center: center,
+      zoom: 13,
+    });
+
+    setMymap(mymap);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(mymap);
+  };
+
+  useEffect(() => {
+    if (mymap) {
+      if (reportDistribution.length > 0) {
+        reportDistribution.map((item, idx) => {
+          L.marker([item.lat, item.lon])
+            .addTo(mymap)
+            .bindPopup(PopupContent(item));
+        });
+      }
+    }
+  }, [mymap, reportDistribution]);
+
+  useEffect(() => {
+    // Add event listener for receiving messages from the iframe
+    window.addEventListener("message", handleIframeMessage);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener("message", handleIframeMessage);
+    };
+  }, []);
+
+  const handleIframeMessage = (event) => {
+    if (event.data && event.data.action === "getUrl") {
+      const childUrl = window.location.href;
+
+      // Send the URL back to the iframe
+      event.source.postMessage(
+        { action: "sendUrl", url: childUrl },
+        event.origin
+      );
+    }
+  };
+
+  const RenderGantt = useMemo(
+    () => (
+      <iframe
+        id="frame-gantt"
+        src={URL_GANTT}
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+        scrolling="no"
+        frameBorder="0"
+        allow="fullscreen"
+      ></iframe>
+    ),
+    [activeTabIdx]
+  );
+
+  const RenderComments = useMemo(() => {
+    return (
+      <>
+        <div
+          style={{ padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2 }}
+        >
+          <TextArea
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            rows={3}
+            placeholder="Write comment here"
+            disabled={isSendingComment}
+          />
+          <div style={{ float: "right", marginTop: -40, marginRight: 10 }}>
+            <Button
+              title="Send"
+              type="primary"
+              shape="circle"
+              icon={<SendOutlined />}
+              size={20}
+              onClick={handleSendComment}
+              disabled={isSendingComment}
+            />
+          </div>
+        </div>
+        <div>
+          {!isReadyComments && <ListLoader />}
+          {isReadyComments && comments && comments.length < 1 && (
+            <div
+              style={{
+                flex: 1,
+                textAlign: "center",
+                color: "#E80053",
+                marginTop: 50,
+                marginBottom: 50,
+              }}
+            >
+              No comments found.
+            </div>
+          )}
+          {comments &&
+            comments.length > 0 &&
+            comments.map((item, idx) => (
+              <Comment
+                key={idx}
+                name={item.join_first_name}
+                comment={item.comment}
+                created_at={item.created_at}
+              />
+            ))}
+        </div>
+      </>
+    );
+  }, [comment, comments, isSendingComment, isReadyComments]);
+
+  const RenderBehindTasks = useMemo(() => {
+    return (
+      <div>
+        {!isReadyOverdueActivities && <ListLoader />}
+        {isReadyOverdueActivities &&
+          overdueActivities &&
+          overdueActivities.length < 1 && (
+            <div
+              style={{
+                flex: 1,
+                textAlign: "center",
+                color: "#E80053",
+                marginTop: 50,
+                marginBottom: 50,
+              }}
+            >
+              No overdue activity found.
+            </div>
+          )}
+        {isReadyOverdueActivities &&
+          overdueActivities &&
+          overdueActivities.length > 0 &&
+          overdueActivities.map((item, idx) => {
+            let end_date;
+            let planned_end;
+            let diffDays = 0;
+            let message = "";
+            if (item.end_date && item.end_date !== null) {
+              end_date = moment(item.end_date);
+              planned_end = moment(item.planned_end);
+              diffDays = end_date.diff(planned_end, "days");
+              if (isNaN(diffDays)) {
+                return null;
+              } else {
+                if (diffDays > 0) {
+                  message = `Overdue by ${diffDays + 1} days`;
+                } else {
+                  return null;
+                }
+              }
+            }
+            return (
+              <BehindTaskItem key={idx} name={item.name} message={message} />
+            );
+          })}
+      </div>
+    );
+  }, [overdueActivities, isReadyOverdueActivities]);
+
+  return (
+    <div style={{ marginLeft: -25, marginRight: -25 }}>
+      <NotificationContainer />
+      <Row>
+        <Col span={18}>
+          <Row>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Project
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail &&
+                      isReadyGanttParents &&
+                      isReadyGantt ? (
+                        (() => {
+                          let parentNames = "";
+                          for (
+                            let i = dataGanttParents.data.data.length - 1;
+                            i >= 0;
+                            i--
+                          ) {
+                            parentNames += " - ";
+                            parentNames += dataGanttParents.data.data[i].name;
+                          }
+                          return SCURVE && SCURVE == "1"
+                            ? projectName
+                              ? calculationStatus
+                                ? projectName + " - S-Curve Ready"
+                                : projectName + " - S-Curve Loading"
+                              : null
+                            : projectName +
+                                parentNames +
+                                " - " +
+                                dataGantt.data.data.name_version;
+                        })()
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i
+                      className="fa fa-check-square"
+                      style={{ fontSize: 28 }}
+                    ></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Project Manager
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail ? (
+                        projectManagerName
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i className="fa fa-user" style={{ fontSize: 28 }}></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: 20,
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Customer
+                    </div>
+                    <div style={{ fontSize: 14 }}>
+                      {isReadyProjectDetail ? (
+                        customerName
+                      ) : (
+                        <SingleTextLoader />
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <i className="fa fa-home" style={{ fontSize: 28 }}></i>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={8}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Schedule
+                    </div>
+                  </div>
+                  <div>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Planned Start
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedStart ? (
+                            moment(plannedStart).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Actual Start
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          actualStart ? (
+                            moment(actualStart).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Planned Finish
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedFinish ? (
+                            moment(plannedFinish).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={12}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Estimated Finish
+                      </Col>
+                      <Col span={12} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          estimatedFinish ? (
+                            moment(estimatedFinish).format("D MMMM YYYY")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span={16}>
+              <div
+                style={{
+                  border: "solid",
+                  borderWidth: 1,
+                  borderColor: "#DDDDDD",
+                  padding: 10,
+                  margin: 2,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 16,
+                        fontWeight: "bold",
+                        marginBottom: 10,
+                      }}
+                    >
+                      Financials
+                    </div>
+                  </div>
+                  <div>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Current Budget
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail ? (
+                          plannedCost ? (
+                            renderFormatRupiah(plannedCost, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Add Cost to Complete
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyGantt ? (
+                          dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              dataGantt.data.data.cost_to_complete.toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Actual to Date
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyIntegrationInvoice ? (
+                          totalCost ? (
+                            renderFormatRupiah(totalCost, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Est. at Completion
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyGantt ? (
+                          dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              (parseInt(plannedCost) + dataGantt.data.data.cost_to_complete).toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            renderFormatRupiah(
+                              parseInt(plannedCost).toString(),
+                              "Rp."
+                            )
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        BCWP (cost vs perform)
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadySCurve ? (
+                          bcwp ? (
+                            renderFormatRupiah(bcwp, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Cost Deviation
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyGantt ? (
+                           dataGantt.data.data.cost_to_complete ? (
+                            renderFormatRupiah(
+                              (dataGantt.data.data.cost_to_complete).toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "Rp. 0"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Rem. to Complete
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyProjectDetail && isReadyIntegrationInvoice ? (
+                          remToComplete ? (
+                            renderFormatRupiah(remToComplete, "Rp.")
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                      <Col
+                        span={7}
+                        style={{ fontSize: 11, fontWeight: "bold" }}
+                      >
+                        <i
+                          className="fa fa-calendar"
+                          style={{ marginRight: 8 }}
+                        ></i>
+                        Committed Cost
+                      </Col>
+                      <Col span={5} style={{ fontSize: 11 }}>
+                        {isReadyGantt ? (
+                          dataGantt.data.data.committed_cost ? (
+                            renderFormatRupiah(
+                              dataGantt.data.data.committed_cost.toString(),
+                              "Rp."
+                            )
+                          ) : (
+                            "-"
+                          )
+                        ) : (
+                          <SingleTextLoader width={100} height={10} />
+                        )}
+                      </Col>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+          <div
+            style={{
+              margin: 2,
+              border: "solid",
+              borderWidth: 1,
+              borderColor: "#DDDDDD",
+            }}
+          >
+            <Row>
+              <Col span={12}>
+                <div
+                  style={{
+                    backgroundColor: activeTabIdx === 0 ? "#FFFFFF" : "#D9D9D9",
+                    padding: 8,
+                    fontWeight: "bold",
+                    cursor: "pointer",
+                    color: activeTabIdx === 0 ? "#000000" : "#4E4C4C",
+                  }}
+                  onClick={() => setActiveTabIdx(0)}
+                >
+                  S Curve
+                </div>
+              </Col>
+              <Col span={12}>
+                <div
+                  style={{
+                    backgroundColor: activeTabIdx === 1 ? "#FFFFFF" : "#D9D9D9",
+                    padding: 8,
+                    fontWeight: "bold",
+                    cursor: "pointer",
+                    color: activeTabIdx === 1 ? "#000000" : "#4E4C4C",
+                  }}
+                  onClick={() => setActiveTabIdx(1)}
+                >
+                  Maps
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div style={{ maxHeight: "55vh" }}>
+                  {/* { activeTabIdx === 0 && <div style={{height: '52vh', width: '100%'}}>{RenderGantt}</div> }
+                                    { activeTabIdx === 1  && <div id="map-area" style={{height: '52vh'}} ref={mapRef}></div> } */}
+                  <div
+                    style={{
+                      height: "56vh",
+                      width: "100%",
+                      display: activeTabIdx === 0 ? "block" : "none",
+                    }}
+                  >
+                    {RenderGantt}
+                  </div>
+                  {activeTabIdx === 1 && (
+                    <div
+                      id="map-area"
+                      style={{ height: "56vh" }}
+                      ref={mapRef}
+                    ></div>
+                  )}
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+        <Col span={6}>
+          <div style={{ margin: 2 }}>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    backgroundColor: "#222222",
+                    padding: 10,
+                    marginBottom: 5,
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#FFFFFF",
+                      textAlign: "center",
+                      marginBottom: 10,
+                      fontWeight: "bold",
+                    }}
+                  >
+                    Progress
+                  </div>
+                  {isReadySCurve ? (
+                    <ProgressPlanningBar
+                      progress={planningProgress > 100 ? 100 : planningProgress}
+                    />
+                  ) : (
+                    <SingleTextLoader width={"100%"} height={30} />
+                  )}
+                  <div style={{ marginTop: 10, marginBottom: 10 }}></div>
+                  {isReadySCurve ? (
+                    <ProgressActualBar
+                      progress={
+                        planningProgress > 100
+                          ? parseFloat(
+                              (actualProgress / planningProgress) * 100
+                            ).toFixed(2)
+                          : actualProgress
+                      }
+                    />
+                  ) : (
+                    <SingleTextLoader width={"100%"} height={30} />
+                  )}
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={12}>
+                <div
+                  style={{
+                    background: "#FFF",
+                    padding: 10,
+                    border: "1px solid #DDD",
+                    marginRight: 2,
+                  }}
+                >
+                  {isReadyOverdueActivities && (
+                    <HealthByBudget status={healthByBudget} />
+                  )}
+                  {isReadySCurve && (
+                    <HealthBySchedule status={healthBySchedule} />
+                  )}
+                </div>
+              </Col>
+              <Col span={12}>
+                <Row style={{ height: "50%" }}>
+                  <Col span={24}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Manpower : {manPower}
+                    </div>
+                  </Col>
+                </Row>
+                <Row style={{ height: "50%" }}>
+                  <Col span={12}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Assigned : {assignedHrCount}
+                    </div>
+                  </Col>
+                  <Col span={12}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        background: "#FFF",
+                        padding: 10,
+                        border: "1px solid #DDD",
+                        marginBottom: 5,
+                        marginRight: 2,
+                      }}
+                    >
+                      Actual : {actualHrCount}
+                    </div>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    backgroundColor: "#FFFFFF",
+                    padding: 10,
+                    border: "solid",
+                    borderWidth: 1,
+                    borderColor: "#DDDDDD",
+                    marginBottom: 5,
+                    marginRight: 2,
+                  }}
+                >
+                  {/* <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
+                                <div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
+                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>On Budget</div>
+                                </div> */}
+                  <Row>
+                    <Col span={12}>Total Invoice</Col>
+                    <Col span={12} style={{ textAlign: "right" }}>
+                      {isReadyIntegrationInvoice ? (
+                        totalInvoice ? (
+                          renderFormatRupiah(totalInvoice, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>Cash In</Col>
+                    <Col span={12} style={{ textAlign: "right" }}>
+                      {isReadyIntegrationInvoice ? (
+                        cashIn ? (
+                          renderFormatRupiah(cashIn, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={24}>
+                      <hr style={{ margin: 2 }} />
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>Outstanding Balance</Col>
+                    <Col
+                      span={12}
+                      style={{
+                        textAlign: "right",
+                        color: "#E80053",
+                        fontWeight: 500,
+                      }}
+                    >
+                      {isReadyIntegrationInvoice ? (
+                        outstandingBalance ? (
+                          renderFormatRupiah(outstandingBalance, "Rp.")
+                        ) : (
+                          "-"
+                        )
+                      ) : (
+                        <SingleTextLoader width={100} height={10} />
+                      )}
+                    </Col>
+                  </Row>
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <div
+                  style={{
+                    border: "solid",
+                    borderWidth: 1,
+                    borderColor: "#DDDDDD",
+                  }}
+                >
+                  {/* <div style={{display: 'flex', alignItems: 'center'}}>
+                                    <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 0 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 0 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2}} onClick={() => setActiveTabCommentIdx(0)}>Behind Task</div>
+                                    <div style={{flex: 1, margin: 'auto', cursor: 'pointer', textAlign: 'center', backgroundColor: activeTabCommentIdx === 1 ? '#FFFFFF' : '#D9D9D9', color: activeTabCommentIdx === 1 ? '#000000' : '#FFFFFF', fontWeight: 500, padding: 2, fontSize: 12}} onClick={() => setActiveTabCommentIdx(1)}>Comment From Customer</div>
+                                </div> */}
+                  <Row style={{ alignItems: "center", marginBottom: 5 }}>
+                    <Col span={12}>
+                      <div
+                        style={{
+                          backgroundColor:
+                            activeTabCommentIdx === 0 ? "#FFFFFF" : "#D9D9D9",
+                          fontWeight: 500,
+                          textAlign: "center",
+                          fontSize: 12,
+                          padding: 2,
+                          cursor: "pointer",
+                          color:
+                            activeTabCommentIdx === 0 ? "#000000" : "#4E4C4C",
+                        }}
+                        onClick={() => setActiveTabCommentIdx(0)}
+                      >
+                        Behind Task
+                      </div>
+                    </Col>
+                    <Col span={12}>
+                      <div
+                        style={{
+                          backgroundColor:
+                            activeTabCommentIdx === 1 ? "#FFFFFF" : "#D9D9D9",
+                          fontWeight: 500,
+                          textAlign: "center",
+                          fontSize: 12,
+                          padding: 2,
+                          cursor: "pointer",
+                          color:
+                            activeTabCommentIdx === 1 ? "#000000" : "#4E4C4C",
+                        }}
+                        onClick={() => setActiveTabCommentIdx(1)}
+                      >
+                        Comment From Customer
+                      </div>
+                    </Col>
+                  </Row>
+                  <div
+                    className="custom-scroll"
+                    style={{ maxHeight: "37vh", overflow: "auto" }}
+                  >
+                    {activeTabCommentIdx === 0 && RenderBehindTasks}
+                    {activeTabCommentIdx === 1 && RenderComments}
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default DashboardProject;
diff --git a/src/views/DashboardProject/ganttDashboard.js b/src/views/DashboardProject/ganttDashboard.js
index 5fe6faa..49eb582 100644
--- a/src/views/DashboardProject/ganttDashboard.js
+++ b/src/views/DashboardProject/ganttDashboard.js
@@ -11,7 +11,7 @@ const token = localStorage.getItem("token")
 const Gantt = (props) => {
 const { ID } = useParams();
 const { GANTTID } = useParams();
-const url = `https://ospro-gantt.ospro.id/src/index.html?base_url=https://ospro-api.ospro.id/api&gantt_id=${GANTTID}&proyek_id=${ID}&token=${token}&ro=0`
+const url = `https://konstruksi-gantt.ospro.id/view-mode/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`
 
   const RenderGantt = () => (
     <iframe
@@ -31,4 +31,4 @@ const url = `https://ospro-gantt.ospro.id/src/index.html?base_url=https://ospro-
     </div>
   );
 }
-export default Gantt;
\ No newline at end of file
+export default Gantt;
diff --git a/src/views/Master/MasterCompany/DialogForm.js b/src/views/Master/MasterCompany/DialogForm.js
new file mode 100644
index 0000000..936a6c2
--- /dev/null
+++ b/src/views/Master/MasterCompany/DialogForm.js
@@ -0,0 +1,822 @@
+import React, { useState, useMemo, useEffect } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Row, Col, Label, Input,
+} from 'reactstrap';
+import { Pagination, Table, Tooltip, Select } from 'antd';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import DialogFormUser from './FormUser';
+import DialogFormMenu from './FormMenu';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import axios from "../../../const/interceptorApi"
+import {
+    USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, MENU_COMPANY_SEARCH
+} from '../../../const/ApiConst';
+const token = window.localStorage.getItem('token');
+const config = {
+    headers:
+    {
+        Authorization: `Bearer ${token}`,
+        "Content-type": `application/json`
+    }
+};
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp }) => {
+    const { Option } = Select
+    const { t } = useTranslation()
+    const [registrationnumber, setRegistrationNumber] = useState('')
+    const [companyName, setCompanyName] = useState('')
+    const [addressCompany, setAddressCompany] = useState('')
+    const [phoneNumber, setPhoneNumber] = useState('')
+    const [emailCompany, setEmailCompany] = useState('')
+    const [description, setDescription] = useState('')
+    const [logoLogin, setLogoLogin] = useState([])
+    const [logoHeader, setLogoHeader] = useState([])
+    const [favIcon, setFavIcon] = useState([])
+    const [loginInstruction, setLoginInstruction] = useState('')
+    const [about, setAbout] = useState('')
+    const [htmlTitle, setHtmlTitle] = useState('')
+    const [appName, setAppName] = useState('')
+    const [baseUrl, setBaseUrl] = useState([])
+    const [statusCompany, setStatusCompany] = useState(true)
+    const [template, setTemplate] = useState('')
+    const [lastIdxURL, setLastIdxURL] = useState(0);
+
+
+    const [dataTable, setDatatable] = useState([])
+    const [openDialogUser, setOpenDialogUser] = useState(false)
+    const [typeDialogUser, setTypeDialogUser] = useState("add")
+    const [currentPage, setCurrentPage] = useState(1)
+    const [rowsPerPage, setRowsPerPage] = useState(10)
+    const [totalPage, setTotalPage] = useState(0)
+    const [search, setSearch] = useState('')
+    const [idDelete, setIdDelete] = useState(0)
+    const [alertDelete, setAlertDelete] = useState(false)
+    const [dataEdit, setDataEdit] = useState([])
+    const [roleList, setRoleList] = useState([])
+
+
+    const [dataTableMenu, setDatatableMenu] = useState([])
+    const [currentPageMenu, setCurrentPageMenu] = useState(1)
+    const [rowsPerPageMenu, setRowsPerPageMenu] = useState(10)
+    const [totalPageMenu, setTotalPageMenu] = useState(0)
+    const [openDialogMenu, setOpenDialogMenu] = useState(false)
+    const [typeDialogMenu, setTypeDialogMenu] = useState("add")
+    useEffect(() => {
+        if (companyID && typeDialog === 'Set') {
+            getDataUser()
+            getRoleList()
+        } else {
+            getDataMenu()
+        }
+    }, [typeDialog, companyID, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu])
+
+
+    const onShowSizeChange = (current, pageSize) => {
+        setRowsPerPage(pageSize)
+    }
+
+    const onPagination = (current, pageSize) => {
+        setCurrentPage(current)
+    }
+    const onShowSizeChangeMenu = (current, pageSize) => {
+        setRowsPerPageMenu(pageSize)
+    }
+
+    const onPaginationMenu = (current, pageSize) => {
+        setCurrentPageMenu(current)
+    }
+
+    const getRoleList = async () => {
+        const formData = {
+            "paging": { "start": 0, "length": -1 },
+
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(ROLE_SEARCH, formData, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setRoleList(result.data.data);
+        }
+    }
+
+    const getDataUser = async () => {
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            "paging": {
+                "start": start,
+                "length": rowsPerPage
+            },
+            "columns": [],
+            "group_column": {
+                "operator": "AND",
+                "group_operator": "OR",
+                "where": [
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "ktp_number",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search,
+                        "table_name": "m_divisi"
+                    },
+                    {
+                        "name": "employee_type",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search,
+                        "table_name": "m_roles"
+                    },
+                    {
+                        "name": "phone_number",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "email",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "status_resource",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "company_id",
+                        "logic_operator": "=",
+                        "value": companyID
+                    },
+                ]
+            },
+            "joins": [
+                {
+                    "name": "m_roles",
+                    "column_join": "role_id",
+                    "column_results": [
+                        "name",
+                        "description"
+                    ]
+                },
+                {
+                    "name": "m_divisi",
+                    "column_join": "divisi_id",
+                    "column_results": [
+                        "name"
+                    ]
+                }
+            ],
+            "orders": {
+                "columns": [
+                    "id"
+                ],
+                "ascending": false
+            }
+        }
+
+        const result = await axios
+            .post(USER_SEARCH, payload, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatable(result.data.data);
+            setTotalPage(result.data.totalRecord);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const getDataMenu = async () => {
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            "paging": {
+                "start": start,
+                "length": rowsPerPage
+            },
+            "columns": [{
+                "name": "company_id",
+                "logic_operator": "=",
+                "value": companyID,
+                "operator": "AND"
+            }],
+            "joins": [{
+                "name": "m_menu",
+                "column_join": "menu_id",
+                "column_results": [
+                    "name"
+                ]
+            }],
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(MENU_COMPANY_SEARCH, payload, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatableMenu(result.data.data);
+            setTotalPageMenu(result.data.totalRecord);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+
+    const handleAddUser = async () => {
+        await setTypeDialogUser("Save")
+        setOpenDialogUser(true)
+    }
+
+    const handleEditUser = async (data) => {
+        setDataEdit(data)
+        await setTypeDialogUser('Edit')
+        setOpenDialogUser(true)
+    }
+    const handleDeleteUser = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const closeDialogUser = (type, message) => {
+        setOpenDialogUser(false);
+        if (type == 'success') {
+            NotificationManager.success(`${message}`, "Success!!");
+            getDataUser()
+        } else if (type == 'Failed') {
+            NotificationManager.error(`${message}`, "Failed!!");
+        }
+    };
+
+    const handleAddMenu = async () => {
+        await setTypeDialogMenu("Save")
+        setOpenDialogMenu(true)
+    }
+
+    const handleEditMenu = async (data) => {
+        setDataEdit(data)
+        await setTypeDialogMenu('Edit')
+        setOpenDialogMenu(true)
+    }
+
+    const handleDeleteMenu = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const closeDialogMenu = (type, message) => {
+        setOpenDialogMenu(false);
+        if (type == 'success') {
+            NotificationManager.success(`${message}`, "Success!!");
+            getDataMenu()
+        } else if (type == 'Failed') {
+            NotificationManager.error(`${message}`, "Failed!!");
+        }
+
+    };
+
+    const handleSave = () => {
+        let data = '';
+
+        if (!registrationnumber && registrationnumber === "") {
+            alert("Please input Registration Number");
+            return;
+        }
+        if (!companyName && companyName === "") {
+            alert("Please input the name");
+            return;
+        }
+
+        if (typeDialog === "Save") {
+            data = {
+                registration_no: registrationnumber,
+                company_name: companyName,
+                address: addressCompany,
+                phone_no: phoneNumber,
+                email: emailCompany,
+                description: description,
+                logo_login: logoLogin,
+                logo_header: logoHeader,
+                favicon_image: favIcon,
+                login_instruction: loginInstruction,
+                about: about,
+                html_title: htmlTitle,
+                app_name: appName,
+                base_url: baseUrl,
+                is_active: statusCompany,
+                template_id: template
+            }
+            console.log(data)
+
+            closeDialog('save', data);
+        } else if (typeDialog === "Set") {
+            // if (!password && password === "") {
+            //     alert("Please fill password");
+            //     return;
+            // }
+            // if (password !== retryPassword) {
+            //     alert("Password doesn't match");
+            //     return;
+            // }
+            // if (password.length < 8) {
+            //     alert("Password minimum 8 character");
+            //     return;
+            // }
+            // data = {
+            //     id,
+            //     username,
+            //     password,
+            //     email,
+            // }
+
+            closeDialog('edit', data);
+        } else {
+
+            // data = {
+            //     id,
+            //     name: resourceName,
+            //     username,
+            //     employee_type: employeeType,
+            //     phone_number: phoneNo,
+            //     email,
+            //     gender,
+            //     birth_place: birthPlace,
+            //     blood_type: bloodType,
+            //     ktp_number: ktpNumber,
+            //     biaya_per_jam: biayaPerJam.replace('.', ''),
+            //     role_id: roleId,
+            //     divisi_id: divisionId,
+            //     address,
+            //     status_resource: statusResource,
+            //     status_boundary: statusRestriction,
+            //     company_id: company_id
+            // }
+
+            // if (birthDate && birthDate != "") {
+            //     data['birth_date'] = birthDate;
+            // }
+
+            closeDialog('edit', data);
+        }
+    }
+
+    const isValidEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+        setDatatable([])
+    }
+
+    const onConfirmDelete = async () => {
+        let url = USER_DELETE(idDelete);
+
+        const result = await axios.delete(url, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser()
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!');
+        } else {
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.error(`Data user gagal dihapus!`, 'Failed!!');
+        }
+    }
+
+    const cancelDelete = () => {
+        setAlertDelete(false)
+        setIdDelete(0)
+    }
+
+    const addBaseUrl = () => {
+        baseUrl.push({
+            id: lastIdxURL + 1,
+            url: "",
+        });
+        setBaseUrl(baseUrl);
+        setLastIdxURL(lastIdxURL + 1);
+    };
+
+    const handleChangeBaseURL = (value, index) => {
+        const newBaseURL = [...baseUrl];
+        newBaseURL[index] = value;
+        setBaseUrl(newBaseURL);
+    }
+
+    const deleteBaseURL = (id) => {
+        if (baseUrl && baseUrl.length > 0) {
+            let checkIdx = baseUrl.findIndex((o) => o.id === id);
+            if (checkIdx > -1) {
+                baseUrl.splice(checkIdx, 1);
+                setBaseUrl(baseUrl.filter((_, i2) => i2 !== id));
+            }
+        }
+    }
+
+    const handleLogoHeader = (content) => {
+        const newLogoHeader = [...logoHeader, {
+            type: "image",
+            content: content,
+        }];
+        setLogoHeader(newLogoHeader);
+    }
+
+    const RenderBaseURL = () => {
+        if (baseUrl.length > 0) {
+            return baseUrl.map((item, index) => {
+                return (
+                    <Row key={index} style={{ marginBottom: 10 }}>
+                        <Col md={8}>
+                            <Input
+                                type="text"
+                                value={item.url}
+                                name="item"
+                                onChange={(e) => handleChangeBaseURL(e, index)}
+                            />
+                        </Col>
+                        <Col md={2}>
+                            <Button
+                                color="danger"
+                                size="sm"
+                                onClick={() => deleteBaseURL(item.id)}
+                            >
+                                <i className="fa fa-trash"></i>
+                            </Button>
+                        </Col>
+                    </Row>
+                );
+            });
+        } else if (baseUrl.length < 1) {
+            return (
+                <div
+                    style={{
+                        textAlign: "center",
+                        color: "red",
+                        marginTop: 25,
+                        marginBottom: 25,
+                    }}
+                >
+                    No Base URL found
+                </div>
+            );
+        }
+    };
+
+
+    const renderFromCompany = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <span style={{ color: "red" }}>*</span>required.
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Number Registration<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={registrationnumber} onChange={(e) => setRegistrationNumber(e.target.value)} placeholder='Input Number Registration' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Company Name<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={companyName} onChange={(e) => setCompanyName(e.target.value)} placeholder=' Input Company Name' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Email</Label>
+                            <Input type="email" value={emailCompany} onChange={(e) => setEmailCompany(e.target.value)} placeholder={t('inputEmail')}
+                                onBlur={(e) => {
+                                    if (!isValidEmail(e.target.value)) {
+                                        alert("Masukkan email yang valid.");
+                                    }
+                                }}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Phone Number</Label>
+                            <Input type="text" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Address</Label>
+                            <Input type="textarea" value={addressCompany} onChange={(e) => setAddressCompany(e.target.value)} placeholder=' Input Address' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">About</Label>
+                            <Input type="textarea" value={about} onChange={(e) => setAbout(e.target.value)} placeholder=' Input Company Name' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">App Name</Label>
+                            <Input type="text" value={appName} onChange={(e) => setAppName(e.target.value)} placeholder=' Input App Name' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">HTML Title</Label>
+                            <Input type="text" value={htmlTitle} onChange={(e) => setHtmlTitle(e.target.value)} placeholder=' Input HTML Title' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Status Company<span style={{ color: "red" }}>*</span></Label>
+                            <Select style={{ width: "100%" }} defaultValue={statusCompany} onChange={(e) => setStatusCompany(e)} placeholder="Select a template for application">
+                                <Option value={true}>Active</Option>
+                                <Option value={false}>Inactive</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Template Application<span style={{ color: "red" }}>*</span></Label>
+                            <Select style={{ width: "100%" }} defaultValue={template} onChange={(e) => setTemplate(e)} placeholder="Select a template for application">
+                                <Option value={'1'}>Construction</Option>
+                                <Option value={'2'}>IT (Information AND Technology)</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <Col md={12}>
+                            <Label className="capitalize">Base URL<span style={{ color: "red" }}>*</span></Label>
+                            <Row>
+                                <Col md={8}>
+                                    <p>URL</p>
+                                </Col>
+                                <Col md={2}>
+                                    <p>Action</p>
+                                </Col>
+                                <Col md={1}>
+                                    <Tooltip title="Add row">
+                                        <Button
+                                            size="sm"
+                                            color="primary"
+                                            onClick={() => addBaseUrl()}
+                                        >
+                                            <i className="fa fa-plus"></i>
+                                        </Button>
+                                    </Tooltip>
+                                </Col>
+                            </Row>
+                            <div style={{ marginBottom: 50 }}>{RenderBaseURL()}</div>
+                        </Col>
+                    </Col>
+                    <Col md={6}>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                // onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Header</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Fav Icon Logo</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                //   onChange={(e) => setProjectStructureOrg(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+
+
+
+    const RenderTableUser = useMemo(() => {
+        const columns = [
+            {
+                title: t('action'),
+                dataIndex: '',
+                key: 'x',
+                render: (text, record) => <>
+                    <Tooltip title={t('edit')}>
+                        <Button size={"sm"} color='success' onClick={() => handleEditUser(text)}><i className="fa fa-edit"></i></Button>
+                    </Tooltip>{" "}
+                    <Tooltip title={t('delete')}>
+                        <Button size={"sm"} color='danger' onClick={() => handleDeleteUser(text.id)}><i className="fa fa-trash"></i></Button>
+                    </Tooltip>
+                </>,
+            },
+
+            { title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' },
+            { title: t('nameHR'), dataIndex: 'name', key: 'name' },
+
+            { title: t('employeeType'), dataIndex: 'employee_type', key: 'employee_type' },
+            {
+                title: t('roles'),
+                dataIndex: 'join_first_name',
+                key: 'join_first_name',
+                render: (text, record) => <>{record.join_first_name}</>
+            },
+            { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' },
+            { title: 'Email', dataIndex: 'email', key: 'email' },
+            { title: 'Status', dataIndex: 'status_resource', key: 'status_status' }
+        ];
+        return (
+            <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={dataTable}
+                pagination={false}
+            />
+        )
+    }, [dataTable])
+
+
+    const renderTableMenu = useMemo(() => {
+        const columns = [
+            {
+                title: t('action'),
+                dataIndex: '',
+                key: 'x',
+                render: (text, record) => <>
+                    <Tooltip title={t('delete')}>
+                        <i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDeleteMenu(text.id)}></i>
+                    </Tooltip>
+                    <Tooltip title={t('edit')}>
+                        <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEditMenu(text)}></i>
+                    </Tooltip>
+                </>,
+            },
+            { title: t('name'), dataIndex: 'join_first_name', key: 'join_first_name' },
+            { title: 'Url', dataIndex: 'url', key: 'url' },
+            { title: t('icon'), dataIndex: 'icon', key: 'icon' },
+            { title: 'Alias', dataIndex: 'alias_name', key: 'alias_name' },
+            { title: t('order'), dataIndex: 'sequence', key: 'sequence' },
+            { title: t('parentMenu'), dataIndex: 'join_first_name', key: 'join_first_name', render: (text, record) => (text ? text : "-") }
+        ];
+        return (
+            <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={dataTableMenu}
+                pagination={false}
+            />
+        )
+    }, [dataTableMenu])
+
+    return (
+        <>
+            <NotificationContainer />
+            <SweetAlert
+                show={alertDelete}
+                warning
+                showCancel
+                confirmBtnText="Delete"
+                confirmBtnBsStyle="danger"
+                title={t('deleteConfirm')}
+                onConfirm={onConfirmDelete}
+                onCancel={() => cancelDelete()}
+                focusCancelBtn
+            >
+                {t('deleteMsg')}
+            </SweetAlert>
+            <DialogFormUser
+                openDialog={openDialogUser}
+                closeDialog={closeDialogUser}
+                typeDialog={typeDialogUser}
+                roleList={roleList}
+                companyID={companyID}
+                dataEdit={dataEdit}
+            />
+            <DialogFormMenu
+                openDialog={openDialogMenu}
+                closeDialog={closeDialogMenu}
+                typeDialog={typeDialogMenu}
+                companyID={companyID}
+                companyName={companyNameProp}
+                dataEdit={dataEdit}
+            />
+            <Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+                    {typeDialog === "Set-Menu" ? `Menu ${companyNameProp}` : typeDialog === "Save" ? `Add Data Company` : typeDialog === "Set" ? `Manage User ${companyNameProp}` : `Edit ${companyNameProp}`}
+                    {typeDialog === "Set" ? (
+                        <Tooltip title="Add User">
+                            <Button onClick={handleAddUser} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+                        </Tooltip>
+                    ) :
+                        (
+                            <Tooltip title="Add Menu">
+                                <Button onClick={handleAddMenu} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+                            </Tooltip>
+                        )}
+                </ModalHeader>
+                <ModalBody>
+
+                    {typeDialog !== "Set" && typeDialog !== "Set-Menu" && renderFromCompany()}
+                    {typeDialog === "Set" && (
+                        <>
+                            {RenderTableUser}
+                            <Pagination
+                                style={{ marginTop: "25px" }}
+                                showSizeChanger
+                                onShowSizeChange={onShowSizeChange}
+                                onChange={onPagination}
+                                pageSizeOptions={["10", "25", "50"]}
+                                total={totalPage}
+                                pageSize={rowsPerPage}
+                                current={currentPage}
+                            />
+                        </>
+                    )}
+                    {typeDialog === "Set-Menu" && (
+                        <>
+                            {renderTableMenu}
+                            <Pagination
+                                style={{ marginTop: "25px" }}
+                                showSizeChanger
+                                onShowSizeChange={onShowSizeChangeMenu}
+                                onChange={onPaginationMenu}
+                                pageSizeOptions={["10", "25", "50"]}
+                                total={totalPageMenu}
+                                pageSize={rowsPerPageMenu}
+                                current={currentPageMenu}
+                            />
+                        </>
+                    )}
+
+                </ModalBody>
+                <ModalFooter>
+                    {typeDialog !== "Set" && typeDialog !== "Set-Menu" && (
+                        <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>
+                    )}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+export default DialogForm;
\ No newline at end of file
diff --git a/src/views/Master/MasterCompany/FormMenu.js b/src/views/Master/MasterCompany/FormMenu.js
new file mode 100644
index 0000000..a7178d2
--- /dev/null
+++ b/src/views/Master/MasterCompany/FormMenu.js
@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Transfer, Select } from 'antd';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import { MENU_LIST, MENU_COMPANY_ADD, MENU_COMPANY_EDIT } from '../../../const/ApiConst.js';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import axios from 'axios';
+const token = window.localStorage.getItem('token');
+const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, companyName, companyID }) => {
+    const { Option } = Select
+    const [targetKeys, setTargetKeys] = useState([])
+    const [menuResource, setmenuResource] = useState([])
+    const [id, setId] = useState(0)
+    const [name, setName] = useState('')
+    const [url, setUrl] = useState('')
+    const [aliasName, setAliasName] = useState('')
+    const [icon, setIcon] = useState('')
+    const [sequence, setSequence] = useState(0)
+    const [parentId, setParentId] = useState(null)
+    const { t } = useTranslation()
+    const config = {
+        headers:
+        {
+            Authorization: `Bearer ${token}`,
+            "Content-type": `application/json`
+        }
+    };
+
+    const handleCLearData = () => {
+        // setId(0)
+        setTargetKeys([])
+    }
+
+    useEffect(() => {
+        if (!openDialog) {
+            handleCLearData()
+        } else {
+            getDataAllMenu();
+        }
+    }, [openDialog])
+
+    const getDataAllMenu = async () => {
+        const result = await axios
+            .get(MENU_LIST, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setTransferMenu(result.data.data);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const setTransferMenu = (data) => {
+        const finalData = []
+        data.map((val, index) => {
+            let data = {
+                key: val.id,
+                name: val.name,
+                url: val.url,
+                alias_name: val.alias_name,
+                icon: val.icon,
+                parent_id: val.parent_id,
+                sequence: val.sequence,
+            }
+            finalData.push(data)
+        });
+        setmenuResource(finalData)
+    }
+
+
+    const handleSave = async () => {
+        await saveMenuCompany()
+        handleCLearData()
+    }
+
+    useEffect(() => {
+        if (typeDialog === "Edit") {
+            setId(dataEdit.id)
+            setIcon(dataEdit.icon)
+            setParentId(dataEdit.parent_id)
+            setSequence(dataEdit.sequence)
+        } else {
+            setId(0)
+            setName('')
+            setUrl('')
+            setIcon('')
+            setParentId(null)
+            setSequence(0)
+            setAliasName('')
+        }
+    }, [dataEdit, openDialog])
+
+    const validation = () => {
+        if (!icon || icon === "") {
+            alert("Icon cannot be empty!");
+            return true;
+        }
+        if (sequence < 0) {
+            alert("Order cannot be empty!");
+            return true;
+        }
+    }
+
+    const saveMenuCompany = async () => {
+        let data = '';
+        const err = validation();
+        if (!err) {
+            if (typeDialog === "Edit") {
+                data = {
+                    id,
+                    sequence: parseInt(sequence),
+                    icon,
+                }
+
+                if (parentId && parentId > 0) {
+                    data['parent_id'] = parentId
+                }
+
+                const formData = data
+                const url = MENU_COMPANY_EDIT(data.id)
+                const result = await axios.put(url, formData, config)
+                    .then(res => res)
+                    .catch((error) => error.response);
+
+                if (result && result.data && result.data.code === 200) {
+                    closeDialog('success', 'Data menu berhasil diubah')
+                } else {
+                    closeDialog('failed', 'Data menu gagal diubah')
+                }
+            }
+            setId(0)
+            setName('')
+            setUrl('')
+            setIcon('')
+            setParentId(null)
+            setSequence(0)
+            setAliasName('')
+        } else {
+            const selectedData = menuResource.filter(item => targetKeys.includes(item.key));
+            const formDatas = selectedData.map(data => ({
+                menu_id: data.key,
+                parent_id: data.parent_id,
+                company_id: companyID,
+                icon: data.icon,
+                alias_name: data.alias_name,
+                url: data.url,
+                sequence: data.sequence
+            }));
+            const result = await axios
+                .post(MENU_COMPANY_ADD, formDatas, config)
+                .then(res => res)
+                .catch((error) => error.response);
+            if (result && result.status == 200) {
+                closeDialog('success', result.data.message)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+        }
+    }
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+        setId(0)
+        setName('')
+        setUrl('')
+        setIcon('')
+        setParentId(null)
+        setSequence(0)
+        setAliasName('')
+    }
+
+    const handleChange = targetKeys => {
+        setTargetKeys(targetKeys)
+    };
+
+    const onChangeParent = (val) => {
+        setParentId(val)
+    }
+
+    const setupSelectParent = () => {
+        return (
+            <>
+                {menuResource.map((val, index) => {
+                    return (
+                        <Option key={index} value={val.id}>{val.name}</Option>
+                    )
+                })}
+            </>
+        )
+    }
+
+    const renderForm = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <div style={{ justifyContent: 'center' }}>
+                            <Transfer
+                                showSearch
+                                listStyle={{
+                                    width: 250,
+                                    height: 300,
+                                }}
+                                titles={['Master Menu', `Menu ${companyName}`]}
+                                targetKeys={targetKeys}
+                                dataSource={menuResource}
+                                onChange={handleChange}
+                                render={item => item.name}
+                            />
+                        </div>
+                    </Col>
+                </Row>
+
+            </Form>
+        )
+    }
+    const renderFormEdit = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <span style={{ color: "red" }}>*</span> Wajib diisi.
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        {/* <FormGroup>
+                            <Label className="capitalize">{t('name')} Menu<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="hidden" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label className="capitalize">URL<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="hidden" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
+                        </FormGroup> */}
+                        <FormGroup>
+                            <Label className="capitalize">{t('icon')}<span style={{ color: "red" }}>*</span> </Label>
+                            <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
+                        </FormGroup>
+                    </Col>
+                    <Col>
+                        <FormGroup>
+                            <Label className="capitalize">{t('order')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" min="0" value={sequence} onChange={(e) => setSequence(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputOrder')} />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label className="capitalize">{t('parentMenu')}</Label>
+                            <Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
+                                {setupSelectParent()}
+                            </Select>
+                        </FormGroup>
+                        {/* <FormGroup>
+                            <Label className="capitalize">Alias Menu</Label>
+                            <Input type="hidden" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
+                        </FormGroup> */}
+                    </Col>
+                </Row>
+
+            </Form>
+        )
+    }
+    return (
+        <>
+            <Modal ssize="md" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+                    Add Data Menu
+                </ModalHeader>
+                <ModalBody>
+                    {typeDialog !== 'Edit' ? renderForm() : renderFormEdit()}
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+export default FormMenu;
\ No newline at end of file
diff --git a/src/views/Master/MasterCompany/FormUser.js b/src/views/Master/MasterCompany/FormUser.js
new file mode 100644
index 0000000..e4d1fc5
--- /dev/null
+++ b/src/views/Master/MasterCompany/FormUser.js
@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Select } from 'antd';
+import { USER_ADD, USER_EDIT } from '../../../const/ApiConst.js';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+const { Option } = Select
+const token = window.localStorage.getItem('token');
+const config = {
+    headers:
+    {
+        Authorization: `Bearer ${token}`,
+        "Content-type": `application/json`
+    }
+};
+const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, companyID }) => {
+    const { t } = useTranslation()
+    const [id, setId] = useState('')
+    const [resourceName, setResourceName] = useState('')
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [employeeType, setEmployeeType] = useState('')
+    const [phoneNo, setPhoneNo] = useState('')
+    const [email, setEmail] = useState('')
+    const [gender, setGender] = useState('')
+    const [ktpNumber, setKtpNumber] = useState('')
+    const [roleId, setRoleId] = useState('')
+    const [statusResource, setStatusResource] = useState('active')
+
+    useEffect(() => {
+        if (typeDialog === "Edit") {
+            console.log(dataEdit);
+            setId(dataEdit.id)
+            setResourceName(dataEdit.name)
+            setUsername(dataEdit.username)
+            setPassword('')
+            setEmployeeType(dataEdit.employee_type)
+            setPhoneNo(dataEdit.phone_number)
+            setEmail(dataEdit.email)
+            setGender(dataEdit.gender)
+            setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
+            setRoleId(dataEdit.role_id)
+        } else {
+            setId(0)
+            setResourceName('')
+            setUsername('')
+            setPassword('')
+            setEmployeeType('')
+            setPhoneNo('')
+            setEmail('')
+            setGender('')
+            setRoleId('')
+        }
+    }, [dataEdit, openDialog])
+
+
+    const handleSave = async () => {
+        let data = '';
+        if (typeDialog === "Save") {
+            data = {
+                name: resourceName,
+                employee_type: employeeType,
+                phone_number: phoneNo,
+                email,
+                gender,
+                ktp_number: ktpNumber,
+                role_id: roleId,
+                status_resource: statusResource,
+                company_id: companyID,
+                username,
+                password,
+            }
+            const formData = data
+            const result = await axios.post(USER_ADD, formData, config)
+                .then(res => res)
+                .catch((error) => error.response);
+
+            if (result && result.data && result.data.code === 200) {
+                closeDialog('success', `Data resource berhasil ditambah`)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+        } else {
+
+            data = {
+                id,
+                name: resourceName,
+                username,
+                employee_type: employeeType,
+                phone_number: phoneNo,
+                email,
+                gender,
+                ktp_number: ktpNumber,
+                role_id: roleId,
+                status_resource: statusResource,
+                company_id: companyID,
+                username,
+                password,
+            }
+            if (password == '') {
+                data.password = dataEdit.password;
+            }
+            let urlEdit = USER_EDIT(data.id)
+            const formData = data
+
+            const result = await axios.put(urlEdit, formData, config)
+                .then(res => res)
+                .catch((error) => error.response);
+
+            if (result && result.data && result.data.code === 200) {
+                closeDialog('success', `Data resource berhasil diedit`)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+
+        }
+    }
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+    }
+
+    const isValidEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const setupSelectRole = () => {
+        return (
+            <>
+                {roleList.map((val, index) => {
+                    return (
+                        <Option key={index} value={val.id}>{val.name}</Option>
+                    )
+                })}
+            </>
+        )
+    }
+
+
+    const renderFormSetAdmin = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <span style={{ color: "red" }}>*</span>required.
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('nik')} <span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNik')} maxLength="16" />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('nameHR')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={t('inputName')} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('employeeType')} <span style={{ color: "red" }}>*</span></Label>
+                            <Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
+                                <Option value={'employee'}>Employee</Option>
+                                <Option value={'subcon'}>Subcon</Option>
+                                <Option value={'freelance'}>Freelance</Option>
+                            </Select>
+                        </FormGroup>
+
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Phone No.</Label>
+                            <Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Email</Label>
+                            <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')}
+                                onBlur={(e) => {
+                                    if (!isValidEmail(e.target.value)) {
+                                        alert("Masukkan email yang valid.");
+                                    }
+                                }}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('gender')}</Label>
+                            <Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}>
+                                <Option value="Male">Male</Option>
+                                <Option value="Female">Female</Option>
+                                {/* <Option value="Other">Other</Option> */}
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('roles')} <span style={{ color: "red" }}>*</span></Label>
+                            <Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}>
+                                {setupSelectRole()}
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Status</Label>
+                            <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)} >
+                                <Option value={'active'}>Active</Option>
+                                <Option value={'inactive'}>Inactive</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Username</Label>
+                            <Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Password</Label>
+                            <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+
+    return (
+        <>
+            <Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+                    {typeDialog === "Save" ? `Add` : typeDialog === "Set" ? "Add " : "Edit"} User
+                </ModalHeader>
+                <ModalBody>
+                    {renderFormSetAdmin()}
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+export default FormUser;
\ No newline at end of file
diff --git a/src/views/Master/MasterCompany/index.js b/src/views/Master/MasterCompany/index.js
new file mode 100644
index 0000000..e48af19
--- /dev/null
+++ b/src/views/Master/MasterCompany/index.js
@@ -0,0 +1,361 @@
+import * as XLSX from 'xlsx';
+import React, { useState, useEffect, useMemo } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import DialogForm from './DialogForm'
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { Pagination, Table, Button, Tooltip } from 'antd';
+import {
+    COMPANY_MANAGEMENT_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
+} from '../../../const/ApiConst';
+import { useTranslation } from 'react-i18next';
+const token = window.localStorage.getItem('token');
+const config = {
+    headers:
+    {
+        Authorization: `Bearer ${token}`,
+        "Content-type": `application/json`
+    }
+};
+
+const MasterCompany = ({ params }) => {
+    const token = localStorage.getItem("token")
+    const company_id = localStorage.getItem("company_id")
+    const HEADER = {
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        }
+    }
+    const [alertDelete, setAlertDelete] = useState(false)
+    const [clickOpenModal, setClickOpenModal] = useState(false)
+    const [clickOpenModalShift, setClickOpenModalShift] = useState(false)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [dataEdit, setDataEdit] = useState([])
+    const [dataExport, setDataExport] = useState([])
+    const [dataTable, setDatatable] = useState([])
+    const [divisiList, setDivisiList] = useState([])
+    const [idDelete, setIdDelete] = useState(0)
+    const [openDialog, setOpenDialog] = useState(false)
+    const [openDialogShift, setOpenDialogShift] = useState(false)
+    const [rowsPerPage, setRowsPerPage] = useState(10)
+    const [search, setSearch] = useState('')
+    const [totalPage, setTotalPage] = useState(0)
+    const [typeDialog, setTypeDialog] = useState('Save')
+    const [typeDialogShift, setTypeDialogShift] = useState('Save')
+    const [companyID, setCompanyID] = useState('')
+    const [companyName, setCompanyName] = useState('')
+    const pageName = params.name;
+    const { t } = useTranslation();
+    useEffect(() => {
+        getDivisiList()
+    }, [])
+
+    useEffect(() => {
+        getDataUser()
+    }, [search, rowsPerPage, currentPage])
+
+
+
+    const onShowSizeChange = (current, pageSize) => {
+        setRowsPerPage(pageSize)
+    }
+
+    const onPagination = (current, pageSize) => {
+        setCurrentPage(current)
+    }
+
+    const getDivisiList = async () => {
+        const formData = {
+            "paging": { "start": 0, "length": -1 },
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(DIVISI_SEARCH, formData, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDivisiList(result.data.data);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const getDataUser = async () => {
+
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            "paging": {
+                "start": start,
+                "length": rowsPerPage
+            },
+            "columns": [],
+            "group_column": {
+                "operator": "AND",
+                "group_operator": "OR",
+                "where": [
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "phone_number",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "email",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "status_resource",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                ]
+            },
+            "joins": [
+
+            ],
+            "orders": {
+                "columns": [
+                    "id"
+                ],
+                "ascending": true
+            }
+        }
+
+        const result = await axios
+            .post(COMPANY_MANAGEMENT_SEARCH, payload, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatable(result.data.data);
+            setTotalPage(result.data.totalRecord);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const handleSearch = e => {
+        const value = e.target.value
+        setSearch(value);
+        setCurrentPage(1)
+    };
+
+    const handleOpenDialog = async (type) => {
+        await setTypeDialog(type)
+        setOpenDialog(true)
+
+    }
+
+
+
+    const handleEdit = (data) => {
+        setDataEdit(data)
+        handleOpenDialog('Edit');
+    }
+
+    const handleSetWorker = async (data) => {
+        setCompanyID(data.id)
+        setCompanyName(data.company_name)
+        await setDataEdit(data)
+        handleOpenDialog('Set');
+    }
+
+    const handleSetMenu = async (data) => {
+        setCompanyID(data.id)
+        setCompanyName(data.company_name)
+        await setDataEdit(data)
+        handleOpenDialog('Set-Menu');
+    }
+
+
+    const handleDelete = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const handleCloseDialog = (type, data) => {
+        if (type === "save") {
+            saveUser(data);
+        } else if (type === "edit") {
+            editUser(data);
+        }
+        setDataEdit([])
+        setOpenDialog(false)
+    }
+
+
+    const saveUser = async (data) => {
+        const formData = data
+        const result = await axios.post(USER_ADD, formData, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser();
+            NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!');
+        } else {
+            NotificationManager.error(`${result.data.message}`, 'Failed!!');
+        }
+    }
+
+    const editUser = async (data) => {
+
+        let urlEdit = USER_EDIT(data.id)
+        const formData = data
+
+        const result = await axios.put(urlEdit, formData, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser();
+            NotificationManager.success(`Data resource berhasil diedit`, 'Success!!');
+        } else {
+            NotificationManager.error(`${result.data.message}`, `Failed!!`);
+        }
+    }
+
+    const toggleAddDialog = () => {
+        setOpenDialog(!openDialog)
+    }
+
+
+
+    const onConfirmDelete = async () => {
+        let url = USER_DELETE(idDelete);
+
+        const result = await axios.delete(url, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser()
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!');
+        } else {
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.error(`Data user gagal dihapus!}`, 'Failed!!');
+        }
+    }
+
+    const cancelDelete = () => {
+        setAlertDelete(false)
+        setIdDelete(0)
+    }
+
+    const RenderTable = useMemo(() => {
+        const columns = [
+            {
+                title: t('action'),
+                dataIndex: '',
+                key: 'x',
+                render: (text, record) => <>
+                    <Tooltip title={t('edit')}>
+                        <Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
+                    </Tooltip>
+                    <Tooltip title={t('delete')}>
+                        <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+                    </Tooltip>
+                    <Tooltip title="Set User">
+                        <Button size="small" type="link" style={{ color: 'primary' }} onClick={() => handleSetWorker(text)}><i className="fa fa-users"></i></Button>
+                    </Tooltip>
+                    <Tooltip title="Set Menu">
+                        <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleSetMenu(text)}><i className="fa fa-bars"></i></Button>
+                    </Tooltip>
+                </>,
+            },
+
+            { title: "Number Registration", dataIndex: 'registration_no', key: 'registration_no' },
+            { title: "Name", dataIndex: 'company_name', key: 'company_name' },
+            { title: 'Phone No.', dataIndex: 'phone_no', key: 'phone_no' },
+            { title: 'Email', dataIndex: 'email', key: 'email' },
+            { title: 'Status', dataIndex: 'is_active', key: 'is_active', render: (text, record) => <>{text && text !== false ? "Active" : 'Inactive'}</> }
+        ];
+        return (
+            <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={dataTable}
+                pagination={false}
+            />
+        )
+    }, [dataTable])
+
+    return (
+        <div>
+            <NotificationContainer />
+            <SweetAlert
+                show={alertDelete}
+                warning
+                showCancel
+                confirmBtnText="Delete"
+                confirmBtnBsStyle="danger"
+                title={t('deleteConfirm')}
+                onConfirm={onConfirmDelete}
+                onCancel={() => cancelDelete()}
+                focusCancelBtn
+            >
+                {t('deleteMsg')}
+            </SweetAlert>
+            <DialogForm
+                openDialog={openDialog}
+                closeDialog={handleCloseDialog}
+                toggleDialog={() => toggleAddDialog}
+                typeDialog={typeDialog}
+                dataEdit={dataEdit}
+                clickOpenModal={clickOpenModal}
+                divisiList={divisiList}
+                companyID={companyID}
+                companyNameProp={companyName}
+            />
+
+            <Card>
+                <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+                    <h4 className="capitalize">{pageName}</h4>
+                    <Row>
+                        <Col>
+                            <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder='Search Company' />
+                        </Col>
+                        <Col>
+                            <Tooltip title='Add Company'>
+                                <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
+                            </Tooltip>
+                        </Col>
+                    </Row>
+                </CardHeader>
+                <CardBody>
+                    {RenderTable}
+                    <Pagination
+                        style={{ marginTop: "25px" }}
+                        showSizeChanger
+                        onShowSizeChange={onShowSizeChange}
+                        onChange={onPagination}
+                        pageSizeOptions={["10", "25", "50"]}
+                        total={totalPage}
+                        pageSize={rowsPerPage}
+                        current={currentPage}
+                    />
+                </CardBody>
+            </Card>
+        </div>
+    )
+}
+
+export default MasterCompany;
diff --git a/src/views/Master/MasterMenu/DialogForm.js b/src/views/Master/MasterMenu/DialogForm.js
index 60b8134..fd9458c 100644
--- a/src/views/Master/MasterMenu/DialogForm.js
+++ b/src/views/Master/MasterMenu/DialogForm.js
@@ -7,7 +7,6 @@ import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 
 const { Option } = Select
-
 const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu }) => {
   const [id, setId] = useState(0)
   const [name, setName] = useState('')
@@ -68,7 +67,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
           url,
           sequence: parseInt(sequence),
           icon,
-          alias_name: aliasName
+          alias_name: aliasName,
         }
 
         if (parentId && parentId > 0) {
@@ -83,7 +82,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
           url,
           sequence: parseInt(sequence),
           icon,
-          alias_name: aliasName
+          alias_name: aliasName,
         }
 
         if (parentId && parentId > 0) {
@@ -133,9 +132,9 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     return (
       <Form>
         <Row>
-            <Col md={12}>
-              <span style={{ color: "red" }}>*</span> Wajib diisi.
-            </Col>
+          <Col md={12}>
+            <span style={{ color: "red" }}>*</span> Wajib diisi.
+          </Col>
         </Row>
         <Row>
           <Col>
diff --git a/src/views/Master/MasterMenu/index.js b/src/views/Master/MasterMenu/index.js
index 7c0e9bc..88919c4 100644
--- a/src/views/Master/MasterMenu/index.js
+++ b/src/views/Master/MasterMenu/index.js
@@ -10,7 +10,6 @@ import { NotificationContainer, NotificationManager } from 'react-notifications'
 import { Pagination, Tooltip, Table } from 'antd';
 import { useTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
-
 const column = [
   { name: "Nama" },
   { name: "Url" },
@@ -68,20 +67,20 @@ const Index = ({ params }) => {
 
   const getDataAllMenu = async () => {
     const result = await axios
-			.get(MENU_LIST, config)
-			.then(res => res)
-			.catch((error) => error.response);
+      .get(MENU_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
 
     if (result && result.data && result.data.code == 200) {
       let arr = []
       let dataRes = result.data.data;
       for (const v in dataRes) {
-				arr.push(dataRes[v])
-			}
+        arr.push(dataRes[v])
+      }
       setAllDataMenu(arr);
-    }else {
-			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
-		}
+    } else {
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+    }
   }
 
   const getDataMenu = async () => {
diff --git a/src/views/Master/MasterRoles/DialogForm.js b/src/views/Master/MasterRoles/DialogForm.js
index a33f686..4bc3ab1 100644
--- a/src/views/Master/MasterRoles/DialogForm.js
+++ b/src/views/Master/MasterRoles/DialogForm.js
@@ -9,6 +9,7 @@ import { MENU_SEARCH } from '../../../const/ApiConst.js';
 
 const { Option } = Select
 const token = window.localStorage.getItem('token');
+const company_id = localStorage.getItem("company_id")
 const config = {
   headers:
   {
@@ -27,7 +28,8 @@ class DialogForm extends Component {
       openDialog: false,
       isParentClick: false,
       menu: [],
-      selectedMenu: null
+      selectedMenu: null,
+      company_id
     }
   }
 
@@ -44,7 +46,8 @@ class DialogForm extends Component {
           id: dataEdit.id,
           name: dataEdit.name,
           description: dataEdit.description,
-          selectedMenu: dataEdit.default_page
+          selectedMenu: dataEdit.default_page,
+          company_id
         })
       } else {
         this.setState({
@@ -96,26 +99,30 @@ class DialogForm extends Component {
       id,
       name,
       description,
-      selectedMenu
+      selectedMenu,
+      company_id
     } = this.state
 
     let data = '';
     const err = this.validation();
-    if(!err) {
+    if (!err) {
       if (this.props.typeDialog === "Save") {
         data = {
           id,
           name,
           description,
-          selectedMenu
+          selectedMenu,
+          company_id
         }
+        // console.log('data', data);
         this.props.closeDialog('save', data);
       } else {
         data = {
           id,
           name,
           description,
-          selectedMenu
+          selectedMenu,
+          company_id
         }
         this.props.closeDialog('edit', data);
       }
@@ -144,13 +151,13 @@ class DialogForm extends Component {
               <Label>{this.props.t('nameRole')}<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
             </FormGroup>
-            </Col>
+          </Col>
           <Col md={12}>
             <FormGroup>
               <Label>{this.props.t('description')}<span style={{ color: "red" }}>*</span></Label>
               <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
             </FormGroup>
-            </Col>
+          </Col>
           <Col md={12}>
             <FormGroup>
               <Label>Default Page<span style={{ color: "red" }}>*</span></Label>
@@ -165,7 +172,7 @@ class DialogForm extends Component {
                 ))}
               </Input>
             </FormGroup>
-            </Col>
+          </Col>
         </Row>
       </Form>
     )
diff --git a/src/views/Master/MasterRoles/index.js b/src/views/Master/MasterRoles/index.js
index 332f3c8..af94704 100644
--- a/src/views/Master/MasterRoles/index.js
+++ b/src/views/Master/MasterRoles/index.js
@@ -12,6 +12,9 @@ import { ROLE_ADD, ROLE_SEARCH, ROLE_EDIT, ROLE_DELETE, ROLEMENU_ADD, ROLEMENU_S
 import { withTranslation } from 'react-i18next';
 
 const token = window.localStorage.getItem('token');
+const company_id = window.localStorage.getItem('company_id');
+const role_name = window.localStorage.getItem('role_name');
+
 
 const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
 
@@ -55,6 +58,7 @@ class index extends Component {
 			tooltipTambah: false,
 			totalPage: 0,
 			typeDialog: 'Save',
+			company_id: company_id
 		}
 
 		this.columns = [
@@ -108,12 +112,20 @@ class index extends Component {
 		const formData = {
 			"paging": { "start": start, "length": this.state.rowsPerPage },
 			"columns": [
-				{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
+				{ "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" },
 			],
 			"joins": [],
 			"orders": { "columns": ["id"], "ascending": false }
 		}
-
+		if (role_name !== "Super Admin") {
+			formData.columns.push(
+				{ "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" },
+			)
+		} else {
+			formData.columns.push(
+				{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+			)
+		}
 		const result = await axios
 			.post(ROLE_SEARCH, formData, config)
 			.then(res => res)
@@ -165,9 +177,9 @@ class index extends Component {
 			.catch((error) => error.response);
 
 		if (result && result.data && result.data.code === 200) {
-      await this.deleteCurrentRoleMenu(idDelete);
-      this.getDataRoles();
-      this.setState({ idDelete: 0, alertDelete: false })
+			await this.deleteCurrentRoleMenu(idDelete);
+			this.getDataRoles();
+			this.setState({ idDelete: 0, alertDelete: false })
 			NotificationManager.success(`Data role berhasil dihapus`, 'Success!!');
 		} else {
 			this.setState({ idDelete: 0, alertDelete: false })
@@ -180,7 +192,8 @@ class index extends Component {
 		const formData = {
 			name: data.name,
 			description: data.description,
-      default_page : data.selectedMenu
+			default_page: data.selectedMenu,
+			company_id: company_id
 		}
 
 		const result = await axios.post(ROLE_ADD, formData, config)
@@ -200,7 +213,7 @@ class index extends Component {
 		const formData = {
 			name: data.name,
 			description: data.description,
-      default_page: data.selectedMenu
+			default_page: data.selectedMenu
 		}
 		const url = ROLE_EDIT(data.id)
 		const result = await axios.put(url, formData, config)
diff --git a/src/views/Master/ProjectPhase/DialogForm.js b/src/views/Master/ProjectPhase/DialogForm.js
index 6010f09..c079bba 100644
--- a/src/views/Master/ProjectPhase/DialogForm.js
+++ b/src/views/Master/ProjectPhase/DialogForm.js
@@ -8,6 +8,7 @@ import InputColor from "./InputColor";
 import "./styles.css";
 import "rc-color-picker/assets/index.css";
 import { useTranslation } from 'react-i18next';
+const company_id = localStorage.getItem("company_id")
 const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
   const [id, setId] = useState(0)
   const [projectType, setProjectType] = useState('')
@@ -31,14 +32,16 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     if (typeDialog === "Save") {
       data = {
         name: projectType,
-        color
+        color,
+        company_id
       }
       closeDialog('save', data);
     } else {
       data = {
         id,
         name: projectType,
-        color
+        color,
+        company_id
       }
       closeDialog('edit', data);
     }
diff --git a/src/views/Master/ProjectPhase/index.js b/src/views/Master/ProjectPhase/index.js
index 5df51ef..56a3821 100644
--- a/src/views/Master/ProjectPhase/index.js
+++ b/src/views/Master/ProjectPhase/index.js
@@ -10,6 +10,8 @@ import { PROJECT_PHASE_ADD, PROJECT_PHASE_EDIT, PROJECT_PHASE_DELETE, PROJECT_PH
 import { Pagination, Button, Tooltip, Table } from 'antd';
 import { useTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
+const company_id = window.localStorage.getItem('company_id');
+const role_name = window.localStorage.getItem('role_name');
 const config = {
   headers:
   {
@@ -20,6 +22,7 @@ const config = {
 
 const ProjectPhase = ({ params }) => {
   const token = localStorage.getItem("token")
+  const company_id = localStorage.getItem("company_id")
   /*const HEADER = {
     headers: {
       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
@@ -87,7 +90,15 @@ const ProjectPhase = ({ params }) => {
         "start": start
       }
     }
-    // let url = `${BASE_OSPRO}/api/project-phase/list?start=${start}&length=${rowsPerPage}&orderby=id&asc=false&column=name&logic=ilike&value=${search}`
+    if (role_name !== "Super Admin") {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+      )
+    } else {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+    }
     const result = await axios
       .post(PROJECT_PHASE_SEARCH, payload, HEADER)
       .then((res) => res)
diff --git a/src/views/Master/RoleProject/DialogForm.js b/src/views/Master/RoleProject/DialogForm.js
index 307ed1b..c7a417e 100644
--- a/src/views/Master/RoleProject/DialogForm.js
+++ b/src/views/Master/RoleProject/DialogForm.js
@@ -3,7 +3,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import 'antd/dist/antd.css';
 import { withTranslation } from 'react-i18next';
-
+const company_id = localStorage.getItem("company_id")
 class DialogForm extends Component {
   constructor(props) {
     super(props)
@@ -13,6 +13,7 @@ class DialogForm extends Component {
       description: "",
       openDialog: false,
       isParentClick: false,
+      company_id
     }
   }
 
@@ -27,7 +28,8 @@ class DialogForm extends Component {
         this.setState({
           id: dataEdit.id,
           name: dataEdit.name,
-          description: dataEdit.description
+          description: dataEdit.description,
+          company_id
         })
       } else {
         this.setState({
@@ -58,14 +60,16 @@ class DialogForm extends Component {
       data = {
         id,
         name,
-        description
+        description,
+        company_id
       }
       this.props.closeDialog('save', data);
     } else {
       data = {
         id,
         name,
-        description
+        description,
+        company_id
       }
       this.props.closeDialog('edit', data);
     }
diff --git a/src/views/Master/RoleProject/index.js b/src/views/Master/RoleProject/index.js
index 01b6663..d96c1d7 100644
--- a/src/views/Master/RoleProject/index.js
+++ b/src/views/Master/RoleProject/index.js
@@ -10,7 +10,8 @@ import { PROJECT_ROLE_ADD, PROJECT_ROLE_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_
 import { Pagination, Tooltip, Table } from 'antd';
 import { withTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
-
+const company_id = localStorage.getItem("company_id")
+const role_name = window.localStorage.getItem('role_name');
 const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
 
 const config = {
@@ -60,6 +61,7 @@ class index extends Component {
       tooltipTambah: false,
       totalPage: 0,
       typeDialog: 'Save',
+      company_id
     }
     this.columns = [
       {
@@ -108,12 +110,20 @@ class index extends Component {
     const formData = {
       "paging": { "start": start, "length": this.state.rowsPerPage },
       "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" }
+        { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND" },
       ],
       "joins": [],
       "orders": { "columns": ["id"], "ascending": false }
     }
-
+    if (role_name !== "Super Admin") {
+      formData.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" },
+      )
+    } else {
+      formData.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+    }
     const result = await axios
       .post(PROJECT_ROLE_SEARCH, formData, config)
       .then(res => res)
@@ -178,7 +188,8 @@ class index extends Component {
 
     const formData = {
       name: data.name,
-      description: data.description
+      description: data.description,
+      company_id
     }
 
     const result = await axios.post(PROJECT_ROLE_ADD, formData, config)
@@ -198,7 +209,8 @@ class index extends Component {
 
     const formData = {
       name: data.name,
-      description: data.description
+      description: data.description,
+      company_id
     }
     const url = PROJECT_ROLE_EDIT(data.id)
     const result = await axios.put(url, formData, config)
diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js
index e0c67bf..9b64976 100644
--- a/src/views/Pages/Login/Login.js
+++ b/src/views/Pages/Login/Login.js
@@ -37,7 +37,7 @@ import logo_login_adw from '../../../assets/img/logo_adyawinsa.jpg'
 import logo_login_kit from '../../../assets/img/logo_kit.png'
 import logo_login_nawakara from '../../../assets/img/logo_nawakara.png'
 import logo_login_si from '../../../assets/img/logo-surveyor-indonesia.png'
-
+import logo_ospro from '../../../assets/img/OSPRO.png'
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
@@ -66,7 +66,7 @@ class Login extends Component {
 			},
 			loader: false,
 			type: 'password',
-      defaultPage: ''
+			defaultPage: ''
 		}
 		this.handleChange = this.handleChange.bind(this);
 		this.showHide = this.showHide.bind(this);
@@ -98,8 +98,8 @@ class Login extends Component {
 		});
 	}
 
-  getDataRole = async (token, role_id) => {
-    const config = {
+	getDataRole = async (token, role_id) => {
+		const config = {
 			headers:
 			{
 				Authorization: `Bearer ${token}`,
@@ -113,12 +113,12 @@ class Login extends Component {
 				{ "name": "id", "logic_operator": "=", "value": `${role_id}`, "operator": "AND" }
 			],
 			"joins": [
-          {
-            "name": "m_menu",
-            "column_join": "default_page",
-            "column_results": ["id", "name", "url"],
-          },
-      ],
+				{
+					"name": "m_menu",
+					"column_join": "default_page",
+					"column_results": ["id", "name", "url"],
+				},
+			],
 			"orders": { "columns": ["id"], "ascending": false }
 		}
 
@@ -129,11 +129,11 @@ class Login extends Component {
 
 		if (result && result.data && result.data.code == 200) {
 			let resData = result.data.data
-      this.setState({defaultPage: resData[0].join_first_url})
+			this.setState({ defaultPage: resData[0].join_first_url })
 		}
-  }
+	}
 
-	getDataMenu = async (token, role_id,user_id) => {
+	getDataMenu = async (token, role_id, user_id) => {
 		const config = {
 			headers:
 			{
@@ -157,28 +157,28 @@ class Login extends Component {
 				this.props.history.push("/dashboard-customer/58/63");
 			}
 			else {
-        this.props.history.push({
-          pathname: "/dashboard",
-          state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
-        });
+				this.props.history.push({
+					pathname: "/dashboard",
+					state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+				});
 			}
-      if (this.state.defaultPage) {
-        if (role_id === 44) {
-          this.props.history.push({
-            pathname: this.state.defaultPage,
-            state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
-          });
-        } else {
-          this.props.history.push(this.state.defaultPage);
-        }
-      } else if (role_id == 28) {
+			if (this.state.defaultPage) {
+				if (role_id === 44) {
+					this.props.history.push({
+						pathname: this.state.defaultPage,
+						state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+					});
+				} else {
+					this.props.history.push(this.state.defaultPage);
+				}
+			} else if (role_id == 28) {
 				this.props.history.push("/dashboard-customer/58/63");
 			}
 			else {
 				this.props.history.push({
-          pathname: "/dashboard",
-          state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
-        });
+					pathname: "/dashboard",
+					state: { role_id: role_id, user_id: user_id, token: token, isLogin: true }
+				});
 			}
 		} else {
 			NotificationManager.error('Login Failed', 'Failed');
@@ -221,15 +221,17 @@ class Login extends Component {
 
 		if (doLogin && doLogin.data && doLogin.data.code === 200) {
 			const { access_token, data_user } = doLogin.data.data
-      this.getDataRole(access_token, data_user.role_id)
+			this.getDataRole(access_token, data_user.role_id)
 			this.getDataMenu(access_token, data_user.role_id, data_user.id)
 			window.localStorage.setItem('isLogin', true);
 			window.localStorage.setItem('token', access_token);
 			window.localStorage.setItem('user_id', data_user.id);
 			window.localStorage.setItem('user_name', data_user.name);
 			window.localStorage.setItem('role_id', data_user.role_id);
+			window.localStorage.setItem('company_id', data_user.company_id);
+			window.localStorage.setItem('role_name', data_user.role.name);
+			window.localStorage.setItem('hierarchy', JSON.stringify(data_user.hierarchy));
 		} else {
-			console.log("kode : ", doLogin.data.code);
 			// NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
 			NotificationManager.error(doLogin.data.message, 'Login Failed!');
 			this.setState({ loader: false });
@@ -279,7 +281,7 @@ class Login extends Component {
 	}
 
 	getLoginLogo = () => {
-		return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_login_adw} /></div>
+		return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_ospro} /></div>
 	}
 
 	getLoginSlider = () => {
diff --git a/src/views/Pages/Login/Login.js.save b/src/views/Pages/Login/Login.js.save
new file mode 100644
index 0000000..017917f
--- /dev/null
+++ b/src/views/Pages/Login/Login.js.save
@@ -0,0 +1,345 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider from "react-slick";
+import { Spin } from 'antd';
+import { Checkbox } from 'antd';
+import { LoadingOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import {
+	Button,
+	Card,
+	CardBody,
+	CardGroup,
+	Col,
+	Container,
+	Form,
+	Input,
+	InputGroup,
+	InputGroupAddon,
+	InputGroupText,
+	Row,
+	UncontrolledAlert,
+	Alert,
+	Carousel,
+	CarouselIndicators,
+	CarouselCaption,
+	CarouselItem,
+	CarouselControl
+} from 'reactstrap';
+import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE } from '../../../const/ApiConst.js';
+import { appConfig, reloadConstants } from '../../../const/MapConst.js';
+import { APP_NAME } from '../../../const/AppConst.js'
+import moment from "moment"
+import axios from 'axios';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import logo_login_adw from '../../../assets/img/logo_adyawinsa.jpg'
+import logo_login_kit from '../../../assets/img/logo_kit.png'
+import logo_login_nawakara from '../../../assets/img/logo_nawakara.png'
+import logo_login_si from '../../../assets/img/logo-surveyor-indonesia.png'
+import logo_ospro from '../../../assets/img/OSPRO.png'
+
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+const settings = {
+	dots: true,
+	infinite: true,
+	speed: 500,
+	arrows: false,
+	autoplay: true,
+	slidesToShow: 1,
+	slidesToScroll: 1
+};
+
+class Login extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			name: '',
+			password: '',
+			remember: '',
+			alertVisible: false,
+			alertMessage: '',
+			alertColor: 'success',
+			validate: {
+				emailState: '',
+			},
+			loader: false,
+			type: 'password'
+		}
+		this.handleChange = this.handleChange.bind(this);
+		this.showHide = this.showHide.bind(this);
+	}
+	showHide(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			type: this.state.type === 'input' ? 'password' : 'input'
+		})
+	}
+	validateEmail(e) {
+		const emailRex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		const { validate } = this.state
+		if (emailRex.test(e.target.value)) {
+			validate.emailState = 'has-success'
+		} else {
+			validate.emailState = 'has-danger'
+		}
+		this.setState({ validate })
+	}
+
+	handleChange = async (event) => {
+		const { target } = event;
+		const value = target.type === 'checkbox' ? target.checked : target.value;
+		const { name } = target;
+		await this.setState({
+			[name]: value,
+		});
+	}
+
+	getDataMenu = async (token, role_id) => {
+		const config = {
+			headers:
+			{
+				Authorization: `Bearer ${token}`,
+				"Content-type": `application/json`
+			}
+		};
+
+		let url = MENU_MANAGEMENT(role_id)
+		const result = await axios
+			.get(url, config)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code == 200) {
+			let resData = result.data.data
+			window.localStorage.setItem('menu_login', JSON.stringify(resData));
+			this.setState({ loader: false })
+			// custom redirect home after login
+			if (role_id == 28) {
+				this.props.history.push("/dashboard-customer/58/63");
+			}
+			else {
+				this.props.history.push("/dashboard");
+			}
+		} else {
+			NotificationManager.error('Login Failed', 'Failed');
+			this.setState({ loader: false })
+		}
+	}
+
+	submitForm = (event) => {
+		event.preventDefault();
+		this.submitFormLogin();
+	}
+
+	submitFormLogin = async () => {
+		this.setState({ loader: true })
+		const { name, password, remember } = this.state
+
+		if (name === '') {
+			NotificationManager.error('Please fill username', 'Login Failed!');
+			this.setState({ loader: false })
+			return false;
+		}
+
+		if (password === '') {
+			NotificationManager.error('Please fill password', 'Login Failed!');
+			this.setState({ loader: false })
+			return false;
+		}
+
+		let formData = {
+			username: name,
+			password,
+			remember,
+		}
+
+		const doLogin = await axios.post(USER_LOGIN_V2, formData)
+			.then(response => response)
+			.catch(error => {
+				this.setState({ loader: false });
+			});
+
+		if (doLogin && doLogin.data && doLogin.data.code === 200) {
+			const { access_token, data_user } = doLogin.data.data
+			this.getDataMenu(access_token, data_user.role_id)
+			window.localStorage.setItem('isLogin', true);
+			window.localStorage.setItem('token', access_token);
+			window.localStorage.setItem('user_id', data_user.id);
+			window.localStorage.setItem('user_name', data_user.name);
+			window.localStorage.setItem('role_id', data_user.role_id);
+		} else {
+			console.log("kode : ", doLogin.data.code);
+			// NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
+			NotificationManager.error(doLogin.data.message, 'Login Failed!');
+			this.setState({ loader: false });
+		}
+
+	}
+
+	getConfigAlert = async (token, user_id) => {
+		const config = {
+			headers:
+			{
+				Authorization: `Bearer ${token}`,
+				"Content-type": `application/json`
+			}
+		};
+
+		const payload = {
+			"paging": { "start": 0, "length": -1 },
+			"columns": [
+				{ "name": "user_id", "logic_operator": "=", "value": `${user_id}`, "operator": "AND" }
+			],
+			"joins": [],
+			"orders": { "columns": ["id"], "ascending": false }
+		}
+
+		const result = await axios
+			.post(CALERTUSER_SEARCH, payload, config)
+			.then(res => res)
+			.catch((error) => error.response);
+
+		if (result && result.data && result.data.code == 200) {
+			let resData = result.data.data
+			let configAlert = []
+			resData.map((val, index) => {
+				configAlert.push(val.config_alert_id);
+			});
+			window.localStorage.setItem('userConfigAlert', configAlert.join());
+		}
+	}
+
+	onShowAlert = (alertColor, alertMessage) => {
+		this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => {
+			window.setTimeout(() => {
+				this.setState({ alertVisible: false })
+			}, 3000)
+		});
+	}
+
+	getLoginLogo = () => {
+		return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_ospro} /></div>
+	}
+
+	getLoginSlider = () => {
+		return <Slider {...settings} >
+			<div>
+				<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
+			</div>
+			<div>
+				<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
+			</div>
+			<div>
+				<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
+			</div>
+			<div>
+				<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
+			</div>
+		</Slider>
+	}
+
+	onChecked = (e) => {
+		this.setState({ remember: e.target.checked })
+	};
+
+	render() {
+		const { name, password, remember } = this.state;
+		const u_group = window.localStorage.getItem('u_group')
+		if (u_group !== null) {
+			this.props.history.push("/dashboard");
+		}
+		return (
+			<div className="app flex-row align-items-center">
+				<Container>
+					<NotificationContainer />
+
+					<Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
+						{this.state.alertMessage}
+					</Alert>
+					<Row className="justify-content-center">
+						<Col md="7">
+							{this.getLoginSlider()}
+						</Col>
+						<Col md="5">
+							<div style={{
+								boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)'
+							}}>
+								<CardGroup>
+									<Card className="p-4">
+										<CardBody>
+											<Form onSubmit={this.submitForm}>
+												{this.getLoginLogo()} <p className="text-muted">Sign In to your account</p> <InputGroup className="mb-3">
+													<InputGroupAddon addonType="prepend">
+														<InputGroupText>
+															<i className="icon-user"></i>
+														</InputGroupText>
+													</InputGroupAddon>
+													<Input
+														type="text"
+														name="name"
+														id="exampleName"
+														placeholder="Username"
+														value={name}
+														onChange={(e) => {
+															this.setState({ name: e.target.value })
+														}}
+													/>
+												</InputGroup>
+												<InputGroup className="mb-4">
+													<InputGroupAddon addonType="prepend">
+														<InputGroupText>
+															<i className="icon-lock"></i>
+														</InputGroupText>
+													</InputGroupAddon>
+													<Input
+														type={this.state.type}
+														name="password"
+														id="examplePassword"
+														placeholder="********"
+														value={password}
+														onChange={(e) => this.setState({ password: e.target.value })}
+													/>
+													<InputGroupAddon addonType="prepend">
+														<InputGroupText
+															onClick={this.showHide}
+														>
+															{this.state.type === 'input' ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+
+														</InputGroupText>
+													</InputGroupAddon>
+													<span className="password__show" ></span>
+												</InputGroup>
+												<Row>
+													<Col xs="8">
+														<Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox>
+													</Col>
+													<Col xs="4">
+														{this.state.loader ? (
+															<Spin indicator={antIcon} />
+														) : (
+															<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
+														)}
+													</Col>
+												</Row>
+												<Row>
+													<Col className="text-right mt-5">
+														<Button color="link" className="px-0">Forgot password?</Button>
+													</Col>
+												</Row>
+											</Form>
+										</CardBody>
+									</Card>
+								</CardGroup>
+							</div>
+						</Col>
+					</Row>
+				</Container>
+			</div>
+		);
+	}
+}
+
+export default Login;
diff --git a/src/views/SimproV2/ChecklistK3/index.js b/src/views/SimproV2/ChecklistK3/index.js
index 1f6c540..1b65b7f 100644
--- a/src/views/SimproV2/ChecklistK3/index.js
+++ b/src/views/SimproV2/ChecklistK3/index.js
@@ -12,6 +12,8 @@ import {
 import { useTranslation } from 'react-i18next';
 
 const token = window.localStorage.getItem('token');
+const role_name = window.localStorage.getItem('role_name');
+const company_id = window.localStorage.getItem('company_id');
 const config = {
   headers:
   {
@@ -87,6 +89,17 @@ const ChecklistK3 = ({ params }) => {
         "start": start
       }
     }
+
+    if (role_name !== "Super Admin") {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+      )
+    } else {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+    }
+
     const result = await axios
       .post(CHECKLIST_K3_SEARCH, payload, config)
       .then(res => res)
diff --git a/src/views/SimproV2/CreatedProyek/index.js b/src/views/SimproV2/CreatedProyek/index.js
index e7b59d5..d67916b 100644
--- a/src/views/SimproV2/CreatedProyek/index.js
+++ b/src/views/SimproV2/CreatedProyek/index.js
@@ -96,20 +96,19 @@ const url = "";
 const format = "DD-MM-YYYY";
 
 const CreatedProyek = ({ params, ...props }) => {
-  let role_id = '', user_id='',proyek_id='',isLogin='',token='';
+  let role_id = '', user_id = '', proyek_id = '', isLogin = '', token = '';
   if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
     role_id = props.location.state.role_id;
     user_id = props.location.state.user_id;
     token = props.location.state.token;
     isLogin = props.location.state.isLogin;
-    console.log('props.location.state success');
+
   } else {
     role_id = localStorage.getItem("role_id");
     proyek_id = localStorage.getItem("proyek_id");
     user_id = localStorage.getItem("user_id");
     token = localStorage.getItem("token");
     isLogin = localStorage.getItem("isLogin");
-    console.error('Undefined in props.location.state');
   }
   const history = useHistory();
   const HEADER = {
@@ -210,7 +209,10 @@ const CreatedProyek = ({ params, ...props }) => {
   }, [openDialogProyek]);
 
   useEffect(() => {
-    parseInt(role_id) !== 44 ? getDataProyek() : getDataProyekByCustomer();
+    if (parseInt(role_id) === 44) {
+      getDataProyekByCustomer()
+    }
+    getDataProyek();
   }, [search, rowsPerPage, currentPage]);
 
   useEffect(() => {
@@ -303,7 +305,8 @@ const CreatedProyek = ({ params, ...props }) => {
 
   const getDataProyek = async () => {
     let start = 0;
-
+    let hierarchy = [];
+    hierarchy.push(JSON.parse(localStorage.getItem("hierarchy")));
     if (currentPage !== 1 && currentPage > 1) {
       start = currentPage * rowsPerPage - rowsPerPage;
     }
@@ -346,6 +349,7 @@ const CreatedProyek = ({ params, ...props }) => {
     if (parseInt(role_id) !== 1) {
       payload["columns"] = [
         { name: "id", logic_operator: "=", value: proyek_id, operator: "AND" },
+        { name: "created_by_id", logic_operator: "IN", value: hierarchy, operator: "AND" }
       ];
     }
 
@@ -586,7 +590,7 @@ const CreatedProyek = ({ params, ...props }) => {
         "checklist_k3_id"
       ],
       "columns": [
-          { "name": "proyek_id", "logic_operator": "=", "value": id, "operator": "AND" }
+        { "name": "proyek_id", "logic_operator": "=", "value": id, "operator": "AND" }
       ]
     }
     const URL = `${BASE_OSPRO}/api/project-to-checklist-k3/search`;
@@ -595,11 +599,11 @@ const CreatedProyek = ({ params, ...props }) => {
       .then(res => res)
       .catch((error) => error.response);
 
-    if(result && result.status==200){
-        console.log("cek get project to checklist k3",result.data.data)
+    if (result && result.status == 200) {
+      console.log("cek get project to checklist k3", result.data.data)
       let dataRes = result.data.data;
       if (dataRes.length > 0) {
-          setK3Search(dataRes);
+        setK3Search(dataRes);
       }
     }
   }
@@ -627,8 +631,8 @@ const CreatedProyek = ({ params, ...props }) => {
       .catch((error) => error.response);
 
     if (result && result.data && result.data.code == 200) {
-      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};
+      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");
@@ -712,7 +716,7 @@ const CreatedProyek = ({ params, ...props }) => {
     if (result && result.data && result.data.code === 200) {
       setLoading(false)
       setProjectImage(result.data.data);
-    }else{
+    } else {
       setLoading(false)
     }
   }
@@ -1115,7 +1119,7 @@ const CreatedProyek = ({ params, ...props }) => {
       .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART)
       .then(res => res)
       .catch((error) => error.response);
-      return "berhasil";
+    return "berhasil";
   };
 
   const deleteImage = async (id) => {
@@ -1125,7 +1129,7 @@ const CreatedProyek = ({ params, ...props }) => {
       .delete(URL, HEADER)
       .then(res => res)
       .catch((error) => error.response);
-      return "berhasil";
+    return "berhasil";
   };
 
   const editProyek = async (data) => {
@@ -1520,16 +1524,16 @@ const CreatedProyek = ({ params, ...props }) => {
 					<span className="menu-text">Request Tools</span>
 				</div> */}
         {/* <Link to={`/project-charter/${text.id}/gantt`}> */}
-				{
-				/*text.type_proyek_id != 9 ?*/
-        <div className="menu-list" onClick={() => handleOpenDialogGantt(text)}>
-          <span className="menu-icon">
-            <i className="fa fa-bars"></i>
-          </span>
-          <span className="menu-text">Gantt</span>
-        </div>
-				/*: null*/
-				}
+        {
+          /*text.type_proyek_id != 9 ?*/
+          <div className="menu-list" onClick={() => handleOpenDialogGantt(text)}>
+            <span className="menu-icon">
+              <i className="fa fa-bars"></i>
+            </span>
+            <span className="menu-text">Gantt</span>
+          </div>
+          /*: null*/
+        }
         <div className="menu-list" onClick={() => handleSCurve(text)}>
           <span className="menu-icon">
             <i className="fa fa-line-chart"></i>
@@ -1629,7 +1633,7 @@ const CreatedProyek = ({ params, ...props }) => {
         dataIndex: "",
         key: "x",
         render: (text, record) =>
-        parseInt(role_id) == 44 ? (
+          parseInt(role_id) == 44 ? (
             <>
               <Tooltip title="Dashboard Project">
                 <Button
@@ -2049,12 +2053,12 @@ const CreatedProyek = ({ params, ...props }) => {
                       </Button>
                     </>
                   }
-                  // visible={visible}
-                  // onVisibleChange={handleVisibleChange}
+                // visible={visible}
+                // onVisibleChange={handleVisibleChange}
                 >
                   <Button
                     style={{ marginLeft: "5px" }}
-                    // onClick={() => handleExportExcel()}
+                  // onClick={() => handleExportExcel()}
                   >
                     <i className="fa fa-print"></i>
                   </Button>
diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js
index 17e576a..89b0b79 100644
--- a/src/views/SimproV2/Divisi/index.js
+++ b/src/views/SimproV2/Divisi/index.js
@@ -12,6 +12,8 @@ import { useTranslation } from 'react-i18next';
 const url = "";
 const proyek_id = localStorage.getItem('proyek_id');
 const role_id = localStorage.getItem('role_id');
+const company_id = localStorage.getItem("company_id")
+const role_name = window.localStorage.getItem('role_name');
 const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
 const config = {
@@ -55,7 +57,7 @@ const ProjectType = ({ params }) => {
 	const { t } = useTranslation()
 
 	useEffect(() => {
-    getDataProjectType();
+		getDataProjectType();
 	}, [currentPage, rowsPerPage, search])
 
 	useEffect(() => {
@@ -73,9 +75,9 @@ const ProjectType = ({ params }) => {
 
 		if (listDivions && listDivions.data && listDivions.data.code == 200) {
 			let arr = []
-      let dataRes = listDivions.data.data;
-      const filteredData = dataRes.filter(item => item.parent === null);
-      for (const v in filteredData) {
+			let dataRes = listDivions.data.data;
+			const filteredData = dataRes.filter(item => item.parent === null);
+			for (const v in filteredData) {
 				arr.push(filteredData[v])
 			}
 			setDataDivisions(arr);
@@ -86,8 +88,8 @@ const ProjectType = ({ params }) => {
 	const getDataProjectType = async () => {
 		let start = 0;
 		if (currentPage !== 1 && currentPage > 1) {
-      start = currentPage * rowsPerPage - rowsPerPage;
-    }
+			start = currentPage * rowsPerPage - rowsPerPage;
+		}
 		const payload = {
 			columns: [
 				{
@@ -95,7 +97,7 @@ const ProjectType = ({ params }) => {
 					logic_operator: "ilike",
 					value: search,
 					operator: "AND"
-				}
+				},
 			],
 			"orders": {
 				"ascending": true,
@@ -108,15 +110,25 @@ const ProjectType = ({ params }) => {
 				"start": start
 			}
 		}
+
+		if (role_name !== "Super Admin") {
+			payload.columns.push(
+				{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+			)
+		} else {
+			payload.columns.push(
+				{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+			)
+		}
 		const result = await axios
 			.post(DIVISI_SEARCH, payload, HEADER)
 			.then(res => res)
 			.catch((error) => error.response);
 
 		if (result && result.data && result.data.code == 200) {
-      let dataRes = result.data.data || [];
-      setDatatable(dataRes);
-      setTotalPage(result.data.totalRecord);
+			let dataRes = result.data.data || [];
+			setDatatable(dataRes);
+			setTotalPage(result.data.totalRecord);
 		} else {
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
@@ -186,8 +198,8 @@ const ProjectType = ({ params }) => {
 	};
 
 	const handleOpenDialog = (type) => {
-    setOpenDialog(true)
-    getListDivision();
+		setOpenDialog(true)
+		getListDivision();
 		setTypeDialog(type)
 	}
 
@@ -277,7 +289,7 @@ const ProjectType = ({ params }) => {
 		if (dataTable.length === 0) {
 			return (
 				<tr>
-					<td align="center" colSpan="3">{t('noData')}</td>
+					<td align="center" colSpan="4">{t('noData')}</td>
 				</tr>
 			)
 		}
@@ -352,16 +364,16 @@ const ProjectType = ({ params }) => {
 											</Tooltip>
 										</td>
 										<td>{n.name}</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>
-                     )}
+										<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>
 								)
 							})}
diff --git a/src/views/SimproV2/Gantt/GanttFrame.js b/src/views/SimproV2/Gantt/GanttFrame.js
index ec90a85..5fb6987 100644
--- a/src/views/SimproV2/Gantt/GanttFrame.js
+++ b/src/views/SimproV2/Gantt/GanttFrame.js
@@ -20,9 +20,7 @@ const GanttFrame = React.memo((props) => {
   }
   const history = useHistory();
   const { versionGanttId, idProject, ro, timestamp } = props;
-  const iframeSrc = `https://adw-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}&timestamp=${timestamp}`;
-
-
+  const iframeSrc = `https://konstruksi-gantt.ospro.id/edit-mode/index.html?base_url=${BASE_SIMPRO_LUMEN}&gantt_id=${versionGanttId}&proyek_id=${idProject}&token=${token}&ro=${ro}&timestamp=${timestamp}`;
   const [batchEntityData, setBatchEntityData] = useState(null);
 
   useEffect(() => {
diff --git a/src/views/SimproV2/ProjectType/DialogForm.js b/src/views/SimproV2/ProjectType/DialogForm.js
index 24a7ca1..054e8fb 100644
--- a/src/views/SimproV2/ProjectType/DialogForm.js
+++ b/src/views/SimproV2/ProjectType/DialogForm.js
@@ -9,6 +9,7 @@ import moment from 'moment';
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 const { Option } = Select
+const company_id = window.localStorage.getItem('company_id');
 
 const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
   const [id, setId] = useState(0)
@@ -39,7 +40,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     if (typeDialog === "Save") {
       data = {
         name: projectType,
-        description
+        description,
+        company_id
       }
 
       closeDialog('save', data);
@@ -47,7 +49,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       data = {
         id,
         name: projectType,
-        description
+        description,
+        company_id
       }
       closeDialog('edit', data);
     }
diff --git a/src/views/SimproV2/ProjectType/index.js b/src/views/SimproV2/ProjectType/index.js
index c770f8a..408fb93 100644
--- a/src/views/SimproV2/ProjectType/index.js
+++ b/src/views/SimproV2/ProjectType/index.js
@@ -16,6 +16,8 @@ const proyek_id = localStorage.getItem('proyek_id');
 const role_id = localStorage.getItem('role_id');
 const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
+const company_id = window.localStorage.getItem('company_id');
+const role_name = window.localStorage.getItem('role_name');
 const config = {
   headers:
   {
@@ -94,7 +96,15 @@ const ProjectType = ({ params }) => {
         "start": start
       }
     }
-
+    if (role_name !== "Super Admin") {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+      )
+    } else {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+    }
     const result = await axios
       .post(PROJECT_TYPE_SEARCH, payload, config, HEADER)
       .then(res => res)
diff --git a/src/views/SimproV2/ResourceWorker/DialogForm.js b/src/views/SimproV2/ResourceWorker/DialogForm.js
index 5c4bb67..16f108a 100644
--- a/src/views/SimproV2/ResourceWorker/DialogForm.js
+++ b/src/views/SimproV2/ResourceWorker/DialogForm.js
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 const { Option } = Select
 
 const token = window.localStorage.getItem('token');
+const company_id = localStorage.getItem("company_id")
 const config = {
   headers:
   {
@@ -117,7 +118,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         divisi_id: divisionId,
         address,
         status_resource: statusResource,
-        status_boundary: statusRestriction
+        status_boundary: statusRestriction,
+        company_id: company_id
       }
       console.log(data)
 
@@ -165,7 +167,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         divisi_id: divisionId,
         address,
         status_resource: statusResource,
-        status_boundary: statusRestriction
+        status_boundary: statusRestriction,
+        company_id: company_id
       }
 
       if (birthDate && birthDate != "") {
@@ -254,11 +257,11 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
             <FormGroup>
               <Label className="capitalize">Email</Label>
               <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')}
-              onBlur={(e) => {
-                if (!isValidEmail(e.target.value)) {
-                  alert("Masukkan email yang valid.");
-                }
-              }}
+                onBlur={(e) => {
+                  if (!isValidEmail(e.target.value)) {
+                    alert("Masukkan email yang valid.");
+                  }
+                }}
               />
             </FormGroup>
           </Col>
@@ -341,11 +344,11 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
             <FormGroup>
               <Label className="capitalize">Email</Label>
               <Input type="email" defaultValue={""} value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Email...`}
-              onBlur={(e) => {
-                if (!isValidEmail(e.target.value)) {
-                  alert("Masukkan email yang valid.");
-                }
-              }}
+                onBlur={(e) => {
+                  if (!isValidEmail(e.target.value)) {
+                    alert("Masukkan email yang valid.");
+                  }
+                }}
               />
             </FormGroup>
           </Col>
diff --git a/src/views/SimproV2/ResourceWorker/index.js b/src/views/SimproV2/ResourceWorker/index.js
index ef71d82..a466811 100644
--- a/src/views/SimproV2/ResourceWorker/index.js
+++ b/src/views/SimproV2/ResourceWorker/index.js
@@ -26,9 +26,11 @@ const config = {
     "Content-type": `application/json`
   }
 };
-
+const role_name = window.localStorage.getItem('role_name');
+const company_id = window.localStorage.getItem('company_id');
 const ResourceWorker = ({ params }) => {
   const token = localStorage.getItem("token")
+  const company_id = localStorage.getItem("company_id")
   const HEADER = {
     headers: {
       "Content-Type": "application/json",
@@ -202,6 +204,16 @@ const ResourceWorker = ({ params }) => {
       }
     }
 
+    if (role_name !== "Super Admin") {
+      payload.group_column.where.push(
+        { "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+      )
+    } else {
+      payload.group_column.where.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+    }
+
     const result = await axios
       .post(USER_SEARCH, payload, config)
       .then(res => res)
@@ -238,7 +250,7 @@ const ResourceWorker = ({ params }) => {
   const handleSync = async () => {
     await axios.get(USER_SYNC, HEADER)
       .then(res => res)
-      .catch((error)=>error.response)
+      .catch((error) => error.response)
   }
 
   const handleExportExcel = async () => {
diff --git a/src/views/SimproV2/Satuan/DialogForm.js b/src/views/SimproV2/Satuan/DialogForm.js
index 4ab7a35..6636c55 100644
--- a/src/views/SimproV2/Satuan/DialogForm.js
+++ b/src/views/SimproV2/Satuan/DialogForm.js
@@ -6,6 +6,7 @@ import {
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 
+const company_id = localStorage.getItem("company_id")
 
 const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
   const [id, setId] = useState(0)
@@ -31,7 +32,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     if (typeDialog === "Save") {
       data = {
         name: name,
-        description
+        description,
+        company_id
       }
 
       closeDialog('save', data);
@@ -39,7 +41,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       data = {
         id,
         name: name,
-        description
+        description,
+        company_id
       }
       closeDialog('edit', data);
     }
diff --git a/src/views/SimproV2/Satuan/index.js b/src/views/SimproV2/Satuan/index.js
index b864493..6db7072 100644
--- a/src/views/SimproV2/Satuan/index.js
+++ b/src/views/SimproV2/Satuan/index.js
@@ -10,6 +10,8 @@ import { SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../
 import { useTranslation } from 'react-i18next';
 
 const token = window.localStorage.getItem('token');
+const company_id = window.localStorage.getItem('company_id');
+const role_name = window.localStorage.getItem('role_name');
 const config = {
 	headers:
 	{
@@ -20,6 +22,7 @@ const config = {
 
 const Satuan = ({ params }) => {
 	const token = localStorage.getItem("token")
+	const company_id = localStorage.getItem("company_id")
 	const HEADER = {
 		headers: {
 			"Content-Type": "application/json",
@@ -86,6 +89,17 @@ const Satuan = ({ params }) => {
 			}
 		}
 
+		if (role_name !== "Super Admin") {
+			payload.columns.push(
+				{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
+			)
+		} else {
+			payload.columns.push(
+				{ "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+			)
+		}
+
+
 		const result = await axios
 			.post(SATUAN_SEARCH, payload, config)
 			.then(res => res)