re-structure to monorepo.

packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import preferencesRoutes from '@/routes/preferences';
+
+export default function DashboardContentRoute() {
+  return (
+    <Route pathname="/preferences">
+      <Switch>
+        {preferencesRoutes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${route.path}`}
+            exact={route.exact}
+            component={route.component}
+          />
+        ))}
+      </Switch>
+    </Route>
+  );
+}

packages/webapp/src/components/Preferences/PreferencesPage.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import classNames from 'classnames';
+import * as R from 'ramda';
+
+import { CLASSES } from '@/constants/classes';
+
+import PreferencesTopbar from '@/components/Preferences/PreferencesTopbar';
+import PreferencesContentRoute from '@/components/Preferences/PreferencesContentRoute';
+import DashboardErrorBoundary from '@/components/Dashboard/DashboardErrorBoundary';
+import PreferencesSidebar from '@/components/Preferences/PreferencesSidebar';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+import '@/style/pages/Preferences/Page.scss';
+
+/**
+ * Preferences page.
+ */
+function PreferencesPage({ toggleSidebarExpand }) {
+  // Shrink the dashboard sidebar once open application preferences page.
+  React.useEffect(() => {
+    toggleSidebarExpand(false);
+  }, [toggleSidebarExpand]);
+
+  return (
+    <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
+      <div
+        id={'dashboard'}
+        className={classNames(
+          CLASSES.DASHBOARD_CONTENT,
+          CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+        )}
+      >
+        <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
+          <PreferencesSidebar />
+
+          <div className={CLASSES.PREFERENCES_PAGE_CONTENT}>
+            <PreferencesTopbar pageTitle={'asdad'} />
+            <PreferencesContentRoute />
+          </div>
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+}
+
+export default R.compose(withDashboardActions)(PreferencesPage);

packages/webapp/src/components/Preferences/PreferencesSidebar.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { useHistory, useLocation } from 'react-router-dom';
+import { FormattedMessage as T } from '@/components';
+import preferencesMenu from '@/constants/preferencesMenu';
+import PreferencesSidebarContainer from './PreferencesSidebarContainer';
+
+import '@/style/pages/Preferences/Sidebar.scss';
+
+/**
+ * Preferences sidebar.
+ */
+export default function PreferencesSidebar() {
+  const history = useHistory();
+  const location = useLocation();
+
+  const items = preferencesMenu.map((item) =>
+    item.divider ? (
+      <MenuDivider title={item.title} />
+    ) : (
+      <MenuItem
+        active={item.href && item.href === location.pathname}
+        text={item.text}
+        label={item.label}
+        disabled={item.disabled}
+        onClick={() => {
+          history.push(item.href);
+        }}
+      />
+    ),
+  );
+
+  return (
+    <PreferencesSidebarContainer>
+      <div class="preferences-sidebar__head">
+        <h2>{<T id={'preferences'} />}</h2>
+      </div>
+
+      <Menu className="preferences-sidebar__menu">{items}</Menu>
+    </PreferencesSidebarContainer>
+  );
+}

packages/webapp/src/components/Preferences/PreferencesSidebarContainer.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { Scrollbar } from 'react-scrollbars-custom';
+import { CLASSES } from '@/constants/classes';
+
+export default function PreferencesSidebarContainer({ children }) {
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_SIDEBAR,
+        CLASSES.PREFERENCES_SIDEBAR,
+      )}
+    >
+      <div class="preferences-sidebar__wrapper">
+        <Scrollbar noDefaultStyles={true}>
+          <div class="preferences-sidebar__inner">{children}</div>
+        </Scrollbar>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/components/Preferences/PreferencesSubContent.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import React from 'react';
+import preferencesTabs from '@/routes/preferencesTabs';
+import {Switch, Route, useRouteMatch} from 'react-router-dom';
+
+export default function PreferencesSubContent({ preferenceTab }) {
+  const routes = preferencesTabs[preferenceTab];
+  const { path } = useRouteMatch();
+
+  if (routes.length <= 0) { return null; }
+
+  return (
+    <Switch>
+      { routes.map((route, index) => (
+        <Route
+          key={index}
+          path={`${path}/${route.path}`}
+          exact={route.exact}
+          component={route.component}
+        />          
+      ))}
+    </Switch>);
+}

packages/webapp/src/components/Preferences/PreferencesTopbar.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+
+import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
+import UsersActions from '@/containers/Preferences/Users/UsersActions';
+import CurrenciesActions from '@/containers/Preferences/Currencies/CurrenciesActions';
+import WarehousesActions from '@/containers/Preferences/Warehouses/WarehousesActions';
+import BranchesActions from '@/containers/Preferences/Branches/BranchesActions';
+import withDashboard from '@/containers/Dashboard/withDashboard';
+
+import { compose } from '@/utils';
+
+import '@/style/pages/Preferences/Topbar.scss';
+
+/**
+ * Preferences topbar.
+ */
+function PreferencesTopbar({ preferencesPageTitle }) {
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_TOPBAR,
+        CLASSES.PREFERENCES_TOPBAR,
+      )}
+    >
+      <div class="preferences-topbar__title">
+        <h2>{preferencesPageTitle}</h2>
+      </div>
+      <div class="preferences-topbar__actions">
+        <Route pathname="/preferences">
+          <Switch>
+            <Route exact path={'/preferences/users'} component={UsersActions} />
+            <Route
+              exact
+              path={'/preferences/currencies'}
+              component={CurrenciesActions}
+            />
+            <Route
+              exact
+              path={'/preferences/warehouses'}
+              component={WarehousesActions}
+            />
+            <Route
+              exact
+              path={'/preferences/branches'}
+              component={BranchesActions}
+            />
+          </Switch>
+        </Route>
+      </div>
+
+      <div class="preferences-topbar__user">
+        <DashboardTopbarUser />
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboard(({ preferencesPageTitle }) => ({ preferencesPageTitle })),
+)(PreferencesTopbar);