first commit

2 years ago · c9ac6d9796
555 changed files with 118647 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.env
+++ b/.env
@ -0,0 +1,3 @@
+PORT=3000
+CHOKIDAR_USEPOLLING=true
+GENERATE_SOURCEMAP=false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/src/views/Report/ControlMonitoringv1.rar
+# testing
+/coverage
+
+
+# production
+/build
+
+# misc
+.DS_Store
+.idea
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+yarn.lock
+
+src/components/MapToolbar/MapToolbar_backup2.js
+src/const/ApiConst.js
--- a/API_GeoHR_docs.md
+++ b/API_GeoHR_docs.md
@ -0,0 +1,410 @@
+
+## API LOGIN
+
+Payload Login Sales
+``` 
+[POST] https://oslog.id/geohr-api/sales/login
+{
+	"username": null, //string
+	"password": null //string
+}
+```
+
+
+## API UPLOAD IMAGE
+
+Payload Upload Image
+```
+[POST] https://oslog.id/geohr-api/image/{category}/upload
+//notes: gunakan form-data
+Payload di form-data:
+ref_id: "" //diambil dari id berdasarkan categorynya
+files: tipe datanya file (ini file image1)
+files: tipe datanya file (ini file image2)
+files: tipe datanya file (ini file image3)
+files: tipe datanya file (ini file image4, dst)
+```
+
+
+## API OFFICE
+
+Search
+```
+[POST] https://oslog.id/geohr-api/office/monitoring
+Payload
+{
+    "paging": {"start": 0, "length": 10},
+    "columns": [
+        {"name":"name", "logic_operator": "like", "value": "", "operator": "and"}
+    ],
+    "orders": {"columns": ["name"], "ascending": true}
+}
+
+Response
+{
+    "code": 200,
+    "data": {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "id": "m_office.37",
+                "geometry_name": "the_geom",
+                "type": "Feature",
+                "properties": {
+                    "id": "m_office.37",
+                    "company": 5,
+                    "name": "goro",
+                    "employes": "goro",
+                    "address": "goro",
+                    "description": "goro",
+                    "buffer_radius": 100,
+                    "lat": -6.178889275035602,
+                    "lon": 106.83972036828338,
+                    "geom": "POLYGON((93.8211107249645 106.839720368283,64.5317888436193 36.1290422496288,-6.17888927503533 6.83972036828345,-76.8895673936901 36.1290422496285,-106.178889275036 106.839720368283,-76.8895673936905 177.550398486938,-6.17888927503596 206.839720368283,64.5317888436189 177.550398486939,93.8211107249645 106.839720368283))",
+                    "created_by": "@system",
+                    "created_date": "2021-06-15T13:54:24.157516Z",
+                    "modified_by": "@system",
+                    "modified_date": "2021-06-15T13:54:24.157516Z",
+                    "join": {
+                        "": ""
+                    }
+                },
+                "geometry": {
+                    "type": "Point",
+                    "coordinates": [
+                        106.83972036828338,
+                        -6.178889275035602
+                    ]
+                }
+            },
+            {
+                "id": "m_office.36",
+                "geometry_name": "the_geom",
+                "type": "Feature",
+                "properties": {
+                    "id": "m_office.36",
+                    "company": 1,
+                    "name": "tori",
+                    "employes": "tori",
+                    "address": "toritori",
+                    "description": "toriaja",
+                    "buffer_radius": 100,
+                    "lat": -5.992300230787033,
+                    "lon": 106.0353342769051,
+                    "geom": "POLYGON((94.0076997692131 106.035334276905,64.7183778878679 35.3246561582504,-5.99230023078677 6.03533427690506,-76.7029783494415 35.3246561582501,-105.992300230787 106.035334276905,-76.702978349442 176.74601239556,-5.99230023078739 206.035334276905,64.7183778878674 176.74601239556,94.0076997692131 106.035334276905))",
+                    "created_by": "@system",
+                    "created_date": "2021-06-15T13:20:33.590436Z",
+                    "modified_by": "@system",
+                    "modified_date": "2021-06-15T13:52:05.91823Z",
+                    "join": {
+                        "": ""
+                    }
+                },
+                "geometry": {
+                    "type": "Point",
+                    "coordinates": [
+                        106.0353342769051,
+                        -5.992300230787033
+                    ]
+                }
+            }
+        ]
+    },
+    "executionTime": "2.122619ms",
+    "message": "OK",
+    "totalRecord": 2
+}
+```
+
+
+Payload Add/Edit Office
+```
+[POST] https://oslog.id/geohr-api/office/add
+[PUT] https://oslog.id/geohr-api/office/{id:[0-9]+}/edit
+{
+	"company": null, //int
+	"name": null, //string
+	"employes": null, //string
+	"address": null, //string
+	"description": null, //string
+	"geom": null //string
+}
+```
+
+
+## API CUSTOMER
+
+Monitoring
+```
+[POST] https://oslog.id/geohr-api/customer/monitoring
+{
+    "paging": {"start": 0, "length": 10},
+    "columns": [
+        {"name":"name", "logic_operator": "like", "value": "", "operator": "and"}
+    ],
+    "orders": {"columns": ["name"], "ascending": true}
+}
+```
+
+
+
+## API SALES
+
+Search
+```
+[POST] https://oslog.id/geohr-api/sales/monitoring
+Payload
+{
+    "paging": {"start": 0, "length": 10},
+    "columns": [
+        {"name":"name", "logic_operator": "like", "value": "", "operator": "and", "table_name": "m_group_sales"}
+    ],
+    "joins": [
+        {"name": "group_sales", "column_results": ["name", "description"]}
+    ],
+    "orders": {"columns": ["name"], "ascending": true}
+}
+
+Response
+{
+    "code": 200,
+    "data": {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "id": "m_sales.1",
+                "geometry_name": "the_geom",
+                "type": "Feature",
+                "properties": {
+                    "id": "m_sales.1",
+                    "group_sales": 7,
+                    "username": "ibnuh",
+                    "password": "7f2ababa423061c509f4923dd04b6cf1",
+                    "session_login": "5459aff0-82c9-40bb-a34e-e6278fd9c173",
+                    "name": "ibnu hamdani",
+                    "phone_number": "083823134569",
+                    "email": "ibnuhamdani234@gmail.com",
+                    "address": "jl tenjo bogor",
+                    "achieve": null,
+                    "type_sales": null,
+                    "lat": -6.2622531,
+                    "lon": 106.7881649,
+                    "created_by": "admin",
+                    "created_date": "2021-06-15T03:35:32.852925Z",
+                    "modified_by": "admin",
+                    "modified_date": "2021-06-15T03:35:32.852925Z",
+                    "join": {
+                        "group_sales_description": "Group Sales Wilayah Kebayoran baru",
+                        "group_sales_name": "Kebayoran Baru"
+                    }
+                },
+                "geometry": {
+                    "type": "Point",
+                    "coordinates": [
+                        106.7881649,
+                        -6.2622531
+                    ]
+                }
+            }
+        ]
+    },
+    "executionTime": "1.916764ms",
+    "message": "OK",
+    "totalRecord": 1
+}
+```
+
+Payload Add/Edit Sales
+```
+[POST] https://oslog.id/geohr-api/sales/add
+[PUT] https://oslog.id/geohr-api/sales/{id:[0-9]+}/edit
+{
+	"group_sales": null, //int
+	"username": null, //string
+	"password": null, //string
+	"name": null, //string
+	"phone_number": null, //string
+	"email": null, //string
+	"address": null, //string
+	"image": null //string
+}
+```
+
+
+## API GROUP SALES
+
+Search
+```
+[POST] https://oslog.id/geohr-api/group-sales/search
+{
+    "paging": {"start": 0, "length": 10},
+    "columns": [
+        {"name":"name", "logic_operator": "like", "value": "", "operator": "and"}
+    ],
+    "orders": {"columns": ["name"], "ascending": true}
+}
+```
+
+Payload Add/Edit Group Sales
+```
+[POST] https://oslog.id/geohr-api/group-sales/add
+[PUT] https://oslog.id/geohr-api/group-sales/{id:[0-9]+}/edit
+{
+	"name": null, //string
+	"description": null //string
+}
+```
+
+## API WAYPOINT SALES
+
+Search
+```
+[POST] https://oslog.id/geohr-api/waypoint-sales/monitoring?salesId=1
+Payload
+{
+    "paging": {"start": 0, "length": -1},
+    "columns": [
+        {"name":"wptime", "logic_operator": "range", "value": "2021-06-15 00:00:00", "value1": "2021-06-15 23:59:59", "operator": "and"}
+    ],
+    "orders": {"columns": ["wptime"], "ascending": true}
+}
+```
+
+Example Response (if waypoint is available)
+```
+{
+    "code": 200,
+    "data": {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "id": "m_sales.1",
+                "geometry_name": "the_geom",
+                "type": "Feature",
+                "properties": {
+                    "id": "m_sales.1",
+                    "group_sales": 7,
+                    "username": "ibnuh",
+                    "password": "7f2ababa423061c509f4923dd04b6cf1",
+                    "session_login": "a5b5dff4-a7af-475c-9eb8-13f234d05472",
+                    "name": "ibnu hamdani",
+                    "phone_number": "083823134569",
+                    "email": "ibnuhamdani234@gmail.com",
+                    "address": "jl tenjo bogor",
+                    "achieve": null,
+                    "type_sales": "BTB",
+                    "lat": -6.2623094,
+                    "lon": 106.7880976,
+                    "created_by": "admin",
+                    "created_date": "2021-06-15T03:35:32.852925Z",
+                    "modified_by": "@system",
+                    "modified_date": "2021-06-16T07:24:31.227968Z",
+                    "join": {
+                        "group_sales_description": "Group Sales Wilayah Kebayoran baru",
+                        "group_sales_name": "Kebayoran Baru"
+                    }
+                },
+                "geometry": {
+                    "type": "LineString",
+                    "coordinates": [
+                        [
+                            106.7881649,
+                            -6.2622531
+                        ],
+                        ...,
+                        [
+                            106.7881603,
+                            -6.2622923
+                        ]
+                    ]
+                }
+            }
+        ]
+    },
+    "executionTime": "6.957314ms",
+    "message": "OK",
+    "totalRecord": 1
+}
+```
+
+Example Response (if waypoint is unavailable)
+```
+{
+    "code": 200,
+    "data": {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "id": "m_sales.2",
+                "geometry_name": "the_geom",
+                "type": "Feature",
+                "properties": {
+                    "id": "m_sales.2",
+                    "group_sales": 25,
+                    "username": "jono",
+                    "password": "jono123",
+                    "session_login": null,
+                    "name": "jono",
+                    "phone_number": "0983838484",
+                    "email": "jono@gmail.com",
+                    "address": "jonoooo",
+                    "achieve": null,
+                    "type_sales": "BTB",
+                    "lat": null,
+                    "lon": null,
+                    "created_by": "@system",
+                    "created_date": "2021-06-16T04:06:23.743462Z",
+                    "modified_by": "@system",
+                    "modified_date": "2021-06-16T07:24:21.725833Z",
+                    "join": {
+                        "group_sales_description": "Group Sales Wilayah Cilandak",
+                        "group_sales_name": "Cilandak"
+                    }
+                },
+                "geometry": {
+                    "type": "LineString",
+                    "coordinates": []
+                }
+            }
+        ]
+    },
+    "executionTime": "2.73392ms",
+    "message": "OK",
+    "totalRecord": 0
+}
+```
+
+
+Payload Add Waypoint Sales
+```
+[POST] https://oslog.id/geohr-api/waypoint-sales/add
+{
+	"sales": null, //int
+	"lat": null, //float
+	"lon": null, //float
+	"wptime": null, //time now
+	"speed": null, //int
+	"angle": null, //float
+	"satelite": null, //int
+}
+```
+
+
+## API DAILY INFO
+
+Response (still dummy)
+```
+{
+   "code":200,
+   "data": { 
+        "at_trip":{"total": 50, "id": [1, 2, 25]},
+        "at_customer":"20",
+        "at_office":"30",
+        "present": "100",
+        "absent":"10",
+        "at_time":"2021-06-16T07:16:03.509928Z"
+    },
+   "executionTime":"1.494754ms",
+   "message":"OK"
+}
+```
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,476 @@
+## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
+
+##### `v2.6.0`
+- move to `reactstrap v8`. Breaking changes and deprecations, see: https://github.com/reactstrap/reactstrap/blob/master/CHANGELOG.md#800-2019-04-03
+- fix(DefaultHeader): replace `AppHeaderDropdown` with `UncontrolledDropdown`
+- refactor: add ie polyfills 
+
+###### dependencies update
+- update: `@coreui/coreui` to `^2.1.12`
+- update: `@coreui/coreui-plugin-chartjs-custom-tooltips` to `^1.3.1`
+- update: `@coreui/react` to `^2.5.1`
+- update: `core-js` to `^3.1.4`
+- update: `enzyme` to `^3.10.0`
+- update: `enzyme-adapter-react-16` to `^1.14.0`
+- update: `react-router-config` to `^5.0.1`
+- update: `react-router-dom` to `^5.0.1`
+- update: `reactstrap` to `^8.0.0`
+
+##### `v2.5.0`
+- release for use with:
+  - react-router-dom `~5.0.0`
+  - @coreui/react `~2.5.0`
+
+###### dependencies update
+- update: `@coreui/react` to `~2.5.0`
+- update: `react-router-config` to `^5.0.0`
+- update: `react-router-dom` to `^5.0.0`
+
+It turns out this is not such a breaking change, as it seemed at a glance.
+Just update dependencies and you're good.
+
+#### _migration guide v2.1 -> v2.5_ :boom:
+- update `dependencies` in `package.json`  
+   - [ ] `@coreui/react` to `~2.5.0`
+   - [ ] `react-router-dom` to `^5.0.0`   
+   - [ ] `react-router-config` to `^5.0.0`
+
+<del>
+__BREAKING CHANGES__  :boom: 
+- use React Router `v5`
+- drop 'Breadcrumb' in favour of `Breadcrumb2`
+- drop 'SidebarNav' in favour of `SidebarNav2`
+- __Breadcrumb2__: **mandatory** prop `router` 💥 see > [Breadcrumb](./src/Breadcrumb.md)
+- __SidebarNav2__: **mandatory** prop `router` 💥 see > [SidebarNav](./src/SidebarNav.md) 
+
+React Router v5 uses the new React Context API, which is incompatible with version used in 4.3.
+That's a breaking change. With a raw upgrade to v5, you can encounter an error message: `You should not render a <Route> outside a <Router>` or `You should not use <Link> outside a <Router>` etc... It means that Route, Link etc, can't find the correct context object because `Breadcrumb` and `SidebarNav` components have their own context object.
+ 
+It's important to use the same instance of the `react-router-dom v5` library with template and coreui components. `@coreui/react` version `2.5.0` moves react-router-dom form dependencies to peerDependecies and takes the same library/module from the template/app instead. We have to pass `router` module object as a prop to `<AppSidebarNav>` and `<AppBreadcrumb>`      
+
+#### _migration guide v2.1 -> v2.5_ :boom:
+1. update `dependencies` in `package.json`    
+   - [ ] `@coreui/react` to `~2.5.0`
+   - [ ] `react-router-dom` to `^5.0.0`   
+   - [ ] `react-router-config` to `^5.0.0`
+
+2. modify `DefaultLayout.js`
+   - [ ] import react-router-dom module as an object   
+     ```
+     import * as router from 'react-router-dom';
+     ```
+   - [ ] import new versions of components `AppBreadcrumb2` and `AppSidebarNav2` (alias is optional, just keep consistency with markup)
+     ```jsx
+     import {
+       ... 
+       AppBreadcrumb2 as AppBreadcrumb,
+       AppSidebarNav2 as AppSidebarNav
+       ...
+     } from '@coreui/react';
+     ```
+   - [ ] inject `router` object as a prop to `<AppSidebarNav>` and `<AppBreadcrumb>`
+     ```html
+     <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>  
+     ```  
+    
+     ```html
+     <AppBreadcrumb appRoutes={routes} router={router}/>
+     ```
+</del>
+---
+
+##### `v2.1.7`
+- maintenance release for use with:
+  - react-router `v4.3.x`
+  - reactstrap `v7.x`
+  - @coreui/react `~2.1.7`
+- chore: add `package-lock.json` with updated `tar` dependency  
+- chore: fix `test:cov` script
+- fix(Popovers): add `trigger="legacy" delay={0}` (breaking change in reactstrap) 
+###### dependencies update
+- update: `@coreui/react` to `~2.1.7`
+- update: `@coreui/coreui-plugin-chartjs-custom-tooltips` to `^1.3.0`
+- update: `enzyme-adapter-react-16` to `^1.13.0`
+- update: `node-sass` to `^4.12.0`
+- update: `react` to `^16.8.6`
+- update: `react-app-polyfill` to `^1.0.1`
+- update: `react-chartjs-2` to `^2.7.6`
+- update: `react-dom` to `^16.8.6`
+- update: `react-test-renderer` to `^16.8.6`
+- update: `react-scripts` to `^3.0.1`
+
+##### `v2.1.6`
+- fix(App): remove redundant react-loadable - thanks @sergeyt
+- fix(routes) remove circular dependency - thanks @sergeyt
+- refactor(App): change to render in Route
+- fix(routes): add Home to routes - breadcrumb issue
+- refactor(DefaultHeader): move to ReactRouter `NavLink`
+- refactor(Forms): move to `InputGroupButtonDropdown` where applicable 
+
+###### dependencies update
+- update: `@coreui/coreui` to `^2.1.9`
+- update: `@coreui/react` to `~2.1.5`
+- update: `chart.js` to `^2.8.0`
+- update: `enzyme-adapter-react-16` to `^1.11.2`
+- update: `react` to `^16.8.5`
+- update: `react-app-polyfill` to `^0.2.2`
+- update: `react-dom` to `^16.8.5`
+- update: `react-router-config` to `^4.4.0-beta.8`
+- update: `react-router-dom` to `~4.3.1`
+- update: `react-test-renderer` to `^16.8.5`
+- update: `react-scripts` to `^2.1.8`
+
+##### `v2.1.5`
+- fix: iOS 9 Safari sidebar toggle force issue `@coreui/react@2.1.5`
+
+###### dependencies update
+- update: `@coreui/react` to `^2.1.5`
+- update: `enzyme-adapter-react-16` to `^1.10.0`
+- update: `flag-icon-css` to `^3.3.0`
+- update: `react` to `^16.8.4`
+- update: `react-dom` to `^16.8.4`
+- update: `react-test-renderer` to `^16.8.4`
+
+##### `v2.1.4`
+- maintenance release: fixes #151 #145   
+###### dependencies update
+- update: `@coreui/coreui` to `^2.1.7`
+- update: `@coreui/react` to `^2.1.4`
+- update: `bootstrap` to `^4.3.1`
+- update: `core-js` to `^2.6.5`
+- update: `enzyme` to `^3.9.0`
+- update: `enzyme-adapter-react-16` to `^1.9.1`
+- update: `prop-types` to `^15.7.2`
+- update: `react` to `^16.8.2`
+- update: `react-app-polyfill` to `^0.2.1`
+- update: `react-dom` to `^16.8.2`
+- update: `react-test-renderer` to `^16.8.2`
+- update: `reactstrap` to `^7.1.0`
+- update: `react-scripts` to `2.1.5`
+
+##### `v2.1.3`
+- fix(Collapse): add `mb-0` to accordion cards
+- fix(ButtonGroups): misplaced dropdownOpen
+- chore: update `@coreui/coreui` to `^2.1.5`
+- chore: update `@coreui/react` to `^2.1.3`
+- chore: update `bootstrap` to `^4.2.1`
+- chore: update `core-js` to `^2.6.1`
+- chore: update `enzyme` to `^3.8.0`
+- chore: update `enzyme-adapter-react-16` to `^1.7.1`
+- chore: update `node-sass` to `^4.11.0`
+- chore: update `react` to `^16.7.0`
+- chore: update `react-app-polyfill` to `^0.2.0`
+- chore: update `react-chartjs-2` to `^2.7.4`
+- chore: update `react-dom` to `^16.7.0`
+- chore: update `react-test-renderer` to `^16.7.0`
+- chore: update `reactstrap` to `^7.0.2`
+- chore: update `react-scripts` to `2.1.3`
+
+##### `v2.1.2`
+- fix(scss): floating footer ie11 issue
+- chore: update `@coreui/react` to `^2.1.1`
+
+##### `v2.1.1`
+- refactor(App.js): code splitting with `react-loadable` (waiting for release of `react-router-dom`) 
+- refactor(routes.js): code splitting with `React.lazy`, remove `react-loadable`
+- refactor(DefaultLayout): code splitting with `React.lazy` Aside, Footer, Header, routes 
+- refactor(Dashboard): tweak lazy and Suspense for Widget03 
+- refactor(Login): add router link to `Register` button 
+- refactor(Register): add margins to social-media buttons  
+- chore: disable eslint warning for href="#" attribute
+- chore: update `@coreui/coreui` to `^2.1.1`
+- chore: update `enzyme-adapter-react-16` to `1.7.0`
+- chore: update `react` to `16.6.3`
+- chore: update `react-dom` to `16.6.3`
+- chore: update `react-test-renderer` to `16.6.3`
+
+##### `v2.1.0` 
+- feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
+  - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc...  
+  - starting with `@coreui/coreui`, `@coreui/react` version `2.1.0` and up
+  - closes #106 
+  - item example(`./src/_nav.js`):
+  ```js
+  [
+    {
+      name: 'Disabled',
+      url: '/disabled',
+      icon: 'icon-ban',
+      attributes: { disabled: true },
+    },
+    {
+      name: 'Try CoreUI PRO',
+      url: 'https://coreui.io/pro/react/',
+      icon: 'cui-layers icons',
+      variant: 'danger',
+      attributes: { target: '_blank', rel: "noopener" },
+    }
+  ]
+  ```
+- fix(Cards): `card-header-actions` added to `CardHeader` for `rtl` support
+- feat(Dashboard): new `Suspense` example with Widget03
+- chore: update `@coreui/coreui` to `2.1.0`
+- chore: update `@coreui/react` to `2.1.0`
+- chore: update `node-sass` to `4.10.0`
+- chore: update `react` to `16.6.1`
+- chore: update `react-dom` to `16.6.1`
+- chore: update `react-test-renderer` to `16.6.1`
+
+##### `v2.0.14` 
+- chore: update `@coreui/coreui` to `2.0.25`
+- chore: update `chart.js` to `2.7.3`
+- chore: update `flag-icon-css` to `3.2.1`
+- chore: update `node-sass` to `4.9.4`
+- chore: update `react` to `16.6.0`
+- chore: update `react-dom` to `16.6.0`
+- chore: update `react-router-config` to `4.4.0-beta.6`
+- chore: update `react-test-renderer` to `16.6.0`
+- chore: update `react-scripts` to `2.1.1`
+
+##### `v2.0.13` 
+- refactor: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) cleanup 
+  - cleanup `package.json` scripts
+  - remove `babel-jest` dependency
+  - remove `node-sass-chokidar` dependency
+  - remove `npm-run-all` dependency
+  - move `App.js` import styles to `App.scss` 
+  - replace imports from `node_modules/` with `~` prefix
+- chore: remove unused `src/scss/vendors/charts.js/` directory
+- chore: update `@coreui/coreui` to `^2.0.15`
+- chore: update `@coreui/react` to `^2.0.9`
+
+##### `v2.0.12` 
+fixes some issues with `rtl`, `ie11`, `sidebar-minimized` behaviour and `aside` responsiveness
+- fix(DefaultAside): `ListGroup` with `tag="div"` works better with `rtl` 
+- fix(DefaultLayout): `AppAside` remove deprecated `hidden` prop 
+- chore: update `@coreui/react` to `^2.0.8`
+- chore: update `reactsrtrap` to `^6.5.0`
+- chore: update `react-scripts` to `^2.0.4`
+- chore: `enzyme` to `3.7.0`
+- chore: `enzyme-adapter-react-16` to `1.6.0`
+  
+##### `v2.0.11`
+- chore: update `@coreui/react` to `^2.0.7`
+- chore: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
+  - chore: update `react-scripts` to `^2.0.3`
+  - chore: update `node-sass-chokidar` to `^1.3.3`
+  - chore: add `node-sass v4.9.3`
+  - chore: add `react-app-polyfill v0.1.3` 
+  - chore: add `eslintConfig` in `package.json` 
+  - chore: add `browserslist` in `package.json` 
+  - chore: update `manifest.json`
+  - refactor(index.js): add `react-app-polyfill` for `ie9-11` support
+  - refactor(index.js): migration to `serviceWorker.js`
+
+###### Migrating from CRA 1.x to 2.x:
+affected files: 
+- `package.json` -> dependencies update  
+- `src/index.js` -> move to `serviceWorker`, add `react-app-polyfill` for `ie9-11` support when needed
+
+In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-1x-to-203) for potential breaking changes.  
+
+---
+
+##### `v2.0.10`
+- chore: update `@coreui/coreui` to `^2.0.14`
+- chore: update `@coreui/react` to `^2.0.6`
+- chore: update `enzyme` to `^3.6.0`
+- chore: update `enzyme-adapter-react-16` to `^1.5.0`
+- chore: update `flag-icon-css` to `^3.2.0`
+- chore: update `react` to `^16.5.2`
+- chore: update `react-dom` to `^16.5.2`
+- chore: update `react-router-config` to `^4.4.0-beta.1`
+- chore: update `react-test-renderer` to `^16.5.2`
+- chore: update `babel-jest` to `^23.6.0`
+
+##### `v2.0.9`
+- chore: update `@coreui/icons` to `0.3.0`
+- refactor(CoreUIIcons): move to `@coreui/icons v0.3.0`
+- chore: update `enzyme` to `3.5.0`
+- chore: update `enzyme-adapter-react-16` to `1.3.1`
+- chore: update `react-loadable` to `5.5.0`
+- chore: update `reactstrap` to `6.4.0`
+- chore: update `react-scripts` to `1.1.5`
+
+##### `v2.0.8`
+- fix(User): add missing unique key prop
+- fix(Login): add missing form and autoComplete
+- fix(Register): add missing form and autoComplete
+- chore: update `@coreui/react` to `2.0.5`
+- chore: update `bootstrap` to `4.1.3`
+- chore: update `reactstrap` to `6.3.1`
+- chore: update `babel-jest` to `23.4.2`
+
+##### `v2.0.5`
+- feat(router): Users/User Breadcrumb example with `/users/:id`
+- chore: update `@coreui/react` to `2.0.4`,
+- chore: update `prop-types` to `15.6.2`
+- chore: update `react` to `16.4.1`
+- chore: update `react-dom` to `16.4.1`
+- chore: update `react-test-renderer` to `16.4.1`
+- chore: update `npm-run-all` to `4.1.3`
+- chore: add `.env` file
+
+##### `v2.0.4`
+- feat(Forms): FormFeedback valid, toggleFade
+- refactor(Cards): toggleFade
+- chore: update `@coreui/coreui` to `2.0.2`,
+- chore: update `@coreui/react` to `2.0.1`,
+- chore: update `classnames` to `2.2.6`,
+- chore: update `core-js` to `2.5.7`,
+- chore: update `react` to `16.4.0`,
+- chore: update `react-dom` to `16.4.0`,
+- chore: update `react-router-dom` to `4.3.1`,
+- chore: update `react-test-renderer` to `16.4.0`,
+- chore: update `reactstrap` to `6.1.0`,
+- chore: update `babel-jest` to `23.0.1`,
+
+##### `v2.0.3`
+- refactor: disable `ServiceWorker` by default
+- fix(routes): mismatched `SimpleLineIcons` dynamic import
+- refactor: CoreUI Icons `v0.2.0`
+- chore: update`babel-jest` to `v22.4.4`
+
+##### `v2.0.2`
+- chore: update `@coreui/react` to `v2.0.0`,
+
+##### `v2.0.1`
+- refactor: code splitting via dynamic import
+- refactor: switches view rearrange
+- fix: update component names in package.json
+- chore: update `node-sass-chokidar` to `v1.3.0`
+- chore(release): dependencies update
+
+##### `v2.0.0-rc.1`
+- feat: new CoreUI Icons set
+
+##### `v2.0.0-beta.2`
+- feat: CoreUI custom tooltips plugin for chart.js 
+
+##### `v2.0.0-beta.1`
+- refactor(Switches): move to AppSwitch component
+- fix: typo
+
+##### `v2.0.0-beta`
+- update to `@coreui/react: ^2.0.0-beta`
+
+##### `v2.0.0-alpha.3`
+- refactor(Colors): view layout, minor temp tweaks
+- refactor(FullAside): - ListGroup (deprecate callout)
+- refactor(Full*): containers minor fixes
+- refactor(Dropdowns): minor fixes
+- refactor(Forms): `card-header-actions`
+- feat(Forms): `<Input type="date">`
+- feat(Forms): `FormFeedback`
+- feat(Collapses): Accordion, Custom Accordion 
+- feat(ListGroup): with TabPanes
+- refactor(PaginationItem): `tag="button"`
+- refactor(BrandButtons): spacing
+- refactor:(Buttons): view layout
+
+##### `v2.0.0-alpha.2`
+- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
+- refactor: ButtonDropdowns `<Dropdown direction="up">` (deprecate 'dropup')
+- refactor: Dashboard legend badge pill
+- refactor: SocialButtons to BrandButtons `btn-brand`
+- refactor: Buttons spacing `mr-1`
+- update: reactstrap to `5.0.0`
+- update: react, react-dom to `16.3.1`
+- update: node-sass-chokidar to `1.1.0`
+- update: prop-types to `15.5.8`
+- update: react-scripts to `1.1.4`
+
+##### `v2.0.0-alpha.1`
+- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
+- refactor: project structure change
+- refactor: moved to [Create-React-App](CRA.md)
+- chore: moved to [Semantic Versioning](https://semver.org/)
+
+##### `v1.0.10`
+- refactor: `<InputGroupAddon addonType="prepend">`
+- refactor: `<InputGroupAddon addonType="append">`
+- refactor: `<InputGroupText>`
+- refactor: remove `<InputGroupButton>`
+- update: reactstrap to `5.0.0-beta`
+- update: dependencies
+
+###### `v1.0.9`
+- refactor: Sidebar structure change
+
+###### `v1.0.8`
+- refactor: Dashboard radio buttons, new `onRadioBtnClick()` method
+- update: react to `16.2.0`
+- update: Bootstrap `4.0.0-beta.3`
+- update: dependencies
+- feature: some Bootstrap4 components added
+- fix: rollback to webpack-dev-server `2.9.7`
+- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton` 
+- refactor(checkboxes, radios): temp tweaks 
+- feat: mobile sidebar link click closes the sidebar
+- fix: .nav-tabs .nav-link `cursor: pointer`
+
+###### `v1.0.6`
+
+- update: react to `^16.1.1`
+- update: reactstrap to `^5.0.0-alpha.4`
+- refactor: deprecated reactstrap `NavDropdown` change to `Dropdown` with `nav` prop
+- refactor: use prop `bsSize` instead of the `size` to bootstrap's input sizing
+- update: dependencies
+
+###### `v1.0.5`
+- feature: Sidebar add divider.class
+- refactor: Sidebar
+- moved to react: `^16.1.0`
+- chore: dependencies update
+
+###### `v1.0.4`
+- refactor: scss
+
+###### `v1.0.3`
+- update: bootstrap to `4.0.0-beta.2`
+
+###### `v1.0.2`
+- `HeaderDropdown` component example extracted out of `Header`
+
+###### `v1.0.1`
+- moved to react: `^16.0.0`
+- moved to reactstrap: `^5.0.0-alpha.3`
+- moved to react-text-mask-hoc: `^0.10.4`
+- moved from deprecated CardBlock to `CardBody` reactstrap component
+- moved to `NavDropdown` in `Header` component
+- fix for app-header navbar-nav dropdown-menu-right
+- fix typo in Tables component PaginationItem
+
+###### `v1.0.0`
+- Sidebar component:
+	- item with optional class (_nav.js)
+	- nav link with optional variant (_nav.js)
+	- external urls allowed (_nav.js)
+	- optional SidebarFooter, SidebarHeader, SidebarForm components
+- SidebarMinimizer component
+- .brand-minimized
+- .sidebar-minimized,
+- Header component - sidebarMinimize
+- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
+
+###### `2017.08.24`
+- webpack.config env.prod
+- Dashboard .dropdown-menu-right temp.scss hotfix (full)
+- callout.scss .chart-wrapper hotfix (full)
+
+###### `2017.08.11`
+- Bootstrap 4 beta
+- Dashboard component (full):
+	- line chart for social box
+	- sparkline chart for callout
+
+###### `2017.08.01`
+- Sidebar component: 
+	- title item with optional wrapper and class (_nav.js)
+	- nav link item with optional badge
+	- code refactoring
+
+###### `2017.07.31`
+- moved to [reactstrap](https://reactstrap.github.io/)
+- moved to [webpack](https://webpack.js.org/) (dropping gulp)
+- data driven Sidebar component (_nav.js)
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,172 @@
+# Contributing to CoreUI Free React Admin Template
+
+Looking to contribute something to CoreUI Free React Admin Template? **Here's how you can help.**
+
+Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
+
+Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features.
+
+## Using the issue tracker
+
+The [issue tracker](https://github.com/coreui/coreui-free-react-admin-template/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
+
+* Please **do not** use the issue tracker for personal support requests.
+
+* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
+  Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
+  instead.
+
+* Please **do not** open issues or pull requests regarding the code in  [`@coreui/coreui`](https://github.com/coreui/coreui-react) (open them in their respective repositories).
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository.
+Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+0. **Validate and lint your code** &mdash; to ensure your problem isn't caused by a simple error in your own code.
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been reported.
+
+2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` or development branch in the repository.
+
+3. **Isolate the problem** &mdash; ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
+
+
+A good bug report shouldn't leave others needing to chase you up for more
+information. Please try to be as detailed as possible in your report. What is
+your environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? Do other browsers show the bug differently? What
+would you expect to be the outcome? All these details will help people to fix
+any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+## Feature requests
+
+Feature requests are welcome. Before opening a feature request, please take a moment to find out whether your idea
+fits with the scope and aims of the project. It's up to *you* to make a strong
+case to convince the project's developers of the merits of this feature. Please
+provide as much detail and context as possible.
+
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Adhering to the following process is the best way to get your work
+included in the project:
+
+1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/free-react-admin-template.git
+   # Navigate to the newly cloned directory
+   cd free-react-admin-template
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/coreui/coreui-free-react-admin-template.git
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely to be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+5. Locally merge (or rebase) the upstream development branch into your topic branch:
+
+   ```bash
+   git pull [--rebase] upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT License](LICENSE).
+
+### Semantic Git commit messages
+
+Inspired by Sparkbox's awesome article on [semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages). Please use following commit message format.
+
+* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
+* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
+* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
+* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
+* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
+* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
+* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
+
+
+## Code guidelines
+
+### HTML
+
+[Adhere to the Code Guide.](http://codeguide.co/#html)
+
+- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
+- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
+- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
+
+### CSS
+
+[Adhere to the Code Guide.](http://codeguide.co/#css)
+
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
+
+### JS
+
+- No semicolons (in client-side JS)
+- 2 spaces (no tabs)
+- strict mode
+- "Attractive"
+- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
+
+## License
+
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
--- a/CRA.md
+++ b/CRA.md
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@ -0,0 +1,20 @@
+Before opening an issue:
+
+- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
+- Read the [contributing guidelines](https://github.com/coreui/coreui-free-react-admin-template/blob/master/CONTRIBUTING.md)
+
+When asking general "how to" questions:
+
+- Please do not open an issue here
+
+When reporting a bug, include:
+
+- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
+- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
+
+When suggesting a feature, include:
+
+- As much detail as possible for what we should add and why it's important to CoreUI Admin Template
+- Relevant links to prior art, screenshots, or live demos whenever possible
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 creativeLabs Łukasz Holeczek.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/REACT.md
+++ b/REACT.md
@ -0,0 +1,41 @@
+# CoreUI React version
+
+## Intro 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+It uses Sass (with .scss). The styles are loaded at the template level with `node-sass-chokidar` css preprocessor
+
+Dependencies are handled by **npm**.
+
+## Directories
+```
+CoreUI-React#v2.0.0
+├── public/      (static files)
+│   ├── assets/    (assets)
+│   ├── favicon.ico  
+│   └── index.html (html temlpate)
+│
+├── src/             (project root)
+│   ├── containers/  (container source)
+│   ├── scss/        (scss/css source)
+│   ├── views/       (views source)
+│   ├── App.js
+│   ├── App.test.js
+│   ├── index.js
+│   ├── _nav.js      (sidebar config)
+│   └── routes.js    (routes config)
+│
+└── package.json
+```
+
+## Usage
+`npm i` - to install dependencies
+
+## Sctipts 
+`npm start` for developing (it runs webpack-dev-server)  
+`npm run build` to run a dev build  
+
+## See also
+[Create-React-App](CRA.md)
+[Changelog](./CHANGELOG.md)  
+[Readme](./README.md)
--- a/README.md
+++ b/README.md
@ -0,0 +1,57 @@
+## GeoHR Installation
+
+``` bash
+# clone the repo
+$ git clone https://git.oslog.id/iu/GeoHR-website.git
+
+# go into app's directory
+$ cd GeoHR-website
+
+# install app's dependencies
+$ npm install
+
+# fix dependency
+$ npm fix audit
+
+# start project
+$ npm start
+```
+
+## API Documentation
+Here is the [API Documentation](https://git.oslog.id/iu/GeoHR-website/src/branch/master/API_GeoHR_docs.md).
+
+
+## GeoHR Build to Production
+
+``` bash
+# build the project
+$ npm run build
+
+# zip the files inside build folder -> name it as build.zip
+
+# copy the zip file to server
+$ scp -rP 2001 build/build.zip dev@202.47.70.196:/var/www/html/geohr
+
+# login to dev@202.47.70.196
+$ ssh dev@202.47.70.196 -p 2001
+
+# go to geohr folder
+$ cd /var/www/html/geohr
+
+# unzip the build.zip
+$ unzip build.zip
+
+# if prompt shown, choose [A] to replace all existing files
+[dev@oscarp geohr]$ unzip build.zip
+Archive:  build.zip
+replace favicon.ico? [y]es, [n]o, [A]ll, [N]one, [r]ename: A
+  inflating: favicon.ico
+  ...
+  
+# remove build.zip file
+$ rm -rf build.zip
+
+# DONE !
+# Open siopas.co.id/geohr
+# Don't forget to shift+reload on browser
+```
--- a/README_COREUI_TEMPLATE.md
+++ b/README_COREUI_TEMPLATE.md
@ -0,0 +1,177 @@
+[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
+[![npm package][npm-coreui-badge]][npm-coreui]
+[![NPM downloads][npm-coreui-download]][npm-coreui]  
+[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react)
+[![npm package][npm-coreui-react-badge]][npm-coreui-react]
+[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]
+
+[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
+[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
+[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
+[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
+[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square
+[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
+
+# CoreUI Free React Admin Template v2 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=https://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
+
+Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) and [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
+
+Curious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
+
+CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
+
+CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/coreui/free-bootstrap-admin-template-ajax), [HTML5](https://github.com/coreui/free-angular-admin-template), [Angular 2+](https://github.com/coreui/free-angular-admin-template), [React.js](https://github.com/coreui/free-react-admin-template) & [Vue.js](https://github.com/coreui/free-vue-admin-template), [.NET Core 2](https://github.com/coreui/free-dotnet-admin-template).
+
+CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
+
+## Table of Contents
+
+* [Versions](#versions)
+* [CoreUI Pro](#coreui-pro)
+* [Admin Templates built on top of CoreUI Pro](#admin-templates-built-on-top-of-coreui-pro)
+* [Installation](#installation)
+* [Usage](#usage)
+* [What's included](#whats-included)
+* [Documentation](#documentation)
+* [Contributing](#contributing)
+* [Versioning](#versioning)
+* [Creators](#creators)
+* [Community](#community)
+* [Community Projects](#community-projects)
+* [License](#license)
+* [Support CoreUI Development](#support-coreui-development)
+
+## Versions
+
+* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
+* [CoreUI Free Bootstrap Admin Template (Ajax)](https://github.com/coreui/coreui-free-bootstrap-admin-template-ajax)
+* [CoreUI Free Angular 2+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
+* 🚧 CoreUI Free .NET Core 2 Admin Template (Available Soon)
+* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
+
+## CoreUI Pro
+
+* 💪  [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/)
+* 💪  [CoreUI Pro Bootstrap Admin Template (Ajax)](https://coreui.io/pro/)
+* 💪  [CoreUI Pro Angular Admin Template](https://coreui.io/pro/angular)
+* 💪  [CoreUI Pro React Admin Template](https://coreui.io/pro/react)
+* 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue)
+
+## Admin Templates built on top of CoreUI Pro
+
+| CoreUI Pro | Prime | Root | Alba | Leaf |
+| --- | --- | --- | --- | --- |
+| [![CoreUI Pro React Admin Template](https://coreui.io/assets/img/example-coureui.jpg)](https://coreui.io/pro/react/) | [![Prime React Admin Template](https://genesisui.com/assets/img/templates/prime1280.jpg)](https://genesisui.com/admin-templates/reactjs/prime/?support=1) | [![Root React Admin Template](https://genesisui.com/assets/img/templates/root1280.jpg)](https://genesisui.com/admin-templates/reactjs/root/?support=1) | [![Alba React Admin Template](https://genesisui.com/assets/img/templates/alba1280.jpg)](https://genesisui.com/admin-templates/reactjs/alba/?support=1) | [![Leaf React Admin Template](https://genesisui.com/assets/img/templates/leaf1280.jpg)](https://genesisui.com/admin-templates/reactjs/leaf/?support=1)
+
+## Installation
+
+``` bash
+# clone the repo
+$ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
+
+# go into app's directory
+$ cd my-project
+
+# install app's dependencies
+$ npm install
+```
+
+## Create React App
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+see also:
+[User Guide](CRA.md)
+
+### Basic usage
+
+``` bash
+# dev server  with hot reload at http://localhost:3000
+$ npm start
+```
+
+Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.
+
+### Build
+
+Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
+
+```bash
+# build for production with minification
+$ npm run build
+```
+
+## What's included
+
+Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+
+```
+CoreUI-React#v2.0.0
+├── public/          #static files
+│   ├── assets/      #assets
+│   └── index.html   #html template
+│
+├── src/             #project root
+│   ├── containers/  #container source
+│   ├── scss/        #user scss/css source
+│   ├── views/       #views source
+│   ├── App.js
+│   ├── App.test.js
+│   ├── index.js
+│   ├── _nav.js      #sidebar config
+│   └── routes.js    #routes config
+│
+└── package.json
+```
+
+## Documentation
+
+The documentation for the CoreUI  Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
+
+
+## Contributing
+
+Please read through our [contributing guidelines](https://github.com/coreui/coreui-free-react-admin-template/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
+Editor preferences are available in the [editor config](https://github.com/coreui/coreui-free-react-admin-template/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
+
+See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version.
+
+## Creators
+
+**Łukasz Holeczek**
+* <https://twitter.com/lukaszholeczek>
+* <https://github.com/mrholek>
+
+**Andrzej Kopański**
+* <https://github.com/xidedix>
+
+## Community
+
+Get updates on CoreUI's development and chat with the project maintainers and community members.
+
+- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
+- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
+
+### Community Projects
+
+Some of projects created by community but not maintained by CoreUI team.
+
+* [NuxtJS + Vue CoreUI](https://github.com/muhibbudins/nuxt-coreui)
+* [Colmena](https://github.com/colmena/colmena)
+* [mvelosop/AspNetCore2CoreUI](https://github.com/mvelosop/AspNetCore2CoreUI)
+
+## Copyright and license
+
+copyright 2018 creativeLabs Łukasz Holeczek. Code released under [the MIT license](LICENSE).
+There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
+
+## Support CoreUI Development
+
+CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek), buying [CoreUI Pro Version](https://coreui.io/pro) or buying one of our [premium admin templates](https://genesisui.com/?support=1).
+
+As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).
--- a/docs/WhatsApp
+++ b/docs/WhatsApp
--- a/package.json
+++ b/package.json
@ -0,0 +1,137 @@
+{
+  "name": "simpro-web",
+  "version": "0.0.1",
+  "description": "Sistem Informasi Manajemen Proyek",
+  "author": "Ardhi",
+  "homepage": ".",
+  "copyright": "Copyright Integrasia Utama",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "http",
+    "url": "https://git.oslog.id/iu/simpro-website.git"
+  },
+  "dependencies": {
+    "@coreui/coreui": "^2.1.12",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
+    "@coreui/icons": "0.3.0",
+    "@coreui/react": "^2.5.1",
+    "@dabeng/react-orgchart": "^1.0.0",
+    "@iconify/icons-ant-design": "^1.0.6",
+    "@iconify/icons-fa-solid": "^1.0.6",
+    "@iconify/icons-fe": "^1.0.3",
+    "@iconify/icons-geo": "^1.0.3",
+    "@iconify/icons-ion": "^1.0.7",
+    "@iconify/icons-mdi": "^1.0.57",
+    "@iconify/icons-simple-line-icons": "^1.0.1",
+    "@iconify/icons-uil": "^1.0.6",
+    "@iconify/react": "^1.1.1",
+    "@nicholasadamou/react-iframe": "^1.0.3",
+    "@terrestris/react-geo": "^12.0.0",
+    "@tinymce/tinymce-react": "^3.13.0",
+    "alasql": "^1.7.3",
+    "antd": "^4.16.13",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.3.1",
+    "chart.js": "^2.8.0",
+    "chartjs-plugin-datalabels": "^1.0.0",
+    "chartjs-plugin-zoom": "^0.7.7",
+    "classnames": "^2.2.6",
+    "compressorjs": "^1.0.7",
+    "core-js": "^3.1.4",
+    "dhtmlx-gantt": "^7.1.7",
+    "dom-to-image": "^2.6.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "faker": "^6.6.6",
+    "flag-icon-css": "^3.3.0",
+    "font-awesome": "^4.7.0",
+    "history": "^5.2.0",
+    "interactjs": "^1.10.11",
+    "leaflet": "^1.7.1",
+    "leaflet-defaulticon-compatibility": "^0.1.1",
+    "leaflet-draw": "^1.0.4",
+    "moment": "^2.24.0",
+    "node-sass": "^4.12.0",
+    "numeral": "^2.0.6",
+    "ol": "^5.3.3",
+    "plotly.js": "^1.45.3",
+    "prop-types": "^15.7.2",
+    "re-resizable": "^6.9.0",
+    "react": "^16.14.0",
+    "react-app-polyfill": "^1.0.1",
+    "react-awesome-query-builder": "^4.3.0",
+    "react-bootstrap-sweetalert": "^5.1.9",
+    "react-bootstrap-table-next": "^3.3.3",
+    "react-bootstrap-table2-editor": "^1.4.0",
+    "react-bootstrap-table2-paginator": "^2.1.0",
+    "react-bootstrap-table2-toolkit": "^2.1.1",
+    "react-calendar-timeline": "^0.27.0",
+    "react-chartjs-2": "^2.7.6",
+    "react-color": "^2.17.3",
+    "react-content-loader": "^6.0.3",
+    "react-dom": "^16.14.0",
+    "react-grid-layout": "^1.2.5",
+    "react-leaflet": "^3.2.0",
+    "react-leaflet-draw": "^0.19.8",
+    "react-loader-spinner": "^3.1.5",
+    "react-notifications": "^1.7.2",
+    "react-openlayers": "^0.2.1",
+    "react-plotly.js": "^2.4.0",
+    "react-rnd": "^10.1.3",
+    "react-router-config": "^5.0.1",
+    "react-router-dom": "^5.0.1",
+    "react-select": "^4.3.1",
+    "react-slick": "^0.28.1",
+    "react-test-renderer": "^16.8.6",
+    "react-toastify": "^5.5.0",
+    "react-top-loading-bar": "^1.2.0",
+    "reactstrap": "^8.0.0",
+    "redux": "^4.0.5",
+    "script-case": "^1.0.0",
+    "simple-line-icons": "^2.4.1",
+    "slick-carousel": "^1.8.1",
+    "underscore": "^1.13.1",
+    "xlsx": "^0.17.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@faker-js/faker": "^6.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "react-scripts": "^3.0.1",
+    "webpack-sources": "1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts --max_old_space_size=8096 build",
+    "test": "react-scripts test",
+    "test:cov": "npm test -- --coverage --watchAll=false",
+    "test:debug": "react-scripts --inspect-brk test --runInBand",
+    "eject": "react-scripts eject"
+  },
+  "bugs": {
+    "url": "https://git.oslog.id/iu/simpro-website/issues"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 9",
+    "not op_mini all"
+  ],
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!**/*index.js",
+      "!src/serviceWorker.js",
+      "!src/polyfill.js"
+    ]
+  },
+  "engines": {
+    "node": ">=8.10",
+    "npm": ">=6"
+  }
+}
--- a/public/assets/.gitkeep
+++ b/public/assets/.gitkeep
--- a/public/assets/img/avatars/1.jpg
+++ b/public/assets/img/avatars/1.jpg
--- a/public/assets/img/avatars/2.jpg
+++ b/public/assets/img/avatars/2.jpg
--- a/public/assets/img/avatars/3.jpg
+++ b/public/assets/img/avatars/3.jpg
--- a/public/assets/img/avatars/4.jpg
+++ b/public/assets/img/avatars/4.jpg
--- a/public/assets/img/avatars/5.jpg
+++ b/public/assets/img/avatars/5.jpg
--- a/public/assets/img/avatars/6.jpg
+++ b/public/assets/img/avatars/6.jpg
--- a/public/assets/img/avatars/7.jpg
+++ b/public/assets/img/avatars/7.jpg
--- a/public/assets/img/avatars/8.jpg
+++ b/public/assets/img/avatars/8.jpg
--- a/public/assets/img/favicon.png
+++ b/public/assets/img/favicon.png
--- a/public/assets/img/favicon_bmd_denpasar.png
+++ b/public/assets/img/favicon_bmd_denpasar.png
--- a/public/assets/img/favicon_old.png
+++ b/public/assets/img/favicon_old.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <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>
+  <!--
+      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/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/simpro-icon.ico">
+  <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon_bmd_denpasar.ico"> -->
+  <link rel="stylesheet" href="https://unpkg.com/@coreui/icons@1.0.0/css/all.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin="" />
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    // Shared ID
+    gtag('config', 'UA-118965717-3');
+    // React.js ID
+    gtag('config', 'UA-118965717-6');
+
+  </script>
+  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""></script>
+</head>
+
+<!-- BODY options, add following classes to body to change options
+
+  // Header options
+  1. '.header-fixed'					- Fixed Header
+
+  // Brand options
+  1. '.brand-minimized'       - Minimized brand (Only symbol)
+
+  // Sidebar options
+  1. '.sidebar-fixed'					- Fixed Sidebar
+  2. '.sidebar-hidden'				- Hidden Sidebar
+  3. '.sidebar-off-canvas'		- Off Canvas Sidebar
+  4. '.sidebar-minimized'			- Minimized Sidebar (Only icons)
+  5. '.sidebar-compact'			  - Compact Sidebar
+
+  // Aside options
+  1. '.aside-menu-fixed'			- Fixed Aside Menu
+  2. '.aside-menu-hidden'			- Hidden Aside Menu
+  3. '.aside-menu-off-canvas'	- Off Canvas Aside Menu
+
+  // Breadcrumb options
+  1. '.breadcrumb-fixed'			- Fixed Breadcrumb
+
+  // Footer options
+  1. '.footer-fixed'					- Fixed footer
+
+  -->
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root">
+
+  </div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "GEOHR",
+  "name": "GEOHR",
+  "icons": [
+    {
+      "src": "./assets/img/favicon.png",
+      "sizes": "100x100",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/simpro-icon.ico
+++ b/public/simpro-icon.ico
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import './App.scss';
+import 'react-notifications/lib/notifications.css';
+// import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
+// import 'react-bootstrap-table-next/dist/react-bootstrap-table-next.min.js';
+// import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
+
+const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
+
+// Containers
+const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
+
+// Pages
+const Login = React.lazy(() => import('./views/Pages/Login'));
+const Register = React.lazy(() => import('./views/Pages/Register'));
+const Page403 = React.lazy(() => import('./views/Pages/Page403'));
+const Page404 = React.lazy(() => import('./views/Pages/Page404'));
+const Page500 = React.lazy(() => import('./views/Pages/Page500'));
+const SiopasMap = React.lazy(() => import('./views/Map'));
+
+class App extends Component {
+
+  render() {
+    return (
+      <HashRouter>
+          <React.Suspense fallback={loading()}>
+            <Switch>
+              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
+              {/* <Route exact path="/home" name="Home" render={props => <DefaultLayout {...props}/>} /> */}
+              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
+              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
+              <Route exact path="/403" name="Page 403" render={props => <Page403 {...props}/>} />
+              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
+              <Route exact path="/map/view" name="Map" render={props => <SiopasMap {...props}/>} />
+              {/*<Route exact path="/layerswitcher" name="Layer Switcher" render={props => <LayerSwitcherExample {...props}/>} />*/}
+              {/*<Route exact path="/muidt" name="Mui Datatable Example" render={props => <MuiDatatablesExample {...props}/>} />*/}
+              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
+            </Switch>
+          </React.Suspense>
+      </HashRouter>
+    );
+  }
+}
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@ -0,0 +1,11 @@
+// Styles
+// CoreUI Icons Set
+@import '~@coreui/icons/css/coreui-icons.css';
+// Import Flag Icons Set
+@import '~flag-icon-css/css/flag-icon.min.css';
+// Import Font Awesome Icons Set
+@import '~font-awesome/css/font-awesome.min.css';
+// Import Simple Line Icons Set
+@import '~simple-line-icons/css/simple-line-icons.css';
+// Import Main styles for this application
+@import './scss/style.scss';
--- a/src/App.test.js
+++ b/src/App.test.js
@ -0,0 +1,9 @@
+import React from 'react';
+import {shallow} from 'enzyme/build';
+import App from './App';
+
+
+it('mounts without crashing', () => {
+  const wrapper = shallow(<App />);
+  wrapper.unmount() 
+});
--- a/src/_nav.js
+++ b/src/_nav.js
@ -0,0 +1,151 @@
+let dashboardUrl = '';
+let menu = {};
+
+if (localStorage.getItem('u_group') === "kominfo") {
+  dashboardUrl = '/dashboard-kominfo';
+  menu = {
+    items: [
+      {
+        name: 'Dashboard',
+        url: dashboardUrl,
+        icon: 'icon-speedometer',
+      },
+      {
+        name: 'Map',
+        url: '/map/view',
+        icon: 'icon-map',
+      }
+    ]
+  }
+}
+else {
+  dashboardUrl = '/dashboard';
+  menu = {
+    items: [
+      {
+        name: 'Dashboard',
+        url: dashboardUrl,
+        icon: 'icon-speedometer',
+      },
+      // {
+      //   name: 'Dashboard B2C',
+      //   url: './dashboardb2c',
+      //   icon: 'icon-speedometer',
+
+      // },
+      // {
+      //   name: 'Users',
+      //   url: '/users',
+      //   icon: 'icon-user',
+      // },
+      // {
+      //   name: 'Offices',
+      //   url: '/offices',
+      //   icon: 'cil-home',
+      // },
+      // {
+      //   name: 'Group Sales',
+      //   url: '/group-sales',
+      //   icon: 'cil-sitemap',
+      // }, 
+      // {
+      //   name: 'Sales',
+      //   url: '/sales',
+      //   icon: 'icon-user',
+      // }, 
+      // {
+      //   name: 'Office Hours',
+      //   url: '/office-hours',
+      //   icon: 'cil-alarm',
+      // },
+      // {
+      //   name: 'Customer',
+      //   url: '/customer',
+      //   icon: 'cil-home',
+      // },  
+      // {
+      //   name: 'Layers',
+      //   url: '/map/layers',
+      //   icon: 'icon-layers',
+      // },
+      {
+        name: 'Peta',
+        url: '/map/view',
+        icon: 'icon-map',
+      },
+      // new
+      {
+        name: 'Karyawan',
+        url: '/karyawan',
+        icon: 'icon-user',
+      },
+      // {
+      //   name: 'Divisi Karyawan',
+      //   url: '/divisi-karyawan',
+      //   icon: 'cil-sitemap',
+      // },
+      // {
+      //   name: 'Jam Kerja',
+      //   url: '/office-hours',
+      //   icon: 'cil-alarm',
+      // },
+      {
+        name: 'Presensi',
+        url: '/presensi',
+        icon: 'fa fa-calendar-check-o',
+      },
+      {
+        name: 'Absensi',
+        url: '/absensi',
+        icon: 'fa fa-calendar-times-o'
+      },
+      {
+        name: 'Laporan Tugas Karyawan',
+        url: '/laporan-tugas-karyawan',
+        icon: 'cil-task',
+      },
+      // {
+      //   name: 'Izin',
+      //   url: '/izin',
+      //   icon: 'cil-media-pause',
+      // },
+      // {
+      //   name: 'Broadcast',
+      //   url: '/broadcast',
+      //   icon: 'cil-bullhorn',
+      // },
+      {
+        name: 'Tombol Darurat',
+        url: '/panic-button',
+        icon: 'fa fa-dot-circle-o ',
+      },
+      // {
+      //   name: 'Reimbuse',
+      //   url: '/reimbuse',
+      //   icon: 'cil-money',
+      // },
+      // {
+      //   name: 'Visit Customer',
+      //   url: '/visit-customer',
+      //   icon: 'cil-location-pin',
+      // },
+      {
+        name: 'Menu',
+        url: '/menu',
+        icon: 'cil-menu',
+      },
+      {
+        name: 'Roles',
+        url: '/roles',
+        icon: 'cil-people',
+      },
+      {
+        name: 'Lembur',
+        url: '/lembur',
+        icon: 'fa fa-clock-o',
+      },
+    ],
+  };
+}
+
+export default menu;
--- a/src/assets/css/customscroll.css
+++ b/src/assets/css/customscroll.css
@ -0,0 +1,16 @@
+.custom-scroll::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #F5F5F5;
+}
+
+.custom-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: #F5F5F5;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
+  background-color: #eaeaea;
+}
--- a/src/assets/db/bmd_denpasar_2018_27012020.sql
+++ b/src/assets/db/bmd_denpasar_2018_27012020.sql
--- a/src/assets/db/bmd_denpasar_27012020.sql
+++ b/src/assets/db/bmd_denpasar_27012020.sql
--- a/src/assets/docs/layer_legend.txt
+++ b/src/assets/docs/layer_legend.txt
@ -0,0 +1,13 @@
+====================================================================================================================
+Layer Legend
+Author: Ardhi
+Description: This documentation is an example of a guidance to know how to get a legend graphic of a layer
+Created on: 29th January 2020
+Full documentation here: 
+https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html
+I use this library: https://terrestris.github.io/react-geo/docs/latest/index.html#section-legend
+====================================================================================================================
+
+URL: http://192.168.99.110/geoserver/wms?request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=bmd_denpasar:test_bmd_1&transparent=true&legend_options=fontColor:0xFFFFFF;fontAntiAliasing:true;fontSize:14;fontStyle:bold;
+Method: GET
+Response: The image of layer symbol
--- a/src/assets/docs/layer_styles.txt
+++ b/src/assets/docs/layer_styles.txt
@ -0,0 +1,208 @@
+====================================================================================================================
+Layer Styles
+Author: Ardhi
+Description: This documentation is an example of a guidance to know how to style a layer, 
+a payload example using geoserver SLD file
+Created on: 28th January 2020
+Full documentation here: 
+https://docs.geoserver.org/stable/en/user/styling/index.html
+https://docs.geoserver.org/stable/en/user/styling/sld/index.html
+====================================================================================================================
+
+Type: Point (using Symbolizer, ex: star)
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:test_bmd_2_point
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:test_bmd_2_point</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>point</sld:Name>
+            <sld:Title>Default Point</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:Abstract>A sample style that draws a point</sld:Abstract>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Name>rule1</sld:Name>
+                    <sld:Title>Target</sld:Title>
+                    <sld:Abstract>A 6 pixel square with a red fill and no stroke</sld:Abstract>
+                    <sld:PointSymbolizer>
+                        <sld:Graphic>
+                            <sld:Mark>
+                                <sld:WellKnownName>star</sld:WellKnownName>
+                                <sld:Fill>
+                                    <sld:CssParameter name="fill">#11CCF1</sld:CssParameter>
+                                </sld:Fill>
+                                <sld:Stroke/>
+                            </sld:Mark>
+                            <sld:Size>15</sld:Size>
+                        </sld:Graphic>
+                    </sld:PointSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+
+
+Type: MultiPoint (using FillColor)
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:point_tanah_sekolah0
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:point_tanah_sekolah0</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>bmd_denpasar_point_tanah_sekolah1</sld:Name>
+            <sld:Title>azure square point style</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Title>azure point</sld:Title>
+                    <sld:PointSymbolizer>
+                        <sld:Graphic>
+                            <sld:Mark>
+                                <sld:Fill>
+                                    <sld:CssParameter name="fill">#0033cc</sld:CssParameter>
+                                </sld:Fill>
+                            </sld:Mark>
+                            <sld:Size>6</sld:Size>
+                        </sld:Graphic>
+                    </sld:PointSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+
+
+Type: LineString
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:test_bmd_line_1
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:test_bmd_line_1</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>line</sld:Name>
+            <sld:Title>Default Line</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:Abstract>A sample style that draws a line</sld:Abstract>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Name>rule1</sld:Name>
+                    <sld:Title>Blue Line</sld:Title>
+                    <sld:Abstract>A solid blue line with a 1 pixel width</sld:Abstract>
+                    <sld:LineSymbolizer>
+                        <sld:Stroke>
+                            <sld:CssParameter name="stroke">#0000FF</sld:CssParameter>
+                        </sld:Stroke>
+                    </sld:LineSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+
+
+Type: MultiLineString
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:test_multilinestring1
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:test_multilinestring1</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>line</sld:Name>
+            <sld:Title>Default Line</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:Abstract>A sample style that draws a line</sld:Abstract>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Name>rule1</sld:Name>
+                    <sld:Title>Blue Line</sld:Title>
+                    <sld:Abstract>A solid blue line with a 1 pixel width</sld:Abstract>
+                    <sld:LineSymbolizer>
+                        <sld:Stroke>
+                            <sld:CssParameter name="stroke">#0000FF</sld:CssParameter>
+                        </sld:Stroke>
+                    </sld:LineSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+
+
+Type: Polygon
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:test_bmd_1
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:test_bmd_1</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>polygon</sld:Name>
+            <sld:Title>Default Polygon</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:Abstract>A sample style that draws a polygon</sld:Abstract>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Name>rule1</sld:Name>
+                    <sld:Title>Gray Polygon with Black Outline</sld:Title>
+                    <sld:Abstract>A polygon with a gray fill and a 1 pixel black outline</sld:Abstract>
+                    <sld:PolygonSymbolizer>
+                        <sld:Fill>
+                            <sld:CssParameter name="fill">#E72020</sld:CssParameter>
+                            <sld:CssParameter name="fill-opacity">0.2</sld:CssParameter>
+                        </sld:Fill>
+                        <sld:Stroke/>
+                    </sld:PolygonSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
+
+
+Type: MultiPolygon
+---------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:test_multipolygon1
+Method: GET
+Response:
+<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
+    <sld:NamedLayer>
+        <sld:Name>bmd_denpasar:test_multipolygon1</sld:Name>
+        <sld:UserStyle>
+            <sld:Name>polygon</sld:Name>
+            <sld:Title>Default Polygon</sld:Title>
+            <sld:IsDefault>1</sld:IsDefault>
+            <sld:Abstract>A sample style that draws a polygon</sld:Abstract>
+            <sld:FeatureTypeStyle>
+                <sld:Name>name</sld:Name>
+                <sld:Rule>
+                    <sld:Name>rule1</sld:Name>
+                    <sld:Title>Gray Polygon with Black Outline</sld:Title>
+                    <sld:Abstract>A polygon with a gray fill and a 1 pixel black outline</sld:Abstract>
+                    <sld:PolygonSymbolizer>
+                        <sld:Fill>
+                            <sld:CssParameter name="fill">#E72020</sld:CssParameter>
+                            <sld:CssParameter name="fill-opacity">0.2</sld:CssParameter>
+                        </sld:Fill>
+                        <sld:Stroke/>
+                    </sld:PolygonSymbolizer>
+                </sld:Rule>
+            </sld:FeatureTypeStyle>
+        </sld:UserStyle>
+    </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
--- a/src/assets/docs/wfs_example.txt
+++ b/src/assets/docs/wfs_example.txt
@ -0,0 +1,643 @@
+====================================================================================================================
+WFS Example
+Author: Ardhi
+Description: This documentation is an example of a guidance to know how geometry are saved in geoserver,
+how to show table, a payload example, to update or delete geometry using geoserver rest API
+Created on: 25th January 2020
+====================================================================================================================
+Create New Feature
+-------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+- layer name
+- geom type (multi / single)
+- map projection
+- coordinates
+- other feature atrributes (fields)
+
+Examples:
+(Point)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_bmd_2_point xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:coordinates cs="," decimal="." ts=" ">11886499.833369536,-693527.4813667177</gml:coordinates>
+				</gml:Point>
+			</feature:the_geom>
+			<feature:nama_point>point1</feature:nama_point>
+		</feature:test_bmd_2_point>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult handle="Added 1 feature to '' via MapLoom.">
+		<ogc:FeatureId fid="test_bmd_2_point.2"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Added 1 feature to '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+(MultiPoint)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_multipoint1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:MultiPoint srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:pointMember>
+						<gml:Point>
+							<gml:coordinates cs="," decimal="." ts=" ">11892025.868385417,-694976.24551184</gml:coordinates>
+						</gml:Point>
+					</gml:pointMember>
+					<gml:pointMember>
+						<gml:Point>
+							<gml:coordinates cs="," decimal="." ts=" ">11893350.776915178,-694453.9258029916</gml:coordinates>
+						</gml:Point>
+					</gml:pointMember>
+					<gml:pointMember>
+						<gml:Point>
+							<gml:coordinates cs="," decimal="." ts=" ">11895096.089113038,-695969.9269091613</gml:coordinates>
+						</gml:Point>
+					</gml:pointMember>
+				</gml:MultiPoint>
+			</feature:the_geom>
+			<feature:nama_titik>area rawan bencana</feature:nama_titik>
+		</feature:test_multipoint1>
+	</wfs:Insert>
+</wfs:Transaction>Response:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_multipoint1.2"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+
+(LineString)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_bmd_line_1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:LineString srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:coordinates cs="," decimal="." ts=" ">11886123.154847158,-693341.4126344601 11886223.617927274,-693431.829327727 11886527.877188448,-693645.671983231 11886525.006817233,-693496.4126800604 11886424.543824714,-693446.1812275994 11886384.358627707,-693416.0423298439 11886370.00685923,-693345.7181912824</gml:coordinates>
+				</gml:LineString>
+			</feature:the_geom>
+			<feature:nama_jalan>jalan cinta</feature:nama_jalan>
+		</feature:test_bmd_line_1>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_bmd_line_1.1"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+(MultiLineString)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_multilinestring1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:MultiLineString srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:lineMember>
+						<gml:LineString>
+							<gml:coordinates cs="," decimal="." ts=" ">11889089.199553609,-694806.789552831 11889515.599038912,-694806.789552831 11889982.886502603,-695028.7507504856 11890397.603453713,-695314.9642818893 11890607.882651944,-695817.2977438518</gml:coordinates>
+						</gml:LineString>
+					</gml:lineMember>
+					<gml:lineMember>
+						<gml:LineString>
+							<gml:coordinates cs="," decimal="." ts=" ">11889001.58322468,-694941.1344097083 11888989.901047,-695297.4406506772 11889141.769713346,-695624.5418039591 11889235.22677827,-696015.8945779663 11889223.544600591,-696173.6039766396</gml:coordinates>
+						</gml:LineString>
+					</gml:lineMember>
+				</gml:MultiLineString>
+			</feature:the_geom>
+			<feature:nama_jalan>jalan cinta</feature:nama_jalan>
+		</feature:test_multilinestring1>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_multilinestring1.2"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+(Polygon)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_bmd_1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:Polygon srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:outerBoundaryIs>
+						<gml:LinearRing>
+							<gml:coordinates cs="," decimal="." ts=" ">11885890.360625308,-693614.4345447493 11886066.325063715,-693607.6666826681 11886047.016727008,-693545.3625436059 11885890.360625308,-693556.9077170598 11885891.754008677,-693576.0169747006 11885881.005051253,-693576.0169747006 11885890.360625308,-693614.4345447493</gml:coordinates>
+						</gml:LinearRing>
+					</gml:outerBoundaryIs>
+				</gml:Polygon>
+			</feature:the_geom>
+			<feature:nama_area>makam al falah</feature:nama_area>
+			<feature:status_area>baik</feature:status_area>
+			<feature:penggunaan>tempat pemakaman</feature:penggunaan>
+		</feature:test_bmd_1>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_bmd_1.2"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+(MultiPolygon)
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_multipolygon1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:MultiPolygon srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:polygonMember>
+						<gml:Polygon>
+							<gml:outerBoundaryIs>
+								<gml:LinearRing>
+									<gml:coordinates cs="," decimal="." ts=" ">11886589.213954791,-694367.2474235861 11886875.42730794,-694519.1158225475 11887167.481749926,-694495.7515563164 11887161.640661087,-694805.3290865673 11886729.400086945,-694787.805820048 11886612.57831015,-694700.1894874518 11886589.213954791,-694367.2474235861</gml:coordinates>
+								</gml:LinearRing>
+							</gml:outerBoundaryIs>
+						</gml:Polygon>
+					</gml:polygonMember>
+					<gml:polygonMember>
+						<gml:Polygon>
+							<gml:outerBoundaryIs>
+								<gml:LinearRing>
+									<gml:coordinates cs="," decimal="." ts=" ">11886314.682992412,-694449.02275473 11886343.88843661,-694852.0578846727 11885800.667174513,-694822.852262218 11885765.620641476,-694449.02275473 11886314.682992412,-694449.02275473</gml:coordinates>
+								</gml:LinearRing>
+							</gml:outerBoundaryIs>
+						</gml:Polygon>
+					</gml:polygonMember>
+				</gml:MultiPolygon>
+			</feature:the_geom>
+			<feature:nama_area>kos-kosan Ibu Jamil</feature:nama_area>
+		</feature:test_multipolygon1>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_multipolygon1.1"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+
+Edit Geometry
+---------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="geonode:test12" xmlns:feature="http://www.geonode.org/">
+		<wfs:Property>
+			<wfs:Name>the_geom</wfs:Name>
+			<wfs:Value>
+				<gml:Polygon srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:outerBoundaryIs>
+						<gml:LinearRing>
+							<gml:coordinates cs="," decimal="." ts=" ">11901975.891860606,-698153.9913410997 11901566.635257043,-699013.9079201279 11902842.178206988,-699160.4120491266 11902674.97220021,-698612.6135096712 11901975.891860606,-698153.9913410997</gml:coordinates>
+						</gml:LinearRing>
+					</gml:outerBoundaryIs>
+				</gml:Polygon>
+			</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test12.3"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+
+
+IF GEOM IS NULL, THEN RESPONSE IS ERROR:
+<?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult><ogc:FeatureId fid="none"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:FAILED/> </wfs:Status> <wfs:Message>Error performing insert: java.lang.String cannot be cast to com.vividsolutions.jts.geom.Geometry</wfs:Message> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
+
+
+Edit Attributes / Edit Feature
+---------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="geonode:test12" xmlns:feature="http://www.geonode.org/">
+		<wfs:Property>
+			<wfs:Name>nama_area</wfs:Name>
+			<wfs:Value>bandara3_edit</wfs:Value>
+		</wfs:Property>
+		<wfs:Property>
+			<wfs:Name>status_area</wfs:Name>
+			<wfs:Value>0</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test12.3"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+
+
+Show Table
+--------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:GetFeature maxFeatures="25" outputFormat="JSON" service="WFS" startIndex="0" version="1.1.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
+	<wfs:Query srsName="EPSG:4326" typeName="geonode:test12"/>
+</wfs:GetFeature>
+
+
+
+
+===================================================
+Projection: EPSG:4326 (test_bmd_1 layer / polygon)
+===================================================
+
+Create New Feature
+--------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_bmd_1 xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:Polygon srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:outerBoundaryIs>
+						<gml:LinearRing>
+							<gml:coordinates cs="," decimal="." ts=" ">11912150.70602516,-696067.2297045494 11912208.034207555,-696640.5074453525 11913341.849953607,-696440.5964197303 11913195.345645027,-695809.9910147788 11912150.70602516,-696067.2297045494</gml:coordinates>
+						</gml:LinearRing>
+					</gml:outerBoundaryIs>
+				</gml:Polygon>
+			</feature:the_geom>
+			<feature:nama_area>feature1_bmd</feature:nama_area>
+			<feature:status_area>digunakan</feature:status_area>
+			<feature:penggunaan>mall</feature:penggunaan>
+		</feature:test_bmd_1>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult handle="Added 1 feature to '' via MapLoom.">
+		<ogc:FeatureId fid="test_bmd_1.1"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Added 1 feature to '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+Edit Geometry
+--------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_1" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<wfs:Property>
+			<wfs:Name>the_geom</wfs:Name>
+			<wfs:Value>
+				<gml:Polygon srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:outerBoundaryIs>
+						<gml:LinearRing>
+							<gml:coordinates cs="," decimal="." ts=" ">11912443.71484449,-695572.7177419447 11912169.81548497,-696120.5165581756 11912876.858017681,-696470.8527538674 11913150.757377198,-695929.4239817676 11912443.71484449,-695572.7177419447</gml:coordinates>
+						</gml:LinearRing>
+					</gml:outerBoundaryIs>
+				</gml:Polygon>
+			</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_1.1"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+Edit Attributes / Edit Feature
+-------------------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_1" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<wfs:Property>
+			<wfs:Name>nama_area</wfs:Name>
+			<wfs:Value>feature1_bmd_edit</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_1.1"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+Show Table
+------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:GetFeature maxFeatures="25" outputFormat="JSON" service="WFS" startIndex="0" version="1.1.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
+	<wfs:Query srsName="EPSG:4326" typeName="bmd_denpasar:test_bmd_1"/>
+</wfs:GetFeature>
+Response:
+{
+    "crs": {
+        "properties": {
+            "name": "urn:ogc:def:crs:EPSG::4326"
+        },
+        "type": "name"
+    },
+    "features": [
+        {
+            "geometry": {
+                "coordinates": [
+                    [
+                        [
+                            107.01130260258336,
+                            -6.236087122949689
+                        ],
+                        [
+                            107.0088421227737,
+                            -6.240978942036793
+                        ],
+                        [
+                            107.01519359391025,
+                            -6.244107404753763
+                        ],
+                        [
+                            107.0176540737199,
+                            -6.2392724990064
+                        ],
+                        [
+                            107.01130260258336,
+                            -6.236087122949689
+                        ]
+                    ]
+                ],
+                "type": "Polygon"
+            },
+            "geometry_name": "the_geom",
+            "id": "test_bmd_1.1",
+            "properties": {
+                "nama_area": "feature1_bmd_edit",
+                "penggunaan": "mall",
+                "status_area": "digunakan"
+            },
+            "type": "Feature"
+        }
+    ],
+    "totalFeatures": 1,
+    "type": "FeatureCollection"
+}
+
+Delete Feature
+-------------------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="bmd_denpasar:test_bmd_1" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_1.1"/>
+		</ogc:Filter>
+	</wfs:Delete>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Removed 1 feature from '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+======================================================
+Projection: EPSG:4326 (test_bmd_2_point layer / point)
+======================================================
+
+Create New Feature:
+--------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
+		<feature:test_bmd_2_point xmlns:feature="http://siopas.co.id/bmd-denpasar">
+			<feature:the_geom>
+				<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:coordinates cs="," decimal="." ts=" ">12602498.558283165,-869310.3742524114</gml:coordinates>
+				</gml:Point>
+			</feature:the_geom>
+			<feature:nama_point>test_bmd_2_point1</feature:nama_point>
+		</feature:test_bmd_2_point>
+	</wfs:Insert>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult handle="Added 1 feature to '' via MapLoom.">
+		<ogc:FeatureId fid="test_bmd_2_point.1"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Added 1 feature to '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+Edit Geometry
+-----------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<wfs:Property>
+			<wfs:Name>the_geom</wfs:Name>
+			<wfs:Value>
+				<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:coordinates cs="," decimal="." ts=" ">12630296.161275087,-871501.5712076114</gml:coordinates>
+				</gml:Point>
+			</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_2_point.1"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+Edit Feature / Attributes
+-------------------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<wfs:Property>
+			<wfs:Name>nama_point</wfs:Name>
+			<wfs:Value>test_bmd_2_point1_edit</wfs:Value>
+		</wfs:Property>
+		<wfs:Property>
+			<wfs:Name>the_geom</wfs:Name>
+			<wfs:Value>
+				<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
+					<gml:coordinates cs="," decimal="." ts=" ">12630296.161687493,-871501.571241029</gml:coordinates>
+				</gml:Point>
+			</wfs:Value>
+		</wfs:Property>
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_2_point.1"/>
+		</ogc:Filter>
+	</wfs:Update>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
+
+
+Show Table
+-------------------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:GetFeature maxFeatures="25" outputFormat="JSON" service="WFS" startIndex="0" version="1.1.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
+	<wfs:Query srsName="EPSG:4326" typeName="bmd_denpasar:test_bmd_2_point"/>
+</wfs:GetFeature>
+Response:
+{
+    "crs": {
+        "properties": {
+            "name": "urn:ogc:def:crs:EPSG::4326"
+        },
+        "type": "name"
+    },
+    "features": [
+        {
+            "geometry": {
+                "coordinates": [
+                    113.45988085000002,
+                    -7.804583949999995
+                ],
+                "type": "Point"
+            },
+            "geometry_name": "the_geom",
+            "id": "test_bmd_2_point.1",
+            "properties": {
+                "nama_point": "test_bmd_2_point1_edit"
+            },
+            "type": "Feature"
+        }
+    ],
+    "totalFeatures": 1,
+    "type": "FeatureCollection"
+}
+
+
+Map on click (to get features)
+--------------------------------
+URL: http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=bmd_denpasar%3Atest_bmd_2_point&LAYERS=bmd_denpasar%3Atest_bmd_2_point&tiled=true&_dc=1574761400330&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=5&I=177&J=70&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=12601714.231207296%2C-900122.445086237%2C12640849.989689307%2C-860986.6866042268
+Method: GET
+
+Query String Parameters:
+SERVICE: WMS
+VERSION: 1.3.0
+REQUEST: GetFeatureInfo
+FORMAT: image/png
+TRANSPARENT: true
+QUERY_LAYERS: bmd_denpasar:test_bmd_2_point
+LAYERS: bmd_denpasar:test_bmd_2_point
+tiled: true
+_dc: 1574761400330
+INFO_FORMAT: application/json
+FEATURE_COUNT: 5
+I: 177
+J: 70
+WIDTH: 256
+HEIGHT: 256
+CRS: EPSG:3857
+STYLES: 
+BBOX: 12601714.231207296,-900122.445086237,12640849.989689307,-860986.6866042268
+
+
+Delete Feature
+-------------------------------
+URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
+Method: POST
+Request Payload:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+	<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
+		<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+			<ogc:FeatureId fid="test_bmd_2_point.1"/>
+		</ogc:Filter>
+	</wfs:Delete>
+</wfs:Transaction>
+Response:
+<?xml version="1.0" encoding="UTF-8"?>
+<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
+	<wfs:InsertResult>
+		<ogc:FeatureId fid="none"/>
+	</wfs:InsertResult>
+	<wfs:TransactionResult handle="Removed 1 feature from '' via MapLoom.">
+		<wfs:Status>
+			<wfs:SUCCESS/>
+		</wfs:Status>
+	</wfs:TransactionResult>
+</wfs:WFS_TransactionResponse>
--- a/src/assets/img/avatars/user.png
+++ b/src/assets/img/avatars/user.png
--- a/src/assets/img/base_map/bali.PNG
+++ b/src/assets/img/base_map/bali.PNG
--- a/src/assets/img/base_map/bali_citra.PNG
+++ b/src/assets/img/base_map/bali_citra.PNG
--- a/src/assets/img/base_map/esri.PNG
+++ b/src/assets/img/base_map/esri.PNG
--- a/src/assets/img/base_map/google.PNG
+++ b/src/assets/img/base_map/google.PNG
--- a/src/assets/img/base_map/google_street.PNG
+++ b/src/assets/img/base_map/google_street.PNG
--- a/src/assets/img/base_map/iu_map.PNG
+++ b/src/assets/img/base_map/iu_map.PNG
--- a/src/assets/img/base_map/osm.PNG
+++ b/src/assets/img/base_map/osm.PNG
--- a/src/assets/img/base_map/osm_light.PNG
+++ b/src/assets/img/base_map/osm_light.PNG
--- a/src/assets/img/brand/logo.svg
+++ b/src/assets/img/brand/logo.svg
@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="707.1px" height="200px" viewBox="0 0 707.1 200" enable-background="new 0 0 707.1 200" xml:space="preserve">
+<polygon fill="#61DAFB" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
+<polygon fill="#FFFFFF" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,50 86.6,100 86.6,0 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,150 86.6,200 86.6,100 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="86.6,100 173.2,150 173.2,50 
+	"/>
+<polygon fill-opacity="0" points="86.6,100 0,50 0,150 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,150 86.6,100 86.6,200 
+	"/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,50 86.6,0 86.6,100 "/>
+<g>
+	<path fill="#333333" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
+		c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
+		c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3s12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
+		s10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4s-1.3,0.6-2.3,0.6s-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6c-1.7-0.9-3.8-1.8-6.3-2.6
+		c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8c-1.6,4.3-2.3,9-2.3,14.3
+		c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3c2.5,0,4.7-0.1,6.7-0.4
+		c2-0.3,3.8-0.7,5.5-1.3s3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1C289.3,127.4,289.9,127.3,290.4,127.3z"/>
+	<path fill="#333333" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9s-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4s-12.8,3.7-20.2,3.7
+		c-7.4,0-14.1-1.2-20.2-3.7s-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9
+		s5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4s12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8s11.3,6,15.6,10.4
+		c4.3,4.4,7.7,9.7,10.1,15.8C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8
+		c-2.7-3-5.9-5.2-9.7-6.8c-3.8-1.6-8.1-2.4-12.9-2.4s-9.1,0.8-12.9,2.4s-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8
+		c-1.4,4.3-2.2,9.1-2.2,14.4c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8s5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4
+		s9.1-0.8,12.9-2.4c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
+	<path fill="#333333" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8
+		c3,2.5,5.3,5.4,6.7,8.9c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3s-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3
+		c-2.7,1.8-5.7,3.2-9.1,4.3c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3
+		c-0.8-1.2-1.6-2-2.5-2.5s-2.3-0.7-4.1-0.7h-7.7V112.2z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3s4.6-2,6.3-3.5
+		c1.6-1.5,2.9-3.3,3.7-5.4c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6v32.4H440.6z"/>
+	<path fill="#333333" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
+	<path fill="#61DAFB" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7s1.5-6.4,1.5-10.1V52.7
+		h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
+		s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1s2.5,5.6,4.4,7.7
+		s4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
+	<path fill="#61DAFB" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
+</g>
+</svg>
--- a/src/assets/img/brand/logo_bmd_denpasar.png
+++ b/src/assets/img/brand/logo_bmd_denpasar.png
--- a/src/assets/img/brand/logo_kominfo.jpeg
+++ b/src/assets/img/brand/logo_kominfo.jpeg
--- a/src/assets/img/brand/logo_siopas.png
+++ b/src/assets/img/brand/logo_siopas.png
--- a/src/assets/img/brand/logo_siopas_old.png
+++ b/src/assets/img/brand/logo_siopas_old.png
--- a/src/assets/img/brand/sygnet.svg
+++ b/src/assets/img/brand/sygnet.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="173.2px" height="200px" viewBox="0 0 173.2 200" enable-background="new 0 0 173.2 200" xml:space="preserve">
+<polygon fill="#61DAFB" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
+<polygon fill="#FFFFFF" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,50 86.6,100 86.6,0 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,150 86.6,200 86.6,100 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="86.6,100 173.2,150 173.2,50 
+	"/>
+<polygon fill-opacity="0" points="86.6,100 0,50 0,150 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,150 86.6,100 86.6,200 
+	"/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,50 86.6,0 86.6,100 "/>
+</svg>
--- a/src/assets/img/image.png
+++ b/src/assets/img/image.png
--- a/src/assets/img/kominfo/dashboard.jpg
+++ b/src/assets/img/kominfo/dashboard.jpg
--- a/src/assets/img/kominfo/dashboard_kominfo_image_2G.jpg
+++ b/src/assets/img/kominfo/dashboard_kominfo_image_2G.jpg
--- a/src/assets/img/kominfo/dashboard_kominfo_image_3G.jpg
+++ b/src/assets/img/kominfo/dashboard_kominfo_image_3G.jpg
--- a/src/assets/img/kominfo/dashboard_kominfo_image_4G.jpg
+++ b/src/assets/img/kominfo/dashboard_kominfo_image_4G.jpg
--- a/src/assets/img/login/carousel1.jpeg
+++ b/src/assets/img/login/carousel1.jpeg
--- a/src/assets/img/login/carousel2.jpeg
+++ b/src/assets/img/login/carousel2.jpeg
--- a/src/assets/img/login/carousel3.jpeg
+++ b/src/assets/img/login/carousel3.jpeg
--- a/src/assets/img/login/slide1.jpg
+++ b/src/assets/img/login/slide1.jpg
--- a/src/assets/img/login/slide2.jpg
+++ b/src/assets/img/login/slide2.jpg
--- a/src/assets/img/login/slide3.jpg
+++ b/src/assets/img/login/slide3.jpg
--- a/src/assets/img/login/slide4.jpg
+++ b/src/assets/img/login/slide4.jpg
--- a/src/assets/img/logo-surveyor-indonesia-2.png
+++ b/src/assets/img/logo-surveyor-indonesia-2.png
--- a/src/assets/img/logo-surveyor-indonesia.png
+++ b/src/assets/img/logo-surveyor-indonesia.png
--- a/src/assets/img/logo_adyawinsa.jpg
+++ b/src/assets/img/logo_adyawinsa.jpg
--- a/src/assets/img/logo_kit.png
+++ b/src/assets/img/logo_kit.png
--- a/src/assets/img/logo_nawakara.png
+++ b/src/assets/img/logo_nawakara.png
--- a/src/assets/img/map/customer.png
+++ b/src/assets/img/map/customer.png
--- a/src/assets/img/map/office.png
+++ b/src/assets/img/map/office.png
--- a/src/assets/img/map/officec.png
+++ b/src/assets/img/map/officec.png
--- a/src/assets/img/map/pin2.png
+++ b/src/assets/img/map/pin2.png
--- a/src/assets/img/map/pin_ori.png
+++ b/src/assets/img/map/pin_ori.png
--- a/src/assets/img/map/pin_route_green.png
+++ b/src/assets/img/map/pin_route_green.png
--- a/src/assets/img/map/pin_route_red.png
+++ b/src/assets/img/map/pin_route_red.png
--- a/src/assets/img/map/store.png
+++ b/src/assets/img/map/store.png
--- a/src/assets/json/indonesia.json
+++ b/src/assets/json/indonesia.json
--- a/src/components/AddFeature/AddFeature.css
+++ b/src/components/AddFeature/AddFeature.css
@ -0,0 +1,9 @@
+.add-input-container {
+	max-height: 300px;
+	overflow: auto;
+}
+
+.row-input {
+	margin-right: 0px !important;
+	margin-left: -10px !important;
+}
--- a/src/components/AddFeature/AddFeature.js
+++ b/src/components/AddFeature/AddFeature.js
@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button,
+UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+Form, FormGroup, Label, Input, Row, Col } from 'reactstrap';
+import { Icon } from '@iconify/react';
+import removeCircle from '@iconify/icons-ion/remove-circle';
+import './AddFeature.css';
+import '../../assets/css/customscroll.css';
+import { findWhere } from 'underscore';
+import { createNewFeature } from '../../const/GeoserverFunc.js';
+
+class AddFeature extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			// dataArr: null,
+			objToSave: null,
+			isReady: false
+		}
+	}
+
+	componentDidMount() {
+		const { columns, addFeatureValue } = this.props;
+		console.log('columns', columns);
+		let dataArr = [];
+		if (columns !== undefined) {
+			if (columns !== null) {
+				if (columns.length > 0) {
+					for (let i=0; i < columns.length; i++) {
+						// console.log('column_name', columns[i].column_name);
+						// let column_name = columns[i].column_name;
+						dataArr.push({
+							idx: i,
+							label: columns[i].column_name,
+							value: ''
+						})
+					}
+				}
+			}
+		}
+		console.log('dataArr', dataArr);
+
+		addFeatureValue.layer_attributes = dataArr;
+
+		console.log('addFeatureValue', addFeatureValue);
+
+		this.setState({ objToSave: addFeatureValue, isReady: true});
+		// this.setState({
+		// 	objToSave: this.props.addFeatureValue,
+		// 	dataArr: dataArr
+		// )};
+
+	}
+
+	renderInputs = () => {
+		const { objToSave } = this.state;
+		return objToSave.layer_attributes.map((item, index) => {
+			return (
+				<Row key={item.idx} className="row-input">
+       		<Col xl={12} xs={12}>
+       			<FormGroup>
+       				<Label>{item.label}</Label>
+			        <Input key={item.idx} type="text" name={item.label} placeholder="" value={item.value ? item.value : ''} onChange={this.handleChangeInputValue.bind(this, item.idx)} />
+			      </FormGroup>
+       		</Col>
+       	</Row>
+			)
+		});
+	}
+
+	handleChangeInputValue = (idx, event) => {
+		event.preventDefault();	
+		let value = event.target.value;
+		let { objToSave } = this.state;
+		let changedItem = findWhere(objToSave.layer_attributes, {idx: idx});
+		changedItem.value = value;
+		this.setState({objToSave: objToSave}, () => {
+			// console.log('objToSave now', this.state.objToSave);
+		});
+	}
+
+	saveFeature = async (e) => {
+		// let { addFeatureValue } = this.props;
+		e.preventDefault();
+		let { objToSave } = this.state;
+		console.log('objToSave', objToSave);
+		let response = await createNewFeature(objToSave);
+		console.log('saveFeature response', response);
+
+		if (response.success) {
+			alert(response.result);
+			this.props.toggleAddFeatureVisible();
+			this.props.closeDrawing();
+			this.props.finishDrawingAdd();
+      // window.location.reload();
+		}
+		else {
+			alert(response.result);
+			return;
+		}
+	}
+
+	render() {
+		const { objToSave, isReady } = this.state;
+ 		return(
+ 			<div>
+				<Modal isOpen={this.props.addFeatureVisible} toggle={this.props.toggleAddFeatureVisible}>
+	        <ModalHeader toggle={this.props.toggleAddFeatureVisible}>{this.props.addFeatureTitle ? this.props.addFeatureTitle : 'Add Feature' }</ModalHeader>
+	        <ModalBody>
+	        	{ isReady ? 
+	        		<div className="add-input-container custom-scroll">
+	        			<Form onSubmit={(e) => this.saveFeature(e)}>
+	        				{ this.renderInputs() }
+	        			</Form>
+	        		</div>
+	        		: "Loading..."
+	        	}
+
+	      		{/*{objToSave.layer_attributes !== undefined ?
+	      			objToSave.layer_attributes !== null ?
+	        			<div className="add-input-container custom-scroll">
+		        			<Form>
+		        				{ this.renderInputs() }
+		        			</Form>
+		        		</div>
+	      				: 'Data is null'
+	      			: 'Data is undefined'
+	      		}*/}
+	        </ModalBody>
+	        <ModalFooter>
+	        	<Button color="success" onClick={(e) => this.saveFeature(e)}>Save</Button>
+	          <Button color="secondary" onClick={this.props.toggleAddFeatureVisible}>Cancel</Button>
+	        </ModalFooter>
+	      </Modal>
+      </div>
+		)
+	}
+}
+
+export default AddFeature;
--- a/src/components/AddFeature/package.json
+++ b/src/components/AddFeature/package.json
@ -0,0 +1,6 @@
+{
+	"name": "AddFeature",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AddFeature.js"
+}
--- a/src/components/AdmTree/AdmTree.css
+++ b/src/components/AdmTree/AdmTree.css
@ -0,0 +1,101 @@
+.adm-tree {
+	font-size: 12px;
+}
+
+.adm-tree-checkbox-container {
+	margin-left: 10px;
+	margin-bottom: 5px;
+	margin-top: 5px;
+}
+
+#adm-tree-container {
+	font-size: 12px;
+	/*height: 220px;*/
+	height: 440px;
+	overflow: auto;
+	padding: 0px !important;
+}
+
+.checkbox-opt {
+	font-size: 11px;
+	padding: 0px !important;
+}
+
+.ant-tree-child-tree > li:first-child {
+    padding-top: 0px !important;
+}
+
+.ant-tree li {
+    margin: 0;
+    padding: 0px 0 !important;
+    white-space: nowrap;
+    list-style: none;
+    outline: 0;
+}
+
+.adm-tree-checkbox-opt-container {
+	padding-left: 0px !important
+}
+
+.adm-dropdown-container {
+	z-index: 50;
+	position: absolute;
+	max-height: 350px;
+	border-radius: 5px;
+	background-color: rgba(0,0,0,0.5);
+	/*background-color: #ebebeb;*/
+	color: #ffffff;
+	/*color: #000000;*/
+}
+
+.adm-dropdown-title {
+	font-size: 14px;
+	margin-top: 0px;
+	margin-left: 10px;
+	margin-bottom: 5px;
+	font-weight: bold;
+	width: 200px;
+}
+
+.adm-dropdown-close {
+	float: right;
+	font-size: 18px;
+	font-weight: bold;
+	margin-left: 0px;
+	margin-right: 10px;
+	margin-top: -5px;
+	cursor: pointer;
+}
+
+.adm-dropdown-body {
+	max-height: 200px;
+	overflow: auto;
+	margin: 5px;
+	text-align: left;
+}
+
+.adm-dropdown-list {
+	cursor: pointer;
+	font-size: 14px;
+	padding: 5px;
+	margin-left: 0px;
+	text-align: left;
+}
+
+.adm-dropdown-icon {
+	margin-right: 5px;
+}
+
+.adm-dropdown-list:hover {
+	background-color: rgba(0,0,0,0.25);
+}
+
+.filter-coverage-container {
+	margin-left: 25px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+	margin-right: 25px;
+	color: blue;
+	cursor: pointer;
+	/*float: right;*/
+}
--- a/src/components/AdmTree/AdmTree.js
+++ b/src/components/AdmTree/AdmTree.js
@ -0,0 +1,734 @@
+import React, { Component, Fragment } from 'react';
+import { Form, FormGroup, Label, Input, Row, Col, ListGroup, ListGroupItem } from 'reactstrap';
+// Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; 
+import { Tree, Input as SearchInput, Menu, Dropdown } from 'antd';
+import { API_KOMINFO_GET_PROV, API_KOMINFO_GET_KABKOT, API_KOMINFO_GET_KEC, API_KOMINFO_GET_DESA } from '../../const/ApiConst.js';
+import Loader from 'react-loader-spinner'
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
+import './AdmTree.css'
+import '../../assets/css/customscroll.css'
+import { findWhere } from 'underscore';
+import { opt2G, opt3G, opt4G, netQuality2G, netQuality3G, netQuality4G, bts, mukim } from '../../const/Kominfo.js';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+// npm install --save-dev @iconify/react @iconify/icons-mdi
+import { Icon, InlineIcon } from '@iconify/react';
+import mapMarker from '@iconify/icons-mdi/map-marker';
+
+const { TreeNode } = Tree;
+const { Search } = SearchInput;
+
+const menu = (
+  <Menu>
+    <Menu.Item key="1">1st menu item</Menu.Item>
+    <Menu.Item key="2">2nd menu item</Menu.Item>
+    <Menu.Item key="3">3rd menu item</Menu.Item>
+  </Menu>
+);
+
+
+
+class AdmTree extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+	  	treeData: [],
+	  	checkedKeys: [],
+			isReady: false,
+      admDropdownOpen: false,
+      admDropdownVisible: false,
+      allCheckNodes: [],
+      rightClickNodeTreeItem: {
+        pageX: "",
+        pageY: "",
+        id: "",
+        dropdownTitle: ""
+      },
+      searchAdmValue: ""
+		}
+	}
+
+	componentDidMount() {
+		this.getProv();
+	}
+
+	getProv = async () => {
+    const param = {
+      method: 'GET',
+      header: JSON.stringify({'Content-Type': 'application/json'}),
+    }
+
+    try {
+      const result = await fetch(API_KOMINFO_GET_PROV, param).then(response => response.json()).then(res => res)
+      // console.log(result);
+      if (result.data){
+      	let treeData = [];
+      	let checkedKeys = [];
+      	let allProv = [];
+      	let checkNodes = [];
+       	for(let i=0; i < result.data.length; i++) {
+       		treeData.push({
+       			title: result.data[i].PROV,
+       			key: i,
+       			group: 'prov'
+       		});
+       		checkedKeys.push(i);
+       		allProv.push(i);
+       		let checkNode_ = {
+       			props: {
+       				dataRef: {
+	       				title: result.data[i].PROV,
+		       			key: i,
+		       			group: 'prov'
+	       			}
+       			}
+       		}
+       		checkNodes.push(checkNode_);
+       	}
+       	this.setState({
+       		// treeData: treeData, 
+       		// checkedKeys: checkedKeys,
+       		allProv: allProv,
+          allCheckNodes: checkNodes,
+       		isReady: true});
+       	// console.log('checkNodes', checkNodes);
+       	this.props.initAdmTree(treeData, checkNodes);
+       	this.props.setCheckKeysAdm(checkedKeys);
+       	this.props.setAllProv(allProv, true);
+       	this.props.setToggleCheckAllValue(true);
+
+      } else {
+        
+      }
+    } catch(err) {
+      console.log(err);
+      // alert(err.message.toString());
+      toast.warn(err.message.toString());
+    }
+  }
+
+  getChild = async (title, group, prov, kabkot, kec, childKey) => {
+
+  	let URL = '';
+    let childGroup = '';
+    let childTitle = '';
+    let bodyParam = {};
+    
+    if (group == 'prov') { // buat nyari kabkot
+    	URL = API_KOMINFO_GET_KABKOT;
+    	childGroup = 'kabkot';
+    	childTitle = 'KAB_KOT';
+    	bodyParam = {
+    		[group]: title
+    	};
+    }
+    else if (group == 'kabkot') { // buat nyari kecamatan
+    	URL = API_KOMINFO_GET_KEC;
+    	childGroup = 'kec';
+    	childTitle = 'KEC';
+    	bodyParam = {
+    		[group]: title,
+    		prov: prov
+    	};
+    }
+    else if (group == 'kec') { // buat nyari desa
+    	URL = API_KOMINFO_GET_DESA;
+    	childGroup = 'desa';
+    	childTitle = 'KEL_DES';
+    	bodyParam = {
+    		[group]: title,
+    		prov: prov,
+    		kabkot, kabkot
+    	};
+    }
+
+  	const param = {
+      method: 'POST',
+      header: JSON.stringify({'Content-Type': 'application/json'}),
+      body: JSON.stringify(bodyParam)
+    }
+
+    try {
+    	console.log(URL);
+
+      const result = await fetch(URL, param).then(response => response.json()).then(res => res)
+      console.log(result);
+      if (result.data){
+    		let treeData = [];
+    		if (group == 'prov') { // buat nyari kabkot
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT
+	       		});
+	       	}
+		    }
+		    else if (group == 'kabkot') { // buat nyari kecamatan
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT,
+	       			kec: result.data[i].KEC
+	       		});
+	       	}
+		    }
+		    else if (group == 'kec') { // buat nyari desa
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT,
+	       			kec: result.data[i].KEC,
+	       			desa: result.data[i].KEL_DES
+	       		});
+			    }
+			  }
+
+       	
+       	// this.setState({treeData: treeData, isReady: true});
+       	// console.log('getChild func', treeData);
+       	return treeData;
+      } else {
+        
+      }
+    } catch(err) {
+      console.log(err);
+      // alert(err.message.toString());
+      toast.warn(err.message.toString());
+    }
+  }
+
+  /*onLoadData = treeNode =>
+    new Promise(resolve => {	
+      if (treeNode.props.children) {
+        resolve();
+        return;
+      }
+      setTimeout(() => {
+      	console.log('treeNode', treeNode);
+      	let title = treeNode.props.dataRef.title;
+      	let group = treeNode.props.dataRef.group;
+      	let childKey = treeNode.props.eventKey;
+      	let getChild = this.getChild(title, group, childKey);
+      	console.log('getChild',getChild);
+
+        treeNode.props.dataRef.children = [
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
+        ];
+        this.setState({
+          treeData: [...this.state.treeData],
+        });
+        resolve();
+      }, 1000);
+    });*/
+
+  onLoadData = async (treeNode) => {
+  	console.log('onLoadData treeNode',treeNode);
+  	if (treeNode.props.children) {
+  		return;
+  	}
+  	let title = treeNode.props.dataRef.title;
+  	let group = treeNode.props.dataRef.group;
+  	let childKey = treeNode.props.eventKey;
+  	let getChild = null;
+
+  	// let getChild = await this.getChild(title, group, prov, kabkot, kec, childKey);
+  	if (group == 'prov') {
+			getChild = await this.getChild(title, group, group, null, null, childKey);
+  	}
+  	else if (group == 'kabkot') {
+  		let prov = treeNode.props.dataRef.prov;
+  		getChild = await this.getChild(title, group, prov, group, null, childKey);
+  	}
+  	else if (group == 'kec') {
+  		let prov = treeNode.props.dataRef.prov;
+  		let kabkot = treeNode.props.dataRef.kabkot;
+  		getChild = await this.getChild(title, group, prov, kabkot, group, childKey);
+  	}
+
+  	// let getChild = await this.getChild(title, group, childKey);
+  	console.log('getChild',getChild);
+
+  	if (getChild.length > 0) {
+  		let treeDataChild = [];
+  		let treeDataChildKeys = [];
+
+  		if (group == 'prov') { // buat nyari kabkot
+  			this.props.setExpandedTree('prov');
+				for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot
+			 		});
+	  		}
+	  	}
+	  	else if (group == 'kabkot') { // buat nyari kec
+	  		this.props.setExpandedTree('kab');
+	  		for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot,
+			 			kec: getChild[i].kec
+			 		});
+	  		}
+	  	}
+	  	else if (group == 'kec') { // buat nyari desa / kel_des
+	  		this.props.setExpandedTree('kec');
+	  		for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot,
+			 			kec: getChild[i].kec,
+			 			desa: getChild[i].desa,
+			 			isLeaf: true
+			 		});
+	  		}
+	  	}
+
+	  	if (treeNode.props.checked) {
+	  		for (let i=0; i < getChild.length; i++) {
+		  		treeDataChildKeys.push(getChild[i].key);
+		  	}
+		  	this.props.setAdmTreeData(treeNode, treeDataChild);
+		  	this.props.appendCheckedKeysAdm(treeDataChildKeys, treeNode.props.children)
+	  	}
+	  	else {
+	  		this.props.setAdmTreeData(treeNode, treeDataChild);
+	    	this.props.appendCheckedKeysAdm(treeDataChildKeys, [])
+	  	}
+
+  	}
+  }
+
+  onInitData = (loadedKeys, e) => {
+  	console.log('onInitData', e);
+  }
+
+  onCheckAdmTree = (checkedKeys, e) => {
+    console.log('onCheckAdmTree', checkedKeys);
+    console.log('onCheckAdmTree checkedNodes', e.checkedNodes);
+    this.props.setCheckKeysAdm(checkedKeys);
+    this.props.setCheckNodesAdm(e.checkedNodes);
+
+    // this.setState({ checkedKeysAdm, checkedNodesAdm: e.checkedNodes }, () => {
+    	// let getCheckedValue = this.getCheckedValue();
+    	// console.log('getCheckedValue', getCheckedValue);
+    // });
+  };
+
+  onCheckAllAdmTree = () => {
+
+  	/*const { checkedKeys, allProv } = this.state;
+  	const totalProv = 34;
+
+  	if (checkedKeys.length > 0) {
+  		this.setState({checkedKeys: [], toggleCheckAllValue: false})
+  	}
+  	else if (checkedKeys.length == 0) {
+  		this.setState({checkedKeys: allProv, toggleCheckAllValue: true})
+  	}*/
+  	const { checkedKeysAdm, checkedKeysAdmTemp, toggleCheckAllValue, allProv } = this.props;
+    const { allCheckNodes } = this.state;
+  	this.props.setToggleCheckAllValue(!toggleCheckAllValue);
+  }
+
+  onCheckOpt = (checkedKeys, e) => {
+  	const { mode } = this.props;
+  	this.props.setCheckKeysOpt(mode, checkedKeys);
+  }
+
+  onCheckQty = (checkedKeys) => {
+  	const { mode } = this.props;
+  	this.props.setCheckKeysQty(mode, checkedKeys);
+  }
+
+  onCheckBts = (checkedKeys) => {
+    this.props.setCheckKeysBts(checkedKeys);
+  }
+
+  /*onRightClickAdmTree = (callback) => {
+    console.log('onRightClickAdmTree', callback);
+    this.admDropdownToggle();
+  }*/
+
+  // tree right-click events on the list 
+  onRightClickAdmTree = e => {
+    e.event.persist()
+    console.log('onRightClickAdmTree', e);
+    this.setState({
+      rightClickNodeTreeItem: {
+        pageX: e.event.pageX,
+        pageY: e.event.pageY,
+        id: e.node.props.dataRef.key,
+        dropdownTitle: e.node.props.dataRef.title
+      }
+    });
+  };
+
+  closeAdmDropdown = () => {
+    this.setState({
+      rightClickNodeTreeItem: {
+        pageX: "",
+        pageY: "",
+        id: "",
+        dropdownTitle: ""
+      }
+    })
+  }
+
+  getNodeTreeRightClickMenu = () => {
+    const { pageX, pageY, id, dropdownTitle } = { ...this.state.rightClickNodeTreeItem };
+    // const tmpStyle = {
+    //   position: "absolute",
+    //   left: `${pageX - 220}px`,
+    //   top: `${pageY - 102}px`
+    // };
+    const tmpStyle = {
+      position:"absolute",
+      left: `${pageX - 50}px`,
+      top: `${pageY - 80}px`,
+      zIndex:10000,
+      width:"200px",
+      background:"#ededed",
+      borderRadius:"5px"
+    }
+    const menu = (
+      <div style={tmpStyle}>
+        <div className="adm-dropdown-container">
+          <span className="adm-dropdown-close" onClick={this.closeAdmDropdown}>x</span>
+          <div className="adm-dropdown-title">{ dropdownTitle }</div>
+          <div className="adm-dropdown-body custom-scroll">
+            <div className="adm-dropdown-list" onClick={this.goToLocation()}><Icon icon={mapMarker} className="adm-dropdown-icon" />Go to map</div>
+          </div> 
+        </div>
+      </div>
+    );
+    return this.state.rightClickNodeTreeItem.dropdownTitle == "" ? "" : menu;
+  };
+
+  getCheckedValue = () => {
+  	const { treeData, checkedKeys } = this.state;
+  	let checkedData = [];
+
+  	for(let i=0; i < checkedKeys.length; i++) {
+  		let item = findWhere(treeData, {key: parseInt(checkedKeys[i])});
+  		checkedData.push(item);
+  	}
+  	return checkedData;
+  }
+
+  renderCheckboxOpt = () => {
+  	let checkboxes = [];
+  	const { mode, checkedKeys2GOpt, checkedKeys3GOpt, checkedKeys4GOpt} = this.props;
+
+  	if (mode == '2G') {
+  		// checkboxes = opt2G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys2GOpt}
+	    		onCheck={(checkedKeys2GOpt, e) => this.onCheckOpt(checkedKeys2GOpt, e)}
+	    	>
+	    		{this.renderTreeNodes(opt2G)}
+	    	</Tree>
+	  	)
+  	}
+  	else if (mode == '3G') {
+  		// checkboxes = opt3G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys3GOpt}
+	    		onCheck={(checkedKeys3GOpt) => this.onCheckOpt(checkedKeys3GOpt)}
+	    	>
+	    		{this.renderTreeNodes(opt3G)}
+	    	</Tree>
+	  	)
+  	}
+  	else {
+  		// checkboxes = opt4G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys4GOpt}
+	    		onCheck={(checkedKeys4GOpt) => this.onCheckOpt(checkedKeys4GOpt)}
+	    	>
+	    		{this.renderTreeNodes(opt4G)}
+	    	</Tree>
+	  	)
+  	}
+  }
+
+  onExpand = expandedKeys => {
+		// console.log('onExpand', expandedKeys);
+		const {closeChart} = this.props
+		console.log("length", expandedKeys.length)
+		console.log("closeChart", closeChart)
+		if(expandedKeys.length === 1){
+			if(closeChart) {
+				document.getElementById('adm-tree-container').style.height = '320px'
+			} else {
+				document.getElementById('adm-tree-container').style.height = '120px'
+			}
+		} else {
+			if(closeChart) {
+				document.getElementById('adm-tree-container').style.height = '440px'
+			} else {
+				document.getElementById('adm-tree-container').style.height = '220px'
+			}
+		}
+  };
+
+  renderCheckboxQuality = () => {
+  	let checkboxes = [];
+  	const { mode, checkedKeys2GQty, checkedKeys3GQty, checkedKeys4GQty } = this.props;
+
+  	if (mode == '2G') {
+  		// checkboxes = netQuality2G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys2GQty}
+	    		onCheck={(checkedKeys2GQty) => this.onCheckQty(checkedKeys2GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality2G)}
+	    	</Tree>
+	  	)
+  	}
+  	else if (mode == '3G') {
+  		// checkboxes = netQuality3G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys3GQty}
+	    		onCheck={(checkedKeys3GQty) => this.onCheckQty(checkedKeys3GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality3G)}
+	    	</Tree>
+	  	)
+  	}
+  	else {
+  		// checkboxes = netQuality4G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys4GQty}
+	    		onCheck={(checkedKeys4GQty) => this.onCheckQty(checkedKeys4GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality4G)}
+	    	</Tree>
+	  	)
+  	}
+  }
+
+  renderCheckboxBts = () => {
+    const { checkedKeysBts } = this.props;
+    return (
+        <Tree
+          className="checkbox-opt"
+          checkable={true}
+          checkedKeys={checkedKeysBts}
+          onCheck={(checkedKeysBts) => this.onCheckBts(checkedKeysBts)}
+        >
+          {this.renderTreeNodes(bts)}
+        </Tree>
+      )
+  }
+
+
+  /*renderTreeNodes = data =>
+    data.map(item => {
+      if (item.children) {
+        return (
+          <TreeNode title={item.title} key={item.key} dataRef={item}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode key={item.key} {...item} dataRef={item} />;
+    })*/
+
+  renderTreeNodes = data =>
+    data.map(item => {
+      if (item.children) {
+        return (
+         
+            <TreeNode title={item.title} key={item.key} dataRef={item}>
+              {this.renderTreeNodes(item.children)}
+            </TreeNode>
+          
+        );
+      }
+      return (
+       
+          <TreeNode key={item.key} {...item} dataRef={item} />
+        
+        );
+    })
+
+  admDropdownToggle = () => {
+    // this.setState({admDropdownOpen: !this.state.admDropdownOpen})
+    this.setState({admDropdownVisible: !this.state.admDropdownVisible});
+  }
+
+  admMenu = () => {
+    const menu = (
+      <Menu>
+        <Menu.Item key="1">1st menu item</Menu.Item>
+        <Menu.Item key="2">2nd menu item</Menu.Item>
+        <Menu.Item key="3">3rd menu item</Menu.Item>
+      </Menu>
+    );
+
+    return menu;
+  }
+
+  goToLocation = () => {
+    
+  }
+
+  onChangeSearchAdm = (e) => {
+    const { value } = e.target;
+    this.setState({searchAdmValue: value}, () => console.log('searchAdmValue:', this.state.searchAdmValue));
+  }
+
+  renderCheckboxMukim = () => {
+    const { checkedKeysMukim } = this.props;
+    return (
+        <Tree
+          className="checkbox-opt"
+          checkable={true}
+          checkedKeys={checkedKeysMukim}
+          onCheck={(checkedKeysMukim) => this.onCheckMukim(checkedKeysMukim)}
+        >
+          {this.renderTreeNodes(mukim)}
+        </Tree>
+      )
+  }
+
+  onCheckMukim = (checkedKeys) => {
+    this.props.setCheckKeysMukim(checkedKeys);
+  }
+
+  renderFilterCoverage = () => {
+    return <div className="filter-coverage-container" onClick={() => this.filterCoverage()}>Filter Coverage</div>
+  }
+
+  filterCoverage = () => {
+    this.props.toggleModalOptions();
+  }
+
+	render() {
+		const { isReady, checkedKeys, admDropdownOpen, admDropdownVisible, searchAdmValue } = this.state;
+		const { admTreeData, checkedKeysAdm, toggleCheckAllValue } = this.props;
+		if (!isReady) {
+			return (<div className="loader-container">
+			<Loader
+         type="TailSpin"
+         color="#36D7B7"
+         height={100}
+         width={100}
+      />
+      </div>)
+		}
+
+    return (
+    	<Fragment>
+
+    		{/*This is future kominfo feature*/}
+        <Row>
+          <Col xs="12" sm="12" md="6" lg="6">
+              { this.renderCheckboxMukim() }
+          </Col>
+          <Col xs="12" sm="12" md="6" lg="6" className="not-left-col">
+              { this.renderCheckboxBts() }
+          </Col>
+        </Row>
+        {/*end This is future kominfo feature*/}
+        
+    		<Row>
+    			<Col xs="12" sm="12" md="6" lg="6">
+		    			{ this.renderCheckboxOpt() }
+    			</Col>
+    			<Col xs="12" sm="12" md="6" lg="6" className="not-left-col">
+		    			{ this.renderCheckboxQuality() }
+    			</Col>
+    		</Row>
+
+    		{/*<div className="adm-tree-checkbox-quality-container">
+    			{ this.renderCheckboxQuality() }
+    		</div>*/}
+        {/*<Row>
+          <Col xs="12" sm="12" md="12" lg="12">
+              { this.renderCheckboxBts() }
+          </Col>
+        </Row>*/}
+
+        {/*This is future kominfo feature*/}
+        <Row>
+          <Col xs="12" sm="12" md="12" lg="12">
+              { this.renderFilterCoverage() }
+          </Col>
+        </Row>
+      	{/*end This is future kominfo feature*/}
+    		<div className="adm-tree-checkbox-container">
+
+    			{/*This is future kominfo feature*/}
+          <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChangeSearchAdm} />
+          {/*end This is future kominfo feature*/}
+    			
+    			<Form>
+			      <FormGroup check inline>
+			        <Label check>
+			          <Input type="checkbox" checked={toggleCheckAllValue} onClick={() => this.onCheckAllAdmTree()}/> Toggle Select All Wilayah
+			        </Label>
+			      </FormGroup>
+		      </Form>
+    		</div>
+    		<div id="adm-tree-container" className="custom-scroll">
+		    	<Tree
+		    		className="adm-tree" 
+		    		loadData={this.onLoadData}
+		    		checkable={true}
+		    		checkedKeys={checkedKeysAdm}
+		    		onCheck={(checkedKeys, e) => this.onCheckAdmTree(checkedKeys, e)}
+            onRightClick={this.onRightClickAdmTree}
+            onSelect={this.closeAdmDropdown}
+		    	>
+            {/*<Dropdown overlay={this.admMenu} trigger={['contextMenu']} visible={admDropdownVisible} onVisibleChange={() => this.admDropdownToggle()}>*/}
+              {this.renderTreeNodes(admTreeData)}
+            {/*</Dropdown>*/}
+		    	</Tree>
+          {this.getNodeTreeRightClickMenu()}
+		    </div>
+    	</Fragment>
+    )
+  }
+}
+
+export default AdmTree;
--- a/src/components/AdmTree/AdmTree_backup.js
+++ b/src/components/AdmTree/AdmTree_backup.js
@ -0,0 +1,544 @@
+import React, { Component, Fragment } from 'react';
+import { Form, FormGroup, Label, Input, Row, Col } from 'reactstrap'; 
+import { Tree, Input as SearchInput } from 'antd';
+import { API_KOMINFO_GET_PROV, API_KOMINFO_GET_KABKOT, API_KOMINFO_GET_KEC, API_KOMINFO_GET_DESA } from '../../const/ApiConst.js';
+import Loader from 'react-loader-spinner'
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
+import './AdmTree.css'
+import '../../assets/css/customscroll.css'
+import { findWhere } from 'underscore';
+import { opt2G, opt3G, opt4G, netQuality2G, netQuality3G, netQuality4G } from '../../const/Kominfo.js';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const { TreeNode } = Tree;
+const { Search } = SearchInput;
+
+
+
+class AdmTree extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+	  	treeData: [],
+	  	checkedKeys: [],
+			isReady: false
+		}
+	}
+
+	componentDidMount() {
+		this.getProv();
+	}
+
+	getProv = async () => {
+    const param = {
+      method: 'GET',
+      header: JSON.stringify({'Content-Type': 'application/json'}),
+    }
+
+    try {
+      const result = await fetch(API_KOMINFO_GET_PROV, param).then(response => response.json()).then(res => res)
+      // console.log(result);
+      if (result.data){
+      	let treeData = [];
+      	let checkedKeys = [];
+      	let allProv = [];
+      	let checkNodes = [];
+       	for(let i=0; i < result.data.length; i++) {
+       		treeData.push({
+       			title: result.data[i].PROV,
+       			key: i,
+       			group: 'prov'
+       		});
+       		checkedKeys.push(i);
+       		allProv.push(i);
+       		let checkNode_ = {
+       			props: {
+       				dataRef: {
+	       				title: result.data[i].PROV,
+		       			key: i,
+		       			group: 'prov'
+	       			}
+       			}
+       		}
+       		checkNodes.push(checkNode_);
+       	}
+       	this.setState({
+       		// treeData: treeData, 
+       		// checkedKeys: checkedKeys,
+       		allProv: allProv,
+       		isReady: true});
+       	// console.log('checkNodes', checkNodes);
+       	this.props.initAdmTree(treeData, checkNodes);
+       	this.props.setCheckKeysAdm(checkedKeys);
+       	this.props.setAllProv(allProv, true);
+       	this.props.setToggleCheckAllValue(true);
+
+      } else {
+        
+      }
+    } catch(err) {
+      console.log(err);
+      // alert(err.message.toString());
+      toast.warn(err.message.toString());
+    }
+  }
+
+  getChild = async (title, group, prov, kabkot, kec, childKey) => {
+
+  	let URL = '';
+    let childGroup = '';
+    let childTitle = '';
+    let bodyParam = {};
+    
+    if (group == 'prov') { // buat nyari kabkot
+    	URL = API_KOMINFO_GET_KABKOT;
+    	childGroup = 'kabkot';
+    	childTitle = 'KAB_KOT';
+    	bodyParam = {
+    		[group]: title
+    	};
+    }
+    else if (group == 'kabkot') { // buat nyari kecamatan
+    	URL = API_KOMINFO_GET_KEC;
+    	childGroup = 'kec';
+    	childTitle = 'KEC';
+    	bodyParam = {
+    		[group]: title,
+    		prov: prov
+    	};
+    }
+    else if (group == 'kec') { // buat nyari desa
+    	URL = API_KOMINFO_GET_DESA;
+    	childGroup = 'desa';
+    	childTitle = 'KEL_DES';
+    	bodyParam = {
+    		[group]: title,
+    		prov: prov,
+    		kabkot, kabkot
+    	};
+    }
+
+  	const param = {
+      method: 'POST',
+      header: JSON.stringify({'Content-Type': 'application/json'}),
+      body: JSON.stringify(bodyParam)
+    }
+
+    try {
+    	console.log(URL);
+
+      const result = await fetch(URL, param).then(response => response.json()).then(res => res)
+      console.log(result);
+      if (result.data){
+    		let treeData = [];
+    		if (group == 'prov') { // buat nyari kabkot
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT
+	       		});
+	       	}
+		    }
+		    else if (group == 'kabkot') { // buat nyari kecamatan
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT,
+	       			kec: result.data[i].KEC
+	       		});
+	       	}
+		    }
+		    else if (group == 'kec') { // buat nyari desa
+		    	for(let i=0; i < result.data.length; i++) {
+	       		treeData.push({
+	       			title: result.data[i][childTitle],
+	       			key: childKey+'-'+i,
+	       			group: childGroup,
+	       			prov: result.data[i].PROV,
+	       			kabkot: result.data[i].KAB_KOT,
+	       			kec: result.data[i].KEC,
+	       			desa: result.data[i].KEL_DES
+	       		});
+			    }
+			  }
+
+       	
+       	// this.setState({treeData: treeData, isReady: true});
+       	// console.log('getChild func', treeData);
+       	return treeData;
+      } else {
+        
+      }
+    } catch(err) {
+      console.log(err);
+      // alert(err.message.toString());
+      toast.warn(err.message.toString());
+    }
+  }
+
+  /*onLoadData = treeNode =>
+    new Promise(resolve => {	
+      if (treeNode.props.children) {
+        resolve();
+        return;
+      }
+      setTimeout(() => {
+      	console.log('treeNode', treeNode);
+      	let title = treeNode.props.dataRef.title;
+      	let group = treeNode.props.dataRef.group;
+      	let childKey = treeNode.props.eventKey;
+      	let getChild = this.getChild(title, group, childKey);
+      	console.log('getChild',getChild);
+
+        treeNode.props.dataRef.children = [
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
+          { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
+        ];
+        this.setState({
+          treeData: [...this.state.treeData],
+        });
+        resolve();
+      }, 1000);
+    });*/
+
+  onLoadData = async (treeNode) => {
+  	console.log('onLoadData treeNode',treeNode);
+  	if (treeNode.props.children) {
+  		return;
+  	}
+  	let title = treeNode.props.dataRef.title;
+  	let group = treeNode.props.dataRef.group;
+  	let childKey = treeNode.props.eventKey;
+  	let getChild = null;
+
+  	// let getChild = await this.getChild(title, group, prov, kabkot, kec, childKey);
+  	if (group == 'prov') {
+			getChild = await this.getChild(title, group, group, null, null, childKey);
+  	}
+  	else if (group == 'kabkot') {
+  		let prov = treeNode.props.dataRef.prov;
+  		getChild = await this.getChild(title, group, prov, group, null, childKey);
+  	}
+  	else if (group == 'kec') {
+  		let prov = treeNode.props.dataRef.prov;
+  		let kabkot = treeNode.props.dataRef.kabkot;
+  		getChild = await this.getChild(title, group, prov, kabkot, group, childKey);
+  	}
+
+  	// let getChild = await this.getChild(title, group, childKey);
+  	console.log('getChild',getChild);
+
+  	if (getChild.length > 0) {
+  		let treeDataChild = [];
+  		let treeDataChildKeys = [];
+
+  		if (group == 'prov') { // buat nyari kabkot
+  			this.props.setExpandedTree('prov');
+				for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot
+			 		});
+	  		}
+	  	}
+	  	else if (group == 'kabkot') { // buat nyari kec
+	  		this.props.setExpandedTree('kab');
+	  		for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot,
+			 			kec: getChild[i].kec
+			 		});
+	  		}
+	  	}
+	  	else if (group == 'kec') { // buat nyari desa / kel_des
+	  		this.props.setExpandedTree('kec');
+	  		for (let i=0; i < getChild.length; i++) {
+	  			treeDataChild.push({
+			 			title: getChild[i].title,
+			 			key: getChild[i].key,
+			 			group: getChild[i].group,
+			 			prov: getChild[i].prov,
+			 			kabkot: getChild[i].kabkot,
+			 			kec: getChild[i].kec,
+			 			desa: getChild[i].desa,
+			 			isLeaf: true
+			 		});
+	  		}
+	  	}
+
+	  	if (treeNode.props.checked) {
+	  		for (let i=0; i < getChild.length; i++) {
+		  		treeDataChildKeys.push(getChild[i].key);
+		  	}
+		  	this.props.setAdmTreeData(treeNode, treeDataChild);
+		  	this.props.appendCheckedKeysAdm(treeDataChildKeys, treeNode.props.children)
+	  	}
+	  	else {
+	  		this.props.setAdmTreeData(treeNode, treeDataChild);
+	    	this.props.appendCheckedKeysAdm(treeDataChildKeys, [])
+	  	}
+
+  	}
+  }
+
+  onInitData = (loadedKeys, e) => {
+  	console.log('onInitData', e);
+  }
+
+  onCheckAdmTree = (checkedKeys, e) => {
+    console.log('onCheckAdmTree', checkedKeys);
+    console.log('onCheckAdmTree checkedNodes', e.checkedNodes);
+    this.props.setCheckKeysAdm(checkedKeys);
+    this.props.setCheckNodesAdm(e.checkedNodes);
+
+    // this.setState({ checkedKeysAdm, checkedNodesAdm: e.checkedNodes }, () => {
+    	// let getCheckedValue = this.getCheckedValue();
+    	// console.log('getCheckedValue', getCheckedValue);
+    // });
+  };
+
+  onCheckAllAdmTree = () => {
+
+  	/*const { checkedKeys, allProv } = this.state;
+  	const totalProv = 34;
+
+  	if (checkedKeys.length > 0) {
+  		this.setState({checkedKeys: [], toggleCheckAllValue: false})
+  	}
+  	else if (checkedKeys.length == 0) {
+  		this.setState({checkedKeys: allProv, toggleCheckAllValue: true})
+  	}*/
+  	const { checkedKeysAdm, checkedKeysAdmTemp, toggleCheckAllValue, allProv } = this.props;
+  	this.props.setToggleCheckAllValue(!toggleCheckAllValue);
+  }
+
+  onCheckOpt = (checkedKeys, e) => {
+  	const { mode } = this.props;
+  	this.props.setCheckKeysOpt(mode, checkedKeys);
+  }
+
+  onCheckQty = (checkedKeys) => {
+  	const { mode } = this.props;
+  	this.props.setCheckKeysQty(mode, checkedKeys);
+  }
+
+  onRightClickAdmTree = (callback) => {
+    console.log('onRightClickAdmTree', callback);
+  }
+
+  getCheckedValue = () => {
+  	const { treeData, checkedKeys } = this.state;
+  	let checkedData = [];
+
+  	for(let i=0; i < checkedKeys.length; i++) {
+  		let item = findWhere(treeData, {key: parseInt(checkedKeys[i])});
+  		checkedData.push(item);
+  	}
+  	return checkedData;
+  }
+
+  renderCheckboxOpt = () => {
+  	let checkboxes = [];
+  	const { mode, checkedKeys2GOpt, checkedKeys3GOpt, checkedKeys4GOpt} = this.props;
+
+  	if (mode == '2G') {
+  		// checkboxes = opt2G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys2GOpt}
+	    		onCheck={(checkedKeys2GOpt, e) => this.onCheckOpt(checkedKeys2GOpt, e)}
+	    	>
+	    		{this.renderTreeNodes(opt2G)}
+	    	</Tree>
+	  	)
+  	}
+  	else if (mode == '3G') {
+  		// checkboxes = opt3G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys3GOpt}
+	    		onCheck={(checkedKeys3GOpt) => this.onCheckOpt(checkedKeys3GOpt)}
+	    	>
+	    		{this.renderTreeNodes(opt3G)}
+	    	</Tree>
+	  	)
+  	}
+  	else {
+  		// checkboxes = opt4G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys4GOpt}
+	    		onCheck={(checkedKeys4GOpt) => this.onCheckOpt(checkedKeys4GOpt)}
+	    	>
+	    		{this.renderTreeNodes(opt4G)}
+	    	</Tree>
+	  	)
+  	}
+
+  	/*return (
+  		<Tree
+  			className="checkbox-opt"
+  			checkable={true}
+  			checkedKeys={checkedKeysOpt}
+    		onCheck={(checkedKeysOpt) => this.onCheckOpt(checkedKeysOpt)}
+    	>
+    		{this.renderTreeNodes(checkboxes)}
+    	</Tree>
+  	)*/
+  }
+
+  onExpand = expandedKeys => {
+		// console.log('onExpand', expandedKeys);
+		const {closeChart} = this.props
+		console.log("length", expandedKeys.length)
+		console.log("closeChart", closeChart)
+		if(expandedKeys.length === 1){
+			if(closeChart) {
+				document.getElementById('adm-tree-container').style.height = '320px'
+			} else {
+				document.getElementById('adm-tree-container').style.height = '120px'
+			}
+		} else {
+			if(closeChart) {
+				document.getElementById('adm-tree-container').style.height = '440px'
+			} else {
+				document.getElementById('adm-tree-container').style.height = '220px'
+			}
+		}
+  };
+
+  renderCheckboxQuality = () => {
+  	let checkboxes = [];
+  	const { mode, checkedKeys2GQty, checkedKeys3GQty, checkedKeys4GQty } = this.props;
+
+  	if (mode == '2G') {
+  		// checkboxes = netQuality2G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys2GQty}
+	    		onCheck={(checkedKeys2GQty) => this.onCheckQty(checkedKeys2GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality2G)}
+	    	</Tree>
+	  	)
+  	}
+  	else if (mode == '3G') {
+  		// checkboxes = netQuality3G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys3GQty}
+	    		onCheck={(checkedKeys3GQty) => this.onCheckQty(checkedKeys3GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality3G)}
+	    	</Tree>
+	  	)
+  	}
+  	else {
+  		// checkboxes = netQuality4G;
+  		return (
+	  		<Tree
+	  			className="checkbox-opt"
+	  			checkable={true}
+	  			checkedKeys={checkedKeys4GQty}
+	    		onCheck={(checkedKeys4GQty) => this.onCheckQty(checkedKeys4GQty)}
+	    	>
+	    		{this.renderTreeNodes(netQuality4G)}
+	    	</Tree>
+	  	)
+  	}
+
+  	
+  }
+
+
+  renderTreeNodes = data =>
+    data.map(item => {
+      if (item.children) {
+        return (
+          <TreeNode title={item.title} key={item.key} dataRef={item}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode key={item.key} {...item} dataRef={item} />;
+    })
+
+	render() {
+		const { isReady, checkedKeys } = this.state;
+		const { admTreeData, checkedKeysAdm, toggleCheckAllValue } = this.props;
+		if (!isReady) {
+			return (<div className="loader-container">
+			<Loader
+         type="TailSpin"
+         color="#36D7B7"
+         height={100}
+         width={100}
+      />
+      </div>)
+		}
+
+    return (
+    	<Fragment>
+    		<Row>
+    			<Col xs="12" sm="12" md="6" lg="6">
+		    			{ this.renderCheckboxOpt() }
+    			</Col>
+    			<Col xs="12" sm="12" md="6" lg="6" className="not-left-col">
+		    			{ this.renderCheckboxQuality() }
+    			</Col>
+    		</Row>
+    		{/*<div className="adm-tree-checkbox-quality-container">
+    			{ this.renderCheckboxQuality() }
+    		</div>*/}
+    		<div className="adm-tree-checkbox-container">
+    			<Form>
+			      <FormGroup check inline>
+			        <Label check>
+			          <Input type="checkbox" checked={toggleCheckAllValue} onClick={() => this.onCheckAllAdmTree()}/> Toggle Select All Wilayah
+			        </Label>
+			      </FormGroup>
+		      </Form>
+    		</div>
+    		<div id="adm-tree-container" className="custom-scroll">
+		    	<Tree
+		    		className="adm-tree" 
+		    		loadData={this.onLoadData}
+		    		checkable={true}
+		    		checkedKeys={checkedKeysAdm}
+		    		onCheck={(checkedKeys, e) => this.onCheckAdmTree(checkedKeys, e)}
+            onRightClick={(callback) => this.onRightClickAdmTree(callback)}
+		    	>
+		    		{this.renderTreeNodes(admTreeData)}
+		    	</Tree>
+		    </div>
+    	</Fragment>
+    )
+  }
+}
+
+export default AdmTree;
--- a/src/components/AdmTree/example.js
+++ b/src/components/AdmTree/example.js
@ -0,0 +1,136 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import { Tree, Input } from 'antd';
+
+const { Search } = Input;
+
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({ title: key, key });
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+const dataList = [];
+const generateList = data => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const { key } = node;
+    dataList.push({ key, title: key });
+    if (node.children) {
+      generateList(node.children);
+    }
+  }
+};
+generateList(gData);
+
+const getParentKey = (key, tree) => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some(item => item.key === key)) {
+        parentKey = node.key;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+
+class SearchTree extends React.Component {
+  state = {
+    expandedKeys: [],
+    searchValue: '',
+    autoExpandParent: true,
+  };
+
+  onExpand = expandedKeys => {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  };
+
+  onChange = e => {
+    const { value } = e.target;
+    const expandedKeys = dataList
+      .map(item => {
+        if (item.title.indexOf(value) > -1) {
+          return getParentKey(item.key, gData);
+        }
+        return null;
+      })
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+    this.setState({
+      expandedKeys,
+      searchValue: value,
+      autoExpandParent: true,
+    });
+  };
+
+  render() {
+    const { searchValue, expandedKeys, autoExpandParent } = this.state;
+    const loop = data =>
+      data.map(item => {
+        const index = item.title.indexOf(searchValue);
+        const beforeStr = item.title.substr(0, index);
+        const afterStr = item.title.substr(index + searchValue.length);
+        const title =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span className="site-tree-search-value">{searchValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{item.title}</span>
+          );
+        if (item.children) {
+          return { title, key: item.key, children: loop(item.children) };
+        }
+
+        return {
+          title,
+          key: item.key,
+        };
+      });
+    return (
+      <div>
+        <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
+        <Tree
+          onExpand={this.onExpand}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          treeData={loop(gData)}
+        />
+      </div>
+    );
+  }
+}
+
+// ReactDOM.render(<SearchTree />, document.getElementById('container'));
+export default SearchTree;
--- a/src/components/AdmTree/package.json
+++ b/src/components/AdmTree/package.json
@ -0,0 +1,6 @@
+{
+	"name": "AdmTree",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AdmTree.js"
+}
--- a/src/components/BaseMap/BaseMap.css
+++ b/src/components/BaseMap/BaseMap.css
@ -0,0 +1,74 @@
+.basemap-container {
+	z-index: 50;
+	top: 60px;
+	right: 50px;
+	/*background-color: red;*/
+	/*padding: 100px;*/
+	position: absolute;
+	max-height: 350px;
+	border-radius: 5px;
+	background-color: rgba(0,0,0,0.5);
+	/*float: right;*/
+	color: #ffffff;
+	min-width: 180px;
+	justify-content: center;
+}
+
+.basemap-title {
+	font-size: 14px;
+	margin-top: 5px;
+	margin-left: 20px;
+	margin-bottom: 10px;
+	font-weight: bold;
+}
+
+.basemap-close {
+	float: right;
+	margin-right: 15px;
+	margin-top: -5px;
+	cursor: pointer;
+}
+
+.basemap-body {
+	max-height: 200px;
+	overflow: auto;
+	margin: 5px;
+	text-align: center;
+}
+
+.basemap-text-container {
+	display: block;
+}
+
+.basemap-graphic {
+	display: inline-block;
+}
+
+.basemap-text {
+	display: inline-block;
+	margin-left: 10px;
+	margin-right: 10px;
+	font-size: 12px;
+}
+
+.basemap-active {
+	border-color: #ffffff !important;
+	background-color: #ffffff !important;
+}
+
+.basemap-item {
+	display: inline-block;
+	padding: 10px;
+	border: solid;
+	border-radius: 5px;
+	margin: 2px;
+	cursor: pointer;
+	background-color: #d4d4d4;
+	margin-bottom: 10px;
+	text-align: center;
+	border-color: #d4d4d4;
+}
+
+.basemap-item-title {
+	color: #000000;
+}
--- a/src/components/BaseMap/BaseMap.js
+++ b/src/components/BaseMap/BaseMap.js
@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import './BaseMap.css'; 
+import '../../assets/css/customscroll.css';
+import { Row, Col } from 'reactstrap';
+// import Legend from '@terrestris/react-geo/dist/Legend/Legend';
+
+class BaseMap extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			activeBaseMap: ''
+		}
+	}
+
+	componentDidMount() {
+		this.getActiveBaseMap();
+	}
+
+	componentDidUpdate(prevState, prevProps) {
+
+	}
+
+	getActiveBaseMap = () => {
+    let activeBaseMap = '';
+    this.props.olmap.getLayers().forEach((layer, i) => {
+      if (layer.get('type') == 'base') {
+      	console.log('activeBaseMap', layer.get('name'));
+        activeBaseMap = layer.get('name');
+      }
+    });
+
+    this.setState({activeBaseMap: activeBaseMap}, () => this.renderBaseMap());
+  }
+
+	changeBaseLayer = (layer) => {
+	    this.setState({activeBaseMap: layer.get('name')}, () =>{
+	      this.renderBaseMap();
+	      this.props.changeBaseLayer(layer);
+	    });
+	  }
+
+	renderBaseMap = () => {
+    return this.props.baseLayers.map((item, index) => {
+    	// console.log('activeBaseMap', this.state.activeBaseMap);
+    	// console.log('layerName', item.get('name'));
+    	// console.log('active?', this.state.activeBaseMap == item.get('name'));
+
+      return (
+          <div key={index} className={`basemap-item ${this.state.activeBaseMap == item.get('name') ? 'basemap-active' : ''}`} onClick={() => this.changeBaseLayer(item)}>
+             <img src={require(`../../assets/img/base_map/${item.get('imageName')}`)} alt={item.get('imageName')} width="75" height="50" /> <br />
+             <div className="basemap-item-title">{item.get('name')}</div>
+           </div>
+      )
+    })
+	}
+
+	render() {
+		const { toggleBaseMap } = this.props;
+		return (
+			<div className="basemap-container">
+				<div className="basemap-title">Change Base Map <span className="basemap-close" onClick={toggleBaseMap}>x</span></div>
+				<div className="basemap-body custom-scroll">
+					{ this.renderBaseMap() }
+				</div> 
+			</div>
+		)
+	}
+}
+
+export default BaseMap;
--- a/src/components/BaseMap/package.json
+++ b/src/components/BaseMap/package.json
@ -0,0 +1,6 @@
+{
+  "name": "BaseMap",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./BaseMap.js"
+}
--- a/src/components/CreateNewLayer/CreateNewLayer.css
+++ b/src/components/CreateNewLayer/CreateNewLayer.css
@ -0,0 +1,19 @@
+.modal-dialog-newlayer {
+	width: 100%;
+	height: 100%;
+}
+
+.modal-content-newlayer {
+	width: 100%;
+}
+
+.modal-dialog-body {
+	max-height: 325px;
+	width: 100%;
+	overflow: auto;
+}
+
+.row-input {
+	margin-right: 0px !important;
+	margin-left: -10px !important;
+}
--- a/src/components/CreateNewLayer/CreateNewLayer.js
+++ b/src/components/CreateNewLayer/CreateNewLayer.js
@ -0,0 +1,348 @@
+import React, { Component } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Row, Col, Form, FormGroup, Label, Input} from 'reactstrap';
+import { Icon, InlineIcon } from '@iconify/react';
+import removeCircle from '@iconify/icons-ion/remove-circle';
+import { findWhere, without } from 'underscore';
+import './CreateNewLayer.css';
+import '../../assets/css/customscroll.css';
+import { createNewLayer } from '../../const/GeoserverFunc.js';
+
+class CreateNewLayer extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			layerName: '',
+			layerType: '',
+			columns: [],
+			disableCreateLayerButton: true
+		}
+		// this.handleChangeInputColumnName = this.handleChangeInputColumnName.bind(this);
+		// this.sendCreateNewLayer = this.sendCreateNewLayer.bind(this);
+		// this.checkBeforeSend = this.checkBeforeSend.bind(this);
+	}
+
+	componentDidMount() {
+		// console.log('CreateNewLayer resTableData', this.props.resTableData);
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+		// this.checkBeforeSend();
+		// if (prevState.layerName !== this.state.layerName) {
+		// 	this.checkBeforeSend();
+		// }
+		// if (prevState.layerType !== this.state.layerType) {
+		// 	this.checkBeforeSend();
+		// }
+		// if (prevState.columns !== this.state.columns) {
+		// 	this.checkBeforeSend();
+		// }
+	}
+
+	addColumn = () => {
+		let { columns } = this.state;
+		let maxIdx = null;
+		let newIdx = null;
+		if (columns.length < 1) {
+			newIdx = 1;
+		}
+		else {
+			maxIdx = Math.max.apply(Math, columns.map((column) => column.idx));
+			console.log('maxIdx',maxIdx);
+			newIdx = maxIdx + 1;
+		}
+		let oneColumn = {
+			idx: newIdx,
+			column_name: "",
+			column_type: ""
+		}
+		this.setState({columns: [...columns, oneColumn]}, () => {
+			console.log(this.state.columns)
+			this.renderColumnAttribute();
+		});
+	}
+
+	renderColumnAttribute = () => {
+		let { columns } = this.state;
+
+		if (columns.length < 1) {
+			return null;
+		} 
+		else {
+			return columns.map((item, index) => {
+				return (<Row key={item.idx} className="row-input">
+       		<Col xl={5} xs={5}>
+       			<FormGroup>
+			        <Input type="text" name="column_name" id="column_name" placeholder="Input Column Name" value={item.column_name} onChange={this.handleChangeInputColumnName.bind(this, item.idx)} />
+			      </FormGroup>
+       		</Col>
+       		<Col xl={5} xs={5}>
+       			<FormGroup>
+			        <Input type="select" name="column_type" id="column_type" value={item.column_type} onChange={this.handleChangeInputColumnType.bind(this, item.idx)}>
+			          <option value="">Select column type</option>
+			          <option value="integer">Integer</option>
+			          <option value="character varying">Text</option>
+			          <option value="double precision">Double</option>
+			        </Input>
+			      </FormGroup>
+       		</Col>
+       		<Col xl={2} xs={2}>
+       			<FormGroup>
+			        <Button color="danger" id="remove_column" size="sm" onClick={() => this.deleteColumn(item.idx)}><Icon icon={removeCircle} width={20} height={20} /></Button>
+			      </FormGroup>
+       		</Col>
+       	</Row>)
+			})
+			// for (let i=0; i < columns.length; i++) {
+			// 	return (
+			// 			<Row key={columns.idx}>
+		 //       		<Col xl={5} xs={5}>
+		 //       			<FormGroup>
+			// 		        <Input type="text" name="column_name" id="column_name" placeholder="Input Column Name" />
+			// 		      </FormGroup>
+		 //       		</Col>
+		 //       		<Col xl={5} xs={5}>
+		 //       			<FormGroup>
+			// 		        <Input type="select" name="column_type" id="column_type">
+			// 		          <option>Select column type</option>
+			// 		          <option value="integer">Integer</option>
+			// 		          <option value="text">Text</option>
+			// 		          <option value="double">Double</option>
+			// 		        </Input>
+			// 		      </FormGroup>
+		 //       		</Col>
+		 //       		<Col xl={2} xs={2}>
+		 //       			<FormGroup>
+			// 		        <Button color="danger" id="remove_column" size="sm"><Icon icon={removeCircle} width={20} height={20} /></Button>
+			// 		      </FormGroup>
+		 //       		</Col>
+		 //       	</Row>
+			// 	)
+			// }
+		}
+	}
+
+	deleteColumn = (idx) => {
+		console.log('deleteColumn', idx);
+		let { columns } = this.state;
+		console.log('columns', columns);
+		let deletedItem = findWhere(columns, {idx: idx});
+		console.log(deletedItem);
+		let afterRemove = without(columns, deletedItem);
+		console.log(console.log('afterRemove', afterRemove));
+		this.setState({columns: afterRemove});
+	}
+
+	handleChangeInputLayerName(event) {
+		// const validation = !/[0-9a-zA-Z-_]/.test(String.fromCharCode(event.which));
+		// console.log('validation', validation);
+		// const value = event.target.value.split(" ").join("");
+		let value = event.target.value;
+		// value = value.replace(/[^A-Za-z_]/gi, "");
+		// value = value.replace(/[^\w]/gi, "");
+		value = value.replace(/[^\w]/gi, "");
+		// if (validation) { return false; }
+		this.setState({layerName: value}, () => console.log('layerName', this.state.layerName));
+	}
+
+	handleChangeInputLayerType(event) {
+		const value = event.target.value.split(" ").join("");
+		this.setState({layerType: value}, () => console.log('layerType', this.state.layerType));
+	}
+
+	handleChangeInputColumnName(idx, event) {
+		// dicari state columns terus dicari idx nya, kemudian set text nya
+
+		let { columns } = this.state;
+		let changedItem = findWhere(columns, {idx: idx});
+		// let value = event.target.value.split(" ").join("");
+		let value = event.target.value;
+		// value = value.replace(/[^A-Za-z0-9_]/gi, "");
+		value = value.replace(/[^\w]/gi, "");
+		changedItem.column_name = value;
+		console.log('changedItem', changedItem);
+		this.setState({columns: columns});
+		console.log('columns', this.state.columns);
+	}
+
+	handleChangeInputColumnType(idx, event) {
+		let { columns } = this.state;
+		let changedItem = findWhere(columns, {idx: idx});
+		// let value = event.target.value.split(" ").join("");
+		let value = event.target.value;
+		changedItem.column_type = value;
+		console.log('changedItem', changedItem);
+		this.setState({columns: columns});
+		console.log('columns', this.state.columns);
+	}
+
+	preventSpace(e) {
+		// Prevent space in attribute name
+	  // $('input[name^="column_name"]').on("keypress", function(e) {
+	  //   if(!/[0-9a-zA-Z-_]/.test(String.fromCharCode(e.which)))
+	  //       return false;
+	  // });
+	  console.log('event keypress',e);
+	  // console.log(!/[0-9a-zA-Z-_]/.test(String.fromCharCode(e.which)));
+	  // if(!/[0-9a-zA-Z-_]/.test(String.fromCharCode(e.which))) {
+	  // 	return false;
+	  // }
+	}
+
+	// checkBeforeSend = () => {
+	// 	// make sure no empty fields
+	// 	// enable disableCreateLayerButton if no empty fields
+	// 	const { layerName, layerType, columns, disableCreateLayerButton } = this.state;
+	// 	let toEnableValue = false;
+
+	// 	if (layerName !== "" && layerType !== "") {
+	// 		if (columns.length > 0) {
+	// 			for (let i = 0; i < columns.length; i++) {
+	// 				if (columns[i].column_name === "") {
+	// 					toEnableValue = false;
+	// 					// return false;
+	// 				} 
+	// 				else if (columns[i].column_type === "") {
+	// 					toEnableValue = false;
+	// 					// return false;
+	// 				}
+	// 				else {
+	// 					toEnableValue = true;
+	// 					// return true;
+	// 				}
+	// 			}
+	// 		}
+	// 		else {
+	// 			toEnableValue = false;
+	// 			// return false;
+	// 		}
+	// 	}
+
+	// 	console.log('toEnableValue', toEnableValue);
+	// 	if (toEnableValue === true) {
+	// 		// this.setState({disableCreateLayerButton: toEnableValue});
+	// 		// this.enableCreateLayerButton();	
+	// 		console.log('enabling create layer button....')
+
+	// 	}
+	// }
+
+	// enableCreateLayerButton = () => {
+	// 	// this.setState({disableCreateLayerButton: true});
+	// 	console.log('enabling create layer button....')
+	// }
+
+	sendCreateNewLayer = async () => {
+		const { layerName, layerType, columns } = this.state;
+	 	let reqPayload = {
+			layer_name: layerName,
+			layer_type: layerType,
+			columns: columns
+		}
+
+		if (layerName === '') {
+			alert("Please input the layer name");
+			return;
+		}
+		if (layerType === '') {
+			alert("Please input the layer type");
+			return;
+		}
+		if (columns.length < 1) {
+			alert("Please add at least one attribute column");
+			return;
+		}
+		if (columns.length > 0) {
+			for (let i = 0; i < columns.length; i++) {
+				if (columns[i].column_name === '') {
+					alert("Please make sure attibute column name is filled")
+					return;
+				}
+				if (columns[i].column_type === '') {
+					alert("Please make sure attibute column type is filled")
+					return;
+				}
+			}
+		}
+
+		let processCreateNewLayer = await createNewLayer(reqPayload);
+		console.log('sendCreateNewLayer',processCreateNewLayer);
+		alert("Success sending create new layer");
+	}
+
+
+
+	render() {
+		return (
+				<Modal isOpen={this.props.createNewLayerVisible} toggle={this.props.toggleCreateNewLayer} className="modal-dialog-newlayer" contentClassName="modal-content-newlayer">
+	        <ModalHeader toggle={this.props.toggleCreateNewLayer}>{this.props.createNewLayerTitle ? this.props.createNewLayerTitle : 'Create New Layer'}</ModalHeader>
+	        <ModalBody>
+	        	<div className="modal-dialog-body custom-scroll">
+	        	{/*<div className="modal-body-wrap">*/}
+	        		{/*<div className="row">*/}
+	        			{/*<div className="col-md-12">*/}
+	        			{/*<Row>
+						      <Col xl={6} xs={6}>
+	        					
+	        				</Col>
+	        			</Row>*/}
+	        			<Form>
+						      <FormGroup>
+						        <Label for="layer_name">Layer Name</Label>
+						        <Input type="text" name="layer_name" id="layer_name" placeholder="Input Layer Name" value={this.state.layerName} onChange={this.handleChangeInputLayerName.bind(this)}/>
+						      </FormGroup>
+						      <FormGroup>
+						        <Label for="layer_type">Layer Type</Label>
+						        <Input type="select" name="layer_type" id="layer_type" value={this.state.layerType} onChange={this.handleChangeInputLayerType.bind(this)}>
+						          <option value="">Select layer type</option>
+						          <option value="point">Point</option>
+						          <option value="linestring">LineString</option>
+						          <option value="polygon">Polygon</option>
+						        </Input>
+						      </FormGroup>
+						    </Form>
+						    <FormGroup>
+					        <Label for="attributes">Attributes</Label>
+					       	<Row className="row-input">
+					       		<Col xl={5} xs={5}>
+					       			<FormGroup>
+								        <Label for="column_name">Column Name</Label>
+								      </FormGroup>
+					       		</Col>
+					       		<Col xl={5} xs={5}>
+					       			<FormGroup>
+								        <Label for="column_type">Column Type</Label>
+								      </FormGroup>
+					       		</Col>
+					       		<Col xl={2} xs={2}>
+					       			<FormGroup>
+					       				<Label for="remove_column">{' '}</Label>
+								      </FormGroup>
+					       		</Col>
+					       	</Row>
+					       { this.renderColumnAttribute() }
+					       	<Row className="row-input">
+					       		<Col xl={9} xs={9}></Col>
+					       		<Col xl={3} xs={3}>
+					       			<FormGroup>
+								        <Button color="primary" id="add_column" size="sm" onClick={() => this.addColumn()}>Add Column</Button>
+								      </FormGroup>
+					       		</Col>
+					       	</Row>
+					      </FormGroup>
+	        			{/*</div>*/}
+	          	{/*</div>*/}
+	          {/*</div>*/}
+
+	          </div>
+	        </ModalBody>
+	        <ModalFooter>
+	          {/*<Button color="success" onClick={this.sendCreateNewLayer} disabled={this.state.disableCreateLayerButton}>Create</Button>{' '}*/}
+	          <Button color="success" onClick={() => this.sendCreateNewLayer()} >Create</Button>{' '}
+	          <Button color="secondary" onClick={this.props.toggleCreateNewLayer}>Cancel</Button>
+	        </ModalFooter>
+	      </Modal>
+		)
+	}
+}
+
+export default CreateNewLayer;
--- a/src/components/CreateNewLayer/package.json
+++ b/src/components/CreateNewLayer/package.json
@ -0,0 +1,6 @@
+{
+  "name": "CreateNewLayer",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CreateNewLayer.js"
+}
--- a/src/components/CustomModal/CustomModal.js
+++ b/src/components/CustomModal/CustomModal.js
@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button,
+UncontrolledTooltip, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+class CustomModal extends Component {
+	constructor(props) {
+		super(props)
+	}
+
+	render() {
+		return(
+			<Modal isOpen={this.props.mapTableModalVisible} toggle={this.props.toggleMapTable} className="modal-dialog-data" contentClassName="modal-content-data">
+        <ModalHeader toggle={this.props.toggleMapTable}>{this.props.mapTableTitle}</ModalHeader>
+        <ModalBody>
+        	Lorem ipsum.....
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleMapTable}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+		)
+	}
+}
+
+export default CustomModal;
--- a/src/components/CustomModal/package.json
+++ b/src/components/CustomModal/package.json
@ -0,0 +1,6 @@
+{
+  "name": "CustomModal",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CustomModal.js"
+}
--- a/src/components/DailyInfo/DailyInfo.css
+++ b/src/components/DailyInfo/DailyInfo.css
@ -0,0 +1,52 @@
+.daily-info-container {
+	margin-top: -10px;
+}
+
+.daily-info-container-empty {
+	/*z-index: 9999;*/
+	/*position: fixed;*/
+	/*height: 200px;*/
+}
+
+.daily-info-group-container {
+	margin-bottom: -10px;
+}
+
+.daily-info-group-title {
+	font-weight: 700;
+}
+
+.daily-info-list {
+	width: 100%;
+	display: inline-block;
+	padding-left: 10px;
+	padding-right: 5px;
+	padding-top: 7px;
+	padding-bottom: 7px;
+	margin-bottom: 5px;
+	border-radius: 10px;
+	background-color: #f2f2f2;
+	cursor: pointer;
+}
+
+.daily-info-list:hover {
+	background-color: #d9d9d9;
+}
+
+.daily-info-name {
+	width: 70%;
+	display: inline-block;
+	font-weight: 700;
+	font-size: 12px;
+}
+
+.daily-info-count {
+	width: 30%;
+	display: inline-block;
+	text-align: center;
+}
+
+.daily-info-badge {
+	font-size: 14px !important;
+	text-align: right;
+}
--- a/src/components/DailyInfo/DailyInfo.js
+++ b/src/components/DailyInfo/DailyInfo.js
@ -0,0 +1,655 @@
+import * as React from 'react';
+
+import { Row, Col, Badge } from 'reactstrap';
+import './DailyInfo.css';
+import '../../assets/css/customscroll.css';
+import { formatLabel, COLUMN_DAILY_INFO_TABLE } from '../../const/CustomFunc.js'
+import { getDailyInfoApi, requestTableDailyInfoApi } from '../../const/GeohrApiFunc.js';
+import ContentLoader from 'react-content-loader'
+import {
+  AT_TRIP_COLOR,
+  AT_CUSTOMER_COLOR,
+  AT_OFFICE_COLOR,
+  PRESENT_COLOR,
+  ABSENT_COLOR,
+  TOTAL_ATTENDANCE_COLOR,
+  ACHIEVE_COLOR,
+  NOT_ACHIEVE_COLOR,
+  DONE_COLOR,
+  NOT_YET_COLOR,
+  IZIN_COLOR,
+  TOTAL_COLOR,
+  RED_COLOR,
+  ORANGE_COLOR,
+  GREEN_COLOR,
+  DARK_GREY_COLOR,
+  BLUE_COLOR,
+  PURPLE_COLOR,
+  BROWN_COLOR,
+  YELLOW_COLOR,
+  WHITE_COLOR,
+  BLACK_COLOR
+} from '../../const/AppConst.js'
+import axios from 'axios';
+import { API_GEOHR_KARYAWAN, API_DAILY_INFO, API_DAILY_INFO_DETAIL, DASHBOARD_PROYEK_SEARCH, PROYEK_SEARCH } from '../../const/ApiConst';
+// import DialogBottom from './DialogBottom'
+import { toast } from 'react-toastify';
+import moment from 'moment';
+const id_org = window.localStorage.getItem('id_org');
+
+// const token = window.localStorage.getItem('token');
+// const config = {
+//   headers:
+//   {
+//     "Authorization": `Bearer ${token}`,
+//     "Content-type": `application/json`
+//   }
+// };
+
+class DailyInfo extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+    this.state = {
+      menu: null,
+      isReady: false,
+      sumPresensi: 0,
+      sumAbsensi: 0,
+      sumIzin: 0,
+      sumTracked: 0,
+      sumUntracked: 0,
+      sumEmployee: 0,
+      sumPanicBtn: 0,
+      dataNyPresence: [],
+      dataPresence: [],
+      dataPermission: [],
+      dataAbsent: [],
+      openDialogBottom: false,
+      itemDialog: [],
+      dataTableDialog: [],
+      sumTelat: 0,
+      sumTanpaKet: 0,
+      dataTelat: [],
+      dataTanpaKet: [],
+      dataAbsensi:[],
+      dataPanicBtn: [],
+      dataEmployee: [],
+      totalProyek: 0,
+      planning: 0,
+      realisasi: 0,
+      status_project: {
+          good: 0,
+          warning: 0,
+          critical: 0
+      },
+      waspang_status: {
+          presensi: 0,
+          absensi: 0
+      },
+      panic_button: 0
+    }
+  }
+
+  async componentDidMount() {
+    // this.getTotalProyek();
+    // this.getDailyInfo()
+    // this.getDailyEmployee();
+    // this.setState({ isReady: true })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+
+  }
+
+  getDailyInfo = async () => {
+    const payload = {
+      "columns": [
+        {"name": "created_at","logic_operator": "range","value": `${moment().utc().format('YYYY-MM-DD')} 00:00:00`,"value1": `${moment().utc().format('YYYY-MM-DD')} 23:59:59`,"operator": "AND"}
+      ],
+      "paging": {"start": 0,"length": -1}
+    }
+
+    const config = {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      // mode: 'cors', // no-cors, *cors, same-origin
+      // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      // credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer '+window.localStorage.getItem('token')
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      // redirect: 'follow', // manual, *follow, error
+      // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+      body: JSON.stringify(payload) // body data type must match "Content-Type" header
+    }
+    try {
+      const result = await fetch(DASHBOARD_PROYEK_SEARCH, config).then(response => response.json()).then(res => res);
+      console.log('getDailyInfo result', result);
+      if (result.code === 200 && result.data) {
+        const dataSum = result.data;
+        this.setState({
+          planning: dataSum.planning,
+          realisasi: dataSum.realisasi,
+          status_project: dataSum.status_project,
+          waspang_status: dataSum.waspang_status,
+          panic_button: dataSum.panic_button,
+          isReady: true
+        });
+      }
+      // const result = await axios
+      // .get(DASHBOARD_PROYEK, config)
+      // .then(res => res)
+      // .catch((error) => error.response);
+
+      // console.log('result', result);
+
+      // if (result && result.data && result.data.code == 200) {
+      //   const dataSum = result.data;
+      //   this.setState({
+      //     planning: dataSum.planning,
+      //     realisasi: dataSum.realisasi,
+      //     status_project: dataSum.status_project,
+      //     waspang_status: dataSum.waspang_status,
+      //     panic_button: dataSum.panic_button,
+      //     isReady: true
+      //   });
+      // }
+    }
+    catch (e) {
+      console.log('error getDailyInfo', e);
+      // return false;
+    }
+  }
+
+  getTotalProyek = async () => {
+    const payload = {
+
+    }
+    const config = {
+      method: 'POST', // *GET, POST, PUT, DELETE, etc.
+      // mode: 'cors', // no-cors, *cors, same-origin
+      // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      // credentials: 'same-origin', // include, *same-origin, omit
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer '+window.localStorage.getItem('token')
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      // redirect: 'follow', // manual, *follow, error
+      // referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+      body: JSON.stringify(payload) // body data type must match "Content-Type" header
+    }
+    try {
+      const result = await fetch(PROYEK_SEARCH, config).then(response => response.json()).then(res => res);
+      console.log('getDailyInfo result', result);
+      if (result.code === 200 && result.data) {
+        const dataSum = result.data;
+        this.setState({
+          totalProyek: result.data.length,
+          isReady: true
+        });
+      }
+
+      // const result = await axios
+      // .get(PROYEK_LIST, config)
+      // .then(res => res)
+      // .catch((error) => error.response);
+
+      // if (result && result.data && result.data.code == 200) {
+      //   const dataSum = result.data;
+      //   this.setState({
+      //     totalProyek: result.data.length,
+      //     isReady: true
+      //   });
+      // }
+
+    }
+    catch (e) {
+      console.log('error getDailyInfo', e);
+      // return false;
+    }
+  }
+
+  openDialogBottom = async(item) => {
+    let data = []
+    const { dataPresence, dataAbsensi, dataEmployee, dataPanicBtn, dataTelat, dataTanpaKet } = this.state
+    if (item.key === "presensi") {
+      data = dataPresence
+    } else if (item.key === "absensi") {
+      data = dataAbsensi
+    } else if (item.key === "panic button") {
+      data = dataPanicBtn
+    } else if (item.key === "total dengan keterangan") {
+      data = dataTelat
+    } else if (item.key === "total tanpa keterangan") {
+      data = dataTanpaKet
+    } else if (item.key === "total karyawan") {
+      data = dataEmployee
+    }
+    this.setState({ openDialogBottom: true, itemDialog: item, dataTableDialog: data })
+  }
+
+  closeDialogBottom = () => {
+    this.setState({ openDialogBottom: false })
+  }
+
+  // getListDailyInfo = () => {
+  //   let menu = [
+  //     {
+  //       "id": 1,
+  //       "title": "TOTAL KARYAWAN",
+  //       "key": "total karyawan",
+  //       "total": this.state.sumEmployee,
+  //       "color": TOTAL_COLOR,
+  //        "text_color": WHITE_COLOR
+  //     },
+  //     {
+  //       "id": 2,
+  //       "title": "HADIR",
+  //       "key": "presensi",
+  //       "total": this.state.sumPresensi,
+  //       "color": PRESENT_COLOR,
+  //       "text_color": WHITE_COLOR
+  //     },
+  //     {
+  //       "id": 3,
+  //       "title": "TIDAK HADIR",
+  //       "key": "izin",
+  //       "total": this.state.sumAbsensi,
+  //       "color": IZIN_COLOR,
+  //       "text_color": WHITE_COLOR
+  //     },
+  //     {
+  //       "id": 4,
+  //       "title": "KARYAWAN TELAT",
+  //       "key": "total dengan keterangan",
+  //       "total": this.state.sumTelat,
+  //       "color": NOT_YET_COLOR,
+//    "text_color": WHITE_COLOR
+  //     },
+  //     {
+  //       "id": 5,
+  //       "title": "KARYAWAN TANPA KETERANGAN",
+  //       "key": "total tanpa keterangan",
+  //       "total": this.state.sumTanpaKet,
+  //       "color": DONE_COLOR,
+  //       "text_color": WHITE_COLOR
+  //     },
+  //     {
+  //       "id": 6,
+  //       "title": "PANIK BUTTON",
+  //       "key": "panic button",
+  //       "total": this.state.sumPanicBtn,
+  //       "color": ABSENT_COLOR,
+  //       "text_color": WHITE_COLOR
+  //     }
+  //   ]
+
+  //   return menu;
+  // }
+
+  // renderDailyInfo = () => {
+  //   const list = this.getListDailyInfo() || [];
+  //   return (
+  //     list.map((item) => {
+  //       return (
+  //         <div onClick={() => this.openTable(item)} key={item.id} className="daily-info-list">
+  //         <div className="daily-info-name">
+  //           {item.title}
+  //         </div>
+  //         <div className="daily-info-count">
+  //           <Badge color="primary" pill className="daily-info-badge" style={{ backgroundColor: item.color }}>{item.total}</Badge>
+  //         </div>
+  //       </div>
+  //       )
+  //     })
+  //   )
+  // }
+
+  getListDailyInfo = () => {
+    let menu = [
+      {
+        "id": 1,
+        "title": "PROYEK",
+        "key": "proyek",
+        "total": this.state.totalProyek,
+        "color": BROWN_COLOR,
+        "text_color": WHITE_COLOR
+      },
+      {
+        "id": 2,
+        "title": "PLANNING",
+        "key": "plannng",
+        "total": this.state.planning,
+        "color": DARK_GREY_COLOR,
+        "text_color": WHITE_COLOR
+      },
+      {
+        "id": 3,
+        "title": "REALISASI",
+        "key": "realisasi",
+        "total": this.state.realisasi,
+        "color": BLUE_COLOR,
+        "text_color": WHITE_COLOR
+      },
+      {
+        "id": 4,
+        "title": "STATUS PROJECT",
+        "key": "status_project",
+        "total": undefined,
+        "color": DONE_COLOR,
+        "text_color": WHITE_COLOR,
+        "children": [
+        {
+          "id": 1,
+          "title": "Aman",
+          "key": "status_project_good",
+          "total": this.state.status_project.good,
+          "color": GREEN_COLOR,
+          "text_color": WHITE_COLOR
+        },
+        {
+          "id": 2,
+          "title": "Alert",
+          "key": "status_project_warning",
+          "total": this.state.status_project.warning,
+          "color": YELLOW_COLOR,
+          "text_color": DARK_GREY_COLOR
+        },
+        {
+          "id": 3,
+          "title": "Critical",
+          "key": "status_project_critical",
+          "total": this.state.status_project.critical,
+          "color": RED_COLOR,
+          "text_color": WHITE_COLOR
+        }]
+      },
+      {
+        "id": 5,
+        "title": "WASPANG STATUS",
+        "key": "waspang_status",
+        "total": undefined,
+        "color": IZIN_COLOR,
+        "text_color": WHITE_COLOR,
+        "children": [
+        {
+          "id": 1,
+          "title": "Presensi",
+          "key": "waspang_status_presensi",
+          "total": this.state.waspang_status.presensi,
+          "color": GREEN_COLOR,
+          "text_color": WHITE_COLOR
+        },
+        {
+          "id": 2,
+          "title": "Absensi",
+          "key": "waspang_status_absensi",
+          "total": this.state.waspang_status.absensi,
+          "color": ORANGE_COLOR,
+          "text_color": WHITE_COLOR
+        }],
+      },
+      {
+        "id": 6,
+        "title": "PANIC BUTTON",
+        "key": "panic_button",
+        "total": this.state.panic_button,
+        "color": PURPLE_COLOR,
+        "text_color": WHITE_COLOR
+      },
+    ]
+
+    return menu;
+  }
+
+  renderDailyInfo = () => {
+    const list = this.getListDailyInfo() || [];
+    return this.renderChildDailyInfo(list);
+  }
+
+  renderChildDailyInfo = (data) => {
+    return (
+      data.map((item) => {
+        return (
+          <div key={item.id} className="daily-info-list">
+            <div className="daily-info-name">
+              {item.title}
+            </div>
+            <div className="daily-info-count">
+              <Badge color="primary" pill className="daily-info-badge" style={{ backgroundColor: item.color, color: item.text_color }}>{item.total !== undefined ? item.total : null}</Badge>
+            </div>
+            { item.children ? this.renderChildDailyInfo(item.children) : null }
+          </div>
+        )
+      })
+    )
+  }
+
+  // requestTableDailyInfoApi = async (table_type) => {
+  //   const formData = new FormData();
+  //   // formData.append('start', 0);
+  //   // formData.append('length', 100);
+  //   formData.append('table_type', table_type);
+
+  //   // if(this.state.search!==""){
+  //   //   formData.append('value', this.state.search);
+  //   // }
+
+  //   const start = 0;
+  //   const length = 100;
+
+  //   const param = {
+  //     method: 'POST',
+  //     header: JSON.stringify({'Content-Type': 'multipart/form-data'}),
+  //     body: formData
+  //   }
+
+  //   try {
+  //     const result = await fetch(API_DAILY_INFO_DETAIL(start,length), param).then(response => response.json()).then(res => res);
+  //     console.log('requestTableDailyInfoApi result', result);
+  //     if (result.code_status === 200 && result.data) {
+  //       return result.data;
+  //     }
+  //     else {
+  //       return null;
+  //     }
+  //   }
+  //   catch (e) {
+  //     console.log('error get', e);
+  //     toast.warn(e.toString());
+  //     return null;
+  //   }
+  // }
+
+  openTable = async (item) => {
+    const { dataPresence, dataAbsensi, dataEmployee, dataPanicBtn, dataTelat, dataTanpaKet} = this.state
+    
+    console.log('openTable', item);
+
+    await this.props.setIsProcessing(true);
+    this.props.removeLayerByName('routeLayer'); // remove the previous routeLayer
+
+    let nameUpperCase = item.title.toUpperCase();
+    this.props.setMapTableTitle(nameUpperCase);
+    // let table = await requestTableDailyInfoApi(item);
+    // console.log('[DailyInfo] openTable table', table);
+
+    let column = [];
+
+    let data = null;
+
+    // const editFormatter = () => {
+    //   return (
+    //     <div>
+    //       <i className="cil-search fa-lg" style={{ color: 'lightblue', marginRight: '10px', cursor: "pointer" }} onClick={() => console.log('goToFeature')}></i>
+    //     </div>
+    //   )
+    // }
+
+    // if (table && table.length > 0) {
+    //   let oneRow = table[0];
+    //   let optionCell = {
+    //     dataField: '_option_',
+    //     text: 'Action',
+    //     formatter: editFormatter
+    //   }
+
+    //   for (let key in oneRow) {
+    //     column.push({
+    //       "dataField": key,
+    //       "text": formatLabel(key)
+    //     })
+    //   }
+
+      
+      
+    //   data = table;
+    // }
+
+    // await this.requestTableDailyInfoApi(item.key);
+    // let table_type = '';
+    // if(type==="presensi"){
+    //   table_type = "hadir";
+    // }else if(type==="panic button"){
+    //   table_type = "panik_button";
+    // }else if(type==="absent"){
+    //   table_type = "tidak_hadir";
+    // }else if(type==="late"){
+    //   table_type = "karyawan_telat";
+    // }else if(type==="without_ket"){
+    //   table_type = "karyawan_tanpa_keterangan";
+    // }else if(type==="sum_employee"){
+    //   table_type = "total_karyawan";
+    // }
+
+
+    let table_type = '';
+
+    // if (item.key === "presensi") {
+    //   data = dataPresence
+    // } else if (item.key === "absensi") {
+    //   data = dataAbsensi
+    // } else if (item.key === "panic button") {
+    //   data = dataPanicBtn
+    // } else if (item.key === "total dengan keterangan") {
+    //   data = dataTelat
+    // } else if (item.key === "total tanpa keterangan") {
+    //   data = dataTanpaKet
+    // } else if (item.key === "total karyawan") {
+    //   data = dataEmployee
+    // }
+
+    if (item.key === "total karyawan") {
+      table_type = "total_karyawan";
+    }
+    else if (item.key === "presensi") {
+      table_type = "hadir";
+    }
+    else if (item.key === "izin") {
+      table_type = "tidak_hadir";
+    }
+    else if (item.key === "total dengan keterangan") {
+      table_type = "karyawan_telat";
+    }
+    else if (item.key === "total tanpa keterangan") {
+      table_type = "karyawan_tanpa_keterangan";
+    }
+    else if (item.key === "panic button") {
+      table_type = "panik_button";
+    }
+    this.props.setTableType(table_type)
+
+    // let dataRes = await requestTableDailyInfoApi(table_type);
+
+    // this.props.setMapTableData(dataRes)
+
+
+    if (!this.props.mapTableModalVisible) {
+      this.props.toggleMapTable();
+    }
+
+    await this.props.setIsProcessing(false);
+  }
+
+  render() {
+    const {  openDialogBottom, itemDialog, dataTableDialog, isReady } = this.state;
+    if (!isReady) {
+      return (
+        <div className="daily-info-container-empty">
+          <ContentLoader
+            speed={2}
+            width="100%"
+            height="200"
+            viewBox="0 0 200 200"
+            backgroundColor="#f3f3f3"
+            foregroundColor="#ecebeb"
+          >
+            <rect x="0" y="0" rx="6" ry="6" width="100" height="25" />
+            <rect x="0" y="30" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="75" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="120" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="175" rx="0" ry="0" width="100%" height="2" />
+          </ContentLoader>
+          <ContentLoader
+            speed={2}
+            width="100%"
+            height="200"
+            viewBox="0 0 200 200"
+            backgroundColor="#f3f3f3"
+            foregroundColor="#ecebeb"
+          >
+            <rect x="0" y="0" rx="6" ry="6" width="100" height="25" />
+            <rect x="0" y="30" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="75" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="120" rx="10" ry="10" width="100%" height="40" />
+            <rect x="0" y="175" rx="0" ry="0" width="100%" height="2" />
+          </ContentLoader>
+        </div>
+      )
+    }
+
+    return (
+      <div style={{ width: "100%", height: "100%" }} className="daily-info-container">
+        {/* {openDialogBottom && (
+          <DialogBottom
+            isCloseDialog={this.closeDialogBottom}
+            itemDialog={itemDialog}
+            dataTable={dataTableDialog}
+          />
+        )} */}
+     
+            <div className="daily-info-group-container">
+              {/*<h6 className="daily-info-group-title">Status</h6>    */}
+              {this.renderDailyInfo()}
+            </div>
+         
+        {/* {menu && menu.length > 0 && menu.map((menuItem, index) => {
+          return (
+            <div className="daily-info-group-container" key={index}>
+              <h6 className="daily-info-group-title">{menuItem.title.toUpperCase()}</h6>
+              {menuItem.children.length > 0 && menuItem.children.map((childMenuItem, index) => {
+                return (
+                  <div className="daily-info-list" key={index} onClick={() => this.openTable(childMenuItem)} key={index}>
+                    <div className="daily-info-name">
+                      {childMenuItem.name.toUpperCase()}
+                    </div>
+                    <div className="daily-info-count">
+                      <Badge color="primary" pill className="daily-info-badge" style={{ backgroundColor: childMenuItem.color }}>{childMenuItem.total}</Badge>
+                    </div>
+                  </div>
+                )
+              })}
+            
+            </div>
+          )
+        })
+        } */}
+      </div>
+    )
+  }
+}
+
+export default DailyInfo;
--- a/src/components/DailyInfo/DialogBottom.js
+++ b/src/components/DailyInfo/DialogBottom.js
@ -0,0 +1,357 @@
+import React, { Component } from 'react'
+import { Resizable } from "re-resizable";
+import closeCircleOutline from '@iconify/icons-ion/close-circle-outline';
+import removeCircleOutline from '@iconify/icons-ion/remove-circle-outline';
+import windowMaximaze from '@iconify/icons-mdi/window-maximize';
+import { Col, Row, Table, Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
+import { Icon } from '@iconify/react';
+import '../../views/Dashboard/Dashboard.css';
+import moment from 'moment';
+
+const style = {
+  position: "fixed",
+  width: "100%",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  border: "solid 1px #ddd",
+  background: "#ffffff",
+  zIndex: 9999
+};
+
+class DialogBottom extends Component {
+
+  state = {
+    tableHeight: 150,
+    resizableWidth: "100%",
+    resizableHeight: 300,
+    maximizeTitle: "maximize"
+  }
+
+  setMapTableWindow = (type) => {
+    console.log('setMapTableWindow', type);
+    if (type === 'min') {
+      this.setState({ resizableHeight: 55, tableHeight: 150 });
+    }
+    else if (type === "max") {
+      if (this.state.resizableHeight === 725) {
+        // restore (back to default)
+        this.setState({ resizableHeight: 300, tableHeight: 150, maximizeTitle: "maximize" });
+      }
+      else {
+        // maximize
+        this.setState({ resizableHeight: 725, tableHeight: 950, maximizeTitle: "restore" });
+      }
+
+    }
+  }
+  render() {
+    const { isCloseDialog, itemDialog, dataTable } = this.props
+    const { resizableHeight } = this.state
+    // console.log('dataTable', dataTable.length)
+    // console.log('itemDialog', itemDialog)
+    console.log(`resizableHeight`, resizableHeight)
+    return (
+      <Resizable
+        style={style}
+        size={{
+          width: this.state.resizableWidth,
+          height: this.state.resizableHeight
+        }}
+        maxHeight={625}
+        enable={{ top: true, right: false, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}
+        onResizeStop={(e, direction, ref, d) => {
+          // console.log('onResizeStop,e,direction,ref,d', { e, direction, ref, d })
+          this.setState({
+            resizableWidth: "100%", // to keep always full width
+            resizableHeight: this.state.resizableHeight + d.height
+          });
+
+          // if drag the table header
+          if (e.screenY < 100) {
+            this.setState({ tableHeight: 450 })
+          }
+          else if (e.screenY < 150) {
+            this.setState({ tableHeight: 400 })
+          }
+          else if (e.screenY < 200) {
+            this.setState({ tableHeight: 350 })
+          }
+          else if (e.screenY < 250) {
+            this.setState({ tableHeight: 300 })
+          }
+          else if (e.screenY < 300) {
+            this.setState({ tableHeight: 250 })
+          }
+          else if (e.screenY < 400) {
+            this.setState({ tableHeight: 200 })
+          }
+          else if (e.screenY < 600) {
+            this.setState({ tableHeight: 150 }) // default
+          }
+          else if (e.screenY >= 600) {
+            // this.props.toggleMapTable(); // close the MapTable
+            this.setMapTableWindow('min');
+          }
+        }}
+      >
+        <div style={{ paddingTop: 10, position: "relative", height: "100%" }}>
+          <Row className="maptable-header">
+            <Col md={9}>
+              {/* <p className="maptable-title">{itemDialog.title}</p> */}
+            </Col>
+            <Col md={3} style={{ paddingLeft: '15%' }} className="maptable-window-button-container">
+              <span className="maptable-minimize" title="minimize"
+                onClick={() => this.setMapTableWindow("min")}
+              >
+                <Icon icon={removeCircleOutline} width={30} height={30} />
+              </span>
+              <span className="maptable-maximize" title={this.state.maximizeTitle}
+                onClick={() => this.setMapTableWindow("max")}
+              >
+                <Icon icon={windowMaximaze} width={30} height={30} />
+              </span>
+              <span className="maptable-close" title="close"
+                onClick={() => isCloseDialog()}
+              >
+                <Icon icon={closeCircleOutline} width={30} height={30} />
+              </span>
+            </Col>
+          </Row> 
+          {itemDialog.key === "presensi" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Kehadiran Karyawan Hari Ini</b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+                <Table>
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Nama Karyawan</th>
+                      <th>Jam Masuk</th>
+                      <th>Jam Keluar</th>
+                    </tr>
+                  </thead>
+                  <tbody >
+                    {dataTable.map((item, index) => { 
+                      return (
+                        <tr key={index}>
+                          <td>{++index}</td>
+                          <td>{item.employee_name}</td>
+                          <td>{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                          <td>{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+              }
+              </CardBody>
+            </Card>
+          )}
+          {itemDialog.key === "karyawan telat" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Karyawan Telat Hari Ini</b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+                <Table>
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Nama Karyawan</th>
+                      <th>Jam Masuk</th>
+                      <th>Jam Keluar</th>
+                    </tr>
+                  </thead>
+                  <tbody >
+                    {dataTable.map((item, index) => { 
+                      return (
+                        <tr key={index}>
+                          <td>{++index}</td>
+                          <td>{item.employee_name}</td>
+                          <td>{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                          <td>{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+              }
+              </CardBody>
+            </Card>
+          )}
+          {itemDialog.key === "total karyawan" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Total Karyawan</b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+               <Table>
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Devisi</th>
+                      <th>Nama Karyawan</th>
+                      <th>Jenis Kelamin</th>
+                      <th>No HP</th>
+                      <th>Alamat</th> 
+                    </tr>
+                  </thead>
+                  <tbody >
+                    {dataTable.map((item, index) => { 
+                      return (
+                        <tr key={index}>
+                          <td>{++index}</td>
+                          <td>{item.devisi_name}</td>
+                          <td>{item.name}</td>
+                          <td>{item.gender == "P" ? "Perempuan" : "Laki-laki"}</td>
+                          <td>{item.phone_number}</td>
+                          <td>{item.address}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+              }
+              </CardBody>
+            </Card>
+          )}
+          {itemDialog.key === "absent" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Karyawan Absent Hari ini </b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+               <Table>
+               <thead>
+                 <tr>
+                   <th>#</th>
+                   <th>Nama Karyawan</th>
+                   <th>Jam Masuk</th>
+                   <th>Jam Keluar</th>
+                 </tr>
+               </thead> 
+             </Table>}
+                
+              </CardBody>
+            </Card>
+          )}
+          {itemDialog.key === "karyawan tanpa keterangan" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Karyawan Tanpa Keterangan</b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+               <Table>
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Devisi</th>
+                      <th>Nama Karyawan</th>
+                      <th>Jenis Kelamin</th>
+                      <th>No HP</th>
+                      <th>Alamat</th> 
+                    </tr>
+                  </thead>
+                  <tbody >
+                    {dataTable.map((item, index) => { 
+                      return (
+                        <tr key={index}>
+                          <td>{++index}</td>
+                          <td>{item.devisi_name}</td>
+                          <td>{item.name}</td>
+                          <td>{item.gender == "P" ? "Perempuan" : "Laki-laki"}</td>
+                          <td>{item.phone_number}</td>
+                          <td>{item.address}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+              }
+              </CardBody>
+            </Card>
+          )}
+          {itemDialog.key === "panic button" && (
+            <Card style={{ margin: 10 }}>
+              <CardHeader>
+                <b>Daftar Karyawan Melakukan Panik Button Hari Ini</b>
+              </CardHeader>
+              <CardBody style={{ overflowY: 'auto', height: resizableHeight === 300 ? 200 : 510 }}>
+              {dataTable.length === 0 ? 
+                <Table>
+                  <tr>
+                    <td style={{ fontWeight: "bold" }} colSpan="4" align="center">No Data Available</td>
+                  </tr>
+                </Table>
+               : 
+                <Table>
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Nama Karyawan</th>
+                      <th>Jam Masuk</th>
+                      <th>Jam Keluar</th>
+                    </tr>
+                  </thead>
+                  <tbody >
+                    {dataTable.map((item, index) => { 
+                      return (
+                        <tr key={index}>
+                          <td>{++index}</td>
+                          <td>{item.employee_name}</td>
+                          <td>{item.clock_time ? moment(item.clock_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                          <td>{item.clock_out_time ? moment(item.clock_out_time).format('DD-MM-YYYY HH:mm') : "-"}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </Table>
+              }
+              </CardBody>
+            </Card>
+          )}
+        </div>
+      </Resizable>
+    )
+  }
+}
+
+export default DialogBottom
--- a/src/components/DailyInfo/package.json
+++ b/src/components/DailyInfo/package.json
@ -0,0 +1,6 @@
+{
+  "name": "DailyInfo",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DailyInfo.js"
+}
--- a/Show More
+++ b/Show More