floating shortcut button

package.json

@@ -79,6 +79,7 @@
     "react-router-dom": "^5.0.1",
     "react-select": "^4.3.1",
     "react-slick": "^0.28.1",
+    "react-tiny-fab": "^4.0.4",
     "react-toastify": "^5.5.0",
     "reactstrap": "^8.0.0",
     "simple-line-icons": "^2.4.1",

src/views/Dashboard/DashboardProject.js

@@ -12,6 +12,10 @@ 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 = {
@@ -76,6 +80,7 @@ const DashboardProject = () => {
     const [healthBySchedule, setHealthBySchedule] = useState('-')
     const [healthByBudget, setHealthByBudget] = useState('-')
     const [reportDistribution, setReportDistribution] = useState([]);
+	let history = useHistory();
 
 
     useEffect(() => {
@@ -104,6 +109,10 @@ const DashboardProject = () => {
 
     }, [plannedCost, totalCost]);
 
+	const  handleRedirect = () => {
+		history.push("/projects/"+GANTT_ID+"/"+PROJECT_ID+"/gantt");
+	}
+
     const getProjectDetail = async () => {
         setIsReadyProjectDetail(false);
         const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
@@ -456,6 +465,17 @@ const DashboardProject = () => {
 	return (
 		<div style={{ marginLeft: -25, marginRight: -25 }}>
             <NotificationContainer />
+			<Fab
+				icon={<i className="fa fa-bars"/>}
+				alwaysShowTitle={true}
+			>
+				<Action
+					text="Gantt Chart"
+					onClick={() => handleRedirect()}
+				>
+					<i className="fa fa-gears" />
+				</Action>
+			</Fab>
 			<Row>
 				<Col span={18}>
 					<Row>

src/views/SimproV2/Gantt/index.js

@@ -3,6 +3,9 @@ import Timeline from 'react-calendar-timeline'
 import 'react-calendar-timeline/lib/Timeline.css'
 import { USER_VERSION_GANTT_SEARCH, BASE_SIMPRO_LUMEN, BASE_URL_GANTT } from '../../../const/ApiConst';
 import axios from "../../../const/interceptorApi"
+import { Fab, Action } from 'react-tiny-fab';
+import 'react-tiny-fab/dist/styles.css';
+import { useHistory } from "react-router-dom";
 
 const token = localStorage.getItem("token")
 const userId = parseInt(localStorage.getItem("user_id"));
@@ -22,6 +25,7 @@ const Gantt = (props) => {
 	const [ro, setRo] = useState(1)
 	const [listUserGant, setListUserGantt] = useState([])
 	const [ready, setReady] = useState(false)
+	let history = useHistory();
 
 	useEffect(() => {
 		document.getElementsByClassName("breadcrumb-item active").innerHTML = "Gantt Project";
@@ -61,6 +65,10 @@ const Gantt = (props) => {
 		setListUserGantt(newTargetKeys)
 	}
 
+	const  handleRedirect = () => {
+		history.push("/dashboard-project/"+idProject+"/"+versionGanttId);
+	}
+
 	const cekPermission = () => {
 		let check = listUserGant.includes(userId)
 		if (check) {
@@ -88,9 +96,22 @@ const Gantt = (props) => {
 	)
 
 	return (
+		<>
 			<div style={{ margin: "-15px", marginBottom: "-30px" }}>
 				{ready && <RenderGantt />}
 			</div>
+			<Fab
+				icon={<i className="fa fa-bars"/>}
+				alwaysShowTitle={true}
+			>
+				<Action
+					text="Dashboard Project"
+					onClick={() => handleRedirect()}
+				>
+					<i className="fa fa-line-chart" />
+				</Action>
+			</Fab>
+		</>
 	);
 }