feat: add build target field to routes

feat: move towards single App.js file
fix: header component interaction with build target

new-lamassu-admin/src/components/layout/Header.js

@@ -21,6 +21,8 @@ import styles from './Header.styles'
 
 const useStyles = makeStyles(styles)
 
+const buildTarget = process.env.REACT_APP_BUILD_TARGET
+
 const HAS_UNREAD = gql`
   query getUnread {
     hasUnreadNotifications
@@ -37,6 +39,7 @@ const Subheader = ({ item, classes, user }) => {
           <ul className={classes.subheaderUl}>
             {item.children.map((it, idx) => {
               if (!R.includes(user.role, it.allowedRoles)) return <></>
+              if (!R.includes(buildTarget, it.targets)) return <></>
               return (
                 <li key={idx} className={classes.subheaderLi}>
                   <NavLink
@@ -129,6 +132,7 @@ const Header = memo(({ tree, user }) => {
             <ul className={classes.ul}>
               {tree.map((it, idx) => {
                 if (!R.includes(user.role, it.allowedRoles)) return <></>
+                if (!R.includes(buildTarget, it.targets)) return <></>
                 return (
                   <NavLink
                     key={idx}

new-lamassu-admin/src/index.js

@@ -1,24 +1,25 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+import App from './App'
 import * as serviceWorker from './serviceWorker'
 
-function importBuildTarget() {
+function checkBuildTarget() {
-  if (process.env.REACT_APP_BUILD_TARGET === 'LAMASSU') {
+  const buildTarget = process.env.REACT_APP_BUILD_TARGET
-    return import('./lamassu/App')
+
-  } else if (process.env.REACT_APP_BUILD_TARGET === 'PAZUZ') {
+  if (buildTarget !== 'LAMASSU' && buildTarget !== 'PAZUZ') {
-    return import('./pazuz/App')
-  } else {
     return Promise.reject(
       new Error('No such build target: ' + process.env.REACT_APP_BUILD_TARGET)
     )
   }
+
+  return Promise.resolve()
 }
 
-importBuildTarget().then(({ default: Environment }) =>
+checkBuildTarget().then(() =>
   ReactDOM.render(
     <React.StrictMode>
-      <Environment />
+      <App />
     </React.StrictMode>,
     document.getElementById('root')
   )

new-lamassu-admin/src/pazuz/App.js

@@ -1,179 +0,0 @@
-import { useQuery } from '@apollo/react-hooks'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import Grid from '@material-ui/core/Grid'
-import Slide from '@material-ui/core/Slide'
-import {
-  StylesProvider,
-  jssPreset,
-  MuiThemeProvider,
-  makeStyles
-} from '@material-ui/core/styles'
-import gql from 'graphql-tag'
-import { create } from 'jss'
-import extendJss from 'jss-plugin-extend'
-import React, { useContext, useState } from 'react'
-import {
-  useLocation,
-  useHistory,
-  BrowserRouter as Router
-} from 'react-router-dom'
-
-import AppContext from 'src/AppContext'
-import Header from 'src/components/layout/Header'
-import Sidebar from 'src/components/layout/Sidebar'
-import TitleSection from 'src/components/layout/TitleSection'
-import ApolloProvider from 'src/pazuz/apollo/Provider'
-import { tree, hasSidebar, Routes, getParent } from 'src/pazuz/routing/routes'
-import global from 'src/styling/global'
-import theme from 'src/styling/theme'
-import { backgroundColor, mainWidth } from 'src/styling/variables'
-
-if (process.env.NODE_ENV !== 'production') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render')
-  whyDidYouRender(React)
-}
-
-const jss = create({
-  plugins: [extendJss(), ...jssPreset().plugins]
-})
-
-const fill = '100%'
-const flexDirection = 'column'
-
-const useStyles = makeStyles({
-  ...global,
-  root: {
-    backgroundColor,
-    width: fill,
-    minHeight: fill,
-    display: 'flex',
-    flexDirection
-  },
-  wrapper: {
-    width: mainWidth,
-    height: fill,
-    margin: '0 auto',
-    flex: 1,
-    display: 'flex',
-    flexDirection
-  },
-  grid: {
-    flex: 1,
-    height: '100%'
-  },
-  contentWithSidebar: {
-    flex: 1,
-    marginLeft: 48,
-    paddingTop: 15
-  },
-  contentWithoutSidebar: {
-    width: mainWidth
-  }
-})
-
-const GET_USER_DATA = gql`
-  query userData {
-    userData {
-      id
-      username
-      role
-      enabled
-      last_accessed
-      last_accessed_from
-      last_accessed_address
-    }
-  }
-`
-
-const Main = () => {
-  const classes = useStyles()
-  const location = useLocation()
-  const history = useHistory()
-  const { wizardTested, userData, setUserData } = useContext(AppContext)
-
-  const { loading } = useQuery(GET_USER_DATA, {
-    onCompleted: userResponse => {
-      if (!userData && userResponse?.userData)
-        setUserData(userResponse.userData)
-    }
-  })
-
-  const route = location.pathname
-
-  const sidebar = hasSidebar(route)
-  const parent = sidebar ? getParent(route) : {}
-
-  const is404 = location.pathname === '/404'
-
-  const isSelected = it => location.pathname === it.route
-
-  const onClick = it => history.push(it.route)
-
-  const contentClassName = sidebar
-    ? classes.contentWithSidebar
-    : classes.contentWithoutSidebar
-
-  return (
-    <div className={classes.root}>
-      {!is404 && wizardTested && userData && (
-        <Header tree={tree} user={userData} />
-      )}
-      <main className={classes.wrapper}>
-        {sidebar && !is404 && wizardTested && (
-          <Slide
-            direction="left"
-            in={true}
-            mountOnEnter
-            unmountOnExit
-            children={
-              <div>
-                <TitleSection title={parent.title}></TitleSection>
-              </div>
-            }
-          />
-        )}
-
-        <Grid container className={classes.grid}>
-          {sidebar && !is404 && wizardTested && (
-            <Sidebar
-              data={parent.children}
-              isSelected={isSelected}
-              displayName={it => it.label}
-              onClick={onClick}
-            />
-          )}
-          <div className={contentClassName}>{!loading && <Routes />}</div>
-        </Grid>
-      </main>
-    </div>
-  )
-}
-
-const App = () => {
-  const [wizardTested, setWizardTested] = useState(false)
-  const [userData, setUserData] = useState(null)
-
-  const setRole = role => {
-    if (userData && userData.role !== role) {
-      setUserData({ ...userData, role })
-    }
-  }
-
-  return (
-    <AppContext.Provider
-      value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
-      <Router>
-        <ApolloProvider>
-          <StylesProvider jss={jss}>
-            <MuiThemeProvider theme={theme}>
-              <CssBaseline />
-              <Main />
-            </MuiThemeProvider>
-          </StylesProvider>
-        </ApolloProvider>
-      </Router>
-    </AppContext.Provider>
-  )
-}
-
-export default App

new-lamassu-admin/src/pazuz/apollo/Provider.js

@@ -1,77 +0,0 @@
-import { ApolloProvider } from '@apollo/react-hooks'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-import { ApolloClient } from 'apollo-client'
-import { ApolloLink } from 'apollo-link'
-import { onError } from 'apollo-link-error'
-import { HttpLink } from 'apollo-link-http'
-import React, { useContext } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
-
-import AppContext from 'src/AppContext'
-
-const URI =
-  process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
-
-const getClient = (history, location, setUserData, setRole) =>
-  new ApolloClient({
-    link: ApolloLink.from([
-      onError(({ graphQLErrors, networkError }) => {
-        if (graphQLErrors)
-          graphQLErrors.forEach(({ message, locations, path, extensions }) => {
-            if (extensions?.code === 'UNAUTHENTICATED') {
-              setUserData(null)
-              if (location.pathname !== '/login') history.push('/login')
-            }
-            console.log(
-              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-            )
-          })
-        if (networkError) console.log(`[Network error]: ${networkError}`)
-      }),
-      new ApolloLink((operation, forward) => {
-        return forward(operation).map(response => {
-          const context = operation.getContext()
-          const {
-            response: { headers }
-          } = context
-
-          if (headers) {
-            const role = headers.get('role')
-            setRole(role)
-          }
-
-          return response
-        })
-      }),
-      new HttpLink({
-        credentials: 'include',
-        uri: `${URI}/graphql`
-      })
-    ]),
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'ignore'
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all'
-      },
-      mutate: {
-        errorPolicy: 'all'
-      }
-    }
-  })
-
-const Provider = ({ children }) => {
-  const history = useHistory()
-  const location = useLocation()
-  const { setUserData, setRole } = useContext(AppContext)
-  const client = getClient(history, location, setUserData, setRole)
-
-  return <ApolloProvider client={client}>{children}</ApolloProvider>
-}
-
-export default Provider
-export { URI }

new-lamassu-admin/src/pazuz/routing/routes.js

@@ -1,417 +0,0 @@
-import Fade from '@material-ui/core/Fade'
-import Slide from '@material-ui/core/Slide'
-import { makeStyles } from '@material-ui/core/styles'
-import * as R from 'ramda'
-import React, { useContext } from 'react'
-import {
-  matchPath,
-  Redirect,
-  Switch,
-  useHistory,
-  useLocation
-} from 'react-router-dom'
-
-import AppContext from 'src/AppContext'
-import Login from 'src/pages/Authentication/Login'
-import Register from 'src/pages/Authentication/Register'
-import Reset2FA from 'src/pages/Authentication/Reset2FA'
-import ResetPassword from 'src/pages/Authentication/ResetPassword'
-import Blacklist from 'src/pages/Blacklist'
-import Cashout from 'src/pages/Cashout'
-import Commissions from 'src/pages/Commissions'
-// import ConfigMigration from 'src/pages/ConfigMigration'
-import { Customers, CustomerProfile } from 'src/pages/Customers'
-import Dashboard from 'src/pages/Dashboard'
-import Funding from 'src/pages/Funding'
-import Locales from 'src/pages/Locales'
-import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes'
-import MachineLogs from 'src/pages/MachineLogs'
-import Machines from 'src/pages/Machines'
-import CashCassettes from 'src/pages/Maintenance/CashCassettes'
-import MachineStatus from 'src/pages/Maintenance/MachineStatus'
-import Notifications from 'src/pages/Notifications/Notifications'
-import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar'
-import ContactInfo from 'src/pages/OperatorInfo/ContactInfo'
-import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting'
-import TermsConditions from 'src/pages/OperatorInfo/TermsConditions'
-import ServerLogs from 'src/pages/ServerLogs'
-import Services from 'src/pages/Services/Services'
-import SessionManagement from 'src/pages/SessionManagement/SessionManagement'
-import Transactions from 'src/pages/Transactions/Transactions'
-import Triggers from 'src/pages/Triggers'
-import UserManagement from 'src/pages/UserManagement/UserManagement'
-import Wizard from 'src/pages/Wizard'
-import ATMWallet from 'src/pazuz/pages/ATMWallet/ATMWallet'
-import PrivateRoute from 'src/routing/PrivateRoute'
-import PublicRoute from 'src/routing/PublicRoute'
-import { ROLES } from 'src/routing/utils'
-import { namespaces } from 'src/utils/config'
-
-const useStyles = makeStyles({
-  wrapper: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  }
-})
-
-const tree = [
-  {
-    key: 'transactions',
-    label: 'Transactions',
-    route: '/transactions',
-    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-    component: Transactions
-  },
-  {
-    key: 'maintenance',
-    label: 'Maintenance',
-    route: '/maintenance',
-    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-    get component() {
-      return () => <Redirect to={this.children[0].route} />
-    },
-    children: [
-      {
-        key: 'cash_cassettes',
-        label: 'Cash Cassettes',
-        route: '/maintenance/cash-cassettes',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: CashCassettes
-      },
-      {
-        key: 'funding',
-        label: 'Funding',
-        route: '/maintenance/funding',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Funding
-      },
-      {
-        key: 'logs',
-        label: 'Machine Logs',
-        route: '/maintenance/logs',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: MachineLogs
-      },
-      {
-        key: 'machine-status',
-        label: 'Machine Status',
-        route: '/maintenance/machine-status',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: MachineStatus
-      },
-      {
-        key: 'server-logs',
-        label: 'Server',
-        route: '/maintenance/server-logs',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: ServerLogs
-      }
-    ]
-  },
-  {
-    key: 'settings',
-    label: 'Settings',
-    route: '/settings',
-    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-    get component() {
-      return () => <Redirect to={this.children[0].route} />
-    },
-    children: [
-      {
-        key: namespaces.COMMISSIONS,
-        label: 'Commissions',
-        route: '/settings/commissions',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Commissions
-      },
-      {
-        key: namespaces.LOCALE,
-        label: 'Locales',
-        route: '/settings/locale',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Locales
-      },
-      {
-        key: namespaces.CASH_OUT,
-        label: 'Cash-out',
-        route: '/settings/cash-out',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Cashout
-      },
-      {
-        key: namespaces.NOTIFICATIONS,
-        label: 'Notifications',
-        route: '/settings/notifications',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Notifications
-      },
-      {
-        key: 'services',
-        label: '3rd party services',
-        route: '/settings/3rd-party-services',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Services
-      },
-      {
-        key: namespaces.OPERATOR_INFO,
-        label: 'Operator Info',
-        route: '/settings/operator-info',
-        title: 'Operator Information',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        get component() {
-          return () => (
-            <Redirect
-              to={{
-                pathname: this.children[0].route,
-                state: { prev: this.state?.prev }
-              }}
-            />
-          )
-        },
-        children: [
-          {
-            key: 'contact-info',
-            label: 'Contact information',
-            route: '/settings/operator-info/contact-info',
-            allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-            component: ContactInfo
-          },
-          {
-            key: 'receipt-printing',
-            label: 'Receipt',
-            route: '/settings/operator-info/receipt-printing',
-            allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-            component: ReceiptPrinting
-          },
-          {
-            key: 'coin-atm-radar',
-            label: 'Coin ATM Radar',
-            route: '/settings/operator-info/coin-atm-radar',
-            allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-            component: CoinAtmRadar
-          },
-          {
-            key: 'terms-conditions',
-            label: 'Terms & Conditions',
-            route: '/settings/operator-info/terms-conditions',
-            allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-            component: TermsConditions
-          }
-        ]
-      }
-    ]
-  },
-  {
-    key: 'compliance',
-    label: 'Compliance',
-    route: '/compliance',
-    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-    get component() {
-      return () => <Redirect to={this.children[0].route} />
-    },
-    children: [
-      {
-        key: 'triggers',
-        label: 'Triggers',
-        route: '/compliance/triggers',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Triggers
-      },
-      {
-        key: 'customers',
-        label: 'Customers',
-        route: '/compliance/customers',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Customers
-      },
-      {
-        key: 'blacklist',
-        label: 'Blacklist',
-        route: '/compliance/blacklist',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: Blacklist
-      },
-      {
-        key: 'promo-codes',
-        label: 'Promo Codes',
-        route: '/compliance/loyalty/codes',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: PromoCodes
-      },
-      {
-        key: 'customer',
-        route: '/compliance/customer/:id',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: CustomerProfile
-      }
-    ]
-  },
-  {
-    key: 'accounting',
-    label: 'Accounting',
-    route: '/accounting',
-    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-    get component() {
-      return () => <Redirect to={this.children[0].route} />
-    },
-    children: [
-      {
-        key: 'atmwallets',
-        label: 'ATM Wallets',
-        route: '/accounting/wallets',
-        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
-        component: ATMWallet
-      }
-    ]
-  },
-  {
-    key: 'system',
-    label: 'System',
-    route: '/system',
-    allowedRoles: [ROLES.SUPERUSER],
-    get component() {
-      return () => <Redirect to={this.children[0].route} />
-    },
-    children: [
-      {
-        key: 'user-management',
-        label: 'User Management',
-        route: '/system/user-management',
-        allowedRoles: [ROLES.SUPERUSER],
-        component: UserManagement
-      },
-      {
-        key: 'session-management',
-        label: 'Session Management',
-        route: '/system/session-management',
-        allowedRoles: [ROLES.SUPERUSER],
-        component: SessionManagement
-      }
-    ]
-  }
-]
-
-const map = R.map(R.when(R.has('children'), R.prop('children')))
-const mappedRoutes = R.compose(R.flatten, map)(tree)
-const parentRoutes = R.filter(R.has('children'))(mappedRoutes).concat(
-  R.filter(R.has('children'))(tree)
-)
-const leafRoutes = R.compose(R.flatten, map)(mappedRoutes)
-
-const flattened = R.concat(leafRoutes, parentRoutes)
-
-const hasSidebar = route =>
-  R.any(r => r.route === route)(
-    R.compose(
-      R.flatten,
-      R.map(R.prop('children')),
-      R.filter(R.has('children'))
-    )(mappedRoutes)
-  )
-
-const getParent = route =>
-  R.find(
-    R.propEq(
-      'route',
-      R.dropLast(
-        1,
-        R.dropLastWhile(x => x !== '/', route)
-      )
-    )
-  )(flattened)
-
-const Routes = () => {
-  const classes = useStyles()
-
-  const history = useHistory()
-  const location = useLocation()
-  const { wizardTested, userData } = useContext(AppContext)
-
-  const dontTriggerPages = [
-    '/404',
-    '/register',
-    '/wizard',
-    '/login',
-    '/register',
-    '/resetpassword',
-    '/reset2fa'
-  ]
-
-  if (!wizardTested && !R.contains(location.pathname)(dontTriggerPages)) {
-    history.push('/wizard')
-    return null
-  }
-
-  const getFilteredRoutes = () => {
-    if (!userData) return []
-    return flattened.filter(value => {
-      const keys = value.allowedRoles
-      return R.includes(userData.role, keys)
-    })
-  }
-
-  const Transition = location.state ? Slide : Fade
-
-  const transitionProps =
-    Transition === Slide
-      ? {
-          direction:
-            R.findIndex(R.propEq('route', location.state.prev))(leafRoutes) >
-            R.findIndex(R.propEq('route', location.pathname))(leafRoutes)
-              ? 'right'
-              : 'left'
-        }
-      : { timeout: 400 }
-
-  return (
-    <Switch>
-      <PrivateRoute exact path="/">
-        <Redirect to={{ pathname: '/dashboard' }} />
-      </PrivateRoute>
-      <PrivateRoute path={'/dashboard'}>
-        <Transition
-          className={classes.wrapper}
-          {...transitionProps}
-          in={true}
-          mountOnEnter
-          unmountOnExit
-          children={
-            <div className={classes.wrapper}>
-              <Dashboard />
-            </div>
-          }
-        />
-      </PrivateRoute>
-      <PrivateRoute path="/machines" component={Machines} />
-      <PrivateRoute path="/wizard" component={Wizard} />
-      <PublicRoute path="/register" component={Register} />
-      {/* <Route path="/configmigration" component={ConfigMigration} /> */}
-      <PublicRoute path="/login" restricted component={Login} />
-      <PublicRoute path="/resetpassword" component={ResetPassword} />
-      <PublicRoute path="/reset2fa" component={Reset2FA} />
-      {getFilteredRoutes().map(({ route, component: Page, key }) => (
-        <PrivateRoute path={route} key={key}>
-          <Transition
-            className={classes.wrapper}
-            {...transitionProps}
-            in={!!matchPath(location.pathname, { path: route })}
-            mountOnEnter
-            unmountOnExit
-            children={
-              <div className={classes.wrapper}>
-                <Page name={key} />
-              </div>
-            }
-          />
-        </PrivateRoute>
-      ))}
-      <PublicRoute path="/404" />
-      <PublicRoute path="*">
-        <Redirect to={{ pathname: '/404' }} />
-      </PublicRoute>
-    </Switch>
-  )
-}
-export { tree, getParent, hasSidebar, Routes }

new-lamassu-admin/src/routing/routes.js

@@ -12,6 +12,7 @@ import {
 } from 'react-router-dom'
 
 import AppContext from 'src/AppContext'
+import ATMWallet from 'src/pages/ATMWallet/ATMWallet'
 import Login from 'src/pages/Authentication/Login'
 import Register from 'src/pages/Authentication/Register'
 import Reset2FA from 'src/pages/Authentication/Reset2FA'
@@ -46,7 +47,7 @@ import { namespaces } from 'src/utils/config'
 
 import PrivateRoute from './PrivateRoute'
 import PublicRoute from './PublicRoute'
-import { ROLES } from './utils'
+import { BUILD_TARGETS, ROLES } from './utils'
 
 const useStyles = makeStyles({
   wrapper: {
@@ -63,6 +64,7 @@ const tree = [
     label: 'Transactions',
     route: '/transactions',
     allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
     component: Transactions
   },
   {
@@ -70,6 +72,7 @@ const tree = [
     label: 'Maintenance',
     route: '/maintenance',
     allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
     get component() {
       return () => <Redirect to={this.children[0].route} />
     },
@@ -79,6 +82,7 @@ const tree = [
         label: 'Cash Cassettes',
         route: '/maintenance/cash-cassettes',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: CashCassettes
       },
       {
@@ -86,6 +90,7 @@ const tree = [
         label: 'Funding',
         route: '/maintenance/funding',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Funding
       },
       {
@@ -93,6 +98,7 @@ const tree = [
         label: 'Machine Logs',
         route: '/maintenance/logs',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: MachineLogs
       },
       {
@@ -100,6 +106,7 @@ const tree = [
         label: 'Machine Status',
         route: '/maintenance/machine-status',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: MachineStatus
       },
       {
@@ -107,6 +114,7 @@ const tree = [
         label: 'Server',
         route: '/maintenance/server-logs',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: ServerLogs
       }
     ]
@@ -116,6 +124,7 @@ const tree = [
     label: 'Settings',
     route: '/settings',
     allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
     get component() {
       return () => <Redirect to={this.children[0].route} />
     },
@@ -125,6 +134,7 @@ const tree = [
         label: 'Commissions',
         route: '/settings/commissions',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Commissions
       },
       {
@@ -132,6 +142,7 @@ const tree = [
         label: 'Locales',
         route: '/settings/locale',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Locales
       },
       {
@@ -139,6 +150,7 @@ const tree = [
         label: 'Cash-out',
         route: '/settings/cash-out',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Cashout
       },
       {
@@ -146,6 +158,7 @@ const tree = [
         label: 'Notifications',
         route: '/settings/notifications',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Notifications
       },
       {
@@ -153,6 +166,7 @@ const tree = [
         label: '3rd party services',
         route: '/settings/3rd-party-services',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Services
       },
       {
@@ -160,6 +174,7 @@ const tree = [
         label: 'Wallet',
         route: '/settings/wallet-settings',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU],
         component: WalletSettings
       },
       {
@@ -168,6 +183,7 @@ const tree = [
         route: '/settings/operator-info',
         title: 'Operator Information',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         get component() {
           return () => (
             <Redirect
@@ -184,6 +200,7 @@ const tree = [
             label: 'Contact information',
             route: '/settings/operator-info/contact-info',
             allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+            targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
             component: ContactInfo
           },
           {
@@ -191,6 +208,7 @@ const tree = [
             label: 'Receipt',
             route: '/settings/operator-info/receipt-printing',
             allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+            targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
             component: ReceiptPrinting
           },
           {
@@ -198,6 +216,7 @@ const tree = [
             label: 'Coin ATM Radar',
             route: '/settings/operator-info/coin-atm-radar',
             allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+            targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
             component: CoinAtmRadar
           },
           {
@@ -205,6 +224,7 @@ const tree = [
             label: 'Terms & Conditions',
             route: '/settings/operator-info/terms-conditions',
             allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+            targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
             component: TermsConditions
           }
         ]
@@ -216,6 +236,7 @@ const tree = [
     label: 'Compliance',
     route: '/compliance',
     allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
     get component() {
       return () => <Redirect to={this.children[0].route} />
     },
@@ -225,6 +246,7 @@ const tree = [
         label: 'Triggers',
         route: '/compliance/triggers',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Triggers
       },
       {
@@ -232,6 +254,7 @@ const tree = [
         label: 'Customers',
         route: '/compliance/customers',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Customers
       },
       {
@@ -239,6 +262,7 @@ const tree = [
         label: 'Blacklist',
         route: '/compliance/blacklist',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: Blacklist
       },
       {
@@ -246,21 +270,44 @@ const tree = [
         label: 'Promo Codes',
         route: '/compliance/loyalty/codes',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: PromoCodes
       },
       {
         key: 'customer',
         route: '/compliance/customer/:id',
         allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: CustomerProfile
       }
     ]
   },
+  {
+    key: 'accounting',
+    label: 'Accounting',
+    route: '/accounting',
+    allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.PAZUZ],
+    get component() {
+      return () => <Redirect to={this.children[0].route} />
+    },
+    children: [
+      {
+        key: 'atmwallets',
+        label: 'ATM Wallets',
+        route: '/accounting/wallets',
+        allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.PAZUZ],
+        component: ATMWallet
+      }
+    ]
+  },
   {
     key: 'system',
     label: 'System',
     route: '/system',
     allowedRoles: [ROLES.SUPERUSER],
+    targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
     get component() {
       return () => <Redirect to={this.children[0].route} />
     },
@@ -270,6 +317,7 @@ const tree = [
         label: 'User Management',
         route: '/system/user-management',
         allowedRoles: [ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: UserManagement
       },
       {
@@ -277,6 +325,7 @@ const tree = [
         label: 'Session Management',
         route: '/system/session-management',
         allowedRoles: [ROLES.SUPERUSER],
+        targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
         component: SessionManagement
       }
     ]
@@ -337,10 +386,19 @@ const Routes = () => {
   const getFilteredRoutes = () => {
     if (!userData) return []
 
-    return flattened.filter(value => {
+    const currentBuildTarget = process.env.REACT_APP_BUILD_TARGET
+
+    const roleFilter = flattened.filter(value => {
       const keys = value.allowedRoles
       return R.includes(userData.role, keys)
     })
+
+    const buildFilter = roleFilter.filter(value => {
+      const keys = value.targets
+      return R.includes(currentBuildTarget, keys)
+    })
+
+    return buildFilter
   }
 
   const Transition = location.state ? Slide : Fade

new-lamassu-admin/src/routing/utils.js

@@ -9,3 +9,8 @@ export const ROLES = {
   USER: 'user',
   SUPERUSER: 'superuser'
 }
+
+export const BUILD_TARGETS = {
+  LAMASSU: 'LAMASSU',
+  PAZUZ: 'PAZUZ'
+}