implement html title

public/index.html

@@ -8,7 +8,7 @@
   <meta name="description" content="OSPRO">
   <meta name="author" content="Integrasia Utama">
   <meta name="keyword" content="OSPRO,Integrasia,OSLOG,Asset,WebGIS,Aplikasi,Tracking System">
-  <title>OSPRO</title>
+  <title id="title"></title>
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -98,4 +98,4 @@
     -->
 </body>
 
-</html>
+</html>

src/App.js

@@ -18,6 +18,24 @@ const Page500 = React.lazy(() => import('./views/Pages/Page500'));
 const SiopasMap = React.lazy(() => import('./views/Map'));
 
 class App extends Component {
+	componentDidMount() {
+
+		try {
+			const storedData = localStorage.getItem('configApp');
+			if (storedData !== null) {
+				const data = JSON.parse(storedData);
+				const htmlTitle = data.html_title || 'OSPRO';
+				document.title = htmlTitle;
+			} else {
+				console.log('No data found in localStorage for key "configApp".');
+				document.title = 'OSPRO';
+			}
+		} catch (error) {
+			console.error('Error in componentDidMount:', error);
+			document.title = 'OSPRO';
+		}
+	}
+
 
 	render() {
 		return (

src/containers/DefaultLayout/DefaultHeader.js

@@ -4,7 +4,8 @@ import { Badge, Nav, NavItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { Menu, Dropdown } from 'antd'
 import { ALERTUSER_SEARCH, ALERT_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, APP_MODE } from '../../const/ApiConst';
-
+import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
+import logo_ospro from '../../assets/img/OSPRO.png'
 import axios from 'axios';
 import './Default.css'
 const token = window.localStorage.getItem('token');
@@ -194,6 +195,15 @@ class DefaultHeader extends Component {
     });
   }
 
+
+  getLogo = () => {
+    return (
+      <div style={{ width: '10%', display: 'flex', justifyContent: 'center' }}>
+        <img style={{ width: '100%', height: '100%' }} src={logo_ospro} />
+      </div>
+    )
+  }
+
   getHeaderMenu = () => {
     const { fullname, u_group } = this.state;
     if (u_group == 'kominfo') {
@@ -244,12 +254,15 @@ class DefaultHeader extends Component {
 
     return (
       <React.Fragment>
+        <AppSidebarToggler className="d-lg-none" display="md" mobile />
+        {this.getLogo()}
+        <AppSidebarToggler className="d-md-down-none" display="lg" />
         <Nav className="ml-auto" navbar>
-          <Dropdown onVisibleChange={(visible) => this.onReadNotif(visible)} overlay={this.dropDownMenu} trigger={['click']}>
+          {/* <Dropdown onVisibleChange={(visible) => this.onReadNotif(visible)} overlay={this.dropDownMenu} trigger={['click']}>
             <NavItem className="d-md-down-none">
               <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color={this.state.totalAlert > 0 ? "danger" : "default"}>{this.state.totalAlert > 0 ? this.state.totalAlert : null}</Badge></NavLink>
             </NavItem>
-          </Dropdown>
+          </Dropdown> */}
         </Nav>
       </React.Fragment>
     );

src/containers/DefaultLayout/DefaultLayout.js

@@ -36,33 +36,33 @@ const config = {
 };
 class DefaultLayout extends Component {
 
-  constructor(props) {
-    super(props);
-
-    let role_id = '', token = '', company_id = 0, menu=''
-    if (props.location.state && props.location.state.role_id) {
-      role_id = props.location.state.role_id;
-      token = props.location.state.token;
-      company_id = props.location.state.company_id;
-      menu = props.location.state.menu_login;
-    } else {
-      role_id = localStorage.getItem("role_id");
-      token = localStorage.getItem("token");
-      company_id = localStorage.getItem('company_id');
-      menu = localStorage.getItem("menu_login");
-    }
-
-    this.state = {
-      role_id: role_id,
-      token: token,
-      menu: { items: [] },
-      routes2: routes,
-      finalRoutes: [],
-      breadrCrumbReady: false,
-      minimized: true,
-      company_id: company_id
-    };
-  }
+	constructor(props) {
+		super(props);
+
+		let role_id = '', token = '', company_id = 0, menu = ''
+		if (props.location.state && props.location.state.role_id) {
+			role_id = props.location.state.role_id;
+			token = props.location.state.token;
+			company_id = props.location.state.company_id;
+			menu = props.location.state.menu_login;
+		} else {
+			role_id = localStorage.getItem("role_id");
+			token = localStorage.getItem("token");
+			company_id = localStorage.getItem('company_id');
+			menu = localStorage.getItem("menu_login");
+		}
+
+		this.state = {
+			role_id: role_id,
+			token: token,
+			menu: { items: [] },
+			routes2: routes,
+			finalRoutes: [],
+			breadrCrumbReady: false,
+			minimized: true,
+			company_id: company_id
+		};
+	}
 
 
 	async componentDidMount() {
@@ -267,15 +267,13 @@ class DefaultLayout extends Component {
 
 		return (
 			<div className="app">
+				<AppHeader fixed>
+					<DefaultHeader />
+				</AppHeader>
 				<div className="app-body">
 					{!window.location.href.includes("dashboard-project") || renderSidebar ? (
 						<AppSidebar minimized={this.state.minimized} fixed display="lg">
-							{/* <div class="sidebar-header">
-							<Suspense fallback={this.loading()}>
-								<DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} />
-							</Suspense>
-						</div> */}
-							<hr />
+
 							<AppSidebarHeader />
 							<AppSidebarForm />
 							<Suspense>
@@ -312,19 +310,19 @@ class DefaultLayout extends Component {
 												name={route.name}
 												render={props => (
 													<route.component
-                            params={{ name: route.name }}
-                            hierarchy={props.location.state ? props.location.state.hierarchy : localStorage.getItem("hierarchy")}
-                            user_id={props.location.state ? props.location.state.user_id : localStorage.getItem("user_id")}
-                            role_id={props.location.state ? props.location.state.role_id : localStorage.getItem("role_id")}
-                            isLogin={props.location.state ? props.location.state.isLogin : localStorage.getItem("isLogin")}
-                            company_id={props.location.state ? props.location.state.company_id : localStorage.getItem("company_id")}
-                            role_name={props.location.state ? props.location.state.role_name : localStorage.getItem("role_name")}
-                            all_project={props.location.state ? props.location.state.all_project : localStorage.getItem("all_project")}
-                            token={props.location.state ? props.location.state.token : localStorage.getItem("token")}
-                            menu_login={props.location.state ? props.location.state.menu_login : localStorage.getItem("menu_login")}
-                            user_name={props.location.state ? props.location.state.user_name : localStorage.getItem("user_name")}
-                            {...props}
-                          />
+														params={{ name: route.name }}
+														hierarchy={props.location.state ? props.location.state.hierarchy : localStorage.getItem("hierarchy")}
+														user_id={props.location.state ? props.location.state.user_id : localStorage.getItem("user_id")}
+														role_id={props.location.state ? props.location.state.role_id : localStorage.getItem("role_id")}
+														isLogin={props.location.state ? props.location.state.isLogin : localStorage.getItem("isLogin")}
+														company_id={props.location.state ? props.location.state.company_id : localStorage.getItem("company_id")}
+														role_name={props.location.state ? props.location.state.role_name : localStorage.getItem("role_name")}
+														all_project={props.location.state ? props.location.state.all_project : localStorage.getItem("all_project")}
+														token={props.location.state ? props.location.state.token : localStorage.getItem("token")}
+														menu_login={props.location.state ? props.location.state.menu_login : localStorage.getItem("menu_login")}
+														user_name={props.location.state ? props.location.state.user_name : localStorage.getItem("user_name")}
+														{...props}
+													/>
 												)} />
 										) : (null);
 									})}

src/views/Pages/Login/Login.js

@@ -120,7 +120,7 @@ class Login extends Component {
 		}
 	}
 
-	getDataMenu = async (token, role_id, hierarchy, user_id, company_id, role_name, all_project, user_name) => {
+	getDataMenu = async (token, role_id, hierarchy, user_id, company_id, role_name, all_project, user_name, configApp) => {
 		const config = {
 			headers:
 			{
@@ -147,17 +147,18 @@ class Login extends Component {
 				this.props.history.push({
 					pathname: "/dashboard",
 					state: {
-            menu_login: JSON.stringify(resData),
-            hierarchy,
-            role_id,
-            user_id,
-            token,
-            isLogin: true,
-            company_id,
-            role_name,
-            all_project,
-            user_name
-          }
+						menu_login: JSON.stringify(resData),
+						hierarchy,
+						role_id,
+						user_id,
+						token,
+						isLogin: true,
+						company_id,
+						role_name,
+						all_project,
+						user_name,
+						configApp
+					}
 				});
 			}
 			if (this.state.defaultPage) {
@@ -165,17 +166,18 @@ class Login extends Component {
 					this.props.history.push({
 						pathname: this.state.defaultPage,
 						state: {
-              menu_login: JSON.stringify(resData),
-              hierarchy,
-              role_id,
-              user_id,
-              token,
-              isLogin: true,
-              company_id,
-              role_name,
-              all_project,
-              user_name
-            }
+							menu_login: JSON.stringify(resData),
+							hierarchy,
+							role_id,
+							user_id,
+							token,
+							isLogin: true,
+							company_id,
+							role_name,
+							all_project,
+							user_name,
+							configApp
+						}
 					});
 				} else {
 					this.props.history.push(this.state.defaultPage);
@@ -187,17 +189,17 @@ class Login extends Component {
 				this.props.history.push({
 					pathname: "/dashboard",
 					state: {
-            menu_login: JSON.stringify(resData),
-            hierarchy,
-            role_id,
-            user_id,
-            token,
-            isLogin: true,
-            company_id,
-            role_name,
-            all_project,
-            user_name
-          }
+						menu_login: JSON.stringify(resData),
+						hierarchy,
+						role_id,
+						user_id,
+						token,
+						isLogin: true,
+						company_id,
+						role_name,
+						all_project,
+						user_name
+					}
 				});
 			}
 		} else {
@@ -242,7 +244,7 @@ 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.getDataMenu(access_token, data_user.role_id, data_user.hierarchy, data_user.id, data_user.company_id, data_user.role.name, data_user.role.all_project, data_user.user_name)
+			this.getDataMenu(access_token, data_user.role_id, data_user.hierarchy, data_user.id, data_user.company_id, data_user.role.name, data_user.role.all_project, data_user.user_name, data_user.configApp)
 			window.localStorage.setItem('isLogin', true);
 			window.localStorage.setItem('token', access_token);
 			window.localStorage.setItem('user_id', data_user.id);
@@ -252,6 +254,7 @@ class Login extends Component {
 			window.localStorage.setItem('role_name', data_user.role.name);
 			window.localStorage.setItem('all_project', data_user.role.all_project);
 			window.localStorage.setItem('hierarchy', JSON.stringify(data_user.hierarchy));
+			window.localStorage.setItem('configApp', JSON.stringify(data_user.configApp));
 		} else {
 			// NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
 			NotificationManager.error(doLogin.data.message, 'Login Failed!');