Home.js 23.2 KB
Newer Older
d.arizona's avatar
d.arizona committed
1
import React from 'react';
d.arizona's avatar
d.arizona committed
2 3 4 5 6 7 8 9 10 11
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
d.arizona's avatar
d.arizona committed
12 13
import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess'
d.arizona's avatar
d.arizona committed
14 15 16
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
d.arizona's avatar
d.arizona committed
17
import Collapse from '@material-ui/core/Collapse';
d.arizona's avatar
d.arizona committed
18
import DateFnsUtils from '@date-io/date-fns';
d.arizona's avatar
d.arizona committed
19
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
Deni Rinaldi's avatar
Deni Rinaldi committed
20
import localeID from 'date-fns/locale/en-US';
Deni Rinaldi's avatar
Deni Rinaldi committed
21
import ReactTooltip from 'react-tooltip';
d.arizona's avatar
d.arizona committed
22

d.arizona's avatar
d.arizona committed
23
import {
Deni Rinaldi's avatar
Deni Rinaldi committed
24 25 26 27 28
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
d.arizona's avatar
d.arizona committed
29
  useRouteMatch, useLocation
Deni Rinaldi's avatar
Deni Rinaldi committed
30 31
} from "react-router-dom";
import Images from '../assets/Images';
Deni Rinaldi's avatar
Deni Rinaldi committed
32
import { FadeMenu, Footer, UseWindowDimensions } from '../Utils/Index';
Deni Rinaldi's avatar
Deni Rinaldi committed
33
import Beranda from './Beranda';
d.arizona's avatar
d.arizona committed
34 35
import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
d.arizona's avatar
d.arizona committed
36
import ArraySide from '../library/Array'
d.arizona's avatar
d.arizona committed
37
import Constant from '../library/Constant';
d.arizona's avatar
d.arizona committed
38
import api from '../api';
d.arizona's avatar
d.arizona committed
39

Deni Rinaldi's avatar
Deni Rinaldi committed
40
const drawerWidth = 307;
d.arizona's avatar
d.arizona committed
41

Deni Rinaldi's avatar
Deni Rinaldi committed
42

d.arizona's avatar
d.arizona committed
43
const useStyles = makeStyles((theme) => ({
d.arizona's avatar
d.arizona committed
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: 36,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
d.arizona's avatar
d.arizona committed
73 74 75 76 77 78 79
  topleftOpen: {
    width: drawerWidth,
    borderRight: 0,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
Deni Rinaldi's avatar
Deni Rinaldi committed
80
    backgroundColor: '#273b80'
d.arizona's avatar
d.arizona committed
81 82 83 84 85 86 87 88 89 90 91 92 93
  },
  topleftClose: {
    borderRight: 0,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(3) + 2,
    height: '78px',
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(7) + 1,
    },
Deni Rinaldi's avatar
Deni Rinaldi committed
94 95
    padding: 20,
    display: 'flex',
Deni Rinaldi's avatar
Deni Rinaldi committed
96
    backgroundColor: '#273b80'
d.arizona's avatar
d.arizona committed
97
  },
d.arizona's avatar
d.arizona committed
98 99
  drawerOpen: {
    width: drawerWidth,
Deni Rinaldi's avatar
Deni Rinaldi committed
100
    borderRight: 0,
d.arizona's avatar
d.arizona committed
101 102 103 104
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
d.arizona's avatar
d.arizona committed
105
    backgroundColor: '#f6f7f9',
d.arizona's avatar
d.arizona committed
106 107
  },
  drawerClose: {
Deni Rinaldi's avatar
Deni Rinaldi committed
108
    borderRight: 0,
d.arizona's avatar
d.arizona committed
109 110 111 112 113
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
Deni Rinaldi's avatar
Deni Rinaldi committed
114
    width: theme.spacing(3) + 2,
d.arizona's avatar
d.arizona committed
115
    [theme.breakpoints.up('sm')]: {
Deni Rinaldi's avatar
Deni Rinaldi committed
116
      width: theme.spacing(7) + 1,
d.arizona's avatar
d.arizona committed
117
    },
d.arizona's avatar
d.arizona committed
118
    backgroundColor: '#f6f7f9',
d.arizona's avatar
d.arizona committed
119 120 121 122 123 124 125 126 127
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
  },
Deni Rinaldi's avatar
Deni Rinaldi committed
128 129 130 131 132 133 134
  toolbarDrawer: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    // ...theme.mixins.toolbar
  },
d.arizona's avatar
d.arizona committed
135 136 137 138
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
Deni Rinaldi's avatar
Deni Rinaldi committed
139 140 141 142 143
  orangeAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: 'black',
  },
d.arizona's avatar
d.arizona committed
144 145
}));

d.arizona's avatar
d.arizona committed
146
export default function MiniDrawer() {
d.arizona's avatar
d.arizona committed
147
  let location = useLocation();
d.arizona's avatar
d.arizona committed
148 149 150
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
d.arizona's avatar
d.arizona committed
151
  const [selectedIndex, setSelectedIndex] = React.useState([]);
Deni Rinaldi's avatar
Deni Rinaldi committed
152 153
  const [selectedIndexs, setSelectedIndexs] = React.useState([]);
  const [selectedSubIndex, setSelectSub] = React.useState([]);
d.arizona's avatar
d.arizona committed
154 155
  const [userFullname, setUserFullname] = React.useState("")
  const [userEmail, setUserEmail] = React.useState("")
156
  const [userPhoto, setUserPhoto] = React.useState("")
157 158
  const [application, setApplication] = React.useState([])
  const [setting, setSetting] = React.useState([])
d.arizona's avatar
d.arizona committed
159 160 161
  const [data, setData] = React.useState({
    array: [
      {
162 163 164 165 166
        img: Images.Home,
        label: 'Home',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
167 168
      },
      {
169 170 171 172 173
        img: Images.budgetTahunan,
        label: 'Master Budget & CAT',
        path: 'budget-tahunan',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
174 175
      },
      {
176 177 178 179 180
        img: Images.laporanBulanan,
        label: 'Monthly Report',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
181 182
      },
      {
183 184 185 186 187
        img: Images.rolling,
        label: 'Rolling Outlook & CAT Revision',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
188 189
      },
      {
190 191 192 193 194
        img: Images.outlookperformance,
        label: 'Outlook Performance Appraisal',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
195 196
      },
      {
197 198 199 200 201
        img: Images.operatingindicator,
        label: 'Operating Indicator',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
202 203
      },
      {
204 205 206 207 208
        img: Images.manajemenDokumen,
        label: 'Document Management',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
209 210
      },
      {
211 212 213 214 215
        img: Images.laporan,
        label: 'Reports',
        path: '',
        subItem: [
          {
d.arizona's avatar
d.arizona committed
216 217 218 219
            img: '',
            label: 'Subco',
            path: 'beranda',
          }, {
220
            img: 'beranda',
d.arizona's avatar
d.arizona committed
221 222 223
            label: 'Summary of Triputra Group',
            path: 'beranda',
          }, {
d.arizona's avatar
d.arizona committed
224 225 226
            img: 'beranda',
            label: 'Financial Dashboard',
            path: 'dashboard-financial',
d.arizona's avatar
d.arizona committed
227
          }, {
228
            img: 'beranda',
d.arizona's avatar
d.arizona committed
229
            label: 'CAT Dashboard',
d.arizona's avatar
d.arizona committed
230
            path: 'cat-dashboard',
231 232 233
          }
        ],
        collapse: false,
d.arizona's avatar
d.arizona committed
234 235
      },
      {
236 237 238 239 240
        img: '',
        label: 'Settings',
        path: 'beranda',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
241 242
      },
      {
243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268
        img: Images.masterdata,
        label: 'Master Data',
        path: '',
        subItem: [
          {
            img: '',
            label: 'Business Unit',
            path: 'unit-bisnis',
          },
          {
            img: '',
            label: 'Company',
            path: 'perusahaan',
          },
          {
            img: '',
            label: 'Report Items',
            path: 'report-items',
          },
          {
            img: '',
            label: 'Parameters',
            path: 'parameter',
          },
        ],
        collapse: false,
d.arizona's avatar
d.arizona committed
269 270
      },
      {
271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286
        img: Images.otorisasi,
        label: 'Authorization',
        path: '',
        subItem: [
          {
            img: '',
            label: 'User Role',
            path: 'userrole',
          },
          {
            img: '',
            label: 'User',
            path: 'user',
          }
        ],
        collapse: false,
d.arizona's avatar
d.arizona committed
287 288
      },
      {
289 290 291 292 293
        img: Images.approvalmatrix,
        label: 'Approval Matrix',
        path: 'approval-matrix',
        subItem: null,
        collapse: false,
d.arizona's avatar
d.arizona committed
294 295
      },
      {
296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311
        img: Images.otorisasi,
        label: 'User Management',
        path: '',
        subItem: [
          {
            img: '',
            label: 'Profile',
            path: 'profile',
          },
          {
            img: '',
            label: 'Logout',
            path: '',
          },
        ],
        collapse: false,
d.arizona's avatar
d.arizona committed
312
      }
313
    ]
d.arizona's avatar
d.arizona committed
314
  })
315

d.arizona's avatar
d.arizona committed
316
  React.useEffect(() => {
Deni Rinaldi's avatar
Deni Rinaldi committed
317
    if (userFullname === "" && userEmail === "") {
d.arizona's avatar
d.arizona committed
318
      getUserData()
d.arizona's avatar
d.arizona committed
319
      getMenuHierarki()
320
    }
d.arizona's avatar
d.arizona committed
321
  })
d.arizona's avatar
d.arizona committed
322

323 324
  const parseChildren = (val) => {
    let data = Object.assign([], val)
325
    data = data.sort((a, b) => a.menu_id - b.menu_id).map((i) => {
326 327 328 329 330 331 332 333 334 335 336
      return {
        img: i.icon === '#' ? "" : i.icon,
        label: i.menu_name,
        path: i.url,
        subItem: parseChildren(i.sub_menu),
        collapse: false
      }
    })
    return data
  }

d.arizona's avatar
d.arizona committed
337 338
  const getMenuHierarki = () => {
    api.create().getMenuByRole().then((response) => {
339
      console.log(response)
340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
      if (response.data) {
        if (response.data.status === "success") {
          let app = null
          let set = null
          response.data.data.map((item) => {
            if (item.menu_name === "Application") {
              app = parseChildren(item.sub_menu)
              return app
            } else {
              set = parseChildren(item.sub_menu)
              return set
            }
          })
          setApplication(app)
          setSetting(set)
Deni Rinaldi's avatar
Deni Rinaldi committed
355
          console.log(set);
356 357 358 359
        } else {
          localStorage.removeItem(Constant.TOKEN)
          window.location.reload();
        }
360 361 362 363
      } else {
        localStorage.removeItem(Constant.TOKEN)
        window.location.reload();
      }
d.arizona's avatar
d.arizona committed
364 365 366
    })
  }

d.arizona's avatar
d.arizona committed
367 368 369
  const getUserData = () => {
    let userId = localStorage.getItem(Constant.USER)
    api.create().getDetailUser(userId).then((response) => {
370
      if (response.data) {
Deni Rinaldi's avatar
Deni Rinaldi committed
371
        if (response.data.status === 'success') {
372 373 374 375
          setUserFullname(response.data.data.fullname === null ? 'Anonym' : response.data.data.fullname)
          setUserEmail(response.data.data.email === null ? 'Anonym@123.xyz' : response.data.data.email)
          setUserPhoto(response.data.data.photo === null ? "" : response.data.data.photo)
        }
d.arizona's avatar
d.arizona committed
376 377 378
      }
    })
  }
d.arizona's avatar
d.arizona committed
379

380
  const logout = () => {
d.arizona's avatar
d.arizona committed
381 382 383 384
    localStorage.removeItem(Constant.TOKEN)
    window.location.reload();
  }

d.arizona's avatar
d.arizona committed
385 386
  const handleDrawerOpen = () => {
    setOpen(true);
d.arizona's avatar
d.arizona committed
387 388
  };

d.arizona's avatar
d.arizona committed
389 390
  const handleDrawerClose = () => {
    setOpen(false);
d.arizona's avatar
d.arizona committed
391 392
  };

Deni Rinaldi's avatar
Deni Rinaldi committed
393 394 395 396 397 398
  const resetIndex = () => {
    setSelectedIndex("")
    setSelectedIndexs("")
  }

  const selectSub = (e) => {
d.arizona's avatar
d.arizona committed
399
    setOpen(true)
Deni Rinaldi's avatar
Deni Rinaldi committed
400 401 402 403 404 405 406
    setSelectSub(e)
    setSelectedIndex("")
  }

  const selectIndex = (e) => {
    setSelectSub("")
    setSelectedIndex(e)
d.arizona's avatar
d.arizona committed
407
    // alert(e)
Deni Rinaldi's avatar
Deni Rinaldi committed
408
    // if (open === false) {
Deni Rinaldi's avatar
Deni Rinaldi committed
409
    // setOpen(true)
d.arizona's avatar
d.arizona committed
410
    // }
Deni Rinaldi's avatar
Deni Rinaldi committed
411 412
  }

d.arizona's avatar
d.arizona committed
413
  let { path, url } = useRouteMatch();
d.arizona's avatar
d.arizona committed
414

Deni Rinaldi's avatar
Deni Rinaldi committed
415 416
  const { height, width } = UseWindowDimensions();

417
  function handleCollapse(item) {
d.arizona's avatar
d.arizona committed
418
    setOpen(true);
419 420 421 422 423 424 425
    let arr = application
    let index = arr.findIndex((val) => val.label === item.label)
    arr[index].collapse = !arr[index].collapse
    setData({ ...application, application: arr })
  }

  function handleCollapseSetting(item) {
d.arizona's avatar
d.arizona committed
426
    setOpen(true);
427
    let arr = setting
d.arizona's avatar
d.arizona committed
428 429
    let index = arr.findIndex((val) => val.label === item.label)
    arr[index].collapse = !arr[index].collapse
430
    setData({ ...setting, setting: arr })
d.arizona's avatar
d.arizona committed
431 432
  }

d.arizona's avatar
d.arizona committed
433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455
  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
      </AppBar>
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
      >
d.arizona's avatar
d.arizona committed
456 457 458 459
        <div className={clsx(classes.drawer, {
          [classes.topleftOpen]: open,
          [classes.topleftClose]: !open,
        })}
460 461 462 463 464 465
          classes={{
            paper: clsx({
              [classes.topleftOpen]: open,
              [classes.topleftClose]: !open,
            }),
          }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
466 467 468
          {open === true ?

            <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
d.arizona's avatar
d.arizona committed
469
              <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center', marginLeft: 5 }} />
470
              <IconButton onClick={handleDrawerClose} style={{ outline: 'none' }}>
d.arizona's avatar
d.arizona committed
471
                <MenuIcon style={{ fill: 'white' }} />
Deni Rinaldi's avatar
Deni Rinaldi committed
472 473 474 475 476
              </IconButton>
            </div> :
            <IconButton
              color="inherit"
              aria-label="open drawer"
477
              style={{ outline: 'none' }}
Deni Rinaldi's avatar
Deni Rinaldi committed
478 479 480 481 482 483
              onClick={handleDrawerOpen}
              edge="start"
              className={clsx(classes.menuButton, {
                [classes.hide]: open,
              })}
            >
Deni Rinaldi's avatar
Deni Rinaldi committed
484 485 486 487 488

              <a data-tip={"Main Menu"} data-for={"main-menu"}>
                <MenuIcon style={{ fill: 'white', alignSelf: 'center' }} />
              </a>
              <ReactTooltip border={true} id={"main-menu"} place="bottom" type="light" effect="solid" />
Deni Rinaldi's avatar
Deni Rinaldi committed
489
            </IconButton>}
d.arizona's avatar
d.arizona committed
490
          {open &&
d.arizona's avatar
d.arizona committed
491
            <div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
492 493 494 495 496 497
              <Link to={"profile"}>
                <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>{userFullname}</Typography>
              </Link>
              <Link to={"profile"}>
                <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', marginTop: 10 }}>{userEmail}</Typography>
              </Link>
Deni Rinaldi's avatar
Deni Rinaldi committed
498
            </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
499
          }
d.arizona's avatar
d.arizona committed
500 501 502
        </div>
        <Divider />
        {open &&
503
          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45, display: 'flex', justifyContent: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
504 505 506
            <Link to={"profile"}>
              <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
                <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
507
                  {userPhoto === "" ? null : <img src={userPhoto} style={{ width: 72, height: 72, borderRadius: 50 }} />}
Deni Rinaldi's avatar
Deni Rinaldi committed
508
                </div>
d.arizona's avatar
d.arizona committed
509
              </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
510
            </Link>
d.arizona's avatar
d.arizona committed
511 512
          </div>
        }
Deni Rinaldi's avatar
Deni Rinaldi committed
513
        {open && application.length > 0 &&
Deni Rinaldi's avatar
Deni Rinaldi committed
514
          <div style={{ marginLeft: 20, marginTop: 10 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
515
            <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Application</Typography>
d.arizona's avatar
d.arizona committed
516 517
          </div>
        }
d.arizona's avatar
d.arizona committed
518
        <List>
519 520 521
          {application.map((item, index) => (
            <div style={{ marginTop: index === 0 ? null : 5 }} >
              {item.subItem.length !== 0 ?
Deni Rinaldi's avatar
Deni Rinaldi committed
522 523 524 525 526 527 528 529 530 531
                <a data-tip={item.label} data-for={item.label}>
                  <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10, cursor: 'pointer' }} onClick={() => { handleCollapse(item) }}>
                    <ListItem key={item.label}>
                      <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
                      <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                    </ListItem>
                    {item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                  </div>
                </a>
532 533 534
                :
                <Link to={`${url}/${item.path}`}>
                  <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
Deni Rinaldi's avatar
Deni Rinaldi committed
535 536 537 538 539 540 541
                    <a data-tip={item.label} data-for={item.label}>
                      <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
                        <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
                        <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                      </ListItem>
                    </a>
                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
542 543 544 545 546 547 548 549 550 551
                  </div>
                </Link>
              }
              {item.subItem.length !== 0 &&
                <div>
                  <Collapse in={item.collapse} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                      {item.subItem.map((sub, indexs) => {
                        return (
                          <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
Deni Rinaldi's avatar
Deni Rinaldi committed
552 553 554 555 556 557 558 559
                            <a data-tip={sub.label} data-for={sub.label}>
                              <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                                <ListItem button style={{ paddingLeft: 57 }}>
                                  <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                                </ListItem>
                              </div>
                            </a>
                            {!open && (<ReactTooltip border={true} id={sub.label} place="bottom" type="light" effect="solid" />)}
560 561 562 563 564 565 566 567 568 569
                          </Link>
                        )
                      })}
                    </List>
                  </Collapse>
                </div>
              }
            </div>
          ))}
        </List>
Deni Rinaldi's avatar
Deni Rinaldi committed
570
        {open && setting.length > 0 &&
571
          <div style={{ marginLeft: 20 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
572
            <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Setting</Typography>
573 574 575 576
          </div>
        }
        <List style={{ marginTop: !open ? -10 : null, marginLeft: !open ? -2 : null }}>
          {setting.map((item, index) => (
Deni Rinaldi's avatar
Deni Rinaldi committed
577
            <div style={{ marginTop: index === 0 ? null : 5 }} >
578
              {item.subItem.length !== 0 ?
Deni Rinaldi's avatar
Deni Rinaldi committed
579 580 581 582 583 584 585 586 587 588
                <a data-tip={item.label} data-for={item.label}>
                  <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10, cursor: 'pointer' }} onClick={() => { handleCollapseSetting(item) }}>
                    <ListItem key={item.label}>
                      <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
                      <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                    </ListItem>
                    {item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                  </div>
                </a>
d.arizona's avatar
d.arizona committed
589
                :
590 591
                <Link to={`${url}/${item.path}`}>
                  <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
Deni Rinaldi's avatar
Deni Rinaldi committed
592 593 594 595 596 597 598
                    <a data-tip={item.label} data-for={item.label}>
                      <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
                        <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
                        <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                      </ListItem>
                    </a>
                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
599 600
                  </div>
                </Link>
Deni Rinaldi's avatar
Deni Rinaldi committed
601
              }
602
              {item.subItem.length !== 0 &&
d.arizona's avatar
d.arizona committed
603
                <div>
d.arizona's avatar
d.arizona committed
604
                  <Collapse in={item.collapse} timeout="auto" unmountOnExit>
d.arizona's avatar
d.arizona committed
605
                    <List component="div" disablePadding>
Deni Rinaldi's avatar
Deni Rinaldi committed
606
                      {item.subItem.map((sub, indexs) => {
d.arizona's avatar
d.arizona committed
607
                        return (
d.arizona's avatar
d.arizona committed
608
                          <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
Deni Rinaldi's avatar
Deni Rinaldi committed
609 610 611 612 613 614 615 616
                            <a data-tip={sub.label} data-for={sub.label}>
                              <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                                <ListItem button style={{ paddingLeft: 57 }}>
                                  <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                                </ListItem>
                              </div>
                            </a>
                            {!open && (<ReactTooltip border={true} id={sub.label} place="bottom" type="light" effect="solid" />)}
d.arizona's avatar
d.arizona committed
617 618 619 620 621 622
                          </Link>
                        )
                      })}
                    </List>
                  </Collapse>
                </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
623 624
              }
            </div>
d.arizona's avatar
d.arizona committed
625 626
          ))}
        </List>
Deni Rinaldi's avatar
Deni Rinaldi committed
627
        {open &&
Deni Rinaldi's avatar
Deni Rinaldi committed
628
          <div style={{ marginLeft: 20, marginTop: 5, paddingBottom: 20 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
629 630 631 632 633 634 635 636 637 638 639 640
            <button
              style={{
                outline: 'none',
                backgroundColor: 'transparent',
                cursor: 'pointer',
                borderColor: 'transparent',
              }}
              onClick={() => logout()}>
              <Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Logout</Typography>
            </button>
          </div>
        }
d.arizona's avatar
d.arizona committed
641
      </Drawer>
d.arizona's avatar
d.arizona committed
642
      <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
643
        <div>
Deni Rinaldi's avatar
Deni Rinaldi committed
644
          {/* <div className={classes.toolbar} /> */}
d.arizona's avatar
d.arizona committed
645 646 647 648 649 650 651 652 653 654 655 656 657 658
          <MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
            <Switch>
              {HomeRoutes.map((route, index) => (
                // You can render a <Route> in as many places
                // as you want in your app. It will render along
                // with any other <Route>s that also match the URL.
                // So, a sidebar or breadcrumbs or anything else
                // that requires you to render multiple things
                // in multiple places at the same URL is nothing
                // more than multiple <Route>s.
                <Route
                  key={index}
                  path={route.path}
                  // exact={route.exact}
d.arizona's avatar
d.arizona committed
659 660
                  location={location}
                  children={<route.main height={height} width={width} open={open} location={location} selectIndex={selectIndex.bind(this)}/>}
d.arizona's avatar
d.arizona committed
661 662 663 664
                />
              ))}
            </Switch>
          </MuiPickersUtilsProvider>
Deni Rinaldi's avatar
Deni Rinaldi committed
665
          {/* <Footer>
Deni Rinaldi's avatar
Deni Rinaldi committed
666
            <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
667
          </Footer> */}
d.arizona's avatar
d.arizona committed
668
        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
669

Deni Rinaldi's avatar
Deni Rinaldi committed
670
      </div>
d.arizona's avatar
d.arizona committed
671 672 673
    </div>
  );
}